/* ==========================================================================
   premium-dark.css — Dark-mode layer for the AZ Service premium web.

   WHY THIS FILE EXISTS
   The premium UI (custom-landing-page.css) defines its palette as --ez-* tokens
   in :root only and hardcodes many light surfaces. The served *.min.css carries
   NO [data-bs-theme="dark"] rules, so turning on dark mode left the whole page
   light while a few inline-styled widgets (chat card, notification dropdown)
   went dark — a dark card on a light page.

   This layer is loaded AFTER custom-landing-page.min.css and scopes every rule
   under [data-bs-theme="dark"], so it applies ONLY in dark mode and never
   touches light mode. Palette matches the existing dark chat card for
   consistency (#161b24 surface, #28303d border, #e7ecf3 text).
   ========================================================================== */

/* 1) TOKEN LAYER — redefining these flows through everything that uses
      var(--ez-x): body background, .ppd cards (well tokenized), parts of
      the .ez and .cdp systems, and any future token-driven component. */
[data-bs-theme="dark"]{
    color-scheme:dark;
    --ez-bg:#0d1017;            /* page background (behind cards) */
    --ez-surface:#161b24;       /* cards / panels (matches chat card) */
    --ez-surface-2:#1d2430;     /* elevated / hover / inset */
    --ez-border:#28303d;
    --ez-border-light:#212835;
    --ez-text:#e7ecf3;
    --ez-text-sub:#aab4c3;
    --ez-text-muted:#8a93a3;
    --ez-primary-light:#1c2740; /* was a pale-blue tint used as soft bg */
    --ez-primary-xlt:#141a27;
    --ez-link:#8fb0f0;          /* lightened brand blue for text/links on dark */
    --ez-shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --ez-shadow:0 6px 24px rgba(0,0,0,.45);
    --ez-shadow-lg:0 14px 44px rgba(0,0,0,.55);
}

/* 2) BASE — surfaces, default text, dividers, links */
[data-bs-theme="dark"] body.body-bg,
[data-bs-theme="dark"] .main-content{ background-color:var(--ez-bg)!important; color:var(--ez-text); }
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6{ color:var(--ez-text); }
[data-bs-theme="dark"] hr{ border-color:var(--ez-border); opacity:1; }
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] small.text-muted{ color:var(--ez-text-muted)!important; }

/* 3) GENERIC FORM CONTROLS (covers Bootstrap + bespoke fields by element) */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input[type="tel"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select{
    background-color:var(--ez-surface-2);
    border-color:var(--ez-border);
    color:var(--ez-text);
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder,
[data-bs-theme="dark"] input::placeholder{ color:var(--ez-text-muted); opacity:1; }

/* 4) SHARED CHROME — mobile off-canvas menu, hover/mega menus, header dropdowns
      (these hardcode #fff bg + dark text + light hovers). */
[data-bs-theme="dark"] .mobile-offcanvas,
[data-bs-theme="dark"] .header-hover-menu,
[data-bs-theme="dark"] .header-dropdown,
[data-bs-theme="dark"] .nav-dropdown{
    background-color:var(--ez-surface)!important;
    border-color:var(--ez-border)!important;
    color:var(--ez-text);
}
[data-bs-theme="dark"] .mobile-offcanvas a,
[data-bs-theme="dark"] .header-hover-menu a{ color:var(--ez-text); }
[data-bs-theme="dark"] .mobile-offcanvas a:hover,
[data-bs-theme="dark"] .header-hover-menu a:hover{ background-color:var(--ez-surface-2); }
/* Main-menu link TEXT: the desktop horizontal nav gives .mnav-title its own
   navy color (for the light-mode white header), so the `a` color above doesn't
   reach it -> navy-on-dark, nearly invisible. Force the text spans light. */
[data-bs-theme="dark"] .horizontal-nav .mnav-title,
[data-bs-theme="dark"] .header-hover-menu .mnav-title{ color:var(--ez-text)!important; }
[data-bs-theme="dark"] .horizontal-nav .mnav-subtitle,
[data-bs-theme="dark"] .header-hover-menu .mnav-subtitle{ color:var(--ez-text-muted)!important; }
[data-bs-theme="dark"] .horizontal-nav .mnav-link--active .mnav-title,
[data-bs-theme="dark"] .header-hover-menu .mnav-link--active .mnav-title{ color:#9db4ec!important; }

/* 5) CUSTOMER ACCOUNT SUB-NAV (Overview / Messages / Saved / Profile) */
[data-bs-theme="dark"] .az-subnav{ border-bottom-color:var(--ez-border); }
[data-bs-theme="dark"] .az-subnav a{ color:var(--ez-text-muted); }
[data-bs-theme="dark"] .az-subnav a:hover{ color:var(--ez-text); }
[data-bs-theme="dark"] .az-subnav a.active{ color:var(--ez-link); border-bottom-color:var(--ez-link); }

/* 6) CARDS / PANELS / SURFACES — the #fff cluster (~181 uses) across every
      page family. Grouped so one rule darkens the whole set. */
[data-bs-theme="dark"] .ez-panel,
[data-bs-theme="dark"] .cdp-card,
[data-bs-theme="dark"] .cdp-content .service-box-card,
[data-bs-theme="dark"] .bds-card,
[data-bs-theme="dark"] .bw-card,
[data-bs-theme="dark"] .bw-summary-card,
[data-bs-theme="dark"] .prov-card,
[data-bs-theme="dark"] .ppd-side-card,
[data-bs-theme="dark"] .ppd-card,
[data-bs-theme="dark"] .hc-quick-card,
[data-bs-theme="dark"] .hc-price-card,
[data-bs-theme="dark"] .sub-plan-card,
[data-bs-theme="dark"] .au-value-card,
[data-bs-theme="dark"] .fb-form-card,
[data-bs-theme="dark"] .preg-form-card,
[data-bs-theme="dark"] .req-form-card,
[data-bs-theme="dark"] .legal-content,
[data-bs-theme="dark"] .auth-card,
[data-bs-theme="dark"] .login-card,
[data-bs-theme="dark"] .card{
    background-color:var(--ez-surface)!important;
    border-color:var(--ez-border)!important;
    color:var(--ez-text);
    box-shadow:var(--ez-shadow);
}

/* Soft / tinted inset surfaces (chips, image wraps, hovers, skeletons) */
[data-bs-theme="dark"] .bds-tag,
[data-bs-theme="dark"] .bw-service-img-wrap,
[data-bs-theme="dark"] .bw-summary-img,
[data-bs-theme="dark"] .ppd-svc-img-wrap,
[data-bs-theme="dark"] .ppd-svc-placeholder,
[data-bs-theme="dark"] .hc-hiw-section,
[data-bs-theme="dark"] .hc-faq-section,
[data-bs-theme="dark"] .legal-body,
[data-bs-theme="dark"] .az-search-field{
    background-color:var(--ez-surface-2)!important;
    border-color:var(--ez-border)!important;
    color:var(--ez-text);
}

/* 6b) Provider public-detail content panels (.ppd-section: Services, Reviews…) —
       these were rendering white on the dark page. */
[data-bs-theme="dark"] .ppd-section{
    background-color:var(--ez-surface)!important;
    border-color:var(--ez-border)!important;
    color:var(--ez-text);
}
[data-bs-theme="dark"] .ppd-section h2,
[data-bs-theme="dark"] .ppd-section h3,
[data-bs-theme="dark"] .ppd-section h4,
[data-bs-theme="dark"] .ppd-section [class*="-title"]{ color:var(--ez-text); }
[data-bs-theme="dark"] .ppd-empty-msg{ background-color:transparent!important; }
/* Loading-skeleton placeholders should be dark too (they default to light grey). */
[data-bs-theme="dark"] [class*="ppd-sk"],
[data-bs-theme="dark"] .ppd-svc-card{ background:var(--ez-surface-2)!important; border-color:var(--ez-border)!important; }

/* 7) MODALS / OVERLAYS */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .bw-modal,
[data-bs-theme="dark"] .az-tm-modal,
[data-bs-theme="dark"] .az-tm-modal-body,
[data-bs-theme="dark"] .az-tm-modal-head{
    background-color:var(--ez-surface)!important;
    border-color:var(--ez-border)!important;
    color:var(--ez-text);
}

/* 8) TABLES (provider list, ledgers) */
[data-bs-theme="dark"] .prov-table,
[data-bs-theme="dark"] table.prov-table{ color:var(--ez-text); }
[data-bs-theme="dark"] .prov-table thead th{
    background-color:var(--ez-surface-2); color:var(--ez-text-sub); border-color:var(--ez-border);
}
[data-bs-theme="dark"] .prov-table tbody td{ border-color:var(--ez-border); }
[data-bs-theme="dark"] .prov-table tbody tr:hover{ background-color:var(--ez-surface-2); }
[data-bs-theme="dark"] .bds-ledger-row,
[data-bs-theme="dark"] .bw-addon-row{ border-color:var(--ez-border); }

/* 9) OFF-TOKEN DARK HEADINGS / BODY TEXT that hardcode dark hex (must go light).
      Targets the title/sub/desc/meta/label families the inventory flagged. */
[data-bs-theme="dark"] .bds-page-title,
[data-bs-theme="dark"] .bds-card-title,
[data-bs-theme="dark"] .bw-title,[data-bs-theme="dark"] .bw-card-title,
[data-bs-theme="dark"] .prov-title,[data-bs-theme="dark"] .prov-name,
[data-bs-theme="dark"] .ppd-title,[data-bs-theme="dark"] .ppd-name,
[data-bs-theme="dark"] .hc-title,[data-bs-theme="dark"] .sub-title,
[data-bs-theme="dark"] .fb-title,[data-bs-theme="dark"] .preg-title,
[data-bs-theme="dark"] .req-title,[data-bs-theme="dark"] .au-title,
[data-bs-theme="dark"] .legal-content h1,[data-bs-theme="dark"] .legal-content h2,
[data-bs-theme="dark"] .ez-panel-title{ color:var(--ez-text)!important; }

[data-bs-theme="dark"] .bds-sub,[data-bs-theme="dark"] .bw-sub,
[data-bs-theme="dark"] .prov-sub,[data-bs-theme="dark"] .prov-meta,
[data-bs-theme="dark"] .ppd-sub,[data-bs-theme="dark"] .ppd-meta,
[data-bs-theme="dark"] .hc-sub,[data-bs-theme="dark"] .sub-sub,
[data-bs-theme="dark"] .fb-sub,[data-bs-theme="dark"] .preg-sub,[data-bs-theme="dark"] .preg-hint,
[data-bs-theme="dark"] .req-sub,[data-bs-theme="dark"] .au-sub,
[data-bs-theme="dark"] .bds-label,[data-bs-theme="dark"] .bw-label,
[data-bs-theme="dark"] .legal-content p,[data-bs-theme="dark"] .legal-content li{
    color:var(--ez-text-sub)!important;
}

/* 10) HOME — AI search panel/tabs + trust marks + action cards (token gaps) */
[data-bs-theme="dark"] .ez-tabs{ border-bottom-color:var(--ez-border); }
[data-bs-theme="dark"] .ez-tab{ color:var(--ez-text-sub); }
[data-bs-theme="dark"] .ez-tab:hover,
[data-bs-theme="dark"] .ez-tab--active{ background-color:var(--ez-surface-2); color:var(--ez-text); }
[data-bs-theme="dark"] .az-trustmark,
[data-bs-theme="dark"] .az-action-card{
    background-color:var(--ez-surface)!important; border-color:var(--ez-border)!important; color:var(--ez-text);
}

/* 11) LINKS / BRAND-AS-TEXT — lift the dark brand blue to a readable tint.
      (Primary buttons keep #2E4EA1 with white text — fine on dark — so we only
      retint anchors, not .btn-primary.) */
[data-bs-theme="dark"] a:not(.btn):not([class*="btn"]):not([class*="-cta"]){ color:var(--ez-link); }
[data-bs-theme="dark"] .text-primary{ color:var(--ez-link)!important; }

/* 12) HOME — Success stories + provider CTA (premium sections) */
[data-bs-theme="dark"] .az-stories-title,
[data-bs-theme="dark"] .az-grow-title{ color:var(--ez-text)!important; }
[data-bs-theme="dark"] .az-stories-sub,
[data-bs-theme="dark"] .az-grow-sub{ color:var(--ez-text-sub)!important; }
[data-bs-theme="dark"] .az-stories-eyebrow,
[data-bs-theme="dark"] .az-grow-eyebrow{ color:var(--ez-link)!important; background:var(--ez-surface-2); }
[data-bs-theme="dark"] .az-story-card{ background:var(--ez-surface)!important; border-color:var(--ez-border)!important; }
[data-bs-theme="dark"] .az-story-quote{ color:var(--ez-text)!important; }
[data-bs-theme="dark"] .az-story-name{ color:var(--ez-text)!important; }
[data-bs-theme="dark"] .az-story-svc{ color:var(--ez-text-muted)!important; }
[data-bs-theme="dark"] .az-story-avatar--initial{ background:var(--ez-surface-2)!important; color:var(--ez-link)!important; }
[data-bs-theme="dark"] .az-grow-card{ background:var(--ez-surface)!important; border-color:var(--ez-border)!important; }
[data-bs-theme="dark"] .az-grow-feat{ background:var(--ez-surface-2)!important; border-color:var(--ez-border)!important; color:var(--ez-text)!important; }
[data-bs-theme="dark"] .az-grow-feat svg{ color:var(--ez-link); }
[data-bs-theme="dark"] .az-grow-demo{ color:var(--ez-text)!important; }
[data-bs-theme="dark"] .az-grow-demo .play{ background:var(--ez-surface-2); border-color:var(--ez-border); color:var(--ez-link); }