/* eContract UI — "diện mạo" dùng chung: màu, font, bo góc, bóng đổ.
   (Layout / khoảng cách / responsive nằm ở style.css) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ========================================================= */
/* 0. TOKENS — nguồn duy nhất cho màu, font, kích thước      */
/* ========================================================= */
:root {
    /* Nền & chữ */
    --ec-bg: #f7f8fa;          /* nhạt hơn: bớt tương phản nền/thẻ cho nhẹ mắt */
    --ec-surface: #ffffff;
    --ec-surface-muted: #fafbfc;
    --ec-ink: #111827;
    --ec-ink-soft: #374151;
    --ec-ink-muted: #6b7280;
    --ec-line: #ebeef3;        /* viền nhạt: phân tách bằng đường mảnh thay vì bóng đổ */
    --ec-line-strong: #d6dbe3;

    /* Màu thương hiệu & trạng thái */
    --ec-primary: #2563eb;
    --ec-primary-hover: #1d4ed8;
    --ec-primary-active: #1e40af;
    --ec-primary-soft: #eff6ff;
    --ec-primary-ring: rgba(37, 99, 235, 0.25);

    --ec-success: #059669;
    --ec-success-hover: #047857;
    --ec-success-soft: #ecfdf5;

    --ec-danger: #dc2626;
    --ec-danger-hover: #b91c1c;
    --ec-danger-soft: #fef2f2;

    --ec-warning: #d97706;
    --ec-warning-hover: #b45309;
    --ec-warning-soft: #fffbeb;
    --ec-warning-solid: #f59e0b; /* nền nút warning (chữ tối cho dễ đọc) */

    --ec-info: #0891b2;
    --ec-info-hover: #0e7490;
    --ec-info-soft: #ecfeff;

    --ec-secondary: #475569;
    --ec-secondary-hover: #334155;

    /* Font */
    --ec-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --fs-xs: 0.75rem;      /* 12px: tiêu đề bảng, badge */
    --fs-sm: 0.8125rem;    /* 13px: bảng, label, dropdown */
    --fs-base: 0.875rem;   /* 14px: nội dung, nút, input */
    --fs-lg: 1rem;         /* 16px: tiêu đề navbar */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Bo góc & bóng */
    --ec-radius-sm: 10px;  /* nút, input, item menu */
    --ec-radius: 14px;     /* card, dropdown */
    --ec-radius-lg: 18px;  /* modal */
    --ec-radius-pill: 999px;
    /* Một bóng rất nhẹ thay cho bóng kép cũ. Phân tách khối chủ yếu dựa vào
       viền 1px mảnh — cách này cho cảm giác phẳng và gọn hơn đổ bóng dày. */
    --ec-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    --ec-shadow-raised: 0 4px 16px rgba(17, 24, 39, 0.07);

    /* Khoảng thở — dùng chung cho padding của card/bảng/modal */
    --ec-pad-sm: 0.625rem;
    --ec-pad: 1rem;
    --ec-pad-lg: 1.25rem;
    --ec-dur: 0.22s;
    --ec-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout dùng chung */
    --ec-header-h: 56px;   /* navbar và sidebar-heading cùng chiều cao */
    --ec-sidebar-w: 250px;

    /* Alias cũ — giữ để HTML/JS cũ không vỡ */
    --brand-dark: var(--ec-ink);
    --brand-primary: var(--ec-primary);
    --corporate-blue: var(--ec-primary);
    --primary-color: var(--ec-primary);
    --text-muted: var(--ec-ink-muted);
    --sidebar-bg: var(--ec-surface);
    --font-size-base: var(--fs-base);
    --font-size-small: var(--fs-sm);
    --font-color-dark: var(--ec-ink);
}

/* ========================================================= */
/* 1. BASE & FONT                                            */
/* ========================================================= */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--ec-bg);
    color: var(--ec-ink);
    font-family: var(--ec-font);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-semibold);
    color: var(--ec-ink);
}

#wrapper,
#page-content-wrapper {
    background-color: var(--ec-bg);
}

/* ========================================================= */
/* 2. HEADER — mọi loại header cùng một kiểu                 */
/*    nền trắng · chữ ink · đậm 600 · viền dưới --ec-line    */
/* ========================================================= */
.navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ec-line) !important;
    min-height: var(--ec-header-h);
}

.navbar h5 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--ec-ink);
}

/* Logo sidebar: cùng chiều cao + cùng đường viền với navbar để hai thanh thẳng hàng */
.sidebar-heading {
    background-color: var(--ec-surface);
    border-bottom: 1px solid var(--ec-line);
    min-height: var(--ec-header-h);
}

.card-header,
.card-header-main,
.modal-header {
    background: var(--ec-surface) !important;
    color: var(--ec-ink) !important;
    border-bottom: 1px solid var(--ec-line) !important;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold) !important;
}

.modal-title {
    font-weight: var(--fw-semibold);
    color: var(--ec-ink);
}

/* Header của card theo trạng thái */
.card-header-main.bg-success {
    background: var(--ec-success-soft) !important;
    color: var(--ec-success-hover) !important;
}
.card-header-main.bg-info {
    background: var(--ec-info-soft) !important;
    color: var(--ec-info-hover) !important;
}

/* Thanh hành động cố định */
#actionHeader {
    background: var(--ec-surface);
    border-bottom: 1px solid var(--ec-line);
}

/* Header bảng */
.table thead th {
    background: var(--ec-surface-muted) !important;
    color: var(--ec-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ec-line);
    white-space: nowrap;
}

/* ========================================================= */
/* 3. BUTTON — màu, trạng thái, focus                        */
/* ========================================================= */
.btn {
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    border-radius: var(--ec-radius-sm);
    /* Nút phẳng, không đổ bóng — bóng trên nút là dấu hiệu dễ thấy của UI cũ. */
    box-shadow: none;
    /* style.css trước đây đè padding xuống 0.3rem/0.6rem khiến nút rất chật;
       rule đó đã bị xoá nên đặt lại ở đây cho thoáng. */
    padding: 0.5rem 0.95rem;
    /* inline-flex + gap: icon và chữ trong nút tự căn giữa và cách nhau đều,
       không cần class me-1/me-2 rải rác trong markup. tasks.html từng tự khai
       báo đúng đoạn này trong <style> riêng — nay gom về một chỗ. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition:
        background-color var(--ec-dur) var(--ec-ease),
        border-color var(--ec-dur) var(--ec-ease),
        color var(--ec-dur) var(--ec-ease),
        box-shadow var(--ec-dur) var(--ec-ease),
        transform var(--ec-dur) var(--ec-ease);
}

.btn-sm {
    font-size: var(--fs-sm);
    padding: 0.375rem 0.7rem;
}

.btn-lg {
    font-size: var(--fs-lg);
    padding: 0.7rem 1.4rem;
}

/* Không nhấc nút lên khi hover. Hiệu ứng translateY cũ làm nội dung quanh nút
   rung nhẹ và là nét đặc trưng của giao diện cũ; phản hồi hover để cho
   màu nền lo (đã khai báo ở bảng màu từng loại nút bên dưới). */
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ec-primary-ring);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    box-shadow: none;
}

/* Bảng màu từng loại nút: b = nền, bh = hover, ba = active, bt = màu chữ */
.btn-primary   { --ec-b: var(--ec-primary);       --ec-bh: var(--ec-primary-hover);   --ec-ba: var(--ec-primary-active); }
.btn-success   { --ec-b: var(--ec-success);       --ec-bh: var(--ec-success-hover);   --ec-ba: var(--ec-success-hover); }
.btn-danger    { --ec-b: var(--ec-danger);        --ec-bh: var(--ec-danger-hover);    --ec-ba: var(--ec-danger-hover); }
.btn-info      { --ec-b: var(--ec-info);          --ec-bh: var(--ec-info-hover);      --ec-ba: var(--ec-info-hover); }
.btn-secondary { --ec-b: var(--ec-secondary);     --ec-bh: var(--ec-secondary-hover); --ec-ba: var(--ec-secondary-hover); }
.btn-warning   { --ec-b: var(--ec-warning-solid); --ec-bh: var(--ec-warning);         --ec-ba: var(--ec-warning); --ec-bt: #1c1917; }

.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-secondary, .btn-warning {
    --bs-btn-bg: var(--ec-b);
    --bs-btn-border-color: var(--ec-b);
    --bs-btn-color: var(--ec-bt, #fff);
    --bs-btn-hover-bg: var(--ec-bh);
    --bs-btn-hover-border-color: var(--ec-bh);
    --bs-btn-hover-color: var(--ec-bt, #fff);
    --bs-btn-active-bg: var(--ec-ba);
    --bs-btn-active-border-color: var(--ec-ba);
    --bs-btn-active-color: var(--ec-bt, #fff);
    background-color: var(--ec-b);
    border-color: var(--ec-b);
    color: var(--ec-bt, #fff);
}

.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-secondary:hover, .btn-warning:hover,
.btn-primary:focus, .btn-success:focus, .btn-danger:focus, .btn-info:focus, .btn-secondary:focus, .btn-warning:focus {
    background-color: var(--ec-bh);
    border-color: var(--ec-bh);
    color: var(--ec-bt, #fff);
}

.btn-primary:active, .btn-success:active, .btn-danger:active, .btn-info:active, .btn-secondary:active, .btn-warning:active {
    background-color: var(--ec-ba) !important;
    border-color: var(--ec-ba) !important;
    color: var(--ec-bt, #fff) !important;
}

/* Outline: viền + chữ cùng màu, hover tô nền nhạt */
.btn-outline-primary { --ec-o: var(--ec-primary); --ec-oh: var(--ec-primary-hover); --ec-os: var(--ec-primary-soft); }
.btn-outline-success { --ec-o: var(--ec-success); --ec-oh: var(--ec-success-hover); --ec-os: var(--ec-success-soft); }
.btn-outline-danger  { --ec-o: var(--ec-danger);  --ec-oh: var(--ec-danger-hover);  --ec-os: var(--ec-danger-soft); }

.btn-outline-primary, .btn-outline-success, .btn-outline-danger {
    background: transparent;
    border-color: var(--ec-o);
    color: var(--ec-o);
    box-shadow: none;
}

.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover,
.btn-outline-primary:active, .btn-outline-success:active, .btn-outline-danger:active {
    background-color: var(--ec-os) !important;
    border-color: var(--ec-oh) !important;
    color: var(--ec-oh) !important;
}

/* Nút phụ (Hủy, Đặt lại...) */
.btn-light,
.btn-outline-secondary {
    background-color: #f1f5f9;
    border-color: var(--ec-line-strong);
    color: var(--ec-secondary);
}
.btn-light:hover,
.btn-outline-secondary:hover {
    background-color: var(--ec-line);
    border-color: #94a3b8;
    color: var(--ec-ink);
}

/* Trạng thái loading */
.btn-loading,
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after,
.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ec-spin 0.7s linear infinite;
}

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

/* ========================================================= */
/* 4. CARD, FORM, BẢNG, BADGE                                */
/* ========================================================= */
.card {
    background: var(--ec-surface);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    font-size: var(--fs-base);
}

/* Metric cards */
.optimized-card .card-title-optimized {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.optimized-card .card-value-optimized {
    font-weight: var(--fw-bold);
    color: var(--ec-primary);
}

.optimized-card.bg-primary,
.card.bg-primary {
    background: linear-gradient(180deg, var(--ec-primary) 0%, var(--ec-primary-hover) 100%) !important;
}
.optimized-card.bg-warning { background: var(--ec-warning-soft) !important; color: var(--ec-warning) !important; }
.optimized-card.bg-success { background: var(--ec-success-soft) !important; color: var(--ec-success) !important; }
.optimized-card.bg-danger  { background: var(--ec-danger-soft) !important;  color: var(--ec-danger) !important; }

/* Form */
.form-control,
.form-select,
.select2-container .select2-selection--single {
    font-family: inherit;
    font-size: var(--fs-base);
    border-color: var(--ec-line);
    border-radius: var(--ec-radius-sm);
    transition: border-color var(--ec-dur) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease);
}

.form-control-sm,
.form-select-sm {
    font-size: var(--fs-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 3px var(--ec-primary-ring);
}

.form-control::placeholder {
    color: #94a3b8;
    font-style: italic;
    opacity: 1;
}

.form-label {
    color: var(--ec-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

/* Bảng */
.table {
    color: var(--ec-ink);
    font-size: var(--fs-sm);
}

.table tbody tr {
    transition: background-color var(--ec-dur) var(--ec-ease);
}

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

/* Badge: bo tròn, cùng cỡ chữ ở mọi nơi */
.badge {
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
    border-radius: var(--ec-radius-pill);
}

.badge-success-toned { background-color: var(--ec-success-soft) !important; color: var(--ec-success-hover) !important; }
.badge-warning-toned { background-color: var(--ec-warning-soft) !important; color: var(--ec-warning-hover) !important; }
.badge-info-toned    { background-color: var(--ec-info-soft) !important;    color: var(--ec-info-hover) !important; }
.bg-success-soft     { background-color: var(--ec-success-soft); }

.text-success { color: var(--ec-success) !important; }
.text-danger  { color: var(--ec-danger) !important; }

.text-dark-contrast {
    color: var(--ec-ink) !important;
    font-weight: var(--fw-semibold) !important;
}

/* List group (nội dung chính) */
.list-group-item {
    background-color: var(--ec-surface);
    border-color: var(--ec-line);
    font-size: var(--fs-base);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--ec-surface-muted);
    color: var(--ec-ink);
    text-decoration: none;
}

.list-group-item.list-group-item-success { background-color: var(--ec-success-soft); color: var(--ec-success-hover); font-weight: var(--fw-medium); }
.list-group-item.list-group-item-warning { background-color: var(--ec-warning-soft); color: var(--ec-warning-hover); font-weight: var(--fw-medium); }
.list-group-item.list-group-item-danger  { background-color: var(--ec-danger-soft);  color: var(--ec-danger-hover);  font-weight: var(--fw-medium); }

.dynamic-field-group {
    background-color: var(--ec-surface);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-sm);
}

/* ========================================================= */
/* 5. MODAL, DROPDOWN, TOAST                                 */
/* ========================================================= */
.modal.fade .modal-dialog {
    transform: translateY(10px);
    transition: transform 0.24s var(--ec-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-content {
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-lg);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.modal-footer {
    border-color: var(--ec-line);
}

.dropdown-menu {
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    padding: 0.4rem;
    animation: ec-dropdown 0.18s var(--ec-ease);
}

.dropdown-item {
    border-radius: 7px;
    font-size: var(--fs-sm);
    transition: background-color var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ec-primary-soft);
    color: var(--ec-primary);
}

.toast {
    border: 0;
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    animation: ec-fade-in 0.22s var(--ec-ease);
}

.toast.bg-info .toast-body,
.toast.bg-success .toast-body,
.toast.bg-danger .toast-body {
    color: #fff;
}

/* ========================================================= */
/* 6. SIDEBAR — màu & font (kích thước/khoảng cách ở style.css) */
/* ========================================================= */
#sidebar-wrapper {
    background: var(--ec-surface);
    border-right: 1px solid var(--ec-line);
}

#sidebar-wrapper .list-group-item {
    background: transparent;
    color: var(--ec-ink-soft);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: var(--ec-radius-sm);
    transition:
        background-color var(--ec-dur) var(--ec-ease),
        color var(--ec-dur) var(--ec-ease),
        transform var(--ec-dur) var(--ec-ease);
}

#sidebar-wrapper .list-group-item i {
    color: var(--ec-ink-muted);
    opacity: 0.8;
}

#sidebar-wrapper .list-group-item:hover {
    background-color: var(--ec-primary-soft);
    color: var(--ec-primary);
    transform: translateX(2px);
}

#sidebar-wrapper .list-group-item:hover i {
    color: var(--ec-primary);
}

#sidebar-wrapper .list-group-item.active {
    background: var(--ec-primary) !important;
    color: #fff !important;
    font-weight: var(--fw-semibold);
    box-shadow: none;
}

#sidebar-wrapper .list-group-item.active i {
    color: #fff !important;
    opacity: 1;
}

/* ========================================================= */
/* 7. HIỆU ỨNG & SCROLLBAR                                   */
/* ========================================================= */
@keyframes ec-dropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ec-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.container-fluid.py-3,
.main-layout,
#contract-section,
.card {
    animation: ec-fade-in 0.26s var(--ec-ease);
}

#step-send-otp,
#step-verify-otp,
.signing-step,
.wizard-step,
.step-pane {
    animation: ec-fade-in 0.24s var(--ec-ease);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--ec-line-strong);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 767.98px) {
    .btn:hover:not(:disabled),
    #sidebar-wrapper .list-group-item:hover {
        transform: none;
    }
}
/* ========================================================= */
/* 8. TIẾP CẬN & CHUYỂN ĐỘNG                                 */
/* ========================================================= */

/* Tôn trọng thiết lập "giảm chuyển động" của hệ điều hành.
   Phần trên có fade-in cho .card/.modal và transform cho .btn — với người
   bị say chuyển động (motion sensitivity) những hiệu ứng đó gây khó chịu. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Vành focus thấy được cho mọi thứ bấm được, không chỉ .btn.
   Dùng :focus-visible nên chuột bấm sẽ không hiện vành — chỉ hiện khi
   điều hướng bằng bàn phím. */
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.accordion-button:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--ec-primary);
    outline-offset: 2px;
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--ec-primary);
    outline-offset: 1px;
}

/* ========================================================= */
/* 10. CÁC COMPONENT CÒN THIẾU                               */
/* ========================================================= */

/* --- Nút: các biến thể chưa được phủ ở mục 3 --------------- */
/* btn-dark (6 lượt, gồm nút Đăng xuất ở partner/portal),
   btn-link (11), btn-outline-info (14), btn-outline-dark (2),
   btn-outline-warning — trước đây rơi về mặc định Bootstrap. */
.btn-dark {
    --ec-b: var(--ec-ink);
    --ec-bh: #1e293b;
    --ec-ba: #0b1220;
    --bs-btn-bg: var(--ec-b);
    --bs-btn-border-color: var(--ec-b);
    --bs-btn-hover-bg: var(--ec-bh);
    --bs-btn-hover-border-color: var(--ec-bh);
    background-color: var(--ec-b);
    border-color: var(--ec-b);
    color: #fff;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--ec-bh);
    border-color: var(--ec-bh);
    color: #fff;
}

.btn-outline-info    { --ec-o: var(--ec-info);    --ec-oh: var(--ec-info-hover);    --ec-os: var(--ec-info-soft); }
.btn-outline-warning { --ec-o: var(--ec-warning); --ec-oh: var(--ec-warning-hover); --ec-os: var(--ec-warning-soft); }
.btn-outline-dark    { --ec-o: var(--ec-ink-soft); --ec-oh: var(--ec-ink);          --ec-os: var(--ec-surface-muted); }

.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark {
    background: transparent;
    border-color: var(--ec-o);
    color: var(--ec-o);
    box-shadow: none;
}

.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-dark:hover,
.btn-outline-info:active,
.btn-outline-warning:active,
.btn-outline-dark:active {
    background-color: var(--ec-os) !important;
    border-color: var(--ec-oh) !important;
    color: var(--ec-oh) !important;
}

.btn-link {
    box-shadow: none;
    color: var(--ec-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
    padding-inline: 0.25rem;
}

.btn-link:hover {
    color: var(--ec-primary-hover);
    text-decoration: underline;
    transform: none;
}

/* --- Alert (23 lượt, trước đây hoàn toàn chưa có) ---------- */
.alert {
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
    font-size: var(--fs-base);
    padding: 0.75rem 1rem;
}

.alert-heading {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
}

.alert-info      { background: var(--ec-info-soft);    border-color: var(--ec-info);    color: var(--ec-info-hover); }
.alert-success   { background: var(--ec-success-soft); border-color: var(--ec-success); color: var(--ec-success-hover); }
.alert-warning   { background: var(--ec-warning-soft); border-color: var(--ec-warning); color: var(--ec-warning-hover); }
.alert-danger    { background: var(--ec-danger-soft);  border-color: var(--ec-danger);  color: var(--ec-danger-hover); }
.alert-secondary,
.alert-light     { background: var(--ec-surface-muted); border-color: var(--ec-line-strong); color: var(--ec-ink-soft); }

/* --- Nav pills / tabs ------------------------------------- */
/* Dùng ở danh mục tài liệu của partner/portal (#file-navigator).
   Chỉ nhắm .nav-pills/.nav-tabs, KHÔNG nhắm .nav-link chung, để không
   đụng vào 48 thanh navbar. */
.nav-pills .nav-link {
    border-radius: var(--ec-radius-sm);
    color: var(--ec-ink-soft);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: 0.5rem 0.7rem;
    text-align: left;
    transition: background-color var(--ec-dur) var(--ec-ease),
                color var(--ec-dur) var(--ec-ease);
}

.nav-pills .nav-link:hover {
    background-color: var(--ec-primary-soft);
    color: var(--ec-primary-hover);
}

.nav-pills .nav-link.active {
    background-color: var(--ec-primary);
    color: #fff;
    font-weight: var(--fw-semibold);
}

.nav-pills .nav-link i {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

.nav-tabs {
    border-bottom: 1px solid var(--ec-line);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ec-ink-muted);
    font-weight: var(--fw-medium);
}

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--ec-primary);
    color: var(--ec-primary);
}

/* --- Input group, form check, switch ---------------------- */
.input-group-text {
    background-color: var(--ec-surface-muted);
    border-color: var(--ec-line-strong);
    color: var(--ec-ink-muted);
    font-size: var(--fs-sm);
}

.form-check-input:checked {
    background-color: var(--ec-primary);
    border-color: var(--ec-primary);
}

.form-check-label {
    color: var(--ec-ink-soft);
    font-size: var(--fs-sm);
}

/* --- Bảng: biến thể chưa phủ ------------------------------ */
.table-light > :not(caption) > * > *,
.table thead.table-light th {
    background-color: var(--ec-surface-muted);
    border-bottom-color: var(--ec-line-strong);
    color: var(--ec-ink-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table-sm > :not(caption) > * > * {
    padding: 0.4rem 0.5rem;
}

/* --- Card header: KHÔNG thêm rule ở đây -------------------- */
/* Mục 4 đã xử lý .card-header / .card-header-main / .modal-header và cố ý
   làm phẳng các header màu đặc về nền trắng + chữ tối, bằng !important
   (kể cả ghi đè .text-white). Thêm rule tô nền lại ở đây sẽ cho ra
   chữ tối trên nền đậm — mất tương phản ở 18 card header dùng
   .bg-primary .text-white. Muốn đổi diện mạo card header thì sửa mục 4. */

/* --- Accordion (sidebar menu dùng 47 lượt) ---------------- */
.accordion-button {
    background-color: transparent;
    box-shadow: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

.accordion-button:not(.collapsed) {
    background-color: var(--ec-primary-soft);
    color: var(--ec-primary-hover);
}

.accordion-item {
    border-color: var(--ec-line);
}

/* --- Nút đóng, spinner, progress -------------------------- */
.btn-close {
    box-shadow: none;
    opacity: 0.6;
    transition: opacity var(--ec-dur) var(--ec-ease);
}

/* Mục 4 làm phẳng .modal-header về nền trắng, nhưng 40 modal trong hệ thống
   vẫn mang .btn-close-white — Bootstrap cài filter: invert(1) cho class này
   nên icon X thành màu trắng. Trắng trên trắng = nút đóng vô hình.
   Trả filter về mặc định để nút đóng hiện lại. */
.btn-close-white {
    filter: none;
}

/* Cùng nguyên nhân với .btn-close-white: mục 4 làm sáng header, nhưng vẫn còn
   phần tử con mang .text-white (Bootstrap đặt !important) nên thành chữ trắng
   trên nền sáng. Các ca thật trong hệ thống:
     - view-tasks.html : <h5 class="modal-title text-white">        -> mất tiêu đề modal
     - view-tasks.html : <button class="btn btn-light ... text-white"> (#btnProcessTask)
     - dashboard.html  : <a class="btn btn-sm btn-light text-white">  ("Xem tất cả")
   Chỉ nhắm trong phạm vi bề mặt đã biết là sáng, để không phá các chỗ
   text-white hợp lệ trên nền tối. */
.modal-header.text-white,
.card-header.text-white,
.modal-header .text-white,
.card-header .text-white,
.btn-light.text-white,
.btn-outline-secondary.text-white {
    color: var(--ec-ink) !important;
}

.btn-close:hover {
    opacity: 1;
    transform: none;
}

.spinner-border {
    border-width: 2px;
}

.progress {
    background-color: var(--ec-line);
    border-radius: var(--ec-radius-pill);
    height: 6px;
}

.progress-bar {
    background-color: var(--ec-primary);
    border-radius: var(--ec-radius-pill);
}

/* ========================================================= */
/* 11. TIỆN ÍCH DÙNG CHUNG                                   */
/* ========================================================= */

/* --- Chip trạng thái chứng từ ------------------------------ */
/* Dùng cho "ĐÃ KÝ HOÀN THÀNH" / "ĐÃ TỪ CHỐI" / "ĐÃ KHÓA" ở luồng ký,
   thay cho <span class="text-success"> chữ trần hiện tại. */
.ec-chip {
    align-items: center;
    background: var(--ec-surface-muted);
    border: 1px solid var(--ec-line-strong);
    border-radius: var(--ec-radius-pill);
    color: var(--ec-ink-soft);
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    gap: 0.35rem;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}

.ec-chip::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
}

.ec-chip--signed   { background: var(--ec-success-soft); border-color: var(--ec-success); color: var(--ec-success-hover); }
.ec-chip--rejected { background: var(--ec-danger-soft);  border-color: var(--ec-danger);  color: var(--ec-danger-hover); }
.ec-chip--locked   { background: var(--ec-warning-soft); border-color: var(--ec-warning); color: var(--ec-warning-hover); }
.ec-chip--pending  { background: var(--ec-info-soft);    border-color: var(--ec-info);    color: var(--ec-info-hover); }

/* --- Skeleton khi đang tải -------------------------------- */
/* Để trang không nhảy layout lúc chờ: dùng cho trang PDF chưa render
   và cho dòng bảng đang nạp dữ liệu. */
.ec-skeleton {
    background: linear-gradient(
        90deg,
        var(--ec-line) 25%,
        var(--ec-surface-muted) 37%,
        var(--ec-line) 63%
    );
    background-size: 400% 100%;
    border-radius: var(--ec-radius-sm);
    animation: ec-shimmer 1.4s ease-in-out infinite;
}

@keyframes ec-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.ec-skeleton--text {
    height: 0.85em;
    margin-block: 0.3em;
}

.ec-skeleton--page {
    aspect-ratio: 1 / 1.414; /* tỉ lệ A4 — giữ chỗ đúng cho trang PDF */
    width: 100%;
}

/* --- Thanh thao tác dính đáy (cảm ứng) -------------------- */
/* Trên điện thoại, hành động chính phải nằm trong tầm ngón tay.
   env(safe-area-inset-bottom) tránh thanh gesture của iPhone. */
.ec-action-bar {
    background: var(--ec-surface);
    border-top: 1px solid var(--ec-line);
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767.98px) {
    .ec-action-bar--sticky {
        bottom: 0;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
        left: 0;
        position: fixed;
        right: 0;
        z-index: 1045; /* dưới .modal (1055), trên nội dung */
    }

    /* Chừa chỗ để thanh dính không che mất phần cuối nội dung */
    .ec-has-action-bar {
        padding-bottom: 76px;
    }
}

/* Hành động chính chiếm phần lớn chiều ngang để nổi bật hơn hành động phụ */
.ec-action-bar .ec-action-primary {
    flex: 2 1 auto;
}

.ec-action-bar .ec-action-secondary {
    flex: 1 1 auto;
}

/* --- Nền đặt tài liệu ------------------------------------- */
.ec-doc-surface {
    background: var(--ec-surface-muted);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
}

/* --- Tiện ích nhỏ ----------------------------------------- */
.ec-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ẩn khỏi mắt nhưng vẫn đọc được bằng screen reader */
.ec-sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ========================================================= */
/* 12. KHOẢNG THỞ & HÌNH HỌC                                 */
/* ========================================================= */

/* Trước đây hình học (padding/margin) nằm rải ở css/style.css và chồng lên
   tầng này. style.css đã được rút về layout trang (sidebar/navbar/responsive),
   nên toàn bộ hình học của COMPONENT gom về đây — một nguồn duy nhất.
   Giá trị đặt thoáng hơn bản cũ: bản cũ dùng .btn{padding:.3rem .6rem},
   .table th{padding:.5rem} nên nhìn rất chật. */

/* --- Card --------------------------------------------------- */
.card-body {
    padding: var(--ec-pad-lg);
}

.card-header,
.card-header-main {
    padding: var(--ec-pad) var(--ec-pad-lg);
}

.card-footer {
    background: var(--ec-surface);
    border-top: 1px solid var(--ec-line);
    padding: var(--ec-pad) var(--ec-pad-lg);
}

/* --- Bảng: dòng cao hơn, dễ quét mắt ------------------------ */
.table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
}

.table-sm > :not(caption) > * > * {
    padding: 0.45rem 0.6rem;
}

/* Bỏ đường kẻ ngang cuối bảng cho gọn */
.table > :not(:first-child) {
    border-top-color: var(--ec-line);
}

.table tbody tr:last-child > * {
    border-bottom-width: 0;
}

.table-hover tbody tr:hover > * {
    background-color: var(--ec-surface-muted);
}

/* --- Form --------------------------------------------------- */
.form-control,
.form-select {
    padding: 0.55rem 0.8rem;
}

.form-control-sm,
.form-select-sm {
    padding: 0.4rem 0.65rem;
}

.form-label {
    margin-bottom: 0.35rem;
}

.input-group-text {
    padding: 0.55rem 0.8rem;
}

/* --- Modal -------------------------------------------------- */
.modal-header {
    padding: var(--ec-pad) var(--ec-pad-lg);
}

.modal-body {
    padding: var(--ec-pad-lg);
}

.modal-footer {
    padding: var(--ec-pad) var(--ec-pad-lg);
}

.modal-content {
    box-shadow: var(--ec-shadow-raised);
}

/* --- list-group chung --------------------------------------- */
.list-group-item {
    padding: 0.7rem var(--ec-pad);
}

/* --- Sidebar: hình học của item ----------------------------- */
/* Những giá trị này trước ở css/style.css section 1 và đè lên tầng token.
   Nay gộp vào đây cùng phần màu sắc để sidebar chỉ còn một nơi định nghĩa. */
#sidebar-wrapper .list-group-item {
    align-items: center;
    border: 1px solid transparent;
    display: flex;
    margin: 3px 8px;
    padding: 0.6rem 0.75rem;
}

#sidebar-wrapper .list-group-item i {
    flex-shrink: 0;
    font-size: 16px;
    margin-right: 10px;
    text-align: center;
    width: 20px;
}

/* Mũi tên accordion luôn nằm sát phải */
#sidebar-wrapper .list-group-item .fa-chevron-down {
    font-size: 10px;
    margin-left: auto;
    opacity: 0.45;
    transition: transform var(--ec-dur) var(--ec-ease);
}

#sidebar-wrapper .list-group-item[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Mục con trong accordion: thụt lề bằng viền dọc thay vì padding-left trơ */
#sidebar-wrapper .list-group-item.ps-5 {
    border-left: 2px solid var(--ec-line);
    border-radius: 0 var(--ec-radius-sm) var(--ec-radius-sm) 0;
    margin-left: 10px;
    padding-left: 0.85rem !important;
}

#sidebar-wrapper .list-group-item.ps-5.active {
    border-left-color: var(--ec-primary);
}

/* --- Navbar ------------------------------------------------- */
.navbar {
    min-height: var(--ec-header-h);
    padding-block: 0.4rem;
}

/* --- Dropdown ----------------------------------------------- */
.dropdown-menu {
    box-shadow: var(--ec-shadow-raised);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: var(--ec-radius-sm);
    padding: 0.5rem 0.7rem;
}

/* --- Badge -------------------------------------------------- */
.badge {
    padding: 0.35em 0.65em;
}

/* --- Alert -------------------------------------------------- */
.alert {
    padding: var(--ec-pad) var(--ec-pad-lg);
}

/* ========================================================= */
/* 13. CHUYỂN TRANG MỀM (js/app-router.js)                   */
/* ========================================================= */

/* Thanh tiến trình mảnh ở đỉnh cửa sổ. Thay cho cảm giác "trang trắng" của
   MPA: người dùng cần một tín hiệu là hệ thống đã nhận cú bấm. Bề rộng chạy
   tới 70% rồi dừng (ta không biết còn bao lâu), khi xong thì vọt lên 100%
   và mờ dần. */
.ec-route-progress {
    background: var(--ec-primary);
    border-radius: 0 2px 2px 0;
    height: 2px;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transform-origin: 0 50%;
    transition: width 0.25s var(--ec-ease), opacity 0.2s var(--ec-ease);
    width: 0;
    z-index: 2000;   /* trên cả modal-backdrop (1050) */
}

.ec-route-progress.is-active {
    opacity: 1;
    transition: width 7s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.1s;
    width: 70%;
}

.ec-route-progress.is-done {
    opacity: 0;
    transition: width 0.15s var(--ec-ease), opacity 0.25s var(--ec-ease) 0.1s;
    width: 100%;
}

/* Trong lúc nạp: làm mờ nhẹ phần nội dung và chặn click, nhưng KHÔNG ẩn nó.
   Ẩn đi là tái tạo đúng cái nhấp nháy trắng mà ta đang muốn bỏ — giữ nội dung
   cũ trên màn hình cho tới khi có nội dung mới là cách chuyển trang êm nhất. */
.ec-routing #page-content-wrapper > *:not(nav) {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s var(--ec-ease);
}

.ec-routing {
    cursor: progress;
}

/* Nội dung mới hiện lên: chỉ một nhịp mờ dần rất ngắn, đủ để mắt nhận ra là
   vùng này vừa đổi mà không gây cảm giác chờ. */
.ec-router-on #page-content-wrapper > *:not(nav) {
    animation: ec-route-in 0.22s var(--ec-ease) both;
}

@keyframes ec-route-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Tôn trọng cài đặt giảm chuyển động của hệ điều hành: bỏ hết hiệu ứng,
   chỉ còn thanh tiến trình đứng im. */
@media (prefers-reduced-motion: reduce) {
    .ec-route-progress,
    .ec-routing #page-content-wrapper > *:not(nav),
    .ec-router-on #page-content-wrapper > *:not(nav) {
        animation: none !important;
        transition: none !important;
    }
}


/* ========================================================= */
/* 13. ĐỒNG BỘ & HIỆN ĐẠI HÓA (rà soát giao diện)            */
/* ========================================================= */
/* Mục này chỉ dùng CSS, không đổi cấu trúc DOM (xem docs/dom-contract.md).
   Mọi giá trị lấy từ token ở mục 0. */

/* --- 13.1 Layout: sidebar cố định độ rộng, nội dung co giãn ------------- */
/* Trước đây #sidebar-wrapper chỉ có width nên bị flexbox co lại khi bảng rộng
   (từ 210px xuống ~140px, chữ menu bị xuống dòng). Nay chốt cứng độ rộng,
   còn vùng nội dung được phép co (min-width:0) để bảng cuộn trong .table-responsive. */
:root {
    --ec-sidebar-w: 248px;
}

@media (min-width: 768px) {
    #wrapper > #sidebar-wrapper {
        flex: 0 0 var(--ec-sidebar-w);
        width: var(--ec-sidebar-w);
        min-width: var(--ec-sidebar-w);
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    #wrapper > #page-content-wrapper {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* --- 13.2 Menu: mục cha đang mở dịu hơn, chỉ trang hiện tại nổi bật -------- */
#sidebar-wrapper .list-group-item[data-bs-toggle="collapse"].active {
    background: var(--ec-primary-soft) !important;
    color: var(--ec-primary) !important;
    box-shadow: none;
}

#sidebar-wrapper .list-group-item[data-bs-toggle="collapse"].active i {
    color: var(--ec-primary) !important;
}

#sidebar-wrapper .list-group-item.ps-5 {
    font-size: var(--fs-sm);
}

/* --- 13.3 Nút ở đầu card: hành động chính luôn là màu chủ đạo ------------- */
/* Trang thì btn-light, trang thì btn-dark cho cùng một việc ("Thêm mới"). */
.card-header .btn-light,
.card-header-main .btn-light {
    background: var(--ec-primary-soft);
    border-color: transparent;
    color: var(--ec-primary);
    font-weight: var(--fw-semibold);
}

.card-header .btn-light:hover,
.card-header .btn-light:focus-visible,
.card-header-main .btn-light:hover {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #fff;
}

.card-header .btn-dark,
.card-header-main .btn-dark {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #fff;
    font-weight: var(--fw-semibold);
}

.card-header .btn-dark:hover,
.card-header-main .btn-dark:hover {
    background: var(--ec-primary-hover);
    border-color: var(--ec-primary-hover);
}

/* --- 13.4 Nút thao tác trong bảng: nhỏ gọn, tông nhạt, không rớt dòng ----- */
/* Trước đây mỗi dòng có cụm nút vàng/xanh/đỏ đặc sặc sỡ và xuống 2 hàng. */
.table td .btn-sm {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    display: inline-flex;
    gap: 0.35rem;
    height: 32px;
    justify-content: center;
    min-width: 32px;
    padding: 0 0.6rem;
    vertical-align: middle;
}

.table td .btn-sm + .btn-sm {
    margin-left: 4px;
}

.table td:has(> .btn-sm),
.table td:has(> .d-flex > .btn-sm) {
    white-space: nowrap;
}

.table td .btn-sm.btn-primary   { background: var(--ec-primary-soft); color: var(--ec-primary); }
.table td .btn-sm.btn-info      { background: var(--ec-info-soft);    color: var(--ec-info-hover); }
.table td .btn-sm.btn-success   { background: var(--ec-success-soft); color: var(--ec-success-hover); }
.table td .btn-sm.btn-warning   { background: var(--ec-warning-soft); color: var(--ec-warning-hover); }
.table td .btn-sm.btn-danger    { background: var(--ec-danger-soft);  color: var(--ec-danger); }
.table td .btn-sm.btn-secondary,
.table td .btn-sm.btn-light     { background: #f1f5f9; color: var(--ec-secondary); }

.table td .btn-sm.btn-primary:hover   { background: var(--ec-primary);       color: #fff; }
.table td .btn-sm.btn-info:hover      { background: var(--ec-info);          color: #fff; }
.table td .btn-sm.btn-success:hover   { background: var(--ec-success);       color: #fff; }
.table td .btn-sm.btn-warning:hover   { background: var(--ec-warning-solid); color: #1f2937; }
.table td .btn-sm.btn-danger:hover    { background: var(--ec-danger);        color: #fff; }
.table td .btn-sm.btn-secondary:hover,
.table td .btn-sm.btn-light:hover     { background: var(--ec-secondary);     color: #fff; }

/* --- 13.5 Bảng: hover nhẹ, hàng trống cân đối ------------------------------ */
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--ec-primary-soft);
    background-color: var(--ec-primary-soft);
}

.table td[colspan] {
    color: var(--ec-ink-muted);
}

/* --- 13.6 Card: viền mảnh + bóng nhẹ, dùng chung ---------------------------- */
.card {
    border-color: var(--ec-line);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
}

.card > .card-header:first-child {
    border-radius: calc(var(--ec-radius) - 1px) calc(var(--ec-radius) - 1px) 0 0;
}

.card-header .fas,
.card-header .far,
.card-header-main .fas,
.card-header-main .far {
    color: var(--ec-primary);
}

/* --- 13.7 Thẻ chỉ số của trang báo cáo: cùng ngôn ngữ với Dashboard --------- */
/* Trước đây dùng nền đặc theo màu Bootstrap mặc định (#007bff, #28a745...) */
.report-metric-card {
    --rm: var(--ec-primary);
    --rm-soft: var(--ec-primary-soft);
    background: var(--ec-surface) !important;
    border: 1px solid var(--ec-line);
    border-left: 4px solid var(--rm);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow) !important;
    color: var(--ec-ink) !important;
    min-height: 104px;
    padding: 1rem 1.1rem;
}

.report-metric-card.bg-success   { --rm: var(--ec-success); --rm-soft: var(--ec-success-soft); }
.report-metric-card.bg-danger    { --rm: var(--ec-danger);  --rm-soft: var(--ec-danger-soft); }
.report-metric-card.bg-info      { --rm: var(--ec-info);    --rm-soft: var(--ec-info-soft); }
.report-metric-card.bg-warning   { --rm: var(--ec-warning-solid); --rm-soft: var(--ec-warning-soft); }
.report-metric-card.bg-secondary { --rm: var(--ec-secondary); --rm-soft: #f1f5f9; }

.report-metric-card > .small {
    color: var(--ec-ink-muted);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
}

.report-metric-card > i {
    align-items: center;
    background: var(--rm-soft);
    border-radius: 12px;
    color: var(--rm);
    display: inline-flex !important;
    font-size: 1.1rem !important;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.report-metric-card > h4 {
    color: var(--ec-ink);
    font-size: 1.85rem;
    font-weight: var(--fw-bold);
    margin: 0.35rem 0 0;
}

/* --- 13.8 Form: nhãn và trợ giúp đồng nhất ---------------------------------- */
.form-label {
    color: var(--ec-ink-soft);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.form-text {
    color: var(--ec-ink-muted);
    font-size: var(--fs-xs);
}

/* --- 13.9 Tiêu đề trang trong navbar ----------------------------------------- */
.navbar h5.fw-bold {
    font-weight: var(--fw-semibold) !important;
}

/* --- 13.10 Hiệu chỉnh sau rà soát ------------------------------------------- */
/* Biểu tượng trong nút phải theo màu chữ của nút, không bị tô xanh như biểu tượng tiêu đề. */
.card-header .btn .fas,
.card-header .btn .far,
.card-header .btn .fab,
.card-header-main .btn .fas,
.card-header-main .btn .far,
.card-header-main .btn .fab {
    color: inherit;
}

/* Nhãn thẻ báo cáo: chiều cao cố định để các số ở cùng một hàng */
.report-metric-card > .small {
    line-height: 1.3;
    min-height: 2.6em;
}

/* Tiêu đề navbar: một số trang gắn text-secondary (xám nhạt) làm lệch với các trang còn lại */
.navbar h5.text-secondary {
    color: var(--ec-ink) !important;
}

/* --- 13.11 Nút bật/tắt sidebar: một kiểu duy nhất cho mọi trang ------------- */
/* Trước đây: nút đặc, nút viền, nút nhạt tùy từng trang. */
#sidebarToggle {
    align-items: center;
    background: var(--ec-primary-soft);
    border: 0;
    border-radius: 10px;
    color: var(--ec-primary);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: background-color var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease);
    width: 36px;
}

#sidebarToggle:hover,
#sidebarToggle:focus-visible {
    background: var(--ec-primary);
    color: #fff;
}

/* --- 13.12 Hành động "Thêm mới" ở đầu card luôn là nút chủ đạo đặc ---------- */
/* Trang thì xanh lá (btn-success), trang thì xám đậm (btn-dark), trang thì nhạt (btn-light). */
.card-header .btn:has(> .fa-plus),
.card-header-main .btn:has(> .fa-plus) {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #fff;
    font-weight: var(--fw-semibold);
}

.card-header .btn:has(> .fa-plus):hover,
.card-header .btn:has(> .fa-plus):focus-visible,
.card-header-main .btn:has(> .fa-plus):hover {
    background: var(--ec-primary-hover);
    border-color: var(--ec-primary-hover);
    color: #fff;
}

.card-header .btn:has(> .fa-plus):disabled,
.card-header-main .btn:has(> .fa-plus):disabled {
    opacity: 0.5;
}