/* ============================================================
   Nailounge Admin — admin.css
   1. Tokens: imports ONLY ../nailounge-new/colors_and_type.css
      (font URLs resolve relative to the IMPORTED file — B9).
      NEVER import site.css (marketing CSS, global side effects).
   2. Component recipes copied VERBATIM from nailounge-new/css/
      site.css (the plan Task 8 list) — the ONLY block allowed to
      carry color literals. ~120 duplicated lines accepted;
      a shared components.css is post-v1.
   3. Admin shell: every color/spacing/radius/shadow below comes
      from the tokens — stone surfaces, white cards, ink sidebar,
      gold as THE accent (spec 11.6). No Playfair in admin.
   ============================================================ */
@import url('../nailounge-new/colors_and_type.css');

/* ============================================================
   COPIED RECIPES — VERBATIM from nailounge-new/css/site.css
   (.btn base+gold+outline, .field, .choice, .slot[-grid],
    .daychip[s], .search-input). Do not edit here.
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:15px 30px;border:none;cursor:pointer;font-weight:600;transition:all .22s cubic-bezier(.22,.61,.36,1);white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn--gold{background:var(--gold);color:#fff;box-shadow:0 0 0 4px var(--gold-soft)}
.btn--gold:hover{background:var(--gold-bright);color:#fff;box-shadow:0 0 0 4px var(--sand)}
.btn--outline{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--hairline-2);border-radius:12px;padding:14px 16px;outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field textarea{resize:vertical;min-height:120px}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice button{padding:12px 18px;border-radius:12px;border:1px solid var(--hairline-2);background:#fff;font-family:var(--font-body);font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .18s}
.choice button:hover{border-color:var(--gold)}
.choice button.sel{border-color:var(--gold);background:var(--gold-soft);color:#7d6017}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.daychips{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.daychip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;border-radius:13px;border:1px solid var(--hairline-2);background:#fff;cursor:pointer;transition:all .16s ease}
.daychip:hover{border-color:var(--gold)}
.daychip__wd{font-family:var(--font-label);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.daychip__n{font-family:var(--font-body);font-size:18px;font-weight:600;color:var(--ink);line-height:1}
.daychip__dot{width:6px;height:6px;border-radius:999px;background:var(--lime,#A8C53A)}
.daychip.sel{background:var(--ink);border-color:var(--ink)}
.daychip.sel .daychip__wd{color:rgba(255,255,255,.7)}
.daychip.sel .daychip__n{color:#fff}
.daychip.sel .daychip__dot{background:var(--lime,#A8C53A)}
.slot{padding:12px;border-radius:10px;border:1px solid var(--hairline-2);background:#fff;font-family:var(--font-body);font-size:14px;color:var(--ink-2);cursor:pointer;text-align:center;transition:all .18s}
.slot:hover{border-color:var(--gold)}
.slot.sel{border-color:var(--gold);background:var(--gold-soft);color:#7d6017}
.slot.off{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.search-input{position:relative;display:flex;align-items:center}
.search-input>svg{position:absolute;left:15px;color:var(--gold);pointer-events:none}
.search-input input{flex:1;font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--hairline-2);border-radius:12px;padding:14px 84px 14px 44px;outline:none;transition:border-color .18s}
.search-input input:focus{border-color:var(--gold)}
.search-input input::placeholder{color:var(--ink-3)}
/* ================= end of copied recipes ================= */

/* ---------- base / app frame ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.nla-app {
  display: grid;
  grid-template-columns: 236px 1fr;
  background: var(--stone);
  overflow: hidden;
}

/* ---------- sidebar: the ONLY dark surface (ink + gold) ---------- */
#nla-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--stone-3);
  height: 100vh;
  padding: var(--space-5) 0 var(--space-4);
}
.nla-brand { padding: 0 var(--space-5) var(--space-5); }
.nla-brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--porcelain);
}
.nla-brand__sub {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nla-branch { padding: 0 var(--space-5) var(--space-5); }
.nla-branch__label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--concrete-lt);
  margin-bottom: var(--space-2);
}
.nla-branch__fixed { font-family: var(--font-body); font-size: 14px; color: var(--porcelain); }
.nla-branch select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--porcelain);
  background: color-mix(in srgb, var(--porcelain) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--porcelain) 22%, transparent);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  outline: none;
}
.nla-branch select:focus { border-color: var(--gold); }
.nla-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3); }
.nla-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-left: 2px solid transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-3);
  transition: color .18s ease, background .18s ease;
}
.nla-nav a:hover { color: var(--porcelain); background: color-mix(in srgb, var(--porcelain) 7%, transparent); }
.nla-nav a.active { color: var(--gold-bright); border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
/* account block: sits at the sidebar bottom (".nla-nav { flex: 1 }" pushes it
   down), right above logout — same label idiom as the CHI NHÁNH block */
.nla-account { padding: 0 var(--space-5); }
.nla-account__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--concrete-lt);
  margin-bottom: var(--space-2);
}
.nla-account__email {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--porcelain);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* long Gmail addresses must not wrap the 236px column */
}
.nla-account__role { font-family: var(--font-body); font-size: 12px; color: var(--concrete-lt); margin-top: 2px; }

.nla-logout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-3) 0;
  padding: var(--space-3);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--concrete-lt);
  transition: color .18s ease;
}
.nla-logout:hover { color: var(--porcelain); }

/* ---------- main column ---------- */
.nla-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.nla-banner {
  background: var(--gold-soft);
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-2) var(--space-4);
}
#nla-view { flex: 1; overflow: auto; padding: var(--space-6); }
.nla-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
  color: var(--ink-3);
}
.nla-placeholder p { margin: 0; font-size: 15px; color: var(--ink-3); }

/* ---------- toast ---------- */
#nla-toast-root {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1000;
}
.nla-toast {
  background: var(--surface);
  color: var(--ink-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-3) var(--space-4);
  max-width: 360px;
  cursor: pointer;
  animation: nla-toast-in .22s cubic-bezier(.22,.61,.36,1);
}
.nla-toast--ok { border-left-color: var(--success); }
.nla-toast--error { border-left-color: var(--danger); }
@keyframes nla-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- modal ---------- */
.nla-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  z-index: 900;
  padding: var(--space-5);
}
.nla-modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: auto;
  padding: var(--space-6);
  animation: nla-modal-in .22s cubic-bezier(.22,.61,.36,1);
}
.nla-modal__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}
.nla-modal__body { font-family: var(--font-body); font-size: 15px; color: var(--ink-2); }
.nla-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.nla-btn--danger { color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.nla-btn--danger:hover { background: var(--danger); color: var(--porcelain); box-shadow: 0 0 0 1px var(--danger); }
@keyframes nla-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- spinner ---------- */
.nla-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--stone-3);
  border-top-color: var(--gold);
  border-radius: var(--r-pill);
  animation: nla-spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes nla-spin { to { transform: rotate(360deg); } }

/* ---------- config-placeholder banner (auth.js guard) ---------- */
.nla-config-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--danger);
  color: var(--porcelain);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  padding: var(--space-4);
}
/* retry button inside the boot-error banner (auth.js transportBanner) */
.nla-config-banner__retry {
  margin-left: var(--space-4);
  color: var(--porcelain);
  border-color: var(--porcelain);
}

/* ---------- login page ---------- */
body.nla-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--stone);
  padding: var(--space-5);
}
.nla-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
}
.nla-login-card .eyebrow { margin-bottom: var(--space-3); }
.nla-login-card h1 { margin-bottom: var(--space-5); font-size: 30px; }
.nla-login-card .btn { width: 100%; justify-content: center; margin-top: var(--space-2); }
.nla-login-error { color: var(--danger); font-size: 14px; margin: var(--space-3) 0 0; }

/* ============================================================
   Task 9 — calendar day/week + booking cards + dialogs
   (geometry px values — card top/height, column height, hairline
   row size, grid template — are ALL inline styles computed from
   NLA.dnd.math / NLA.config; nothing below encodes 44/30/148.)
   ============================================================ */

/* ---------- calendar frame + toolbar ---------- */
.nla-cal { display: flex; flex-direction: column; height: 100%; gap: var(--space-4); }
.nla-cal__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nla-cal__days { width: 348px; max-width: 100%; }
.nla-cal__tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nla-cal__date {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-3);
  outline: none;
}
.nla-cal__date:focus { border-color: var(--gold); }
.nla-cal__seg { gap: var(--space-2); }
.nla-cal__seg button { padding: var(--space-3) var(--space-4); }
.nla-cal__walkin { padding: 13px 22px; }
.nla-cal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nla-cal__body > .nla-placeholder { flex: 1; justify-content: center; }
/* refresh failed while a bundle is displayed (T9-R4) */
.nla-cal__stale {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--stone-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- day grid: ONE 2-axis scroll container ---------- */
.nla-cal__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  touch-action: pan-x pan-y;   /* DnD spec 11.3: native pan until a card LIFTs */
}
.nla-cal__grid {
  display: grid;             /* grid-template-columns set inline from NLA.config */
  position: relative;        /* anchor for the absolute now-line */
}
.nla-cal__corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--stone-line);
}
.nla-cal__head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--stone-line);
  border-left: 1px solid var(--stone-line);
  padding: var(--space-3) var(--space-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nla-cal__gutter {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--surface);
  border-right: 1px solid var(--stone-line);
}
.nla-cal__gutter span {
  position: absolute;
  right: var(--space-2);
  transform: translateY(-50%);
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.nla-cal__col {
  position: relative;        /* cards/washes/blocks absolute inside */
  border-left: 1px solid var(--stone-line);
}

/* layer z1: off-shift wash */
.nla-cal__wash {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--stone-2);
  pointer-events: none;
}
/* layer z2: blocks — diagonal stripes + reason */
.nla-cal__blk {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  border: 1px dashed var(--stone-line-2);
  border-radius: var(--r-xs);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ink) 7%, transparent) 0 6px, transparent 6px 12px);
}
.nla-cal__blk span {
  margin: var(--space-1) var(--space-2);
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface);
  border-radius: var(--r-xs);
  padding: 1px var(--space-1);
}

/* layer z3: booking cards — ABSOLUTE; 3px status rail from tokens
   (gold confirmed/pending · success done · danger no_show) */
.nla-card {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: box-shadow .18s ease;
}
.nla-card:hover { box-shadow: var(--shadow-md); }
/* keyboard reach (T9-R2): cards + popover menuitems */
.nla-card:focus-visible,
.nla-pop__act:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.nla-card--pending { border-left-style: dashed; }
.nla-card--done { border-left-color: var(--success); opacity: .65; }
.nla-card--no_show { border-left-color: var(--danger); opacity: .65; }
.nla-card__time {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nla-card__svc {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* layer z4: gold now-line */
.nla-cal__now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 0;
  border-top: 2px solid var(--gold);
  pointer-events: none;
}
.nla-cal__now::before {
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--gold);
}

/* ---------- card popover ---------- */
.nla-pop {
  position: fixed;
  z-index: 950;
  min-width: 220px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  animation: nla-toast-in .18s cubic-bezier(.22,.61,.36,1);
}
.nla-pop__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--stone-line);
  margin-bottom: var(--space-2);
}
.nla-pop__name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.nla-pop__meta { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.nla-pop__meta--note { color: var(--ink-2); font-style: italic; }
.nla-pop__status {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.nla-pop__status--done { color: var(--success); }
.nla-pop__status--no_show { color: var(--danger); }
.nla-pop__act {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
}
.nla-pop__act:hover { background: var(--stone-2); color: var(--ink); }
.nla-pop__act--danger { color: var(--danger); }
.nla-pop__act--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

/* ---------- week heatmap (no DnD here) ---------- */
.nla-week {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.nla-week__grid {
  display: grid;
  grid-template-columns: minmax(140px, auto) repeat(7, 1fr);
  gap: var(--space-2);
  align-items: stretch;
}
.nla-week__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0;
}
.nla-week__day span {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-week__day b { font-family: var(--font-body); font-size: 13px; color: var(--ink); font-weight: 600; }
.nla-week__day--today span, .nla-week__day--today b { color: var(--gold); }
.nla-week__name {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  padding-right: var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nla-week__name--total {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--stone-line);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
.nla-week__name--total ~ .nla-week__cell {   /* the 7 branch-total cells (total row is last) */
  border-top: 1px solid var(--stone-line);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
.nla-week__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.nla-week__cell:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.nla-week__cell--dim { background: var(--stone-2); }
.nla-week__count {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.1;
}
.nla-week__bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--stone-3);
  overflow: hidden;
}
.nla-week__bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gold); }

/* ---------- booking-form dialogs (walk-in / reschedule / complete / cancel) ---------- */
.nla-bf .field { margin-bottom: var(--space-4); }
.nla-bf__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nla-bf__hint { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.nla-bf__current {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--stone);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
}
.nla-bf__slots { min-height: var(--space-7); }
.nla-bf__warns { margin: 0; padding-left: var(--space-4); }
.nla-bf__warns li { margin-bottom: var(--space-1); }

/* ---------- DnD (Task 10): ghost, drop-preview, pulses ---------- */
body.nla-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.nla-card[data-draggable] { cursor: grab; }
.nla-card--lifted { touch-action: none; }    /* spec 11.3: none on the card after LIFT */
.nla-card--src { opacity: .35; }             /* origin stays dimmed under the ghost */

/* fixed ghost clone — JS drives transform: translate(x,y) scale(1.03);
   the FLIP transition (220ms + ease) is set inline from dnd.js so the
   duration has ONE source */
.nla-ghost { /* MUST stay below .nla-modal-overlay (900): the parked ghost shows the landing slot UNDER the confirm dialog */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 880;
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  will-change: transform;
}
.nla-ghost--pending { animation: nla-ghost-pending .9s ease-in-out infinite; }
.nla-ghost__spin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.nla-ghost--ok {
  border-color: var(--gold);
  animation: nla-ghost-ok .5s cubic-bezier(.22,.61,.36,1) 1;
}
@keyframes nla-ghost-pending { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes nla-ghost-ok {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 50%, transparent); }
  100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--gold) 0%, transparent); }
}

/* drop preview — phase-1 LOCAL validation colors (D7):
   ok = success tint · soft warn = gold (amber) · hard = danger */
.nla-drop {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-1);
  border: 1.5px dashed var(--stone-line-2);
  border-radius: var(--r-sm);
  pointer-events: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .1em;
}
.nla-drop--ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
.nla-drop--warn { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.nla-drop--bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

/* confirm dialog: from -> to rows + advisory probe line */
.nla-dnd__row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
}
.nla-dnd__row span {
  width: 48px;
  flex: none;
  align-self: center;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-dnd__row b { color: var(--ink); font-weight: 600; }
.nla-dnd__warnhead {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.nla-dnd__probe {
  margin: var(--space-3) 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-3);
}
.nla-dnd__probe--ok { color: var(--success); }
.nla-dnd__probe--warn { color: var(--gold); }
.nla-dnd__probe--bad { color: var(--danger); }

/* ================= Task 11 views (blocks / customers / analytics) =================
   White panels on stone, gold the only accent — every value from the tokens. */

/* shared white panel */
.nla-panel {
  background: var(--porcelain);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.nla-panel__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--ink);
}

/* ---------- blocks (Chan gio) ---------- */
.nla-blk {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: var(--space-5);
  align-items: start;
}
.nla-blk__times { display: flex; gap: var(--space-3); }
.nla-blk__times .field { flex: 1; }
.nla-blk__presets { margin-bottom: var(--space-2); }
.nla-blk__err {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--danger);
}
.nla-blk__submit { width: 100%; }
.nla-blk__hint, .nla-cu__hint, .nla-an__hint {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-3);
}
.nla-blk__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--stone-line);
}
.nla-blk__row:last-child { border-bottom: 0; }
.nla-blk__rowmain { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.nla-blk__when { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.nla-blk__who {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-blk__who--branch { color: var(--gold); }
.nla-blk__why { font-family: var(--font-body); font-size: 13px; color: var(--ink-2); }
.nla-blk__del { padding: 8px 16px; }

/* ---------- customers (Khach hang & diem — view-only) ---------- */
.nla-cu {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--space-5);
  align-items: start;
}
.nla-cu__results { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.nla-cu__exact {
  margin: 0;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.nla-cu__hit {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--porcelain);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .18s;
}
.nla-cu__hit:hover { border-color: var(--gold); }
.nla-cu__hit.sel { border-color: var(--gold); background: var(--gold-soft); }
.nla-cu__hitname { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.nla-cu__hitmeta { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.nla-cu__head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.nla-cu__head .nla-panel__title { margin: 0; }
.nla-cu__contact { font-family: var(--font-body); font-size: 13px; color: var(--ink-3); }
.nla-cu__stats { display: flex; gap: var(--space-4); margin-bottom: var(--space-3); }
.nla-cu__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--stone);
  border-radius: var(--r-md);
  padding: var(--space-4);
}
.nla-cu__statlbl {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-cu__statval {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  color: var(--ink);
  line-height: 1.1;
}
.nla-cu__viewonly { margin: 0 0 var(--space-4); font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.nla-cu__histtitle {
  margin: 0 0 var(--space-3);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-cu__table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 13px; color: var(--ink-2); }
.nla-cu__table td { padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--stone-line); }
.nla-cu__table tr:last-child td { border-bottom: 0; }
.nla-cu__amt { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); }
.nla-cu__st {
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nla-cu__st--done { color: var(--success); }
.nla-cu__st--no_show, .nla-cu__st--cancelled { color: var(--danger); }
.nla-cu__st--pending, .nla-cu__st--confirmed { color: var(--gold); }

/* ---------- analytics (Phan tich — hand-rolled SVG, gold on stone) ---------- */
.nla-an { display: flex; flex-direction: column; gap: var(--space-5); }
.nla-an__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5);
}
.nla-an__toolbar .field { margin-bottom: 0; }
.nla-an__custom { display: flex; align-items: flex-end; gap: var(--space-3); }
.nla-an__branch select { min-width: 220px; }
.nla-an__summary { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.nla-an__stat {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--porcelain);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.nla-an__statlbl {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-an__statval {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  color: var(--ink);
  line-height: 1.1;
}
.nla-chart { display: block; width: 100%; height: auto; }
.nla-chart__bar { fill: var(--gold); }
.nla-chart__base { stroke: var(--stone-line-2); stroke-width: 1; }
.nla-chart__val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  fill: var(--ink);
}
.nla-chart__lbl {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: .04em;
  fill: var(--ink-3);
}
.nla-an__occlist {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}
.nla-an__occlist b { color: var(--ink-2); font-weight: 600; }

/* Task 11 narrow-viewport fallback: panels stack */
@media (max-width: 900px) {
  .nla-blk, .nla-cu { grid-template-columns: 1fr; }
}

/* ================= Task 12: dashboard (Tong quan — 4 widgets) =================
   White panels on stone, gold the only accent — every value from the tokens. */
.nla-db { display: flex; flex-direction: column; gap: var(--space-5); }
.nla-db__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.nla-db__side { display: flex; flex-direction: column; gap: var(--space-5); }

/* widget 1: header strip */
.nla-db__strip { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nla-db__striphead { flex: 1; min-width: 220px; }
.nla-db__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-1);
}
.nla-db__date {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: .01em;
  color: var(--ink);
}
.nla-db__counts { display: flex; gap: var(--space-5); }
.nla-db__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-db__count b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}

/* widget 2: appointments by hour */
.nla-db__hour {
  margin-top: var(--space-3);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--stone-line);
  padding-bottom: var(--space-1);
}
.nla-db__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.nla-db__row:last-child { border-bottom: 0; }
.nla-db__row--done, .nla-db__row--no_show { opacity: .65; }
.nla-db__rowtime {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-2);
  white-space: nowrap;
}
.nla-db__rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nla-db__rowmain b { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.nla-db__rowmain span { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.nla-db__rowacts { display: flex; gap: var(--space-2); }
.nla-db__act {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  transition: background .18s ease, color .18s ease;
}
.nla-db__act:hover { background: var(--gold-soft); }
.nla-db__act--muted { border-color: var(--stone-line); color: var(--ink-3); }
.nla-db__act--muted:hover { background: var(--stone-2); }
.nla-db__badge {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-db__badge--done { color: var(--success); }
.nla-db__badge--no_show { color: var(--danger); }
.nla-db__pasttoggle {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--stone-line);
  border-radius: var(--r-sm);
  background: var(--stone);
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .18s ease, border-color .18s ease;
}
.nla-db__pasttoggle:hover { color: var(--gold); border-color: var(--gold); }
.nla-db__past { opacity: .72; }

/* widget 3: free-slot bands */
.nla-db__bands { display: flex; gap: var(--space-3); }
.nla-db__band {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: var(--stone);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-2);
}
.nla-db__bandlabel {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-db__bandnum {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
}
.nla-db__band--zero .nla-db__bandnum { color: var(--ink-3); }
.nla-db__bandunit { font-family: var(--font-body); font-size: 11px; color: var(--ink-3); }

/* widget 4: attention (active blocks only — B8) */
.nla-db__attnrow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--danger);
}
.nla-db__attnrow:last-child { border-bottom: 0; }
.nla-db__attnrow svg { flex: none; margin-top: 2px; }
.nla-db__attnmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nla-db__attnmain b { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.nla-db__attnwho {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nla-db__attnwho--branch { color: var(--gold); }
.nla-db__attnwhy { font-family: var(--font-body); font-size: 13px; color: var(--ink-2); }

/* shared empty state */
.nla-db__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  color: var(--ink-3);
}
.nla-db__empty p { margin: 0; font-family: var(--font-body); font-size: 14px; }

/* dashboard narrow-viewport fallback: columns stack */
@media (max-width: 900px) {
  .nla-db__grid { grid-template-columns: 1fr; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nla-toast, .nla-modal, .nla-pop { animation: none; }
  .btn, .nla-card, .nla-week__cell { transition: none; }
  /* DnD: dnd.js already skips FLIP/settle via matchMedia; belt + braces */
  .nla-ghost--pending, .nla-ghost--ok { animation: none; }
}

/* ============================================================
   MOBILE LAYER — responsive pass (drawer + per-view fixes).
   Desktop >900px stays pixel-identical: rules below are either
   safety rules that change nothing visually on desktop (dvh
   fallbacks, overflow guards) or live inside max-width queries.
   The drawer reuses THE SAME #nla-sidebar element app.js
   renders — renderSidebar() and route()'s active-link sync
   stay single-source; app.js only toggles body.nla-nav-open.
   ============================================================ */

/* dvh corrections: iOS Safari 100vh overshoots by the URL bar; the
   second declaration wins where dvh is supported, vh is the fallback */
.nla-main { height: 100dvh; }
#nla-sidebar { height: 100dvh; }
.nla-modal { max-height: 86dvh; }
body.nla-login { min-height: 100dvh; }

/* touch DnD: the 300ms long-press must not race the iOS text-selection
   loupe/callout — body.nla-dragging arrives only AFTER lift */
.nla-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* fixed popover: JS flips/clamps position but never clamps size —
   a long unbroken note/email token must not push past the viewport */
.nla-pop { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
.nla-pop__meta, .nla-cu__hitmeta, .nla-cu__contact { overflow-wrap: anywhere; }

/* inner scrollers must not chain into page bounce / pull-to-refresh */
.nla-cal__scroll, .nla-week { overscroll-behavior: contain; }

/* intrinsic input widths must not blow out flex/grid rows */
.nla-blk__times .field { min-width: 0; }
.nla-blk__times select { width: 100%; min-width: 0; }
.nla-bf .field input, .nla-bf .field select, .nla-bf .field textarea { width: 100%; min-width: 0; }
/* the 84px right padding in the copied .search-input recipe exists for a
   marketing-site overlay button admin never renders — reclaim typing room */
.nla-cu .search-input input { padding-right: var(--space-4); }

/* topbar + scrim exist in the markup at every width; mobile-only display */
.nla-topbar { display: none; }
.nla-scrim { display: none; }

@media (max-width: 900px) {
  body.nla-app { grid-template-columns: 1fr; }

  /* ---------- mobile topbar (hamburger) ---------- */
  .nla-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    min-height: 56px;
    padding: 0 var(--space-3);
    background: var(--ink);
    color: var(--porcelain);
  }
  .nla-topbar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--porcelain);
    cursor: pointer;
    border-radius: var(--r-xs);
  }
  .nla-topbar__menu:active { background: color-mix(in srgb, var(--porcelain) 12%, transparent); }
  .nla-topbar__brand {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 18px;
    letter-spacing: .08em;
  }

  /* ---------- sidebar -> off-canvas drawer ---------- */
  /* visibility swap keeps the closed drawer out of the tab order
     (CSS-only a11y; the 0s visibility transition is delayed so the
     slide-out finishes before the element vanishes) */
  #nla-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 236px;          /* nav/account metrics are tuned for 236px */
    max-width: 84vw;
    z-index: 1200;         /* above toast 1000/pop 950/modal 900; below config-banner 2000 */
    overflow-y: auto;      /* logout must stay reachable in landscape */
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s .22s;
  }
  body.nla-nav-open #nla-sidebar {
    transform: none;
    visibility: visible;
    transition: transform .22s cubic-bezier(.22,.61,.36,1);
    box-shadow: var(--shadow-dark);
  }
  .nla-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.nla-nav-open .nla-scrim { opacity: 1; pointer-events: auto; }
  body.nla-nav-open #nla-view { overflow: hidden; }  /* freeze the only scroller behind the drawer */

  /* ---------- frame density ---------- */
  #nla-view { padding: var(--space-4); }
  .nla-panel { padding: var(--space-4); border-radius: var(--r-md); }
  .nla-placeholder { padding: var(--space-6) var(--space-4); }

  /* iOS auto-zooms the page when a focused control is under 16px;
     the .field/.search-input recipes are verbatim-copied, so the
     override lives here instead of editing them */
  .field input, .field select, .field textarea,
  .search-input input, .nla-cal__date, .nla-branch select { font-size: 16px; }

  /* ---------- toasts: full-width, above the home indicator ---------- */
  #nla-toast-root {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .nla-toast { max-width: none; }

  /* ---------- modal: top-anchored scrollable overlay (soft keyboard
     keeps the title + focused field visible), wrap-able actions ---------- */
  .nla-modal-overlay { padding: var(--space-3); align-items: flex-start; overflow: auto; }
  .nla-modal { margin: var(--space-4) auto; padding: var(--space-5) var(--space-4); max-height: none; }
  .nla-modal__actions { flex-wrap: wrap; }
  .nla-modal__actions .btn { flex: 1 1 auto; justify-content: center; padding: 13px 18px; }

  /* ---------- calendar toolbar stacks tight ---------- */
  .nla-cal__toolbar { gap: var(--space-3); }
  .nla-cal__days { width: 100%; }
  .nla-cal__tools { width: 100%; gap: var(--space-2); }
  .nla-cal__walkin { padding: 13px 18px; }

  /* ---------- week heatmap: compact tracks + sticky name rail ---------- */
  .nla-week { padding: var(--space-2); }
  .nla-week__grid { grid-template-columns: minmax(84px, auto) repeat(7, minmax(44px, 1fr)); gap: var(--space-1); }
  .nla-week__corner, .nla-week__name { position: sticky; left: 0; z-index: 2; background: var(--surface); }
  .nla-week__cell { padding: var(--space-1); min-height: 44px; }
  .nla-week__count { font-size: 14px; }

  /* ---------- dashboard rows: actions get a touch-size line ---------- */
  .nla-db__row { flex-wrap: wrap; }
  .nla-db__rowacts { flex-basis: 100%; justify-content: flex-end; }
  .nla-db__act { min-height: 44px; padding: 8px 16px; font-size: 11px; }
  .nla-db__pasttoggle { min-height: 44px; }

  /* ---------- blocks: delete reaches touch size ---------- */
  .nla-blk__del { padding: 12px 18px; }

  /* ---------- customers: table scrolls inside the panel, stats wrap ---------- */
  .nla-cu__stats { flex-wrap: wrap; }
  .nla-cu__stat { min-width: 130px; }
  .nla-cu__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nla-cu__table tbody { display: table; width: 100%; min-width: max-content; }
  .nla-cu__table td { font-size: 12px; padding: var(--space-2) var(--space-1); }

  /* ---------- analytics: toolbar wraps, chart pans, tiles compact ---------- */
  .nla-an__toolbar { gap: var(--space-3); }
  .nla-an__custom { flex-wrap: wrap; width: 100%; }
  .nla-an__custom .field { flex: 1 1 130px; min-width: 0; }
  .nla-an__custom .field input { width: 100%; min-width: 0; }
  .nla-an__apply { flex: 1 1 100%; justify-content: center; }
  .nla-an__branch { width: 100%; }
  .nla-an__branch select { min-width: 0; width: 100%; }
  .nla-an__chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nla-chart { min-width: 560px; }  /* SVG viewBox is 640px JS-side: pan near-native instead of shrinking labels to ~4px */
  .nla-an__statval { font-size: 26px; }
}

@media (max-width: 480px) {
  #nla-view { padding: var(--space-3) var(--space-2) var(--space-5); }
  .nla-db__counts { width: 100%; justify-content: space-between; gap: var(--space-3); }
  .nla-db__walkin { width: 100%; justify-content: center; }
  .nla-db__bands { gap: var(--space-2); }
  .nla-db__band { padding: var(--space-3) var(--space-1); }
  .nla-db__bandlabel { letter-spacing: .1em; }
  .nla-cal__walkin { flex: 1 1 auto; justify-content: center; }
  .daychip { padding: 8px 2px 6px; }
  .daychip__n { font-size: 16px; }
  .nla-bf__row2 { grid-template-columns: 1fr; }
  .nla-an__summary { gap: var(--space-3); }
  .nla-an__stat { min-width: 140px; padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  #nla-sidebar, .nla-scrim { transition: none; }
}