/* =========================================================================
   BeautyShop — hệ thống thiết kế tối giản.
   Mobile-first theo D-8: vùng chạm ≥44px, cỡ chữ ô nhập ≥16px (chặn iOS tự phóng to),
   mỗi màn một hành động chính.
   ========================================================================= */

/*
   Bảng màu "noir & 24K gold", khớp với ba trang khách xem (wwwroot/css/luxury.css).

   Trước đây file này dùng tông kem + nâu đất #b06a4f, nên đăng nhập xong là người dùng rơi từ một
   website đen-vàng sang một website kem-nâu, tưởng như hai sản phẩm khác nhau. Toàn bộ file viết
   theo token nên đổi tông chỉ cần đổi ở đây; mọi trang quản trị đi theo.

   --on-brand là token MỚI và bắt buộc: nền nhấn giờ là VÀNG SÁNG, nên chữ trên đó phải là màu mực
   tối. Giữ nguyên "color: #fff" như cũ sẽ thành chữ trắng trên nền vàng - gần như không đọc được
   và trượt chuẩn tương phản WCAG.
*/
:root {
    --bg: #0d0b12;
    --surface: #16131f;
    --surface-2: #1f1b2b;
    --line: rgba(197, 168, 128, .22);
    --text: #faf7f2;
    --muted: #9e99a8;
    --brand: #d4af37;
    --brand-dark: #ecd7bf;
    --brand-soft: rgba(212, 175, 55, .14);
    --on-brand: #0c0a10;
    --ok: #34d399;
    --ok-soft: rgba(16, 185, 129, .15);
    --warn: #fbbf24;
    --warn-soft: rgba(245, 158, 11, .14);
    --error: #fca5a5;
    --error-soft: rgba(239, 68, 68, .15);
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .45);
    --tap: 44px;
}

/*
   color-scheme: dark là MỘT dòng đổi rất nhiều thứ. Nó báo cho trình duyệt biết đây là giao diện
   tối, nên mọi điều khiển do HỆ ĐIỀU HÀNH vẽ tự đổi theo: ô chọn ngày, hộp select, ô tự điền
   (autofill) vốn bị tô vàng chói, thanh cuộn, con trỏ nhập. Thiếu dòng này thì CSS có tối cỡ nào,
   người dùng bấm vào ô chọn ngày vẫn nhận một hộp lịch trắng loá giữa màn hình đen.
*/
:root { color-scheme: dark; }

/* Thanh cuộn mặc định của Windows dày và xám sáng, cắt ngang giao diện đen-vàng trông như lỗi. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, .35) transparent;
}

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, .3); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, .55); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1.5rem 0 .5rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
p { margin: 0 0 1rem; }
a { color: var(--brand-dark); }
code { background: var(--brand-soft); padding: .1em .35em; border-radius: 4px; font-size: .875em; }

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }
.empty { padding: 2rem; text-align: center; }

/* ---------- Trang chủ / xác thực ---------- */
.landing, .auth-wrap {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.landing-card, .auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.75rem;
}

.auth-back { display: inline-block; margin-bottom: 1rem; font-size: .875rem; text-decoration: none; }
.landing-actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
.landing-actions .btn { flex-direction: column; align-items: flex-start; padding: .9rem 1rem; }
.landing-actions small { font-weight: 400; opacity: .8; }

.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); display: inline-block; }
.brand-dot-lg { width: 28px; height: 28px; margin-bottom: .75rem; }

/* ---------- Nút ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-dark); color: var(--on-brand); }
.btn-outline { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn-outline:hover { border-color: var(--brand); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { background: var(--brand-soft); color: var(--text); }
.btn-google { background: #ffffff; border-color: var(--line); color: #1f2937; }
.btn-telegram { background: #229ed9; color: #fff; }
.btn-block { display: flex; width: 100%; margin-bottom: .625rem; }
.btn-sm { min-height: 36px; font-size: .875rem; padding: 0 .75rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }

.g-mark {
    display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: .8rem;
}

/* ---------- Ô nhập ---------- */
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }

.input, .field input, .field select {
    width: 100%;
    min-height: var(--tap);
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: 16px;   /* dưới 16px iOS tự phóng to trang khi bấm vào ô */
    color: var(--text);
}

.input:focus, .field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.input-sm { min-height: 36px; font-size: .875rem; padding: .25rem .5rem; }

.check { display: flex; gap: .625rem; align-items: flex-start; margin-bottom: 1rem; }
.check input[type=checkbox] { width: 20px; height: 20px; margin-top: .2rem; flex: none; }

.static-value { min-height: var(--tap); display: flex; align-items: center; }

.divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--muted); font-size: .8rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Thông báo ---------- */
.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; border: 1px solid transparent; }
.alert-info { background: var(--brand-soft); border-color: rgba(212,175,55,.35); color: var(--brand-dark); }
.alert-ok { background: var(--ok-soft); border-color: rgba(16,185,129,.35); color: var(--ok); }
.alert-warn { background: var(--warn-soft); border-color: rgba(245,158,11,.35); color: var(--warn); }
.alert-error { background: var(--error-soft); border-color: rgba(239,68,68,.4); color: var(--error); }

/* ---------- Nhãn ---------- */
.badge {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; margin-left: .35rem; white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-off { background: rgba(255,255,255,.07); color: var(--muted); }
.badge-role { background: var(--brand-soft); color: var(--brand-dark); }
.pill { display: inline-block; min-width: 20px; padding: 0 .35rem; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .7rem; margin-left: .35rem; }

/* ---------- Khung quản trị ---------- */
.admin-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.admin-top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}

.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: var(--text); }
.admin-who { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.who-name { display: none; }

.admin-nav {
    display: flex; gap: .25rem; overflow-x: auto; padding: .5rem 1rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
}

/*
   Trên màn rộng, 13 mục vẫn không đủ chỗ trên một hàng: mục cuối ("Cài đặt") bị cắt mất bên phải
   và chỉ tới được nếu người dùng ĐOÁN ra là thanh menu cuộn ngang được. Một mục menu không nhìn
   thấy thì coi như không tồn tại.

   Cho xuống hàng thay vì cuộn: hai hàng nút trong trang quản trị là chuyện bình thường, và mọi mục
   đều với tới được bằng mắt. Trên điện thoại vẫn giữ cuộn ngang - ở đó xuống hàng sẽ ăn mất nửa
   màn hình.
*/
@media (min-width: 1024px) {
    .admin-nav {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: .35rem;
    }
}

.nav-item {
    padding: .5rem .875rem; border-radius: var(--radius-sm); text-decoration: none;
    color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; min-height: 40px;
    display: inline-flex; align-items: center;
}
.nav-item:hover { background: var(--brand-soft); color: var(--text); }
.nav-item.active { background: var(--brand); color: var(--on-brand); }

.admin-main, .page-wrap { padding: 1.25rem 1rem 5rem; max-width: 1080px; width: 100%; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }

/* ---------- Thẻ nội dung ---------- */
.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; margin-bottom: 1.25rem;
}
.card-attention { border-color: var(--brand); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.card-head h2 { margin: 0; }

.stack { display: grid; gap: .625rem; }

.row-card {
    display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center;
    padding: .875rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.row-main .muted { font-size: .85rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }

/* ---------- Thống kê ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.stat-alert { border-color: var(--brand); background: var(--brand-soft); }
.stat-num { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--muted); }
.stat-link { font-size: .8rem; font-weight: 600; margin-top: .35rem; text-decoration: none; }

/* ---------- Bảng ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .625rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.col-check { text-align: center !important; width: 1%; white-space: nowrap; }
.col-check input[type=checkbox] { width: 20px; height: 20px; }

/* ---------- Danh sách khoá-giá trị ---------- */
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .5rem 1rem; margin: 0; }
.kv dt { color: var(--muted); font-size: .875rem; }
.kv dd { margin: 0; }

.chip-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.chip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .75rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .875rem; }

/* ---------- Thanh công cụ / tab ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.toolbar .input { max-width: 260px; }
.tabs { display: flex; gap: .25rem; }
.tab {
    min-height: 40px; padding: 0 .875rem; border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--radius-sm); font: inherit; font-size: .875rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tab.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }

/* ---------- Hành động chính dính đáy trên mobile ---------- */
.sticky-actions {
    position: sticky; bottom: 0; padding: .75rem 0;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.sticky-actions .btn { width: 100%; }

.test-accounts ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); }
.test-accounts li { margin-bottom: .2rem; }

/* ---------- Màn hình rộng ---------- */
@media (min-width: 700px) {
    .who-name { display: inline; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .sticky-actions .btn { width: auto; min-width: 200px; }
}

@media (max-width: 699px) {
    .table-commands thead { display: none; }
    .table-commands tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
    .table-commands td { border: 0; padding: .15rem .25rem; }
    .table-commands td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .75rem; }
    .table-commands td:first-child { grid-column: 1 / -1; }
}

/* ---------- Lỗi Blazor ---------- */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--warn-soft); border-top: 1px solid rgba(245,158,11,.35); padding: .75rem 1.25rem; box-shadow: var(--shadow);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* =========================================================================
   Ô giải thích thu gọn (HelpNote)
   Mặc định đóng để trang gọn; mở ra thì đọc thoải mái trên cả điện thoại.
   ========================================================================= */
.help {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin: 0 0 1.25rem;
    overflow: hidden;
}

.help > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: 0 .875rem;
    cursor: pointer;
    list-style: none;
    font-size: .875rem;
    font-weight: 600;
    color: var(--muted);
    user-select: none;
}

.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover { background: var(--brand-soft); color: var(--text); }
.help[open] > summary { border-bottom: 1px solid var(--line); color: var(--text); }

.help-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .75rem;
    font-weight: 700;
}

.help[open] .help-icon { background: var(--brand); color: var(--on-brand); }

.help-body {
    padding: 1rem .875rem;
    font-size: .9rem;
    line-height: 1.6;
    max-width: 68ch;
}

.help-wide .help-body { max-width: none; }
.help-body > :last-child { margin-bottom: 0; }
.help-body ul, .help-body ol { padding-left: 1.2rem; margin: 0 0 .75rem; }
.help-body li { margin-bottom: .35rem; }
.help-body strong { color: var(--text); }
.help-body table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: .75rem; }
.help-body th, .help-body td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }

/* =========================================================================
   Đặt lịch — thiết kế cho điện thoại trước
   ========================================================================= */

/* Thanh tiến trình các bước */
.wizard-steps { display: flex; gap: .25rem; margin-bottom: 1.25rem; }
.wizard-step {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
}
.wizard-step.done { background: var(--brand); }
.wizard-step.current { background: var(--brand); opacity: .55; }
.wizard-caption { font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }

/* Thẻ chọn (dịch vụ, KTV, chi nhánh) — cả thẻ là vùng bấm, không phải cái ô vuông tí xíu */
.pick-list { display: grid; gap: .625rem; margin-bottom: 1.25rem; }

.pick {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 60px;
    padding: .75rem .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.pick:hover { border-color: var(--brand); }
.pick.selected { border-color: var(--brand); background: var(--brand-soft); }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pick-name { font-weight: 600; }
.pick-meta { font-size: .8rem; color: var(--muted); }
.pick-price { font-weight: 700; white-space: nowrap; }
.pick-check {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--line); display: grid; place-items: center;
    font-size: .8rem; color: transparent;
}
.pick.selected .pick-check { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }

/* Chọn ngày: dải ngang cuộn được bằng ngón tay */
.day-strip {
    display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.day-chip {
    flex: none; scroll-snap-align: start;
    min-width: 64px; min-height: 68px; padding: .5rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
}
.day-chip .dow { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.day-chip .dom { font-size: 1.15rem; font-weight: 700; }
.day-chip.selected { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.day-chip.selected .dow { color: rgba(255,255,255,.85); }
.day-chip:disabled { opacity: .4; cursor: not-allowed; }

/* Chọn giờ: lưới chip, 3 cột trên điện thoại */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1.25rem; }
.slot {
    min-height: var(--tap); padding: .5rem .25rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font: inherit; font-weight: 600; font-size: .95rem;
    cursor: pointer;
}
.slot:hover { border-color: var(--brand); }
.slot.selected { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.slot-empty {
    padding: 1.5rem 1rem; text-align: center; color: var(--muted);
    border: 1px dashed var(--line); border-radius: var(--radius-sm); margin-bottom: 1.25rem;
}

/* Tóm tắt trước khi xác nhận */
.summary-card { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.25rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .875rem; border-bottom: 1px solid var(--line); }
.summary-row:last-child { border-bottom: 0; }
.summary-row .label { color: var(--muted); font-size: .875rem; }
.summary-total { background: var(--brand-soft); font-weight: 700; }

/* Điều hướng bước — dính đáy màn hình điện thoại, ngón cái với tới được */
.wizard-nav {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; gap: .5rem; padding: .75rem 0;
    background: linear-gradient(to top, var(--bg) 65%, transparent);
}
.wizard-nav .btn { flex: 1; }
.wizard-nav .btn-back { flex: 0 0 auto; min-width: 64px; }

/* Mã đặt chỗ sau khi đặt xong */
.code-box {
    text-align: center; padding: 1.5rem 1rem; margin-bottom: 1.25rem;
    border: 2px dashed var(--brand); border-radius: var(--radius); background: var(--brand-soft);
}
.code-box .code {
    font-size: 2rem; font-weight: 800; letter-spacing: .12em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand-dark);
}

/* Lịch trong ngày của lễ tân — thẻ trên điện thoại, hàng trên máy tính */
.day-list { display: grid; gap: .625rem; }
.bk-card {
    display: grid; gap: .5rem; padding: .875rem;
    border: 1px solid var(--line); border-left: 4px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface);
}
.bk-card.st-1 { border-left-color: var(--warn); }   /* chờ xác nhận */
.bk-card.st-2 { border-left-color: var(--brand); }
.bk-card.st-3 { border-left-color: var(--ok); }
.bk-card.st-4 { border-left-color: #6b7f6f; }
.bk-card.st-5, .bk-card.st-6 { border-left-color: #6b6578; opacity: .6; }
.bk-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.bk-lines { font-size: .85rem; color: var(--muted); }
.bk-actions { display: flex; flex-wrap: wrap; gap: .375rem; }

@media (min-width: 700px) {
    .slot-grid { grid-template-columns: repeat(6, 1fr); }
    .wizard-nav { position: static; background: none; }
    .wizard-nav .btn { flex: 0 0 auto; min-width: 160px; }
}

@media (min-width: 900px) {
    .slot-grid { grid-template-columns: repeat(8, 1fr); }
}

/* =========================================================================
   Báo cáo — biểu đồ vẽ bằng CSS thuần.
   Không nạp thư viện biểu đồ: dữ liệu ở đây là vài chục cột, một trang báo cáo
   không đáng để tải thêm hàng trăm KB JavaScript và một điểm hỏng nữa.
   ========================================================================= */

/* Bốn con số lớn đầu trang */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.kpi {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.kpi-main { border-color: var(--brand); background: var(--brand-soft); }
.kpi-num { font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: .8rem; color: var(--muted); }
.kpi-note { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

/* Biểu đồ cột theo ngày */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; overflow-x: auto; padding-bottom: .25rem; }
.bar-col { flex: 1 0 22px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.bar-stack { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.bar {
    width: 45%; min-height: 2px; border-radius: 3px 3px 0 0;
    transition: opacity .12s ease;
}
.bar-cash { background: var(--brand); }
.bar-earned { background: #6ee7b7; }
.bar-col:hover .bar { opacity: .75; }
.bar-label { font-size: .65rem; color: var(--muted); white-space: nowrap; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--muted); margin-top: .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Bản đồ nhiệt giờ cao điểm */
.heat-wrap { overflow-x: auto; }
.heat { border-collapse: collapse; font-size: .7rem; }
.heat th { padding: 2px 4px; color: var(--muted); font-weight: 600; text-align: center; }
.heat td { padding: 0; }
.heat-cell {
    width: 22px; height: 22px; border-radius: 3px; display: block;
    background: var(--line);
}
.heat-row-label { text-align: right !important; padding-right: .5rem !important; white-space: nowrap; }

/* Thanh tỉ lệ nằm ngang (lấp đầy, xếp hạng) */
.meter { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.meter-name { flex: 0 0 90px; font-size: .875rem; }
.meter-track { flex: 1; height: 20px; background: var(--line); border-radius: 4px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--brand); border-radius: 4px; }
.meter-fill.warn { background: var(--warn); }
.meter-fill.low { background: #6b6578; }
.meter-value { flex: 0 0 auto; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 88px; text-align: right; }

@media (min-width: 700px) {
    .kpi-num { font-size: 1.9rem; }
    .bars { height: 200px; }
    .meter-name { flex-basis: 130px; }
}

/* =========================================================================
   Màn hình danh mục dài (Dịch vụ, Kỹ thuật viên)

   VẤN ĐỀ CŨ: nút "+ Thêm" nằm CUỐI danh sách, và form sửa hiện ra NGAY DƯỚI nút đó. Với 17 dịch vụ
   đã phải cuộn; với 60 dịch vụ thì muốn thêm một món phải cuộn hết trang, và sửa một món ở đầu danh
   sách thì bấm "Sửa" xong màn hình không đổi gì — form nằm tít dưới đáy, người dùng tưởng nút hỏng.

   CÁCH SỬA:
     1. Thanh công cụ DÍNH ở đầu: tiêu đề, ô tìm, nút thêm luôn trong tầm mắt dù cuộn tới đâu.
     2. Form sửa thành CỬA SỔ NỔI giữa màn hình, không phụ thuộc vị trí cuộn.
     3. Nhóm THU GỌN ĐƯỢC kèm số lượng, để lướt qua cấu trúc trước rồi mới mở đúng nhóm cần.
   ========================================================================= */

.list-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .85rem 0;
    margin-bottom: .5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.list-toolbar h1 { margin: 0; flex: none; }
.list-toolbar .spacer { flex: 1 1 auto; }

.list-search {
    flex: 1 1 220px;
    max-width: 340px;
    min-height: var(--tap);
    padding: 0 .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    /* 16px: nhỏ hơn thì iOS tự phóng to trang khi chạm vào ô nhập. */
    font-size: 1rem;
    font-family: inherit;
}

.list-search::placeholder { color: var(--muted); }
.list-search:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.list-count { color: var(--muted); font-size: .85rem; }

/* ---------- Nhóm thu gọn ---------- */

.group-block {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: .75rem;
    overflow: hidden;
}

.group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    background: rgba(212, 175, 55, .06);
    border-bottom: 1px solid var(--line);
}

.group-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.group-toggle .caret { color: var(--brand); font-size: .75rem; width: 1rem; flex: none; }
.group-toggle .group-name { text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.group-toggle .group-num { color: var(--muted); font-weight: 600; font-size: .8rem; }

.group-body { padding: .6rem; display: grid; gap: .5rem; }
.group-body:empty { display: none; }

/* Hàng trong nhóm: viền mảnh thay vì thẻ nổi, để 60 dòng không thành 60 hộp chen nhau. */
.group-body .row-card {
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
}

.group-body .row-card:hover { border-color: rgba(212, 175, 55, .35); }

/* ---------- Cửa sổ nổi để sửa ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(3px);
}

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 2rem 0 4rem;
    background: var(--surface);
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
    padding: 1.25rem;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.modal-head h2 { margin: 0; }

.modal-close {
    min-width: var(--tap);
    min-height: var(--tap);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.modal-close:hover { color: var(--text); border-color: var(--brand); }

/* Hàng nút của cửa sổ dính ở đáy: form dài (dịch vụ có 10 ô) thì nút Lưu luôn trong tầm tay. */
.modal-foot {
    position: sticky;
    bottom: -1.25rem;
    display: flex;
    gap: .5rem;
    margin: 1.25rem -1.25rem -1.25rem;
    padding: .85rem 1.25rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.modal-foot .btn-primary { margin-left: auto; }

@media (max-width: 639px) {
    /* Tiêu đề chiếm trọn một dòng, ô tìm và bộ đếm xuống dòng dưới. Nhồi cả ba lên một hàng ở
       390px thì bộ đếm bị đẩy ra khỏi mép màn hình. */
    .list-toolbar h1 { font-size: 1.25rem; flex: 1 0 100%; }
    .list-search { max-width: none; }
    .modal { padding: 0; }
    .modal-panel { margin: 0; min-height: 100dvh; border-radius: 0; border: 0; }
}

/* ---------- Chip nhiều lựa chọn ----------
   Dùng cho ô chọn kỹ năng của kỹ thuật viên. Trước đây mỗi dịch vụ là một hàng chiếm trọn chiều
   ngang: 17 dịch vụ đã phải cuộn trong hộp, 60 dịch vụ thì không dùng nổi. Chip xếp theo dòng nên
   cùng diện tích đó chứa được gấp năm sáu lần, và mắt quét một lượt là thấy hết đã tick những gì. */

.chip-group { margin-bottom: .85rem; }

.chip-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.chip-group-head .name {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
    min-height: 36px;
    padding: 0 .8rem;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.chip:hover { border-color: var(--brand); }

.chip.selected {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
}

/* =========================================================================
     4. MÀN HÌNH LỊCH HẸN
     Lễ tân cần đọc một thẻ trong hai giây: ai, số nào, làm gì, bao nhiêu tiền, đã chốt chưa.
     Vì vậy mọi thứ nằm trên thẻ chứ không giấu sau một cú bấm "xem chi tiết".
   ========================================================================= */

/* Hàng chọn khoảng thời gian + hàng bộ lọc.
   Trên điện thoại chúng TRƯỢT NGANG chứ không xuống dòng: mười cái nút xuống dòng thì đẩy danh sách
   xuống quá màn hình, mở trang lên chỉ thấy toàn nút. */
.scope-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }

.day-picker { display: flex; align-items: center; gap: .35rem; }
.day-picker .input { width: auto; }

.input-sm { min-height: 36px; padding: 0 .6rem; font-size: .85rem; width: auto; }

.filter-strip {
    display: flex;
    gap: .4rem;
    margin-bottom: .5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.filter-strip > * { flex: 0 0 auto; }
.filter-strip::-webkit-scrollbar { height: 4px; }
.filter-strip::-webkit-scrollbar-thumb { background: var(--brand-soft); border-radius: 2px; }

.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: 0 .75rem;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.chip-btn:hover { border-color: var(--brand); color: var(--text); }
.chip-btn .n { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .75; }

.chip-btn.selected {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--text);
    font-weight: 700;
}

/* Vạch ngày: danh sách trải dài hai tháng thì phải biết mình đang đọc ngày nào. */
.day-sep {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 1.4rem 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    letter-spacing: .02em;
}

.day-sep .muted { font-size: .82rem; font-weight: 400; }

.bk-who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Số điện thoại là thứ lễ tân bấm nhiều nhất — trên điện thoại nó gọi thẳng. */
.bk-phone {
    color: var(--brand);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px dotted rgba(212, 175, 55, .5);
}

.bk-phone:hover { color: var(--brand-dark); }

.bk-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    padding: .15rem 0;
}

.bk-line .svc { color: var(--text); font-weight: 600; }
.bk-line .price { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

.bk-meta { display: flex; flex-wrap: wrap; gap: .35rem; }

.tag {
    padding: .15rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--muted);
    font-size: .78rem;
}

.tag-ok { border-color: rgba(16, 185, 129, .35); color: var(--ok); }
.tag-warn { border-color: rgba(245, 158, 11, .4); color: var(--warn); }

.bk-notes {
    display: grid;
    gap: .25rem;
    padding: .5rem .65rem;
    border-left: 2px solid var(--brand-soft);
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--muted);
}

.bk-notes strong { color: var(--text); }

.modal-body { display: grid; gap: .75rem; }

/* Nút của việc không lấy lại được. Màu đỏ ở đây là để người ta khựng lại nửa giây. */
.btn-danger { background: var(--error); border-color: var(--error); color: #2b0a0a; font-weight: 700; }
.btn-danger:hover { background: #f87171; border-color: #f87171; color: #2b0a0a; }
.modal-foot .btn-danger { margin-left: auto; }

/* ---------- Lịch cũ: một DÒNG cho một lịch, bấm vào mới mở chi tiết ----------
   Màn hình tra cứu khác hẳn màn hình làm việc. Ở đây người ta lướt tìm một cái tên trong hàng trăm
   lịch, nên mỗi lịch phải gọn bằng một dòng; chi tiết và nhật ký nằm trong cửa sổ mở ra sau. */

.bk-rows { display: grid; gap: .3rem; }

.bk-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bk-row:hover { border-color: var(--brand); }
.bk-row.st-1 { border-left-color: var(--warn); }
.bk-row.st-2 { border-left-color: var(--brand); }
.bk-row.st-3 { border-left-color: var(--ok); }
.bk-row.st-4 { border-left-color: #6b7f6f; }
.bk-row.st-5, .bk-row.st-6 { border-left-color: #6b6578; }

.bk-row .r-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }

/* min-width: 0 là thứ duy nhất cho phép ô giữa co lại; thiếu nó thì tên dài đẩy giá tiền ra khỏi
   màn hình điện thoại thay vì bị cắt bằng dấu ba chấm. */
.bk-row .r-main { flex: 1 1 auto; min-width: 0; display: grid; }
.bk-row .r-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-row .r-svc { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-row .r-right { flex: none; display: flex; align-items: center; gap: .5rem; }
.bk-row .r-money { font-variant-numeric: tabular-nums; font-size: .85rem; }

/* ---------- Nhật ký thay đổi ---------- */

.tl-title { margin: .5rem 0 .25rem; font-size: .95rem; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 .75rem; border-left: 2px solid var(--brand-soft); display: grid; gap: .5rem; }

.timeline li { display: grid; gap: .1rem; position: relative; font-size: .85rem; }

.timeline li::before {
    content: "";
    position: absolute;
    left: -1.08rem;
    top: .45rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

.tl-when { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.tl-who { color: var(--muted); margin-left: .35rem; }

/* Bốn ô số liệu thấp hơn trên điện thoại — chúng là thông tin liếc qua, không phải nội dung chính. */
@media (max-width: 639px) {
    .stat-grid-tight { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .stat-grid-tight .stat { padding: .55rem .7rem; }
    .stat-grid-tight .stat-num { font-size: 1.25rem; }
    .stat-grid-tight .stat-label { font-size: .72rem; }

    .bk-row { gap: .5rem; padding: .5rem .55rem; }
    .bk-row .r-right { flex-direction: column; align-items: flex-end; gap: .15rem; }
    .bk-row .r-right .badge { font-size: .68rem; }

    .day-sep { margin: 1rem 0 .45rem; font-size: .88rem; }
    .bk-card { padding: .7rem; }
    .bk-line .price { margin-left: auto; }
}

/* Ô sửa tên lệnh Telegram: dấu "/" đứng ngoài ô nhập để không ai gõ nhầm nó vào trong. */
.cmd-edit { display: inline-flex; align-items: center; gap: .15rem; }
.cmd-edit .slash { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cmd-name {
    width: 9.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
}
.cmd-name:disabled { color: var(--muted); background: var(--bg); cursor: not-allowed; }

/* Hàng dịch vụ: tên tiếng Anh và giá phải đọc được ngay, không phải mở hộp thoại mới thấy. */
.row-en { color: var(--brand); font-size: .85rem; }
.row-price { color: var(--text); font-variant-numeric: tabular-nums; }
.row-was { text-decoration: line-through; opacity: .65; margin-left: .3rem; }