/* =============================================================================
   WinCommerce · Bảng theo dõi bảo trì & sửa chữa kỹ thuật
   Hệ thiết kế: nền sáng, bo tròn, viền mềm. Mật độ gọn (2026-09-23): cỡ chữ,
   khoảng đệm, chiều cao biểu đồ nhỏ lại một nấc; font Hanken Grotesk dùng chung
   với portal và app cửa hàng. Bộ màu trạng thái bên dưới là màu chuẩn của hệ WCM.
   Màu trạng thái tách làm ba vai: nền nhạt (wash) · khối màu (fill) · chữ (ink).
   Chữ nhỏ luôn dùng biến *-ink để giữ tương phản từ 4,5:1 trở lên.
   ========================================================================== */

:root {
    /* Bề mặt */
    --bg: #F3F6FB;
    --surface: #FFFFFF;
    --surface-2: #FAFCFF;
    --line: #E7EDF6;
    --line-soft: #F1F5FA;

    /* Chữ */
    --text: #26364A;
    --text-2: #5D6B7E;
    --text-3: #8593A5;  /* chỉ dùng cho đồ họa và trạng thái disabled, không đủ 4,5:1 cho chữ */

    /* Trạng thái */
    --rose: #F24B64;
    --rose-ink: #C42A3E;
    --rose-wash: #FDEBEE;
    --amber: #F6AA2A;
    --amber-ink: #8A6008;
    --amber-wash: #FEF3DE;
    --mint: #16B884;
    --mint-ink: #0F7C5A;
    --mint-wash: #E2F6EE;
    --sky: #4A84F4;
    --sky-ink: #2D5FC4;
    --sky-wash: #EAF1FE;

    /* Nhận diện WinCommerce */
    --brand-red: #E30016;
    --brand-gold: #A9821A;

    /* Thang thời gian chờ: tươi dần sang cảnh báo */
    --age-1: #22BF8C;  --age-1-wash: #E4F7F0;
    --age-2: #72C95C;  --age-2-wash: #EEF8E9;
    --age-3: #F6AA2A;  --age-3-wash: #FEF3DE;
    --age-4: #F5824A;  --age-4-wash: #FEEEE6;
    --age-5: #F24B64;  --age-5-wash: #FDEBEE;

    /* Chữ */
    --face-display: "Hanken Grotesk", "Segoe UI", sans-serif;
    --face-body: "Hanken Grotesk", system-ui, sans-serif;

    --t-hero: clamp(2.25rem, 3.2vw, 2.75rem);
    --t-h1: clamp(1.125rem, 1.5vw, 1.25rem);
    --t-h2: 1.125rem;
    --t-h3: 0.875rem;
    --t-body: 0.875rem;
    --t-sm: 0.8125rem;
    --t-label: 0.75rem;
    --t-num-xl: clamp(1.375rem, 1.8vw, 1.625rem);
    --t-num: 1.0625rem;

    /* Hình khối */
    --rail-w: 17.25rem; /* 276px — bằng thanh bên app cửa hàng */
    --sheet-max: 1560px;
    --gap: 0.875rem;
    --r-xl: 14px;
    --r: 12px;
    --r-sm: 10px;
    --r-pill: 999px;
    --sh-1: 0 1px 2px rgba(38, 54, 74, 0.05), 0 2px 6px rgba(38, 54, 74, 0.04);
    --sh-2: 0 2px 6px rgba(38, 54, 74, 0.05), 0 16px 32px -20px rgba(38, 54, 74, 0.28);
    --ease: cubic-bezier(0.32, 0.08, 0.24, 1);
}

/* ---------- Nền tảng ---------------------------------------------------- */

html {
    font-family: var(--face-body);
    scroll-behavior: smooth;
}

body {
    display: flex;
    height: 100vh;
    min-width: 320px;
    overflow: hidden;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--face-body);
    font-size: var(--t-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D5DEEA; border: 4px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: #BDC9DA; background-clip: padding-box; }

:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 2px;
    border-radius: 4px;
}

button, select, input { touch-action: manipulation; font: inherit; color: inherit; }
button { cursor: pointer; }

/* Số liệu dùng chữ số cùng bề rộng để cột không nhảy khi dữ liệu đổi. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.label {
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--text-2);
}

.u-rose { color: var(--rose-ink); }
.u-mint { color: var(--mint-ink); }
.u-amber { color: var(--amber-ink); }
.u-muted { color: var(--text-2); }

/* ---------- Ray điều hướng ---------------------------------------------- */

#sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: var(--rail-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    transition: transform 0.3s var(--ease);
}

#sidebar.is-closed { transform: translateX(-105%); }

/* Dải đầu 64px: logo trái, nút thu gọn phải — cùng kích thước với app cửa hàng. */
.rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 4rem;
    flex-shrink: 0;
    padding: 0 0.75rem 0 1rem;
    border-bottom: 1px solid var(--line);
}

/* Logo chuẩn WinCommerce (bản gốc ở app PnF). Ảnh có sẵn lề trong suốt ~12%,
   nên kéo lùi sang trái một chút để mép chữ W thẳng hàng với nội dung rail. */
.rail__logo {
    display: block;
    height: 2.125rem;
    width: auto;
    max-width: none;
    margin-left: -0.375rem;
}
.loginmark .rail__logo { margin: 0 auto; height: 2.5rem; }


#btn-close-sidebar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-3);
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

#btn-close-sidebar:hover { background: var(--sky-wash); color: var(--sky-ink); }

#sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.5rem 1.25rem;
}

.rail__group {
    padding: 0 0.75rem;
    margin: 1rem 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-3);
}

.rail__group:first-child { margin-top: 0.25rem; }

.rail__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.125rem;
    border-radius: 9px;
    color: var(--text-2);
    font-size: 0.84375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.rail__link:hover { background: var(--line-soft); color: var(--text); }

.rail__icon { width: 1rem; height: 1rem; flex: none; color: var(--text-3); transition: color 0.15s var(--ease); }
.rail__link:hover .rail__icon { color: var(--text-2); }
.rail__link.is-current .rail__icon { color: var(--sky-ink); }

.rail__link.is-current {
    background: var(--sky-wash);
    color: var(--sky-ink);
    font-weight: 600;
}

.rail__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Đếm chỉ hiện ở mục mà con số thực sự nói lên điều gì đó. */
.rail__count {
    flex: none;
    white-space: nowrap;
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--r-pill);
    background: var(--line-soft);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rail__count:empty { display: none; }
.rail__count.is-alarm { background: var(--rose-wash); color: var(--rose-ink); }

.rail__foot {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--line-soft);
}

.railbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: 600;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.railbtn:hover { background: var(--surface-2); color: var(--text); }

.railbtn--primary {
    background: var(--sky-ink);
    border-color: var(--sky-ink);
    color: #FFFFFF;
    box-shadow: var(--sh-1);
}

.railbtn--primary:hover { background: #244CA0; border-color: #244CA0; color: #FFFFFF; }
.railbtn--admin { background: var(--rose-ink); border-color: var(--rose-ink); color: #FFFFFF; }
.railbtn--admin:hover { background: #A32233; border-color: #A32233; color: #FFFFFF; }

.railbtn svg { width: 1rem; height: 1rem; }

#sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(38, 54, 74, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

#sidebar-backdrop.is-visible { opacity: 1; visibility: visible; }

/* ---------- Khung nội dung ---------------------------------------------- */

#dashboard-container {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    height: 100%;
    margin-left: var(--rail-w);
    transition: margin-left 0.3s var(--ease);
}

#dashboard-container.is-wide { margin-left: 0; }

/* ---------- Thanh trên --------------------------------------------------- */

.topbar {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    padding: 0.625rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

/* Menu · bộ lọc · phiên+đăng xuất nằm chung một dòng để nhường chiều cao cho dashboard.
   Thứ tự hiển thị đặt bằng `order` chứ không bằng thứ tự DOM, để khi màn hình hẹp thì
   bộ lọc tự rơi xuống dòng riêng mà phần đăng xuất vẫn ở lại dòng trên. */
.topbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

#btn-open-sidebar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-2);
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

#btn-open-sidebar:hover { background: var(--sky-wash); color: var(--sky-ink); }
#btn-open-sidebar.hidden { display: none; }
#btn-open-sidebar svg { width: 1.125rem; height: 1.125rem; }

/* Tiêu đề trang giữ lại cho trình đọc màn hình, không chiếm chỗ trên giao diện. */
.u-sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#header-actions { display: flex; order: 3; align-items: center; gap: 0.875rem; margin-left: auto; }

.topbar__title {
    order: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
}

/* Chip trạng thái ở topbar — cùng kiểu .data-status-pill / .role-badge của app cửa hàng. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.pill__dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--mint); }
.pill--role { border-color: transparent; background: var(--sky-wash); color: var(--sky-ink); }

#dataset-status { font-variant-numeric: tabular-nums; }

.ghostbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: 600;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.ghostbtn:hover { background: var(--line-soft); color: var(--text); }
.ghostbtn svg { width: 1rem; height: 1rem; }

/* Bộ lọc: mỗi trường là một ô bo tròn mềm thay vì cột ngăn bằng chỉ kẻ.
   Nằm giữa nút menu và phần đăng xuất; co lại vừa chỗ trống còn lại. */
/* Hàng 2 của topbar: cả dãy bộ lọc trên một dòng; hàng 1 là tên trang + chip + đăng xuất
   (cùng bố cục thanh trên của app cửa hàng). */
#filter-bar {
    display: flex;
    order: 4;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.filter-field {
    display: flex;
    flex: 1 1 7.5rem;
    flex-direction: column;
    min-width: 0;
}

.filter-field > select {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    text-overflow: ellipsis;
    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.filter-field > select:hover { border-color: #D3DEEC; }
.filter-field > select:focus { outline: none; border-color: var(--sky); background: var(--surface); box-shadow: 0 0 0 3px var(--sky-wash); }

#btn-reset-filters {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-2);
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

#btn-reset-filters:hover { background: var(--rose-wash); color: var(--rose-ink); }
#btn-reset-filters svg { width: 1rem; height: 1rem; }

/* Dòng tóm tắt bộ lọc — chỉ hiện khi có bộ lọc đang bật. */
#filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: var(--t-sm);
}

#filter-summary.hidden { display: none; }
.filter-summary__lead { color: var(--text-2); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.4375rem 0.25rem 0.6875rem;
    border-radius: var(--r-pill);
    background: var(--sky-wash);
    color: var(--sky-ink);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.35;
}

.chip__clear {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(45, 95, 196, 0.12);
    color: var(--sky-ink);
    font-size: 0.875rem;
    line-height: 1;
    transition: background-color 0.15s var(--ease);
}

.chip__clear:hover { background: rgba(45, 95, 196, 0.24); }

/* ---------- Vùng cuộn ---------------------------------------------------- */

.sheet { flex: 1; overflow-y: auto; scroll-behavior: smooth; padding: 1.125rem 1.5rem; }

.sheet__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: var(--sheet-max);
    margin: 0 auto;
    padding-bottom: 3rem;
}

#app-error {
    padding: 0.875rem 1.125rem;
    border: 1px solid #F6C9D0;
    border-radius: var(--r);
    background: var(--rose-wash);
    color: var(--rose-ink);
    font-size: var(--t-sm);
    font-weight: 600;
}

#app-error.hidden { display: none; }

/* Tiêu đề mục: chấm màu + chữ thường, không viết hoa toàn bộ. */
.sectionhead { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.625rem; }

.sectionhead__title {
    margin: 0;
    font-family: var(--face-display);
    font-size: var(--t-h2);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sectionhead__note { margin: 0; font-size: var(--t-sm); color: var(--text-2); }

.sectionhead__meta {
    margin-left: auto;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
}

.panel__body { padding: 1rem; }

.panel__head { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.875rem 1rem 0; }

.panel__title { margin: 0; font-size: var(--t-h3); font-weight: 700; }

.panel__meta { margin-left: auto; font-size: var(--t-sm); color: var(--text-2); white-space: nowrap; }

.grid { display: grid; gap: var(--gap); }
.grid--halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid--pareto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* ---------- Hero: tình trạng tồn đọng ----------------------------------- */

.standing {
    display: grid;
    /* Cột chữ cố định; phần còn lại luôn thuộc về rãnh thời gian chờ, kể cả khi
       ray đang mở ở 1024px và chỉ còn ~686px cho nội dung. */
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-2);
}

.standing__badge {
    display: inline-block;
    padding: 0.25rem 0.6875rem;
    border-radius: var(--r-pill);
    background: var(--rose-wash);
    color: var(--rose-ink);
    font-size: var(--t-label);
    font-weight: 700;
}

.standing__count {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--face-display);
    font-size: var(--t-hero);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.standing__lede { margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; max-width: 20ch; }

.standing__note {
    margin: 1.125rem 0 0;
    padding: 0.75rem 0.875rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--t-sm);
    color: var(--text-2);
    line-height: 1.5;
}

.standing__note strong { color: var(--rose-ink); font-weight: 700; }

/* ---------- Chữ ký: vòng thời gian chờ ----------------------------------
   Năm khoảng ngày chờ vẽ thành một vòng tròn khuyết. Múi càng về cuối càng
   nóng màu, nên nhóm chờ lâu tự nổi lên trước khi phải đọc con số nào. */

.track { display: flex; flex-direction: column; min-width: 0; }

.track__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.875rem; }
.track__unitnote { font-size: 0.75rem; color: var(--text-2); }

#aging-alert { margin: 0.875rem 0 0; font-size: var(--t-sm); font-weight: 500; }

/* ---------- Thẻ chỉ số --------------------------------------------------- */

/* Vòng tròn cơ cấu bên trái, các điểm cần chú ý xếp thành lưới bên phải. Hai
   bên cao bằng nhau nên thẻ giãn theo vòng tròn thay vì bỏ trống một mảng. */
.overview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; }

.kpigrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap); }

.kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
}

.kpi__label { display: flex; align-items: center; gap: 0.4375rem; font-size: var(--t-label); font-weight: 600; color: var(--text-2); }

.kpi__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); flex: none; }
.kpi--mint .kpi__dot { background: var(--mint); }
.kpi--rose .kpi__dot { background: var(--rose); }
.kpi--amber .kpi__dot { background: var(--amber); }

.kpi__value {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    font-family: var(--face-display);
    font-size: var(--t-num-xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kpi__pct { font-family: var(--face-body); font-size: var(--t-sm); font-weight: 500; color: var(--text-2); }

.kpi--named .kpi__value { font-family: var(--face-body); font-size: 1rem; font-weight: 700; line-height: 1.3; }

/* Số tiền dài hơn số đếm nên hạ một bậc để không tràn thẻ. */
.kpi--money .kpi__value { font-size: var(--t-num); white-space: nowrap; }
.kpi__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.kpi__tally {
    margin-left: auto;
    padding: 0.125rem 0.6875rem;
    border-radius: var(--r-pill);
    background: var(--rose-wash);
    color: var(--rose-ink);
    font-family: var(--face-display);
    font-size: var(--t-num);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Biểu đồ ------------------------------------------------------ */

.chart-shell { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-gutter: stable; }

.chart-viewport { position: relative; width: 100%; height: 100%; min-width: 100%; min-height: 100%; }
.chart-viewport > canvas { display: block; width: 100% !important; height: 100% !important; }
.chart-shell.chart-scroll-dense .chart-viewport { min-width: 44rem; }

.chart-shell--sm { height: 8.5rem; }
.chart-shell--md { height: 13rem; }
.chart-shell--lg { height: 14.5rem; }
/* Vòng tròn không cuộn ngang bao giờ nên khung để cố định, không cần bù thanh
   cuộn. Bề rộng phải chặn lại: thả tự do trong cột rộng thì hình tròn và chú
   giải bị đẩy ra hai đầu, cách nhau cả một khoảng trống. */
.chart-shell--donut {
    height: 11.5rem;
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;  /* căn giữa khi khung cha là khối */
    align-self: center;   /* căn giữa khi khung cha là flex */
    overflow: hidden;
    scrollbar-gutter: auto;
}

#ceo-summary .chart-shell--donut { height: 12rem; }
.chart-split { height: 1px; margin: 0.75rem 0; background: var(--line-soft); }

.chart-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.875rem;
    margin-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-size: var(--t-sm);
    color: var(--text-2);
}

.chart-foot strong { color: var(--text); font-weight: 600; }

#cat-warning {
    padding: 0.6875rem 0.875rem;
    margin-bottom: 1rem;
    border-radius: var(--r-sm);
    background: var(--rose-wash);
    color: var(--rose-ink);
    font-size: var(--t-sm);
    font-weight: 600;
}

#cat-warning.hidden { display: none; }

#txt-pareto-insight {
    margin: 1rem 0 0;
    padding: 0.75rem 0.875rem;
    border-radius: var(--r-sm);
    background: var(--amber-wash);
    color: var(--amber-ink);
    font-size: var(--t-sm);
    font-weight: 600;
}

/* ---------- Bảng --------------------------------------------------------- */

.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.tablewrap--tall { max-height: 20rem; }
.tablewrap--pending { max-height: 27rem; }

.ledgertable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); text-align: left; }
.ledgertable--wide { min-width: 980px; }
.ledgertable--mid { min-width: 620px; }

.ledgertable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    font-size: var(--t-label);
    font-weight: 600;
    white-space: nowrap;
}

.ledgertable tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ledgertable tbody tr:last-child td { border-bottom: 0; }
.ledgertable tbody tr:hover td { background: var(--sky-wash); }

.ledgertable .cell-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledgertable .cell-mid { text-align: center; }
.ledgertable .cell-name { font-weight: 600; color: var(--text); }
.ledgertable .cell-empty { padding: 2.75rem 1rem; text-align: center; color: var(--text-2); }

.cell-empty__lead { display: block; font-family: var(--face-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }

.tag {
    display: inline-block;
    padding: 0.1875rem 0.5625rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.tag--north { background: var(--sky-wash); color: var(--sky-ink); }
.tag--south { background: var(--mint-wash); color: var(--mint-ink); }
.tag--pending { background: var(--rose-wash); color: var(--rose-ink); }

.subtle { display: block; font-size: 0.75rem; color: var(--text-2); font-weight: 400; }
.clip { display: block; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cột ngày chờ: số cộng một vạch tỉ lệ bo tròn, tô theo bậc nguy cấp. */
.agecell { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.3125rem; width: 3.5rem; }
.agecell__n { text-align: right; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.agecell__bar { height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.agecell__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--tier, var(--text-3)); }

.rate { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.rate__bar { width: 3rem; height: 4px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.rate__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--tier, var(--text-3)); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
#pending-page-info { font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pager__buttons { display: flex; gap: 0.5rem; }

.pagerbtn {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: 600;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.pagerbtn:hover:not(:disabled) { background: var(--sky-wash); color: var(--sky-ink); }
.pagerbtn:disabled { color: var(--text-3); cursor: not-allowed; opacity: 0.6; }

/* ---------- Vùng miền ---------------------------------------------------- */

#grid-region-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.875rem; }
#grid-region-cards.is-single { grid-template-columns: minmax(0, 1fr); }

.regioncard { padding: 0.875rem; border-radius: var(--r); background: var(--surface-2); }
.regioncard.hidden { display: none; }
.regioncard__name { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.625rem; font-size: var(--t-sm); font-weight: 700; }

.swatch { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.swatch--north { background: var(--sky); }
.swatch--south { background: #7ED0C0; }

.regioncard__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.figure { display: flex; flex-direction: column; gap: 0.125rem; }
.figure__label { font-size: var(--t-label); font-weight: 600; color: var(--text-2); }
.figure__value { font-family: var(--face-display); font-size: var(--t-num); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- Bản ghi nhớ điều hành --------------------------------------- */

#management-insight .memo {
    padding: 1.25rem;
    background: var(--sky-wash);
    border: 1px solid #DCE7FC;
    border-radius: var(--r-xl);
}

.memo__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.875rem; }

.memo__title { margin: 0; font-family: var(--face-display); font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.01em; }

.memo__stamp {
    margin-left: auto;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.7);
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--text-2);
}

.memo__lead { margin: 0 0 0.875rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; max-width: 60ch; }

.memo__list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }

.memo__item {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--r-sm);
}

.memo__key { flex: 0 0 10rem; font-size: var(--t-label); font-weight: 700; color: var(--text-2); }
.memo__val { flex: 1; font-size: var(--t-sm); line-height: 1.5; }

.memo__action {
    margin: 1.25rem 0 0;
    padding: 1rem 1.125rem;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid #DCE7FC;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.55;
}

/* ---------- Hộp thoại ---------------------------------------------------- */

.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(38, 54, 74, 0.45);
    backdrop-filter: blur(3px);
}

.overlay.hidden { display: none; }

#login-overlay { z-index: 100; }
#admin-modal, #import-modal { z-index: 90; }
#toast-modal { z-index: 95; transition: opacity 0.2s var(--ease); }
#loading-overlay { z-index: 80; background: rgba(244, 247, 251, 0.7); }
#toast-modal.opacity-0 { opacity: 0; }

.dialog { width: 100%; background: var(--surface); border-radius: var(--r-xl); box-shadow: 0 24px 60px -20px rgba(38, 54, 74, 0.4); }

.dialog--login { max-width: 25rem; padding: 2rem; }
.dialog--sm { max-width: 22rem; padding: 1.5rem; }
.dialog--lg { max-width: 42rem; padding: 1.5rem; max-height: 90vh; overflow-y: auto; }
.dialog--toast { max-width: 22rem; padding: 1.5rem; }

.dialog__title { margin: 0; font-family: var(--face-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.dialog__sub { margin: 0.4375rem 0 0; font-size: var(--t-sm); color: var(--text-2); }
.dialog__head { display: flex; align-items: flex-start; gap: 1rem; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 0.625rem; margin-top: 1.5rem; }

.loginmark { text-align: center; margin-bottom: 1.75rem; }
.loginmark__kicker { display: block; margin-top: 0.5rem; font-size: var(--t-label); font-weight: 500; color: var(--text-2); }

.field { display: block; margin-top: 1.25rem; }
.field__label { display: block; margin-bottom: 0.375rem; font-size: var(--t-label); font-weight: 600; color: var(--text-2); }

.field__input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--t-body);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field__input:focus { outline: none; border-color: var(--sky); background: var(--surface); box-shadow: 0 0 0 3px var(--sky-wash); }

.formerror { margin: 0.625rem 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--rose-ink); }
.formerror.hidden { display: none; }

.btn {
    padding: 0.6875rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 600;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.btn--primary { background: var(--sky-ink); color: #FFFFFF; }
.btn--primary:hover:not(:disabled) { background: #244CA0; }
.btn--danger { background: var(--rose-ink); color: #FFFFFF; }
.btn--danger:hover:not(:disabled) { background: #A32233; }
.btn--quiet { background: var(--surface); border-color: var(--line); color: var(--text-2); }
.btn--quiet:hover { background: var(--surface-2); color: var(--text); }
.btn--block { display: block; width: 100%; margin-top: 1.5rem; padding: 0.8125rem; font-size: var(--t-body); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.iconbtn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: auto;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 1.25rem;
    line-height: 1;
}

.iconbtn:hover { background: var(--rose-wash); color: var(--rose-ink); }

.notice {
    margin: 1.25rem 0 0;
    padding: 0.875rem 1.125rem;
    border-radius: var(--r-sm);
    background: var(--amber-wash);
    color: var(--amber-ink);
    font-size: var(--t-sm);
    line-height: 1.55;
}

.importstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; margin-top: 1.25rem; }
.importstat { padding: 0.875rem; border-radius: var(--r-sm); background: var(--surface-2); }
.importstat__label { display: block; font-size: var(--t-label); font-weight: 600; color: var(--text-2); }
.importstat__value { display: block; margin-top: 0.25rem; font-family: var(--face-display); font-size: var(--t-num); font-weight: 700; font-variant-numeric: tabular-nums; }

.warnlist { max-height: 11rem; overflow-y: auto; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.warnlist li { padding: 0.4375rem 0; border-bottom: 1px solid var(--line-soft); color: var(--amber-ink); }

.toast__rule { height: 4px; width: 3rem; margin-bottom: 1.125rem; border-radius: var(--r-pill); background: var(--mint); }
.toast__rule.is-alarm { background: var(--rose); }
.toast__title { margin: 0; font-family: var(--face-display); font-size: 1.125rem; font-weight: 700; }
.toast__body { margin: 0.625rem 0 1.25rem; font-size: var(--t-sm); line-height: 1.55; color: var(--text-2); }

.loadingcard {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9375rem 1.25rem;
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--sh-2);
    font-size: var(--t-sm);
    font-weight: 600;
}

.spinner { width: 1.125rem; height: 1.125rem; border: 2.5px solid var(--line); border-top-color: var(--sky); border-radius: 50%; animation: spin 0.7s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Thích ứng ---------------------------------------------------- */

@media (max-width: 1279px) {
    .standing { gap: 1.75rem; }
    .grid--pareto { grid-template-columns: minmax(0, 1fr); }
    .overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1023px) {
    #dashboard-container { margin-left: 0; }

    .standing { grid-template-columns: minmax(0, 1fr); }
    .standing__lede { max-width: none; }
    .grid--halves { grid-template-columns: minmax(0, 1fr); }
    .overview { grid-template-columns: minmax(0, 1fr); }
    .topbar { padding: 0.625rem 1.25rem 0.75rem; }
    .sheet { padding: 1.25rem; }
}

/* Hẹp hơn 1100px thì không đủ chỗ cho cả bộ lọc lẫn phần đăng xuất trên một dòng.
   Cho bộ lọc chiếm trọn một dòng riêng bên dưới; đăng xuất vẫn ở lại dòng trên. */
@media (max-width: 1100px) {
    #filter-bar { order: 4; flex-basis: 100%; }
}

@media (max-width: 767px) {
    :root { --rail-w: min(18rem, 86vw); --gap: 0.875rem; }

    .sheet { padding: 1rem; }
    .sheet__inner { gap: 1.5rem; }
    .standing { padding: 1.25rem; }
    .filter-field { flex: 1 1 calc(50% - 0.25rem); }
    /* Trên thanh trên thì nút bỏ lọc thu nhỏ cho vừa dòng, nhưng ở khổ điện thoại
       bộ lọc đã xuống dòng riêng nên trả lại vùng chạm đủ 44px. */
    #btn-reset-filters { width: 2.75rem; height: 2.75rem; }
    .memo__item { flex-direction: column; gap: 0.25rem; }
    .memo__key { flex: none; }
    #management-insight .memo { padding: 1.25rem; }
    .importstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-shell--lg, .chart-shell--md { height: 14rem; }
    .chart-shell.chart-scroll-dense .chart-viewport { min-width: 40rem; }
    /* Chú giải rơi xuống dưới vòng tròn ở khổ hẹp nên khung cần cao thêm. */
    .chart-shell--donut, #ceo-summary .chart-shell--donut { height: 17rem; }
    .sectionhead { flex-wrap: wrap; }
    .sectionhead__meta { margin-left: 0; }
    .clip { max-width: 15rem; }
}

@media (max-width: 479px) {
    .kpigrid { grid-template-columns: minmax(0, 1fr); }
    #grid-region-cards { grid-template-columns: minmax(0, 1fr); }
    .pager { flex-direction: column; align-items: stretch; gap: 0.625rem; }
}

@media (hover: none) {
    .rail__link:hover { background: transparent; }
    .ledgertable tbody tr:hover td { background: transparent; }
}

/* ---------- In ấn -------------------------------------------------------- */

@media print {
    .no-print, #sidebar, #sidebar-backdrop, .topbar, #login-overlay,
    #admin-modal, #import-modal, #loading-overlay, #toast-modal, .pager { display: none !important; }

    body { display: block; height: auto; overflow: visible; background: #FFFFFF; }
    #dashboard-container { margin-left: 0; height: auto; }
    .sheet { overflow: visible; padding: 0; }
    .panel, .standing, .tablewrap, .kpi { break-inside: avoid; box-shadow: none; border-color: #D5DEEA; }
    .tablewrap--tall, .tablewrap--pending { max-height: none; }
    #management-insight .memo { background: #FFFFFF; border-color: #D5DEEA; }
    .memo__item, .memo__stamp { background: #FFFFFF; border: 1px solid #EEF2F8; }
}

/* ---------- Chuyển động giảm nhẹ ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html, .sheet { scroll-behavior: auto; }
    #sidebar, #dashboard-container, #sidebar-backdrop, #toast-modal { transition: none; }
    .spinner { animation-duration: 2s; }
}

/* =============================================================================
   Khuôn app cửa hàng (2026-09-23)
   App Quản lý & phân tích cửa hàng là gốc giao diện của hệ WCM. Khối này đưa app
   Bảo trì về đúng thông số của nó: nền, bo góc, không bóng khi đứng yên, cỡ chữ thẻ
   số, topbar một hàng 58px, chip vai trò, nút đăng xuất, ô chọn bộ lọc.
   ========================================================================== */
:root {
    --bg: #F2F6FC;
    --line-strong: #D3DEEC;
    --brand-red-ui: #A11D2B;
    --brand-red-deep: #8A1824;
    --sky-wash: #E8F0FE;   --sky-edge: #D3E2FD;
    --mint-wash: #E0F5EC;  --mint-edge: #C5ECDC;
    --amber-wash: #FEF1DA; --amber-edge: #FBE0AE;
    --rose-wash: #FDE8EC;  --rose-edge: #F9CDD5;
    --r-xl: 14px;
    --r: 14px;
    --sh-1: none;
    --sh-2: none;
    --t-hero: 2.25rem;
}

/* Topbar một hàng như app cửa hàng */
.topbar { display: flex; align-items: center; min-height: 3.625rem; padding: 0 1.125rem; }
.topbar__row { flex: 1; flex-wrap: nowrap; min-width: 0; }
.topbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#header-actions { gap: 0.625rem; }
.pill--role[data-role="admin"] { background: #FBEEEF; color: var(--brand-red-ui); }
.pill--role[data-role="staff"] { background: var(--sky-wash); color: var(--sky-ink); }
.ghostbtn { padding: 0.4375rem 0.625rem; border-color: var(--line-strong); border-radius: 9px; font-size: 0.78125rem; font-weight: 500; }

/* Thân trang: đệm 24px như <main> app cửa hàng */
.sheet { padding: 1.5rem; }
.sheet__inner { gap: 1.25rem; }

#filter-bar { order: 0; flex: 1 1 100%; }
.filter-field > select { background: var(--surface); border-color: var(--line-strong); border-radius: 10px; font-size: 0.78125rem; }
#filter-summary { margin-top: 0.625rem; }

/* Tiêu đề mục: cỡ như tiêu đề trang của app cửa hàng */
.sectionhead { margin-bottom: 0.75rem; }
.sectionhead__title { font-size: 1rem; font-weight: 600; }
.sectionhead__note { font-size: 0.8125rem; }

/* Thẻ: bo 14px, viền mảnh, đệm 20px, không bóng khi đứng yên */
.panel__head { padding: 1.25rem 1.25rem 0; }
.panel__body { padding: 1.25rem; }
.panel__title { font-size: 0.875rem; font-weight: 700; }
.tablewrap, .standing { box-shadow: none; }
.standing { padding: 1.25rem; }

/* Thẻ số: nền nhạt theo màu, nhãn 13px, số 24px — đúng thẻ số app cửa hàng */
.kpi { padding: 0.75rem 1rem; border-radius: 10px; background: var(--wash, var(--surface)); border-color: var(--edge, var(--line)); }
.kpi__label { font-size: 0.8125rem; font-weight: 500; color: var(--ink, var(--text-2)); }
.kpi__dot { width: 0.5rem; height: 0.5rem; }
.kpi__value { font-size: 1.5rem; font-weight: 600; }
.kpi--named .kpi__value { font-size: 1.0625rem; font-weight: 600; }
.kpi--money .kpi__value { font-size: 1.5rem; }
.kpi__tally { background: var(--surface); font-size: 0.9375rem; font-weight: 600; }
.kpi--rose  { --wash: var(--rose-wash);  --edge: var(--rose-edge);  --ink: var(--rose-ink); }
.kpi--amber { --wash: var(--amber-wash); --edge: var(--amber-edge); --ink: var(--amber-ink); }
.kpi--mint  { --wash: var(--mint-wash);  --edge: var(--mint-edge);  --ink: var(--mint-ink); }
.kpi--sky   { --wash: var(--sky-wash);   --edge: var(--sky-edge);   --ink: var(--sky-ink); }
.kpi--mint .kpi__dot { background: var(--mint); }
.kpi--sky .kpi__dot { background: var(--sky); }

/* Nút chính ở thanh bên: đỏ thương hiệu như nút chính app cửa hàng */
.railbtn--admin, .railbtn--primary { background: var(--brand-red-ui); border-color: var(--brand-red-ui); box-shadow: none; }
.railbtn--admin:hover, .railbtn--primary:hover { background: var(--brand-red-deep); border-color: var(--brand-red-deep); }
.railbtn { border-color: var(--line-strong); border-radius: 10px; font-weight: 500; }

/* Màn hẹp: như app cửa hàng — ẩn chip số dòng, nút đăng xuất chỉ còn icon. */
@media (max-width: 900px) {
    .pill--data { display: none; }
    .ghostbtn__text { display: none; }
    .ghostbtn { padding: 0.5rem; }
    .topbar__title { flex: 1; }
}

@media (max-width: 767px) {
    .sheet { padding: 1rem; }
    .topbar { padding: 0.5rem 0.75rem; }
    .topbar__title { font-size: 0.9375rem; }
}

/* =============================================================================
   Đồng bộ đầy đủ với app cửa hàng (2026-09-23, vòng 2)
   Gốc giao diện của hệ WCM là app Quản lý & phân tích cửa hàng. Khối này đặt lại
   các thành phần của app Bảo trì theo đúng thông số bên đó; khối "Khuôn app cửa
   hàng" phía trên vẫn giữ các phần đã khớp (topbar 58px, font, nền, bo góc).
   Màu tươi chỉ dùng trong biểu đồ — thẻ, nhãn, hộp ghi chú để trắng/xám.
   ========================================================================== */
:root {
    --win-red: #E81C24;          /* đỏ chữ "Win" trong logo — nút chính */
    --win-red-deep: #C4161D;
    --win-red-soft: #FDECEC;
    --thead-bg: #F6F8FC;
}

/* ---- Thanh bên: thu gọn thành dải icon 80px (màn rộng) ---- */
#sidebar { overflow-x: hidden; transition: transform 0.3s var(--ease), width 0.3s var(--ease); }
#dashboard-container { transition: margin-left 0.3s var(--ease); }
#sidebar.is-collapsed { width: 5rem; }
#dashboard-container.is-railed { margin-left: 5rem; }
#sidebar.is-collapsed .rail__head { padding: 0 1.5625rem; }
#sidebar.is-collapsed .rail__logo,
#sidebar.is-collapsed .rail__label,
#sidebar.is-collapsed .rail__count { display: none; }
#btn-close-sidebar { margin-left: auto; }
#sidebar.is-collapsed #btn-close-sidebar svg { transform: scaleX(-1); }
/* Nhãn nhóm giữ nguyên chiều cao (thành vạch mảnh) để các mục không nhảy khi thu gọn. */
#sidebar.is-collapsed .rail__group { position: relative; color: transparent; white-space: nowrap; overflow: hidden; }
#sidebar.is-collapsed .rail__group::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; top: 50%; border-top: 1px solid var(--line); }
#sidebar.is-collapsed .rail__link { gap: 0; }

/* ---- Đầu trang (dải tiêu đề) ---- */
.pagehead {
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.pagehead__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.pagehead__title { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.pagehead__chip {
    display: inline-flex; align-items: center; gap: 0.375rem; flex: none;
    padding: 0.1875rem 0.5625rem; border-radius: var(--r-pill);
    background: var(--line-soft); color: var(--text-2); font-size: 0.75rem; font-weight: 500;
}
.pagehead__chipicon { width: 0.8125rem; height: 0.8125rem; }
.pagehead__h { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pagehead__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.pagehead__filters { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.pagehead__filters.is-collapsed { display: none; }
#filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-field { flex: 0 1 12rem; }
.filter-field > select { height: 2.125rem; padding: 0 0.625rem; font-weight: 500; color: var(--text); border-radius: 8px; }
#btn-reset-filters { width: 2.125rem; height: 2.125rem; background: var(--surface); border-color: var(--line-strong); border-radius: 8px; color: var(--text-3); }
#btn-reset-filters:hover { background: var(--line-soft); color: var(--text); }

/* Nút "Bộ lọc" và "Thao tác dữ liệu": cùng cỡ với app cửa hàng (34px, 13px) */
.filtertoggle, .actionsbtn {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 2.125rem; padding: 0 0.625rem;
    border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
    color: var(--text-2); font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
    transition: background-color 0.15s var(--ease);
}
.actionsbtn { padding: 0 0.75rem; }
.filtertoggle:hover, .actionsbtn:hover { background: var(--line-soft); color: var(--text); }
.filtertoggle__icon, .actionsbtn__icon { width: 1rem; height: 1rem; }
.filtertoggle__chev, .actionsbtn__chev { width: 0.875rem; height: 0.875rem; transition: transform 0.2s var(--ease); }
.filtertoggle[aria-expanded="false"] .filtertoggle__chev { transform: rotate(-90deg); }
.actionsbtn[aria-expanded="true"] .actionsbtn__chev { transform: rotate(180deg); }
.filtertoggle__count { min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--r-pill); background: var(--sky); color: #fff; font-size: 0.6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; }
.filtertoggle__count.hidden { display: none; }

/* Menu thả xuống — cùng kiểu .wcm-menu của app cửa hàng */
.menuwrap { position: relative; }
.menu {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; width: 14.5rem; padding: 0.25rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 16px 40px -16px rgba(38, 54, 74, 0.28), 0 2px 6px rgba(38, 54, 74, 0.06);
}
.menu.hidden { display: none; }
.menu__item {
    display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem;
    border: 0; border-radius: 6px; background: transparent; color: var(--text);
    font-size: 0.8125rem; font-weight: 500; text-align: left; white-space: nowrap;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--line-soft); outline: none; }
.menu__icon { width: 1rem; height: 1rem; flex: none; color: var(--text-3); }

/* ---- Thẻ số: trắng, không chấm màu; số phụ chữ xám ---- */
.kpi { background: var(--surface); border-color: var(--line); }
.kpi__label { color: var(--text-2); }
.kpi__dot { display: none; }
.kpi__tally { padding: 0; background: none; color: var(--text-2); font-size: 0.8125rem; font-weight: 500; }
.kpi__tally::after { content: " hồ sơ"; }

/* ---- Tiêu đề thẻ có icon xám (như app cửa hàng) ---- */
.panel__title { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--text); }
.panel__icon { width: 1rem; height: 1rem; flex: none; color: var(--text-3); }
.panel__meta { font-size: 0.75rem; }
.track__head .panel__title { font-weight: 700; }

/* ---- Khối tồn đọng & hộp ghi chú: trung tính ---- */
.standing__badge { background: var(--line-soft); color: var(--text-2); font-weight: 500; }
.standing__count { color: var(--text); }
.standing__note, #cat-warning, #txt-pareto-insight {
    background: var(--thead-bg); color: var(--text-2); border: 1px solid var(--line); font-weight: 500;
}
.standing__note strong { color: var(--text); font-weight: 600; }
#management-insight .memo { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.memo__title { font-size: 1rem; font-weight: 600; }
.memo__stamp { background: var(--line-soft); font-weight: 500; }
.memo__item { background: var(--thead-bg); }
.memo__action { background: var(--thead-bg); border-color: var(--line); }

/* ---- Vùng miền: số màu mực; chấm màu miền giữ làm chú thích cho biểu đồ ---- */
.regioncard { background: var(--thead-bg); border: 1px solid var(--line); }
.figure__value { color: var(--text); font-weight: 600; }

/* ---- Bảng: cùng kiểu bảng app cửa hàng ---- */
.panel--table { overflow: hidden; }
.panel--table .tablewrap { border: 0; border-radius: 0; box-shadow: none; }
.ledgertable thead th { background: var(--thead-bg); color: var(--text-2); font-size: 0.75rem; font-weight: 600; }
.ledgertable tbody tr:hover td { background: #F9FBFE; }
.tag--north, .tag--south { background: var(--line-soft); color: var(--text-2); }
.panel--table .pager { margin: 0; padding: 0.5625rem 0.75rem; border-top: 1px solid var(--line); background: #F9FAFD; }
#pending-page-info { font-size: 0.75rem; font-weight: 500; }
.pagerbtn { padding: 0.3125rem 0.625rem; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 0.75rem; font-weight: 500; }
.pagerbtn:hover:not(:disabled) { background: var(--line-soft); color: var(--text); }

/* ---- Nút: chính đỏ chữ "Win", phụ viền xám ---- */
.btn { border-radius: 10px; font-size: 0.8125rem; font-weight: 600; }
.btn--primary { background: var(--win-red); }
.btn--primary:hover:not(:disabled) { background: var(--win-red-deep); }
.btn--quiet { border-color: var(--line-strong); }
.pill--role[data-role="admin"] { background: var(--win-red-soft); color: var(--win-red); }
.pill--role[data-role="staff"] { background: var(--line-soft); color: var(--text-2); }
:focus-visible { outline-color: var(--sky); }

/* ---- Màn đăng nhập: như .auth-card của app cửa hàng ---- */
#login-overlay { background: var(--bg); backdrop-filter: none; }
.dialog--login { max-width: 26.875rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -32px rgba(38, 54, 74, 0.35); }
.loginmark { text-align: left; margin-bottom: 1.125rem; }
.loginmark .rail__logo { margin: 0 0 0 -0.375rem; height: 2.5rem; }
.dialog--login .dialog__title { font-size: 1.25rem; font-weight: 600; }
.dialog--login .dialog__sub { margin: 0.375rem 0 1.25rem; font-size: 0.875rem; line-height: 1.55; }
.dialog--login .field { margin-top: 0; }
.field__label { font-size: 0.8125rem; font-weight: 500; }
.field__control { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.6875rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
.field__control:focus-within { border-color: var(--win-red); box-shadow: 0 0 0 3px rgba(232, 28, 36, 0.12); }
.field__icon { width: 1rem; height: 1rem; flex: none; color: var(--text-3); }
.field__control .field__input { padding: 0.75rem 0; border: 0; background: transparent; box-shadow: none; }
.field__control .field__input:focus { box-shadow: none; }
.dialog--login .btn--block { margin-top: 0.875rem; padding: 0.75rem; }
.dialog--login .field__label { margin-bottom: 0.4375rem; }
/* Cao đúng 44px như ô nhập/nút của app kho (DESIGN_SYSTEM.md §4.9). */
.dialog--login .field__control { box-sizing: border-box; height: 44px; }
.dialog--login .field__control .field__input { padding: 0; height: 100%; }
.dialog--login .btn--block { box-sizing: border-box; height: 44px; padding: 0 0.75rem; font-size: 14px; }
/* Nút hiện/ẩn mật khẩu — cùng thông số .wcm-auth-toggle của app kho/khảo sát/hiệu suất. */
.field__toggle { flex: none; width: 32px; height: 32px; margin-right: -5px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8593A5; cursor: pointer; }
.field__toggle:hover { background: #F1F5FA; color: #26364A; }
.field__toggle svg { width: 16px; height: 16px; }
.field__toggle[aria-pressed="true"] .pw-eye, .field__toggle:not([aria-pressed="true"]) .pw-eye-off { display: none; }

/* Số trong bảng và dòng nhận xét dưới vòng thời gian chờ: chữ thường, không tô màu. */
.ledgertable :is(.u-mint, .u-rose, .u-amber) { color: var(--text); }
#aging-alert:is(.u-mint, .u-rose, .u-amber) { color: var(--text-2); font-weight: 500; }

@media (max-width: 767px) {
    .pagehead { padding: 0.75rem; }
    .pagehead__title { flex-wrap: wrap; }
    .filter-field { flex: 1 1 calc(50% - 0.25rem); }
}
@media print {
    .pagehead { display: none; }
}