@charset "UTF-8";

/*
  Homigo Maid PWA - automatic system dark mode.
  Loaded last so it can safely adapt components that were originally authored
  for the light Homigo theme without duplicating page markup.
*/

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #07101F;
    --surface: #101A2D;
    --surface-2: #17243A;
    --text: #F4F7FC;
    --muted: #A8B3C8;
    --border: #283752;

    --pink-soft: #3B2032;
    --success-soft: #15382C;
    --warning-soft: #3A2B16;
    --danger-soft: #3B1E27;

    --shadow-sm: 0 4px 18px rgba(0, 0, 0, .24);
    --shadow-md: 0 14px 42px rgba(0, 0, 0, .34);
    --shadow-float: 0 22px 70px rgba(0, 0, 0, .48);
  }

  html,
  body {
    background: var(--cream);
    color: var(--text);
  }

  body {
    background:
      radial-gradient(circle at 100% -10%, rgba(255, 107, 157, .11), transparent 28%),
      var(--cream);
  }

  ::selection {
    background: #6B2E49;
    color: #FFFFFF;
  }

  /* Main chrome */
  .app-header {
    background: rgba(7, 16, 31, .96);
    box-shadow: 0 5px 24px rgba(0, 0, 0, .28);
  }

  .bottom-nav {
    background: rgba(16, 26, 45, .95);
    border-color: var(--border);
    box-shadow: 0 15px 38px rgba(0, 0, 0, .38);
  }

  .bottom-nav a {
    color: #929EB4;
  }

  .bottom-nav a.active {
    color: var(--text);
    background: var(--pink-soft);
  }

  /* Generic surfaces */
  .card,
  .stat-card,
  .quick-action,
  .login-card,
  .offer-card,
  .chat-message,
  .profile-menu a,
  .profile-menu button,
  .date-chip,
  .input,
  .select,
  .textarea {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
  }

  .card,
  .stat-card,
  .quick-action {
    border-color: var(--border);
  }

  .card--flat {
    background: var(--surface);
  }

  .card--pink-soft {
    background: var(--pink-soft);
    border-color: #5A2B42;
  }

  .card--success {
    background: var(--success-soft);
    border-color: #23523F;
  }

  .card--warning {
    background: var(--warning-soft);
    border-color: #5C4220;
  }

  /* Keep branded navy cards navy in both modes. */
  .card--navy,
  .home-hero,
  .toast,
  .button--navy,
  .chat-message.mine {
    color: #FFFFFF;
  }

  .home-hero {
    background: linear-gradient(145deg, #0B1836, #132B59);
  }

  /* Inputs and controls */
  .button {
    color: var(--text);
    background: var(--surface-2);
  }

  .button--navy,
  .button--pink,
  .button--success {
    color: #FFFFFF;
  }

  .button--ghost {
    background: var(--surface);
    border-color: var(--border);
  }

  .input::placeholder,
  .textarea::placeholder {
    color: #77839A;
  }

  .toggle-track {
    background: #46516A;
  }

  .toggle-track::after {
    background: #F5F7FB;
  }

  .progress {
    background: #25324A;
  }

  /* Text whose light theme intentionally used brand navy. */
  .empty-state h3,
  .money,
  .profile-menu a,
  .profile-menu button {
    color: var(--text);
  }

  .badge--navy {
    background: #202E49;
    color: #DAE4F8;
  }

  .badge--warning,
  .notice--warning,
  .dev-code {
    color: #F2C77D;
  }

  .notice--success {
    color: #7BD3A8;
  }

  .notice--danger {
    color: #FF9AAA;
  }

  /* Secondary pieces */
  .avatar {
    background: #1A2740;
    color: #E7EDFA;
  }

  .document-icon {
    background: #1A2740;
    color: #DCE6FA;
  }

  .location-card {
    background: linear-gradient(145deg, #121E33, #17243A);
    border-color: var(--border);
  }

  .timeline-marker span {
    border-color: #536079;
    background: var(--surface);
  }

  .timeline-marker::after {
    background: #33415B;
  }

  .date-chip.active {
    background: #152A55;
    border-color: #274372;
    color: #FFFFFF;
  }

  .offer-overlay {
    background: rgba(2, 7, 18, .82);
  }

  .offer-radar {
    border-color: var(--surface);
  }

  .chat-message {
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
  }

  .chat-composer {
    background: rgba(7, 16, 31, .93);
  }

  .spinner--navy {
    border-color: #3A475E;
    border-top-color: var(--pink);
  }

  .chevron {
    color: #71809B;
  }

  /* Refresh buttons in modular page fragments currently use an inline light background. */
  #notificationsRefresh,
  #bookingsRefresh,
  #scheduleRefresh {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
  }

  /* Dark skeleton shimmer. */
  .skeleton {
    background: linear-gradient(90deg, #172238 25%, #22314D 38%, #172238 60%);
    background-size: 400% 100%;
  }
}

@media (prefers-color-scheme: dark){
  .search-box,.service-card,.category-chip,.profile-menu a,.profile-menu button,.verification-card,.chat-message{background:var(--surface)!important}
  .service-card__image{background:linear-gradient(145deg,#101e36,#2b1b31)}
  .map-box{background:#0b1729;border-color:var(--border)}
  .offering-card__price{color:var(--text)}
  .chat-composer{background:rgba(8,18,34,.92)}
  .booking-radar{background:#122443}
}