@import url("tokens-mobile.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&subset=vietnamese");

/* ============================================================
   MISA Mobile — component layer
   Mọi màu đều đi qua biến token. Không hardcode hex trong file này.
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--md-font);
  font-size: var(--md-fs-base);
  line-height: 1.5;
  color: var(--md-text);
  background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--md-mono); }
.num  { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Khung thiết bị iPhone 375 × 812 ---------- */
.device {
  width: 375px; height: 812px; flex: none; position: relative;
  background: var(--md-bg); overflow: hidden;
  border-radius: 40px; box-shadow: 0 0 0 10px #1c1c1e, 0 18px 40px -18px rgba(0,0,0,.55);
}
.device__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 164px; height: 30px; background: #1c1c1e;
  border-radius: 0 0 18px 18px; z-index: 60;
}
.device__home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: var(--md-radius-pill);
  background: var(--md-text); opacity: .25; z-index: 60; pointer-events: none;
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Status bar (an toàn vùng notch) ---------- */
.statusbar {
  flex: none; height: var(--md-safe-top);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 var(--md-6) 6px; font-size: var(--md-fs-md); font-weight: 600;
  color: var(--md-text); position: relative; z-index: 50;
}
.statusbar--onbrand { color: #fff; }
.statusbar__right { display: flex; align-items: center; gap: 5px; }

/* ---------- Header xanh bo cong (theo ảnh style) ---------- */
.hero {
  flex: none; position: relative; background: var(--md-primary); color: #fff;
  border-radius: var(--md-header-curve);
  padding: 0 var(--md-4) var(--md-6);
}
.hero--compact { padding-bottom: var(--md-3); border-radius: 0 0 20px 20px; }
.hero__id { display: flex; align-items: center; gap: var(--md-3); padding: var(--md-1) 0 var(--md-4); }
.hero__avatar {
  width: 44px; height: 44px; border-radius: var(--md-radius-pill); flex: none;
  background: rgba(255,255,255,.22); display: grid; place-items: center; color: #fff;
}
.hero__name { font-size: var(--md-fs-lg); font-weight: 600; line-height: 1.25; }
.hero__role { font-size: var(--md-fs-sm); color: rgba(255,255,255,.78); }
.hero__title { font-size: var(--md-fs-lg); font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* nút tròn 44×44 trên nền brand */
.iconbtn {
  width: var(--md-touch); height: var(--md-touch); flex: none; padding: 0;
  border: none; background: none; color: inherit; cursor: pointer;
  display: grid; place-items: center; position: relative; border-radius: var(--md-radius);
}
.iconbtn--ghost { color: var(--md-muted); }
.badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--md-radius-pill); background: var(--md-danger); color: #fff;
  font-size: 10px; font-weight: 600; display: grid; place-items: center;
  border: 2px solid var(--md-primary); font-variant-numeric: tabular-nums;
}

/* ---------- Chip lọc / chip module ---------- */
.chips {
  display: flex; gap: var(--md-2); overflow-x: auto; scrollbar-width: none;
  padding: var(--md-1) var(--md-4); margin: 0 calc(var(--md-4) * -1);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 36px; padding: 0 var(--md-4); border-radius: var(--md-radius-pill);
  border: var(--md-hairline) solid var(--md-border); background: var(--md-bg);
  color: var(--md-muted); font: 500 var(--md-fs-md)/1 var(--md-font);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--md-primary); border-color: var(--md-primary); color: #fff; font-weight: 600;
}
.chip__count { font-family: var(--md-mono); font-size: var(--md-fs-xs); opacity: .8; }
/* chip đặt trên nền brand */
.hero .chip { background: var(--md-bg); border-color: transparent; color: var(--md-primary); }
.hero .chip[aria-pressed="true"] { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Vùng cuộn ---------- */
.body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  background: var(--md-surface); padding: var(--md-4) var(--md-4) var(--md-8);
  display: flex; flex-direction: column; gap: var(--md-4);
}
.body--tight { gap: var(--md-3); padding-top: var(--md-3); }
.sectitle {
  font-size: var(--md-fs-md); font-weight: 600; color: var(--md-muted);
  display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--md-2) * -1);
}
.sectitle a { color: var(--md-primary); text-decoration: none; font-weight: 500; }

/* ---------- Lưới ứng dụng (theo ảnh style) ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--md-4) var(--md-2); }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.tile__ic {
  width: 56px; height: 56px; border-radius: 14px; background: var(--md-bg);
  border: var(--md-hairline) solid var(--md-border-soft); box-shadow: var(--md-shadow-card);
  display: grid; place-items: center; color: var(--md-primary);
}
.tile__lb {
  font-size: var(--md-fs-sm); line-height: 1.3; color: var(--md-text); text-align: center;
}
.tile__ic .dot { position: absolute; }

/* ---------- Thẻ ---------- */
.card {
  background: var(--md-bg); border: var(--md-hairline) solid var(--md-border-soft);
  border-radius: var(--md-radius-lg); box-shadow: var(--md-shadow-card);
}
.card--pad { padding: var(--md-3) var(--md-4); }

/* ---------- Hàng chứng từ (component dùng lại ở K2) ---------- */
.doc {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--md-3);
  padding: var(--md-3) var(--md-4); min-height: 72px; align-content: center;
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
  background: var(--md-bg); cursor: pointer; text-decoration: none; color: inherit;
}
.doc:last-child { border-bottom: none; }
.doc__code { font: 600 var(--md-fs-sm)/1.2 var(--md-mono); color: var(--md-muted); letter-spacing: .02em; }
.doc__name {
  font-size: var(--md-fs-base); font-weight: 500; line-height: 1.35; color: var(--md-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc__meta { font-size: var(--md-fs-sm); color: var(--md-muted); }
.doc__amt { font-size: var(--md-fs-base); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums;
  text-align: right; align-self: center; grid-column: 2; grid-row: 1 / span 2; }
.doc__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.doc__code, .doc__name, .doc__meta { grid-column: 1; }

/* ---------- Nhãn trạng thái ---------- */
.tag {
  font-size: var(--md-fs-xs); font-weight: 600; line-height: 1; padding: 5px var(--md-2);
  border-radius: var(--md-radius); white-space: nowrap; display: inline-block;
}
.tag--draft  { background: var(--md-neutral-wash); color: var(--md-muted); }
.tag--wait   { background: var(--md-warn-wash);    color: var(--md-warn); }
.tag--done   { background: var(--md-primary-wash); color: var(--md-primary); }
.tag--reject { background: var(--md-danger-wash);  color: var(--md-danger); }
.tag--void   { background: var(--md-neutral-wash); color: var(--md-muted); text-decoration: line-through; }

/* ---------- Hàng tổng cộng ---------- */
.totalbar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--md-3) var(--md-4); background: var(--md-bg);
  border-top: var(--md-hairline) solid var(--md-border);
}
.totalbar__lb { font-size: var(--md-fs-md); color: var(--md-muted); }
.totalbar__val {
  font: 600 var(--md-fs-lg)/1 var(--md-mono); font-variant-numeric: tabular-nums;
  color: var(--md-report); /* số kế toán suy ra → xanh dương, không chạm được */
}

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md-2); }
.kpi { padding: var(--md-3); display: flex; flex-direction: column; gap: 2px; }
.kpi__n { font: 600 var(--md-fs-xl)/1.15 var(--md-mono); font-variant-numeric: tabular-nums;
  color: var(--md-report); letter-spacing: -.02em; }
.kpi__l { font-size: var(--md-fs-sm); color: var(--md-muted); line-height: 1.3; }
.kpi__d { font: 500 var(--md-fs-sm)/1 var(--md-mono); }
.up { color: var(--md-primary); } .down { color: var(--md-danger); }

/* ---------- Trường dữ liệu (K3) ---------- */
.fields { display: grid; }
.field {
  display: grid; grid-template-columns: 116px 1fr; gap: var(--md-3);
  padding: var(--md-3) var(--md-4); align-items: baseline;
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
}
.field:last-child { border-bottom: none; }
.field__l { font-size: var(--md-fs-md); color: var(--md-muted); }
.field__v { font-size: var(--md-fs-base); color: var(--md-text); }

/* ---------- Bảng dòng hàng (mật độ số ở bề rộng điện thoại) ---------- */
.lines { overflow: hidden; }
.lines__h, .lines__r {
  display: grid; grid-template-columns: 1fr 46px 88px; gap: var(--md-2);
  padding: var(--md-2) var(--md-4); align-items: baseline;
}
.lines__h {
  background: var(--md-surface); border-bottom: var(--md-hairline) solid var(--md-border);
  font-size: var(--md-fs-xs); font-weight: 600; color: var(--md-muted); text-transform: uppercase; letter-spacing: .04em;
}
.lines__r { border-bottom: var(--md-hairline) solid var(--md-border-soft); font-size: var(--md-fs-md); }
.lines__r:last-of-type { border-bottom: none; }
.lines__code { display: block; font: 500 var(--md-fs-xs)/1.4 var(--md-mono); color: var(--md-muted); }
.lines__q, .lines__a { font-family: var(--md-mono); font-variant-numeric: tabular-nums; text-align: right; }
.lines__t {
  display: grid; grid-template-columns: 1fr auto; padding: var(--md-3) var(--md-4);
  background: var(--md-surface); border-top: var(--md-hairline) solid var(--md-border);
  font-size: var(--md-fs-md); font-weight: 600;
}
.lines__t .num { color: var(--md-report); font-size: var(--md-fs-base); }

/* ---------- Dòng thời gian phê duyệt ---------- */
.tl { padding: var(--md-4); display: flex; flex-direction: column; }
.tli { display: grid; grid-template-columns: 18px 1fr; gap: var(--md-3); padding-bottom: var(--md-4); position: relative; }
.tli::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--md-border); }
.tli:last-child { padding-bottom: 0; } .tli:last-child::before { display: none; }
.tli__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--md-border);
  background: var(--md-bg); z-index: 1; display: grid; place-items: center; color: #fff; }
.tli__dot--done { background: var(--md-primary); border-color: var(--md-primary); }
.tli__dot--now  { background: var(--md-warn); border-color: var(--md-warn-wash); box-shadow: 0 0 0 4px var(--md-warn-wash); }
.tli__t { font-size: var(--md-fs-md); font-weight: 600; }
.tli__s { font-size: var(--md-fs-sm); color: var(--md-muted); }

/* ---------- Thanh hành động dính đáy ---------- */
.actionbar {
  flex: none; display: flex; gap: var(--md-2); padding: var(--md-3) var(--md-4);
  background: var(--md-bg); box-shadow: var(--md-shadow-bar);
}
.btn {
  flex: 1; min-height: var(--md-touch); border-radius: var(--md-radius);
  font: 600 var(--md-fs-base)/1 var(--md-font); cursor: pointer;
  border: var(--md-hairline) solid var(--md-border); background: var(--md-bg); color: var(--md-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn--primary { background: var(--md-primary); border-color: var(--md-primary); color: #fff; }
.btn--danger  { background: var(--md-bg); border-color: var(--md-danger); color: var(--md-danger); }

/* ---------- Thanh tab dưới (5 tab, R1) ---------- */
.tabbar {
  flex: none; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--md-bg); box-shadow: var(--md-shadow-bar);
  padding-bottom: var(--md-safe-bottom); position: relative; z-index: 40;
}
.tabbar__i {
  min-height: var(--md-touch); padding: 6px 2px 4px; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--md-muted); font-family: inherit; text-decoration: none;
}
.tabbar__lb { font-size: 10px; font-weight: 500; line-height: 1.1; text-align: center; letter-spacing: -.01em; }
.tabbar__i[aria-current="page"] { color: var(--md-primary); }
.tabbar__i[aria-current="page"] .tabbar__lb { font-weight: 600; }

/* ---------- FAB — một hành động chính mỗi tab (R6) ---------- */
.fab {
  position: absolute; right: var(--md-4);
  bottom: calc(var(--md-tabbar-h) + var(--md-safe-bottom) + var(--md-3));
  width: var(--md-fab); height: var(--md-fab); border-radius: 18px;
  background: var(--md-primary); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--md-shadow-fab); z-index: 45;
}

/* ---------- Thanh lọc dính ---------- */
.sticky {
  position: sticky; top: 0; z-index: 20; background: var(--md-bg);
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
  padding: var(--md-2) var(--md-4); margin: calc(var(--md-3) * -1) calc(var(--md-4) * -1) 0;
  display: flex; flex-direction: column; gap: var(--md-2);
}
.search {
  display: flex; align-items: center; gap: var(--md-2); min-height: 40px;
  padding: 0 var(--md-3); border-radius: var(--md-radius); background: var(--md-surface);
  border: var(--md-hairline) solid var(--md-border-soft); color: var(--md-muted); font-size: var(--md-fs-base);
}

/* ---------- Trang giới thiệu (index) ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: 56px 44px; padding: var(--md-8); align-items: flex-start; }
.frame { display: flex; flex-direction: column; gap: var(--md-3); }
.frame__cap { font-size: var(--md-fs-md); }
.frame__cap b { display: block; font-size: var(--md-fs-base); }
.frame__cap span { color: var(--md-muted); }

/* ---------- Nút đổi giao diện sáng/tối ---------- */
.themetoggle {
  position: fixed; top: 16px; right: 16px; z-index: 100; min-height: var(--md-touch);
  padding: 0 var(--md-4); border-radius: var(--md-radius-pill);
  border: var(--md-hairline) solid var(--md-border); background: var(--md-bg); color: var(--md-text);
  font: 500 var(--md-fs-md)/1 var(--md-font); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--md-2);
}
.stage { min-height: 100vh; display: grid; place-items: center; padding: var(--md-8) var(--md-4); }

/* ============================================================
   Lớp 2 — component cho K4 · K5 · K6 · K7 · K8
   Vẫn không hardcode hex. Mọi màu đi qua token.
   ============================================================ */

/* ---------- K4 · Form gửi duyệt ---------- */
.formsec {
  font-size: var(--md-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-muted); padding: var(--md-2) var(--md-1) 0;
}
.frow {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--md-3) var(--md-4);
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
}
.frow:last-child { border-bottom: none; }
.frow__l { font-size: var(--md-fs-md); color: var(--md-muted); display: flex; gap: 4px; align-items: baseline; }
.req { color: var(--md-danger); font-weight: 700; }
.inp, .txta {
  width: 100%; min-height: var(--md-touch); padding: 10px var(--md-3);
  border: var(--md-hairline) solid var(--md-border); border-radius: var(--md-radius);
  background: var(--md-bg); color: var(--md-text);
  font: 400 var(--md-fs-base)/1.45 var(--md-font); resize: none;
}
.inp::placeholder, .txta::placeholder { color: var(--md-muted); opacity: .75; }
.inp:focus-visible, .txta:focus-visible, .selrow:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 1px; border-color: var(--md-primary);
}
.inp--num { font-family: var(--md-mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
/* ô chọn: chạm mở bottom sheet (cấp điều hướng 4) */
.selrow {
  width: 100%; min-height: var(--md-touch); padding: 0 var(--md-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--md-2);
  border: var(--md-hairline) solid var(--md-border); border-radius: var(--md-radius);
  background: var(--md-bg); color: var(--md-text); font: 500 var(--md-fs-base)/1.3 var(--md-font);
  cursor: pointer; text-align: left;
}
.selrow[data-empty="true"] { color: var(--md-muted); font-weight: 400; }
.selrow svg { flex: none; color: var(--md-muted); }
.hint { font-size: var(--md-fs-sm); color: var(--md-muted); line-height: 1.4; }
.hint--lock { display: flex; gap: 6px; align-items: flex-start; }
.counter { font: 500 var(--md-fs-xs)/1 var(--md-mono); color: var(--md-muted); align-self: flex-end; }
/* thanh công cụ soạn thảo rút gọn — bản mobile của trình soạn HTML trên web */
.rte { display: flex; gap: var(--md-1); border: var(--md-hairline) solid var(--md-border);
  border-bottom: none; border-radius: var(--md-radius) var(--md-radius) 0 0;
  background: var(--md-surface); padding: var(--md-1); }
.rte + .txta { border-radius: 0 0 var(--md-radius) var(--md-radius); }
.rte button {
  min-width: var(--md-touch); min-height: 36px; border: none; background: none; cursor: pointer;
  border-radius: var(--md-radius); color: var(--md-muted); font: 600 var(--md-fs-md)/1 var(--md-font);
}
.rte button[aria-pressed="true"] { background: var(--md-bg); color: var(--md-text);
  box-shadow: inset 0 0 0 1px var(--md-border); }

/* ---------- Bottom sheet — cấp điều hướng thứ 4 (R2) ---------- */
.sheetwrap { position: absolute; inset: 0; z-index: 70; display: none; }
.sheetwrap[data-open="true"] { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); border: none; width: 100%; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%;
  display: flex; flex-direction: column;
  background: var(--md-bg); border-radius: var(--md-sheet-radius) var(--md-sheet-radius) 0 0;
  padding-bottom: var(--md-safe-bottom);
}
.sheet__grip { width: 36px; height: 4px; border-radius: var(--md-radius-pill);
  background: var(--md-border); margin: var(--md-2) auto var(--md-1); flex: none; }
.sheet__h {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--md-2);
  padding: var(--md-2) var(--md-2) var(--md-2) var(--md-4);
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
}
.sheet__t { font-size: var(--md-fs-lg); font-weight: 600; }
.sheet__b { overflow-y: auto; padding: var(--md-2) 0; }
.sheet__f { flex: none; display: flex; gap: var(--md-2); padding: var(--md-3) var(--md-4);
  border-top: var(--md-hairline) solid var(--md-border-soft); }

/* ---------- Segmented control (K5) ---------- */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--md-1);
  background: rgba(255,255,255,.18); border-radius: var(--md-radius); padding: 3px;
}
.seg__i {
  min-height: 36px; border: none; background: none; cursor: pointer; border-radius: 4px;
  font: 500 var(--md-fs-md)/1 var(--md-font); color: rgba(255,255,255,.82);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.seg__i[aria-selected="true"] { background: var(--md-bg); color: var(--md-primary); font-weight: 600; }
.seg__n { font-family: var(--md-mono); font-size: var(--md-fs-xs); }

/* ---------- Hàng phê duyệt (K5) ---------- */
.appr {
  display: block; padding: var(--md-3) var(--md-4); background: var(--md-bg);
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
  text-decoration: none; color: inherit; min-height: 76px;
}
.appr:last-child { border-bottom: none; }
.appr__top { display: flex; align-items: center; gap: var(--md-2); margin-bottom: 4px; }
.appr__kind {
  font-size: var(--md-fs-xs); font-weight: 600; padding: 4px var(--md-2); border-radius: var(--md-radius);
  background: var(--md-report-wash); color: var(--md-report); white-space: nowrap;
}
.appr__code { font: 600 var(--md-fs-sm)/1 var(--md-mono); color: var(--md-muted); margin-left: auto; }
.appr__t { font-size: var(--md-fs-base); font-weight: 500; line-height: 1.35; }
.appr__m { display: flex; align-items: baseline; justify-content: space-between; gap: var(--md-3); margin-top: 4px; }
.appr__who { font-size: var(--md-fs-sm); color: var(--md-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr__amt { font-size: var(--md-fs-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.appr__time { font-size: var(--md-fs-sm); color: var(--md-muted); }
/* trình bày cử chỉ vuốt: hàng lộ hai hành động */
.swipe { position: relative; overflow: hidden; background: var(--md-bg); }
.swipe__acts { position: absolute; inset: 0 0 0 auto; display: flex; }
.swipe__act {
  width: 76px; border: none; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 600 var(--md-fs-sm)/1 var(--md-font);
}
.swipe__act--ok { background: var(--md-primary); }
.swipe__act--no { background: var(--md-danger); }
.swipe__body { position: relative; transform: translateX(-152px); }

/* ---------- Thanh tham số báo cáo (K6) ---------- */
.params { display: flex; gap: var(--md-2); }
.param {
  flex: 1; min-height: var(--md-touch); padding: 0 var(--md-3); border-radius: var(--md-radius);
  border: var(--md-hairline) solid var(--md-border); background: var(--md-bg);
  display: flex; align-items: center; gap: var(--md-2); cursor: pointer; text-align: left;
  font-family: inherit; color: var(--md-text); min-width: 0;
}
.param__l { font-size: var(--md-fs-xs); color: var(--md-muted); display: block; line-height: 1.2; }
.param__v { font-size: var(--md-fs-md); font-weight: 600; display: block; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param__wrap { min-width: 0; flex: 1; }
.stamp {
  display: flex; align-items: center; gap: 6px; font-size: var(--md-fs-sm); color: var(--md-muted);
  padding: var(--md-2) var(--md-4);
}
/* hàng báo cáo hai dòng: định danh trái, số phải */
.rrow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--md-3);
  padding: var(--md-3) var(--md-4); background: var(--md-bg);
  border-bottom: var(--md-hairline) solid var(--md-border-soft); align-items: baseline;
}
.rrow:last-child { border-bottom: none; }
.rrow__n { font-size: var(--md-fs-base); font-weight: 500; line-height: 1.35; grid-column: 1; }
.rrow__c { font: 500 var(--md-fs-xs)/1.4 var(--md-mono); color: var(--md-muted); grid-column: 1; }
.rrow__q { font-size: var(--md-fs-md); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums;
  color: var(--md-muted); text-align: right; grid-column: 2; }
.rrow__v { font-size: var(--md-fs-base); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
  color: var(--md-report); text-align: right; grid-column: 2; }
/* biểu đồ cột nhỏ — mã hoá dữ liệu bằng vùng tô, không phải nét viền */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding: 0 var(--md-4); }
.bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--md-report); opacity: .85; }
.bar--now { background: var(--md-primary); opacity: 1; }
.barlbs { display: flex; gap: 6px; padding: 6px var(--md-4) 0; }
.barlbs span { flex: 1; text-align: center; font: 500 10px/1 var(--md-mono); color: var(--md-muted); }

/* ---------- Trung tâm cảnh báo (K7) ---------- */
.daylabel { font-size: var(--md-fs-sm); font-weight: 600; color: var(--md-muted);
  padding: var(--md-2) var(--md-1) 0; }
.alarm {
  display: grid; grid-template-columns: 10px 1fr; gap: var(--md-3);
  padding: var(--md-3) var(--md-4); background: var(--md-bg); min-height: 76px;
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
  text-decoration: none; color: inherit; align-items: start;
}
.alarm:last-child { border-bottom: none; }
.alarm__sev { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--md-muted); }
.alarm__sev--hi { background: var(--md-danger); }
.alarm__sev--md { background: var(--md-warn); }
.alarm__sev--lo { background: var(--md-report); }
.alarm__t { font-size: var(--md-fs-base); font-weight: 500; line-height: 1.35; }
.alarm__m { display: flex; align-items: center; gap: var(--md-2); margin-top: 5px; flex-wrap: wrap; }
.alarm__time { font: 500 var(--md-fs-sm)/1 var(--md-mono); color: var(--md-muted); }
.alarm__n { font: 600 var(--md-fs-sm)/1 var(--md-mono); color: var(--md-text); margin-left: auto; }
.tag--data { background: var(--md-report-wash); color: var(--md-report); }

/* ---------- Webview (K8) ---------- */
.webbar {
  flex: none; display: flex; align-items: center; gap: var(--md-2);
  padding: var(--md-2) var(--md-4); background: var(--md-surface);
  border-bottom: var(--md-hairline) solid var(--md-border);
  font-size: var(--md-fs-sm); color: var(--md-muted);
}
.webbar__url { flex: 1; min-width: 0; font-family: var(--md-mono); font-size: var(--md-fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webprog { flex: none; width: 100%; height: 2px; background: var(--md-border-soft); }
.webprog i { display: block; height: 100%; width: 72%; background: var(--md-primary); }
/* bảng kế toán trong webview: cuộn ngang, giữ mật độ như bản desktop */
.acct { width: 620px; border-collapse: collapse; font-size: var(--md-fs-md); }
.acct th, .acct td { padding: 7px var(--md-2); border-bottom: var(--md-hairline) solid var(--md-border-soft);
  text-align: right; white-space: nowrap; }
.acct th:first-child, .acct td:first-child { text-align: left; position: sticky; left: 0;
  background: var(--md-bg); width: 168px; white-space: normal; }
.acct thead th { background: var(--md-surface); font-size: var(--md-fs-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--md-muted); border-bottom: var(--md-hairline) solid var(--md-border);
  position: sticky; top: 0; z-index: 2; }
.acct thead th:first-child { z-index: 3; background: var(--md-surface); }
.acct td.n { font-family: var(--md-mono); font-variant-numeric: tabular-nums; }
.acct .code { font: 600 var(--md-fs-sm)/1.3 var(--md-mono); }
.acct tr.sum td { background: var(--md-report-wash); font-weight: 700; color: var(--md-text);
  border-top: 2px solid var(--md-report); }
.acct tr.sum td:first-child { background: var(--md-report-wash); }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Trạng thái rỗng ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--md-2);
  padding: var(--md-8) var(--md-6); text-align: center; }
.empty__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--md-surface);
  display: grid; place-items: center; color: var(--md-muted); }
.empty__t { font-size: var(--md-fs-base); font-weight: 600; }
.empty__s { font-size: var(--md-fs-md); color: var(--md-muted); line-height: 1.45; }

/* ---------- Trạng thái tương tác: nền dịch, chữ không nhạt đi ---------- */
.doc:active, .appr:active, .alarm:active, .rrow:active, .tile:active { background: var(--md-neutral-wash); }
.btn:active { filter: brightness(.94); }
.btn:focus-visible, .chip:focus-visible, .iconbtn:focus-visible,
.tabbar__i:focus-visible, .seg__i:focus-visible, .param:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px; border-radius: var(--md-radius);
}
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Lớp 3 — biến thể phát sinh khi dựng K5 · K6 · K8 ---------- */

/* Thanh tham số bấm được: cả dải là một vùng chạm mở bottom sheet */
.params--bar {
  width: 100%; min-height: var(--md-touch); padding: var(--md-2) var(--md-4);
  align-items: center; justify-content: space-between; background: var(--md-bg);
  border: 0; border-bottom: var(--md-hairline) solid var(--md-border-soft);
  font-family: inherit; color: var(--md-text); text-align: left; cursor: pointer;
}
.params--bar .param__wrap { display: flex; gap: var(--md-4); overflow: hidden; }
.params--bar .param {
  flex: 0 1 auto; display: block; min-height: 0; padding: 0;
  border: 0; background: none; border-radius: 0;
}
.params--bar:active { background: var(--md-neutral-wash); }

/* Hàng tiêu đề cột của báo cáo — nhãn, không phải dữ liệu */
.rrow--h {
  background: var(--md-surface); padding-top: 6px; padding-bottom: 6px;
  border-bottom: var(--md-hairline) solid var(--md-border);
  position: sticky; top: 0; z-index: 5;
}
.rrow--h .rrow__n, .rrow--h .rrow__q, .rrow--h .rrow__v {
  font-size: var(--md-fs-xs); font-weight: 500; color: var(--md-muted); text-transform: none;
}
.rrow--h .rrow__v { color: var(--md-muted); }

/* Ô chọn chưa có giá trị: chữ mờ như placeholder, viền giữ nguyên độ tương phản */
.selrow[data-empty="true"] > span:first-child { color: var(--md-muted); }

/* ============================================================
   Lớp 4 — component phát sinh khi dựng luồng Phiếu đề xuất
   (/hrm/tickets). Vẫn không hardcode hex, mọi màu qua token.
   ============================================================ */

/* ---------- Ghi chú trong màn: cảnh báo, chú thích, nhắc ngoại tuyến ---------- */
.note {
  display: flex; gap: var(--md-3); align-items: flex-start;
  padding: var(--md-3) var(--md-4); background: var(--md-bg);
  border: var(--md-hairline) solid var(--md-border-soft); border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-card); font-size: var(--md-fs-md); line-height: 1.45;
}
.note__ic { flex: none; margin-top: 1px; color: var(--md-muted); }
.note--warn   .note__ic { color: var(--md-warn); }
.note--danger .note__ic { color: var(--md-danger); }
.note--info   .note__ic { color: var(--md-report); }
.note--quiet { color: var(--md-muted); }
.note--quiet b { color: var(--md-text); }
.note--flat { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }

/* ---------- Hai trục trạng thái: duyệt là chính, xử lý là phụ ---------- */
.tagpair { display: flex; align-items: center; gap: var(--md-2); flex-wrap: wrap; }
.tag--sub {
  background: transparent; color: var(--md-muted); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--md-border);
}

/* ---------- Nội dung Diễn giải (backend trả HTML) ---------- */
.prose { font-size: var(--md-fs-base); line-height: 1.55; color: var(--md-text); }
.prose p { margin: 0 0 var(--md-2); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0; padding-left: 18px; }
.prose li { margin-bottom: 4px; }
.prose b, .prose strong { font-weight: 600; }

/* ---------- Hàng chọn nhiều (duyệt hàng loạt) ---------- */
.pick {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--md-3);
  width: 100%; text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  padding: var(--md-3) var(--md-4); min-height: 76px; align-items: start;
  background: var(--md-bg); border: 0;
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
}
.pick:last-of-type { border-bottom: none; }
.pick__box {
  width: 22px; height: 22px; border-radius: 6px; margin-top: 2px; flex: none;
  border: 2px solid var(--md-border); background: var(--md-bg);
  display: grid; place-items: center; color: transparent;
}
.pick[aria-checked="true"] { background: var(--md-primary-wash); }
.pick[aria-checked="true"] .pick__box {
  background: var(--md-primary); border-color: var(--md-primary); color: #fff;
}
.pick[aria-disabled="true"] { cursor: not-allowed; }
.pick[aria-disabled="true"] .pick__box {
  border-style: dashed; background: var(--md-neutral-wash);
}
.pick__c { display: block; font: 600 var(--md-fs-sm)/1.2 var(--md-mono); color: var(--md-muted); }
.pick__t { display: block; font-size: var(--md-fs-base); font-weight: 500; line-height: 1.35; margin-top: 2px; }
.pick__m { display: flex; align-items: center; gap: var(--md-2); margin-top: 6px; flex-wrap: wrap; }
.pick__lock { font-size: var(--md-fs-sm); color: var(--md-muted); display: flex; align-items: center; gap: 5px; }

/* ---------- Dải đếm mục đã chọn ---------- */
.selcount {
  display: flex; align-items: center; justify-content: space-between; gap: var(--md-3);
  padding: var(--md-2) var(--md-4); background: var(--md-primary-wash);
  font-size: var(--md-fs-md); font-weight: 500; color: var(--md-text);
  border-bottom: var(--md-hairline) solid var(--md-border-soft);
}
.linkbtn {
  background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer;
  color: var(--md-primary); font: 600 var(--md-fs-md)/1 var(--md-font);
}
.linkbtn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; border-radius: var(--md-radius); }

/* ---------- Kết quả thao tác hàng loạt: đếm lại theo số thật ---------- */
.result { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--md-6) var(--md-4) var(--md-3); text-align: center; }
.result__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--md-primary-wash); color: var(--md-primary); }
.result__n { font: 600 var(--md-fs-2xl)/1.15 var(--md-mono); font-variant-numeric: tabular-nums; }
.result__s { font-size: var(--md-fs-md); color: var(--md-muted); line-height: 1.45; max-width: 30ch; }

/* ---------- Dải nhắc trạng thái đầu màn chi tiết ---------- */
.statestrip {
  display: flex; align-items: center; gap: var(--md-2); flex-wrap: wrap;
  padding: var(--md-2) 0 0;
}
.statestrip .tag--sub { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

/* Danh sách chọn tràn viền: hàng .pick tự có padding và đường kẻ dưới */
.body--flush { gap: 0; padding: 0 0 var(--md-8); background: var(--md-bg); }

/* Ô lưới chức năng khi là liên kết thay vì nút */
a.tile { text-decoration: none; }

/* Thẻ nằm trong vùng cuộn dạng flex: không cho co lại khi có overflow:hidden */
.body > .card { flex: none; }