/* ===== Báo cáo ZNS ===== */
:root {
    --ink: #1c2536;
    --muted: #667085;
    --paper: #f5f7fa;
    --surface: #ffffff;
    --line: #e2e6ec;
    --event: #0068ff;          /* xanh Zalo – sự kiện */
    --event-soft: #e6f0ff;
    --type: #0b7a6f;           /* xanh ngọc – type */
    --type-soft: #e3f4f1;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --ok: #067647;
    --ok-soft: #dcfae6;
    --head-bg: #e8eef7;        /* hàng tiêu đề bảng */
    --row-alt: #f2f5f9;        /* dòng chẵn */
    --row-hover: #e6f0ff;
    --radius: 6px;
    color-scheme: light;
    --primary: #0747a6;        /* nút chính (Lọc, Đăng nhập): xanh đậm */
    --primary-hover: #053a8a;
    --export: #067647;         /* nút xuất file: xanh lá */
    --export-hover: #05603a;
    font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e6e9ef;
        --muted: #98a2b3;
        --paper: #10151f;
        --surface: #171d29;
        --line: #2a3242;
        --event: #5b9dff;
        --event-soft: #1a2b4a;
        --type: #3cc2b2;
        --type-soft: #15332f;
        --danger: #f97066;
        --danger-soft: #3a1a1a;
        --ok: #47cd89;
        --ok-soft: #0f3222;
        color-scheme: dark;    /* control gốc của trình duyệt (icon lịch, thanh cuộn) dùng màu sáng */
        --primary: #1d4ed8;
        --primary-hover: #1e40af;
        --export: #15803d;
        --export-hover: #166534;
        --head-bg: #222c3d;
        --row-alt: #1b2230;
        --row-hover: #1a2b4a;
    }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 1.15rem; }
h2 { font-size: 1rem; }
code { font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.pad { padding: 2rem 1rem; }

:focus-visible { outline: 2px solid var(--event); outline-offset: 2px; }

/* ----- khung ----- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark {
    width: 28px; height: 28px; display: grid; place-items: center;
    background: var(--event); color: #fff; font-weight: 700; border-radius: 8px;
}
.brand-name { font-weight: 600; font-size: 1.05rem; }
.user-box { display: flex; align-items: center; gap: .75rem; }
.user-name { font-weight: 500; }
.user-box .btn { text-decoration: none; color: inherit; }

/* ----- đăng nhập ----- */
.login-wrap { display: grid; place-items: center; padding: 4rem 1rem; }
.login-card {
    width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 1rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.75rem 1.5rem; box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
}
.login-card h1 { font-size: 1.3rem; }
.login-card > p { margin: -.6rem 0 0; }
.login-card input:not([type]), .login-card input[type=password] {
    width: 100%; padding: .5rem .65rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.login-card .btn { padding: .55rem; }

.report { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.25rem; }

/* ----- bộ lọc: một hàng ngang, tự xuống dòng khi màn hình hẹp ----- */
.filters {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.25rem;
}
.filters > .picker { flex: 1 1 220px; max-width: 320px; }
.filters > .search { flex: 1 1 220px; max-width: 320px; }
.date-group { display: flex; flex-direction: column; gap: .5rem; }
.filters > .filter-actions { align-self: flex-end; }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field > span { font-size: .85rem; font-weight: 500; }

input, select, button { font: inherit; color: inherit; }
input[type=search], input[type=date], select {
    width: 100%; padding: .45rem .6rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}
input:disabled, select:disabled { opacity: .6; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .85; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Dropdown chọn nhiều (sự kiện, loại) */
.dd { position: relative; }
.dd-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .6rem; background: var(--surface); text-align: left; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.dd-toggle:hover:not(:disabled), .dd-toggle.open { border-color: var(--event); }
.dd-toggle:disabled { opacity: .6; cursor: default; }
.dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { color: var(--muted); font-size: .8em; }
.dd-backdrop { position: fixed; inset: 0; z-index: 20; }
.dd-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 21;
    min-width: 100%; width: max-content; max-width: 420px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: .4rem;
}
.dd-foot { border-top: 1px solid var(--line); margin-top: .35rem; padding: .35rem .4rem 0; }
.pad-sm { padding: .4rem; margin: 0; }
.picker-search { margin-bottom: .35rem; }
.picker-list { max-height: 280px; overflow-y: auto; }
.picker-item {
    display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem;
    border-radius: 4px; cursor: pointer;
}
.picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item:hover { background: var(--paper); }
.picker-item.on { font-weight: 500; }
.picker-item input { accent-color: var(--event); margin: 0; }

.date-range { display: grid; grid-template-columns: repeat(2, 150px); gap: .5rem; }
.quick-dates { display: flex; flex-wrap: wrap; gap: .35rem; }

.filter-actions { display: flex; gap: .5rem; }

/* ----- nút ----- */
.btn {
    padding: .45rem .9rem; border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.export-btn { background: var(--export); border-color: var(--export); color: #fff; font-weight: 500; }
.export-btn:hover:not(:disabled) { background: var(--export-hover); border-color: var(--export-hover); }
.export-btn .dd-caret { color: inherit; opacity: .85; margin-left: .2rem; }
.export .dd-panel { left: auto; right: 0; min-width: 160px; }
.menu { display: flex; flex-direction: column; padding: .3rem; }
.menu-item {
    background: none; border: 0; border-radius: 4px; padding: .45rem .7rem;
    text-align: left; cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: var(--paper); }
.link { background: none; border: 0; padding: 0; color: var(--event); cursor: pointer; font-size: .8rem; }
.chip {
    padding: .2rem .6rem; font-size: .8rem; border: 1px solid var(--line);
    background: var(--surface); border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--event); color: var(--event); }

/* ----- kết quả ----- */
.results { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.alert {
    background: var(--danger-soft); color: var(--danger); border: 1px solid currentColor;
    border-radius: var(--radius); padding: .9rem 1rem;
}
.alert p { margin: .3rem 0; color: var(--ink); }

.summary { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.total { display: flex; align-items: baseline; gap: .5rem; }
.total-num { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total-label { color: var(--muted); }
.active-filters { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; }
.tag {
    font-size: .8rem; padding: .15rem .55rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); cursor: default;
}
button.tag { cursor: pointer; }
.tag.ev { background: var(--event-soft); color: var(--event); border-color: transparent; }
.tag.ty { background: var(--type-soft); color: var(--type); border-color: transparent; }

/* Bảng dữ liệu */
.table-wrap {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: auto; max-height: calc(100vh - 260px); min-height: 240px; transition: opacity .15s;
}
.table-wrap.loading { opacity: .55; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th {
    position: sticky; top: 0; z-index: 1; background: var(--head-bg);
    border-bottom: 2px solid var(--line); text-align: left; padding: 0;
}
.th-btn {
    background: none; border: 0; padding: .55rem .7rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; width: 100%; text-align: left;
}
/* Biểu tượng sắp xếp: mờ khi chưa sắp, đậm khi đang sắp theo cột đó */
.sort { color: var(--muted); opacity: .5; font-size: .8em; margin-left: .15rem; }
.sort.on { color: var(--event); opacity: 1; font-size: 1em; }
.th-btn:hover .sort { opacity: 1; }
td {
    padding: .45rem .7rem; border-bottom: 1px solid var(--line);
    white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
tbody tr:nth-child(even) td { background: var(--row-alt); }
tbody tr:hover td { background: var(--row-hover); }
/* Cột STT: tiêu đề không có nút nên cần padding riêng */
th.c-no { text-align: center; }
th.c-no .th-btn { text-align: center; padding: .55rem 1rem; }
th.c-no .th-text { display: block; padding: .55rem 1rem; font-weight: 600; white-space: nowrap; }
td.c-no { padding-left: 1rem; padding-right: 1rem; color: var(--muted); text-align: center; }
td.c-ev { color: var(--event); font-weight: 500; }
td.c-ty { color: var(--type); }
/* Badge trạng thái ZNS / SMS */
.badge {
    display: inline-block; padding: .1rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 500; line-height: 1.5;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.err { background: var(--danger-soft); color: var(--danger); }
.null { color: var(--muted); font-style: italic; }

.pager { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-size { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.page-size span { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.page-size select { width: auto; }

/* ----- lỗi Blazor ----- */
#blazor-error-ui {
    background: #fffbe6; color: #1c2536; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }