/* ============================================================================
   SUMMIT ROOFING & EXTERIORS — "Storm Slate & Signal Red" identity.
   Loaded only for the roofing pack; re-skins the shared UI kit into a rugged,
   weatherproof storm-restoration product without touching the other packs.
   Language: cool concrete-fog field with a faint horizontal SHINGLE-COURSE
   motif, deep SLATE control rail, SIGNAL-RED action color, warm ember highlight,
   Archivo signage type, sturdy squared cards. Deliberately unlike construction
   (warm sand + safety orange + blueprint grid), plumbing (cool teal SaaS),
   lawncare (sand + forest green) and everletric (graphite + electric yellow).
   ============================================================================ */
:root {
    --accent: #d6342a;            /* signal red (shingle/safety) */
    --accent-2: #f0883a;          /* warm ember highlight */
    --accent-soft: #fce5e2;       /* pale red wash */
    --accent-deep: #9e211a;       /* brick red */
    --slate: #2b3744;             /* slate roof */
    --bg: #eceef1;                /* cool concrete fog */
    --panel: #ffffff;
    --ink: #1b2530;               /* slate ink */
    --ink-soft: #62707e;
    --line: #d9dee3;
    --side: #1d2731;              /* deep slate rail */
    --side-ink: #93a3b1;
    --side-ink-bright: #ffffff;
    --pos: #2f7d52;
    --neg: #c0392b;
    --display-font: "Archivo", "Arial Narrow", sans-serif;
    --radius: 8px;
    --shadow: 0 1px 0 rgba(27,37,48,.04), 0 12px 28px -20px rgba(27,37,48,.55);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    /* faint horizontal shingle courses + a soft storm-light wash top-right */
    background-image:
        repeating-linear-gradient(0deg, rgba(43,55,68,.035) 0, rgba(43,55,68,.035) 1px, transparent 1px, transparent 22px),
        radial-gradient(900px 540px at 100% -12%, rgba(214,52,42,.06), transparent 60%);
    background-attachment: fixed;
}

/* ---------------- Sidebar: slate control rail ---------------- */
.side { background: linear-gradient(180deg, #232f3a, #161e26); border-right: 1px solid #0c1116; }
.brand { border-bottom: 1px solid rgba(255,255,255,.07); margin: -2px -6px 14px; padding: 6px 14px 16px; }
.brand-mark {
    background: var(--accent); border-radius: 6px; box-shadow: 0 0 0 3px rgba(214,52,42,.20);
    font-family: var(--display-font); font-weight: 800; color: #fff;
}
.brand-name { font-family: var(--display-font); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.brand-pack { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; color: var(--accent-2); opacity: .95; }
.nav-link {
    border-radius: 5px; font-size: 12.5px; font-weight: 600;
    letter-spacing: .02em; color: #9fafbc;
    border-left: 3px solid transparent; padding-left: 9px;
}
.nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(214,52,42,.24), rgba(214,52,42,.04));
    color: #fff; border-left-color: var(--accent);
}
.nav-link.active .nav-ico { color: var(--accent-2); opacity: 1; }
.side-foot { text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; }

/* ---------------- Topbar ---------------- */
.topbar { background: var(--panel); border-bottom: 2px solid var(--slate); }
.client-id strong { font-family: var(--display-font); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.client-id .dot { border-radius: 2px; }   /* squared marker — a shingle tab */

/* ---------------- Page header: a roof-ridge marker ---------------- */
.page-head { position: relative; margin-bottom: 22px; padding-left: 16px; }
.page-head::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px;
    background: var(--accent); border-radius: 2px;
}
.page-head h1 { font-family: var(--display-font); font-weight: 700; letter-spacing: -.2px; }
.page-head .sub { color: var(--ink-soft); }

/* ---------------- Headings use the signage face ---------------- */
.rpanel .panel-h h3, .kpi-num, .kpi-val { font-family: var(--display-font); }

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

/* ---------------- Status badge palette (sales → production → billing) ---------- */
.badge-sold, .badge-won, .badge-approved, .badge-paid, .badge-delivered, .badge-registered,
.badge-signed, .badge-depreciation-released, .badge-acv-received { background: #e3f3ea; color: #1f6b43; }
.badge-in-production, .badge-scheduled, .badge-materials-ordered, .badge-submitting,
.badge-supplementing, .badge-sent, .badge-partial, .badge-submitted, .badge-processing,
.badge-confirmed, .badge-pending, .badge-viewed, .badge-final-qc { background: #fff1e2; color: #b5631d; }
.badge-insurance, .badge-hail, .badge-wind, .badge-filed, .badge-adjuster-scheduled,
.badge-inspected, .badge-negotiation { background: #e7eefb; color: #2a5599; }
.badge-retail, .badge-new, .badge-contacted, .badge-draft, .badge-not-filed { background: #eef0f3; color: #59636e; }
.badge-lost, .badge-denied, .badge-overdue, .badge-back-ordered { background: #fce5e2; color: #b3261b; }
.badge-on-hold, .badge-expired, .badge-declined { background: #f1ece3; color: #8a6d3b; }

/* roofing-wide helpers reused by custom views */
.rf-pos { color: var(--pos); } .rf-neg { color: var(--neg); }
.rf-money { font-variant-numeric: tabular-nums; }