h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===================================================================
   Design tokens An Sơn — port từ ui-demo.html (docs/04-UI-DESIGN.md)
   =================================================================== */
:root {
  --ans-ink: #15202B; --ans-ink-2: #3D4A57; --ans-muted: #6B7682; --ans-line: #DCE1E7;
  --ans-bg: #FFFFFF; --ans-bg-2: #F3F5F8;
  --ans-brand: #1A5DAD; --ans-brand-700: #134A8C; --ans-brand-50: #E9F1FA;
  --ans-warn: #E08A00; --ans-warn-50: #FCF3E3;
  --ans-danger: #C2362B; --ans-danger-50: #FAECEA;
  --ans-ok: #1F8A4C; --ans-ok-50: #E7F4ED;
  --radius: 6px; --radius-sm: 4px;
  /* Chiều cao control dùng chung — mọi input/select/button trong 1 hàng phải bằng nhau,
     nếu không hàng bộ lọc sẽ bị răng cưa (xem docs/04-UI-DESIGN.md mục 1) */
  --control-h: 36px; --control-h-sm: 30px;
  --shadow-sm: 0 1px 2px rgba(21,32,43,.06);
  --shadow-md: 0 4px 12px rgba(21,32,43,.10);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ans-bg); color: var(--ans-ink);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 14px; line-height: 1.45;
}
.mono { font-family: "IBM Plex Mono", "Consolas", monospace; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
.small { font-size: 12.5px; color: var(--ans-muted); }

.app { display: flex; height: 100%; min-height: 100vh; }

.sidebar {
  width: 232px; flex: 0 0 232px; background: var(--ans-bg-2);
  border-right: 1px solid var(--ans-line);
  display: flex; flex-direction: column; padding: 16px 12px;
}
.brand { display: flex; align-items: center; gap: 8px; padding: 8px 8px 20px 8px; }
.brand .logo {
  width: 28px; height: 28px; border-radius: var(--radius-sm); object-fit: cover; display: block; flex: 0 0 auto;
}
.brand .name { font-weight: 600; font-size: 14px; color: var(--ans-ink); }
.brand .sub { font-size: 11.5px; color: var(--ans-muted); }

nav.ans-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius);
  color: var(--ans-ink-2); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
  border-left: 2px solid transparent; text-decoration: none;
}
.nav-item:hover { background: #EAEDF1; }
.nav-item.active { background: var(--ans-brand-50); color: var(--ans-brand); border-left: 2px solid var(--ans-brand); }
.nav-item .ic { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .ic svg { width: 18px; height: 18px; display: block; }
.nav-sep { margin: 14px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ans-muted); font-weight: 600; }

.online-pill { display: flex; align-items: center; gap: 4px; background: #F3F5F8; border: 1px solid var(--ans-line); color: var(--ans-ink-2); border-radius: 12px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--ans-line); flex-wrap: wrap; }

.tab-item {
  padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--ans-ink-2);
  cursor: pointer; border-bottom: 2px solid transparent; user-select: none; background: none; border-top: none; border-left: none; border-right: none;
}
.tab-item:hover { color: var(--ans-ink); }
.tab-item.active { color: var(--ans-brand); border-bottom: 2px solid var(--ans-brand); font-weight: 600; }

.sidebar-foot { margin-top: auto; padding: 10px 8px; border-top: 1px solid var(--ans-line); }
.who { font-size: 13px; font-weight: 600; }
.role-badge { display: inline-block; margin-top: 4px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px; flex: 0 0 56px; border-bottom: 1px solid var(--ans-line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.content { padding: 24px; overflow-x: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius);
  height: var(--control-h); padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; line-height: 1; font-family: inherit; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.btn-primary { background: var(--ans-brand); color: #fff; }
.btn-primary:hover { background: var(--ans-brand-700); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-secondary { background: #fff; color: var(--ans-ink-2); border-color: var(--ans-line); }
.btn-secondary:hover { background: var(--ans-bg-2); }
.btn-danger { background: #fff; color: var(--ans-danger); border-color: var(--ans-line); }
.btn-danger:hover { background: var(--ans-danger-50); }
.btn-sm { height: var(--control-h); padding: 0 12px; font-size: 13px; }
.btn-group { display: flex; gap: 6px; }

.card { background: #fff; border: 1px solid var(--ans-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.group { margin-bottom: 24px; }
/* Nhóm nhãn + control dùng chung ở mọi nơi (hàng lọc, card cài đặt, modal) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; color: var(--ans-ink-2); font-weight: 500; }

.row-actions { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.row-actions .field { display: flex; flex-direction: column; gap: 6px; }
.row-actions label { font-size: 12.5px; color: var(--ans-ink-2); font-weight: 500; }

/* Hàng bộ lọc chuẩn: nhãn trên - control dưới, tất cả chân control thẳng một mép,
   nút hành động chính luôn nằm cuối hàng bên phải */
.filter-bar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--ans-bg-2); border: 1px solid var(--ans-line); border-radius: var(--radius);
}
.filter-bar .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-bar label { font-size: 12.5px; color: var(--ans-ink-2); font-weight: 500; }
.filter-bar .spacer { flex: 1 1 0; min-width: 0; }

/* Thanh ngay trên bảng: thông tin bên trái, nút phụ (Xuất Excel/PDF, Thêm...) bên phải */
.table-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; min-height: var(--control-h); }
.table-toolbar .right { display: flex; gap: 8px; margin-left: auto; }

input, select {
  border: 1px solid var(--ans-line); border-radius: var(--radius);
  height: var(--control-h); padding: 0 10px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ans-ink);
}
input[type=checkbox], input[type=radio] { height: auto; padding: 0; }
input[type=file] { height: auto; padding: 7px 10px; }
textarea {
  border: 1px solid var(--ans-line); border-radius: var(--radius); padding: 8px 10px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ans-ink); resize: vertical;
}
textarea:focus { outline: none; border-color: var(--ans-brand); box-shadow: 0 0 0 3px var(--ans-brand-50); }
input:focus, select:focus { outline: none; border-color: var(--ans-brand); box-shadow: 0 0 0 3px var(--ans-brand-50); }
input.invalid-input { border-color: var(--ans-danger); }

.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.machine-card {
  background: #fff; border: 1px solid var(--ans-line); border-left: 3px solid var(--ans-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px;
  display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s;
}
.machine-card:hover { box-shadow: var(--shadow-md); border-color: var(--ans-brand); border-left-color: var(--ans-brand); }
/* docs/11-MOBILE-DASHBOARD.md Phần B — vạch dọc trái báo ĐỘ MỚI CỦA DỮ LIỆU, không tô cả nền card. */
.machine-card.freshness-green { border-left-color: var(--ans-ok); }
.machine-card.freshness-orange { border-left-color: var(--ans-warn); }
.machine-card.freshness-grey { border-left-color: var(--ans-muted); }
.machine-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.machine-card .head > div { min-width: 0; }
.machine-card .head .badge { flex: 0 0 auto; white-space: nowrap; }
.machine-card .code { font-size: 12.5px; color: var(--ans-muted); }

/* Thanh bar "máy gửi gần nhất" — dính khi cuộn, dùng chung Dashboard desktop lẫn mobile. */
.recent-senders-bar {
  position: sticky; top: 0; z-index: 5; background: #fff; border: 1px solid var(--ans-line);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.recent-senders-bar .title { font-size: 12.5px; font-weight: 600; color: var(--ans-ink-2); margin-bottom: 6px; }
.recent-senders-bar .senders { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; }
.recent-senders-bar .sender { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--ans-ink); }
.recent-senders-bar .sender:hover { text-decoration: underline; }
.recent-senders-bar .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.recent-senders-bar .dot.green { background: var(--ans-ok); }
.recent-senders-bar .dot.orange { background: var(--ans-warn); }
.recent-senders-bar .dot.grey { background: var(--ans-muted); }
.recent-senders-bar .more { color: var(--ans-muted); font-size: 12.5px; }
.recent-senders-bar .empty { color: var(--ans-muted); font-size: 13px; }
/* Grid 2 cột thay cho space-between: giá trị của mọi card thẳng một mép phải */
.stat-line { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; font-size: 13px; color: var(--ans-ink-2); }
.stat-line b { font-family: "IBM Plex Mono", monospace; color: var(--ans-ink); font-weight: 500; text-align: right; }

/* Khối tổng số liệu Báo cáo — dạng lưới ô thẻ (stat tile), label trên/số dưới thay vì 2 đầu 1 hàng */
.stat-summary { margin-bottom: 12px; }
.stat-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--ans-line); border: 1px solid var(--ans-line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.stat-tile { background: #fff; padding: 12px 16px; min-width: 0; }
.stat-tile-label { font-size: 12px; color: var(--ans-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile-value { font-size: 19px; font-weight: 600; color: var(--ans-ink); line-height: 1.25; overflow-wrap: break-word; }
.stat-machine-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ans-line); }
.stat-machine-name { font-size: 12.5px; font-weight: 600; color: var(--ans-brand); margin-bottom: 8px; }
.stat-tiles.compact .stat-tile { padding: 8px 12px; }
.stat-tiles.compact .stat-tile-value { font-size: 15px; }

.badge { display: inline-block; border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; font-weight: 600; }
.badge-ok { background: var(--ans-ok-50); color: var(--ans-ok); }
.badge-warn { background: var(--ans-warn-50); color: var(--ans-warn); }
.badge-danger { background: var(--ans-danger-50); color: var(--ans-danger); }
.badge-brand { background: var(--ans-brand-50); color: var(--ans-brand); }
.badge-muted { background: var(--ans-bg-2); color: var(--ans-muted); }

.table-wrap { border: 1px solid var(--ans-line); border-radius: var(--radius); overflow: auto; background: #fff; max-height: 560px; }
table.ans-table { border-collapse: collapse; width: 100%; min-width: 700px; }
table.ans-table thead th {
  background: var(--ans-bg-2); color: var(--ans-muted); font-size: 12px; font-weight: 600;
  /* Tên cột lấy từ cấu hình CSV nên hoa/thường lẫn lộn — ép uppercase để mọi header đồng nhất */
  text-transform: uppercase; letter-spacing: .04em;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--ans-line); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.ans-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--ans-line); font-size: 13.5px; white-space: nowrap; text-align: center; }
table.ans-table tbody tr:hover { background: var(--ans-brand-50); }
table.ans-table tbody tr:last-child td { border-bottom: none; }
table.ans-table td.num { font-family: "IBM Plex Mono", monospace; }
/* Cột số căn phải để các chữ số thẳng hàng đơn vị; chữ vẫn canh giữa theo docs/04-UI-DESIGN.md */
table.ans-table th.right, table.ans-table td.right { text-align: right; }
/* Cột nút thao tác: ghim sát mép phải, không chiếm chỗ thừa */
table.ans-table th.act, table.ans-table td.act { text-align: right; width: 1%; white-space: nowrap; }
/* Control trong bảng dùng cỡ nhỏ hơn để hàng không bị cao */
table.ans-table .btn { height: var(--control-h-sm); padding: 0 10px; font-size: 12.5px; }
table.ans-table input, table.ans-table select { height: var(--control-h-sm); font-size: 13px; }
table.ans-table td.stt { font-family: "IBM Plex Mono", monospace; color: var(--ans-muted); }
table.ans-table th.left, table.ans-table td.left { text-align: left; }
table.ans-table tr.subtotal td { background: var(--ans-bg-2); font-weight: 600; }
table.ans-table tr.total td { background: var(--ans-brand-50); font-weight: 700; color: var(--ans-brand-700); border-top: 1px solid var(--ans-line); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pager-info { font-size: 13px; color: var(--ans-ink-2); }
.pager-info b { font-family: "IBM Plex Mono", monospace; color: var(--ans-ink); }
table.ans-table th.sortable { cursor: pointer; user-select: none; }
table.ans-table th.sortable:hover { color: var(--ans-ink-2); }
.btn-link-reset { background: none; border: none; padding: 0; margin-left: 10px; font-size: 12.5px; color: var(--ans-brand); cursor: pointer; text-decoration: underline; }
.pager-ctrl { display: flex; align-items: center; gap: 6px; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--ans-line); background: #fff;
  border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ans-ink-2);
  font-family: "IBM Plex Mono", monospace;
}
.page-btn:hover:not(:disabled) { background: var(--ans-bg-2); }
.page-btn.active { background: var(--ans-brand); color: #fff; border-color: var(--ans-brand); }
.page-btn:disabled { opacity: .45; cursor: default; }
.page-size { font-size: 13px; height: 32px; padding: 0 8px; }

.ico-file { width: 14px; height: 14px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.ico-xls { background: #1F8A4C; }
.ico-pdf { background: #C2362B; }
.ic-print { width: 16px; height: 16px; flex: 0 0 auto; }

/* In báo cáo (Ctrl+P / nút In) — ẩn sidebar/bộ lọc/nút bấm/phân trang vì không có ý nghĩa trên giấy,
   giữ lại tiêu đề trang (h2 trong .topbar) để biết đang in báo cáo gì. */
@media print {
  .sidebar, .filter-bar, .table-toolbar, .pager, .license-banner, .online-pill { display: none !important; }
  .content { padding: 0; }
  .table-wrap { max-height: none; border: none; overflow: visible; }
  .main { display: block; }
}

.empty-state { text-align: center; padding: 48px 16px; color: var(--ans-muted); }
.empty-state .ic { font-size: 28px; margin-bottom: 8px; }

.suggest-box {
  position: absolute; top: calc(100% + 4px); left: 0; width: 280px; z-index: 20;
  background: #fff; border: 1px solid var(--ans-line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto;
}
.suggest-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--ans-line); }
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--ans-brand-50); }
.suggest-item .s-order { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; color: var(--ans-ink); }
.suggest-item .s-meta { font-size: 12px; color: var(--ans-muted); margin-top: 1px; }

/* Lịch chọn ngày tự vẽ (DateField.razor) — luôn hiện dd/MM/yyyy, không phụ thuộc ngôn ngữ máy người xem. */
.date-field { position: relative; display: inline-block; }
.date-field-btn {
  display: inline-flex; align-items: center; gap: 8px; height: var(--control-h);
  padding: 0 10px; border: 1px solid var(--ans-line); border-radius: var(--radius);
  background: #fff; font-size: 13.5px; color: var(--ans-ink); cursor: pointer; white-space: nowrap;
}
.date-field-btn:hover { border-color: var(--ans-brand); }
.date-field-ic { font-size: 13px; }
.date-field-overlay { position: fixed; inset: 0; z-index: 19; background: transparent; }
.date-field-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; width: 260px;
  background: #fff; border: 1px solid var(--ans-line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 10px;
}
.date-field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.date-field-month { font-size: 13px; font-weight: 600; color: var(--ans-ink); }
.date-field-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-field-wd { text-align: center; font-size: 11px; color: var(--ans-muted); padding: 4px 0; }
.date-field-day {
  aspect-ratio: 1; border: none; background: none; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--ans-ink); cursor: pointer;
}
.date-field-day:hover { background: var(--ans-brand-50); }
.date-field-day.muted { color: var(--ans-muted); }
.date-field-day.today { font-weight: 700; color: var(--ans-brand); }
.date-field-day.selected { background: var(--ans-brand); color: #fff; font-weight: 600; }
.date-field-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ans-line); }

.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(21,32,43,.35);
  align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
  width: 100%; max-width: 460px; max-height: 82vh; display: flex; flex-direction: column;
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--ans-line); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--ans-line); display: flex; justify-content: flex-end; gap: 8px; }
.close-x { cursor: pointer; color: var(--ans-muted); font-size: 18px; line-height: 1; background: none; border: none; }

.col-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ans-line); }
.col-row:last-child { border-bottom: none; }
.col-row .cname { font-size: 13.5px; font-weight: 500; }
.agg-select { font-size: 12.5px; height: var(--control-h-sm); padding: 0 8px; }

.license-banner { padding: 10px 24px; font-size: 13.5px; font-weight: 600; text-align: center; }
.license-banner.warn { background: var(--ans-warn-50); color: var(--ans-warn); }
.license-banner.danger { background: var(--ans-danger-50); color: var(--ans-danger); }

/* docs/09-MULTIYEAR-DATA.md Phần 3 — báo hiệu đang xem dữ liệu năm cũ (chỉ đọc) trên Lịch sử/Báo cáo. */
.archive-banner { padding: 8px 14px; font-size: 13px; font-weight: 600; text-align: center; border-radius: var(--radius); background: var(--ans-warn-50); color: var(--ans-warn); margin-bottom: 12px; }
.archive-banner.error { background: var(--ans-danger-50); color: var(--ans-danger); }

/* Dashboard → bấm card máy → chỉ xem đúng lô CSV vừa nhận (task Dashboard-click-batch-filter). */
.batch-banner { padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: var(--radius); background: var(--ans-brand-50); color: var(--ans-brand-700); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ans-bg-2); }
.login-card { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--ans-line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 32px; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--ans-line); border-radius: 4px; }

@media (max-width: 720px) {
  .sidebar { display: none; }
  .content { padding: 16px; }
}

/* Toast tự viết — thay MudBlazor Snackbar vì Snackbar không hiện được (xem ToastService.cs) */
.toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; max-width: 360px;
}
.toast-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow-md);
  font-size: 13.5px; font-weight: 600; color: #fff;
  animation: toast-in .2s ease-out;
}
.toast-success { background: var(--ans-ok); }
.toast-error { background: var(--ans-danger); }
.toast-close { background: none; border: none; color: #fff; opacity: .8; cursor: pointer; font-size: 13px; line-height: 1; }
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}