/* ============================================================================
   iSchool — Bộ nhận diện & hệ thống thiết kế dùng chung
   ----------------------------------------------------------------------------
   Trước đây toàn bộ CSS nằm trong thẻ <style> của header.php với màu hardcode
   rải rác (#14532d, #86efac, #4ade80, #e2e8f0...). Muốn đổi tông thương hiệu
   phải sửa tay từng chỗ. File này gom tất cả về MỘT nguồn: khối :root bên dưới.
   Đổi màu ở :root là đổi cho toàn bộ 59 trang.

   Bootstrap 5.3 biên dịch sẵn mã màu vào từng biến cục bộ của component
   (ví dụ `.btn-primary { --bs-btn-bg: #0d6efd }`), nên KHÔNG thể chỉ ghi đè
   --bs-primary là xong — phải ghi đè từng biến cục bộ. Đó là lý do phần
   "Ghi đè Bootstrap" dài hơn dự kiến.
   ========================================================================== */

:root {
    /* ----- Màu thương hiệu ----- */
    --isc-primary:        #15803d;   /* Màu hành động chính */
    --isc-primary-hover:  #166534;
    --isc-primary-active: #14532d;
    --isc-primary-rgb:    21, 128, 61;
    --isc-primary-subtle: #dcfce7;   /* Nền nhạt cho badge/alert */
    --isc-primary-text:   #14532d;   /* Chữ trên nền nhạt */

    --isc-sidebar-bg:     #14532d;   /* Xanh rừng — nền menu trái */
    --isc-sidebar-text:   #d1fae5;
    --isc-sidebar-muted:  #86efac;   /* Nhãn nhóm menu */
    --isc-sidebar-marker: #4ade80;   /* Vạch đánh dấu mục đang mở */

    --isc-accent:         #0f766e;   /* Xanh mòng két — thay cyan chói của Bootstrap */
    --isc-accent-rgb:     15, 118, 110;

    /* ----- Màu trung tính (thang xám hơi ngả lạnh cho hợp tông xanh) ----- */
    --isc-bg:        #f1f4f9;   /* Nền trang */
    --isc-surface:   #ffffff;   /* Nền thẻ/bảng */
    --isc-border:    #e2e8f0;
    --isc-text:      #1e293b;
    --isc-muted:     #64748b;
    --isc-muted-rgb: 100, 116, 139;

    /* ----- Bo góc & đổ bóng ----- */
    --isc-radius-sm: .375rem;
    --isc-radius:    .5rem;
    --isc-radius-lg: .75rem;
    --isc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --isc-shadow:    0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --isc-shadow-lg: 0 10px 25px rgba(15, 23, 42, .10);

    /* ----- Chữ ----- */
    --isc-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ----- Ánh xạ sang biến Bootstrap (lo phần .text-*, .bg-*, .border-*) ----- */
    --bs-primary:      var(--isc-primary);
    --bs-primary-rgb:  var(--isc-primary-rgb);
    --bs-success:      var(--isc-primary);
    --bs-success-rgb:  var(--isc-primary-rgb);
    --bs-info:         var(--isc-accent);
    --bs-info-rgb:     var(--isc-accent-rgb);
    --bs-secondary:      var(--isc-muted);
    --bs-secondary-rgb:  var(--isc-muted-rgb);

    /* Bootstrap dùng BỘ BIẾN RIÊNG cho nền nhạt / viền nhạt / chữ đậm của mỗi màu
       (.alert-info đọc --bs-info-bg-subtle chứ không đọc --bs-info). Thiếu nhóm này
       thì .text-info đổi sang mòng két còn .alert-info vẫn cyan gốc — lệch tông. */
    --bs-primary-bg-subtle:      var(--isc-primary-subtle);
    --bs-success-bg-subtle:      var(--isc-primary-subtle);
    --bs-primary-text-emphasis:  var(--isc-primary-text);
    --bs-success-text-emphasis:  var(--isc-primary-text);
    --bs-primary-border-subtle:  #a7f3d0;
    --bs-success-border-subtle:  #a7f3d0;

    --bs-info-bg-subtle:         #ccfbf1;
    --bs-info-border-subtle:     #99f6e4;
    --bs-info-text-emphasis:     #115e59;

    --bs-body-color:    var(--isc-text);
    --bs-body-font-family: var(--isc-font);
    --bs-border-color:  var(--isc-border);
    --bs-link-color:    var(--isc-primary);
    --bs-link-color-rgb: var(--isc-primary-rgb);
    --bs-link-hover-color: var(--isc-primary-hover);
    --bs-focus-ring-color: rgba(var(--isc-primary-rgb), .25);
}

/* ============================================================================
   1. Nền tảng chung
   ========================================================================== */

body {
    background: var(--isc-bg);
    font-family: var(--isc-font);
    color: var(--isc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.011em;   /* Tiêu đề lớn siết nhẹ chữ cho gọn mắt */
}

/* Viền tiêu điểm thống nhất — quan trọng cho người dùng dùng bàn phím.
   Chỉ hiện khi điều hướng bằng Tab, không hiện khi bấm chuột. */
:focus-visible {
    outline: 2px solid var(--isc-primary);
    outline-offset: 2px;
}

.card {
    border: none;
    border-radius: var(--isc-radius);
    box-shadow: var(--isc-shadow);
}

/* ============================================================================
   2. Ghi đè Bootstrap — nút bấm
   Bootstrap nhét mã màu cứng vào từng biến cục bộ nên phải liệt kê rõ ràng.
   ========================================================================== */

.btn { font-weight: 500; }

.btn-primary,
.btn-success {
    --bs-btn-bg: var(--isc-primary);
    --bs-btn-border-color: var(--isc-primary);
    --bs-btn-hover-bg: var(--isc-primary-hover);
    --bs-btn-hover-border-color: var(--isc-primary-hover);
    --bs-btn-active-bg: var(--isc-primary-active);
    --bs-btn-active-border-color: var(--isc-primary-active);
    --bs-btn-disabled-bg: var(--isc-primary);
    --bs-btn-disabled-border-color: var(--isc-primary);
    --bs-btn-focus-shadow-rgb: var(--isc-primary-rgb);
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--isc-primary);
    --bs-btn-border-color: var(--isc-primary);
    --bs-btn-hover-bg: var(--isc-primary);
    --bs-btn-hover-border-color: var(--isc-primary);
    --bs-btn-active-bg: var(--isc-primary-active);
    --bs-btn-active-border-color: var(--isc-primary-active);
    --bs-btn-disabled-color: var(--isc-primary);
    --bs-btn-disabled-border-color: var(--isc-primary);
    --bs-btn-focus-shadow-rgb: var(--isc-primary-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--isc-muted);
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: var(--isc-text);
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: var(--isc-text);
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: #94a3b8;
    --bs-btn-focus-shadow-rgb: var(--isc-muted-rgb);
}

.btn-link { --bs-btn-color: var(--isc-primary); --bs-btn-hover-color: var(--isc-primary-hover); }

/* Hàng thao tác trong bảng: trước đây mỗi nút một màu (xanh dương / cyan / xám / đỏ)
   nhìn như cầu vồng. Giờ để trung tính, chỉ lộ màu khi rê chuột.
   RIÊNG nút nguy hiểm (btn-outline-danger) vẫn giữ nguyên màu đỏ — người dùng
   cần thấy cảnh báo trước khi rê chuột, không được ẩn tín hiệu an toàn. */
.table .btn-outline-primary,
.table .btn-outline-success,
.table .btn-outline-secondary {
    --bs-btn-color: var(--isc-muted);
    --bs-btn-border-color: #dbe3ec;
}
.table .btn-outline-primary:hover,
.table .btn-outline-success:hover { color: #fff; background: var(--isc-primary); border-color: var(--isc-primary); }

/* ============================================================================
   3. Ghi đè Bootstrap — biểu mẫu, phân trang, badge
   ========================================================================== */

/* Không đổi phần này thì mọi ô nhập vẫn sáng viền XANH DƯƠNG mặc định,
   chỏi hẳn với tông xanh lá của thương hiệu. */
.form-control:focus,
.form-select:focus {
    border-color: #6ee7a8;
    box-shadow: 0 0 0 .2rem rgba(var(--isc-primary-rgb), .18);
}
.form-check-input:checked {
    background-color: var(--isc-primary);
    border-color: var(--isc-primary);
}
.form-check-input:focus {
    border-color: #6ee7a8;
    box-shadow: 0 0 0 .2rem rgba(var(--isc-primary-rgb), .18);
}
.form-label { font-weight: 500; font-size: .9rem; }

.page-link { color: var(--isc-primary); }
.page-item.active .page-link {
    background-color: var(--isc-primary);
    border-color: var(--isc-primary);
}
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--isc-primary-rgb), .18); }

.badge { font-weight: 600; letter-spacing: .01em; }

.progress-bar { background-color: var(--isc-primary); }

/* ============================================================================
   4. Bảng dữ liệu
   ========================================================================== */

.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--isc-muted);
    font-weight: 600;
    border-bottom-width: 1px;
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6faf7; }

/* ============================================================================
   5. Menu trái (sidebar)
   ========================================================================== */

.sidebar {
    width: 240px; position: fixed; top: 0; bottom: 0; left: 0;
    background: var(--isc-sidebar-bg); overflow-y: auto; z-index: 1030;
}
.sidebar .brand {
    color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em;
    padding: 1rem 1.15rem; display: flex; align-items: center; gap: .6rem; text-decoration: none;
}
.sidebar .brand img { width: 30px; height: 30px; flex-shrink: 0; }
.sidebar .nav-section {
    color: var(--isc-sidebar-muted); font-size: .7rem; text-transform: uppercase;
    letter-spacing: .06em; padding: .9rem 1.15rem .3rem; font-weight: 600;
}
.sidebar .nav-link {
    color: var(--isc-sidebar-text); padding: .5rem 1.15rem; font-size: .9rem;
    border-left: 3px solid transparent; transition: background-color .15s ease, color .15s ease;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(255,255,255,.13); color: #fff;
    border-left-color: var(--isc-sidebar-marker); font-weight: 600;
}
.sidebar .nav-link i { width: 20px; }

/* Thanh cuộn mảnh, hoà vào nền menu thay vì thanh xám mặc định của trình duyệt */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1029; }
.sidebar-backdrop.show { display: block; }

.main { margin-left: 240px; }

/* ----- Chế độ dải icon (chỉ màn hình lớn) -----
   Dưới 992px menu đã là kiểu trượt che màn hình nên thu gọn không còn ý nghĩa.
   Nhãn chữ được ẩn bằng font-size:0 thay vì display:none — cách này KHÔNG cần
   bọc span cho 25 mục menu, và quan trọng hơn là chữ vẫn nằm trong cây trợ năng
   nên trình đọc màn hình vẫn đọc đúng tên mục. */
@media (min-width: 992px) {
    .sidebar-collapsed .sidebar { width: 64px; }
    .sidebar-collapsed .main    { margin-left: 64px; }

    .sidebar-collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-collapsed .sidebar .brand-text,
    .sidebar-collapsed .sidebar .nav-section { display: none; }

    .sidebar-collapsed .sidebar .nav-link {
        font-size: 0; text-align: center; padding-left: 0; padding-right: 0;
        border-left-width: 0; border-right: 3px solid transparent;
    }
    .sidebar-collapsed .sidebar .nav-link.active { border-right-color: var(--isc-sidebar-marker); }
    .sidebar-collapsed .sidebar .nav-link i { font-size: 1.05rem; width: auto; }
    /* Huy hiệu số (thông báo chưa đọc, minh chứng chờ duyệt) thu nhỏ thành chấm
       đặt đè lên icon — vẫn thấy có việc cần xử lý dù đang ở chế độ dải icon. */
    .sidebar-collapsed .sidebar .nav-link .badge {
        font-size: .6rem; position: absolute; margin: -.55rem 0 0 -.55rem; padding: .15rem .3rem;
    }
    .sidebar-collapsed .sidebar li { position: relative; }
}

/* Dính trên đầu để tên trường và nút Đăng xuất luôn trong tầm với khi cuộn trang dài. */
.topbar {
    background: var(--isc-surface); border-bottom: 1px solid var(--isc-border);
    padding: .6rem 1.25rem; position: sticky; top: 0; z-index: 1020;
}

/* ============================================================================
   6. Hệ thống bố cục thống nhất
   Trước đây mỗi form tự đặt max-width (500/600/640px) nên trang nào cũng lệch.
   Giờ chỉ dùng các lớp dưới đây, không hardcode chiều rộng trong view nữa.
   ========================================================================== */

/* MỘT chiều rộng duy nhất cho toàn bộ nền tảng: mọi trang trải hết vùng làm việc,
   chỉ chặn lại ở 1400px để dòng chữ không dài quá mức trên màn hình siêu rộng.
   Trước đây có thêm .form-card (920px) và .form-card-wide (1180px) khiến các trang
   biểu mẫu bị bó thành cột hẹp, để trống hai bên — đã gỡ bỏ hoàn toàn. */
.page-content { max-width: 1400px; }

/* Ngoại lệ DUY NHẤT: bản in khổ A4 (phiếu liên lạc, học bạ). Đây là tài liệu giấy
   thật nên phải giữ đúng khổ, kéo rộng ra là sai tỷ lệ khi in. */
.print-sheet { max-width: 820px; width: 100%; margin-inline: auto; }

.page-head { margin-bottom: 1.25rem; }
.page-head h4   { margin-bottom: .15rem; }
.form-actions   { border-top: 1px solid var(--isc-border); padding-top: 1rem; margin-top: 1.25rem; }
.form-section-title {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--isc-muted); font-weight: 600; margin: 1.5rem 0 .75rem;
}
.form-section-title:first-of-type { margin-top: 0; }

/* Khổ giấy A4 (≈794px ở 96dpi) — phiếu liên lạc, học bạ và các bản in khác. */
.print-sheet { max-width: 820px; width: 100%; }

/* ============================================================================
   7. Ô số liệu dashboard
   Icon + số + nhãn trên 1 hàng, rộng vừa đủ nội dung (không kéo giãn theo lưới
   cột như kiểu cũ) để tránh khoảng trắng thừa.
   Tự vẽ nền/bóng thay vì dùng .card — .card của Bootstrap có width:100% mặc
   định, xung đột với flex-basis:auto khiến ô co giãn sai trong flex-wrap.
   ========================================================================== */

.stat-tile {
    display: flex; align-items: center; gap: .55rem; padding: .5rem .8rem;
    flex: 0 1 auto; width: auto; min-width: 148px; max-width: 100%;
    background: var(--isc-surface); border-radius: var(--isc-radius-sm); box-shadow: var(--isc-shadow);
}
/* Để ở cấp gốc (không lồng trong .stat-tile) vì còn dùng lại ở trang Báo cáo. */
.stat-icon {
    width: 32px; height: 32px; border-radius: 8px; display: flex;
    align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0;
}

/* Thẻ chọn báo cáo — nhấc nhẹ khi rê chuột để thấy rõ là bấm được. */
.report-card { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.report-card:hover { transform: translateY(-2px); box-shadow: var(--isc-shadow-lg); }
.report-card:hover h6 { color: var(--isc-primary); }
.stat-tile .stat-value { font-size: 1.15rem; font-weight: 700; line-height: 1.15; }
.stat-tile .stat-label { font-size: .7rem; color: var(--isc-muted); white-space: nowrap; }

/* ============================================================================
   8. Trạng thái rỗng & menu thao tác trong bảng
   ========================================================================== */

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--isc-muted); }
.empty-state-icon { font-size: 2.25rem; line-height: 1; color: #cbd5e1; display: block; margin-bottom: .6rem; }
.empty-state-title { font-weight: 600; color: #475569; margin-bottom: .15rem; }
.empty-state-desc { font-size: .875rem; margin: 0 auto; max-width: 34rem; }

/* Bên trong ô bảng thì thu gọn lại, tránh đẩy bảng cao quá mức */
.table .empty-state { padding: 2rem 1rem; }

/* post_button() luôn sinh <form class="d-inline">. Trong menu thả xuống,
   mỗi mục phải chiếm trọn chiều ngang thì mới bấm được cả dòng.
   Bắt buộc !important vì lớp tiện ích .d-inline của Bootstrap cũng dùng
   !important — không có nó thì rule này thua bất kể độ ưu tiên chọn lọc. */
.dropdown-menu form.d-inline { display: block !important; }
.dropdown-menu { box-shadow: var(--isc-shadow-lg); border-color: var(--isc-border); }
.dropdown-item:active { background-color: var(--isc-primary); }
.dropdown-item.text-danger:active { background-color: var(--bs-danger); color: #fff !important; }

/* ============================================================================
   9. Toast thông báo
   Góc dưới bên phải: không đè thanh trên cùng (sticky) lẫn menu trái, và không
   che nút hành động chính vốn nằm ở đầu hoặc giữa trang.
   ========================================================================== */

.toast-stack {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1090;
    display: flex; flex-direction: column; gap: .5rem;
    width: min(400px, calc(100vw - 2rem));
}
.isc-toast { color: #fff; box-shadow: var(--isc-shadow-lg); }
.isc-toast .toast-body { font-size: .9rem; }
.isc-toast-ok    { background: var(--isc-primary); }
.isc-toast-error { background: var(--bs-danger); }

/* ============================================================================
   10. Trang đăng nhập
   ========================================================================== */

.auth-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #14532d 0%, #15803d 55%, #16a34a 100%);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card { border-radius: var(--isc-radius-lg); box-shadow: var(--isc-shadow-lg); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.auth-brand img { width: 44px; height: 44px; }

/* ============================================================================
   11. Đáp ứng màn hình nhỏ
   ========================================================================== */

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 2px 0 12px rgba(0,0,0,.2); }
    .sidebar.show { transform: translateX(0); }
    .main { margin-left: 0; }
    .container-fluid.page-content { padding-left: .85rem; padding-right: .85rem; }
    .topbar { padding: .5rem .85rem; }

    /* Bảng nhiều cột: cho phép cuộn ngang thay vì ép vỡ khung.
       Bóng mờ 2 mép báo còn nội dung để cuộn (biến mất khi đã cuộn hết). */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0,
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
            linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0)) 0 0,
            linear-gradient(to left, rgba(0,0,0,.15), rgba(0,0,0,0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    .table td, .table th { white-space: nowrap; }
    .table td.wrap-cell, .table th.wrap-cell { white-space: normal; }

    /* Nút thao tác trong bảng xuống dòng gọn gàng */
    .table .btn-sm { margin-bottom: 2px; }
    .page-head h4 { font-size: 1.15rem; }
}

@media (max-width: 575px) {
    .card { border-radius: var(--isc-radius); }
    .page-head { flex-direction: column; align-items: stretch !important; }
    .page-head .d-flex { flex-wrap: wrap; }
    /* Nút hành động chiếm trọn chiều ngang cho dễ bấm bằng ngón tay */
    .form-actions { flex-direction: column; }
    .form-actions .btn, .form-actions form { width: 100%; }
    .btn { min-height: 38px; }
    h4 { font-size: 1.1rem; }
    .display-6, .h3 { font-size: 1.5rem; }
    .stat-tile { min-width: calc(50% - .25rem); flex: 1 1 calc(50% - .25rem); }
    /* Nhãn dài (vd "Khen thưởng tháng này") gặp white-space:nowrap sẽ đẩy ô rộng
       quá nửa màn hình, làm cả hàng tràn ngang. Trên màn hẹp cho phép xuống dòng.
       min-width:0 để phần tử con trong flex được co lại — mặc định flex item
       không co nhỏ hơn nội dung của nó. */
    .stat-tile > div      { min-width: 0; }
    .stat-tile .stat-label { white-space: normal; }
}

/* ============================================================================
   12. Bản in
   ========================================================================== */

@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .main { margin-left: 0 !important; }
    body { background: #fff; }
    /* Khi in, vùng cuộn ngang phải mở ra hết — không thì phần bảng nằm ngoài
       khung nhìn (phiếu liên lạc, học bạ, hoá đơn) sẽ bị cắt mất trên giấy. */
    .table-responsive { overflow: visible !important; }
    .page-content { max-width: none !important; }
}

/* ============================================================================
   13. Nút hiện/ẩn mật khẩu (gắn tự động bởi assets/js/password-toggle.js)
   ========================================================================== */

/* Ô mật khẩu đứng riêng (không có input-group sẵn, vd trang Hồ sơ & mật khẩu) */
.pw-toggle-wrap { position: relative; }
.pw-toggle-wrap .pw-toggle-input { padding-right: 2.5rem; }
.pw-toggle-wrap .pw-toggle-btn {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #6c757d;
    padding: .25rem .5rem;
    line-height: 1;
}
.pw-toggle-wrap .pw-toggle-btn:hover { color: #212529; }

/* Ô mật khẩu đã nằm trong .input-group (vd trang đăng nhập có icon ổ khoá) */
.pw-toggle-inline { cursor: pointer; }
.pw-toggle-inline:hover { background: #e9ecef; }

/* ============================================================================
   14. Nút bật/tắt tính năng dạng segmented (trang /schoolSetting/features)
   Dùng lại đúng biến thương hiệu --isc-primary (xanh rừng) thay vì bịa màu mới —
   chỉ 2 thang màu: xanh rừng cho "Bật", xám trung tính cho "Tắt". Badge "Mặc định"
   dùng CHUNG 2 thang màu đó (bản nhạt hơn) để màu luôn khớp trạng thái hiệu lực
   thay vì một màu trung tính vô nghĩa — nhìn màu là biết đang Bật hay Tắt, không
   cần đọc chữ. Gọn thành 1 hàng: tên tính năng — badge — dãy nút, không xuống dòng.
   ========================================================================== */

.feature-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--isc-border);
}
.feature-row:last-child { border-bottom: none; }

.feature-row-label { font-weight: 500; font-size: .95rem; flex: 1 1 180px; }

.feature-row-meta { display: flex; align-items: center; gap: 8px; }

.feature-badge {
    font-size: .75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Bản nhạt (subtle) của đúng 2 màu dùng cho nút Bật/Tắt — "Mặc định" không phải
   màu thứ 3, mà là bản mờ của chính màu Bật/Tắt đang áp dụng. */
.feature-badge-default-on  { background: var(--isc-primary-subtle); color: var(--isc-primary-text); }
.feature-badge-default-off { background: var(--isc-border); color: var(--isc-muted); }
/* "Đã tự chọn" tô đậm hơn bản mặc định cùng tông, để phân biệt "hiệu trưởng đã
   bấm" với "đang theo mặc định" mà không cần đổi sang màu khác hẳn. */
.feature-badge-custom-on  { background: var(--isc-primary); color: #fff; }
.feature-badge-custom-off { background: var(--isc-muted); color: #fff; }

.feature-reset {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--isc-accent);
    font-size: .75rem;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}
.feature-reset:hover { color: var(--isc-primary-hover); }

.feature-toggle {
    display: inline-flex;
    border: 1px solid var(--isc-border);
    border-radius: 999px;
    overflow: hidden;
    margin-left: auto;
}
.feature-seg {
    appearance: none;
    border: none;
    border-left: 1px solid var(--isc-border);
    background: var(--isc-surface);
    color: var(--isc-muted);
    font-size: .8125rem;
    font-weight: 500;
    padding: 6px 16px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.feature-seg:first-child { border-left: none; }
.feature-seg:hover:not(.is-active) { background: var(--isc-bg); }

.feature-seg.is-active[data-value="1"] { background: var(--isc-primary); color: #fff; }
.feature-seg.is-active[data-value="0"] { background: var(--isc-muted); color: #fff; }

/* ============================================================================
   15. Dashboard chuyên nghiệp (Tổng quan trường + Danh sách trường Master Admin)
   Mỗi chỉ số MỘT ô riêng, icon + màu riêng rõ ràng (thay cho dải tối gộp chung
   ban đầu — 7-9 số trên cùng 1 nền tối rất khó phân biệt). Tái dùng cặp lớp
   Bootstrap đã được theme.css ánh xạ sẵn về đúng màu thương hiệu (bg-primary-subtle
   = xanh rừng nhạt, bg-info-subtle = mòng két nhạt...) để không phải bịa màu mới.
   ========================================================================== */

.metric-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--isc-surface);
    border-radius: var(--isc-radius);
    box-shadow: var(--isc-shadow);
    padding: .75rem .9rem;
    height: 100%;
    border-left: 4px solid transparent;
}
/* Đặt tên riêng "accent-*" chứ không dùng "border-primary" v.v. — trùng tên với
   class tiện ích .border-{color} có sẵn của Bootstrap (!important), dễ gây đè màu
   ngoài ý muốn nếu sau này ai đó quen tay thêm class Bootstrap khác vào cùng thẻ. */
.metric-card.accent-primary   { border-left-color: var(--isc-primary); }
.metric-card.accent-info      { border-left-color: var(--isc-accent); }
.metric-card.accent-secondary { border-left-color: var(--isc-muted); }
.metric-card.accent-success   { border-left-color: var(--isc-primary); }
.metric-card.accent-warning   { border-left-color: #f59e0b; }
.metric-card.accent-danger    { border-left-color: var(--bs-danger); }

.metric-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.metric-body { min-width: 0; }
.metric-value { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.metric-label { font-size: .68rem; color: var(--isc-muted); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }

/* Thẻ chứa gauge/sparkline — cùng chiều cao để lưới không lệch hàng. */
.pro-chart-card {
    background: var(--isc-surface);
    border-radius: var(--isc-radius);
    box-shadow: var(--isc-shadow);
    padding: .8rem;
    height: 100%;
}
.pro-chart-title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--isc-muted);
    margin-bottom: .4rem;
    text-align: center;
}
.pro-chart-canvas-wrap { position: relative; height: 110px; }

/* Khối văn bản bình luận ngắn kiểu "Cần chú ý" / "Tín hiệu tốt" — màu nhạt theo ngữ nghĩa. */
.insight-box { border-radius: var(--isc-radius); padding: .7rem .9rem; font-size: .8125rem; line-height: 1.5; }
.insight-box .insight-title { font-weight: 600; font-size: .8125rem; margin-bottom: .2rem; }
.insight-box-warn { background: #fef3c7; color: #78350f; }
.insight-box-warn .insight-title { color: #78350f; }
.insight-box-good { background: var(--isc-primary-subtle); color: var(--isc-primary-text); }
.insight-box-good .insight-title { color: var(--isc-primary-text); }
.insight-box-info { background: var(--isc-bg); color: var(--isc-text); }
.insight-box-info .insight-title { color: var(--isc-text); }

@media (max-width: 575px) {
    .metric-card { padding: .6rem .7rem; gap: .5rem; }
    .metric-icon { width: 34px; height: 34px; font-size: .9rem; }
    .metric-value { font-size: 1.1rem; }
}

/* Badge so sánh kỳ này/hôm nay với kỳ trước — chỉ hiện khi có đủ dữ liệu 2 mốc thời gian
   để so sánh thật, không suy diễn khi thiếu dữ liệu (xem logic ở DashboardController). */
.delta-badge {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px;
    vertical-align: middle;
}
.delta-badge-up   { background: var(--isc-primary-subtle); color: var(--isc-primary-text); }
.delta-badge-down { background: #fee2e2; color: #991b1b; }
.delta-badge-flat { background: var(--isc-border); color: var(--isc-muted); }

/* Dải phân đoạn tối giữa các khối nội dung — giống thanh ngăn trong ảnh tham khảo,
   dùng để tổ chức trang dài thành từng cụm dễ quét mắt. */
.section-divider {
    display: flex; align-items: center; gap: .5rem;
    background: var(--isc-sidebar-bg); color: var(--isc-sidebar-text);
    border-radius: var(--isc-radius-sm); padding: .45rem .9rem;
    font-size: .8rem; font-weight: 600; margin: .25rem 0 .75rem;
}
.section-divider i { color: var(--isc-sidebar-muted); }

/* Danh sách kiểu dòng thời gian — icon tròn + viền trái mảnh, dùng cho các khối
   "Hoạt động gần đây/Đơn nghỉ/Khen thưởng/Thông báo" thay cho hàng kẻ ngang đơn điệu. */
.timeline-item {
    display: flex; gap: .6rem; padding: .5rem 0;
    border-bottom: 1px solid var(--isc-border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.timeline-body { min-width: 0; flex: 1; }
.timeline-body .timeline-title { font-size: .85rem; font-weight: 600; }
.timeline-body .timeline-meta { font-size: .75rem; color: var(--isc-muted); }