/* SMILE-HL Hub — Enterprise dashboard
   Design system: Dark Mode (OLED), blue data + amber accent (WCAG AA),
   Fira Sans/Code, 4/8 spacing. Tokens: primitive → semantic. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* ---- Tier 1: primitive ---- */
:root {
  /* palette */
  --blue-900:#15233f; --blue-800:#1b2d52; --blue-700:#1e40af; --blue-600:#2563eb;
  --blue-500:#3b82f6; --blue-400:#60a5fa; --blue-300:#93c5fd;
  --violet-400:#a78bfa;
  --amber-600:#d97706; --amber-500:#f59e0b; --amber-400:#fbbf24;
  --green-500:#22c55e; --green-400:#4ade80;
  --red-600:#dc2626; --red-500:#ef4444; --red-400:#f87171;
  --slate-950:#080b12; --slate-900:#0d111a; --slate-850:#11161f; --slate-800:#161c28;
  --slate-700:#1f2736; --slate-600:#2b3445; --slate-500:#3b465a;
  --slate-400:#64748b; --slate-300:#94a3b8; --slate-200:#cbd5e1; --slate-100:#e2e8f0;
  --white:#f8fafc;

  /* spacing 4/8 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;

  /* type scale */
  --t-xs:12px; --t-sm:13px; --t-base:14px; --t-md:15px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:36px;

  /* elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px rgba(0,0,0,.45);
  --sh-3:0 12px 32px rgba(0,0,0,.55);
  --ease:cubic-bezier(.4,0,.2,1);

  /* overlay phải DƯỚI drawer, nếu không overlay phủ lên drawer chặn input */
  --z-nav:20; --z-overlay:40; --z-drawer:50; --z-toast:60;
}

/* ---- Tier 2: semantic ---- */
:root {
  --bg:var(--slate-950);
  --surface:var(--slate-900);
  --surface-2:var(--slate-850);
  --surface-hover:var(--slate-800);
  --border:var(--slate-700);
  --border-strong:var(--slate-600);
  --text:var(--white);
  --text-muted:var(--slate-300);
  --text-faint:var(--slate-400);
  --brand:var(--blue-500);
  --brand-strong:var(--blue-600);
  --on-brand:var(--white);
  --accent:var(--amber-500);
  --ok:var(--green-500);
  --warn:var(--amber-500);
  --danger:var(--red-500);
  --info:var(--blue-300);   /* retrying — light-blue, phân biệt với --brand */
  --wait:var(--violet-400); /* waiting  — purple */
  --ring:var(--blue-400);
  --radius:var(--r-md);
  --font-mono:"Fira Code", ui-monospace, monospace;
  --section-gap:var(--s6);
  --label-size:var(--t-xs);
  --heat-none:var(--slate-800);
  --heat-low:var(--red-500);
  --heat-mid:var(--amber-500);
  --heat-ok:#16a34a;
}

/* ---- Tier 2: semantic — additions (motion / focus / type-roles) ---- */
:root {
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:240ms;
  --ease-standard:cubic-bezier(.4,0,.2,1); /* alias of existing --ease */
  --ease-out:cubic-bezier(0,0,.2,1);       /* enter */
  --ease-in:cubic-bezier(.4,0,1,1);        /* exit, snappier than enter */
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent);
  --focus-ring-offset:2px;
  --surface-active:var(--slate-800);
  --text-display:var(--t-3xl); --text-title:var(--t-lg);
  --text-body:var(--t-base);  --text-label:var(--t-xs);
}

/* ---- Tier 3: component tokens ---- */
:root {
  --btn-bg:var(--surface-2); --btn-bg-hover:var(--surface-hover);
  --btn-bg-active:var(--surface-active); --btn-fg:var(--text);
  --btn-border:var(--border-strong); --btn-h:40px; --btn-h-sm:32px; --btn-pad-x:var(--s4);
  --card-bg:var(--surface); --card-border:var(--border); --card-pad:var(--s5); --card-radius:var(--r-lg);
  --badge-pad:2px 9px; --badge-radius:var(--r-full);
  --input-h:42px; --input-bg:var(--bg); --input-border:var(--border-strong); --input-border-focus:var(--brand);
  --nav-item-h:44px; --nav-item-pad:var(--s3); --nav-group-gap:var(--s4);
  --nav-active-bg:var(--blue-800); --nav-active-fg:var(--white);
  --mdshell-list-w:380px; --row-selected-bg:var(--surface-active); --row-selected-bar:2px solid var(--brand);
  --detail-section-gap:var(--s6);
  --switcher-h:var(--btn-h); --switcher-menu-w:min(360px,92vw);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:var(--t-base)/1.55 "Fira Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:"Fira Code", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.num { font-variant-numeric:tabular-nums; }
.hidden { display:none !important; }
.muted { color:var(--text-muted); }
.faint { color:var(--text-faint); }

/* ---- Type-role utilities (views reference these, never raw font-size) ---- */
.text-display { font-size:var(--text-display); font-weight:700; }
.text-title { font-size:var(--text-title); font-weight:600; }
.text-body { font-size:var(--text-body); font-weight:400; }
.text-label { font-size:var(--text-label); font-weight:600; text-transform:uppercase; letter-spacing:.6px; }

/* ---- Token-driven utility/override classes (replace inline styles) ---- */
.btn-block { width:100%; }
.checkbox { width:auto; min-height:auto; }
.mt-0 { margin:0; }
.mt-2 { margin-top:var(--s2); }
.mt-3 { margin-top:var(--s3); }
.mt-5 { margin-top:var(--s5); }
.mb-3 { margin-bottom:var(--s3); }
.my-2 { margin:var(--s2) 0; }
.danger-title.text { color:var(--text); }
.w-input { max-width:200px; }
.w-select { max-width:240px; }
.w-date { max-width:160px; }
.break-all { word-break:break-all; }
.danger-zone.warn { border-color:color-mix(in srgb,var(--amber-500) 30%,transparent); background:color-mix(in srgb,var(--amber-500) 5%,transparent); }
.danger-zone.warn .danger-title { color:var(--amber-400); }
.btn-danger.warn { border-color:color-mix(in srgb,var(--amber-500) 50%,transparent); color:var(--amber-400); }
.btn-danger.warn:hover { border-color:var(--amber-500); background:color-mix(in srgb,var(--amber-500) 10%,transparent); }
.danger-zone.neutral { border-color:var(--slate-700); background:transparent; }
h1,h2,h3 { margin:0; font-weight:600; line-height:1.25; }
a { color:var(--brand); text-decoration:none; }
/* ONE focus ring for every interactive — replaces the 3 disparate outline styles. */
:where(a, button, input, select, textarea, [tabindex], .nav-item, .md-row, .seg button):focus-visible {
  outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm);
}
/* rows live in a scroll container — use outline (not box-shadow) so the ring isn't clipped */
.md-rows .md-row:focus-visible { outline:3px solid var(--ring); outline-offset:-3px; box-shadow:none; }

/* ---- App shell ---- */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100dvh; }
.sidebar {
  background:var(--slate-900); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh;
}
.brand { display:flex; align-items:center; gap:var(--s3); padding:var(--s6) var(--s5) var(--s5); }
.brand .logo {
  width:34px; height:34px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400));
  display:grid; place-items:center; flex:none;
}
.brand h1 { font-size:var(--t-md); letter-spacing:.2px; }
.brand .sub { font-size:var(--t-xs); color:var(--text-faint); }
.nav { display:flex; flex-direction:column; gap:2px; padding:var(--s3); flex:1; overflow-y:auto; }
.skip-link { position:absolute; left:var(--s3); top:-48px; z-index:var(--z-toast); background:var(--surface-2); color:var(--text); padding:var(--s2) var(--s4); border-radius:var(--r-md); transition:top var(--dur-fast) var(--ease-out); }
.skip-link:focus { top:var(--s3); }
.nav-group { margin-bottom:var(--nav-group-gap); }
.nav-group-head { color:var(--text-faint); padding:var(--s2) var(--nav-item-pad) var(--s1); }
.nav-items { display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:var(--s3); padding:var(--nav-item-pad);
  min-height:var(--nav-item-h); border-radius:var(--r-md); color:var(--text-muted); font-weight:500;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-item:hover { background:var(--surface-hover); color:var(--text); }
.nav-item.active { background:var(--nav-active-bg); color:var(--nav-active-fg); }
.nav-item[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.nav-item .ic { width:19px; height:19px; flex:none; }
.nav-item .count {
  margin-left:auto; font-size:var(--t-xs); background:var(--surface-2);
  padding:1px 8px; border-radius:var(--r-full); color:var(--text-muted);
}
.nav-item .count.warn { background:rgba(239,68,68,.18); color:var(--red-400); }
.sidebar-foot { padding:var(--s4) var(--s5); border-top:1px solid var(--border); font-size:var(--t-xs); color:var(--text-faint); }

.main { min-width:0; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:var(--z-nav);
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s6); background:rgba(13,17,26,.88);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.topbar .menu-btn { display:none; }
.page-title { font-size:var(--t-lg); }
.topbar .spacer { flex:1; }
.content { padding:var(--s6); max-width:1400px; width:100%; margin:0 auto; }

/* ---- Hotel switcher (topbar) ---- */
.hotel-switcher { position:relative; }
.switcher-trigger { height:var(--switcher-h); gap:var(--s2); max-width:280px; }
.switcher-trigger .switcher-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.switcher-trigger .ic-caret { flex:none; opacity:.7; }
.switcher-menu {
  position:absolute; top:calc(var(--switcher-h) + var(--s2)); left:0; width:var(--switcher-menu-w);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2);
  z-index:var(--z-nav); padding:var(--s2); max-height:60vh; overflow-y:auto;
  transform-origin:top left; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.switcher-menu.hidden { display:none; }   /* instant; reduced-motion-safe */
.switcher-search { margin-bottom:var(--s2); }
.switcher-search input { min-height:var(--btn-h-sm); }
.switcher-option { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border-radius:var(--r-sm); cursor:pointer; min-height:40px; }
.switcher-option:hover, .switcher-option.kbd-active { background:var(--surface-hover); }
.switcher-option[aria-selected="true"] { background:var(--row-selected-bg); }
.switcher-option .dot { margin-top:1px; }
.switcher-option .opt-text { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25; }
.switcher-option .opt-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.switcher-option .opt-sub { font-size:var(--t-xs); color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.switcher-option .ic-check { display:inline-flex; flex:none; color:var(--brand); margin-left:var(--s2); }
.switcher-option .ic-check svg { width:15px; height:15px; }

/* ---- KPI cards ---- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s4); margin-bottom:var(--s6); }
.kpi {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s5); position:relative; overflow:hidden;
}
.kpi .label { font-size:var(--text-label); color:var(--text-faint); text-transform:uppercase; letter-spacing:.7px; font-weight:600; }
.kpi .value { font-size:var(--text-display); font-weight:700; margin-top:var(--s2); line-height:1; font-family:"Fira Code"; }
.kpi .meta { font-size:var(--t-xs); color:var(--text-muted); margin-top:var(--s2); display:flex; align-items:center; gap:var(--s1); }
.kpi .ic { position:absolute; top:var(--s4); right:var(--s4); opacity:.5; }
.kpi .ic svg { width:22px; height:22px; }
.kpi.accent { border-color:rgba(245,158,11,.35); }
.kpi.accent .value { color:var(--amber-400); }
.kpi.danger .value { color:var(--red-400); }
.kpi.ok .value { color:var(--green-400); }

/* ---- Cards / panels ---- */
.card {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius);
  margin-bottom:var(--s6); overflow:hidden;
}
.card-head { display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--border); }
.card-head h2 { font-size:var(--t-md); }
.card-head .spacer { flex:1; }
.card-body { padding:var(--card-pad); }
.grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:var(--s6); }

/* ---- Table ---- */
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tbl th, .tbl td { text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl th {
  color:var(--text-faint); font-weight:600; font-size:var(--text-label);
  text-transform:uppercase; letter-spacing:.6px; position:sticky; top:0; background:var(--surface);
}
.tbl th.sortable { cursor:pointer; user-select:none; }
.tbl th.sortable:hover { color:var(--text); }
.tbl th .arrow { opacity:.4; font-size:10px; margin-left:4px; }
.tbl th[aria-sort] .arrow { opacity:1; color:var(--brand); }
.tbl tbody tr { transition:background var(--dur-fast) var(--ease-out); }
.tbl tbody tr.clickable { cursor:pointer; }
.tbl tbody tr:hover { background:var(--surface-hover); }
.tbl td.r { text-align:right; }
.tbl td.c, .tbl th.c { text-align:center; }
.tbl .strong { color:var(--text); font-weight:600; }
/* two-line identity cell: primary code + truncated mono sub-id */
.tbl .cell-strong { display:block; color:var(--text); font-weight:600; }
.tbl .cell-sub { display:block; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-xs); color:var(--text-faint); }
.tbl .ic-ok { display:inline-flex; color:var(--green-500); }
.tbl .ic-ok svg { width:16px; height:16px; }
.tbl-mapping td { padding-top:var(--s2); padding-bottom:var(--s2); }

/* ---- Badge / status dot ---- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:var(--badge-pad); border-radius:var(--badge-radius); font-size:var(--t-xs); font-weight:600; line-height:1.5; }
.badge.on { background:rgba(34,197,94,.16); color:var(--green-400); }
.badge.off { background:rgba(239,68,68,.16); color:var(--red-400); }
.badge.warn { background:rgba(245,158,11,.16); color:var(--amber-400); }
.badge.neutral { background:var(--surface-2); color:var(--text-muted); }
.badge.brand { background:rgba(59,130,246,.16); color:var(--blue-300); }
.badge.ok { background:rgba(34,197,94,.16); color:var(--green-400); }
.badge.info { background:rgba(147,197,253,.16); color:var(--blue-300); }
.badge.wait { background:rgba(167,139,250,.18); color:var(--violet-400); }
.dot { width:8px; height:8px; border-radius:50%; flex:none; }
.dot.on { background:var(--green-500); box-shadow:0 0 8px rgba(34,197,94,.6); }
.dot.off { background:var(--red-500); }
.dot.idle { background:var(--slate-500); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-border);
  border-radius:var(--r-md); padding:var(--s2) var(--btn-pad-x); font:inherit; font-weight:500;
  cursor:pointer; min-height:var(--btn-h); transition:var(--dur-fast) var(--ease-standard);
}
.btn:hover { border-color:var(--brand); background:var(--btn-bg-hover); }
.btn:active { background:var(--btn-bg-active); transform:translateY(1px); }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--brand-strong); border-color:var(--brand-strong); color:var(--on-brand); }
.btn-primary:hover { background:var(--blue-500); border-color:var(--blue-500); }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--surface-hover); }
.btn-sm { min-height:var(--btn-h-sm); padding:var(--s1) var(--s3); font-size:var(--t-xs); }
.btn-danger { color:var(--red-400); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger:hover { border-color:var(--danger); color:var(--red-400); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* Vùng nguy hiểm — xóa khách sạn */
.danger-zone { margin-top:var(--s5); padding:var(--s4); border:1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius:var(--radius); background:color-mix(in srgb, var(--danger) 5%, transparent); }
.danger-title { font-weight:600; color:var(--red-400); margin-bottom:var(--s1); }
.danger-zone p { margin:0 0 var(--s3); }

/* ---- Forms ---- */
label.field { display:flex; flex-direction:column; gap:var(--s2); font-size:var(--t-sm); color:var(--text-muted); margin-bottom:var(--s4); }
label.inline { flex-direction:row; align-items:center; gap:var(--s2); }
input, select {
  background:var(--input-bg); color:var(--text); border:1px solid var(--input-border);
  border-radius:var(--r-md); padding:var(--s3); font:inherit; min-height:var(--input-h); width:100%;
}
input:focus, select:focus { border-color:var(--input-border-focus); }
.help { font-size:var(--t-xs); color:var(--text-faint); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 var(--s5); }
.kv-grid { display:grid; grid-template-columns:max-content 1fr; align-items:center; gap:var(--s2) var(--s4); }
.input-sm { min-height:var(--btn-h-sm); width:auto; padding:var(--s2) var(--s3); }
.input-narrow { width:6rem; }
.input-medium { width:12rem; }

/* ---- Toolbar (filter row) ---- */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
.toolbar .search { position:relative; flex:1; min-width:200px; }
.toolbar .search svg { position:absolute; left:var(--s3); top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); }
.toolbar .search input { padding-left:36px; }
.segmented { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:3px; gap:2px; }
.segmented button { background:transparent; border:none; color:var(--text-muted); padding:6px 14px; border-radius:7px; cursor:pointer; font:inherit; font-size:var(--t-sm); min-height:32px; }
.segmented button.active { background:var(--blue-800); color:var(--white); }

/* ---- Chart (inline SVG) ---- */
.chart { width:100%; height:240px; }
.chart .grid line { stroke:var(--slate-700); stroke-width:1; }
.chart .axis text { fill:var(--text-faint); font-size:11px; }
.bar-row { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); font-size:var(--t-sm); }
.bar-row .name { width:120px; flex:none; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .track { flex:1; height:10px; background:var(--surface-2); border-radius:var(--r-full); overflow:hidden; }
.bar-row .fill { height:100%; background:linear-gradient(90deg,var(--blue-600),var(--blue-400)); border-radius:var(--r-full); }
.bar-row .val { width:48px; text-align:right; flex:none; }

/* ---- Empty / loading ---- */
.empty { text-align:center; padding:var(--s10) var(--s5); color:var(--text-faint); }
.empty svg { width:44px; height:44px; opacity:.4; margin-bottom:var(--s3); }
.banner { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r-md); margin-bottom:var(--s3); font-size:var(--t-sm); }
.banner svg { width:18px; height:18px; flex:0 0 auto; }
.banner .btn { margin-left:auto; flex:0 0 auto; }
.banner.danger { background:rgba(239,68,68,.12); color:var(--red-400); border-left:2px solid var(--danger); }
.banner.success { background:rgba(34,197,94,.12); color:var(--green-400); border-left:2px solid var(--ok); }
.banner.neutral { background:var(--surface-2); color:var(--text-muted); border-left:2px solid var(--border); }
/* Global hub-health strip: shown by api() when the origin is unreachable. */
.health-banner { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s5); font-size:var(--t-sm); background:rgba(239,68,68,.14); color:var(--red-400); border-bottom:1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.health-banner svg { flex:0 0 auto; }
.empty.err-state svg { color:var(--red-400); opacity:.55; }
.skeleton { background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hover) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm); min-height:160px; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* ---- Drawer ---- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:var(--z-overlay); opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-standard); }
.overlay.show { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; right:0; height:100dvh; width:min(460px,92vw);
  background:var(--surface); border-left:1px solid var(--border); z-index:var(--z-drawer);
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-in);
  display:flex; flex-direction:column; box-shadow:var(--sh-3);
}
.drawer.show { transform:translateX(0); transition:transform var(--dur-slow) var(--ease-out); }
.drawer-head { display:flex; align-items:center; gap:var(--s3); padding:var(--s5); border-bottom:1px solid var(--border); }
.drawer-head h2 { font-size:var(--t-md); flex:1; }
.drawer-body { padding:var(--s5); overflow-y:auto; }
dl.kv { display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s5); margin:0; font-size:var(--t-sm); }
dl.kv dt { color:var(--text-faint); font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
dl.kv dd { margin:0; word-break:break-word; }

/* ---- drawer sections ---- */
.drawer-section { padding-top:var(--section-gap); border-top:1px solid var(--border); margin-top:var(--s4); }
.drawer-section:first-child { border-top:none; padding-top:0; margin-top:0; }
.section-title { font-size:var(--text-label); font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--text-faint); margin:0 0 var(--s3); }
.provenance-hl { border-left:3px solid var(--brand); padding-left:var(--s4); }
.provenance-pms { border-left:3px solid var(--ok); padding-left:var(--s4); }
.code-block { background:var(--bg); padding:var(--s3) var(--s4); border-radius:var(--r-md); border-left:2px solid var(--danger); white-space:pre-wrap; font-family:var(--font-mono); font-size:var(--t-xs); color:var(--red-400); overflow-x:auto; }
.drawer-meta { border-top:1px solid var(--border); margin-top:var(--s5); padding-top:var(--s3); font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-faint); }
/* code-data: code-block dùng cho payload/response (dữ liệu, không phải lỗi) — trung tính + giới hạn chiều cao. */
.code-block.code-data { border-left-color:var(--border); color:var(--text); max-height:320px; overflow-y:auto; }
.hlcall-toggle { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:var(--t-sm); line-height:1; padding:var(--s2); border-radius:var(--r-sm); }
.hlcall-toggle:hover { color:var(--text); background:var(--bg); }

/* ---- Heatmap (availability grid) ---- */
.heat-grid { display:grid; gap:2px; overflow-x:auto; padding-bottom:var(--s2); }
.heat-cell { min-width:36px; height:30px; display:flex; align-items:center; justify-content:center; font:var(--t-xs)/1 var(--font-mono); border-radius:var(--r-sm); font-variant-numeric:tabular-nums; color:var(--white); }
.heat-rowlabel { display:flex; align-items:center; padding:0 var(--s2); font:var(--t-xs)/1 var(--font-mono); color:var(--text-muted); white-space:nowrap; }
.heat-collabel { display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-faint); padding-bottom:var(--s1); white-space:nowrap; }
.heat-legend { display:flex; gap:var(--s3); align-items:center; font-size:var(--t-xs); color:var(--text-faint); margin-top:var(--s3); flex-wrap:wrap; }
.heat-swatch { display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:middle; margin-right:4px; }
/* PMS↔HL mismatch: amber ring (meaning carried by ring + the differing number, not color alone) */
.heat-cell.heat-diff { box-shadow:inset 0 0 0 2px var(--amber-500,#f59e0b); }
.heat-swatch.heat-diff { background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--amber-500,#f59e0b); }
.sect-title { font-size:var(--t-sm); font-weight:600; color:var(--text-muted); margin:0 0 var(--s2); }
.mt-4 { margin-top:var(--s4); }
.empty.sm { padding:var(--s5) var(--s4); }
.banner.sm { font-size:var(--t-xs); padding:var(--s2) var(--s3); }

/* ---- Toast ---- */
#toasts { position:fixed; bottom:var(--s6); right:var(--s6); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--s2); }
.toast { background:var(--surface-2); border:1px solid var(--border-strong); border-left:3px solid var(--brand); border-radius:var(--r-md); padding:var(--s3) var(--s4); box-shadow:var(--sh-2); font-size:var(--t-sm); max-width:340px; animation:slideIn var(--dur-base) var(--ease-out); }
.toast.ok { border-left-color:var(--ok); }
.toast.err { border-left-color:var(--danger); }
@keyframes slideIn { from { opacity:0; transform:translateX(12px); } }

/* ---- Login ---- */
.login-overlay { position:fixed; inset:0; background:var(--slate-950); display:grid; place-items:center; z-index:var(--z-overlay); }
.login-card { width:min(360px,90vw); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s8); box-shadow:var(--sh-3); }
.login-card .brand { padding:0 0 var(--s6); justify-content:center; }
.login-card .err { color:var(--red-400); font-size:var(--t-sm); min-height:1.4em; margin-top:var(--s2); }

.token-box { background:var(--bg); border:1px dashed var(--amber-500); border-radius:var(--r-md); padding:var(--s4); margin-top:var(--s4); font-family:"Fira Code"; font-size:var(--t-sm); word-break:break-all; }
.section-gap { height:var(--s2); }

/* ---- Language switch ---- */
.lang-switch.segmented button { padding:4px 10px; font-size:var(--t-xs); font-weight:600; min-height:28px; letter-spacing:.4px; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
  .grid-2 { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .app { grid-template-columns:1fr; }
  .sidebar {
    position:fixed; left:0; top:0; z-index:var(--z-drawer); width:248px;
    transform:translateX(-100%); transition:transform var(--dur-base) var(--ease-standard);
  }
  .sidebar.open { transform:translateX(0); box-shadow:var(--sh-3); }
  .topbar .menu-btn { display:inline-flex; }
  .content { padding:var(--s4); }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important; }
  /* kill keyframe enters (translate-in) and the shimmer loop — opacity/visibility changes stay instant.
     NOTE: do NOT neutralize the structural translateX/translateY that hides .drawer/.md-detail,
     only the keyframe animations; the instant transition-duration above handles show/hide. */
  .skeleton { animation:none !important; }
  .md-detail-body.enter, .toast { animation:none !important; }
}

/* ---- Full-page detail layouts ---- */
.page-head { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
.page-title-inline { font-size:var(--t-lg); font-weight:600; margin:0; outline:none; }
.booking-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:start; }
@media (max-width:1023px){ .booking-cols { grid-template-columns:1fr; } }

/* ---- Master-detail shell (Bookings + HL Calls) ---- */
.md-shell { display:grid; grid-template-columns:var(--mdshell-list-w) 1fr; gap:var(--s5); align-items:start; }
.md-list { display:flex; flex-direction:column; gap:var(--s3); max-height:calc(100dvh - 160px); min-height:0; }
.md-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.md-toolbar .search { position:relative; flex:1; min-width:160px; }
.md-toolbar .search svg { position:absolute; left:var(--s3); top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); }
.md-toolbar .search input { padding-left:36px; min-height:var(--btn-h-sm); }
/* Secondary filter row: hotel / source / date-range / clear */
.md-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s2) var(--s3); }
.md-filters .fl { display:flex; flex-direction:column; gap:2px; }
.md-filters .fl > span { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
.md-filters select, .md-filters input { min-height:var(--btn-h-sm); }
.hotel-picker { min-height:var(--btn-h-sm); min-width:200px; }
/* Auto-refresh toggle: lit ring when active */
#autorefresh-btn.active { color:var(--brand); background:var(--surface-hover); }
.md-rows { overflow-y:auto; border:1px solid var(--border); border-radius:var(--r-md); flex:1; }
.md-row {
  display:grid; grid-template-columns:1fr auto; gap:var(--s1) var(--s3); padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border); cursor:pointer; border-left:2px solid transparent;
  transition:background var(--dur-fast) var(--ease-out);
}
.md-row:last-child { border-bottom:none; }
.md-row:hover { background:var(--surface-hover); }
.md-row[aria-selected="true"] { background:var(--row-selected-bg); border-left:var(--row-selected-bar); }
.md-row .md-row-main { display:flex; align-items:center; gap:var(--s2); min-width:0; }
.md-row .md-row-id { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-faint); }
.md-row .md-row-title { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-row .md-row-sub { grid-column:1/-1; font-size:var(--t-xs); color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-row .md-row-badges { display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap; justify-content:flex-end; }
.md-pager { display:flex; justify-content:center; padding:var(--s3); }
.md-detail { border:1px solid var(--border); border-radius:var(--r-lg); min-height:300px; }
.md-sort { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.md-sort button { background:transparent; border:none; color:var(--text-muted); padding:var(--s1) var(--s3); cursor:pointer; font:inherit; font-size:var(--t-xs); min-height:var(--btn-h-sm); }
.md-sort button[aria-sort] { color:var(--brand); }
.md-sort button .arrow { opacity:.5; margin-left:3px; }
.md-sort button[aria-sort] .arrow { opacity:1; }
@media (max-width:1023px) {
  .md-shell { grid-template-columns:1fr; }
  .md-list { max-height:none; }
  .md-detail {
    position:fixed; inset:0; z-index:var(--z-drawer); background:var(--surface); overflow-y:auto;
    transform:translateY(100%); transition:transform var(--dur-base) var(--ease-out);
  }
  .md-shell.detail-open .md-detail { transform:translateY(0); }
  .md-shell:not(.detail-open) .md-detail { display:none; }
}

/* ---- Detail panel (booking + HL call) ---- */
.md-detail-head { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; padding:var(--s5); border-bottom:1px solid var(--border); }
.md-detail-title { font-size:var(--text-title); font-weight:600; outline:none; margin:0; }
.md-detail-badges { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.md-detail-actions { margin-left:auto; display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }
.md-detail-body { padding:var(--s5); display:flex; flex-direction:column; gap:var(--detail-section-gap); overflow-y:auto; }
.md-detail-body.enter { animation:detailIn var(--dur-base) var(--ease-out); }
@keyframes detailIn { from { opacity:0; transform:translateY(4px); } }
.detail-block-title { font-size:var(--t-md); font-weight:600; margin-bottom:var(--s3); }
.provenance-hl .detail-block-title { color:var(--brand); }
.provenance-pms .detail-block-title { color:var(--ok); }
.detail-section { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius); padding:var(--card-pad); }
.detail-section > h3 { font-size:var(--text-label); text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); margin-bottom:var(--s3); }
.detail-meta { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-faint); border-top:1px solid var(--border); padding-top:var(--s3); display:flex; flex-direction:column; gap:var(--s1); }
details.disclosure > summary { cursor:pointer; color:var(--text-muted); padding:var(--s2) 0; list-style:revert; }
details.disclosure > summary:hover { color:var(--text); }
.overflow-menu { position:relative; }
.overflow-menu .menu { position:absolute; right:0; top:calc(100% + 4px); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2); min-width:180px; padding:var(--s2); z-index:var(--z-nav); }
.overflow-menu .menu [role=menuitem] { display:block; width:100%; text-align:left; padding:var(--s2) var(--s3); border-radius:var(--r-sm); background:none; border:none; color:var(--text); cursor:pointer; font:inherit; }
.overflow-menu .menu [role=menuitem]:hover { background:var(--surface-hover); }

/* ---- 3-layer provenance + audit timeline + reconcile (control plane) ---- */
.provenance { border-left:3px solid var(--border); padding-left:var(--s4); }
.provenance-hl { border-left-color:var(--brand); }
.provenance-hub { border-left-color:var(--accent); }
.provenance-pms { border-left-color:var(--ok); }
.provenance-hub .detail-block-title { color:var(--accent); }
.detail-block-title { display:flex; align-items:center; gap:var(--s2); }
.layer-badge { text-transform:uppercase; letter-spacing:.5px; }

/* event timeline — append-only, newest first */
.timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.tl-item { display:grid; grid-template-columns:auto 1fr; gap:var(--s3); position:relative; }
.tl-item:not(:last-child) .tl-dot::after {
  content:""; position:absolute; top:14px; left:5px; width:2px; height:calc(100% + var(--s3) - 12px);
  background:var(--border);
}
.tl-dot { position:relative; width:12px; height:12px; border-radius:var(--r-full); margin-top:3px; background:var(--text-faint); flex:0 0 auto; }
.tl-dot.ok { background:var(--ok); }
.tl-dot.warn { background:var(--warn); }
.tl-dot.off { background:var(--danger); }
.tl-dot.info { background:var(--info); }
.tl-dot.neutral { background:var(--text-faint); }
.tl-body { min-width:0; display:flex; flex-direction:column; gap:2px; padding-bottom:var(--s1); }
.tl-head { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.tl-label { font-weight:600; }
.tl-time { margin-left:auto; font-size:var(--t-xs); }
.tl-detail { font-size:var(--t-sm); color:var(--text-muted); word-break:break-word; }
.tl-actor { font-size:var(--t-xs); }

/* reconcile verdict */
.recon-out { display:flex; flex-direction:column; gap:var(--s3); }
.recon-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
@media (max-width:560px){ .recon-grid { grid-template-columns:1fr; } }
.recon-col { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r-md); padding:var(--s4); }
.recon-col-h { font-size:var(--text-label); text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); margin-bottom:var(--s3); font-weight:600; }
.recon-diffs { background:rgba(245,158,11,.08); border:1px solid color-mix(in srgb,var(--amber-500) 30%,transparent); border-radius:var(--r-md); padding:var(--s4); }
.recon-diffs h4 { margin:0 0 var(--s2); font-size:var(--t-sm); color:var(--amber-400); }
.recon-diffs ul { margin:0; padding-left:var(--s5); font-size:var(--t-sm); color:var(--text-muted); display:flex; flex-direction:column; gap:var(--s1); }
.recon-actions { display:flex; justify-content:flex-end; }