/* ================= ROOT ================= */
:root {
    --accent: #4f6fed;
    --accent-strong: #3351d4;
    --surface: #ffffff;
    --text: #172033;
    --text-strong: #0b1220;
    --muted: #475569;
    --border: #d8e1ee;
    --border-strong: #8aa6d9;
    --shadow: 0 8px 24px rgba(15,23,42,.08);
    --shadow-sm: 0 3px 10px rgba(15,23,42,.06);
    --radius-xl: 12px;
    --radius-lg: 10px;
    --radius-md: 10px;
    --radius-sm: 10px;
    --gap: 12px;
    --panel-padding: 8px;

    /* ========== CỠ CHỮ DÙNG CHUNG - TRANG XẾP TKB ========== */
    /* Bộ lọc: mục trong danh sách xổ xuống. */
    --tkb-font-filter-menu-item: .85rem;
    /* Bộ lọc: nhãn nhỏ phía trên giá trị đang chọn. */
    --tkb-font-filter-label: .65rem;
    /* Bộ lọc: giá trị chính đang được chọn. */
    --tkb-font-filter-value: .85rem;
    /* Bộ lọc: dòng thao tác tải lại dữ liệu. */
    --tkb-font-filter-reload: .8rem;

    /* Bảng TKB: tiêu đề các cột. */
    --tkb-font-grid-column-header: .8rem;
    /* Bảng lớp: số tiết ở cột đầu. */
    --tkb-font-class-grid-period: .8rem;
    /* Bảng giáo viên: số tiết ở cột đầu. */
    --tkb-font-teacher-grid-period: .8rem;
    /* Bảng lớp và giáo viên: tên môn ở chế độ 2 dòng; đồng thời là cỡ chữ của cả hai phần ở chế độ 1 dòng. */
    --tkb-font-grid-primary-content: .7rem;
    /* Bảng lớp và giáo viên: tên giáo viên/tên lớp ở dòng phụ của chế độ 2 dòng. */
    --tkb-font-grid-secondary-content: .6rem;
    /* Bảng lớp và giáo viên: cỡ chữ riêng cho nội dung trong ô Tiết nghỉ. */
    --tkb-font-grid-break: .6rem;

    /* Đầu bảng: nhãn loại bảng (LỚP/GIÁO VIÊN). */
    --tkb-font-grid-header-label: 12px;
    /* Đầu bảng: tên lớp hoặc tên giáo viên. */
    --tkb-font-grid-header-title: 15px;
    /* Đầu bảng: nhãn chọn kiểu hiển thị. */
    --tkb-font-grid-display-label: 11px;
    /* Đầu bảng: nội dung trong hộp chọn kiểu hiển thị. */
    --tkb-font-grid-display-select: 12px;
    /* Đầu bảng: huy hiệu tổng số tiết. */
    --tkb-font-grid-badge: 13px;

    /* Mobile - bảng lớp: số tiết ở cột đầu. */
    --tkb-font-mobile-class-period: .5rem;
    /* Mobile - bảng giáo viên: số tiết ở cột đầu. */
    --tkb-font-mobile-teacher-period: .65rem;
    /* Mobile: tiêu đề cột trước khi thay bằng tên thứ viết tắt. */
    --tkb-font-mobile-column-header: .5rem;
    /* Mobile: ẩn chữ tiêu đề gốc để dùng ::after hiển thị tên viết tắt; nên giữ bằng 0. */
    --tkb-font-mobile-hidden-header: 0;
    /* Mobile - bảng lớp: tên thứ viết tắt. */
    --tkb-font-mobile-class-short-day: .55rem;
    /* Mobile - bảng giáo viên: tên thứ viết tắt. */
    --tkb-font-mobile-teacher-short-day: .7rem;
    /* Mobile: nội dung chung trong ô TKB. */
    --tkb-font-mobile-cell-content: .5rem;
    /* Mobile: dòng chính ở chế độ 2 dòng và toàn bộ nội dung ở chế độ 1 dòng. */
    --tkb-font-mobile-subject: .58rem;
    /* Mobile: thông tin phụ ở chế độ 2 dòng. */
    --tkb-font-mobile-secondary: .52rem;

    /* Sidebar thống kê: nhãn nhỏ trên thẻ. */
    --tkb-font-sidebar-eyebrow: .65rem;
    /* Sidebar thống kê: biểu tượng trên thẻ. */
    --tkb-font-sidebar-card-icon: 12px;
    /* Sidebar thống kê: tên chỉ số. */
    --tkb-font-sidebar-label: .78rem;
    /* Sidebar thống kê: giá trị chính. */
    --tkb-font-sidebar-value: 1.35rem;
    /* Sidebar thống kê: đơn vị đi kèm giá trị. */
    --tkb-font-sidebar-unit: .65rem;
    /* Sidebar thống kê: dòng mô tả phụ. */
    --tkb-font-sidebar-meta: .72rem;
    /* Sidebar cảnh báo: biểu tượng cảnh báo. */
    --tkb-font-sidebar-warning-icon: 1rem;
    /* Sidebar tổng quan: con số nổi bật. */
    --tkb-font-sidebar-overview-value: 1.6rem;
    /* Sidebar tổng quan: nội dung mô tả. */
    --tkb-font-sidebar-overview-text: .72rem;

    /* Thanh công cụ: nhãn nhỏ phía trên nhóm nút. */
    --tkb-font-toolbar-eyebrow: .55rem;
    /* Thanh công cụ: chữ chung trên nút. */
    --tkb-font-toolbar-button: .72rem;
    /* Thanh công cụ: phần chữ riêng trong nút. */
    --tkb-font-toolbar-button-text: .7rem;
    /* Menu công cụ: tiêu đề nhóm. */
    --tkb-font-toolbar-menu-header: .6rem;
    /* Menu công cụ: từng mục thao tác. */
    --tkb-font-toolbar-menu-item: .82rem;

    /* Hộp tiến trình xếp TKB: tiêu đề. */
    --tkb-font-engine-title: 1.2rem;
    /* Hộp tiến trình xếp TKB: mô tả dưới tiêu đề. */
    --tkb-font-engine-subtitle: .85rem;
    /* Hộp tiến trình xếp TKB: biểu tượng bánh răng. */
    --tkb-font-engine-icon: 32px;
    /* Hộp tiến trình xếp TKB: nhãn của chỉ số. */
    --tkb-font-engine-metric-label: .72rem;
    /* Hộp tiến trình xếp TKB: giá trị của chỉ số. */
    --tkb-font-engine-metric-value: 1.35rem;
    /* Hộp tiến trình xếp TKB: nội dung trạng thái. */
    --tkb-font-engine-status: .9rem;
    /* Hộp tiến trình xếp TKB: biểu tượng nút dừng. */
    --tkb-font-engine-stop-icon: 1rem;
    /* Hộp tiến trình xếp TKB: dòng thông tin cuối hộp. */
    --tkb-font-engine-footer: .8rem;

    --tkb-transparent: transparent;
    --tkb-white: #fff;
    --tkb-page-bg: #fff;
    --tkb-page-bg-alt: #f4f7fb;

    --tkb-hero-card-bg: rgba(255, 255, 255, 0.55);
    --tkb-table-bg: #f2fafc;
    --tkb-table-border-soft: #0678fa;
    --tkb-table-border: #87b8f8bd;
    --tkb-table-grid-border: #8fb4df;
    --tkb-table-grid-border-outer: #6f9bcc;
    --tkb-table-text: #061020;
    --tkb-table-head-bg: linear-gradient(180deg,#115855e5,#2fc7b5);
    --tkb-table-head-text: #ffff;
    --tkb-period-bg: #f8f8f8;
    --tkb-period-text: #112136;
    --tkb-period-border: #ccd8e8;
    --tkb-period-hover-bg: #e4ebf4;
    --tkb-buoi-sang-bg: #d8e9fa;
    --tkb-buoi-chieu-bg: #f8ddd1;
    --tkb-cell-hover-bg: #e2ebf8;
    --tkb-cell-chieu-hover-bg: #f8e7db;
    --tkb-mon-text: #050220;
    /* Dòng phụ: nền, chữ, viền và bóng nhẹ để tạo khung nổi nhưng vẫn dễ đọc. */
    --tkb-phu-bg: linear-gradient(180deg, #f8fbff 0%, #eaf2fb 100%);
    --tkb-phu-text: #334155;
    --tkb-phu-border: #c9d8e8;
    --tkb-phu-shadow: 0 1px 2px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .85);
    --tkb-chieu-mon-text: #7a3f1d;
    /* Dòng phụ buổi chiều: tông ấm nhẹ để hợp màu nền ca chiều. */
    --tkb-chieu-phu-bg: linear-gradient(180deg, #fffaf6 0%, #f8ece2 100%);
    --tkb-chieu-phu-text: #70462d;
    --tkb-chieu-phu-border: #ead5c3;
    --tkb-codinh-mon-text: #0d03a3;
    /* Dòng phụ của tiết cố định: tông vàng trung tính. */
    --tkb-codinh-phu-bg: linear-gradient(180deg, #fffdf8 0%, #f5eedf 100%);
    --tkb-codinh-phu-text: #6a5327;
    --tkb-codinh-phu-border: #e4d3ad;
    --tkb-session-divider: #d97706;
    --tkb-highlight-bg: #c4f8e1;
    --tkb-highlight-border: #a98a76;
    --tkb-highlight-text: #0c2018;
    --tkb-drop-highlight-bg: #d8eee3;
    --tkb-drop-highlight-border: #6fa887;
    --tkb-gv-highlight-bg: #d4f7eb;
    --tkb-gv-highlight-border: #f1be81;
    --tkb-gv-highlight-text: #254c68;
    --tkb-tiet-nghi-border: #4c4c4d00;
    --tkb-tiet-nghi-text: #66708599;
    --tkb-nghi-text: #a33a3a;
    --tkb-empty-text: #7d9495;
    --tkb-codinh-bg: #eaf3f6f0;
    --tkb-codinh-cell-bg: #c1f9c9;
    --tkb-codinh-border: #fda553;
    --tkb-codinh-text: #8b2c00;
    --tkb-header-bg: var(--bs-white, #fff);
    --tkb-header-border: rgba(1, 64, 210, 0.826);
    --tkb-header-title: #172033;
    --tkb-lop-accent: #4267b2;
    --tkb-lop-badge-bg: #e5ebf7;
    --tkb-lop-badge-text: #123983;
    --tkb-gv-accent: #163a30;
    --tkb-gv-badge-bg: #e7f1ee;
    --tkb-gv-badge-text: #3e6c60;
    --tkb-select-bg: #fff;
    --tkb-select-bg-gradient: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    --tkb-select-text: #172033;
    --tkb-select-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 6px 16px rgba(15,23,42,.08);
    --tkb-select-hover-shadow: 0 0 0 1px rgba(255,255,255,.75) inset, 0 8px 18px rgba(15,23,42,.12);
    --tkb-select-focus-ring: 0 0 0 3px rgba(37,99,235,.14), 0 8px 18px rgba(15,23,42,.12);
    --tkb-hero-card-border: rgba(66, 103, 178, 0.34);
    --tkb-hero-icon-bg: #f4f7fb;
    --tkb-hero-icon-border: #dfe7f1;
    --tkb-hero-icon-color: white;
    --tkb-hero-icon-shadow: rgba(15,23,42,.16);
    --tkb-hero-icon-gradient: linear-gradient(135deg,#386fa4,#244b72);
    --tkb-hero-label: #65758a;
    --tkb-hero-value: #172033;
    --tkb-hero-meta: #405168;
    --tkb-hero-progress-bg: #dfe7f1;
    --tkb-hero-plan: #4267b2;
    --tkb-hero-scheduled: #467b6d;
    --tkb-hero-class-load: #b8652a;
    --tkb-hero-teachers: #3f7f9f;
    --tkb-hero-classes: #5c6878;
    --tkb-warning-border: #c43b3b;
    --tkb-warning-bg: linear-gradient(135deg, #fff4f3 0%, #fde8e5 45%, #fbf1e7 100%);
    --tkb-warning-shadow-1: rgba(196, 59, 59, 0.16);
    --tkb-warning-shadow-2: rgba(201, 90, 67, 0.10);
    --tkb-warning-shine: linear-gradient(180deg, rgba(255,255,255,0.46), transparent 35%);
    --tkb-warning-orb: radial-gradient(rgba(196, 59, 59, 0.22), transparent 72%);
    --tkb-warning-eyebrow-bg: #f9ddda;
    --tkb-warning-eyebrow-text: #9f2f2f;
    --tkb-warning-eyebrow-border: #e6aaa3;
    --tkb-warning-icon-bg: linear-gradient(135deg, #d65a50, #b93838);
    --tkb-warning-icon-shadow-1: rgba(196, 59, 59, 0.28);
    --tkb-warning-icon-shadow-2: rgba(255,255,255,0.25);
    --tkb-warning-label: #7a2b2b;
    --tkb-warning-value: #bd3a3a;
    --tkb-warning-card-bg: rgba(255,255,255,0.76);
    --tkb-warning-card-border: #efc0ba;
    --tkb-warning-card-shadow: rgba(196,59,59,.11);
    --tkb-warning-danger-bg: #f9ddda;
    --tkb-warning-danger-border: #d65a50;
    --tkb-toolbar-panel-bg: linear-gradient(160deg, #223650 0%, #142236 100%);
    --tkb-toolbar-panel-border: rgba(255,255,255,.10);
    --tkb-toolbar-panel-shadow: rgba(15,23,42,.24);
    --tkb-toolbar-eyebrow: rgba(226,232,240,.58);
    --tkb-toolbar-btn-text: #fff;
    --tkb-toolbar-btn-border: rgba(255,255,255,.14);
    --tkb-toolbar-btn-shadow-1: rgba(0,0,0,.22);
    --tkb-toolbar-btn-shadow-2: rgba(255,255,255,.12);
    --tkb-toolbar-btn-hover-shadow-1: rgba(0,0,0,.28);
    --tkb-toolbar-btn-hover-shadow-2: rgba(255,255,255,.18);
    --tkb-toolbar-disabled-bg: linear-gradient(175deg, #7f8da0, #4f5d6f);
    --tkb-toolbar-brand-bg: linear-gradient(175deg,#4267b2,#203b5d);
    --tkb-toolbar-teal-bg: linear-gradient(175deg,#3f7f9f,#244d68);
    --tkb-toolbar-indigo-bg: linear-gradient(175deg,#b8652a,#8f451b);
    --tkb-toolbar-slate-bg: linear-gradient(175deg,#5c6878,#303c4a);
    --tkb-toolbar-danger-bg: linear-gradient(175deg,#d65a50,#9f2f2f);
    --tkb-toolbar-icon-bg: rgba(255,255,255,.13);
    --tkb-toolbar-icon-border: rgba(255,255,255,.1);
    --tkb-toolbar-menu-bg: #fff;
    --tkb-toolbar-menu-border: rgba(148,163,184,.22);
    --tkb-toolbar-menu-shadow-1: rgba(15,23,42,.14);
    --tkb-toolbar-menu-shadow-2: rgba(15,23,42,.07);
    --tkb-toolbar-menu-header: #7f8da0;
    --tkb-toolbar-menu-divider: #e9eef5;
    --tkb-toolbar-menu-text: #243044;
    --tkb-toolbar-menu-hover-bg: #eef3fb;
    --tkb-toolbar-menu-hover-text: #3351d4;
    --tkb-toolbar-menu-active-bg: #e5ebf7;
    --tkb-toolbar-menu-primary: #3351d4;
    --tkb-toolbar-menu-primary-hover-bg: #4267b2;
    --tkb-toolbar-menu-danger: #9f2f2f;
    --tkb-toolbar-menu-danger-hover-bg: #f9eeec;
    --tkb-toolbar-menu-danger-hover-text: #8f2a2a;
}

:root:has(.sidebar-dark) {
    --accent: #8aa6d9;
    --accent-strong: #b7c7e6;
    --surface: #111a27;
    --text: #dce6f3;
    --text-strong: #f8fafc;
    --muted: #a8b5c6;
    --border: rgba(148,163,184,.18);
    --border-strong: rgba(138,166,217,.54);
    --shadow: 0 12px 30px rgba(0,0,0,.34);
    --shadow-sm: 0 5px 16px rgba(0,0,0,.24);
    --tkb-page-bg: #0c1320;
    --tkb-page-bg-alt: #101827;
    --tkb-table-bg: #121b2a;
    --tkb-table-border-soft: rgba(148,163,184,.14);
    --tkb-table-border: rgba(148,163,184,.20);
    --tkb-table-text: #dce6f3;
    --tkb-table-head-bg: linear-gradient(180deg,#253b57,#18283e);
    --tkb-period-bg: rgba(148,163,184,.13);
    --tkb-period-text: #e8ebee;
    --tkb-period-border: rgba(148,163,184,.20);
    --tkb-period-hover-bg: rgba(148,163,184,.18);
    --tkb-buoi-sang-bg: rgba(76,96,126,.22);
    --tkb-buoi-chieu-bg: rgba(129,89,61,.18);
    --tkb-cell-hover-bg: rgba(138,166,217,.18);
    --tkb-cell-chieu-hover-bg: rgba(194,133,82,.18);
    --tkb-mon-text: #cad8ec;
    --tkb-phu-bg: linear-gradient(180deg, #26384f, #1d2c40);
    --tkb-phu-text: #dbe6f7;
    --tkb-phu-border: rgba(148, 177, 211, .34);
    --tkb-phu-shadow: 0 1px 3px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
    --tkb-chieu-mon-text: #e8c7aa;
    --tkb-chieu-phu-bg: linear-gradient(180deg, #3b302c, #2b2524);
    --tkb-chieu-phu-text: #f1d8c2;
    --tkb-chieu-phu-border: rgba(214, 169, 128, .34);
    --tkb-codinh-phu-border: rgba(218, 180, 105, .38);
    --tkb-highlight-bg: rgba(76,128,104,.26);
    --tkb-highlight-border: rgba(125,179,151,.70);
    --tkb-highlight-text: #d7f3e5;
    --tkb-drop-highlight-bg: rgba(87,142,111,.30);
    --tkb-drop-highlight-border: rgba(140,197,162,.76);
    --tkb-gv-highlight-bg: rgba(72,119,153,.28);
    --tkb-gv-highlight-border: rgba(128,166,200,.72);
    --tkb-gv-highlight-text: #d9ecfa;
    --tkb-codinh-bg: rgba(151,122,66,.22);
    --tkb-codinh-cell-bg: rgba(173,139,73,.30);
    --tkb-codinh-border: rgba(218, 180, 105, 0);
    --tkb-codinh-text: #f1dfb4;
    --tkb-codinh-mon-text: #ead6a3;
    --tkb-codinh-phu-bg: rgba(201,164,89,.18);
    --tkb-codinh-phu-text: #f4e4b9;
    --tkb-nghi-text: #f0a0a0;
    --tkb-nghi-border: #979798f3;
    --tkb-empty-text: rgba(168,181,198,.62);
    --tkb-header-bg: #17263f;
    --tkb-header-border: rgba(148,163,184,.18);
    --tkb-header-title: #f8fafc;
    --tkb-hero-card-bg: #121b2a;
    --tkb-hero-card-border: rgba(148,163,184,.20);
    --tkb-hero-icon-bg: rgba(148,163,184,.10);
    --tkb-hero-icon-border: rgba(148,163,184,.18);
    --tkb-hero-label: #a8b5c6;
    --tkb-hero-value: #f8fafc;
    --tkb-hero-meta: #c4cfdd;
    --tkb-hero-progress-bg: rgba(148,163,184,.14);
    --tkb-toolbar-menu-bg: #121b2a;
    --tkb-toolbar-menu-border: rgba(148,163,184,.20);
    --tkb-toolbar-menu-header: #8e9bad;
    --tkb-toolbar-menu-divider: rgba(148,163,184,.13);
    --tkb-toolbar-menu-text: #dce6f3;
    --tkb-toolbar-menu-hover-bg: rgba(138,166,217,.16);
    --tkb-toolbar-menu-hover-text: #e8f0fb;
    --tkb-toolbar-menu-active-bg: rgba(138,166,217,.20);
    --tkb-toolbar-menu-primary: #c8d7f0;
    --tkb-toolbar-menu-primary-hover-bg: #4267b2;
    --tkb-toolbar-menu-danger-hover-bg: rgba(196,59,59,.18);
}