@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   DESIGN TOKENS — CSS Custom Properties
   Light mode: nền trắng ấm, accent xanh dương Navy.
   Dark  mode: nền xám đậm Slate, text trắng ngà, accent tím Violet.
   ========================================================================== */

:root,
[data-theme="light"] {
    /* Surfaces */
    --hr-bg-body:          #f0f4f8;
    --hr-bg-surface:       #ffffff;
    --hr-bg-surface-alt:   #f8fafc;
    --hr-bg-hover:         #edf2f7;

    /* Sidebar */
    --hr-sidebar-from:     #0f2557;
    --hr-sidebar-to:       #2d1b6b;
    --hr-sidebar-text:     #c8d4f0;
    --hr-sidebar-active:   rgba(255, 255, 255, 0.18);
    --hr-sidebar-hover:    rgba(255, 255, 255, 0.09);

    /* Top bar */
    --hr-topbar-bg:        #ffffff;
    --hr-topbar-border:    #e2e8f0;
    --hr-topbar-text:      #1e293b;

    /* Text */
    --hr-text-primary:     #1e293b;
    --hr-text-secondary:   #64748b;
    --hr-text-muted:       #94a3b8;

    /* Borders */
    --hr-border:           #e2e8f0;
    --hr-border-light:     #f1f5f9;

    /* Brand / Accent */
    --hr-accent:           #2563eb;
    --hr-accent-hover:     #1d4ed8;
    --hr-accent-light:     #eff6ff;
    --hr-link:             #2563eb;

    /* Semantic colors */
    --hr-success:          #16a34a;
    --hr-success-bg:       #f0fdf4;
    --hr-warning:          #d97706;
    --hr-warning-bg:       #fffbeb;
    --hr-danger:           #dc2626;
    --hr-danger-bg:        #fef2f2;
    --hr-info:             #0891b2;
    --hr-info-bg:          #f0f9ff;

    /* Cards / Tables */
    --hr-card-bg:          #ffffff;
    --hr-card-shadow:      0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --hr-card-shadow-lg:   0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.06);
    --hr-table-stripe:     #f8fafc;
    --hr-table-hover:      #eef2f8;

    /* Inputs */
    --hr-input-bg:         #ffffff;
    --hr-input-border:     #cbd5e1;
    --hr-input-focus:      #93c5fd;
    --hr-input-text:       #1e293b;
    --hr-input-radius:     8px;

    /* Radius */
    --hr-radius-sm:        6px;
    --hr-radius:           10px;
    --hr-radius-lg:        14px;
    --hr-radius-xl:        20px;

    /* Toggle button */
    --hr-toggle-bg:        #e2e8f0;

    /* Transitions */
    --hr-transition:       background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    --hr-transition-fast:  all 0.15s ease;
}

[data-theme="dark"] {
    /* Surfaces */
    --hr-bg-body:          #0b0f1a;
    --hr-bg-surface:       #141827;
    --hr-bg-surface-alt:   #1c2136;
    --hr-bg-hover:         #242a42;

    /* Sidebar */
    --hr-sidebar-from:     #0a1530;
    --hr-sidebar-to:       #1a0a30;
    --hr-sidebar-text:     #a8b4d0;
    --hr-sidebar-active:   rgba(124, 111, 247, 0.3);
    --hr-sidebar-hover:    rgba(124, 111, 247, 0.12);

    /* Top bar */
    --hr-topbar-bg:        #141827;
    --hr-topbar-border:    #1f2540;
    --hr-topbar-text:      #e2e8f0;

    /* Text */
    --hr-text-primary:     #e2e8f0;
    --hr-text-secondary:   #94a3b8;
    --hr-text-muted:       #64748b;

    /* Borders */
    --hr-border:           #1f2540;
    --hr-border-light:     #191e33;

    /* Brand / Accent */
    --hr-accent:           #7c6ff7;
    --hr-accent-hover:     #6b5fe5;
    --hr-accent-light:     #1e1a3f;
    --hr-link:             #818cf8;

    /* Semantic colors */
    --hr-success:          #22c55e;
    --hr-success-bg:       #0f2a1a;
    --hr-warning:          #f59e0b;
    --hr-warning-bg:       #2a1f08;
    --hr-danger:           #f87171;
    --hr-danger-bg:        #2a0f0f;
    --hr-info:             #38bdf8;
    --hr-info-bg:          #0a1f2a;

    /* Cards / Tables */
    --hr-card-bg:          #141827;
    --hr-card-shadow:      0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
    --hr-card-shadow-lg:   0 4px 12px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.3);
    --hr-table-stripe:     #181d2e;
    --hr-table-hover:      #1f2540;

    /* Inputs */
    --hr-input-bg:         #1c2136;
    --hr-input-border:     #2d3555;
    --hr-input-focus:      #7c6ff7;
    --hr-input-text:       #e2e8f0;
    --hr-input-radius:     8px;

    /* Radius — same */
    --hr-radius-sm:        6px;
    --hr-radius:           10px;
    --hr-radius-lg:        14px;
    --hr-radius-xl:        20px;

    /* Toggle button */
    --hr-toggle-bg:        #1f2540;

    /* Transitions */
    --hr-transition:       background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    --hr-transition-fast:  all 0.15s ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--hr-bg-body);
    color: var(--hr-text-primary);
    transition: var(--hr-transition);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hr-text-primary);
}

h1:focus { outline: none; }

a, .btn-link {
    color: var(--hr-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: var(--hr-accent-hover); }

/* ==========================================================================
   BUTTONS — hệ thống nút đẹp & nhất quán
   ========================================================================== */

/* ── Base overrides ── */
.btn {
    font-family: inherit;
    font-size: 0.825rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--hr-radius-sm);
    padding: 0.4rem 0.875rem;
    transition: var(--hr-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.4;
    white-space: nowrap;
    border-width: 1px;
    cursor: pointer;
}

.btn:focus-visible {
    outline: 2px solid var(--hr-accent);
    outline-offset: 2px;
}

.btn-sm {
    font-size: 0.775rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--hr-radius-sm);
}

.btn-lg {
    font-size: 0.925rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--hr-radius);
}

/* ── Primary ── */
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--hr-accent) 0%, var(--hr-accent-hover) 100%);
    border-color: var(--hr-accent-hover);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3), 0 0 0 0 rgba(37, 99, 235, 0);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--hr-accent-hover) 0%, #1a45c0 100%);
    border-color: #1a45c0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
    color: #fff;
}

/* ── Success ── */
.btn-success {
    color: #fff;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border-color: #15803d;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    border-color: #166534;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

.btn-success:active {
    transform: translateY(0);
    color: #fff;
}

/* ── Danger ── */
.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #b91c1c;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

.btn-danger:active {
    transform: translateY(0);
    color: #fff;
}

/* ── Outline variants ── */
.btn-outline-primary {
    color: var(--hr-accent);
    border-color: var(--hr-accent);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--hr-accent-light);
    color: var(--hr-accent);
    border-color: var(--hr-accent);
    transform: translateY(-1px);
}

.btn-outline-secondary {
    color: var(--hr-text-secondary);
    border-color: var(--hr-border);
    background: var(--hr-bg-surface);
}

.btn-outline-secondary:hover {
    background-color: var(--hr-bg-hover);
    color: var(--hr-text-primary);
    border-color: var(--hr-border);
    transform: translateY(-1px);
}

.btn-outline-success {
    color: var(--hr-success);
    border-color: var(--hr-success);
    background: transparent;
}

.btn-outline-success:hover {
    background: var(--hr-success-bg);
    color: var(--hr-success);
    border-color: var(--hr-success);
    transform: translateY(-1px);
}

.btn-outline-danger {
    color: var(--hr-danger);
    border-color: var(--hr-danger);
    background: transparent;
}

.btn-outline-danger:hover {
    background: var(--hr-danger-bg);
    color: var(--hr-danger);
    border-color: var(--hr-danger);
    transform: translateY(-1px);
}

/* ── Light/muted ── */
.btn-light {
    background: var(--hr-bg-surface-alt);
    border-color: var(--hr-border);
    color: var(--hr-text-primary);
}

.btn-light:hover {
    background: var(--hr-bg-hover);
    color: var(--hr-text-primary);
    border-color: var(--hr-border);
}

/* ── Icon-only button ── */
.btn-icon {
    padding: 0.3rem 0.45rem;
    line-height: 1;
}

/* ==========================================================================
   DARK MODE TOGGLE BUTTON — icon only, premium design
   ========================================================================== */

.btn-theme-toggle {
    /* Size: perfect circle */
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;

    /* Shape & surface */
    border-radius: 50%;
    background: var(--hr-toggle-bg);
    border: 1.5px solid var(--hr-border);

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Interaction */
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: hidden;

    /* Smooth all transitions */
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Glow ring on hover */
.btn-theme-toggle:hover {
    background: var(--hr-bg-hover);
    border-color: var(--hr-accent);
    /* fallback cho Safari < 16.2, Chrome < 111 */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hr-accent) 18%, transparent);
    transform: scale(1.1);
}

.btn-theme-toggle:active {
    transform: scale(0.9);
    box-shadow: none;
}

/* Focus visible ring for accessibility */
.btn-theme-toggle:focus-visible {
    outline: 2px solid var(--hr-accent);
    outline-offset: 3px;
}

/* ── Icon wrapper ── */
.theme-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Both icons share position */
.theme-icon-wrap .icon-sun,
.theme-icon-wrap .icon-moon {
    position: absolute;
    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Light mode: show sun, hide moon ── */
.btn-theme-toggle.is-light .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #f59e0b; /* amber */
}
.btn-theme-toggle.is-light .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    color: var(--hr-text-secondary);
}

/* ── Dark mode: show moon, hide sun ── */
.btn-theme-toggle.is-dark .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #818cf8; /* indigo-400 */
}
.btn-theme-toggle.is-dark .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
    color: var(--hr-text-secondary);
}

/* Spin animation on click — triggered via .is-spinning class added by JS
   (dùng class thay vì :active để animation chạy đủ trên mobile touch) */
.btn-theme-toggle.is-spinning .theme-icon-wrap {
    animation: theme-spin 0.35s ease forwards;
}

@keyframes theme-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(180deg); }
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

.form-control,
.form-select {
    background-color: var(--hr-input-bg);
    border: 1px solid var(--hr-input-border);
    border-radius: var(--hr-input-radius);
    color: var(--hr-input-text);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--hr-input-bg);
    border-color: var(--hr-accent);
    color: var(--hr-input-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hr-accent) 15%, transparent);
    outline: none;
}

.form-control::placeholder {
    color: var(--hr-text-muted);
    font-style: italic;
}

.form-label {
    color: var(--hr-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.8rem;
    padding: 0.325rem 0.6rem;
    border-radius: var(--hr-radius-sm);
}

/* ── Input group ── */
.input-group .form-control {
    border-right: none;
}

.input-group .btn {
    border-radius: 0 var(--hr-radius-sm) var(--hr-radius-sm) 0;
}

/* ==========================================================================
   CARDS — elevated + clean
   ========================================================================== */

.card {
    background-color: var(--hr-card-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-card-shadow);
    color: var(--hr-text-primary);
    transition: var(--hr-transition);
}

.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--hr-border-light);
    color: var(--hr-text-primary);
    padding: 1rem 1.25rem 0.875rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background-color: var(--hr-bg-surface-alt);
    border-top: 1px solid var(--hr-border-light);
}

/* ── KPI card variant ── */
.kpi-card {
    border-radius: var(--hr-radius-lg);
    border: 1px solid var(--hr-border);
    border-left: 4px solid var(--hr-accent);   /* thanh viền xanh bên trái */
    background: var(--hr-card-bg);
    box-shadow: var(--hr-card-shadow);
    padding: 1.25rem 1.25rem 1.25rem 1.125rem; /* bù trừ 4px border-left */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

/* Mỗi card dùng màu accent của icon tương ứng */
.kpi-card:has(.kpi-card-icon-green)  { border-left-color: var(--hr-success); }
.kpi-card:has(.kpi-card-icon-blue)   { border-left-color: var(--hr-accent); }
.kpi-card:has(.kpi-card-icon-yellow) { border-left-color: var(--hr-warning); }
.kpi-card:has(.kpi-card-icon-red)    { border-left-color: var(--hr-danger); }
.kpi-card:has(.kpi-card-icon-purple) { border-left-color: #7c3aed; }

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hr-card-shadow-lg);
}

.kpi-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* KPI icon colors — dùng token thay vì hardcode màu.
   Light: nền pastel nhạt (opacity 12%) + màu semantic từ token.
   Dark : được xử lý tự động vì token đã đổi giá trị — không cần override riêng. */
.kpi-card-icon-blue {
    background: color-mix(in srgb, var(--hr-accent) 12%, transparent);
    /* fallback cho browser cũ không hỗ trợ color-mix */
    background: rgba(37, 99, 235, 0.12);
    background: color-mix(in srgb, var(--hr-accent) 12%, transparent);
    color: var(--hr-accent);
}
.kpi-card-icon-green {
    background: rgba(22, 163, 74, 0.12);
    background: color-mix(in srgb, var(--hr-success) 12%, transparent);
    color: var(--hr-success);
}
.kpi-card-icon-yellow {
    background: rgba(217, 119, 6, 0.12);
    background: color-mix(in srgb, var(--hr-warning) 12%, transparent);
    color: var(--hr-warning);
}
.kpi-card-icon-red {
    background: rgba(220, 38, 38, 0.12);
    background: color-mix(in srgb, var(--hr-danger) 12%, transparent);
    color: var(--hr-danger);
}
.kpi-card-icon-purple {
    /* Purple không có token riêng — dùng rgba fallback + color-mix với accent-hover */
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}
[data-theme="dark"] .kpi-card-icon-purple {
    color: #c4b5fd;
}

.kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0.35rem 0 0.15rem;
    color: var(--hr-text-primary);
}

.kpi-label {
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--hr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-sub {
    font-size: 0.75rem;
    color: var(--hr-text-muted);
    margin-top: 0.1rem;
}

/* ── Chart card ── */
.chart-card {
    border-radius: var(--hr-radius-lg);
    border: 1px solid var(--hr-border);
    background: var(--hr-card-bg);
    box-shadow: var(--hr-card-shadow);
    overflow: hidden;
}

.chart-card-header {
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid var(--hr-border-light);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--hr-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-card-body {
    padding: 0.75rem 1rem 1rem;
}

/* ==========================================================================
   TABLES — clean & readable
   ========================================================================== */

.table {
    color: var(--hr-text-primary);
    border-color: var(--hr-border);
    font-size: 0.83rem;
}

.table thead th {
    background-color: var(--hr-bg-surface-alt);
    color: var(--hr-text-muted);
    border-bottom: 2px solid var(--hr-border);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.875rem;
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--hr-text-primary);
    border-bottom: 1px solid var(--hr-border-light);
    padding: 0.65rem 0.875rem;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--hr-table-stripe);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--hr-table-hover);
    transition: background-color 0.1s ease;
}

.table tfoot td {
    font-weight: 600;
    background-color: var(--hr-bg-surface-alt);
    border-top: 2px solid var(--hr-border);
}

/* ==========================================================================
   BADGES — polished set
   ========================================================================== */

.badge {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.28em 0.65em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    line-height: 1.4;
}

/* Status badges */
.badge-auto {
    background: var(--hr-success-bg);
    color: var(--hr-success);
    /* fallback */ border: 1px solid rgba(22, 163, 74, 0.25);
    border: 1px solid color-mix(in srgb, var(--hr-success) 25%, transparent);
}

.badge-manual {
    background: var(--hr-warning-bg);
    color: var(--hr-warning);
    /* fallback */ border: 1px solid rgba(217, 119, 6, 0.25);
    border: 1px solid color-mix(in srgb, var(--hr-warning) 25%, transparent);
}

.badge-failed {
    background: var(--hr-danger-bg);
    color: var(--hr-danger);
    /* fallback */ border: 1px solid rgba(220, 38, 38, 0.25);
    border: 1px solid color-mix(in srgb, var(--hr-danger) 25%, transparent);
}

.badge-migrated {
    background: var(--hr-bg-surface-alt);
    color: var(--hr-text-secondary);
    border: 1px solid var(--hr-border);
}

/* Bootstrap overrides */
.badge.bg-success { background-color: var(--hr-success-bg) !important; color: var(--hr-success) !important; border: 1px solid rgba(22, 163, 74, 0.2); border: 1px solid color-mix(in srgb, var(--hr-success) 20%, transparent); }
.badge.bg-warning { background-color: var(--hr-warning-bg) !important; color: var(--hr-warning) !important; border: 1px solid rgba(217, 119, 6, 0.2); border: 1px solid color-mix(in srgb, var(--hr-warning) 20%, transparent); }
.badge.bg-danger  { background-color: var(--hr-danger-bg)  !important; color: var(--hr-danger)  !important; border: 1px solid rgba(220, 38, 38, 0.2); border: 1px solid color-mix(in srgb, var(--hr-danger) 20%, transparent); }
.badge.bg-primary { background-color: var(--hr-accent-light) !important; color: var(--hr-accent) !important; border: 1px solid rgba(37, 99, 235, 0.2); border: 1px solid color-mix(in srgb, var(--hr-accent) 20%, transparent); }
.badge.bg-info    { background-color: var(--hr-info-bg) !important; color: var(--hr-info) !important; }
.badge.bg-secondary { background-color: var(--hr-bg-surface-alt) !important; color: var(--hr-text-secondary) !important; border: 1px solid var(--hr-border); }
.badge.bg-light   { background-color: var(--hr-bg-surface-alt) !important; color: var(--hr-text-primary) !important; border: 1px solid var(--hr-border); }

/* ==========================================================================
   ALERTS — dark mode fixes + polish
   ========================================================================== */

.alert {
    border-radius: var(--hr-radius);
    border-width: 1px;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
}

.alert-info {
    background-color: var(--hr-info-bg);
    /* fallback */ border-color: rgba(8, 145, 178, 0.3);
    border-color: color-mix(in srgb, var(--hr-info) 30%, transparent);
    color: var(--hr-info);
}

.alert-success {
    background-color: var(--hr-success-bg);
    /* fallback */ border-color: rgba(22, 163, 74, 0.3);
    border-color: color-mix(in srgb, var(--hr-success) 30%, transparent);
    color: var(--hr-success);
}

.alert-warning {
    background-color: var(--hr-warning-bg);
    /* fallback */ border-color: rgba(217, 119, 6, 0.3);
    border-color: color-mix(in srgb, var(--hr-warning) 30%, transparent);
    color: var(--hr-warning);
}

.alert-danger {
    background-color: var(--hr-danger-bg);
    /* fallback */ border-color: rgba(220, 38, 38, 0.3);
    border-color: color-mix(in srgb, var(--hr-danger) 30%, transparent);
    color: var(--hr-danger);
}

.alert-secondary {
    background-color: var(--hr-bg-surface-alt);
    border-color: var(--hr-border);
    color: var(--hr-text-secondary);
}

/* ==========================================================================
   FILTER PANEL — card dùng làm bộ lọc
   ========================================================================== */

.filter-panel {
    background: var(--hr-card-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.filter-panel .filter-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--hr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--hr-border-light);
}

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal-content {
    background-color: var(--hr-bg-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-card-shadow-lg);
    color: var(--hr-text-primary);
}

.modal-header {
    border-bottom: 1px solid var(--hr-border);
    padding: 1.1rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1rem;
}

.modal-footer {
    border-top: 1px solid var(--hr-border);
    padding: 0.875rem 1.5rem;
    gap: 0.5rem;
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown-menu {
    background-color: var(--hr-bg-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    box-shadow: var(--hr-card-shadow-lg);
    padding: 0.35rem;
    font-size: 0.85rem;
}

.dropdown-item {
    color: var(--hr-text-primary);
    border-radius: var(--hr-radius-sm);
    padding: 0.45rem 0.75rem;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hr-bg-hover);
    color: var(--hr-text-primary);
}

.dropdown-divider {
    border-top: 1px solid var(--hr-border-light);
    margin: 0.35rem 0;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.page-link {
    background-color: var(--hr-bg-surface);
    border: 1px solid var(--hr-border);
    color: var(--hr-link);
    border-radius: var(--hr-radius-sm) !important;
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    transition: var(--hr-transition-fast);
}

.page-link:hover {
    background-color: var(--hr-bg-hover);
    border-color: var(--hr-accent);
    color: var(--hr-accent);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--hr-accent) 0%, var(--hr-accent-hover) 100%);
    border-color: var(--hr-accent-hover);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.page-item.disabled .page-link {
    background-color: var(--hr-bg-surface-alt);
    border-color: var(--hr-border);
    color: var(--hr-text-muted);
}

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */

.content {
    padding-top: 1.25rem;
}

/* ==========================================================================
   PAGE HEADER UTILITY
   ========================================================================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    font-size: clamp(1.2rem, 4vw, 1.65rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--hr-text-primary);
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   VALIDATION
   ========================================================================== */

.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--hr-success);
    outline-offset: -1px;
}

.invalid {
    outline: 2px solid var(--hr-danger);
    outline-offset: -1px;
}

.validation-message {
    color: var(--hr-danger);
    font-size: 0.78rem;
    margin-top: 0.3rem;
    display: block;
}

/* ==========================================================================
   SYNCFUSION LICENSE BANNER — ẩn thông báo "license key is invalid" khi dev local
   ========================================================================== */

/* Banner dạng notification bar ở top */
.e-license-text-container,
.e-license-banner,
div[style*="syncfusion.com/products/communitylicense"] {
    display: none !important;
}

/* ==========================================================================
   SYNCFUSION SFGRID — GLOBAL OVERRIDES
   ========================================================================== */

/* Root theme colors */
.e-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    min-width: 100% !important;
    font-family: inherit !important;
    font-size: 0.83rem !important;
    color: var(--hr-text-primary) !important;
    background-color: var(--hr-card-bg) !important;
    border: 1px solid var(--hr-border) !important;
    border-radius: var(--hr-radius-lg) !important;
    box-shadow: var(--hr-card-shadow) !important;
}

/* Ẩn text rác aria-label / id bị render ra ngoài grid */
.e-grid > [id*="_header_table"],
.e-grid > [class*="sfgrid"],
.e-grid caption,
.e-grid .e-hide,
.e-gridheader > [id*="header"],
.e-table > caption,
/* Caption của table ẩn accessibility — Syncfusion 34.x */
.e-grid table caption,
.e-grid .e-table caption,
.e-gridheader table caption,
.e-gridcontent table caption {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

/* Ẩn aria-label accessibility hint text "PRESS ENTER TO SORT..." thừa
   Syncfusion 34.x render chúng trong span.e-headercelldiv > span (không phải .e-headertext) */
.e-grid .e-headercell .e-headercelldiv > span:not(.e-headertext):not(.e-icons) {
    display: none !important;
}

/* Header — không wrap chữ */
.e-grid .e-headercell,
.e-grid .e-header-cells {
    background-color: var(--hr-bg-surface-alt) !important;
    color: var(--hr-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-color: var(--hr-border) !important;
    padding: 0.6rem 0.875rem !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.e-grid .e-headercell .e-headercelldiv {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.e-grid .e-headercell .e-headertext {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.e-grid .e-gridheader .e-headercontent {
    border-top-left-radius: calc(var(--hr-radius-lg) - 1px) !important;
    border-top-right-radius: calc(var(--hr-radius-lg) - 1px) !important;
    overflow: hidden !important;
}

/* Row cells */
.e-grid .e-rowcell {
    color: var(--hr-text-primary) !important;
    border-color: var(--hr-border-light) !important;
    padding: 0.625rem 0.875rem !important;
    background-color: transparent !important;
    vertical-align: middle !important;
    transition: background-color 0.1s ease !important;
}

/* Alternating rows */
.e-grid .e-altrow .e-rowcell {
    background-color: var(--hr-table-stripe) !important;
}

/* Hover */
.e-grid .e-row:hover .e-rowcell,
.e-grid tr.e-row:hover .e-rowcell {
    background-color: var(--hr-table-hover) !important;
}

/* Pager */
.e-grid .e-gridpager,
.e-pager {
    background-color: var(--hr-bg-surface-alt) !important;
    border-top: 1px solid var(--hr-border) !important;
    color: var(--hr-text-secondary) !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 0.875rem !important;
    border-bottom-left-radius: calc(var(--hr-radius-lg) - 1px) !important;
    border-bottom-right-radius: calc(var(--hr-radius-lg) - 1px) !important;
}

/* Ẩn hoàn toàn container số trang (1, 2, 3...) trong SfGrid pager —
   chỉ giữ lại thông tin "X of Y pages" và dropdown rows-per-page */
.e-pager .e-numericcontainer,
.e-pager .e-pagercontainer {
    display: none !important;
}

/* Ẩn highlight số trang hiện tại (fallback cho các version khác) */
.e-pager .e-currentitem,
.e-pager li.e-currentitem,
.e-pager .e-numericitem.e-currentitem,
.e-pager .e-numericitem {
    display: none !important;
}

/* Grid content area */
.e-grid .e-gridcontent {
    overflow-x: auto !important;
}

@media (max-width: 767.98px) {
    .e-grid .e-rowcell,
    .e-grid .e-headercell {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.75rem !important;
    }

    .e-pager {
        font-size: 0.75rem !important;
        flex-wrap: wrap;
        padding: 0.35rem 0.5rem !important;
    }

    .e-pager .e-pagerdropdown label {
        display: none;
    }
}

/* ==========================================================================
   SYNCFUSION SFGRID — FOCUS VISIBLE (keyboard navigation)
   Syncfusion mặc định dùng outline xanh nhạt bị mất màu trong dark mode.
   Override để luôn nhìn thấy rõ focus ring theo --hr-accent của từng theme.
   ========================================================================== */

/* Row được chọn / focus khi navigate bằng keyboard */
.e-grid .e-row.e-focused .e-rowcell,
.e-grid .e-row:focus .e-rowcell {
    background-color: var(--hr-accent-light) !important;
}

/* Cell cụ thể đang focused */
.e-grid .e-rowcell.e-focused,
.e-grid td.e-rowcell:focus {
    outline: 2px solid var(--hr-accent) !important;
    outline-offset: -2px !important;
    background-color: var(--hr-accent-light) !important;
}

/* Selected row */
.e-grid .e-row.e-selectionbackground .e-rowcell,
.e-grid .e-active .e-rowcell {
    background-color: var(--hr-accent-light) !important;
    color: var(--hr-text-primary) !important;
}

/* Dark mode: accent-light quá tối, tăng opacity để ring rõ hơn */
[data-theme="dark"] .e-grid .e-rowcell.e-focused,
[data-theme="dark"] .e-grid td.e-rowcell:focus {
    outline-color: var(--hr-accent) !important;
    background-color: var(--hr-bg-hover) !important;
}

[data-theme="dark"] .e-grid .e-row.e-focused .e-rowcell,
[data-theme="dark"] .e-grid .e-row.e-selectionbackground .e-rowcell,
[data-theme="dark"] .e-grid .e-active .e-rowcell {
    background-color: var(--hr-bg-hover) !important;
    color: var(--hr-text-primary) !important;
}

/* Pager buttons — focus ring nhất quán */
.e-pager .e-pagercontainer button:focus-visible,
.e-pager .e-numericitem:focus-visible {
    outline: 2px solid var(--hr-accent) !important;
    outline-offset: 1px !important;
    border-radius: var(--hr-radius-sm) !important;
}

/* ==========================================================================
   SYNCFUSION SFDIALOG — Mobile responsive fix
   Dialog dùng Width="...px" cứng — override về 100vw trên màn hình nhỏ để
   tránh tràn viewport (360-390px) trên điện thoại.
   ========================================================================== */

@media (max-width: 575.98px) {
    .e-dialog {
        max-width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        width: calc(100vw - 1rem) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
    }

    /* Điều chỉnh lại padding nội dung để không quá chật */
    .e-dlg-content {
        padding: 0.875rem 1rem !important;
    }

    .e-footer-content {
        padding: 0.625rem 1rem !important;
    }
}

/* ==========================================================================
   BLAZOR ERROR UI
   ========================================================================== */

#blazor-error-ui {
    background: var(--hr-bg-surface);
    border-top: 2px solid var(--hr-warning);
    color: var(--hr-text-primary);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    display: none;
    left: 0;
    padding: 0.625rem 1.25rem 0.75rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-size: 0.85rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.875rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmk9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #7f1d1d;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--hr-radius);
}

.blazor-error-boundary::after {
    content: "Đã xảy ra lỗi.";
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--hr-bg-body);
    transition: var(--hr-transition);
    position: relative;
    overflow: hidden;
}

.login-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(37, 99, 235, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(124, 58, 237, 0.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .login-bg-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(37, 99, 235, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(124, 58, 237, 0.15) 0%, transparent 55%);
}

.login-card-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 1rem;
}

.login-box {
    background: var(--hr-card-bg);
    border-radius: var(--hr-radius-xl);
    box-shadow: var(--hr-card-shadow-lg);
    border: 1px solid var(--hr-border);
    padding: 2.5rem 2.75rem;
    width: 100%;
    transition: var(--hr-transition);
    animation: loginSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loginSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Brand logo area */
.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-brand-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--hr-accent) 0%, #7c3aed 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.login-brand h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
    color: var(--hr-text-primary);
}

.login-brand .subtitle {
    color: var(--hr-text-muted);
    font-size: 1rem;
    margin: 0;
}

/* Form section title */
.login-form-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hr-text-muted);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hr-border-light);
    text-align: center;
}

/* Login submit button */
.btn-login {
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--hr-radius);
    background: linear-gradient(135deg, var(--hr-accent) 0%, #7c3aed 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    margin-top: 0.5rem;
}

.btn-login:hover {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* ==========================================================================
   SCROLLBAR — dark mode
   ========================================================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--hr-bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2d3555;
    border-radius: 3px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3d4780;
}

/* ==========================================================================
   RESPONSIVE — LOGIN PAGE
   ========================================================================== */

@media (max-width: 575.98px) {
    .login-page {
        align-items: flex-start;
        padding-top: 1.5rem;
    }

    .login-card-wrapper {
        padding: 0.75rem;
    }

    .login-box {
        padding: 1.75rem 1.5rem;
        border-radius: var(--hr-radius-lg);
    }

    .login-brand-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .login-brand h1 {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   RESPONSIVE — GLOBAL
   ========================================================================== */

@media (max-width: 767.98px) {
    .content {
        padding-top: 0.875rem;
    }

    .card-body {
        padding: 1rem;
    }

    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .page-header-actions {
        width: 100%;
    }
}

/* ==========================================================================
   GLOBAL OVERRIDES — Font size, SfGrid full-width, Sidebar nav contrast
   (Các rule này đặt cuối file để override mọi selector trên, kể cả
   Syncfusion !important và Bootstrap. Blazor scoped CSS bundle không cần
   rebuild để những rule này có hiệu lực.)
   ========================================================================== */

/* ── 1. Row cells font size ── */
.e-grid .e-rowcell {
    font-size: 0.83rem !important;
    color: var(--hr-text-primary) !important;
    border-color: var(--hr-border-light) !important;
    padding: 0.65rem 0.875rem !important;
    background-color: transparent !important;
    vertical-align: middle !important;
}

/* ── 2. SfGrid: căn hàng dọc header ↔ data bằng table-layout: fixed
   SyncFusion render header và content trong 2 <table> riêng biệt.
   Với table-layout: auto, mỗi table tự tính chiều rộng cột → lệch nhau.
   Dùng fixed để browser dựa vào col[width] do SyncFusion set → căn đều. ── */
.e-grid .e-table,
.e-grid .e-gridheader table,
.e-grid .e-gridcontent table,
.e-grid .e-gridfooter table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
}

/* Container chứa grid cũng phải full width */
.e-grid,
.e-gridheader,
.e-gridcontent,
.e-gridfooter {
    width: 100% !important;
}

/* Cột cuối không có Width cố định: cho phép giãn theo không gian thừa */
.e-grid .e-rowcell:last-child,
.e-grid .e-headercell:last-child {
    width: auto !important;
}

/* Đảm bảo header/cell không wrap chữ và truncate nếu quá hẹp */
.e-grid .e-headercell,
.e-grid .e-rowcell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── 3. Sidebar nav — contrast cao hơn (global, không cần bundle rebuild) ── */
/* Section labels: TRANG CHỦ / HÓA ĐƠN / QUẢN TRỊ */
.sidebar .nav-section-label {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

/* Nav item links */
.sidebar a.nav-item-link,
.sidebar .nav-item-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Hover */
.sidebar a.nav-item-link:hover,
.sidebar .nav-item-link:hover {
    color: #ffffff !important;
}

/* Active */
.sidebar a.nav-item-link.active,
.sidebar .nav-item-link.active {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Icon opacity */
.sidebar .nav-item-icon {
    opacity: 0.88 !important;
}

/* ── 4. Tăng font button trong bảng ── */
.e-grid .btn-sm {
    font-size: 0.775rem !important;
    padding: 0.3rem 0.65rem !important;
}

/* ── 5. page-header h1 lớn hơn ── */
.page-header h1 {
    font-size: clamp(1.2rem, 4vw, 1.65rem) !important;
}

/* ==========================================================================
   ADMIN PAGES — SfGrid mobile responsive
   Các trang admin (Categories, Users, MappingRules, CompanyMapping, Logs)
   không có scoped CSS file riêng — override tại đây.
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Wrap hàng action button trong bảng admin — tránh overflow */
    .e-grid .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.22rem 0.45rem !important;
    }

    /* Cột có nhiều button action (Thao tác) — cho phép wrap */
    .e-grid .e-rowcell:has(.btn-sm) {
        white-space: normal !important;
        min-width: 120px;
    }

    /* Pager trên admin: ẩn label "Số hàng mỗi trang" để tiết kiệm không gian */
    .e-pager .e-pagerdropdown {
        display: none !important;
    }

    /* Modal/dialog form trong admin: full width */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    /* Trên màn hình rất nhỏ (< 576px): ẩn cột thứ yếu trong admin grids.
       Áp dụng quy ước: cột SortOrder (TT) và CreatedAt ẩn trước. */
    .e-grid .e-headercell[aria-label*="TT"],
    .e-grid .e-rowcell[aria-colindex="1"]:first-child {
        display: none !important;
    }

    /* Nút thao tác trong grid: chỉ để lại icon, ẩn text */
    .e-grid .btn-sm .d-none {
        display: none !important;
    }

    /* Giảm padding grid tối đa */
    .e-grid .e-rowcell,
    .e-grid .e-headercell {
        padding: 0.35rem 0.4rem !important;
        font-size: 0.72rem !important;
    }
}