/* CheckinQR — base.css: reset, body, chữ/số, icon, khung trang, app shell (appbar + tab bar 4 icon, docs/06 §3, §4.1), .sr-only.
   Thứ tự <link>: tokens → base → components → screens. Mọi giá trị qua token trong tokens.css. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }   /* thuộc tính hidden thắng display:flex của chip/badge/row */
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-md)/var(--lh-base) var(--f-sans);
  min-height: 100vh;
  min-height: 100dvh;
}
a { color: var(--c-accent); }
code { font-family: var(--f-mono); font-size: inherit; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.appbar { padding-top: max(var(--s-3), env(safe-area-inset-top)); position: sticky; top: 0; z-index: 20;
  background: var(--c-appbar-bg); color: var(--c-appbar-text); border-bottom: 1px solid var(--c-appbar-bg); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-1); 
  max-width: var(--page-max); margin: 0 auto;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  box-shadow: var(--shadow-up); }
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-4);
  padding-top: max(var(--s-4), env(safe-area-inset-top));
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
}

/* ---------- icon ---------- */
.icon { display: inline-block; vertical-align: middle; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-error { color: var(--c-danger); }
.icon-success { color: var(--c-money); }
.icon-warning { color: var(--c-warn); }

/* ---------- app shell: appbar + tab bar 4 icon (docs/06 §3, §4.1) ---------- */
body.app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
/* N2.5 / N2.7: không gian Quản lý — có thanh tab (3 tab; manager 2), nội dung rộng (--page-max-admin); thanh, tab và bảng menu cùng độ rộng */
.app--admin .page, .app--admin .appbar__inner, .app--admin .appmenu__panel, .app--admin .tabbar { max-width: var(--page-max-admin); }
.appbar__inner {
  max-width: var(--page-max); margin: 0 auto; padding: var(--s-2) var(--s-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-height: var(--tap);
}
.appbar__brand { font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.appbar__title { color: var(--c-appbar-mut); font-size: var(--fs-base); }
/* N2.4d: thanh điều hướng 3 phần — quay lại · tiêu đề · menu ☰ (màn /admin giữ thanh cũ tới N2.5) */
.appbar__inner--nav { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; gap: var(--s-2); padding-block: 0; }
.appbar__back { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); color: var(--c-appbar-text); border-radius: var(--r-md); }
.appbar__back--none { visibility: hidden; }
a.appbar__back:focus-visible, .appmenu__btn:focus-visible { outline: 3px solid var(--c-appbar-mut); outline-offset: -3px; }
.appbar__title--nav { color: var(--c-appbar-text); font-weight: var(--fw-bold); font-size: var(--fs-md); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appmenu__btn { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); color: var(--c-appbar-text); border-radius: var(--r-md); cursor: pointer; list-style: none; }
.appmenu__btn::-webkit-details-marker { display: none; }
.appmenu[open] > .appmenu__btn { background: var(--c-line-soft); }
.appmenu__panel { position: absolute; left: 0; right: 0; top: 100%; max-width: var(--page-max); margin: 0 auto; background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--shadow); padding: var(--s-1) 0;
  max-height: calc(100dvh - var(--tap) - var(--s-4)); overflow-y: auto; overscroll-behavior: contain; }
.appmenu__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-4); background: none; border: 0;
  color: var(--c-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.appmenu__item .icon { color: var(--c-accent); }
.appmenu__item:hover, .appmenu__item:focus-visible { background: var(--c-primary-soft); }
.appmenu__item:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.appmenu__item[aria-current="page"] { font-weight: var(--fw-bold); }
.appmenu__form { margin: 0; }
.appmenu__sep { margin: var(--s-1) var(--s-4); border: 0; border-top: 1px solid var(--c-line-soft); }
.page--app { padding-top: var(--s-4); }
.tabbar__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 3.5rem; padding: var(--s-1) 0; color: var(--c-text-mut); text-decoration: none; font-size: var(--fs-xs);
  padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); 
}
.tabbar__tab .icon { width: 1.625rem; height: 1.625rem; }
.tabbar__tab.is-active { color: var(--c-tab-active-fg); background: var(--c-tab-active-bg); font-weight: var(--fw-bold); }
.tabbar__tab:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.tabbar__label { line-height: var(--lh-tight); }
.tabbar__badge { position: absolute; top: var(--s-1); left: calc(50% + 0.5rem); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }