/* =========================================================================
   Nha Khoa Việt Hàn CRM — Admin UI v2
   Một file CSS duy nhất, không CDN, server local first.
   Giữ nguyên toàn bộ class name các view đã dùng từ T003 → T010.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* brand & neutrals — Nha Khoa Việt Hàn brand:
       white + black + dark blue #0042ab; bg #edf5fc */
    --color-bg: #edf5fc;
    --color-bg-elevated: #f5f9fd;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f9fd;
    --color-border: #d8e3f1;
    --color-border-strong: #b8c8de;
    --color-text: #0f172a;
    --color-text-soft: #1e293b;
    --color-muted: #5b6a85;
    --color-muted-soft: #94a3b8;

    /* accents */
    --color-primary: #0042ab;
    --color-primary-strong: #003285;
    --color-primary-soft: #d6e4f7;
    --color-primary-softer: #edf5fc;
    --color-primary-ring: rgba(0, 66, 171, 0.20);
    --color-info: #1d5fcf;
    --color-info-soft: #dbe7f8;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-success: #16a34a;
    --color-success-soft: #dcfce7;

    /* radius / shadow / transition */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-card: 0 6px 20px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-pop: 0 18px 40px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-focus: 0 0 0 4px var(--color-primary-ring);
    --shadow-brand: 0 12px 28px rgba(0, 66, 171, 0.22);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;

    --transition-fast: 120ms ease;
    --transition: 160ms ease;
    --transition-slow: 240ms ease;

    --sidebar-width: 232px;
    --topbar-height: 64px;
    --content-max: 1640px;
    --side-panel-width: 360px;
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--color-bg);
    background-image:
        radial-gradient(at 0% 0%, rgba(0, 66, 171, 0.06), transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 66, 171, 0.04), transparent 45%);
    color: var(--color-text);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

img,
svg {
    max-width: 100%;
    display: block;
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted-soft);
    background-clip: padding-box;
    border: 2px solid transparent;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Desktop: hide elements marked mobile-only.
 * Note: .icon-button uses display: inline-flex which is declared later in
 * this file; without !important the cascade would re-show the hamburger
 * on desktop. Keep this rule terse and authoritative. */
.mobile-only {
    display: none !important;
}

/* -------------------------------------------------------------------------
   3. Public / auth shell (welcome page, login, 404)
   ------------------------------------------------------------------------- */
.public-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(0, 66, 171, 0.18), transparent 60%),
        radial-gradient(900px 540px at -10% 110%, rgba(0, 66, 171, 0.10), transparent 60%),
        linear-gradient(180deg, #edf5fc 0%, #f5f9fd 60%, #ffffff 100%);
}

.public-shell {
    width: min(880px, 100%);
}

.welcome-panel,
.login-panel,
.panel,
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.welcome-panel {
    padding: var(--space-7) var(--space-6);
    background:
        linear-gradient(155deg, rgba(0, 66, 171, 0.08) 0%, rgba(0, 66, 171, 0.03) 60%, transparent 100%),
        var(--color-surface);
    text-align: center;
}

.welcome-panel h1 {
    margin: var(--space-3) 0 var(--space-3);
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.welcome-panel p {
    max-width: 640px;
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

.public-actions,
.action-list,
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.public-actions {
    margin-top: var(--space-5);
    justify-content: center;
}

.meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 520px;
    margin: var(--space-6) auto 0;
}

.meta-list div {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.meta-list dt {
    color: var(--color-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.meta-list dd {
    margin: var(--space-1) 0 0;
    font-weight: 700;
    color: var(--color-text);
}

/* -------- Login page -------- */
.login-panel {
    width: min(440px, 100%);
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.12),
        0 2px 6px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, #1d5fcf 50%, #4f8de7 100%);
}

.login-header {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    text-align: center;
    justify-items: center;
}

.login-header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.01em;
}

.login-header p {
    margin: 0;
    color: var(--color-muted);
}

.login-form {
    display: grid;
    gap: var(--space-4);
}
.login-mode-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 3px;
    background: var(--color-surface-soft, #f1f4fa);
    border-radius: 8px;
}
.login-mode-tab {
    flex: 1;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-soft, #5b6577);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.login-mode-tab:hover { color: var(--color-text, #1b2433); }
.login-mode-tab.is-active {
    background: #fff;
    color: var(--color-primary, #2b6ef6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.login-picker-search {
    margin-bottom: 6px;
}
.login-picker-select {
    height: auto;
    padding: 6px;
    font-size: 13.5px;
    line-height: 1.4;
    border-radius: 6px;
}
.login-picker-select option {
    padding: 4px 6px;
    line-height: 1.45;
}
.login-picker-select option:checked {
    background: var(--color-primary-softer, #e8f0ff);
    color: var(--color-primary-strong, #1d4ed8);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. Forms (label/input/select/textarea)
   ------------------------------------------------------------------------- */
.field {
    display: grid;
    gap: var(--space-2);
}
/* HTML5 [hidden] attribute must beat .field {display:grid} — specificity tie otherwise. */
.field[hidden] { display: none; }

.field label,
.compact-form label {
    font-weight: 600;
    color: var(--color-text-soft);
}

.compact-form label > span {
    font-size: 13px;
    color: var(--color-text-soft);
    font-weight: 600;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
input[type="tel"],
.field input,
select,
textarea,
.compact-form input,
.filter-bar input,
.filter-bar select,
.row-edit input,
.row-edit select,
.row-edit textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
input[type="tel"],
.field input,
select,
.compact-form input,
.filter-bar input,
.filter-bar select {
    height: 40px;
    padding: 0 var(--space-3);
}

.field input {
    height: 44px;
    padding: 0 var(--space-4);
    font-size: 15px;
}

textarea {
    min-height: 84px;
    padding: var(--space-3);
    resize: vertical;
    line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-muted-soft);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-surface);
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.field-error {
    margin: 0;
    color: var(--color-danger);
    font-size: 12.5px;
    font-weight: 600;
}

.button-full {
    width: 100%;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
    white-space: nowrap;
}

.button {
    padding: 0 var(--space-4);
    font-size: 14px;
    letter-spacing: 0.01em;
}

.button:focus-visible,
.icon-button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.button-primary {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, var(--shadow-sm);
}

.button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 14px rgba(0, 66, 171, 0.32);
    color: #ffffff;
}

.button-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.button-secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-soft);
    box-shadow: var(--shadow-xs);
}

.button-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    background: var(--color-primary-softer);
}

.button-secondary:active {
    background: var(--color-primary-soft);
}

.icon-button {
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-soft);
}

.icon-button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    background: var(--color-primary-softer);
}

/* -------------------------------------------------------------------------
   6. Badges / pills
   ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 22px;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    flex: 0 0 auto;
}

.badge-success {
    background: var(--color-success-soft);
    color: #15803d;
}

.badge-warning {
    background: var(--color-warning-soft);
    color: #92400e;
}

.badge-danger {
    background: var(--color-danger-soft);
    color: #991b1b;
}

.badge-muted {
    background: #eef2f7;
    color: var(--color-muted);
}

.badge-info {
    background: var(--color-info-soft);
    color: #1d4ed8;
}

/* small "no-dot" variant when used as a counter/tag */
.detail-tabs span,
.panel-header .badge.badge-muted {
    /* keep the dot for clarity; do nothing */
}

/* -------------------------------------------------------------------------
   7. Flash messages
   ------------------------------------------------------------------------- */
.flash-list {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    font-weight: 500;
}

.flash-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.flash-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.flash[data-dismissable] {
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   8. Admin shell layout
   ------------------------------------------------------------------------- */
.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* ---- Sidebar ---- */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--color-border);
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.brand {
    display: grid;
    place-items: center;
    padding: var(--space-3) var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

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

.brand-logo {
    height: 56px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 5px rgba(0, 66, 171, 0.22));
}

.brand-mark,
.avatar {
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-weight: 800;
    flex: 0 0 auto;
}

.brand-mark {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1d5fcf 60%, #4f8de7 100%);
    box-shadow: var(--shadow-brand);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary-strong), #0f172a);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.nav-list {
    display: grid;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

.nav-group {
    display: grid;
    gap: 2px;
}

.nav-group-title {
    padding: 0 var(--space-3) var(--space-1);
    color: var(--color-muted-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-weight: 600;
    font-size: 14px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-muted-soft);
    opacity: 0.55;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    flex: 0 0 auto;
}

.nav-item:hover {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.nav-item:hover::before {
    background: var(--color-primary);
    opacity: 1;
}

.nav-item.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.nav-item.is-active::before {
    background: var(--color-primary);
    opacity: 1;
    transform: scale(1.15);
}

/* ---- Topbar ---- */
.admin-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--topbar-height);
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* Quick-search is the "spacer" that fills the middle and pushes the
 * user-menu + logout cluster to the right edge of the topbar. */
.quick-search {
    flex: 1 1 auto;
    max-width: 560px;
    margin-right: auto;
    position: relative;
}

/* Right-aligned account cluster */
.topbar > .user-menu,
.topbar > form:last-child {
    flex: 0 0 auto;
}

.quick-search::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-color: var(--color-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat center / contain;
    pointer-events: none;
}

.quick-search input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-4) 0 var(--space-7);
    background: var(--color-surface-soft);
}

.quick-search input:focus {
    background: var(--color-surface);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3) 4px 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

/* ---- Main content ---- */
.admin-content {
    padding: var(--space-3) var(--space-3) var(--space-4);
    max-width: none;
    margin: 0;
    width: 100%;
}
/* UI012: page-header bỏ đồng bộ trên TẤT CẢ admin pages — title đã có ở sidebar */
.admin-content > .page-header { display: none; }

/* Slim, single-line breadcrumb. The last item duplicates the page H1
 * so we hide it (CSS-only, no view rewrite) and use "·" as separator
 * for a more compact, modern look than "/" stacks. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-2);
    color: var(--color-muted-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.breadcrumb span[aria-hidden="true"] {
    color: var(--color-border-strong);
    font-weight: 400;
}

/* Hide the trailing "current page" item + its preceding separator —
 * the H1 already says it. */
.breadcrumb > span:nth-last-child(1),
.breadcrumb > span:nth-last-child(2)[aria-hidden="true"] {
    display: none;
}

/* If breadcrumb only has one item (e.g. "Admin"), don't render the
 * standalone uppercase label awkwardly. */
.breadcrumb:has(> span:only-child) {
    display: none;
}

/* -------------------------------------------------------------------------
   9. Page header & panel header
   ------------------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

/*
 * Page title block. Eyebrow + H1 sit on the SAME baseline so the title
 * reads naturally on one line, e.g. "Điều trị · Treatment workflow",
 * instead of stacking 3 lines (breadcrumb + eyebrow + h1) for one short
 * Vietnamese word.
 */
.page-header > div:first-child {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    min-width: 0;
}

.page-header h1 {
    order: 1;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--color-text);
}

.eyebrow {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* In a page-header the eyebrow always renders AFTER the H1, joined by
 * a soft middot, so the title reads as one balanced line. Outside the
 * page-header (e.g. login welcome panel) the eyebrow keeps its plain
 * top-of-block role. */
.page-header .eyebrow {
    order: 2;
    color: var(--color-primary-strong);
}

.page-header .eyebrow::before {
    content: "·";
    margin-right: 6px;
    color: var(--color-border-strong);
    font-weight: 400;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.panel-header h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.panel-subtitle,
.table-note,
.lookup-group span {
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.panel-subtitle {
    margin: 4px 0 0;
}

/* -------------------------------------------------------------------------
   10. Stat grid / dashboard grid
   ------------------------------------------------------------------------- */
.stat-grid,
.dashboard-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* Auto-fit để 4–6 KPI hiển thị đẹp, không vỡ khi viewport narrow */
.stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Default dashboard-grid: 1 row có 1 panel chính + 1 panel phụ */
.dashboard-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
}

/* Variant balanced: hai panel cùng độ nặng nội dung */
.dashboard-grid.is-balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Variant triple: 3 cột nhỏ (KPI strip phụ / quick filter strip) */
.dashboard-grid.is-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-info);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

.stat-card span {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.stat-card strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Currency-heavy stat values can be very long — give them a fluid size */
.appointment-stat-grid .stat-card strong {
    font-size: clamp(18px, 1.6vw, 24px);
}

.stat-info::before { background: var(--color-info); }
.stat-success::before { background: var(--color-success); }
.stat-warning::before { background: var(--color-warning); }
.stat-danger::before { background: var(--color-danger); }

.employee-stat-grid .stat-card strong,
.patient-stat-grid .stat-card strong,
.appointment-stat-grid .stat-card strong {
    font-size: 24px;
}

/* -------------------------------------------------------------------------
   11. Panels (cards)
   ------------------------------------------------------------------------- */
.panel {
    padding: var(--space-5);
    transition: box-shadow var(--transition);
}

.panel:hover {
    box-shadow: var(--shadow-card), 0 1px 0 rgba(15, 118, 110, 0.04);
}

/* -------------------------------------------------------------------------
   12. Empty state
   ------------------------------------------------------------------------- */
.empty-state {
    margin-top: var(--space-4);
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-muted);
    text-align: center;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   13. Schedule / alert / system status (dashboard widgets)
   ------------------------------------------------------------------------- */
.schedule-list,
.alert-list,
.system-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.schedule-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.schedule-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.schedule-item time {
    color: var(--color-primary-strong);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

.schedule-item div,
.schedule-item span {
    display: grid;
}

.schedule-item span {
    color: var(--color-muted);
    font-size: 13px;
}

.alert-row {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--color-info);
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-weight: 500;
}

.alert-info {
    border-left-color: var(--color-info);
    background: var(--color-info-soft);
    color: #1d4ed8;
}

.alert-warning {
    border-left-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: #92400e;
}

.alert-danger {
    border-left-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: #991b1b;
}

.system-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.system-list div:last-child {
    border-bottom: 0;
}

.system-list dt {
    color: var(--color-muted);
}

.system-list dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   14. Filter bar / compact form / inline panels
   ------------------------------------------------------------------------- */
.filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

/* Sticky variant cho trang nhiều dòng — filter bám trên đầu khi scroll.
   UI012: topbar đã bỏ → top = 0 (không cộng topbar-height nữa). */
.filter-bar.is-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: var(--shadow-sm);
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(245, 249, 253, 0.92);
}

/* Compact variant cho ô filter nhỏ (drawer/modal) */
.filter-bar.is-compact {
    padding: var(--space-2);
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.employee-filter,
.patient-filter {
    grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(140px, 0.8fr)) auto;
}

.appointment-filter {
    grid-template-columns: minmax(140px, 0.8fr) repeat(3, minmax(150px, 0.9fr)) minmax(180px, 1.1fr) auto;
}

.compact-form {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.compact-form h3 {
    margin: 0;
    padding-bottom: var(--space-1);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.compact-form label {
    display: grid;
    gap: 6px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.inline-panel {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

/* -------------------------------------------------------------------------
   15. Lookup module
   ------------------------------------------------------------------------- */
.lookup-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.lookup-list {
    display: grid;
    gap: var(--space-2);
    max-height: 460px;
    overflow: auto;
    padding-right: var(--space-1);
}

.lookup-group {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.lookup-group:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.lookup-group.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.lookup-group strong {
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   16. Module grids (employee/patient/appointment)
   ------------------------------------------------------------------------- */
/*
 * Default = single column, table panel takes full content width so wide
 * tables (employees/patients/appointments/treatments/services/finance/care)
 * render all columns without horizontal scroll. The "create" / side panel
 * stacks BELOW the table. On ultra-wide screens (≥1500px) the side panel
 * docks back to the right and stays sticky so receptionists/CSKH still get
 * quick-create without leaving the page.
 */
.employee-grid,
.patient-grid,
.appointment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-5);
}

.appointment-create-panel {
    position: static;
}

@media (min-width: 1500px) {
    .employee-grid,
    .patient-grid,
    .appointment-grid {
        grid-template-columns: minmax(0, 1fr) var(--side-panel-width);
    }

    .appointment-create-panel {
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-4));
        max-height: calc(100vh - var(--topbar-height) - var(--space-6));
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

/* Secondary stacked grid (e.g. care: call history + reminders) — pure
 * 2 cards side by side on wide screens, stacked otherwise. */
.appointment-grid.secondary-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1180px) {
    .appointment-grid.secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointment-grid.secondary-grid .appointment-create-panel {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Lookup module: keep its own classic 2-pane (groups + values) but go
 * single column on tablet/mobile so the values table breathes. */
@media (max-width: 1180px) {
    .lookup-grid {
        grid-template-columns: 1fr;
    }
}

.appointment-inline-actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.day-board-panel {
    margin-top: var(--space-5);
}

.day-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.day-column {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-height: 160px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.day-column h3 {
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.day-card {
    display: grid;
    gap: 4px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.day-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.day-card time {
    color: var(--color-primary-strong);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.warning-text {
    color: var(--color-warning);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   17. Data table
   ------------------------------------------------------------------------- */
/*
 * Table system goals:
 * - Tables don't bleed into other tables / panels (the panel/.table-wrap
 *   border-radius clips overflow cleanly).
 * - When the table is wider than its container, a fade gradient hints
 *   "scroll horizontally" instead of a hard cut.
 * - On tablet (≤1180), the first column becomes sticky so user keeps
 *   patient/appointment context while scanning right.
 * - On mobile (≤640), each row turns into a stacked card (data-label
 *   pseudo-content injected by JS) so no horizontal scroll is needed.
 */
/*
 * .table-wrap: outer wrapper với border/radius. Inner div scroll horizontally.
 * Cấu trúc HTML cũ chỉ có 1 .table-wrap > table; để không phá HTML, dùng kỹ thuật:
 *  - wrapper là scroll container, có border + overflow:auto.
 *  - pseudo fade dùng `position:sticky` để di chuyển theo scroll content
 *    (block-level pseudo cần inline-block hack — chuyển sang dùng box-shadow inset
 *    là sạch nhất, không cần pseudo).
 * Box-shadow inset hint scroll: bóng nhẹ ở mép phải/trái khi data-scroll attr set,
 * không có "viền kẹt" hay khe sáng giữa scrollbar và border.
 */
.table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    -webkit-overflow-scrolling: touch;
    transition: box-shadow var(--transition-fast);
}

/* Fade hint dùng box-shadow inset, không tạo overlay đứng yên gây "kẹt viền".
   Shadow chỉ xuất hiện khi JS set data-scroll. */
.table-wrap[data-scroll="right"] {
    box-shadow: var(--shadow-xs), inset -16px 0 16px -12px rgba(15, 23, 42, 0.08);
}
.table-wrap[data-scroll="left"] {
    box-shadow: var(--shadow-xs), inset 16px 0 16px -12px rgba(15, 23, 42, 0.08);
}
.table-wrap[data-scroll="both"] {
    box-shadow: var(--shadow-xs),
        inset -16px 0 16px -12px rgba(15, 23, 42, 0.08),
        inset 16px 0 16px -12px rgba(15, 23, 42, 0.08);
}

/* Đảm bảo data-table luôn fill toàn chiều ngang container khi không vượt min-width,
   tránh để lộ background container ở mép phải tạo "đường sáng". */
.table-wrap > .data-table {
    width: 100%;
}

.data-table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.data-table th,
.data-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border-strong);
    white-space: nowrap;
}

.data-table tbody tr {
    transition: background-color var(--transition-fast);
}

.data-table tbody tr:nth-child(even) {
    background: rgba(237, 245, 252, 0.45);
}

.data-table tbody tr:hover {
    background: var(--color-primary-softer);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table td strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 2px;
    line-height: 1.35;
}

.data-table td > .badge {
    margin-top: 2px;
}

.data-table td > .badge + .table-note,
.data-table td > .table-note + .badge {
    margin-top: 4px;
}

.data-table code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    word-break: break-all;
}

.table-note {
    display: block;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Money / numeric columns: align right, monospace digits */
.data-table .num,
.data-table td.num,
.data-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Module-specific min-widths. Set on the table itself so the .table-wrap
 * can scroll them when the viewport is genuinely too narrow. Numbers tuned
 * so each table fits without scroll on 1280px+ desktop.
 */
.employee-table { min-width: 1100px; }
.patient-table  { min-width: 1080px; }
.appointment-table { min-width: 1180px; }

/* Larger row gutter for appointment/treatment tables (lots of secondary text) */
.appointment-table th,
.appointment-table td,
.employee-table th,
.employee-table td,
.patient-table th,
.patient-table td {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* Sticky first column on tablet so user keeps row context while scrolling.
   Dùng border-right để đường viền liền mạch với border-bottom của row,
   không lệch tạo "khe sáng" như box-shadow trước đây. */
@media (max-width: 1180px) {
    .data-table thead th:first-child,
    .data-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
    }

    .data-table thead th:first-child {
        background: var(--color-surface-soft);
        z-index: 3;
    }

    .data-table tbody tr:nth-child(even) td:first-child {
        background: #f1f7fd;
    }

    .data-table tbody tr:hover td:first-child {
        background: var(--color-primary-softer);
    }
}

/* -------------------------------------------------------------------------
   18. Row actions (details/summary popover)
   ------------------------------------------------------------------------- */
.row-actions {
    position: relative;
    display: inline-block;
}

.row-actions > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-strong);
    font-weight: 700;
    list-style: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.row-actions > summary::-webkit-details-marker {
    display: none;
}

.row-actions > summary::after {
    content: "▾";
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.row-actions[open] > summary::after {
    transform: rotate(180deg);
}

.row-actions > summary:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-softer);
}

.row-actions[open] > summary {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-focus);
}

/*
 * Row-action popover.
 * Note: parent .table-wrap has overflow: auto for horizontal scroll, which
 * would clip absolute popovers. We handle it by anchoring the popover to
 * the right edge of the row-actions trigger and keeping it inside the
 * trigger's relative box; on smaller screens we promote it to a fixed
 * panel so it always stays on screen.
 */
.row-edit,
.employee-action-panel,
.patient-action-panel,
.appointment-action-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    min-width: 320px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop);
    animation: row-pop 140ms ease;
}

.employee-action-panel,
.patient-action-panel,
.appointment-action-panel {
    min-width: 640px;
    max-width: min(760px, calc(100vw - 80px));
    max-height: min(640px, calc(100vh - 140px));
    overflow: auto;
    padding: var(--space-5);
}

/*
 * On laptop ≤1280px, .table-wrap may scroll horizontally. Lock the popover
 * to the viewport so it never disappears off-screen with the scroll.
 */
@media (max-width: 1280px) {
    .employee-action-panel,
    .patient-action-panel,
    .appointment-action-panel {
        position: fixed;
        top: calc(var(--topbar-height) + var(--space-3));
        right: var(--space-4);
        left: auto;
        min-width: min(560px, calc(100vw - var(--sidebar-width) - var(--space-7)));
        max-height: calc(100vh - var(--topbar-height) - var(--space-6));
    }
}

@keyframes row-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employee-actions,
.patient-actions,
.appointment-actions {
    position: relative;
}

/* -------------------------------------------------------------------------
   19. Detail tabs / checkbox grid / sensitive placeholder / timeline
   ------------------------------------------------------------------------- */
.detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: var(--space-1);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
}

.detail-tabs span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-3);
    border-radius: 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.detail-tabs span:hover {
    background: var(--color-surface);
    color: var(--color-text-soft);
}

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

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox-grid label:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-softer);
}

.checkbox-grid input {
    width: 16px;
    height: 16px;
}

.sensitive-placeholder {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-size: 13px;
}

.timeline-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px dashed var(--color-border-strong);
}

.timeline-list div {
    position: relative;
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.timeline-list div::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-surface);
}

.timeline-list span {
    color: var(--color-muted);
    font-size: 13px;
}

/* -------------------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-filter,
    .patient-filter,
    .appointment-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar > button {
        grid-column: -2 / -1;
    }
}

@media (max-width: 960px) {
    :root {
        --sidebar-width: 0px;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: 264px; /* drawer width on mobile is independent of desktop --sidebar-width */
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: var(--shadow-pop);
    }

    .admin-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .admin-shell.sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(2px);
    }

    .mobile-only {
        display: inline-flex !important;
    }

    .stat-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .employee-filter,
    .patient-filter,
    .appointment-filter {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .employee-action-panel,
    .patient-action-panel,
    .appointment-action-panel {
        position: fixed;
        top: 88px;
        left: var(--space-3);
        right: var(--space-3);
        min-width: 0;
        max-width: none;
    }

    .quick-search {
        display: none;
    }

    .admin-content {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/*
 * Mobile data-table → stacked card pattern.
 * The "data-label" attribute is injected by assets/js/app.js from the
 * matching <th> text; CSS reveals it before each cell so each row reads
 * top-to-bottom as a vertical card. No view rewrites required.
 */
@media (max-width: 720px) {
    .table-wrap {
        overflow-x: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .table-wrap[data-scroll]::after,
    .table-wrap[data-scroll]::before {
        display: none;
    }

    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table {
        min-width: 0;
        border: 0;
    }

    .data-table thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .data-table tbody tr {
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        box-shadow: var(--shadow-xs);
    }

    .data-table tbody tr:nth-child(even) {
        background: var(--color-surface);
    }

    .data-table tbody tr:hover {
        background: var(--color-surface);
    }

    .data-table tbody td {
        padding: var(--space-2) 0;
        border-bottom: 1px dashed var(--color-border);
        text-align: left;
    }

    .data-table tbody td:last-child {
        border-bottom: 0;
    }

    .data-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        color: var(--color-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Sticky-first-column rule from tablet must NOT apply here */
    .data-table thead th:first-child,
    .data-table tbody td:first-child {
        position: static;
        box-shadow: none;
        background: transparent;
    }

    /* Empty-state row that spans all columns shouldn't get the data-label
     * label rendered in front of the message. */
    .data-table tbody td.empty-state::before,
    .data-table tbody td[colspan]::before {
        content: "";
        display: none;
    }

    /* Action popover: full-width bottom sheet */
    .row-actions {
        display: block;
        width: 100%;
    }

    .row-actions > summary {
        width: 100%;
        justify-content: center;
    }

    .employee-action-panel,
    .patient-action-panel,
    .appointment-action-panel,
    .row-edit {
        position: fixed;
        top: auto;
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        max-width: none;
        min-width: 0;
        max-height: 80vh;
    }
}

@media (max-width: 640px) {
    .topbar,
    .admin-content,
    .welcome-panel {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .meta-list {
        grid-template-columns: 1fr;
    }

    .user-menu span:last-child {
        display: none;
    }

    .page-header {
        align-items: flex-start;
    }

    .page-header h1 {
        font-size: 22px;
    }

    .panel {
        padding: var(--space-4);
    }

    .stat-card {
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    }

    .stat-card strong {
        font-size: 22px;
    }
}

/* -------------------------------------------------------------------------
   21. Brand assets — login/welcome logo + app loader splash
   ------------------------------------------------------------------------- */
.login-logo,
.welcome-logo {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto var(--space-3);
    filter: drop-shadow(0 2px 6px rgba(0, 66, 171, 0.20));
}

.welcome-logo {
    height: 56px;
    max-width: 260px;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    gap: var(--space-4);
    background:
        radial-gradient(900px 540px at 50% 30%, rgba(0, 66, 171, 0.10), transparent 60%),
        linear-gradient(180deg, #edf5fc 0%, #ffffff 100%);
    transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.app-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loader-inner {
    display: grid;
    place-items: center;
    gap: var(--space-4);
    text-align: center;
}

.app-loader-ring {
    position: relative;
    width: 152px;
    height: 152px;
    display: grid;
    place-items: center;
}

.app-loader-ring::before,
.app-loader-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
}

.app-loader-ring::before {
    border-color: var(--color-primary-soft);
}

.app-loader-ring::after {
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    animation: app-loader-spin 950ms linear infinite;
    filter: drop-shadow(0 2px 6px rgba(0, 66, 171, 0.25));
}

.app-loader-ring img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgba(0, 66, 171, 0.25), 0 0 0 4px var(--color-surface);
}

.app-loader-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-loader-label::after {
    content: "";
    display: inline-block;
    width: 1.4em;
    text-align: left;
    animation: app-loader-dots 1.4s steps(4, end) infinite;
}

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

@keyframes app-loader-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
    .app-loader-ring::after {
        animation: none;
        border-top-color: var(--color-primary);
    }

    .app-loader-label::after {
        animation: none;
        content: "";
    }
}

/* -------------------------------------------------------------------------
   23. Dashboard metric lists / divider / compact header / misc widgets
   ------------------------------------------------------------------------- */
.metric-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.metric-list.compact {
    gap: 4px;
}

.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.metric-row:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-softer);
}

.metric-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.metric-row strong {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
}

.metric-row span {
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.metric-row b {
    color: var(--color-primary-strong);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
}

.metric-list.compact .metric-row {
    padding: 6px var(--space-3);
    background: transparent;
    border-color: transparent;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}

.metric-list.compact .metric-row:hover {
    background: var(--color-primary-softer);
    border-bottom-color: var(--color-primary);
}

.metric-list.compact .metric-row:last-child {
    border-bottom: 0;
}

.metric-columns {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .metric-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Panel divider used inside long create-panels (care/services) */
.panel-divider {
    margin: var(--space-5) 0 var(--space-4);
    border: 0;
    border-top: 1px dashed var(--color-border-strong);
}

.panel-header.compact-panel-header {
    margin-top: 0;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 0;
}

.panel-header.compact-panel-header h2 {
    font-size: 15px;
}

/* Service classifier result chip */
.classifier-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-md);
    background: var(--color-primary-softer);
}

.classifier-result strong {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-strong);
}

/* Inline date filter on dashboard header */
.date-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.date-action input[type="date"] {
    height: 40px;
    width: 160px;
}

/* Panel that hosts a wide table (e.g. .appointment-list-panel): on
 * desktop+ allow the table-wrap to span the panel without inner padding
 * cutting columns; reset side padding on the wrap area only. */
.appointment-list-panel .table-wrap {
    margin-left: calc(-1 * var(--space-1));
    margin-right: calc(-1 * var(--space-1));
}

/* Panel-subtitle inside a large table panel: keep tone consistent */
.appointment-list-panel .panel-subtitle {
    max-width: 720px;
}

/* Form-actions inside compact-form should not stretch on narrow panel */
.compact-form .form-actions {
    margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------
   23. UI System v3 — drawer, modal, toast, confirm, popover, timeline, skeleton
   Bổ sung sau UI002. Class tiền tố `ui-` để không đè class hiện có.
   ------------------------------------------------------------------------- */

/* Tokens phụ trợ */
:root {
    --ui-drawer-width: 520px;
    --ui-drawer-width-wide: 720px;
    --ui-modal-width: 640px;
    --ui-modal-width-lg: 880px;
    --ui-overlay-bg: rgba(15, 23, 42, 0.42);
    --ui-z-overlay: 80;
    --ui-z-drawer: 90;
    --ui-z-modal: 100;
    --ui-z-toast: 120;
    --ui-z-popover: 70;
}

/* 23.1 Overlay chung */
.ui-overlay {
    position: fixed;
    inset: 0;
    background: var(--ui-overlay-bg);
    z-index: var(--ui-z-overlay);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.ui-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
body.ui-no-scroll {
    overflow: hidden;
}

/* 23.2 Right Drawer */
.ui-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--ui-drawer-width), 96vw);
    max-width: 96vw;
    background: var(--color-surface);
    box-shadow: -22px 0 50px rgba(15, 23, 42, 0.18);
    z-index: var(--ui-z-drawer);
    transform: translateX(100%);
    transition: transform 240ms ease;
    display: flex;
    flex-direction: column;
    will-change: transform;
    outline: none;
}
.ui-drawer.is-wide {
    width: min(var(--ui-drawer-width-wide), 96vw);
}
.ui-drawer.is-open {
    transform: translateX(0);
}
.ui-drawer-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.ui-drawer-header h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.ui-drawer-header .ui-drawer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 13px;
    color: var(--color-muted);
}
.ui-drawer-header .ui-drawer-meta b {
    color: var(--color-text);
    font-weight: 600;
}
.ui-drawer-header .ui-drawer-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-drawer-close {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ui-drawer-close:hover {
    background: var(--color-primary-softer);
    color: var(--color-primary-strong);
}
.ui-drawer-tabs {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow-x: auto;
    flex: 0 0 auto;
    scrollbar-width: thin;
}
.ui-drawer-tabs button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 13px;
    padding: var(--space-3) var(--space-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ui-drawer-tabs button:hover {
    color: var(--color-primary-strong);
}
.ui-drawer-tabs button.is-active {
    color: var(--color-primary-strong);
    border-bottom-color: var(--color-primary);
}
.ui-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
    background: var(--color-bg-elevated);
}
.ui-drawer-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.ui-drawer-section + .ui-drawer-section {
    margin-top: 0;
}
.ui-drawer-section > h3 {
    margin: 0 0 var(--space-3);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Quick action row in edit drawer */
.appt-quick-actions {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border-color: #bfdbfe;
}
.appt-quick-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.appt-quick-actions-label {
    font-weight: 600;
    color: var(--ink, #1b2433);
    font-size: 13px;
    margin-right: 4px;
}
.appt-quick-actions-row .button { font-size: 13px; font-weight: 600; line-height: 1.2; }
.appt-quick-actions-row .button.is-primary { background: #2b6ef6; color: #fff; border-color: #2056d6; }
.appt-quick-actions-row .button.is-primary:hover { background: #1f56cc; }
.appt-quick-actions-row .button.is-success { background: #16a34a; color: #fff; border-color: #15803d; }
.appt-quick-actions-row .button.is-success:hover { background: #15803d; }
.appt-quick-actions-row .button.is-danger { background: #dc2626; color: #fff; border-color: #b91c1c; }
.appt-quick-actions-row .button.is-danger:hover { background: #b91c1c; }
.appt-quick-actions-row .muted { color: var(--color-muted, #5b6577); }
.ui-drawer-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.ui-drawer-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.ui-tab-panel {
    display: none;
}
.ui-tab-panel.is-active {
    display: block;
}
.ui-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.ui-drawer-grid > div span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin-bottom: 2px;
}
.ui-drawer-grid > div strong {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 600;
}
.ui-drawer-empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

/* 23.3 Modal Form */
.ui-modal {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition);
}
.ui-modal.is-open {
    visibility: visible;
    opacity: 1;
}
.ui-modal-panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: var(--ui-modal-width);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-pop);
    transform: translateY(12px) scale(0.98);
    transition: transform 200ms ease;
    outline: none;
}
.ui-modal.is-open .ui-modal-panel {
    transform: translateY(0) scale(1);
}
.ui-modal-panel.is-lg {
    max-width: var(--ui-modal-width-lg);
}
.ui-modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 0 0 auto;
}
.ui-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}
.ui-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
}
.ui-modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
}

/* 23.4 Confirm Dialog */
.ui-confirm {
    max-width: 420px;
}
.ui-confirm .ui-modal-body {
    text-align: left;
    color: var(--color-text-soft);
    line-height: 1.55;
}
.ui-confirm-title {
    margin: 0 0 var(--space-2);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.ui-confirm.is-danger .ui-modal-header {
    border-bottom-color: var(--color-danger-soft);
}
.ui-confirm.is-danger .button-primary {
    background: var(--color-danger);
    border-color: var(--color-danger);
}
.ui-confirm.is-danger .button-primary:hover {
    background: #b91c1c;
}

/* 23.5 Toast */
.ui-toast-container {
    position: fixed;
    top: calc(var(--topbar-height) + 12px);
    right: var(--space-5);
    z-index: var(--ui-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: 360px;
    width: calc(100% - var(--space-7));
}
.ui-toast {
    pointer-events: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-pop);
    font-size: 14px;
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    transform: translateX(8px);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
    line-height: 1.45;
}
.ui-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}
.ui-toast.is-success { border-left-color: var(--color-success); }
.ui-toast.is-warning { border-left-color: var(--color-warning); }
.ui-toast.is-danger  { border-left-color: var(--color-danger); }
.ui-toast strong { display: block; margin-bottom: 2px; font-weight: 700; }
.ui-toast button.ui-toast-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 var(--space-1);
    margin-left: auto;
}

/* 23.6 Popover (quick preview) */
.ui-popover {
    position: absolute;
    z-index: var(--ui-z-popover);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    min-width: 260px;
    max-width: 360px;
    padding: var(--space-3) var(--space-4);
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
}
.ui-popover.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ui-popover strong { display: block; font-weight: 700; margin-bottom: 2px; color: var(--color-text); }
.ui-popover .ui-popover-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-muted);
}
.ui-popover .ui-popover-row b { color: var(--color-text); font-weight: 600; max-width: 70%; text-align: right; word-break: break-word; }
.ui-popover .ui-popover-row.ui-popover-row-multiline { align-items: flex-start; }
.ui-popover .ui-popover-row.ui-popover-row-multiline b { white-space: pre-wrap; font-weight: 500; line-height: 1.35; }
.ui-popover .ui-popover-actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* 23.7 Timeline (drawer) */
.ui-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-4);
}
.ui-timeline-item {
    position: relative;
    padding: 0 0 var(--space-4);
}
.ui-timeline-item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-4) * -1 - 5px);
    top: 4px;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.ui-timeline-item[data-tone="success"]::before { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success-soft); }
.ui-timeline-item[data-tone="warning"]::before { background: var(--color-warning); box-shadow: 0 0 0 2px var(--color-warning-soft); }
.ui-timeline-item[data-tone="danger"]::before  { background: var(--color-danger);  box-shadow: 0 0 0 2px var(--color-danger-soft); }
.ui-timeline-item[data-tone="muted"]::before   { background: var(--color-muted);   box-shadow: 0 0 0 2px var(--color-border); }
.ui-timeline-time {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-bottom: 2px;
}
.ui-timeline-title {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.ui-timeline-meta {
    font-size: 12.5px;
    color: var(--color-muted);
    line-height: 1.5;
}
.ui-timeline-meta .badge { vertical-align: middle; margin-left: var(--space-1); }
.ui-timeline-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.ui-timeline-filter label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 12px;
    color: var(--color-muted);
    cursor: pointer;
}
.ui-timeline-filter input { accent-color: var(--color-primary); }
.ui-timeline-filter label.is-active { border-color: var(--color-primary); color: var(--color-primary-strong); background: var(--color-primary-softer); }

/* 23.8 Skeleton + loading */
.ui-skeleton {
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-border-strong) 50%, var(--color-border) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
    display: block;
}
.ui-skeleton-line { height: 12px; margin: 6px 0; }
.ui-skeleton-block { height: 80px; }
@keyframes ui-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ui-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    color: var(--color-muted);
    font-size: 13px;
}
.ui-loading::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: ui-spin 0.9s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 23.9 Empty state */
.ui-empty {
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.ui-empty h3 { font-size: 15px; color: var(--color-text); margin: 0 0 var(--space-2); }
.ui-empty p { margin: 0; font-size: 13px; }

/* 23.10 Status badge palette mở rộng cho lịch hẹn (đảm bảo text + dot) */
.badge-checkin   { background: var(--color-info-soft);   color: var(--color-info); }
.badge-treating  { background: var(--color-warning-soft); color: #92400e; }
.badge-confirmed { background: var(--color-primary-softer); color: var(--color-primary-strong); }
.badge-checkin::before   { background: var(--color-info); }
.badge-treating::before  { background: var(--color-warning); }
.badge-confirmed::before { background: var(--color-primary); }

/* 23.11 PageHeader compact + KPI bar (Map Booking) */
.ui-pageheader-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* -------------------------------------------------------------------------
   24. Booking Map (day / week)
   ------------------------------------------------------------------------- */
.booking-tabs {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    padding: 3px;
    gap: 2px;
    margin: 0 0 var(--space-4);
}
.booking-tabs a {
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.booking-tabs a:hover { color: var(--color-primary-strong); }
.booking-tabs a.is-active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.booking-day-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.booking-day-summary .stat-card { padding: var(--space-3) var(--space-4); }

.map-day-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.map-day-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-soft);
}
.map-day-toolbar form { display: flex; gap: var(--space-2); align-items: center; }
.map-day-scroll {
    overflow: auto;
    max-height: 78vh;
    position: relative;
}
.map-day-grid {
    display: grid;
    grid-template-columns: 64px repeat(var(--map-staff-count, 1), minmax(190px, 1fr));
    background: var(--color-surface);
    min-width: 100%;
    position: relative;
}
.map-day-grid-cell {
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    min-height: 32px;
    position: relative;
    background: var(--color-surface);
}
.map-day-grid-cell.is-half { background: var(--color-surface-soft); }
.map-day-grid-cell.is-empty:hover {
    background: var(--color-primary-softer);
    cursor: pointer;
}
.map-day-grid-cell.is-empty:hover::after {
    content: "+ Tạo lịch";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: var(--color-primary-strong);
    font-weight: 600;
}
.map-day-time {
    grid-column: 1;
    padding: 4px var(--space-2);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-soft);
    font-size: 11px;
    color: var(--color-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    position: sticky;
    left: 0;
    z-index: 3;
}
.map-day-time.is-hour {
    font-weight: 700;
    color: var(--color-text);
}
.map-day-staff-head {
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: var(--space-3);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
}
.map-day-staff-head small {
    display: block;
    color: var(--color-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.map-day-corner {
    grid-column: 1;
    grid-row: 1;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
}
/* Block — color per doctor via HSL custom props (UI008). Status overlay via right border. */
/* T051: left/width inline tính từ PHP cho lane overlap; fallback 3px nếu không có lane info. */
.map-day-block {
    position: absolute;
    left: 0;
    width: calc(100% - 1px);
    border-radius: 2px;
    padding: 2px 6px 2px 6px;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 94%);
    color: hsl(var(--map-block-hue, 200), calc(var(--map-block-sat, 55%) * 0.7), 22%);
    border: 1px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 78%);
    border-left: 2px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 48%);
    box-shadow: var(--shadow-xs);
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), z-index 0s;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 1;
}
.map-day-block:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 91%, 0.45);
    z-index: 10;  /* nổi lên trên các block lane khác khi hover */
}
/* T051: khi cột chia nhiều lane (overlap), block hẹp lại → giảm padding + ẩn dòng phụ */
.map-day-block.is-narrow {
    padding: 1px 3px 1px 4px;
    border-left-width: 2px;
    font-size: 11px;
}
.map-day-block.is-narrow .map-day-block-patient {
    font-size: 11px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.map-day-block.is-narrow:hover {
    /* Chỉ nâng z-index, không bung rộng (đôi khi gây nhảy/che block khác) */
    z-index: 20;
}

/* T053 — Drag & resize handles */
.map-day-block {
    /* Vùng kéo body = giữa block. Thêm cursor move khi hover body */
    cursor: grab;
}
.map-day-block.is-dragging {
    cursor: grabbing;
    opacity: 0.55;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(15,23,42,0.18);
}
.map-day-block.is-resizing {
    cursor: ns-resize;
    opacity: 0.7;
    z-index: 30;
}
/* Resize handles top/bottom 6px — chỉ active cho non-narrow */
.map-day-block-resize {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 5;
    background: transparent;
}
.map-day-block-resize.top { top: -2px; }
.map-day-block-resize.bottom { bottom: -2px; }
.map-day-block:hover .map-day-block-resize {
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 35%, 0.4);
}
/* Drop target highlight khi đang drag */
.map-day-staff-head.is-drop-target {
    box-shadow: inset 0 -3px 0 var(--color-primary);
    background: var(--color-primary-softer);
}
/* Ghost block hiển thị khi drag */
.map-day-ghost {
    position: absolute;
    pointer-events: none;
    background: rgba(43, 110, 246, 0.18);
    border: 2px dashed var(--color-primary);
    border-radius: 2px;
    z-index: 25;
    transition: top 60ms linear, left 60ms linear, width 60ms linear, height 60ms linear;
}
.map-day-ghost-label {
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary-strong);
    background: var(--color-surface);
    border-radius: 3px;
    padding: 2px 5px;
    box-shadow: var(--shadow-xs);
    pointer-events: none;
}
/* Nút expand cột "Chưa gán" */
.map-day-expand-col {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary-strong);
    line-height: 1.2;
}
.map-day-expand-col:hover { background: var(--color-primary-softer); }
.map-day-expand-col.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.map-day-staff-head {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}
.map-day-block-time { font-weight: 700; font-size: 11.5px; }
.map-day-block-time-end { font-weight: 500; opacity: 0.7; }
.map-day-block-patient,
.map-day-block-title,
.map-day-block-service {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.2;
}
.map-day-block-patient { font-weight: 600; font-size: 12px; }
.map-day-block-title { font-size: 11px; font-style: italic; opacity: 0.85; }
.map-day-block-service { font-size: 11px; opacity: 0.8; }
/* Block rất ngắn (≤20p) layout ngang — text giữ 1 dòng */
.map-day-block.is-very-short .map-day-block-patient,
.map-day-block.is-very-short .map-day-block-title,
.map-day-block.is-very-short .map-day-block-service {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    white-space: nowrap;
}
.map-day-block.is-short { padding: 1px 5px 1px 6px; }
.map-day-block.is-short .map-day-block-time { font-size: 11px; }
.map-day-block.is-short .map-day-block-patient { font-size: 11.5px; }
.map-day-block.is-very-short {
    padding: 1px 5px 1px 6px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.map-day-block.is-very-short .map-day-block-time { font-size: 11px; flex: 0 0 auto; }
.map-day-block.is-very-short .map-day-block-patient { font-size: 11px; flex: 1 1 auto; }
/* Status overlay: right-edge stripe so doctor color stays primary cue */
.map-day-block::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3px;
    background: var(--color-muted);
    border-radius: 0 2px 2px 0;
}
.map-day-block[data-status="cancelled"]::after,
.map-day-block[data-status="no_show"]::after { background: var(--color-danger); }
.map-day-block[data-status="cancelled"],
.map-day-block[data-status="no_show"] { text-decoration: line-through; opacity: 0.65; }
.map-day-block[data-status="checked_in"]::after { background: var(--color-info); }
.map-day-block[data-status="treating"]::after,
.map-day-block[data-status="in_progress"]::after { background: var(--color-warning); }
.map-day-block[data-status="completed"]::after,
.map-day-block[data-status="done"]::after { background: var(--color-success); }
.map-day-block[data-status="confirmed"]::after { background: var(--color-primary); }
.map-day-block[data-status="new"]::after,
.map-day-block[data-status="waiting"]::after { background: var(--color-muted); }

/* Staff column header with doctor color swatch */
.map-day-staff-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.map-day-staff-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 50%);
    flex: 0 0 auto;
}
.map-day-staff-name { font-weight: 600; }

/* Legend strip above grid */
.map-day-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
}
.map-day-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
}
.map-day-legend-chip > small { color: var(--color-muted); }
.map-day-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 50%);
    flex: 0 0 auto;
}
.map-day-now-line {
    position: absolute;
    left: 64px;
    right: 0;
    height: 2px;
    background: var(--color-danger);
    z-index: 5;
    pointer-events: none;
}
.map-day-now-line::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-danger);
}

/* Map week */
.map-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
}
.map-week-day {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.map-week-day:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.map-week-day.is-today { border-color: var(--color-primary); box-shadow: var(--shadow-brand); }
.map-week-day .ui-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.map-week-day .ui-week-head strong { font-weight: 700; font-size: 14px; }
.map-week-day .ui-week-head small { color: var(--color-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.map-week-day .ui-week-counts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    font-size: 12px;
    color: var(--color-muted);
}
.map-week-day .ui-week-counts b { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.map-week-day a {
    margin-top: auto;
    text-align: center;
    text-decoration: none;
    color: var(--color-primary-strong);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}
.map-week-day a:hover { background: var(--color-primary-softer); }




/* Map week compact doctor-strip board */
.map-week-shell {
    --bg: #f5f7fb;
    --paper: #ffffff;
    --ink: #1b2433;
    --ink-2: #5b6577;
    --ink-3: #8a93a3;
    --line: #c9d0db;
    --line-soft: #e3e7ee;
    --accent: #2b6ef6;
    --s-checkin: #2f7a32;
    --s-wait: #d68f1e;
    --s-cancel: #c43a3a;
    background: var(--bg);
}
.map-week-toolbar small {
    display: block;
    margin-top: 3px;
    color: var(--ink-2);
    font-size: 12px;
}
.map-week-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* T063 — Compact toolbar: gộp title + filter + nav 1 hàng */
.map-week-toolbar-compact {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px !important;
}
.map-week-title-wrap { flex: 0 0 auto; min-width: 140px; }
.map-week-title-wrap strong { font-size: 14px; }
.map-week-title-wrap small { display: inline; font-size: 11px; color: var(--ink-3); }
.map-week-filter-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}
.map-week-filter-row select {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 12.5px;
    min-width: 100px;
    max-width: 150px;
}
.map-week-filter-row .map-week-q {
    flex: 1 1 200px;
    min-width: 180px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 12.5px;
}
.map-week-filter-row .button {
    padding: 5px 12px;
    font-size: 12.5px;
    flex: 0 0 auto;
}
.map-week-toolbar-compact .map-week-nav {
    flex: 0 0 auto;
}
.map-week-toolbar-compact .map-week-nav .button {
    padding: 5px 10px;
    font-size: 12px;
}
.map-week-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 12px;
    padding: var(--space-4) var(--space-4) 0;
}
.map-week-layout {
    display: block;
    padding: var(--space-4);
}
.map-week-heat {
    min-width: 0;
}
.map-week-drag-hint {
    display: none;
    margin-bottom: 8px;
    color: var(--ink-3);
    font-size: 11px;
    text-align: center;
}
/* T047 — Clone pattern day-map: outer wrapper xử lý overflow; grid là pure CSS Grid với
   explicit grid-column + grid-row trên TỪNG item (set inline trong PHP) để sticky deterministic. */
.map-week-scroll {
    overflow: auto;
    max-height: 78vh;
    min-height: 480px;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper);
    box-shadow: var(--shadow-xs);
}
.map-week-matrix {
    --time-col-w: 56px;
    --head-h: 54px;
    --slot-h: 40px;
    display: grid;
    /* T063b — 1 col / day rộng 370px → ~5 ngày fit 1 viewport (1920px - 56 = ~370 × 5) */
    grid-template-columns: var(--time-col-w) repeat(var(--day-count, 30), minmax(370px, 1fr));
    grid-template-rows: var(--head-h) repeat(26, var(--slot-h));
    background: var(--paper);
    position: relative;
    min-width: 100%;
    cursor: default;
    user-select: none;
}
.map-week-shell.is-detail-view .map-week-matrix {
    --slot-h: 48px;
}
/* T066 — Week mode (view=week7): 7 cột fit viewport, không scroll ngang */
.map-week-matrix.is-week-mode {
    grid-template-columns: var(--time-col-w) repeat(7, minmax(0, 1fr));
}
/* Block compact hơn khi week mode vì cột hẹp */
.map-week-matrix.is-week-mode .map-week-block { font-size: 9.5px; padding: 1px 3px; }
.map-week-matrix.is-week-mode .map-week-block-time { font-size: 9px; }
.map-week-matrix.is-week-mode .map-week-block-patient { font-size: 10px; }
.map-week-matrix.is-week-mode .map-week-block-doctor { font-size: 9px; }
.map-week-matrix.is-week-mode .map-week-block-title { display: none; }
.map-week-matrix.is-week-mode .map-week-day-head { padding: 4px 6px; }
.map-week-matrix.is-week-mode .map-week-day-total { font-size: 10px; }
.map-week-matrix.is-week-mode .map-week-day-breakdown { display: none; }
/* T056 — Doctor sub-header row */
.map-week-doctor-head {
    position: sticky;
    top: var(--head-h, 50px);
    z-index: 3;
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 96%, 0.95);
    border-bottom: 2px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 60%);
    border-right: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: hsl(var(--map-block-hue, 200), calc(var(--map-block-sat, 55%) * 0.7), 22%);
    cursor: pointer;
}
.map-week-doctor-head.is-empty {
    background: #f9fafb;
    border-bottom: 2px dashed #d1d5db;
    color: var(--ink-3);
    font-style: italic;
    justify-content: center;
}
.map-week-doctor-head-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 50%);
    flex: 0 0 auto;
}
.map-week-doctor-head span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.map-week-doctor-head b {
    flex: 0 0 auto;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 50%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
}
.map-week-cell.is-empty-col {
    background: repeating-linear-gradient(135deg, rgba(0,0,0,0.02) 0 6px, transparent 6px 12px);
}
.map-week-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 8px;
    padding: 8px 10px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
    font-size: 11.5px;
    color: var(--ink-2);
}
.map-week-legend-label {
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}
.map-week-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px 3px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
    font: inherit;
    line-height: 1;
}
.map-week-legend-item:hover,
.map-week-legend-item:focus-visible {
    background: #f1f4fa;
    border-color: var(--line-soft);
    outline: none;
}
.map-week-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 78%);
    border: 1px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 58%);
}
.map-week-legend-swatch.is-busy {
    background: #c7e7c1;
    border-color: #8ec386;
}
.map-week-legend-swatch.is-free {
    background: #fbfcff;
    border-color: #d6dbe5;
}
.map-week-legend-swatch.is-off {
    background: repeating-linear-gradient(45deg, #ffe7d4 0 4px, #fff 4px 8px);
    border-color: #e7b682;
}
.map-week-legend-spacer { flex: 1 1 12px; min-width: 4px; }
.map-week-legend-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-3);
    font-size: 11px;
}
.map-week-head {
    /* grid item — chiếm trọn cell của row 1; sticky-top dính vào outer scroll */
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line-soft);
}
/* Corner cell: sticky cả 2 chiều, z-index cao nhất */
.map-week-time-head {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-bottom: 1px solid #cbd5e1;
    border-right: 2px solid var(--line);
}
.map-week-day-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    text-decoration: none;
    color: var(--ink);
}
.map-week-day-head.is-today {
    background: #eaf3ff;
    box-shadow: inset 0 3px 0 var(--accent);
}
.map-week-day-head:hover {
    background: #f1f6ff;
}
.map-week-day-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 13px;
    line-height: 1.1;
}
.map-week-day-title strong,
.map-week-day-title b {
    font-weight: 600;
}
.map-week-day-total {
    color: var(--ink-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.map-week-day-breakdown {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--ink-3);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    vertical-align: middle;
}
.dot.check { background: var(--s-checkin); }
.dot.wait { background: var(--s-wait); }
.dot.cancel { background: var(--s-cancel); }
.map-week-time {
    /* T063: sticky-left cứng để khi scroll ngang vẫn thấy giờ. Font + border rõ hơn. */
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-right: 2px solid var(--line);
    border-bottom: 1px dashed #e5e7eb;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    background: #f8fafc;
}
.map-week-time.is-hour {
    color: #1e293b;
    font-weight: 700;
    font-size: 11.5px;
    border-bottom: 1px solid #cbd5e1;
    background: #f1f5f9;
}
.map-week-cell {
    position: relative;
    padding: 2px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: #fafbfd;
    outline: none;
    cursor: pointer;
    overflow: hidden;
}
.map-week-cell.is-today {
    background: #f4f8ff;
}
.map-week-cell.has-booking {
    background: #fff;
}
.map-week-cell.is-today.has-booking {
    background: #fbfdff;
}
.map-week-cell:hover,
.map-week-cell:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
    /* Bỏ z-index để cell không đè block khi hover (block ở .map-week-blocks-col z:5) */
}
.map-week-lanes {
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    height: 100%;
}
.map-week-lane {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border-radius: 2px;
    background: #f4f6fa;
    border: 0;
    padding: 0;
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.map-week-lane.is-busy {
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 86%, 0.46);
}
.map-week-lane.is-busy.is-stacked {
    background: linear-gradient(
        135deg,
        hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 80%, 0.55) 0 50%,
        hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 91%, 0.55) 50% 100%
    );
}
.map-week-lane.is-cancel {
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 90%);
    border: 1px dashed var(--s-cancel);
    opacity: 0.55;
}
.map-week-lane.is-free {
    background: #f4f6fa;
}
.map-week-lane.is-off {
    background: repeating-linear-gradient(45deg, rgba(255, 231, 212, 0.55) 0 4px, rgba(255, 255, 255, 0.7) 4px 8px);
    border: 1px solid rgba(231, 142, 65, 0.28);
}
button.map-week-lane {
    cursor: pointer;
}
button.map-week-lane:hover,
button.map-week-lane:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22), inset 0 0 0 1px hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 48%);
    outline: none;
}
.map-week-lane.is-unassigned {
    flex: 0 0 16px;
    background: #ffd5d5;
    color: #7a1f1f;
    border: 1px dashed #b34c4c;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-style: normal;
    border-radius: 3px;
}


.map-week-detail-block {
    display: none;
    position: relative;
    z-index: 8;
    align-self: stretch;
    justify-self: stretch;
    box-sizing: border-box;
    width: calc(100% - 4px);
    margin: 2px;
    padding: 5px 7px;
    border: 1px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 72%);
    border-left: 5px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 46%);
    border-radius: 5px;
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 93%, 0.98);
    color: hsl(var(--map-block-hue, 200), calc(var(--map-block-sat, 55%) * 0.7), 22%);
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.16);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.map-week-shell.is-detail-view .map-week-detail-block.is-detail-visible {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
}
.map-week-detail-block:hover,
.map-week-detail-block:focus-visible {
    z-index: 14;
    outline: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24), inset 0 0 0 1px hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 44%);
}
.map-week-detail-block strong,
.map-week-detail-block em {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.map-week-detail-block strong {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}
.map-week-detail-block em {
    font-style: normal;
    font-size: 10px;
    line-height: 1.15;
    opacity: 0.82;
}
.map-week-detail-block.is-short {
    padding-block: 4px;
    justify-content: center;
}
.map-week-detail-block.is-short em {
    display: none;
}
.map-week-detail-block.is-cancel {
    opacity: 0.58;
    text-decoration: line-through;
    background: repeating-linear-gradient(45deg, #fff3f3 0 6px, #ffe3e3 6px 12px);
    border-left-color: var(--s-cancel, #c43a3a);
}
.map-week-shell.is-detail-view .map-week-cell .map-week-lanes {
    opacity: 0.18;
}

/* Filter form trên Map Tuần */
.map-week-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 0;
}
.map-week-filter select,
.map-week-filter input[type="search"] {
    padding: 5px 8px;
    font-size: 12.5px;
}
.map-week-active-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 11.5px;
    color: var(--ink-2);
}
.map-week-active-filter .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #e8f1ff;
    border: 1px solid #b8d4ff;
    border-radius: 999px;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 11px;
}

/* Click-to-filter: chỉ hiện lanes của BS được chọn (multi). */
.map-week-shell.is-filtering .map-week-lane:not(.is-filter-match) {
    display: none;
}
/* T054c — Apply filter cũng lên .map-week-block (markup mới sau rewrite Map Tháng) */
.map-week-shell.is-filtering .map-week-block:not(.is-filter-match) {
    display: none;
}

/* ===== Detail view (1-2 BS được chọn HOẶC q filter active): text lịch hẹn trong ô màu ===== */
.map-week-cell-infos { display: none; }
.map-week-cell-info,
.map-week-cell-info-more { display: none; }

/* Detail mode: chỉ override --slot-h (đã đặt 48px ở khối .map-week-matrix).
   KHÔNG redeclare grid-template-rows ở đây để tránh conflict với --slot-h. */
.map-week-shell.is-detail-view .map-week-cell {
    padding: 3px 4px;
    overflow: hidden;
}
.map-week-shell.is-detail-view .map-week-cell .map-week-lanes { display: none; }
.map-week-shell.is-detail-view .map-week-cell-infos { display: flex; flex-direction: column; gap: 1px; width: 100%; height: 100%; overflow: hidden; }
/* Khi NO doctor filter (chỉ q hoặc auto-detail) → hiện all infos */
.map-week-shell.is-detail-view .map-week-cell-info {
    display: block;
    min-height: 0;
    max-height: 21px;
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 92%, 0.96);
    border-left: 3px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 52%);
    border-radius: 2px;
    padding: 1px 4px;
    line-height: 1.05;
    overflow: hidden;
}
/* Khi có doctor filter → chỉ infos của BS được chọn */
.map-week-shell.is-detail-view.is-doctor-filtering .map-week-cell-info {
    display: none;
}
.map-week-shell.is-detail-view.is-doctor-filtering .map-week-cell-info.is-filter-match {
    display: block;
}
.map-week-shell.is-detail-view .map-week-cell-info.is-cancel {
    opacity: 0.55;
    background: repeating-linear-gradient(45deg, #fff3f3 0 6px, #ffe3e3 6px 12px);
    border-left-color: var(--s-cancel, #c43a3a);
}
.map-week-shell.is-detail-view .map-week-cell-info strong {
    display: block;
    font-size: 9.8px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-week-shell.is-detail-view .map-week-cell-info em {
    display: block;
    font-style: normal;
    font-size: 9.2px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-week-shell.is-detail-view .map-week-cell-info-more {
    display: block;
    font-size: 9.5px;
    color: var(--ink-3);
    padding: 0 4px;
}
.map-week-legend-item.is-active {
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 92%);
    border-color: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 58%);
    color: var(--ink);
    font-weight: 600;
}
.map-week-legend-item.is-active .map-week-legend-swatch {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 48%);
}
.map-week-legend-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid #c43a3a;
    border-radius: 999px;
    background: #fff0f0;
    color: #a02929;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.map-week-legend-clear:hover,
.map-week-legend-clear:focus-visible {
    background: #ffe1e1;
    outline: none;
}
.map-week-legend-clear[hidden] { display: none; }
.map-week-floating-tip {
    position: fixed;
    z-index: 10000;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #111827;
    color: #f8fafc;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    pointer-events: none;
}
.map-week-floating-tip[hidden] {
    display: none;
}
.map-week-floating-tip strong {
    font-size: 12px;
    font-weight: 700;
}
.map-week-floating-tip em,
.map-week-floating-tip small {
    color: #cbd5e1;
    font-style: normal;
    font-weight: 500;
}
.map-week-tip-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 5px;
}
.map-week-tip-row .status {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    margin-top: 3px;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 62%);
}
.map-week-tip-row .status.busy { background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 62%); }
.map-week-tip-row .status.cancel { background: var(--s-cancel); }
.map-week-tip-row .status.off { background: repeating-linear-gradient(45deg, #ffe7d4 0 2px, #e78e41 2px 4px); }
.map-week-tip-row .status.free { background: #c4cad6; }
.map-week-tip-row .status.check { background: var(--s-checkin); }
.map-week-tip-row .status.wait { background: var(--s-wait); }
.map-week-panel {
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 12px;
    box-shadow: var(--shadow-xs);
}
.map-week-panel h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}
.map-week-doctor-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 10px;
}
.map-week-doctor-row {
    display: grid;
    grid-template-columns: minmax(66px, 1fr) minmax(52px, 1.1fr) 26px;
    align-items: center;
    gap: 7px;
    color: var(--ink-2);
    font-size: 12px;
}
.map-week-doctor-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-week-doctor-row span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 5px;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 50%);
    vertical-align: 0;
}
.map-week-doctor-row b {
    height: 8px;
    border-radius: 999px;
    background: #edf1f7;
    overflow: hidden;
}
.map-week-doctor-row b i {
    display: block;
    width: var(--doctor-load);
    height: 100%;
    border-radius: inherit;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 58%);
}
.map-week-doctor-row strong {
    color: var(--ink);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.map-week-empty {
    margin: 0;
    color: var(--ink-3);
    font-size: 12px;
}
.map-week-day-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 8px;
}
.map-week-day-stat {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 12px;
    background: #fbfcff;
}
.map-week-day-stat strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.map-week-status-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    color: var(--ink-2);
    font-size: 12px;
}
.map-week-status-grid span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fbfcff;
}
.map-week-status-grid b {
    margin-left: auto;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1180px) {
    .map-week-top {
        grid-template-columns: 1fr;
        padding: var(--space-3) var(--space-3) 0;
    }
    .map-week-layout {
        padding: var(--space-3);
    }
    .map-week-day-head { padding-inline: 5px; }
    .map-week-day-breakdown { font-size: 10px; }
}
@media (max-width: 760px) {
    .map-week-toolbar {
        align-items: stretch;
    }
    .map-week-nav {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }
    .map-week-nav .button {
        flex: 0 0 auto;
    }
    .map-week-drag-hint {
        display: block;
    }
    .map-week-scroll {
        /* Mobile: scroll-snap ngang ở outer wrapper, snap mỗi ngày vào viewport */
        scroll-snap-type: x mandatory;
        scroll-padding-left: 42px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 220px);
    }
    .map-week-matrix {
        /* T063 mobile: 1 cột = 1 ngày, scroll-snap để xem từng ngày */
        --time-col-w: 42px;
        --head-h: 50px;
        --slot-h: 44px;
        grid-template-columns: var(--time-col-w) repeat(var(--day-count, 30), max(180px, calc(100vw - var(--time-col-w) - 18px)));
        grid-template-rows: var(--head-h) repeat(26, var(--slot-h)) !important;
        cursor: auto;
    }
    .map-week-day-head {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 0;
    }
    .map-week-doctor-head {
        top: var(--head-h, 50px);
        font-size: 10px;
        padding: 1px 4px;
        gap: 3px;
    }
    .map-week-doctor-head b { font-size: 9px; padding: 0 4px; min-width: 14px; }
    .map-week-doctor-head-swatch { width: 6px; height: 6px; }
    .map-week-cell {
        scroll-snap-align: none;
    }
    .map-week-time,
    .map-week-time-head {
        position: sticky;
        left: 0;
        z-index: 6;
        background: var(--paper);
        box-shadow: 1px 0 0 var(--line-soft);
    }
    .map-week-time-head { z-index: 7; }
    .map-week-head {
        min-height: 52px;
    }
    .map-week-day-title {
        flex-direction: column;
        gap: 1px;
        font-size: 11px;
    }
    .map-week-day-total {
        font-size: 10px;
    }
    .map-week-day-breakdown {
        display: none;
    }
    .map-week-time,
    .map-week-cell {
        height: 100%;
    }
    .map-week-cell {
        padding: 4px 3px;
    }
    .map-week-detail-block {
        padding: 4px 5px;
    }
    .map-week-detail-block strong { font-size: 10px; }
    .map-week-detail-block em { font-size: 9px; }
    .map-week-lanes { gap: 1.5px; }
    .map-week-legend { font-size: 11px; padding: 6px 8px; gap: 5px 8px; }
    .map-week-legend-state { display: none; }
    .map-week-legend-item { padding: 2px 6px 2px 3px; font-size: 11px; }
    .map-week-legend-swatch { width: 12px; height: 8px; }
    /* "Bác sĩ trong 7 ngày" panel: thanh load ngang quá dài trên mobile, ẩn — giữ tên + số */
    .map-week-doctor-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }
    .map-week-doctor-row b { display: none; }
    .map-week-doctor-list {
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
        gap: 6px 8px;
    }
    .map-week-doctor-list {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }
    .map-week-day-metrics,
    .map-week-status-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   24b. Care Kanban — lightweight pipeline board
   ------------------------------------------------------------------------- */
.kanban-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-1) 2px var(--space-3);
    align-items: start;
    scroll-snap-type: x mandatory;
}
.kanban-column {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    scroll-snap-align: start;
}
.kanban-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.kanban-column-head strong {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
}
.kanban-column-head .kanban-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}
.kanban-column[data-status="need_call"] { border-top: 3px solid var(--color-warning); }
.kanban-column[data-status="called"] { border-top: 3px solid var(--color-info); }
.kanban-column[data-status="call_back"] { border-top: 3px solid var(--color-primary); }
.kanban-column[data-status="no_answer"] { border-top: 3px solid var(--color-muted); }
.kanban-column[data-status="resale_opportunity"] { border-top: 3px solid #7c3aed; }
.kanban-column[data-status="handled"], .kanban-column[data-status="completed"] { border-top: 3px solid var(--color-success); }
.kanban-column[data-status="failed"] { border-top: 3px solid var(--color-danger); }

.kanban-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    text-align: left;
    width: 100%;
    border-left: 4px solid var(--color-primary-soft);
}
.kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
    border-left-color: var(--color-primary);
}
.kanban-card[data-priority="urgent"] { border-left-color: var(--color-danger); }
.kanban-card[data-priority="high"]   { border-left-color: var(--color-warning); }
.kanban-card[data-priority="normal"] { border-left-color: var(--color-primary); }
.kanban-card[data-priority="low"]    { border-left-color: var(--color-muted-soft); }

.kanban-card strong {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
}
.kanban-card .kanban-meta {
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.45;
}
.kanban-card .kanban-meta b {
    color: var(--color-text-soft);
    font-weight: 600;
}
.kanban-card .kanban-due {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-warning);
    font-weight: 700;
}
.kanban-card .kanban-due.is-overdue { color: var(--color-danger); }
.kanban-empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-muted);
    font-size: 12px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
    .kanban-board {
        grid-auto-columns: 85vw;
    }
}

/* -------------------------------------------------------------------------
   25. Patient history drawer specifics
   ------------------------------------------------------------------------- */
.patient-history-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
}
.patient-history-quickactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.patient-history-quickactions form,
.patient-history-quickactions a,
.patient-history-quickactions button {
    margin: 0;
}
.patient-history-finance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.patient-history-finance > div {
    background: var(--color-surface-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
}
.patient-history-finance .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-muted);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.patient-history-finance .value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.patient-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.patient-history-list li {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    align-items: center;
}
.patient-history-list li time {
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    font-size: 12px;
}
.patient-history-list li strong { color: var(--color-text); }
.patient-history-list li .meta { font-size: 12px; color: var(--color-muted); display: block; }

/* Open-history button trên patient row */
.patient-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.patient-actions-bar > button,
.patient-actions-bar > a {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.patient-actions-bar > button:hover,
.patient-actions-bar > a:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-softer);
    color: var(--color-primary-strong);
}
.patient-actions-bar > .is-primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.patient-actions-bar > .is-primary:hover { background: var(--color-primary-strong); }

/* -------------------------------------------------------------------------
   26. Responsive: drawer/modal/toast mobile sheet behavior
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .ui-drawer {
        width: 100vw;
        max-width: 100vw;
        top: auto;
        bottom: 0;
        height: 92vh;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
        transform: translateY(100%);
    }
    .ui-drawer.is-open { transform: translateY(0); }
    .ui-drawer-body { padding: var(--space-3); }
    .ui-drawer-grid { grid-template-columns: 1fr; }
    .ui-modal { padding: 0; align-items: flex-end; }
    .ui-modal-panel {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 95vh;
        transform: translateY(20px);
    }
    .ui-modal.is-open .ui-modal-panel { transform: translateY(0); }
    .ui-toast-container {
        right: var(--space-2);
        left: var(--space-2);
        max-width: none;
        top: auto;
        bottom: var(--space-3);
    }
    .patient-history-finance { grid-template-columns: 1fr; }
    .patient-history-list li { grid-template-columns: 1fr; }
    .map-week-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .map-day-grid { grid-template-columns: 56px repeat(var(--map-staff-count, 1), minmax(160px, 1fr)); }
    .map-day-time { padding: 4px 6px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-drawer,
    .ui-overlay,
    .ui-modal,
    .ui-toast,
    .map-day-block,
    .ui-popover { transition: none; }
    .ui-skeleton { animation: none; }
}

/* -------------------------------------------------------------------------
   22. Print friendliness (lightweight)
   ------------------------------------------------------------------------- */
@media print {
    .sidebar,
    .topbar,
    .page-actions,
    .filter-bar,
    .row-actions,
    .app-loader {
        display: none !important;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .panel,
    .stat-card {
        box-shadow: none;
        border-color: #d1d5db;
    }
}

/* -------------------------------------------------------------------------
   27. Alerts + finance/treatment polish (UI005)
   ------------------------------------------------------------------------- */
.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    margin: 0 0 var(--space-4);
    font-size: 13px;
    color: var(--color-text);
}
.ui-alert > .ui-alert-icon {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.ui-alert > .ui-alert-body { flex: 1 1 auto; }
.ui-alert > .ui-alert-body > strong { display: block; margin-bottom: 2px; font-weight: 600; }
.ui-alert > .ui-alert-body > p { margin: 0; color: var(--color-muted); font-size: 12.5px; }
.ui-alert.is-info    { background: var(--color-info-soft);    border-color: var(--color-info);    color: var(--color-info); }
.ui-alert.is-warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: #92400e; }
.ui-alert.is-danger  { background: var(--color-danger-soft);  border-color: var(--color-danger);  color: var(--color-danger); }
.ui-alert.is-success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.ui-alert.is-info > .ui-alert-body > p,
.ui-alert.is-warning > .ui-alert-body > p,
.ui-alert.is-danger > .ui-alert-body > p,
.ui-alert.is-success > .ui-alert-body > p { color: inherit; opacity: 0.82; }

/* Full-width data panel (no side aside) — replaces appointment-grid where the
   create form has been moved into a modal. Used in /admin/treatments and
   /admin/finance index views. */
.data-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
.data-board > .panel { width: 100%; }

/* Invoice drawer line items + payment list */
.invoice-line-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.invoice-line-list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.invoice-line-list > li > .desc { font-size: 13px; color: var(--color-text); }
.invoice-line-list > li > .desc > span { display: block; color: var(--color-muted); font-size: 11.5px; margin-top: 2px; }
.invoice-line-list > li > .amount { text-align: right; font-weight: 600; font-size: 13px; }
.invoice-line-list > li > .amount > span { display: block; color: var(--color-muted); font-weight: 400; font-size: 11.5px; }

/* Compact key/value chips inside drawers (treatments + finance) */
.ui-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
    margin: 0;
}
.ui-kv > div {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}
.ui-kv > div > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 2px; }
.ui-kv > div > strong { font-size: 13.5px; color: var(--color-text); font-weight: 600; }

/* Row-actions cluster used in finance/treatments tables (sits next to .patient-actions-bar pattern). */
.row-action-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.row-action-cluster > button,
.row-action-cluster > a {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}
.row-action-cluster > button.is-primary,
.row-action-cluster > a.is-primary {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
}
.row-action-cluster > button:hover,
.row-action-cluster > a:hover { background: var(--color-surface-soft); }

/* Pagination footer (UI006) */
.ui-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-soft);
    font-size: 13px;
}
.ui-pagination-info { color: var(--color-muted); }
.ui-pagination-info strong { color: var(--color-text); }
.ui-pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.ui-pagination-perpage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
}
.ui-pagination-perpage > select {
    height: 30px;
    padding: 0 8px;
    font-size: 12.5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
.ui-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ui-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.ui-pagination-btn:hover { background: var(--color-primary-softer); border-color: var(--color-primary); color: var(--color-primary-strong); }
.ui-pagination-btn.is-disabled,
.ui-pagination-btn[aria-disabled="true"] {
    color: var(--color-muted);
    background: var(--color-surface);
    pointer-events: none;
    opacity: 0.6;
}
.ui-pagination-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    color: var(--color-text);
    font-weight: 500;
}
.ui-pagination-current > input[data-page-jump] {
    width: 56px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    text-align: center;
    font-size: 13px;
    color: var(--color-text);
}
[data-paginated-list][data-loading="1"] [data-list-fragment] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
[data-paginated-list] [data-list-fragment] { position: relative; transition: opacity 0.15s ease; }

/* Quick date chips above filter bar (UI006) */
.ui-date-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 var(--space-2);
    font-size: 12.5px;
}
.ui-date-chips > span { color: var(--color-muted); margin-right: 4px; }
.ui-date-chips > a {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: 12px;
}
.ui-date-chips > a:hover { background: var(--color-primary-softer); border-color: var(--color-primary); color: var(--color-primary-strong); }
.ui-date-chips > a.is-active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    font-weight: 600;
}

@media (max-width: 720px) {
    .ui-pagination { flex-direction: column; align-items: stretch; }
    .ui-pagination-controls { justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   28. Dashboard cockpit (UI008) — compact 3-col grid replacing dashboard-grid
   ------------------------------------------------------------------------- */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.kpi-strip-card {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 56px;
    justify-content: center;
}
.kpi-strip-card > span {
    font-size: 11.5px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.kpi-strip-card > strong { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.kpi-strip-card.kpi-info { border-left-color: var(--color-info); }
.kpi-strip-card.kpi-success { border-left-color: var(--color-success); }
.kpi-strip-card.kpi-warning { border-left-color: var(--color-warning); }
.kpi-strip-card.kpi-danger { border-left-color: var(--color-danger); }

.dashboard-cockpit {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 280px;
    gap: var(--space-3);
    align-items: start;
}
.dashboard-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: sticky;
    top: calc(var(--topbar-height, 56px) + var(--space-2));
    max-height: calc(100vh - var(--topbar-height, 56px) - var(--space-3));
    overflow: hidden auto;
}
.dashboard-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.dashboard-rail-head > h2 { margin: 0; font-size: 14px; font-weight: 600; }
.dashboard-rail-left, .dashboard-rail-right {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.dashboard-rail-right { padding: 0; gap: 0; }
.dashboard-rail-right > .panel {
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
}
.dashboard-rail-right > .panel:last-child { border-bottom: none; }

.schedule-list-compact { padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }
.schedule-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    align-items: start;
    border-left: 3px solid var(--color-border);
    transition: background var(--transition-fast);
}
.schedule-row:hover { background: var(--color-primary-softer); }
.schedule-row[data-status="checked_in"] { border-left-color: var(--color-info); }
.schedule-row[data-status="confirmed"] { border-left-color: var(--color-primary); }
.schedule-row[data-status="treating"], .schedule-row[data-status="in_progress"] { border-left-color: var(--color-warning); }
.schedule-row[data-status="completed"], .schedule-row[data-status="done"] { border-left-color: var(--color-success); }
.schedule-row[data-status="cancelled"], .schedule-row[data-status="no_show"] { border-left-color: var(--color-danger); opacity: 0.7; }
.schedule-row > time { font-weight: 700; font-size: 12.5px; color: var(--color-text); padding-top: 1px; }
.schedule-row-body { display: flex; flex-direction: column; min-width: 0; }
.schedule-row-body > strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-row-meta { font-size: 11px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-row-status {
    font-size: 10.5px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}

.dashboard-center {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.dashboard-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.dist-list {
    list-style: none;
    margin: 0;
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dist-list > li {
    display: grid;
    grid-template-columns: 130px 1fr 60px;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.dist-label { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-bar {
    height: 8px;
    background: var(--color-surface-soft);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.dist-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong));
    border-radius: inherit;
}
.dist-list > li > strong { text-align: right; font-weight: 600; color: var(--color-text); }

.dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 0 8px 8px;
}
.dashboard-actions > a {
    padding: 6px 10px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    transition: background var(--transition-fast);
}
.dashboard-actions > a:hover {
    background: var(--color-primary-softer);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
}

.compact-alert-list { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.compact-alert-list .alert-row {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

@media (max-width: 1200px) {
    .dashboard-cockpit { grid-template-columns: minmax(0, 1fr); }
    .dashboard-rail { position: static; max-height: none; }
    .dashboard-pair { grid-template-columns: 1fr; }
    .dashboard-actions { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
    .dashboard-actions { grid-template-columns: 1fr 1fr; }
    .dist-list > li { grid-template-columns: 100px 1fr 50px; font-size: 12px; }
}

/* -------------------------------------------------------------------------
   29. Excel-like list shell (UI009) — left date rail + sticky dense table
   ------------------------------------------------------------------------- */
:root { --excel-chrome: 180px; --excel-rail-width: 260px; }

.excel-shell {
    display: grid;
    grid-template-columns: var(--excel-rail-width) minmax(0, 1fr);
    gap: var(--space-3);
    height: calc(100vh - var(--excel-chrome));
    min-height: 480px;
}

.excel-rail {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.excel-rail-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.excel-rail-head > h2 { margin: 0; font-size: 14px; font-weight: 600; }
.excel-rail-head > p { margin: 2px 0 0; font-size: 12px; color: var(--color-muted); }
.excel-rail-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.excel-rail-search > input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 12.5px;
}
.excel-rail-section {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.excel-rail-section > label,
.excel-rail-section > .excel-rail-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.excel-rail-section > select {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 12.5px;
}
.excel-rail-section > select + select { margin-top: 6px; }
.excel-rail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.excel-rail-chips > a {
    flex: 1 1 auto;
    text-align: center;
    padding: 4px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 11.5px;
}
.excel-rail-chips > a.is-active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    font-weight: 600;
}
.excel-rail-chips > a:hover { background: var(--color-primary-softer); }

.excel-rail-daterange {
    /* 2 cột Từ/Đến + nút Lọc full-width hàng dưới. Compact để input date không tràn ra ngoài rail. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    row-gap: 4px;
    padding: 8px 12px;
    border-top: 1px dashed var(--color-border);
    margin-top: 8px;
}
.excel-rail-daterange label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    color: var(--color-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 0;
}
.excel-rail-daterange input[type="date"] {
    padding: 3px 4px;
    font-size: 11px;
    line-height: 1.3;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* WebKit: nén calendar icon + format display */
.excel-rail-daterange input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin-left: 0;
    width: 14px;
}
.excel-rail-daterange input[type="date"]::-webkit-datetime-edit {
    padding: 0;
    font-size: 11px;
}
.excel-rail-daterange button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
}

.excel-rail-dates {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px;
}
.excel-rail-date {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px;
    margin: 1px 0;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-size: 12px;
    border-left: 3px solid transparent;
}
.excel-rail-date > .date-num { font-weight: 600; font-size: 12.5px; }
.excel-rail-date > .date-dow { color: var(--color-muted); font-size: 11.5px; }
.excel-rail-date > .date-count { color: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.excel-rail-date:hover { background: var(--color-primary-softer); }
.excel-rail-date.is-active {
    background: var(--color-primary-soft);
    border-left-color: var(--color-primary);
    color: var(--color-primary-strong);
}
.excel-rail-date.is-active > .date-num,
.excel-rail-date.is-active > .date-count { color: var(--color-primary-strong); }
.excel-rail-date.is-today { font-weight: 600; }
.excel-rail-date.is-today > .date-num::after { content: " ●"; color: var(--color-primary); }
.excel-rail-date.is-weekend { background: var(--color-surface-soft); }

.excel-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.excel-stats-collapse {
    border-bottom: 1px solid var(--color-border);
}
.excel-stats-collapse > summary {
    cursor: pointer;
    padding: 8px 14px;
    font-size: 12.5px;
    color: var(--color-muted);
    user-select: none;
}
.excel-stats-collapse[open] > summary { border-bottom: 1px solid var(--color-border); }
.excel-stats-collapse > .stat-grid {
    margin: 12px 14px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.excel-main > [data-list-fragment] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.excel-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    position: relative;
}
.excel-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}
.excel-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-surface-soft);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    white-space: nowrap;
}
.excel-table tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.excel-table tbody tr:hover td { background: var(--color-primary-softer); }
.excel-table tbody tr.is-group-header td {
    background: var(--color-surface-soft);
    font-weight: 600;
    padding: 4px 10px;
    color: var(--color-primary-strong);
    border-bottom: 1px solid var(--color-primary);
}
.excel-table .col-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
}
.excel-table thead th.col-sticky {
    z-index: 4;
}
.excel-table .col-sticky::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--color-border);
}
.excel-table tbody .col-sticky { background: var(--color-surface); }
.excel-table tbody tr:hover .col-sticky { background: var(--color-primary-softer); }
.excel-table .col-num { width: 48px; text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.excel-table .col-money { text-align: right; font-variant-numeric: tabular-nums; }
.excel-table .row-action-cluster { display: inline-flex; gap: 4px; }
.excel-table .row-action-cluster > button {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}
.excel-table .row-action-cluster > button.is-primary {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
}
.excel-table .row-action-cluster > button:hover { background: var(--color-surface-soft); }

.excel-main > .ui-pagination {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
    background: var(--color-surface-soft);
}

/* Mobile: collapse rail to a top "Bộ lọc" toggle */
@media (max-width: 980px) {
    :root { --excel-chrome: 240px; }
    .excel-shell { grid-template-columns: minmax(0, 1fr); height: auto; }
    .excel-rail { max-height: 320px; }
    .excel-rail-dates { max-height: 200px; }
    .excel-table-wrap { max-height: calc(100vh - 240px); }
}

/* -------------------------------------------------------------------------
   30. Module toolbar + rail-actions + density (UI010)
   User feedback: bỏ duplicate page-header, gom action vào rail, gom stats +
   pagination vào 1 thanh ngang. Giảm gap content ↔ sidebar.
   ------------------------------------------------------------------------- */
:root { --excel-chrome: 110px; --excel-rail-width: 240px; }
.excel-shell { gap: var(--space-2); }

/* Top toolbar replacing page-header — sits above excel-shell */
.module-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-2);
    font-size: 12.5px;
    min-height: 44px;
}
.module-toolbar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-right: var(--space-2);
    white-space: nowrap;
    flex: 0 0 auto;
}
.module-toolbar-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: thin;
}
.module-toolbar-stats::-webkit-scrollbar { height: 4px; }
.module-toolbar-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    white-space: nowrap;
    flex: 0 0 auto;
}
.module-toolbar-stat > span { color: var(--color-muted); font-size: 11.5px; }
.module-toolbar-stat > strong { font-weight: 700; font-size: 12.5px; }
.module-toolbar-stat[data-tone="info"]    > strong { color: var(--color-info); }
.module-toolbar-stat[data-tone="success"] > strong { color: var(--color-success); }
.module-toolbar-stat[data-tone="warning"] > strong { color: #92400e; }
.module-toolbar-stat[data-tone="danger"]  > strong { color: var(--color-danger); }
.module-toolbar-spacer { flex: 1 1 auto; }
.module-toolbar-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.module-toolbar-pagination > .ui-pagination-pages { gap: 2px; }
.module-toolbar-pagination .ui-pagination-btn { min-width: 26px; height: 26px; padding: 0 6px; font-size: 12px; }
.module-toolbar-pagination .ui-pagination-perpage { gap: 4px; }
.module-toolbar-pagination .ui-pagination-perpage > select { height: 26px; padding: 0 6px; font-size: 12px; }
.module-toolbar-pagination .ui-pagination-current { padding: 0 6px; font-size: 12px; gap: 4px; }
.module-toolbar-pagination .ui-pagination-current > input[data-page-jump] { width: 44px; height: 26px; font-size: 12px; }
.module-toolbar-pagination .ui-pagination-info { font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
.module-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* Rail actions block at top of rail */
.excel-rail-actions {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.excel-rail-actions > .button,
.excel-rail-actions > a.button,
.excel-rail-actions > button {
    width: 100%;
    justify-content: center;
    padding: 6px 10px;
    font-size: 12.5px;
}

/* Tab-style view switcher + actions row for Appointments */
.module-view-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0 0 var(--space-2);
}
.module-view-toolbar > .booking-tabs { margin: 0; flex: 0 0 auto; }
.module-view-toolbar > .module-toolbar-spacer { flex: 1 1 auto; }
.module-view-toolbar > .module-view-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.module-view-toolbar .module-view-actions > a,
.module-view-toolbar .module-view-actions > button {
    padding: 5px 12px;
    font-size: 12.5px;
}

/* Pull stat-grid above page-header gone; show small inline strip */
.module-toolbar + section.kpi-strip,
.module-toolbar + section.stat-grid { margin-top: var(--space-2); }

/* Hide ALL legacy page-actions when sitting alongside module-toolbar */
.module-toolbar ~ .page-header,
.module-toolbar + .page-header { display: none; }

/* ---- Map Day: row height + remove position subtitle (UI010) ---- */
.map-day-grid { /* row-height baked in inline style as 32px — override via container var */ }
.map-day-staff-head small { display: none !important; } /* "Bac_si_rhm" position code clutter */
.map-day-staff-head { padding: 4px 8px; min-height: 36px; }
.map-day-staff-head .map-day-staff-name { font-size: 12.5px; }
/* Bump block min-height to fit 30min content */
.map-day-block.is-short { padding: 4px 8px 4px 10px; }
.map-day-block.is-short .map-day-block-time { font-size: 11.5px; }
.map-day-block.is-short .map-day-block-patient { font-size: 12px; }

/* Reduce gap between excel-rail and excel-table-wrap */
.excel-shell { gap: 6px; }

/* Mobile hamburger trigger inside module-toolbar */
.module-toolbar-mobile-filter {
    display: none;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12.5px;
    cursor: pointer;
}

/* Mobile: rail becomes off-canvas drawer */
@media (max-width: 980px) {
    .admin-content { padding: 8px; }
    .module-toolbar { flex-wrap: wrap; padding: 6px 8px; }
    .module-toolbar-title { width: 100%; margin-right: 0; }
    .module-toolbar-stats { order: 2; width: 100%; }
    .module-toolbar-pagination { order: 3; width: 100%; justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--color-border); }
    .module-toolbar-actions { order: 1; }
    .module-toolbar-mobile-filter { display: inline-flex; align-items: center; gap: 4px; }

    .excel-shell { display: block; }
    .excel-rail {
        position: fixed;
        top: 0;
        left: -100%;
        width: 86vw;
        max-width: 340px;
        height: 100vh;
        max-height: none;
        z-index: 60;
        border-radius: 0;
        transition: left 0.22s ease;
        box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.15));
    }
    .excel-shell.is-rail-open .excel-rail { left: 0; }
    .excel-shell.is-rail-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 55;
    }
    .excel-rail-dates { max-height: none; }
    .excel-table-wrap { max-height: calc(100vh - 200px); }

    /* Map day mobile: cells smaller, horizontal scroll */
    .map-day-grid { font-size: 11.5px; }
    .map-day-toolbar { flex-wrap: wrap; }

    /* Module-view-toolbar (Appointments) mobile:
       Row 1: DS/Map ngày/Map tuần tabs (offset right of FAB hamburger)
       Row 2: Hôm nay + ◀ + ▶ + + Tạo (full width, single row, no duplicates) */
    .module-view-toolbar {
        display: flex;
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 6px;
        align-items: center;
        overflow: visible;
        padding: 6px 0 6px 52px; /* leave space for fixed .mobile-menu-fab on left */
        margin: 0 0 8px;
    }
    .module-view-toolbar > .booking-tabs {
        order: 1;
        flex: 1 1 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        min-width: 0;
    }
    .module-view-toolbar > .module-toolbar-spacer { display: none; }
    .module-view-toolbar > .module-view-actions {
        order: 2;
        flex: 1 1 100%;
        margin-left: -52px; /* row 2 spans full width below FAB */
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: space-between;
        align-items: center;
        padding: 0 8px;
    }
    .module-view-toolbar .module-view-actions > a,
    .module-view-toolbar .module-view-actions > button {
        flex: 1 1 auto;
        padding: 6px 8px;
        font-size: 12px;
        min-height: 36px;
        white-space: nowrap;
    }
    /* Hôm nay button takes more space, arrows are compact */
    .module-view-toolbar .module-view-actions > a:first-child {
        flex: 1 1 auto;
    }
    .module-view-toolbar .module-view-actions > a:nth-child(2),
    .module-view-toolbar .module-view-actions > a:nth-child(3) {
        flex: 0 0 auto;
        min-width: 40px;
        padding: 6px 4px;
    }
    .module-view-toolbar .module-view-actions > button {
        flex: 1 1 auto;
    }
    .booking-tabs { width: 100%; }
    .booking-tabs a { padding: 4px 10px; font-size: 12px; flex: 0 0 auto; }
}

/* Apply same compact treatment to /admin/employees (UI010 sync) */
.employee-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.employee-grid > .employee-create-panel { display: none; } /* moved to modal */

/* -------------------------------------------------------------------------
   31. Sidebar self-contained (UI011) — kill topbar, move search + user inside
   ------------------------------------------------------------------------- */
.topbar { display: none !important; } /* legacy: kept partial cho fallback nhưng layout không render */

.sidebar { display: flex; flex-direction: column; }
.sidebar-search {
    padding: 0 var(--space-3) var(--space-2);
    margin: -8px 0 var(--space-2);
}
.sidebar-search > input {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 12.5px;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sidebar-search > input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-softer);
}

.sidebar > .nav-list { flex: 1 1 auto; }

.sidebar-user {
    margin-top: auto;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sidebar-user-info > .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-weight: 700;
    font-size: 12.5px;
    flex: 0 0 auto;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sidebar-user-name-button {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.sidebar-user-name-button:hover {
    color: var(--color-primary);
}
.sidebar-user-logout > button {
    width: 100%;
    padding: 6px 12px;
    font-size: 12.5px;
}

.compact-fieldset {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.compact-fieldset legend {
    padding: 0 var(--space-1);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}
.checkbox-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
    font-weight: 700;
}

/* Mobile menu FAB — top-left, only mobile */
.mobile-menu-fab {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    font-size: 18px;
    z-index: 40;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* Excel-rail width thu nhỏ vì chips 2×2 grid */
:root { --excel-rail-width: 200px; }

/* Excel-rail chips: 2×2 grid thay vì 4 cột 1 hàng */
.excel-rail-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.excel-rail-chips > a {
    text-align: center;
    padding: 5px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 12px;
}

/* Mobile (≤980px): show mobile-menu-fab, sidebar off-canvas */
@media (max-width: 980px) {
    .mobile-menu-fab { display: inline-flex; }
    .admin-shell { grid-template-columns: minmax(0, 1fr); }
    .admin-content { padding-top: 52px; } /* room for FAB */
}

/* -------------------------------------------------------------------------
   32. UI012 — Row action buttons no-wrap + dashboard toolbar bridge +
   booking popover sửa/xóa
   ------------------------------------------------------------------------- */
/* "Sửa" button in <details> summary cell wraps to 2 lines on narrow viewports.
   Force white-space: nowrap and slim padding. */
.row-actions > summary,
.appointment-actions > summary,
.employee-actions > summary,
.patient-actions > summary,
.service-actions > summary {
    white-space: nowrap;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 12.5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    display: inline-block;
    user-select: none;
}
.row-actions > summary:hover { background: var(--color-surface-soft); }
.row-actions[open] > summary { background: var(--color-primary-softer); border-color: var(--color-primary); color: var(--color-primary-strong); }
/* Action cell in tables: min-width to avoid squashing the Sửa button */
.data-table .row-actions,
.excel-table .row-actions { display: inline-block; }
.data-table td:has(.row-actions),
.excel-table td:has(.row-actions) { min-width: 88px; white-space: nowrap; }

/* RBAC matrix and user overrides */
.permission-matrix-note {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-size: 13px;
}
.permission-role-list {
    display: grid;
    gap: var(--space-3);
}
.permission-role-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.permission-role-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 12px;
    cursor: pointer;
    background: var(--color-surface-soft);
}
.permission-role-card > summary span {
    color: var(--color-muted);
    font-size: 12px;
}
.permission-role-card > form {
    padding: var(--space-3);
}
.permission-group {
    margin-bottom: var(--space-3);
}
.permission-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px;
}
.permission-check-grid label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.permission-check-grid b,
.permission-override-row b {
    display: block;
    font-size: 12px;
    color: var(--color-text);
}
.permission-check-grid small,
.permission-override-row small {
    display: block;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11.5px;
    white-space: normal;
}
.permission-override-grid {
    display: grid;
    gap: 6px;
}
.permission-override-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 72px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.permission-override-row > label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
}
.provision-user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px;
    max-height: 46vh;
    overflow: auto;
    padding-right: 2px;
}
.provision-user-grid label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.provision-user-grid b {
    display: block;
    font-size: 12.5px;
}
.provision-user-grid small {
    display: block;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11.5px;
    white-space: normal;
}

/* Dashboard exempt — its page-header has functional actions, so display them
   via a lightweight bar instead of hiding entirely. */
.admin-content > .page-header.dashboard-header { display: flex !important; padding: 0 0 var(--space-2); border-bottom: 0; }

/* Booking popover (Map Day) — Sửa/Xóa action buttons */
.booking-popover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.booking-popover-actions > button,
.booking-popover-actions > a {
    flex: 1 1 auto;
    padding: 4px 8px;
    font-size: 11.5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}
.booking-popover-actions > .is-danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.booking-popover-actions > .is-primary {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
}

/* Map Day — highlight cột của user đang đăng nhập (T035) */
.map-day-staff-head.is-my-column {
    background: hsl(var(--map-block-hue), var(--map-block-sat), 95%);
    border-bottom: 3px solid hsl(var(--map-block-hue), var(--map-block-sat), 50%);
    font-weight: 600;
}
.map-day-staff-head.is-my-column .map-day-staff-name {
    color: hsl(var(--map-block-hue), var(--map-block-sat), 22%);
}

/* Map Day OFF overlay (T036b → T055 styled as booking block) */
.map-day-staff-head.is-off {
    background: rgba(245, 158, 11, 0.1);
    border-bottom: 3px solid #f59e0b;
}
.map-day-off-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
/* T055 — Off-day "block" trong Map Ngày: hiển thị như booking block, có text */
.map-day-off-block {
    position: relative;
    pointer-events: none;
    /* Không set z-index để booking blocks (DOM-render sau) tự nổi trên qua document order */
}
.map-day-off-block::before {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: var(--off-top, 0px);
    height: var(--off-height, 100%);
    background: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0 6px, rgba(245, 158, 11, 0.06) 6px 12px);
    border: 1px dashed rgba(245, 158, 11, 0.55);
    border-left: 3px solid #f59e0b;
    border-radius: 2px;
}
.map-day-off-block .map-day-off-block-inner {
    position: absolute;
    left: 6px;
    right: 6px;
    top: calc(var(--off-top, 0px) + 4px);
    color: #92400e;
    font-size: 11px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    padding: 2px 4px;
    background: rgba(255, 251, 235, 0.85);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(120, 80, 0, 0.08);
    max-height: calc(var(--off-height, 100%) - 8px);
    overflow: hidden;
}
.map-day-off-block strong {
    font-weight: 700;
    color: #b45309;
    letter-spacing: 0.3px;
    font-size: 11px;
}
.map-day-off-block .map-day-off-time {
    font-size: 10px;
    color: #a16207;
    font-weight: 600;
}
.map-day-off-block .map-day-off-title {
    font-size: 10px;
    font-style: italic;
    color: #92400e;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-day-off-block[data-off-type="overtime"]::before {
    background: repeating-linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0 6px, rgba(59, 130, 246, 0.05) 6px 12px);
    border-color: rgba(59, 130, 246, 0.55);
    border-left-color: #3b82f6;
}
.map-day-off-block[data-off-type="overtime"] .map-day-off-block-inner {
    color: #1e40af;
    background: rgba(239, 246, 255, 0.85);
}
.map-day-off-block[data-off-type="overtime"] strong { color: #1d4ed8; }

/* T036c — Excel-shell tighter bottom spacing for Patients / Treatments */
:root { --excel-chrome: 90px; }
.admin-content { padding-bottom: 4px; }
.excel-shell {
    height: calc(100vh - var(--excel-chrome));
    margin-bottom: 0;
}
.excel-table-wrap {
    padding-bottom: 0;
}

/* T037b Kanban board */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.kanban-column {
    background: var(--color-bg-soft, #f6f7fa);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}
.kanban-column-header {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border, #d4d8de);
}
.kanban-cards {
    padding: 8px;
    min-height: 100px;
    flex: 1;
    transition: background .15s;
}
.kanban-cards.is-dragover {
    background: rgba(59, 130, 246, 0.08);
}
.kanban-card {
    background: #fff;
    border: 1px solid var(--border, #d4d8de);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform .12s, box-shadow .12s;
}
.kanban-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.kanban-card.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.kanban-card-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}
.kanban-card-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 4px;
}
.kanban-card-desc {
    font-size: 11px;
    color: var(--color-muted, #6b7280);
    line-height: 1.4;
    margin-bottom: 6px;
}
.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kanban-empty {
    text-align: center;
    color: var(--color-muted, #9ca3af);
    padding: 30px 0;
    font-style: italic;
    font-size: 12px;
}
@media (max-width: 980px) {
    .kanban-board { grid-template-columns: 1fr; }
}

/* T038c — Mobile compact toolbar (≤980px) */
@media (max-width: 980px) {
    /* Module toolbar: 1 hàng menu+chips, flex nowrap với overflow scroll */
    .module-toolbar,
    .module-view-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 6px 8px;
        gap: 6px;
        scrollbar-width: thin;
    }
    .module-toolbar > *,
    .module-view-toolbar > * {
        flex-shrink: 0;
    }
    .module-toolbar-title {
        font-size: 14px;
        white-space: nowrap;
    }
    .stats-chip,
    .module-toolbar .badge,
    .module-toolbar .chip {
        font-size: 11px;
        padding: 2px 8px;
        white-space: nowrap;
    }

    /* Mobile menu FAB: chuyển từ trên cùng xuống cùng row toolbar */
    .mobile-menu-fab {
        position: static !important;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        margin-right: 4px;
        padding: 0;
        font-size: 16px;
        border-radius: 4px;
    }
    .admin-content { padding-top: 4px !important; }

    /* Dashboard chips date (Hôm qua / Hôm nay / Mai) thành nhỏ */
    .dashboard-header .date-action .button,
    .dashboard-header .date-action a {
        padding: 4px 8px;
        font-size: 11px;
    }
    .dashboard-header .date-action {
        gap: 4px;
        flex-shrink: 0;
    }

    /* Appointments tabs đã dùng .label-mobile/.label-desktop spans — không cần ::after.
       Rule cũ [href*="view=..."]::after bám vào cả nút Hôm nay/◀/▶ trong .calendar-toolbar-bottom
       gây ra "Hôm nay Day", "◀ Tuần"... nên đã xoá. */

    /* Media stats 4 ô → 2x2 grid */
    .media-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px;
    }
    .stat-card-grid,
    .appointment-stat-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .stat-card-grid > .stat-card,
    .appointment-stat-grid > .stat-card {
        padding: 6px 8px !important;
        min-height: 0 !important;
    }
    .stat-card-grid > .stat-card strong,
    .appointment-stat-grid > .stat-card strong {
        font-size: 14px !important;
    }
}

/* T038d — Hamburger injected in toolbar mobile + Media 2x2 stats */
@media (max-width: 980px) {
    /* Hide standalone FAB on mobile vì đã có injected hamburger */
    .mobile-menu-fab { display: none !important; }

    /* Hamburger injected — căn giữa cùng hàng với chips/buttons */
    .toolbar-hamburger {
        flex-shrink: 0;
        width: 36px;
        height: 32px;
        padding: 0;
        font-size: 18px;
        line-height: 1;
        background: var(--color-bg-soft, #f1f5f9);
        border: 1px solid var(--border, #d4d8de);
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
    }
    .toolbar-hamburger:hover { background: var(--color-bg, #fff); }

    /* Đảm bảo toolbar align center, không lệch */
    .module-toolbar,
    .module-view-toolbar,
    .dashboard-header {
        align-items: center !important;
    }

    /* admin-content không cần padding-top dự phòng cho FAB nữa */
    .admin-content { padding-top: 4px !important; }
}

/* Media stats: 2 hàng x 2 ô + hamburger ở hàng đầu (mobile) */
@media (max-width: 980px) {
    .media-stats-grid,
    .media-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px;
    }
    /* Khi có hamburger inject vào, hàng đầu = [hamburger][stat1][stat2], hàng 2 = [stat3][stat4] */
    .media-stats-grid > .toolbar-hamburger,
    .media-stats > .toolbar-hamburger {
        grid-column: 1;
        grid-row: 1;
    }
}

/* T038e — IMPROVED hamburger style + outside-display fallback */
.toolbar-hamburger { display: none; }
@media (max-width: 980px) {
    .mobile-menu-fab { display: none !important; }

    /* Hamburger injected — match style với toolbar buttons, OVERRIDE rules cũ */
    .toolbar-hamburger {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        margin: 0 6px 0 0 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: #1f2937 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        cursor: pointer !important;
        user-select: none !important;
        transition: all .15s ease !important;
    }
    .toolbar-hamburger:hover {
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
        border-color: #94a3b8 !important;
    }
    .toolbar-hamburger:active {
        transform: scale(0.96) !important;
    }

    /* Toolbar align all items center vertical, flex wrap */
    .module-toolbar,
    .module-view-toolbar,
    .dashboard-header {
        align-items: center !important;
        gap: 6px !important;
        padding: 8px !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
    .module-toolbar > *,
    .module-view-toolbar > *,
    .dashboard-header > * {
        align-self: center !important;
        flex-shrink: 0 !important;
    }
}

/* T038f — DARK BLUE hamburger giống brand + cover all pages */
@media (max-width: 980px) {
    .toolbar-hamburger {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 8px 0 0 !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #ffffff !important;
        background: linear-gradient(180deg, #0042ab 0%, #003285 100%) !important;
        border: 1px solid #003285 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 50, 133, 0.25) !important;
        cursor: pointer !important;
        user-select: none !important;
        transition: all .15s ease !important;
    }
    .toolbar-hamburger:hover {
        background: linear-gradient(180deg, #003285 0%, #00256c 100%) !important;
        box-shadow: 0 3px 6px rgba(0, 50, 133, 0.35) !important;
        transform: translateY(-1px);
    }
    .toolbar-hamburger:active {
        transform: scale(0.95) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    /* Floating fallback cho page không có toolbar */
    .toolbar-hamburger.is-floating {
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 50 !important;
    }
    /* page-header trên mobile: align center cho hamburger */
    .page-header {
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* T038g — Floating hamburger fallback cho pages không có toolbar */
@media (max-width: 980px) {
    .toolbar-hamburger.is-floating {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 100 !important;
        box-shadow: 0 4px 12px rgba(0, 50, 133, 0.4) !important;
    }
    /* Push admin-content down nhẹ khi có floating button */
    body:has(.toolbar-hamburger.is-floating) .admin-content {
        padding-top: 56px !important;
    }
}

/* T038h — Standalone bar for pages without toolbar + employees/users title hide redundancy */
@media (max-width: 980px) {
    .toolbar-hamburger.is-floating { display: none !important; } /* DISABLE floating, dùng standalone bar */
    .toolbar-hamburger-bar {
        display: block;
        margin: 0 0 8px;
        padding: 0;
    }
    .toolbar-hamburger.is-standalone {
        display: inline-flex !important;
        position: static !important;
    }
    /* Module-toolbar: tighten on mobile employees/users (nhiều stat chip wrap nhiều) */
    .module-toolbar .module-toolbar-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .module-toolbar .module-toolbar-stat {
        font-size: 10.5px !important;
        padding: 2px 6px !important;
    }
    .module-toolbar .module-toolbar-stat strong { font-size: 12px !important; }
    /* Force "Làm mới" / actions cùng hàng */
    .module-toolbar .module-toolbar-spacer { flex: 1; min-width: 0; }
}

/* Always hide is-floating to ensure standalone bar approach */
.toolbar-hamburger.is-floating { display: none !important; }
  .dashboard-grid,
  .lookup-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar,
  .admin-content,
  .welcome-panel {
    padding: var(--space-4);
  }

  .meta-list {
    grid-template-columns: 1fr;
  }

  .user-menu span:last-child {
    display: none;
  }
}

/* ─── Off-day compact form (2-row layout) ─── */
.off-day-form { padding: 10px 12px; }
.off-day-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(140px, 1fr) minmax(180px, 1.2fr);
  gap: 8px 12px;
  align-items: end;
  margin-bottom: 8px;
}
.off-day-row:last-child { margin-bottom: 0; }
.off-day-row-2 {
  grid-template-columns: minmax(240px, 3fr) auto;
}
.off-day-row .off-day-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.off-day-row .off-day-field > span { font-size: 11px; color: #5b6677; font-weight: 600; }
.off-day-row .off-day-field input,
.off-day-row .off-day-field select { width: 100%; }
.off-day-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  height: 100%;
}
.off-day-actions .checkbox-inline { font-size: 12px; white-space: nowrap; }
.off-day-actions .button { flex: 0 0 auto; white-space: nowrap; }

/* Off-day filter bar (gọn 1-2 hàng tùy viewport) */
.off-day-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  gap: 8px 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  align-items: end;
}
.off-day-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.off-day-filter-field > span { font-size: 11px; color: #5b6677; font-weight: 600; }
.off-day-filter-field input,
.off-day-filter-field select { width: 100%; }
.off-day-filter-emp,
.off-day-filter-q { grid-column: span 1; }
.off-day-filter-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 100%;
}
.off-day-filter-actions .button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1180px) {
  .off-day-row { grid-template-columns: 1fr 1fr 1fr; }
  .off-day-row-2 { grid-template-columns: 1fr auto; }
  .off-day-filter { grid-template-columns: repeat(3, minmax(140px, 1fr)) auto; }
  .off-day-filter-q { grid-column: 1 / -2; }
}
@media (max-width: 768px) {
  .off-day-row,
  .off-day-row-2 { grid-template-columns: 1fr; }
  .off-day-actions { justify-content: space-between; flex-wrap: wrap; }
  .off-day-filter { grid-template-columns: 1fr 1fr; }
  .off-day-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .off-day-filter-emp,
  .off-day-filter-q { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .off-day-filter { grid-template-columns: 1fr; }
}

/* ─── Employees row actions (Sửa/Chi tiết same row) ─── */
.employee-actions-cell {
  white-space: nowrap;
  min-width: 200px;
  width: 200px;
  vertical-align: middle;
}
.excel-table td.employee-actions-cell,
.excel-table th:last-child {
  min-width: 200px;
}
.row-action-cluster,
.excel-table .row-action-cluster {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.row-action-cluster > .button,
.row-action-cluster > a.button,
.excel-table .row-action-cluster > .button,
.excel-table .row-action-cluster > button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
  flex-shrink: 0;
}
.employee-actions { display: none !important; }
@media (max-width: 980px) {
  .employee-actions-cell { min-width: 160px; width: auto; }
  .row-action-cluster,
  .excel-table .row-action-cluster {
    flex-wrap: wrap !important;
    justify-content: flex-start;
  }
  .row-action-cluster > .button { flex: 1 1 auto; min-width: 80px; }
}

/* ─── Patient list: smart Ngày sinh column ─── */
.col-dob { font-size: 12px; line-height: 1.3; white-space: nowrap; }
.col-dob .table-note { display: block; font-size: 11px; color: var(--color-muted); }

/* ─── AI analyze panel (off-days, dashboard) ─── */
.ai-result-panel {
  margin: 10px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(64,128,255,0.04), rgba(64,128,255,0.08));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ai-result-panel[hidden] { display: none; }
.ai-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}
.ai-result-header .muted { font-size: 11px; color: var(--color-muted); }
.ai-result-body {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow: auto;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.ai-result-body.is-loading {
  font-style: italic;
  color: var(--color-muted);
}
.ai-result-body.is-error {
  border-color: var(--color-danger, #dc2626);
  color: var(--color-danger, #dc2626);
}
[data-ai-analyze][disabled] { opacity: 0.55; cursor: progress; }

/* T039 responsive cleanup: appointments, employees, off-days */
.calendar-toolbar .label-mobile { display: none; }

.action-cell,
.employee-actions-cell {
  min-width: 170px;
  width: 170px;
  white-space: nowrap;
  vertical-align: middle;
}
.excel-table td.employee-actions-cell,
.excel-table th:last-child {
  min-width: 170px;
}
.action-group,
.row-action-cluster.action-group,
.excel-table .row-action-cluster.action-group {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.action-group > button,
.action-group > .button {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

.off-day-form {
  padding: 12px;
}
.off-day-row {
  grid-template-columns: minmax(260px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr);
  gap: 10px 12px;
}
.off-day-row-2 {
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: center;
}
.off-day-actions .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  line-height: 1.25;
}
.off-day-filter {
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  align-items: end;
}
.off-day-filter-emp {
  grid-column: span 2;
}
.off-day-filter-q {
  grid-column: span 2;
}
.off-day-filter-actions {
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .off-day-filter {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  }
  .off-day-filter-emp,
  .off-day-filter-q {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .calendar-toolbar.module-view-toolbar {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px !important;
    margin: 0 0 10px !important;
    overflow: visible !important;
  }
  .calendar-toolbar > .toolbar-hamburger {
    grid-column: 1;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
  .calendar-toolbar > .calendar-view-tabs {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    min-width: 0;
    display: flex !important;
    gap: 6px;
    overflow: hidden;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }
  .calendar-toolbar > .module-toolbar-spacer {
    display: none !important;
  }
  .calendar-toolbar > .calendar-toolbar-bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px auto;
    gap: 8px !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  .calendar-toolbar .booking-tabs a,
  .calendar-toolbar .calendar-toolbar-bottom > a,
  .calendar-toolbar .calendar-toolbar-bottom > button {
    min-height: 42px;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
  }
  .calendar-toolbar .booking-tabs a {
    flex: 1 1 0 !important;
  }
  .calendar-toolbar .booking-tabs a::after {
    content: none !important;
  }
  .calendar-toolbar .label-desktop {
    display: none;
  }
  .calendar-toolbar .label-mobile {
    display: inline;
  }
  .calendar-toolbar .calendar-create-btn {
    width: auto !important;
    min-width: 84px;
    max-width: 112px;
  }

  .employee-table {
    display: block;
    min-width: 0 !important;
  }
  .employee-table thead {
    display: none;
  }
  .employee-table tbody {
    display: grid;
    gap: 10px;
  }
  .employee-table tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .employee-table td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    padding: 3px 0 !important;
    white-space: normal !important;
  }
  .employee-table td[data-mobile-empty="1"] {
    display: none;
  }
  .employee-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
  }
  .employee-table td:first-child::before,
  .employee-table td.employee-actions-cell::before {
    display: none;
  }
  .employee-table .table-note:empty {
    display: none;
  }
  .employee-table .employee-actions-cell {
    padding-top: 8px !important;
  }
  .employee-table .action-group,
  .employee-table .row-action-cluster.action-group,
  .excel-table .employee-actions-cell .row-action-cluster.action-group {
    justify-content: stretch;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .employee-table .action-group > .button,
  .employee-table .action-group > button {
    flex: 1 1 0 !important;
    min-width: 0;
  }

  .off-day-row,
  .off-day-row-2 {
    grid-template-columns: 1fr !important;
  }
  .off-day-actions {
    justify-content: stretch;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .off-day-actions .checkbox-inline {
    flex: 1 1 auto;
    max-width: none;
  }
  .off-day-actions .button {
    min-height: 42px;
  }
  .off-day-filter {
    grid-template-columns: 1fr 1fr !important;
  }
  .off-day-filter-emp,
  .off-day-filter-q,
  .off-day-filter-actions {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  .calendar-toolbar.module-view-toolbar {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px !important;
  }
  .calendar-toolbar > .calendar-toolbar-bottom {
    grid-template-columns: minmax(0, 1fr) 40px 40px auto;
    gap: 6px !important;
  }
  .calendar-toolbar .calendar-create-btn {
    min-width: 76px;
    max-width: 94px;
  }
  .off-day-actions {
    flex-wrap: wrap;
  }
  .off-day-actions .button {
    width: 100%;
  }
  .off-day-filter {
    grid-template-columns: 1fr !important;
  }
}

/* -------------------------------------------------------------------------
   Desktop sidebar collapse — nút nằm trong sidebar, trên Dashboard
   ------------------------------------------------------------------------- */
.sidebar-collapse-toggle {
    display: none;
}
.nav-icon {
    width: 20px;
    min-width: 20px;
    text-align: center;
    line-height: 1;
}
.nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 981px) {
    html.is-sidebar-collapsed {
        --sidebar-width: 76px;
    }
    html.is-sidebar-collapsed .admin-shell {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }
    .sidebar-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 34px;
        margin: 0 0 var(--space-3);
        padding: 7px 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: #ffffff;
        color: var(--color-text-soft);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .sidebar-collapse-toggle:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary-strong);
        border-color: rgba(0, 66, 171, 0.22);
    }
    .sidebar-collapse-icon {
        width: 18px;
        min-width: 18px;
        line-height: 1;
        text-align: center;
    }
    html.is-sidebar-collapsed .sidebar {
        padding-left: 10px;
        padding-right: 10px;
        align-items: center;
    }
    html.is-sidebar-collapsed .brand {
        width: 100%;
        padding: var(--space-2) 0;
        margin-bottom: var(--space-2);
    }
    html.is-sidebar-collapsed .brand-logo,
    html.is-sidebar-collapsed .sidebar-search input,
    html.is-sidebar-collapsed .sidebar-collapse-label,
    html.is-sidebar-collapsed .nav-group-title,
    html.is-sidebar-collapsed .nav-label,
    html.is-sidebar-collapsed .sidebar-user-name,
    html.is-sidebar-collapsed .sidebar-user-logout {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    html.is-sidebar-collapsed .sidebar-search {
        width: 44px;
        height: 36px;
        display: grid;
        place-items: center;
        margin-bottom: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }
    html.is-sidebar-collapsed .sidebar-search::before {
        content: "🔍";
        font-size: 16px;
        line-height: 1;
    }
    html.is-sidebar-collapsed .sidebar-collapse-toggle {
        width: 44px;
        padding: 0;
        margin-bottom: var(--space-3);
    }
    html.is-sidebar-collapsed .nav-list,
    html.is-sidebar-collapsed .nav-group {
        width: 100%;
        gap: 6px;
    }
    html.is-sidebar-collapsed .nav-item {
        justify-content: center;
        width: 44px;
        height: 40px;
        margin: 0 auto;
        padding: 0;
    }
    html.is-sidebar-collapsed .nav-item::before {
        display: none;
    }
    html.is-sidebar-collapsed .nav-icon {
        width: auto;
        min-width: 0;
        font-size: 17px;
    }
    html.is-sidebar-collapsed .sidebar-user {
        width: 100%;
        align-items: center;
    }
    html.is-sidebar-collapsed .sidebar-user-info {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   T043 — Off-days Map Day + Map Week
   ------------------------------------------------------------------------- */
.off-day-map,
.off-week-map {
    --off-rest-fill: #ffe7d4;
    --off-ot-fill: #cfe2ff;
    --off-rest-strong: #d97706;
    --off-ot-strong: #2563eb;
    --line: #c9d0db;
    --line-soft: #e3e7ee;
    --ink: #1b2433;
    --ink-2: #5b6577;
    --ink-3: #8a93a3;
}

.off-day-map-head,
.off-week-map-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.off-day-map-nav,
.off-week-map-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.off-day-map-jump { display: inline-flex; gap: 6px; align-items: center; }
.off-day-map-jump input[type="date"] { padding: 4px 6px; font-size: 12px; }

.off-day-map-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.off-day-map-grid {
    display: grid;
    grid-template-columns: 56px repeat(var(--col-count, 1), minmax(96px, 1fr));
    grid-template-rows: 44px repeat(var(--row-count, 26), var(--row-h, 22px));
    min-width: max(720px, calc(56px + var(--col-count, 1) * 96px));
}
.off-day-map-corner {
    grid-column: 1; grid-row: 1;
    position: sticky; left: 0; z-index: 4;
    background: #f8fafc;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.off-day-map-emp {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line-soft);
    padding: 6px 8px;
    background: #fbfcff;
    display: flex; flex-direction: column; gap: 1px;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.15;
}
.off-day-map-emp strong { font-weight: 600; font-size: 12.5px; }
.off-day-map-emp small { color: var(--ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }

.off-day-map-time {
    grid-column: 1;
    position: sticky; left: 0; z-index: 3;
    background: #fbfcff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-3);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding-top: 2px;
}
.off-day-map-time.is-hour { color: var(--ink-2); border-bottom-color: var(--line); }
.off-day-map-cell {
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px dashed #eef1f6;
    background: #fff;
}
.off-day-map-cell.is-half { border-bottom-style: dashed; }
.off-day-map-block {
    pointer-events: none;
}
.off-day-map-block-inner {
    position: absolute;
    left: 4px; right: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--off-bg, #ffe7d4);
    background-image: var(--off-stripe);
    border: 1.5px solid var(--off-accent, #d97706);
    color: var(--ink);
    font-size: 11px;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    pointer-events: auto;
    display: flex; flex-direction: column; gap: 2px;
}
.off-day-map-block.is-pending .off-day-map-block-inner {
    border-style: dashed;
    opacity: 0.85;
}
.off-day-map-block-title {
    font-weight: 700;
    font-size: 11px;
    color: var(--off-accent, #d97706);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.off-day-map-block-time {
    font-size: 10.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.off-day-map-block-note {
    font-size: 10.5px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.off-day-map-pending {
    font-size: 11px;
    margin-left: 2px;
}

/* ---- Week heatmap ---- */
.off-week-map-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
    font-size: 11.5px;
    color: var(--ink-2);
}
.off-week-map-legend b { font-weight: 500; font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.off-week-swatch {
    display: inline-block;
    width: 16px; height: 12px;
    border-radius: 3px;
    border: 1px solid var(--line);
}
.off-week-swatch.density-0 { background: #fafbfd; }
.off-week-swatch.density-1 { background: #fde9d6; border-color: #f3c891; }
.off-week-swatch.density-2 { background: #fbc78e; border-color: #e89c4d; }
.off-week-swatch.density-3 { background: #f5a14d; border-color: #d97706; }
.off-week-swatch.density-4 { background: #d97706; border-color: #a55b03; }
.off-week-legend-spacer { flex: 1; }
.off-week-legend-state {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px;
}
.off-week-legend-state .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 999px;
}
.off-week-legend-state .dot.off-rest { background: #d97706; }
.off-week-legend-state .dot.off-ot { background: #2563eb; }

.off-week-map-shell {
    position: relative;
}
.off-week-map-matrix {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    grid-auto-rows: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.off-week-time-head,
.off-week-day-head {
    min-height: 58px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line-soft);
    background: #fff;
}
.off-week-time-head {
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-3); font-size: 10.5px; font-weight: 600;
}
.off-week-day-head {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.1;
}
.off-week-day-head strong { font-weight: 700; font-size: 12.5px; }
.off-week-day-head b { font-weight: 500; color: var(--ink-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.off-week-day-head.is-today { background: #eaf3ff; box-shadow: inset 0 3px 0 var(--accent); }
.off-week-day-head:hover { background: #f1f6ff; }
.off-week-day-counts {
    display: flex; gap: 6px; font-size: 11px; font-variant-numeric: tabular-nums;
}
.off-week-day-counts .off-rest { color: var(--off-rest-strong); }
.off-week-day-counts .off-ot { color: var(--off-ot-strong); }

.off-week-time {
    height: 26px;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 2px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line-soft);
    background: #fbfcff;
    color: var(--ink-3);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}
.off-week-time.is-hour { color: var(--ink-2); }

.off-week-cell {
    position: relative;
    height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: #fafbfd;
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    outline: none;
}
.off-week-cell.is-empty .off-week-cell-num { color: var(--ink-3); font-weight: 400; }
.off-week-cell.density-0 { background: #fafbfd; }
.off-week-cell.density-1 { background: #fde9d6; }
.off-week-cell.density-2 { background: #fbc78e; }
.off-week-cell.density-3 { background: #f5a14d; color: #fff; }
.off-week-cell.density-4 { background: #d97706; color: #fff; }
.off-week-cell.is-today { box-shadow: inset 3px 0 0 var(--accent); }
.off-week-cell:hover, .off-week-cell:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
    z-index: 4;
}
.off-week-cell-num {
    line-height: 1;
    z-index: 1;
}
.off-week-cell-split {
    position: absolute;
    left: 2px; right: 2px; bottom: 1px;
    height: 3px;
    display: flex;
    gap: 1px;
    pointer-events: none;
    border-radius: 2px;
    overflow: hidden;
}
.off-week-cell-split .off-rest { background: var(--off-rest-strong); display: block; height: 100%; }
.off-week-cell-split .off-ot { background: var(--off-ot-strong); display: block; height: 100%; }
.off-week-cell-pending {
    position: absolute;
    top: 1px; right: 2px;
    font-size: 9px;
    line-height: 1;
}

.off-week-floating-tip {
    position: fixed;
    z-index: 10000;
    width: 280px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #111827;
    color: #f8fafc;
    font-size: 11.5px;
    line-height: 1.4;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}
.off-week-floating-tip[hidden] { display: none; }
.off-week-floating-tip strong { font-size: 12px; font-weight: 700; }
.off-week-floating-tip em { color: #cbd5e1; font-style: normal; }
.off-week-tip-row {
    display: grid; grid-template-columns: 18px 1fr; gap: 4px; align-items: start;
}
.off-week-tip-row b.off-rest { color: #fbbf24; }
.off-week-tip-row b.off-ot { color: #93c5fd; }

@media (max-width: 760px) {
    .off-week-map-matrix {
        grid-template-columns: 42px repeat(7, calc((100% - 42px) / 2));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 42px;
    }
    .off-week-day-head { scroll-snap-align: start; }
    .off-week-time, .off-week-time-head {
        position: sticky; left: 0; z-index: 6;
        background: #fff;
        box-shadow: 1px 0 0 var(--line-soft);
    }
    .off-week-floating-tip { display: none !important; }
    .off-day-map-grid {
        min-width: max(560px, calc(56px + var(--col-count, 1) * 88px));
    }
}

/* =====================================================================
   T054 — Map Tuần: block-per-booking layout (thay thế fingerprint lanes)
   ===================================================================== */

/* T055 — Matrix Map Tháng: cột ngày min set bởi rule chính ở .map-week-matrix (xem dòng ~3484).
   Block-mode cells khác Map Tuần cũ: empty cells trong suốt, không click; blocks tự handle. */

/* Empty cells làm grid lines, không click — booking blocks là button button-overlay */
.map-week-cell {
    background: transparent;
    cursor: default;
    padding: 0;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px dashed #eef1f6;
    overflow: visible;
}
.map-week-cell:hover,
.map-week-cell:focus-visible {
    box-shadow: none;
    background: var(--color-primary-softer);
}
.map-week-cell.is-today { background: rgba(43, 110, 246, 0.04); }

/* Day blocks column container — absolute positioning context */
.map-week-blocks-col {
    position: relative;
    pointer-events: none;  /* container không bắt click; blocks tự handle */
    z-index: 5;  /* Đảm bảo blocks luôn nổi trên .map-week-cell (cell có background opaque) */
}

/* Block — gần giống map-day-block nhưng compact hơn */
.map-week-block {
    position: absolute;
    left: 0;
    width: calc(100% - 1px);
    padding: 1px 4px 1px 2px;
    border-radius: 2px;
    background: hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 92%);
    color: hsl(var(--map-block-hue, 200), calc(var(--map-block-sat, 55%) * 0.7), 22%);
    border: 1px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 75%);
    border-left: 2px solid hsl(var(--map-block-hue, 200), var(--map-block-sat, 55%), 50%);
    font-size: 10.5px;
    line-height: 1.15;
    text-align: left;
    cursor: grab;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 1;
    transition: box-shadow 120ms ease, transform 120ms ease, left 140ms ease, width 140ms ease;
}
.map-week-block:hover {
    z-index: 10;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}
.map-week-block:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    z-index: 10;
}
.map-week-block.is-cancel {
    opacity: 0.55;
    background: repeating-linear-gradient(45deg, #fff3f3 0 5px, #ffe3e3 5px 10px);
    border-left-color: var(--s-cancel, #c43a3a);
    text-decoration: line-through;
}
.map-week-block.is-dragging {
    cursor: grabbing;
    opacity: 0.55;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(15,23,42,0.22);
}
.map-week-block.is-resizing {
    cursor: ns-resize;
    z-index: 30;
}
.map-week-block-time {
    font-weight: 700;
    font-size: 10px;
    color: hsl(var(--map-block-hue, 200), calc(var(--map-block-sat, 55%) * 0.7), 28%);
    letter-spacing: -0.01em;
}
.map-week-block-patient {
    font-weight: 600;
    font-size: 10.5px;
    color: var(--ink, #1b2433);
    /* Cho wrap khi block còn không gian dọc (overflow:hidden ở block tự clip phần thừa) */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.map-week-block-doctor {
    font-size: 9.5px;
    color: hsl(var(--map-block-hue, 200), calc(var(--map-block-sat, 55%) * 0.6), 32%);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.map-week-block-title {
    font-size: 9.5px;
    font-style: italic;
    opacity: 0.85;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Narrow: khi cluster overlap → block hẹp → ẩn title, font nhỏ hơn (BS vẫn hiện) */
.map-week-block.is-narrow {
    padding: 1px 2px 1px 1px;
    border-left-width: 2px;
}
.map-week-block.is-narrow .map-week-block-title { display: none; }
.map-week-block.is-narrow .map-week-block-time { font-size: 9px; }
.map-week-block.is-narrow .map-week-block-patient { font-size: 9.5px; }
.map-week-block.is-narrow .map-week-block-doctor { font-size: 9px; }
.map-week-block.is-narrow:hover {
    /* Chỉ nâng z-index, không bung rộng (bung rộng đôi khi che block khác kém ổn định) */
    z-index: 20;
}

/* Resize handles top/bottom */
.map-week-block-resize {
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    cursor: ns-resize;
    background: transparent;
    z-index: 5;
}
.map-week-block-resize.top { top: -1px; }
.map-week-block-resize.bottom { bottom: -1px; }
.map-week-block:hover .map-week-block-resize {
    background: hsla(var(--map-block-hue, 200), var(--map-block-sat, 55%), 35%, 0.5);
}

/* Drop target highlight column khi drag */
.map-week-day-head.is-drop-target {
    box-shadow: inset 0 -3px 0 var(--color-primary);
    background: var(--color-primary-softer);
}
.map-week-ghost {
    position: absolute;
    pointer-events: none;
    background: rgba(43, 110, 246, 0.18);
    border: 2px dashed var(--color-primary);
    border-radius: 2px;
    z-index: 25;
}
.map-week-ghost-label {
    position: absolute;
    top: 2px;
    left: 4px;
    right: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-primary-strong);
    background: var(--color-surface);
    border-radius: 3px;
    padding: 1px 4px;
    box-shadow: var(--shadow-xs);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bỏ legend swatches + filter old: ẩn hết (HTML đã không render nữa nhưng để chắc) */
.map-week-shell.is-detail-view .map-week-matrix { /* legacy class — vô hiệu */
    grid-template-rows: 58px repeat(26, var(--slot-h, 30px));
}
.map-week-shell .map-week-lane,
.map-week-shell .map-week-lanes,
.map-week-shell .map-week-cell-infos,
.map-week-shell .map-week-cell-info,
.map-week-shell .map-week-detail-block,
.map-week-shell .map-week-cell-num,
.map-week-shell .map-week-tooltip { display: none !important; }