/* ============================================================================
   SOU'WESTER MARINA & BOATYARD — "Harbor Chart" identity.
   Loaded only for the marina pack; re-skins the shared UI kit into a weathered
   nautical-chart product. Language: warm CHART-PAPER cream field with faint depth
   soundings, a deep HARBOR-NAVY rail, a marine TEAL accent, and a BUOY-ORANGE pop
   for live/alert states. Refined SPECTRAL serif display (chart-label feel) over
   Inter body, hairline rules. Deliberately unlike the SaaS-teal plumbing pack and
   the cyan eventsmedia pack (both bright/light) — this is navy-heavy & weathered.
   ============================================================================ */
:root {
    --accent: #1f7a8c;            /* marine teal */
    --accent-2: #3a9fb0;          /* light teal */
    --accent-soft: #d9eaed;       /* pale teal wash */
    --accent-deep: #155f6e;       /* deep teal */
    --buoy: #e07a3f;              /* buoy orange */
    --buoy-soft: #fbe6d6;
    --bg: #f1ece1;               /* chart paper cream */
    --panel: #fffdf8;
    --ink: #18313d;              /* harbor navy-charcoal */
    --ink-soft: #5f7079;
    --line: #ddd5c5;             /* warm hairline */
    --side: #14303f;             /* harbor navy */
    --side-ink: #8aa0ab;
    --side-ink-bright: #ffffff;
    --pos: #2f8f6b;
    --neg: #c8503a;
    --display-font: "Spectral", "Georgia", serif;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(24,49,61,.05), 0 16px 36px -24px rgba(24,49,61,.45);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 90% -5%, rgba(31,122,140,.10), transparent 45%),
        radial-gradient(circle at 92% -3%, transparent 38%, rgba(31,122,140,.07) 39%, transparent 40%),
        radial-gradient(circle at 92% -3%, transparent 30%, rgba(31,122,140,.05) 31%, transparent 32%);
    background-attachment: fixed;
    letter-spacing: .1px;
}

/* ---------------- Sidebar: harbor-navy ---------------- */
.side { background: linear-gradient(180deg, #163647, #0f2734); border-right: 1px solid #08161e; }
.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: 50%; box-shadow: 0 0 0 3px rgba(31,122,140,.25);
    font-family: var(--display-font); font-weight: 700; color: #fff;
}
.brand-name { font-family: var(--display-font); font-weight: 700; font-size: 18px; letter-spacing: .2px; }
.brand-pack { text-transform: uppercase; letter-spacing: .22em; font-size: 9px; color: var(--accent-2); opacity: .95; }
.nav-link {
    border-radius: 5px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
    color: #9bb0bb; 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(31,122,140,.30), rgba(31,122,140,.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: 700; font-size: 17px; letter-spacing: .2px; }
.client-id .dot { border-radius: 50%; }

/* ---------------- Page header: chart 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: 700; font-size: 29px; letter-spacing: .2px; }
.page-head .sub { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .15em; font-size: 11px; }

/* serif display on panel titles + numerals */
.rpanel .panel-h h3 { font-family: var(--display-font); font-weight: 600; font-size: 16px; letter-spacing: .2px; }
.kpi-num, .kpi-val { font-family: var(--display-font); font-weight: 700; }
.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-available, .badge-inquiry, .badge-requested, .badge-scheduled, .badge-estimate,
.badge-draft, .badge-prospect, .badge-pending { background: #e6eaec; color: #566873; }
/* info / in-motion (teal wash) */
.badge-reserved, .badge-waitlist, .badge-offered, .badge-confirmed, .badge-approved,
.badge-sent, .badge-hauled, .badge-winterized, .badge-commissioned, .badge-partial { background: var(--accent-soft); color: var(--accent-deep); }
/* active / working (buoy orange) */
.badge-occupied, .badge-checked-in, .badge-in-progress, .badge-awaiting-parts,
.badge-shrink-wrapped, .badge-stored, .badge-active { background: var(--buoy-soft); color: #b65b22; }
/* done / paid / healthy (sea green) */
.badge-launched, .badge-completed, .badge-paid, .badge-booked, .badge-checked-out,
.badge-invoiced { background: #def0e6; color: #2c7a58; }
/* alerts (rust red) */
.badge-out-of-service, .badge-cancelled, .badge-lost, .badge-declined, .badge-overdue,
.badge-no-show { background: #f6e2dc; color: #b14a34; }

/* type / category info chips (cool navy-grey) */
.badge-slip, .badge-mooring, .badge-dry-rack, .badge-side-tie, .badge-t-head,
.badge-sailboat, .badge-powerboat, .badge-trawler, .badge-sportfish, .badge-center-console,
.badge-motoryacht, .badge-lobster-boat, .badge-cruiser, .badge-dinghy, .badge-catamaran,
.badge-seasonal, .badge-annual, .badge-transient, .badge-storage, .badge-service-only,
.badge-indoor, .badge-outdoor, .badge-on-mooring, .badge-trailer-lot,
.badge-diesel, .badge-gas, .badge-pump-out, .badge-per-foot, .badge-hour, .badge-flat, .badge-each,
.badge-seasonal-slip, .badge-winter-storage, .badge-dry-rack, .badge-service,
.badge-dockwa, .badge-phone, .badge-vhf, .badge-walk-in, .badge-website,
.badge-engine-service, .badge-rigging, .badge-bottom-paint, .badge-winterize, .badge-commission,
.badge-haul-launch, .badge-detailing, .badge-electrical, .badge-electronics, .badge-general-repair { background: #e4e8e4; color: #4a5e57; }

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

/* buoy "alert" chip helper for custom views (overdue / due-soon / on-the-hard) */
.mr-alert { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#b65b22; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.mr-alert::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--buoy); }