/* hoangquanvu · Sổ Điều Hành Gia Hưng Mart. Tenant stylesheet, linked after the kit.
   It holds only (a) components the kit lacks and (b) layout glue for these screens.
   Every colour, space, radius, type size and shadow is a kit token (var(--*)). No kit class is restyled here. */

/* ===== (a) Store bar: the store axis under the top bar of office screens (PRODUCT Design Principle 1). KIT_GAPS #1 ===== */
.hqv-unitbar {
  position: sticky;
  top: var(--topbar-real-h, var(--topbar-h));
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--panel-border);
}
.hqv-unitbar-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.hqv-unitbar-note { margin-inline-start: auto; font-size: var(--fs-sm); color: var(--muted); }

/* ===== (a) Printed voucher (mẫu 01-TT / 02-TT, bảng chấm công, phiếu lương): centred title and label + value on a dotted writing line. KIT_GAPS #2 ===== */
.hqv-voucher-title { margin-block: var(--sp-3) var(--sp-1); text-align: center; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.02em; }
.hqv-voucher-sub { text-align: center; font-size: var(--fs-sm); }
.hqv-voucher-lines { display: grid; gap: var(--sp-2); margin-block: var(--sp-4); }
.hqv-voucher-line { display: flex; gap: var(--sp-2); align-items: baseline; }
.hqv-voucher-line > span:first-child { flex: none; }
.hqv-voucher-line > span:last-child { flex: 1 1 auto; min-width: 0; border-bottom: 1px dotted currentColor; font-weight: 600; }

/* ===== (a) Calculation line (payroll explanation, payslip, shift reconciliation): name, figure, and how the figure came about. KIT_GAPS #3 ===== */
.hqv-payline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3); padding-block: var(--sp-2); border-bottom: 1px solid var(--panel-border); }
.hqv-payline:last-child { border-bottom: 0; }
.hqv-payline-name { font-weight: 600; }
.hqv-payline-fig { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: end; }
.hqv-payline-how { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }

/* ===== (b) Layout glue ===== */
/* Widths of the frozen columns of the wide sheets (kit.js is not vendored, so the offsets come from these sums). KIT_GAPS #4 */
.hqv-sheet-cong { --sticky-w1: 3rem; --sticky-w2: 12.5rem; --sticky-w-end: 4.75rem; }
.hqv-sheet-luong { --sticky-w1: 3rem; --sticky-w2: 13rem; --sticky-w-end: 8.5rem; }
.hqv-sheet-kpi { --sticky-w1: 13rem; }
.hqv-sheet-luong-vp { --sticky-w1: 9rem; --sticky-w-end: 10.5rem; }

/* Column widths of the printed timesheet: .paper .tbl-marks is table-layout: fixed, so without a colgroup its 37 columns share the width equally and the name column falls to 7mm. KIT_GAPS #11 */
.hqv-col-stt { width: 6mm; }
.hqv-col-nv { width: 32mm; }
.hqv-col-sum { width: 10mm; }
.hqv-col-sum-sm { width: 7mm; }

/* Two columns of equal panels (settings, salary parameters). KIT_GAPS #5 */
.hqv-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--sp-4); align-items: start; }

/* A row of a few controls or tags (period, state stamps, a note at the end) that wraps on a narrow window. KIT_GAPS #6 */
.hqv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.hqv-row-end { margin-inline-start: auto; }
.hqv-row-center { justify-content: center; }

/* Main and side columns that end on one line (design lessons rule 30): both stretch to the taller one, and in each column (.hqv-col-fill, used instead of .stack)
   the last panel takes the rest. KIT_GAPS #12 */
.hqv-cols-end { align-items: stretch; }
.hqv-col-fill { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.hqv-col-fill > :last-child { flex-grow: 1; }

/* The server clock on the check-in screen. KIT_GAPS #7 */
.hqv-figure { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; color: var(--heading); }

/* ===== (a) Filter in place: the chosen store's column or row in a by-store table. KIT_GAPS #14 ===== */
.tbl :is(th, td)[data-hl-on] { background: var(--notice-bg); }
.tbl thead th[data-hl-on] { box-shadow: inset 0 -2px 0 var(--primary); }
.tbl tr[data-hl-on] { --row-bg: var(--notice-bg); }
.tbl tr[data-hl-on] > :is(th, td) { background: var(--notice-bg); }

/* ===== (b) Tokens that never break: a document, fund or file code, a time range, a date with its time. The kit has nowrap only for .doc-code and .tbl .nowrap, and
   these tokens also sit in work rows, page meta and panel text. Delete when the kit ships a general nowrap utility. KIT_GAPS #15 ===== */
.hqv-nowrap { white-space: nowrap; }
/* A short list in one table cell or meta slot (the shifts of a store): one item a line, each item kept whole. KIT_GAPS #15 */
.hqv-lines { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ===== (b) KPI row: every card's foot holds two lines, so the four cards share one rhythm and the "Xem danh sách" rows line up. Overview, reports ===== */
.kpi-row > .kpi .kpi-foot { min-block-size: 2lh; }
.kpi-row > .kpi .kpi-value { min-block-size: 2.75rem; }

/* ===== (a) Store progress rows and HR rows on the overview: a label column and meters or bars that share one scale. KIT_GAPS: no progress-per-unit row in the kit ===== */
.hqv-prog, .hqv-hr, .hqv-ot { list-style: none; margin: 0; padding: 0; }
.hqv-prog-row { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--panel-border); }
.hqv-prog-row:last-child { border-bottom: 0; }
.hqv-prog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.hqv-prog-name { font-weight: 650; font-size: var(--fs-lg); }
.hqv-prog-name .cell-sub { display: inline; margin-inline-start: var(--sp-2); font-weight: 400; font-size: var(--fs-sm); }
.hqv-ov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stack-gap, var(--sp-4)); align-items: stretch; }
.hqv-ov > .panel { display: flex; flex-direction: column; }
.hqv-ov > .panel > .panel-body { flex: 1; }
.hqv-ov > .stack { display: flex; flex-direction: column; grid-column: span 3; }
.hqv-ov > .stack > .panel { flex: 1; }
@media (max-width: 72rem) { .hqv-ov { grid-template-columns: minmax(0, 1fr); } .hqv-ov > .stack { grid-column: auto; } }
.hqv-prog-lab { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.hqv-hr { display: grid; gap: var(--sp-3); }
.hqv-hr-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.hqv-hr-name { font-weight: 600; }
.hqv-hr-name .cell-sub { display: block; font-weight: 400; }
.hqv-ot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--sp-4) var(--sp-8); }
.hqv-ot-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.hqv-cols-fill { align-items: stretch; }

/* ===== (b) Store switcher in the top bar: the .seg or tag sits beside the search button, the date line before the buttons ===== */
@media (min-width: 48.0625rem) {
  .app-main > .topbar:has(> .topbar-center):has(> .search-btn) { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .app-main > .topbar:has(> .topbar-center) > .search-btn { flex: 0 1 17rem; width: auto; min-width: 11rem; margin-left: 0; }
  .app-main > .topbar:has(> .topbar-center) > .topbar-center { flex: none; justify-self: auto; }
  .app-main > .topbar:has(> .topbar-center) > .topbar-actions { margin-left: auto; }
}
@media (max-width: 80rem) { .app-main > .topbar .topbar-meta { display: none; } }

/* ===== (a) Bell and its panel in the desktop top bar: the kit's .notif-pop hangs under the button, at the right edge ===== */
.hqv-bellwrap { position: relative; }
.hqv-bell { position: relative; }
.hqv-bell.btn { inline-size: 2.75rem; block-size: 2.75rem; background: var(--surface); border: 1px solid var(--field-border); box-shadow: var(--sh-1); }
.hqv-bell.btn:hover { background: var(--primary-tint, var(--surface-2)); }
.hqv-bell .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.hqv-bell-n { position: absolute; inset-block-start: 0; inset-inline-end: 0; transform: translate(40%, -40%); min-inline-size: 1.4rem; block-size: 1.4rem; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--danger); border: 2px solid var(--surface); box-shadow: none; }
.hqv-bell-n[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .hqv-bell:not([data-read]) .icon { animation: hqv-ring 2.4s ease-in-out 1s 2; transform-origin: 50% 10%; } }
@keyframes hqv-ring { 0%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(14deg); } 16%, 32% { transform: rotate(-14deg); } 40% { transform: rotate(0); } }
.hqv-pop { position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline-start: 0; z-index: var(--z-dialog); width: min(24rem, calc(100vw - var(--sp-6))); }
.hqv-pop[hidden] { display: none; }

/* ===== (a) Kho tổng and Văn phòng views of the overview: their own widgets, three panels in one column of equal rhythm ===== */
.hqv-ov2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--stack-gap, var(--sp-4)); align-items: start; }
.hqv-ov2[hidden] { display: none; }
.hqv-ot-1 { grid-template-columns: minmax(0, 1fr); }
.hqv-ov:has(> section[hidden]) { grid-template-columns: minmax(0, 1fr); }
.hqv-ov:has(> section[hidden]) > .stack { grid-column: auto; }
.hqv-okline { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--ok); font-weight: 600; }

/* ===== (a) Kanban board (Chờ duyệt): lanes on a sunk ground, cards that carry the figure and the one act. KIT_GAPS: the kit has no board ===== */
.kb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--sp-4); align-items: start; }
.kb-col { display: grid; gap: var(--sp-3); align-content: start; min-height: 22rem; padding: var(--sp-3); background: var(--sunk); border-radius: var(--radius-lg); border-top: 3px solid var(--panel-border); }
.kb-col[data-tone="warn"] { border-top-color: var(--warn); }
.kb-col[data-tone="info"] { border-top-color: var(--info); }
.kb-col[data-tone="ok"] { border-top-color: var(--ok); }
.kb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-1) 0; }
.kb-head h2 { margin: 0; font-size: var(--fs-lg); }
.kb-head-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.kb-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.kb-card { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--sh-1); }
.kb-card[data-tone="warn"] { box-shadow: inset 4px 0 0 var(--warn), var(--sh-1); }
.kb-card[data-tone="bad"] { box-shadow: inset 4px 0 0 var(--danger), var(--sh-1); }
.kb-card { cursor: pointer; }
.kb-card:hover { background: var(--surface-2); }
.kb-card[data-tone="ok"] { box-shadow: inset 4px 0 0 var(--ok), var(--sh-1); }
.kb-card[hidden] { display: none; }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kb-title { margin: 0; font-weight: 650; color: var(--heading); }
.kb-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.kb-amount { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-note { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.kb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.kb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--panel-border); }
.kb-actions[data-done] { justify-content: space-between; }
.kb-empty { margin: 0; padding: var(--sp-5) var(--sp-3); text-align: center; font-size: var(--fs-sm); color: var(--muted); border: 1px dashed var(--field-border); border-radius: var(--radius); }
.kb-empty[hidden] { display: none; }

.app-main > .topbar > .hqv-bellwrap { flex: none; }

/* ===== (a) "Cần chú ý" list: the chips share one width so the titles line up, and when the column is stretched the rows share the spare height, so the bar at each row's edge runs to the panel's end instead of stopping above a blank ===== */
.work-row > .work-item > .code-chip { min-inline-size: 3.25rem; justify-content: center; text-align: center; flex: none; }
section[aria-labelledby="cy-t"] > .panel-body { display: flex; flex-direction: column; flex: 1; }
section[aria-labelledby="cy-t"] .work-list { flex: 1; display: flex; flex-direction: column; }
section[aria-labelledby="cy-t"] .work-list > .work-row:not([hidden]) { flex: 1 1 auto; max-block-size: 6.5rem; }
section[aria-labelledby="cy-t"] { display: flex; flex-direction: column; }

/* ===== (a) Shared table and form rules from the screen audit ===== */
/* Total columns and total rows read at a glance: bolder, on a quiet tint of the brand. Put .col-total on the th and every td of the column; tfoot rows get it by themselves. */
.tbl .col-total, .tbl tfoot th, .tbl tfoot td { font-weight: 700; background: var(--primary-tint, var(--sunk)); }
.tbl thead .col-total { color: var(--on-primary-tint, var(--text)); }
.tbl tbody tr:hover .col-total { background: var(--primary-tint, var(--sunk)); }
/* A search box wide enough for its whole placeholder, wherever it sits. */
input.input[type="search"] { min-inline-size: 16rem; }
.tbl-tools .input[type="search"], .filter-bar .input[type="search"] { flex: 1 1 18rem; max-inline-size: 28rem; }
/* A list, definition list or stat strip placed straight in a panel keeps the panel's breathing room. */
.panel > .dl, .panel > .stat-strip, .panel > .legend, .panel > .share-bar, .panel > ul.hqv-prog { margin: var(--sp-4) var(--sp-5); }
.tbl-tools > .input-icon, .filter-bar .input-icon { flex: 1 1 20rem; min-inline-size: 18rem; max-inline-size: 30rem; }
.tbl-tools > .input-icon > .input { inline-size: 100%; max-inline-size: none; }

/* ===== (a) Balance on the overview: panels that share a row end on one line and fill it ===== */
.hqv-ov2 { align-items: stretch; }
.hqv-ov2 > .panel { display: flex; flex-direction: column; }
.hqv-ov2 > .panel > .panel-body { flex: 1; }
.panel-flush > .panel-body > .stat-strip { margin: var(--sp-4) var(--sp-5); }
.hqv-col-fill > .panel:last-child { display: flex; flex-direction: column; }
.hqv-col-fill > .panel:last-child > .panel-body { flex: 1; display: flex; flex-direction: column; }
.hqv-col-fill > .panel:last-child > .panel-body > .tbl-wrap { flex: 1; }
.hqv-col-fill > .panel:last-child > .panel-body > .tbl-wrap > .tbl { block-size: 100%; }
.page-cols:has(> .page-main[hidden]) { grid-template-columns: minmax(0, 1fr); }