/* ============================================================================
   BUOY & BUN FOOD TRUCK CO. — "Coastal Counter" identity.
   Loaded only for the foodtruck pack; re-skins the shared UI kit into a warm,
   appetite-forward street-food product. Language: a soft toasted-CREAM field,
   a deep STEAMED-NAVY sidebar rail (the painted truck body), a LOBSTER-RED
   accent (the shell / the roll), and a BUTTER-GOLD pop for permits-expiring /
   balance-due / sold-out alert states. Fraunces display (a chunky, hand-painted
   sign-shop feel) over Inter body, hairline rules. Deliberately unlike the
   clinical pool pack and the weathered marina pack — this one reads like a chalk
   menu board on the side of a lobster-roll truck.
   ============================================================================ */
:root {
    --accent: #c23b22;            /* lobster red (the shell, the roll) */
    --accent-2: #e0653f;          /* warm coral */
    --accent-soft: #f7e4dd;       /* pale shell wash */
    --accent-deep: #8f2916;       /* deep brick / steamed */
    --buoy: #d99022;             /* butter gold — alert / due / expiring pop */
    --buoy-soft: #fbeed3;
    --bg: #faf4ec;               /* toasted cream field */
    --panel: #ffffff;
    --ink: #2a1d17;              /* dark roast ink */
    --ink-soft: #806a5e;
    --line: #ece0d3;             /* warm hairline */
    --side: #142a33;             /* steamed navy truck body */
    --side-ink: #93a7af;
    --side-ink-bright: #ffffff;
    --pos: #2f7d52;
    --neg: #c0432a;
    --display-font: "Fraunces", "Georgia", serif;
    --radius: 9px;
    --shadow: 0 1px 2px rgba(42,29,23,.05), 0 18px 38px -26px rgba(194,59,34,.40);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 90% -8%, rgba(194,59,34,.10), transparent 44%),
        radial-gradient(circle at 4% 104%, rgba(217,144,34,.08), transparent 42%);
    background-attachment: fixed;
    letter-spacing: .1px;
}

/* ---------------- Sidebar: steamed navy truck body ---------------- */
.side { background: linear-gradient(180deg, #1a323c, #102129); border-right: 1px solid #0a161c; }
.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(194,59,34,.24);
    font-family: var(--display-font); font-weight: 800; color: #fff;
}
.brand-name { font-family: var(--display-font); font-weight: 700; 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: #9cb0b8; 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(194,59,34,.34), rgba(194,59,34,.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: .1px; }
.client-id .dot { border-radius: 50%; }

/* ---------------- Page header: chalk-board 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: 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: 600; font-size: 15.5px; letter-spacing: .1px; }
.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 (warm stone) */
.badge-none, .badge-draft, .badge-inquiry, .badge-scheduled, .badge-prospect,
.badge-lead, .badge-new, .badge-inactive, .badge-pending, .badge-off,
.badge-tentative, .badge-commissary { background: #efe7dc; color: #7a685b; }
/* info / in-motion (shell wash) */
.badge-quoted, .badge-sent, .badge-booked, .badge-contacted, .badge-offered,
.badge-viewed, .badge-partial, .badge-live, .badge-seasonal { background: var(--accent-soft); color: var(--accent-deep); }
/* active / working / due (butter gold) */
.badge-confirmed, .badge-renewal-due, .badge-on-hold, .badge-active { background: var(--buoy-soft); color: #a36a14; }
/* done / paid / accepted (sea green) */
.badge-completed, .badge-paid, .badge-done, .badge-complete, .badge-won,
.badge-accepted, .badge-operational, .badge-vip { background: #def0e3; color: #1f7a4a; }
/* alerts (rust red) */
.badge-cancelled, .badge-weather-cancel, .badge-lost, .badge-declined,
.badge-overdue, .badge-expired, .badge-failed, .badge-past { background: #f7ddd5; color: #b1402a; }

/* type / category info chips (cool stone) */
.badge-private-catering, .badge-corporate, .badge-wedding, .badge-festival,
.badge-brewery-pop-up, .badge-brewery, .badge-weekly-spot, .badge-birthday,
.badge-graduation, .badge-public-spot, .badge-public, .badge-catering,
.badge-individual, .badge-nonprofit, .badge-venue,
.badge-website, .badge-referral, .badge-instagram, .badge-bft, .badge-phone,
.badge-repeat, .badge-festival-org,
.badge-truck, .badge-trailer, .badge-cart,
.badge-lobster-roll, .badge-sandwich, .badge-basket, .badge-side, .badge-dessert,
.badge-drink, .badge-special,
.badge-owner, .badge-chef, .badge-cook, .badge-server, .badge-driver,
.badge-prep, .badge-cashier,
.badge-health-permit, .badge-fire-marshal, .badge-vending-permit,
.badge-mobile-food-license, .badge-commissary-agreement, .badge-food-handler-card,
.badge-propane-cert,
.badge-seafood, .badge-produce, .badge-bread, .badge-dairy, .badge-dry,
.badge-packaging, .badge-beverage,
.badge-facebook, .badge-email, .badge-street-food-finder, .badge-loyalty,
.badge-google, .badge-yelp,
.badge-maintenance, .badge-off-season { background: #e8ddd0; color: #6b5849; }

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

/* butter-gold "alert" chip helper for custom views (permit expiring / balance due) */
.bb-alert { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#a36a14;
    text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.bb-alert::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--buoy); }