/* ============================================================================
   TIDEWATER POOL & SPA CO. — "Clear Water" identity.
   Loaded only for the poolcleaning pack; re-skins the shared UI kit into a clean,
   bright pool-service product. Language: a crisp WHITE field with the faintest
   aqua wash, a deep MARINE-NAVY sidebar rail, a clear CYAN accent (the water),
   and a warm AMBER pop for out-of-range chemistry / overdue / alert states.
   Sora display (rounded geometric, modern-trades feel) over Inter body, hairline
   rules. Deliberately unlike the weathered navy-cream marina pack — this one is
   light, clinical and water-bright, like a freshly balanced pool.
   ============================================================================ */
:root {
    --accent: #0891b2;            /* clear cyan (the water) */
    --accent-2: #22b8d6;          /* light cyan */
    --accent-soft: #d7eef4;       /* pale aqua wash */
    --accent-deep: #0a6e88;       /* deep cyan */
    --buoy: #e8913a;             /* amber / out-of-range pop */
    --buoy-soft: #fbe9d4;
    --bg: #f3f8fa;               /* faint aqua-white field */
    --panel: #ffffff;
    --ink: #102a33;              /* deep marine ink */
    --ink-soft: #5d7782;
    --line: #dde9ed;             /* cool hairline */
    --side: #0c2630;             /* marine navy */
    --side-ink: #8fa8b2;
    --side-ink-bright: #ffffff;
    --pos: #1f9e76;
    --neg: #d0563b;
    --display-font: "Sora", "Segoe UI", sans-serif;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16,42,51,.05), 0 18px 38px -26px rgba(8,145,178,.40);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 88% -6%, rgba(8,145,178,.11), transparent 46%),
        radial-gradient(circle at 6% 102%, rgba(34,184,214,.07), transparent 40%);
    background-attachment: fixed;
    letter-spacing: .1px;
}

/* ---------------- Sidebar: marine navy ---------------- */
.side { background: linear-gradient(180deg, #103340, #0a1f29); border-right: 1px solid #06141b; }
.brand { border-bottom: 1px solid rgba(255,255,255,.08); margin: -2px -6px 14px; padding: 6px 14px 16px; }
.brand-mark {
    background: var(--accent); border-radius: 12px; box-shadow: 0 0 0 3px rgba(8,145,178,.22);
    font-family: var(--display-font); font-weight: 800; color: #fff;
}
.brand-name { font-family: var(--display-font); font-weight: 800; font-size: 18px; letter-spacing: .1px; }
.brand-pack { text-transform: uppercase; letter-spacing: .22em; font-size: 9px; color: var(--accent-2); opacity: .95; }
.nav-link {
    border-radius: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
    color: #9db4be; border-left: 2px solid transparent; padding-left: 10px;
}
.nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(8,145,178,.32), rgba(8,145,178,.03));
    color: #fff; border-left-color: var(--accent-2);
}
.nav-link.active .nav-ico { color: var(--accent-2); opacity: 1; }
.side-foot { text-transform: uppercase; letter-spacing: .2em; font-size: 9px; }

/* ---------------- Topbar ---------------- */
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); }
.client-id strong { font-family: var(--display-font); font-weight: 800; font-size: 17px; letter-spacing: .1px; }
.client-id .dot { border-radius: 50%; }

/* ---------------- Page header: water masthead ---------------- */
.page-head { position: relative; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-family: var(--display-font); font-weight: 800; font-size: 28px; letter-spacing: .1px; }
.page-head .sub { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.page-head .back { font-size: 12px; color: var(--ink-soft); text-decoration: none; }
.page-head .back:hover { color: var(--accent); }

/* display on panel titles + numerals */
.rpanel .panel-h h3 { font-family: var(--display-font); font-weight: 700; font-size: 15.5px; letter-spacing: .1px; }
.kpi-num, .kpi-val { font-family: var(--display-font); font-weight: 800; }
.kpi-lab, .kpi-label { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }

/* buttons */
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------------- Status badge palette ---------------- */
/* neutral / new / queued (slate) */
.badge-none, .badge-draft, .badge-estimate, .badge-scheduled, .badge-prospect,
.badge-lead, .badge-new, .badge-inactive, .badge-pending { background: #e7edef; color: #566a73; }
/* info / in-motion (aqua wash) */
.badge-approved, .badge-sent, .badge-en-route, .badge-design, .badge-permitting,
.badge-contacted, .badge-site-visit, .badge-viewed, .badge-partial, .badge-offered,
.badge-bi-weekly-plan, .badge-monthly-plan, .badge-pool-only { background: var(--accent-soft); color: var(--accent-deep); }
/* active / working (amber pop) */
.badge-in-progress, .badge-awaiting-parts, .badge-build, .badge-punch, .badge-active,
.badge-weekly-plan, .badge-estimate-sent, .badge-seasonal-hold, .badge-on-hold,
.badge-seasonal-closed, .badge-needs-service { background: var(--buoy-soft); color: #b96a1f; }
/* done / paid / healthy (sea green) */
.badge-completed, .badge-paid, .badge-invoiced, .badge-complete, .badge-won,
.badge-accepted, .badge-operational { background: #def0e6; color: #1f7a58; }
/* alerts (rust red) */
.badge-cancelled, .badge-lost, .badge-declined, .badge-overdue, .badge-skipped,
.badge-expired, .badge-failed, .badge-past { background: #f7e1da; color: #b1432c; }

/* type / category info chips (cool slate-cyan) */
.badge-residential, .badge-commercial, .badge-hoa, .badge-hotel,
.badge-in-ground, .badge-above-ground, .badge-spa,
.badge-plaster, .badge-pebble, .badge-vinyl, .badge-fiberglass, .badge-tile,
.badge-chlorine, .badge-salt, .badge-uv, .badge-mineral,
.badge-pump, .badge-filter, .badge-heater, .badge-salt-cell, .badge-automation, .badge-cleaner,
.badge-full-service, .badge-chemical-only, .badge-maintenance,
.badge-weekly, .badge-monthly, .badge-bi-weekly, .badge-per-visit, .badge-seasonal,
.badge-repair, .badge-green-to-clean, .badge-equipment, .badge-leak, .badge-opening, .badge-closing,
.badge-new-pool, .badge-renovation, .badge-equipment-upgrade, .badge-liner-replacement,
.badge-good, .badge-better, .badge-best,
.badge-service-plan, .badge-work-order, .badge-project, .badge-deposit, .badge-chemical,
.badge-google, .badge-facebook, .badge-yelp, .badge-website, .badge-nextdoor,
.badge-referral, .badge-repeat, .badge-yard-sign, .badge-walk-in,
.badge-monday, .badge-tuesday, .badge-wednesday, .badge-thursday, .badge-friday, .badge-saturday,
.badge-owner, .badge-service-manager, .badge-route-tech, .badge-repair-tech,
.badge-construction, .badge-sales, .badge-office,
.badge-each, .badge-hour, .badge-flat, .badge-gal, .badge-lb, .badge-oz,
.badge-part, .badge-service, .badge-labor, .badge-supply,
.badge-weekly-service, .badge-opening-closing { background: #e2eaed; color: #46606a; }

.ph-pos { color: var(--pos); } .ph-neg { color: var(--neg); }
.ph-money { font-variant-numeric: tabular-nums; }

/* amber "alert" chip helper for custom views (out-of-range / overdue / low-stock) */
.tw-alert { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#b96a1f;
    text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.tw-alert::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--buoy); }