/* ==========================================================================
   Concierge Pilot — Shared Pickup Calendar Engine CSS
   Structural / layout styles. Colors, fonts, accents come from tenant skin
   via CSS variables (--accent, --accent-deep, --accent-glow, --accent-soft,
   --bg, --surface, --rule, --ink, --ink-dim, --ink-faint,
   --brand-heading-font, --brand-heading-style, --brand-mono-font).
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e0d0c;
  --bg-alt:#0e0d0c;
  --surface:#1c1a17;
  --surface-2:#25221d;
  --accent:#b8954c;
  --accent-deep:#8a6e34;
  --accent-glow:#e8a73a;
  --accent-soft:rgba(184,149,76,0.14);
  --ink:#e8dfd0;
  --ink-dim:#c7b9a8;
  --ink-faint:#8b8275;
  --rule:rgba(184,149,76,0.18);
  --watermark:rgba(184,149,76,0.06);
  --brand-body-font:'Inter',sans-serif;
  --brand-heading-font:'Cormorant Garamond',serif;
  --brand-mono-font:'JetBrains Mono',monospace;
  --brand-heading-style:italic;
  --brand-heading-weight:700;
}
:root[data-theme='light']{
  --bg:#f8f3ea;
  --bg-alt:#f8f3ea;
  --surface:#ffffff;
  --surface-2:#fbf6ec;
  --ink:#1a0f0a;
  --ink-dim:#5a4a3d;
  --ink-faint:#9c8a7c;
  --rule:rgba(184,149,76,0.28);
  --watermark:rgba(184,149,76,0.08);
}
html,body{height:100%;background:var(--bg-alt);color:var(--ink);font-family:var(--brand-body-font);overflow:hidden}
body{display:flex;flex-direction:column;font-weight:400;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none}

/* Tenant brand mark slot */
.cal-brand-mark{width:38px;height:38px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border-radius:50%;border:1px solid var(--accent);box-shadow:0 0 14px rgba(0,0,0,0.18);overflow:hidden}
.cal-brand-mark svg,.cal-brand-mark img{width:70%;height:70%}

.cal-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--rule);flex:0 0 auto;gap:10px;flex-wrap:wrap}
.cal-brand{display:flex;align-items:center;gap:14px}
.cal-brand .nav-logo-text{font-family:var(--brand-heading-font);font-style:var(--brand-heading-style);font-weight:var(--brand-heading-weight);font-size:1.7rem;color:var(--ink);letter-spacing:.01em;line-height:1}
.cal-brand .nav-logo-sub{font-family:var(--brand-mono-font);font-size:.62rem;color:var(--accent);letter-spacing:.32em;line-height:1;margin-top:5px;text-transform:uppercase}
.cal-brand .brand-stack{display:flex;flex-direction:column}
.cal-brand h1{font-family:var(--brand-body-font);font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--accent);padding-left:14px;border-left:1px solid var(--rule);margin-left:6px}
.cal-brand .pill{font-family:var(--brand-mono-font);font-size:9px;padding:3px 10px;border-radius:999px;background:var(--accent-glow);color:#1a1408;font-weight:700;letter-spacing:2px}
.cal-nav-btn{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:8px 14px;border-radius:999px;font-family:var(--brand-body-font);font-size:10px;font-weight:600;letter-spacing:2px;cursor:pointer;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .18s}
.cal-nav-btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.cal-stats{display:flex;gap:22px;font-family:var(--brand-body-font);font-size:9px;font-weight:500;color:var(--ink-faint);letter-spacing:2px;text-transform:uppercase}
.cal-stats strong{color:var(--accent-glow);font-size:1.6rem;margin-right:6px;font-family:var(--brand-mono-font);font-weight:700;letter-spacing:0;display:inline-block;vertical-align:middle}

.cal-body{flex:1;overflow-y:auto;padding:28px 24px 80px;position:relative}
.cal-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.cal-watermark{position:fixed;top:50%;right:4%;transform:translateY(-50%);font-family:var(--brand-heading-font);font-style:var(--brand-heading-style);font-weight:var(--brand-heading-weight);font-size:17vw;color:var(--watermark);pointer-events:none;line-height:1;letter-spacing:-.02em;user-select:none;z-index:0;writing-mode:vertical-rl}

/* Section divider — line·dot·line */
.divider{display:inline-flex;align-items:center;gap:12px;margin:0 auto 18px}
.divider .line{width:50px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--accent) 100%)}
.divider .line.right{background:linear-gradient(90deg,var(--accent) 0%,transparent 100%)}
.divider .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-glow);box-shadow:0 0 10px var(--accent-glow)}

.cal-legend{display:flex;align-items:center;gap:20px;font-family:var(--brand-mono-font);font-size:10px;color:var(--ink-faint);margin-bottom:22px;letter-spacing:1.8px;text-transform:uppercase;font-weight:500;flex-wrap:wrap}
.cal-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}

.hour-block{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--rule);min-height:60px}
.hour-block:first-of-type{border-top:0}
.hour-label{font-family:var(--brand-mono-font);font-size:13px;color:var(--accent);font-weight:500;padding-top:4px;letter-spacing:.5px}
.hour-block.past .hour-label{opacity:.35}
.hour-block.now{background:linear-gradient(90deg,rgba(232,167,58,.10),transparent);border-radius:10px}
.hour-block.now .hour-label{color:var(--accent-glow);font-weight:700}

.slot-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{min-height:56px;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--surface);position:relative;font-size:11px;transition:border-color .18s, background .18s}
.slot:hover:not(.empty){border-color:var(--accent-glow)}
.slot.empty{background:transparent;opacity:.35}
.slot.empty::before{content:'—';color:var(--ink-faint);font-family:var(--brand-mono-font)}
.slot-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--ink-faint);font-family:var(--brand-mono-font);font-size:10px;letter-spacing:1px;text-transform:uppercase}
.slot-count{font-family:var(--brand-mono-font);font-weight:700;color:var(--accent-glow)}
.slot.overbooked{background:rgba(168,49,63,0.10);border-color:rgba(168,49,63,0.55)}
.slot.overbooked .slot-count{color:#e57b86}
.order-pill{display:block;padding:6px 10px;border-radius:6px;margin-top:4px;font-family:var(--brand-body-font);font-size:11px;font-weight:500;cursor:pointer;line-height:1.25;border-left:3px solid var(--accent);background:var(--surface-2);color:var(--ink);transition:transform .08s, box-shadow .18s, border-color .18s;width:100%;text-align:left}
.order-pill:hover{transform:translateY(-1px);box-shadow:0 6px 14px -4px rgba(0,0,0,.45);border-left-color:var(--accent-glow)}
.order-pill.s-new{border-left-color:#e57b86;color:#fbb6bf}
.order-pill.s-cooking{border-left-color:var(--accent-glow);color:var(--accent-glow)}
.order-pill.s-ready{border-left-color:var(--accent);color:var(--ink)}
.order-pill.s-archive{border-left-color:var(--ink-faint);color:var(--ink-faint);opacity:.6}
.order-pill .num{font-family:var(--brand-mono-font);font-size:10px;opacity:.7}

.now-bar{position:relative;height:2px;background:var(--accent-glow);margin:4px 0;border-radius:2px;box-shadow:0 0 8px rgba(232,167,58,0.55)}
.now-bar::before{content:'NOW';position:absolute;top:-9px;left:0;background:var(--accent-glow);color:#1a1408;font-family:var(--brand-mono-font);font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:1.5px}

/* Detail modal */
.det-overlay{position:fixed;inset:0;background:rgba(7,6,5,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.det-overlay.show{display:flex}
.det-card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.det-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:26px 26px 16px;border-bottom:1px solid var(--rule)}
.det-hd h3{font-family:var(--brand-heading-font);font-style:var(--brand-heading-style);font-size:1.85rem;font-weight:var(--brand-heading-weight);color:var(--ink);letter-spacing:-.5px;line-height:1.05;margin-bottom:6px}
.det-hd .sub-kind{display:inline-block;font-family:var(--brand-mono-font);font-size:.6rem;font-weight:500;letter-spacing:.22em;padding:3px 10px;border-radius:999px;text-transform:uppercase;margin-bottom:10px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--rule)}
.det-hd .sub-label{font-size:.86rem;color:var(--ink-faint);font-weight:400}
.det-close{background:transparent;border:0;font-size:1.6rem;color:var(--accent);cursor:pointer;line-height:1;padding:0 4px;flex-shrink:0;transition:color .18s}
.det-close:hover{color:var(--accent-glow)}
.det-body{padding:20px 26px 26px}
.det-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:.9rem}
.det-row:last-child{border-bottom:0}
.det-row .lab{color:var(--ink-faint);font-family:var(--brand-body-font);font-weight:500;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.det-row .val{color:var(--ink);font-weight:500;text-align:right;font-size:.92rem}
.det-items{margin-top:14px;padding:16px;background:var(--surface-2);border-radius:10px;border:1px solid var(--rule)}
.det-items h4{font-family:var(--brand-mono-font);font-size:.62rem;color:var(--accent);letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.det-items .itm{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.92rem;color:var(--ink);border-bottom:1px dashed var(--rule)}
.det-items .itm:last-child{border-bottom:0}
.det-items .itm .qty{color:var(--accent-glow);font-family:var(--brand-mono-font);font-weight:700;min-width:30px}
.det-items .itm .price{font-family:var(--brand-mono-font);color:var(--accent);font-weight:500}
.det-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 18px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px}
.det-total .lab{font-family:var(--brand-mono-font);font-size:.7rem;color:var(--accent);font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.det-total .val{font-family:var(--brand-mono-font);font-size:1.5rem;font-weight:700;color:var(--accent-glow);line-height:1}

.cal-date-input{padding:8px 12px;border:1px solid var(--rule);border-radius:999px;font-size:11px;font-family:var(--brand-mono-font);color:var(--ink);background:var(--surface-2);letter-spacing:.5px}
.cal-date-input:focus{outline:0;border-color:var(--accent)}

#themeToggleBtn{font-size:16px;font-weight:600;color:var(--accent);background:transparent;border:1px solid var(--accent);padding:4px 12px;min-width:46px;line-height:1.1;border-radius:999px;cursor:pointer;transition:all .18s}
#themeToggleBtn:hover{background:var(--accent);color:var(--bg)}
:root[data-theme='light'] #themeToggleBtn{color:var(--accent-deep);background:transparent;border-color:var(--accent-deep)}