/* ============================================================================
   BLACKPINE LODGE & TAVERN — "Modern Lodge" identity.
   Loaded only for the hotel pack; re-skins the shared CRM into a PMS-grade
   front-desk system for a moody boutique hotel + tavern in the Maine highlands.
   Language: a warm near-black charcoal RAIL, a warm off-white CONTENT field, an
   ember-copper ACCENT (the hearth glow, the brass keytag), brass + deep-pine +
   leather supporting tones. Fraunces (display) over Inter (body). Premium,
   moody, hand-built — never generic.

   This file ALSO defines the full .hx-modal-* "detail-explosion" modal contract
   (paired with packs/views/hotel/app.js) and the .hx-row clickable-row styles
   that every bespoke list view in this pack relies on. Agents B/C inherit all
   of it — keep these classes stable.
   ============================================================================ */
:root {
    --accent: #C2772E;            /* ember-copper — the hearth */
    --accent-2: #E0973F;          /* brighter ember glow */
    --accent-soft: #2a2014;       /* deep ember-tinted panel wash (on dark) */
    --accent-line: #3c2c19;       /* ember hairline on dark */
    --accent-deep: #E0973F;       /* bright ember for text-on-dark */
    --accent-ink: #8a4f1c;        /* ember for text on the light field */

    --brass: #B08D57;            /* brass keytag / secondary */
    --brass-soft: #2a2418;
    --brass-deep: #CBA76A;
    --pine: #3E5C4B;             /* deep pine — calm/confirmed */
    --pine-soft: #18241d;
    --pine-deep: #6FA585;
    --leather: #7A4A39;          /* worn leather — warm warn */
    --leather-soft: #2a1a14;

    --bg: #14120D;               /* warm near-black field */
    --panel: #FBF7EF;            /* warm off-white display card (content) */
    --panel-2: #F3ECDE;          /* raised inner / table head */
    --panel-line: #E7DDC9;       /* hairline on the light field */
    --ink: #211C14;              /* warm near-black ink */
    --ink-soft: #6E6453;         /* muted */
    --ink-dim: #9C9079;          /* dimmest */
    --line: #E7DDC9;             /* hairline on light */
    --line-2: #DBCFB6;

    --side: #16140F;             /* warm charcoal rail */
    --side-2: #1C1A14;           /* rail panel */
    --side-ink: #9A917D;
    --side-ink-bright: #FBF7EF;

    --pos: #3E7D5A;              /* clean / paid / settled (pine green) */
    --pos-soft: #e3efe6;
    --neg: #B4452F;              /* alert / dirty / out of order (rust) */
    --neg-soft: #f6e4dd;
    --warn: #C2772E;             /* attention / pending */
    --warn-soft: #f6ead6;

    --display-font: "Fraunces", "Georgia", serif;
    --body-font: "Inter", -apple-system, "Segoe UI", sans-serif;
    --radius: 13px;
    --shadow: 0 1px 2px rgba(40,30,15,.06), 0 22px 44px -28px rgba(60,40,15,.34);
    --glow: 0 0 0 1px var(--accent), 0 14px 30px -16px rgba(194,119,46,.5);
}

body {
    font-family: var(--body-font);
    color: var(--ink);
    background-color: #F4EEE2;
    background-image:
        radial-gradient(circle at 92% -8%, rgba(194,119,46,.10), transparent 42%),
        radial-gradient(circle at -4% 102%, rgba(62,92,75,.08), transparent 44%);
    background-attachment: fixed;
    letter-spacing: .1px;
}

/* ---------------- Sidebar: warm charcoal rail ---------------- */
.side { background: linear-gradient(180deg, #1C1A14, #100E0A); border-right: 1px solid #2a2620; }
.brand { border-bottom: 1px solid rgba(255,255,255,.06); margin: -2px -6px 14px; padding: 6px 14px 16px; }
.brand-mark {
    background: linear-gradient(135deg, var(--accent), #8a4f1c); border-radius: 11px;
    box-shadow: 0 0 0 3px rgba(194,119,46,.20), 0 0 18px -4px rgba(224,151,63,.7);
    font-family: var(--display-font); font-weight: 700; color: #fff;
}
.brand-name { font-family: var(--display-font); font-weight: 600; font-size: 18px; letter-spacing: .2px; color: #FBF7EF; }
.brand-pack { text-transform: uppercase; letter-spacing: .22em; font-size: 9px; color: var(--accent-2); opacity: .95; }
.side-ink, .brand-pack { color: var(--accent-2); }
.nav-link {
    border-radius: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
    color: #A39A85; border-left: 2px solid transparent; padding-left: 10px;
}
.nav-link:hover { background: rgba(255,255,255,.05); color: #FBF7EF; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(194,119,46,.30), rgba(194,119,46,.02));
    color: #FBF7EF; border-left-color: var(--accent);
}
.nav-link.active svg { color: var(--accent-2); opacity: 1; }
.nav-link svg { opacity: .78; }
.side-foot { text-transform: uppercase; letter-spacing: .2em; font-size: 9px; color: #6b6453; }

/* ---------------- Topbar ---------------- */
.topbar { background: rgba(251,247,239,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.client-id strong { font-family: var(--display-font); font-weight: 600; font-size: 17px; letter-spacing: .2px; color: var(--ink); }
.client-id .dot { border-radius: 50%; background: var(--pine-deep); box-shadow: 0 0 8px var(--pine-deep); }
.user-name { color: var(--ink); }
.user-role { color: var(--ink-soft); }
.menu-btn { color: var(--ink); }
.all-crms { color: var(--ink-soft); border-color: var(--line); }
.all-crms:hover { color: var(--accent-ink); border-color: var(--accent); }

/* ---------------- Page header ---------------- */
.content { color: var(--ink); }
.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; color: var(--ink); }
.page-head .sub { color: var(--ink-soft); font-size: 13px; letter-spacing: .01em; }
.page-head .back { font-size: 12px; color: var(--ink-soft); text-decoration: none; }
.page-head .back:hover { color: var(--accent-ink); }

/* ---------------- Panels (display cases) ---------------- */
.rpanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-h { border-bottom: 1px solid var(--line); }
.rpanel .panel-h h3 { font-family: var(--display-font); font-weight: 600; font-size: 15px; letter-spacing: .1px; color: var(--ink); }
.panel-sub { color: var(--ink-soft); font-weight: 400; }
.panel-act a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.panel-act a:hover { color: var(--accent); }
.panel-b { color: var(--ink); }

/* ---------------- KPIs ---------------- */
.kpis .kpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), transparent); }
.kpi-ic { color: var(--accent-ink); background: var(--warn-soft); }
.kpi-num, .kpi-val { font-family: var(--display-font); font-weight: 600; color: var(--ink); }
.kpi-lab, .kpi-label { text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; color: var(--ink-soft); }
.kpi-delta { color: var(--ink-soft); }
.kpi-delta.up { color: var(--pos); }
.kpi-delta.down { color: var(--neg); }
.kpi-card.drill { cursor: pointer; transition: border-color .14s, transform .14s, box-shadow .14s; }
.kpi-card.drill:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); }

/* ---------------- Tables ---------------- */
table.data { width: 100%; border-collapse: collapse; }
table.data thead th { background: var(--panel-2); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em;
    font-size: 10.5px; font-weight: 700; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); }
table.data tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.clickable { cursor: pointer; transition: background .12s; }
table.data tbody tr.clickable:hover { background: var(--warn-soft); }
.muted { color: var(--ink-dim); }

/* ---------------- Buttons ---------------- */
.btn { font-family: var(--body-font); border-radius: 9px; font-weight: 600; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 6px 16px -7px rgba(194,119,46,.85); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.recbar-primary { box-shadow: 0 6px 22px rgba(194,119,46,.42) !important; }

/* ---------------- Empty / flash ---------------- */
.rempty { color: var(--ink-soft); }
.flash { border-radius: 10px; }
.flash-success { background: var(--pos-soft); color: #2c5b40; border: 1px solid #bcd9c4; }
.flash-error { background: var(--neg-soft); color: #8c2f1d; border: 1px solid #e6bcae; }

/* ---------------- Shared UI-kit modal (KPI drilldown) ---------------- */
.uimodal-card { background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); }
.uimodal-h { border-bottom: 1px solid var(--line); }
.uimodal-h h3 { font-family: var(--display-font); color: var(--ink); }
.uimodal-close { color: var(--ink-soft); }
.uimodal-foot .btn-primary { background: var(--accent); border-color: var(--accent); }

/* ---------------- Charts / progress ---------------- */
.chart-wrap { color: var(--ink); }
.rprogress { background: var(--warn-soft); }
.rprogress i { background: var(--accent); }

/* ============================================================================
   STATUS BADGE PALETTE — warm chips, tinted by meaning. Covers every enum value
   used across the hotel pack (reservations, rooms, housekeeping, maintenance,
   folios, channels, events, tavern, loyalty tiers).
   ============================================================================ */
.badge { border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; }

/* neutral / queued / low (sand) */
.badge-none, .badge-low, .badge-normal, .badge-other, .badge-na, .badge-vacant,
.badge-inquiry, .badge-pending, .badge-walk-in, .badge-phone, .badge-stayover,
.badge-turndown, .badge-closed, .badge-mixer, .badge-supply, .badge-food, .badge-regular
    { background: #efe6d4; color: #7a6f57; border: 1px solid #ddd0b6; }

/* ember — in-motion / arriving / high / direct / featured (the house accent) */
.badge-arriving, .badge-high, .badge-in-progress, .badge-direct, .badge-departure-clean,
.badge-deep-clean, .badge-open, .badge-tentative, .badge-live-music, .badge-cocktail,
.badge-charged-to-room, .badge-gold, .badge-insider
    { background: var(--warn-soft); color: var(--accent-ink); border: 1px solid #e6cfa6; }

/* pine — confirmed / clean / paid / settled / connected / done / active (green) */
.badge-confirmed, .badge-clean, .badge-inspected, .badge-done, .badge-paid,
.badge-settled, .badge-connected, .badge-completed, .badge-complete, .badge-active,
.badge-resolved, .badge-checked-out, .badge-in-parity, .badge-reserved, .badge-draft-beer
    { background: var(--pos-soft); color: #2c5b40; border: 1px solid #bcd9c4; }

/* brass — occupied / checked-in / vip / banquet / wine (warm gold) */
.badge-occupied, .badge-checked-in, .badge-platinum, .badge-founders, .badge-banquet,
.badge-wedding, .badge-private-dining, .badge-corporate-retreat, .badge-meeting,
.badge-wine, .badge-spirit, .badge-keg, .badge-silver, .badge-departing
    { background: var(--brass-soft); color: #8a6f3e; border: 1px solid #e4d3ad; }
.badge-platinum, .badge-founders { background: #efe2c4; color: #7a5e21; border-color: #ddc488; }

/* rust — dirty / out of order / urgent / rush / error / cancelled / voided / no-show */
.badge-dirty, .badge-out-of-order, .badge-urgent, .badge-rush, .badge-error,
.badge-cancelled, .badge-voided, .badge-no-show, .badge-on-hold, .badge-overdue,
.badge-out-of-parity, .badge-expedia
    { background: var(--neg-soft); color: #8c2f1d; border: 1px solid #e6bcae; }

/* channel chips (cool) */
.badge-booking-com, .badge-airbnb, .badge-hotels-com, .badge-expedia
    { background: #e6ddef; color: #5b4a72; border: 1px solid #cdbede; }
.badge-expedia { background: var(--neg-soft); color: #8c2f1d; border-color: #e6bcae; }

/* maintenance categories */
.badge-plumbing, .badge-electrical, .badge-hvac, .badge-furniture, .badge-appliance,
.badge-safety, .badge-inspection
    { background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line-2); }

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

/* ============================================================================
   ★ DETAIL-EXPLOSION MODAL (paired with app.js) ★
   app.js builds an overlay with this exact class structure and toggles `.open`.
   These styles are the visual half of that contract — do not rename.
   ============================================================================ */
.hx-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(14px, 5vh, 64px) 16px;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.hx-modal.open { opacity: 1; visibility: visible; }

.hx-modal-backdrop {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(18,14,8,.62);
    backdrop-filter: blur(3px) saturate(.9);
}

.hx-modal-panel {
    position: relative; z-index: 1;
    width: min(880px, 94vw); max-height: 90vh;
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(10,7,3,.7), 0 0 0 1px rgba(194,119,46,.12);
    overflow: hidden;
    transform: translateY(14px) scale(.985);
    opacity: 0;
    transition: transform .24s cubic-bezier(.16,.84,.34,1), opacity .24s ease;
}
.hx-modal.open .hx-modal-panel { transform: translateY(0) scale(1); opacity: 1; }

.hx-modal-bar {
    position: sticky; top: 0; z-index: 2; flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--side-2), var(--side));
    border-bottom: 1px solid #2a2620;
}
.hx-modal-back, .hx-modal-close {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--body-font); font-size: 12.5px; font-weight: 600;
    color: #C9BFAA; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
    padding: 7px 11px; cursor: pointer; line-height: 1;
    transition: background .14s, color .14s, border-color .14s;
}
.hx-modal-back:hover, .hx-modal-close:hover { background: rgba(194,119,46,.22); color: #FBF7EF; border-color: var(--accent); }
.hx-modal-back[hidden] { display: none; }
.hx-modal-close { margin-left: auto; padding: 7px 9px; }
.hx-modal-crumb {
    font-family: var(--display-font); font-weight: 600; font-size: 13.5px;
    color: #FBF7EF; letter-spacing: .2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hx-modal-body { flex: 1 1 auto; overflow: auto; padding: 22px 24px 26px; -webkit-overflow-scrolling: touch; }
/* inside the modal, the detail view's own page-head back-link is redundant */
.hx-modal-body .page-head { margin-top: -2px; }

/* loading + error states the controller injects */
.hx-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; min-height: 220px; color: var(--ink-soft); font-size: 13px;
}
.hx-spin {
    width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid var(--line-2); border-top-color: var(--accent);
    animation: hx-spin .7s linear infinite;
}
@keyframes hx-spin { to { transform: rotate(360deg); } }
.hx-error { color: var(--neg); }
.hx-retry {
    font: inherit; font-weight: 600; cursor: pointer; margin-left: 8px;
    color: var(--accent-ink); background: none; border: none; text-decoration: underline;
}
body.hx-modal-lock { overflow: hidden; }

/* the recbar is hidden in modal mode (index.php suppresses it), so nothing to do here */

/* ============================================================================
   ★ .hx-row — every bespoke list row is a modal trigger ★
   Rows carry data-modal-url + data-modal-label + tabindex/role=button. Cards too.
   ============================================================================ */
.hx-row { cursor: pointer; transition: background .12s; }
.hx-row:hover { background: var(--warn-soft); }
.hx-row:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(194,119,46,.35); background: var(--warn-soft); }
.hx-card-row { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.hx-card-row:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--glow); }
.hx-card-row:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--glow); }

/* ============================================================================
   SHARED LODGE LAYOUT HELPERS (reused across hotel bespoke views, Agents B/C)
   ============================================================================ */
/* a "go" affordance on rows */
.hx-go { font-size: 11.5px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }

/* filter chip bar (matches list views) */
.hl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.hl-filter .hl-fl-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-right: 2px; }
.hl-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
    color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px;
    padding: 6px 12px; text-decoration: none; transition: all .12s; }
.hl-chip span { font-variant-numeric: tabular-nums; opacity: .7; }
.hl-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.hl-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hl-chip.on span { opacity: .85; }

/* conf-number / mono label */
.hl-conf { font-family: var(--display-font); font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.hl-money { font-variant-numeric: tabular-nums; }
.hl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* guest cell with avatar */
.hl-guest { display: inline-flex; align-items: center; gap: 9px; }
.hl-av { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 700;
    font-family: var(--display-font); background: var(--brass-soft); color: var(--brass-deep); }
.hl-av-vip { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(194,119,46,.16); }

/* small workflow action button (inside front-desk / detail) */
.hl-act { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2);
    background: var(--panel); color: var(--ink); text-decoration: none; transition: all .12s; white-space: nowrap; }
.hl-act:hover { border-color: var(--accent); background: var(--warn-soft); color: var(--accent-ink); }
.hl-act svg { width: 14px; height: 14px; }
.hl-act-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hl-act-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.hl-act-danger { color: #8c2f1d; border-color: #e6bcae; background: var(--panel); }
.hl-act-danger:hover { background: var(--neg-soft); color: #8c2f1d; border-color: var(--neg); }
.hl-act:disabled { opacity: .45; cursor: default; }
.hl-actbar { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-actbar form { margin: 0; }

/* room-status board (dashboard + rooms list) */
.hl-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; padding: 16px 18px; }
.hl-rm {
    position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 10px 10px;
    border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel-2);
    text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s;
    min-width: 0; overflow: hidden;
}
.hl-rm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink-dim); }
.hl-rm:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hl-rm:focus-visible { outline: none; box-shadow: var(--glow); border-color: var(--accent); }
.hl-rm-no { font-family: var(--display-font); font-weight: 700; font-size: 16px; line-height: 1; }
.hl-rm-st { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* state colors via left rail + tint */
.hl-rm-occupied { background: var(--brass-soft); border-color: #e4d3ad; }
.hl-rm-occupied::before { background: var(--brass); }
.hl-rm-occupied .hl-rm-no, .hl-rm-occupied .hl-rm-st { color: #8a6f3e; }
.hl-rm-clean::before, .hl-rm-inspected::before { background: var(--pos); }
.hl-rm-clean, .hl-rm-inspected { background: var(--pos-soft); border-color: #bcd9c4; }
.hl-rm-clean .hl-rm-no, .hl-rm-inspected .hl-rm-no, .hl-rm-clean .hl-rm-st, .hl-rm-inspected .hl-rm-st { color: #2c5b40; }
.hl-rm-dirty::before { background: var(--accent); }
.hl-rm-dirty { background: var(--warn-soft); border-color: #e6cfa6; }
.hl-rm-dirty .hl-rm-no, .hl-rm-dirty .hl-rm-st { color: var(--accent-ink); }
.hl-rm-out-of-order::before { background: var(--neg); }
.hl-rm-out-of-order { background: var(--neg-soft); border-color: #e6bcae; }
.hl-rm-out-of-order .hl-rm-no, .hl-rm-out-of-order .hl-rm-st { color: #8c2f1d; }
/* legend */
.hl-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 18px 14px; }
.hl-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); }
.hl-leg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.hl-leg-occupied i { background: var(--brass); }
.hl-leg-clean i { background: var(--pos); }
.hl-leg-dirty i { background: var(--accent); }
.hl-leg-ooo i { background: var(--neg); }