/* ============================================================================
   SALT & PINE KITCHEN — "Hearth & Harbor" identity.
   Loaded only for the restaurant pack; re-skins the shared UI kit into a warm,
   coastal farm-to-table dining room. Language: a soft bone-paper field with the
   faintest ember warmth, a deep charred-walnut sidebar rail, a BURNT-SIENNA accent
   (#7c2d12 — the hearth), and a sea-pine green for fresh / confirmed / healthy
   states. Fraunces display (a warm literary serif with optical sizing — the
   menu-card voice) over Inter body, hairline rules. Deliberately unlike the
   clinical pool pack and the weathered marina — this one is candlelit, editorial
   and appetizing, like a printed dinner menu under low light.
   ============================================================================ */
:root {
    --accent: #7c2d12;            /* burnt sienna (the hearth) */
    --accent-2: #a8431d;          /* warm ember */
    --accent-soft: #f4e6dd;       /* pale clay wash */
    --accent-deep: #5e2010;       /* charred sienna */
    --ember: #c2761c;            /* amber / VIP / allergy pop */
    --ember-soft: #fbecd6;
    --pine: #2f5d4f;             /* sea-pine green (fresh/confirmed) */
    --pine-soft: #dcebe4;
    --bg: #f7f2ec;               /* warm bone paper */
    --panel: #fffdfa;
    --ink: #2a1c14;              /* roasted-walnut ink */
    --ink-soft: #826f62;
    --line: #e7ddd2;             /* warm hairline */
    --side: #271812;             /* charred walnut */
    --side-ink: #a6948a;
    --side-ink-bright: #ffffff;
    --pos: #2f7d5b;
    --neg: #b23a26;
    --display-font: "Fraunces", "Georgia", serif;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(42,28,20,.06), 0 18px 38px -26px rgba(124,45,18,.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(124,45,18,.10), transparent 46%),
        radial-gradient(circle at 6% 102%, rgba(194,118,28,.07), transparent 42%);
    background-attachment: fixed;
    letter-spacing: .1px;
}

/* ---------------- Sidebar: charred walnut ---------------- */
.side { background: linear-gradient(180deg, #2f1d15, #1d110c); border-right: 1px solid #120a07; }
.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(124,45,18,.26);
    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: .1px; }
.brand-pack { text-transform: uppercase; letter-spacing: .22em; font-size: 9px; color: var(--ember); opacity: .95; }
.nav-link {
    border-radius: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
    color: #b09c91; 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(168,67,29,.34), rgba(168,67,29,.03));
    color: #fff; border-left-color: var(--ember);
}
.nav-link.active .nav-ico { color: var(--ember); 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: menu 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: 600; font-size: 29px; 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: 16px; letter-spacing: .1px; }
.kpi-num, .kpi-val { font-family: var(--display-font); font-weight: 600; }
.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 slate) */
.badge-none, .badge-draft, .badge-new, .badge-inactive, .badge-pending, .badge-inquiry,
.badge-scheduled, .badge-walk-in, .badge-phone, .badge-house-account { background: #ece3d9; color: #7a6657; }
/* info / in-motion / booked (clay wash) */
.badge-booked, .badge-confirmed, .badge-sent, .badge-open, .badge-proposal, .badge-notified,
.badge-active, .badge-resy, .badge-opentable, .badge-website, .badge-ordered, .badge-partial,
.badge-on-call, .badge-card, .badge-amex, .badge-gift-card { background: var(--accent-soft); color: var(--accent-deep); }
/* VIP / occasion / alert pop (amber ember) */
.badge-vip, .badge-birthday, .badge-anniversary, .badge-celebration, .badge-waiting,
.badge-held, .badge-reserved, .badge-dirty, .badge-wine-dinner, .badge-popular,
.badge-regular { background: var(--ember-soft); color: #9a5a14; }
/* done / paid / seated / fresh (sea pine) */
.badge-completed, .badge-paid, .badge-seated, .badge-working, .badge-received,
.badge-launched, .badge-cash { background: var(--pine-soft); color: #2c6b50; }
/* alerts (rust red) */
.badge-no-show, .badge-cancelled, .badge-voided, .badge-comped, .badge-lost, .badge-left,
.badge-called-out, .badge-comp, .badge-archived { background: #f6ddd5; color: #a8381f; }

/* type / category / role / section info chips (warm sage-clay) */
.badge-date, .badge-business, .badge-main, .badge-bar, .badge-patio, .badge-window,
.badge-private, .badge-kitchen, .badge-floor,
.badge-round, .badge-square, .badge-rectangle, .badge-booth, .badge-counter,
.badge-starter, .badge-raw-bar, .badge-entrée, .badge-entree, .badge-pasta, .badge-dessert,
.badge-cocktail, .badge-wine, .badge-beer, .badge-n-a,
.badge-grill, .badge-saute, .badge-pantry, .badge-pastry,
.badge-owner, .badge-gm, .badge-chef, .badge-sous-chef, .badge-line-cook, .badge-server,
.badge-host, .badge-bartender, .badge-busser, .badge-dishwasher,
.badge-private-dining, .badge-buyout, .badge-rehearsal-dinner, .badge-corporate, .badge-catering,
.badge-email, .badge-sms, .badge-loyalty, .badge-social,
.badge-google, .badge-yelp, .badge-tripadvisor, .badge-in-house,
.badge-produce, .badge-protein, .badge-dairy, .badge-dry, .badge-supplies,
.badge-lb, .badge-oz, .badge-each, .badge-case, .badge-bottle, .badge-keg, .badge-gal,
.badge-qt, .badge-dozen, .badge-walk-in-station, .badge-dry-storage,
.badge-net-15, .badge-net-30, .badge-cod { background: #e6e0d3; color: #6c5d49; }

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

/* ember "alert" chip helper for custom views (allergy / waiting / low-stock) */
.rs-alert { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#9a5a14;
    text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.rs-alert::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ember); }
.rs-allergy { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--neg);
    text-transform:uppercase; letter-spacing:.06em; font-size:11px; }
.rs-allergy::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--neg); }