/* ═══════════════════════════════════════════════════════════════════
   IDT ONLINE PLUS - ADMIN PANEL
   Global class prefix: idt-
   1.  Design tokens
   2.  Base & Bootstrap overrides
   3.  Shell layout
   4.  Sidebar
   5.  Collapsed sidebar + flyout (desktop)
   6.  Top bar
   7.  Dropdowns
   8.  Page head & welcome banner
   9.  Cards & KPI stats
   10. Quick actions
   11. Charts (CSS only)
   12. Tables, pills, progress
   13. Lists, students, timeline
   14. Footer
   15. Theme customizer
   16. Responsive
   17. Shared components
   18. Control rows & switches
   19. Control rows responsive
   20. Action button state
   21. Course form
   22. Custom select
   23. Password strength
   24. Auth / login / reset
   25. System settings
   26. IDT Online Plus
   27. Modules, lectures & faculty
   28. Students, course settings & subscriptions
   29. Manage courses, promo player & confirm dialog
   30. Compact stats & DataTables
   31. Dotted loader (global)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --primary: #e3262f;
    --primary-d: #c11c24;
    --primary-rgb: 227, 38, 47;
    --primary-bg: rgba(var(--primary-rgb), 0.08);
    --primary-bd: rgba(var(--primary-rgb), 0.22);

    --c-blue: #2563eb;
    --c-blue-bg: #eef4ff;
    --c-green: #16a34a;
    --c-green-bg: #ecfdf3;
    --c-amber: #d97706;
    --c-amber-bg: #fff7e8;
    --c-red: #dc2626;
    --c-red-bg: #fef2f2;
    --c-violet: #7c3aed;
    --c-violet-bg: #f4efff;
    --c-teal: #0d9488;
    --c-teal-bg: #ebfaf8;
    --c-pink: #db2777;
    --c-pink-bg: #fdf0f6;
    --c-sky: #0284c7;
    --c-sky-bg: #ecf7fd;

    --body-bg: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #f8f9fc;
    --surface-3: #f1f3f8;
    --border: #e6e8ef;
    --border-2: #eef0f5;
    --text: #1d2433;
    --text-2: #4a5468;
    --muted: #8b93a7;

    --sidebar-bg: #111827;
    --sidebar-bg-2: #1a2232;
    --sidebar-text: #a4adbf;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(var(--primary-rgb), 0.22);
    --sidebar-label: #5d6880;
    --sidebar-line: rgba(255, 255, 255, 0.07);

    --sidebar-w: 270px;
    --sidebar-w-mini: 78px;
    --topbar-h: 66px;
    --content-px: 28px;
    --content-py: 26px;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-pop: 0 10px 30px rgba(16, 24, 40, 0.1);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode {
    --primary-bg: rgba(var(--primary-rgb), 0.16);
    --primary-bd: rgba(var(--primary-rgb), 0.35);

    --c-blue-bg: rgba(37, 99, 235, 0.15);
    --c-green-bg: rgba(22, 163, 74, 0.15);
    --c-amber-bg: rgba(217, 119, 6, 0.15);
    --c-red-bg: rgba(220, 38, 38, 0.15);
    --c-violet-bg: rgba(124, 58, 237, 0.17);
    --c-teal-bg: rgba(13, 148, 136, 0.16);
    --c-pink-bg: rgba(219, 39, 119, 0.15);
    --c-sky-bg: rgba(2, 132, 199, 0.16);

    --body-bg: #0c111d;
    --surface: #131a28;
    --surface-2: #182132;
    --surface-3: #1d273a;
    --border: #232e43;
    --border-2: #1f293c;
    --text: #e6e9f0;
    --text-2: #b4bdcd;
    --muted: #7c879c;

    --sidebar-bg: #0a0f1a;
    --sidebar-bg-2: #111826;
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   2. BASE & BOOTSTRAP OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-color: rgba(var(--primary-rgb), 0.45) var(--body-bg);
    scrollbar-width: thin;
}

body {
    margin: 0;
    background: var(--body-bg);
    color: var(--text);
    font-family:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s var(--ease);
}

body.idt-lock {
    overflow: hidden;
}

a {
    color: var(--primary);
    text-decoration: none;
}

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

::-webkit-scrollbar-track {
    background: var(--body-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.4);
    border: 2px solid var(--body-bg);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.86rem;
}

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

.btn-soft {
    --bs-btn-color: var(--text-2);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--primary);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--primary-bd);
    --bs-btn-active-color: var(--primary);
    --bs-btn-active-bg: var(--surface-2);
    --bs-btn-active-border-color: var(--primary-bd);
}

.form-control,
.form-select {
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text);
}

.form-control::placeholder {
    color: var(--muted);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
    background-color: var(--surface);
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   3. SHELL LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.idt-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow-x: clip;
}

.idt-main {
    flex: 1;
    min-width: 0;
    width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    transition:
        margin-left 0.25s var(--ease),
        width 0.25s var(--ease);
}

.idt-content {
    flex: 1 0 auto;
    width: 100%;
}

.idt-container {
    width: 100%;
    padding: var(--content-py) var(--content-px);
}

body.layout-boxed .idt-container {
    max-width: 1400px;
    margin: 0 auto;
}

.idt-backdrop {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   4. SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.idt-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition:
        width 0.25s var(--ease),
        transform 0.25s var(--ease);
}

.idt-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--topbar-h);
    padding: 0 18px;
    border-bottom: 1px solid var(--sidebar-line);
    flex: 0 0 auto;
}

.idt-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.idt-brand-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 2px;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
}

.idt-brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.sidebar-light .idt-brand-logo {
    border: 1px solid var(--border);
}

.idt-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
    white-space: nowrap;
}

.idt-brand-text strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.idt-brand-text small {
    overflow: hidden;
    color: var(--sidebar-label);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.idt-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
}

.idt-side-search {
    position: relative;
    padding: 14px 14px 4px;
    flex: 0 0 auto;
}

.idt-side-search i {
    position: absolute;
    left: 28px;
    top: 50%;
    margin-top: 5px;
    transform: translateY(-50%);
    color: var(--sidebar-label);
    pointer-events: none;
}

.idt-side-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--sidebar-line);
    border-radius: var(--radius-sm);
    background: var(--sidebar-bg-2);
    color: #ffffff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.idt-side-search input::placeholder {
    color: var(--sidebar-label);
}

.idt-side-search input:focus {
    border-color: rgba(var(--primary-rgb), 0.6);
}

.idt-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 20px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.idt-nav:hover,
.idt-nav.is-scrolling {
    scrollbar-color: rgba(var(--primary-rgb), 0.55) transparent;
}

.idt-nav::-webkit-scrollbar {
    width: 5px;
}

.idt-nav::-webkit-scrollbar-track {
    background: transparent;
}

.idt-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border: 0;
}

.idt-nav:hover::-webkit-scrollbar-thumb,
.idt-nav.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.5);
}

.idt-nav-label {
    padding: 16px 12px 6px;
    color: var(--sidebar-label);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.idt-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.idt-nav-link > i:first-child {
    width: 22px;
    flex: 0 0 22px;
    font-size: 1.08rem;
    text-align: center;
}

.idt-nav-link > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idt-nav-link:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}

.idt-nav-link.active {
    background: var(--sidebar-active);
    color: #ffffff;
}

.idt-nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.idt-chev {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.idt-nav-group.open > .idt-nav-link {
    color: #ffffff;
    background: var(--sidebar-hover);
}

.idt-nav-group.open > .idt-nav-link .idt-chev {
    transform: rotate(90deg);
}

.idt-submenu {
    display: none;
    position: relative;
    padding: 4px 0 8px 45px;
}

.idt-submenu::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 4px;
    bottom: 10px;
    width: 1px;
    background: var(--sidebar-line);
}

.idt-submenu-title {
    display: none;
}

.idt-submenu a {
    position: relative;
    display: block;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--sidebar-text);
    font-size: 0.83rem;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.idt-submenu a::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border: 2px solid var(--sidebar-bg);
    border-radius: 50%;
    background: var(--sidebar-label);
}

.idt-submenu a:hover {
    color: #ffffff;
    background: var(--sidebar-hover);
}

.idt-submenu a.active {
    color: #ffffff;
}

.idt-submenu a.active::before {
    background: var(--primary);
}

.idt-nav-link > .idt-badge,
.idt-badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--c-red);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.idt-badge.is-soft {
    background: rgba(var(--primary-rgb), 0.25);
    color: #ffffff;
}

.idt-nav-empty {
    display: none;
    padding: 18px 12px;
    color: var(--sidebar-label);
    font-size: 0.82rem;
    text-align: center;
}

.idt-sidebar-foot {
    padding: 14px;
    border-top: 1px solid var(--sidebar-line);
    flex: 0 0 auto;
}

.idt-session-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--sidebar-bg-2);
    white-space: nowrap;
}

.idt-session-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.22);
    color: #ffffff;
}

.idt-session-card strong {
    display: block;
    color: #ffffff;
    font-size: 0.82rem;
}

.idt-session-card small {
    color: var(--sidebar-label);
    font-size: 0.72rem;
}

.idt-live-dot {
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
}

body.sidebar-light {
    --sidebar-bg: #ffffff;
    --sidebar-bg-2: #f5f6fa;
    --sidebar-text: #4a5468;
    --sidebar-hover: #f2f4f8;
    --sidebar-label: #98a1b3;
    --sidebar-line: #eceef3;
}

body.sidebar-light .idt-sidebar {
    border-right: 1px solid var(--border);
}

body.sidebar-light .idt-brand-text strong,
body.sidebar-light .idt-session-card strong,
body.sidebar-light .idt-side-search input {
    color: var(--text);
}

body.sidebar-light .idt-nav-link:hover,
body.sidebar-light .idt-nav-group.open > .idt-nav-link,
body.sidebar-light .idt-submenu a:hover,
body.sidebar-light .idt-submenu a.active {
    color: var(--text);
}

body.sidebar-light .idt-nav-link.active {
    color: var(--primary);
}

body.sidebar-light .idt-session-card > i {
    color: var(--primary);
}

body.dark-mode.sidebar-light {
    --sidebar-bg: #131a28;
    --sidebar-bg-2: #182132;
    --sidebar-text: #b4bdcd;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-line: #232e43;
}

body.sidebar-brand {
    --sidebar-bg: var(--primary-d);
    --sidebar-bg-2: rgba(255, 255, 255, 0.1);
    --sidebar-text: rgba(255, 255, 255, 0.8);
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-active: rgba(255, 255, 255, 0.18);
    --sidebar-label: rgba(255, 255, 255, 0.55);
    --sidebar-line: rgba(255, 255, 255, 0.12);
}

body.sidebar-brand .idt-nav-link.active::before,
body.sidebar-brand .idt-submenu a.active::before {
    background: #ffffff;
}

body.sidebar-brand .idt-session-card > i {
    background: rgba(255, 255, 255, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   5. COLLAPSED SIDEBAR + FLYOUT (desktop)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    body.idt-collapsed .idt-sidebar {
        width: var(--sidebar-w-mini);
    }

    body.idt-collapsed .idt-main {
        margin-left: var(--sidebar-w-mini);
        width: calc(100% - var(--sidebar-w-mini));
    }

    body.idt-collapsed .idt-brand {
        justify-content: center;
        padding: 0;
    }

    body.idt-collapsed .idt-brand-text,
    body.idt-collapsed .idt-side-search,
    body.idt-collapsed .idt-nav-link > span,
    body.idt-collapsed .idt-chev,
    body.idt-collapsed .idt-session-card div,
    body.idt-collapsed .idt-live-dot {
        display: none !important;
    }

    body.idt-collapsed .idt-nav {
        overflow: visible;
        padding-top: 14px;
    }

    body.idt-collapsed .idt-nav-label {
        height: 1px;
        margin: 10px 8px;
        padding: 0;
        overflow: hidden;
        background: var(--sidebar-line);
        color: transparent;
    }

    body.idt-collapsed .idt-nav-link {
        justify-content: center;
        padding: 11px 0;
    }

    body.idt-collapsed .idt-nav-link .idt-badge {
        position: absolute;
        top: 4px;
        right: 8px;
        min-width: 16px;
        padding: 0 4px;
        font-size: 0.6rem;
    }

    body.idt-collapsed .idt-nav-group {
        position: relative;
    }

    body.idt-collapsed .idt-nav-group > .idt-submenu {
        position: absolute;
        left: calc(100% + 12px);
        top: 0;
        z-index: 1050;
        display: block !important;
        width: 230px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-pop);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition:
            opacity 0.15s ease,
            transform 0.15s ease,
            visibility 0.15s;
    }

    body.idt-collapsed .idt-nav-group > .idt-submenu::before {
        display: none;
    }

    body.idt-collapsed .idt-nav-group:hover > .idt-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    body.idt-collapsed .idt-submenu-title {
        display: block;
        padding: 6px 10px 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 0.8rem;
        font-weight: 700;
    }

    body.idt-collapsed .idt-submenu a {
        color: var(--text-2);
        padding-left: 12px;
    }

    body.idt-collapsed .idt-submenu a::before {
        display: none;
    }

    body.idt-collapsed .idt-submenu a:hover,
    body.idt-collapsed .idt-submenu a.active {
        background: var(--primary-bg);
        color: var(--primary);
    }

    body.idt-collapsed .idt-session-card {
        justify-content: center;
        padding: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   6. TOP BAR
   ═══════════════════════════════════════════════════════════════════ */
.idt-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: var(--topbar-h);
    padding: 0 var(--content-px);
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
}

body.dark-mode .idt-topbar {
    background: rgba(19, 26, 40, 0.88);
}

.idt-topbar-left,
.idt-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.idt-topbar-left {
    flex: 1;
    min-width: 0;
}

.idt-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 1.08rem;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.idt-icon-btn:hover {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
}

.idt-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 10px;
    background: var(--c-red);
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 12px;
}

.idt-session-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}

.idt-session-btn i:first-child {
    color: var(--primary);
}

.idt-session-btn strong {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--c-green-bg);
    color: var(--c-green);
    font-weight: 700;
}

.idt-session-btn .bi-chevron-down {
    color: var(--muted);
    font-size: 0.7rem;
}

.idt-search {
    position: relative;
    width: 100%;
    max-width: 360px;
}

.idt-search > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.idt-search .form-control {
    height: 40px;
    padding-left: 38px;
    padding-right: 64px;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 0.86rem;
}

.idt-search kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.66rem;
    box-shadow: none;
}

.idt-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
}

.idt-profile-btn > i {
    color: var(--muted);
    font-size: 0.72rem;
}

.idt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
}

.idt-avatar-lg {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    font-size: 0.9rem;
}

.idt-profile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.idt-profile-text strong {
    font-size: 0.84rem;
}

.idt-profile-text small {
    color: var(--muted);
    font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════════════════════════
   7. DROPDOWNS
   ═══════════════════════════════════════════════════════════════════ */
.idt-dropdown {
    margin-top: 8px !important;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.idt-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--text-2);
    font-size: 0.86rem;
    font-weight: 500;
}

.idt-dropdown .dropdown-item:hover,
.idt-dropdown .dropdown-item:focus {
    background: var(--surface-2);
    color: var(--text);
}

.idt-dropdown .dropdown-item.active {
    background: var(--primary-bg);
    color: var(--primary);
}

.idt-dropdown .dropdown-divider {
    margin: 4px 0;
    border-color: var(--border);
}

.idt-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.idt-dropdown-head h6 {
    margin: 0;
    color: var(--text);
    font-weight: 700;
}

.idt-dropdown-head a,
.idt-dropdown-foot a {
    font-size: 0.8rem;
    font-weight: 600;
}

.idt-dropdown-foot {
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.idt-dropdown-body {
    max-height: 320px;
    overflow-y: auto;
}

.idt-notify {
    width: 350px;
}

.idt-session-menu {
    min-width: 220px;
    padding: 6px 0;
}

.idt-notify-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-2);
    color: var(--text);
}

.idt-notify-item:last-child {
    border-bottom: 0;
}

.idt-notify-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.idt-notify-item.unread {
    background: var(--primary-bg);
}

.idt-notify-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.idt-notify-text strong {
    font-size: 0.84rem;
}

.idt-notify-text small {
    color: var(--text-2);
    font-size: 0.78rem;
}

.idt-notify-text em {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.72rem;
    font-style: normal;
}

.idt-profile-menu {
    width: 250px;
    padding-bottom: 6px;
}

.idt-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.idt-profile-head strong {
    display: block;
    color: var(--text);
}

.idt-profile-head small {
    color: var(--muted);
    font-size: 0.78rem;
}

/* ═══════════════════════════════════════════════════════════════════
   8. PAGE HEAD & WELCOME BANNER
   ═══════════════════════════════════════════════════════════════════ */
.idt-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.idt-page-head h1 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.idt-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.idt-breadcrumb a {
    color: var(--text-2);
}

.idt-breadcrumb i {
    font-size: 0.65rem;
}

.idt-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.idt-page-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
}

.idt-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 26px 28px;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(
        120deg,
        var(--primary) 0%,
        var(--primary-d) 100%
    );
    color: #ffffff;
}

.idt-welcome::before,
.idt-welcome::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.idt-welcome::before {
    width: 320px;
    height: 320px;
    right: -80px;
    top: -170px;
    background: rgba(255, 255, 255, 0.05);
}

.idt-welcome::after {
    width: 200px;
    height: 200px;
    right: 180px;
    bottom: -140px;
}

.idt-welcome > * {
    position: relative;
    z-index: 1;
}

.idt-welcome-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.74rem;
    font-weight: 600;
}

.idt-welcome h2 {
    margin: 0 0 6px;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
}

.idt-welcome p {
    max-width: 540px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    line-height: 1.6;
}

.idt-welcome-stats {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.idt-welcome-stat {
    min-width: 120px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.idt-welcome-stat small {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.74rem;
    font-weight: 500;
}

.idt-welcome-stat strong {
    display: block;
    margin-top: 2px;
    font-size: 1.35rem;
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════
   9. CARDS & KPI STATS
   ═══════════════════════════════════════════════════════════════════ */
.idt-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}

.idt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-2);
}

.idt-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.idt-card-title h6 {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.idt-card-title small {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
}

.idt-card-body {
    padding: 20px;
}

.idt-card-body.p-0 {
    padding: 0;
}

.idt-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    font-size: 1.02rem;
}

.tone-primary {
    background: var(--primary-bg);
    color: var(--primary);
}
.tone-blue {
    background: var(--c-blue-bg);
    color: var(--c-blue);
}
.tone-green {
    background: var(--c-green-bg);
    color: var(--c-green);
}
.tone-amber {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}
.tone-red {
    background: var(--c-red-bg);
    color: var(--c-red);
}
.tone-violet {
    background: var(--c-violet-bg);
    color: var(--c-violet);
}
.tone-teal {
    background: var(--c-teal-bg);
    color: var(--c-teal);
}
.tone-pink {
    background: var(--c-pink-bg);
    color: var(--c-pink);
}
.tone-sky {
    background: var(--c-sky-bg);
    color: var(--c-sky);
}

.idt-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 18px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}

.idt-stat:hover {
    border-color: var(--primary-bd);
    transform: translateY(-2px);
}

.idt-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.idt-stat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    font-size: 1.2rem;
}

.idt-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.idt-trend.up {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.idt-trend.down {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.idt-trend.flat {
    background: var(--surface-3);
    color: var(--text-2);
}

.idt-stat-label {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.idt-stat-value {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.idt-stat-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.idt-stat-foot small {
    color: var(--muted);
    font-size: 0.75rem;
}

.idt-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 34px;
}

.idt-spark span {
    width: 6px;
    height: var(--h, 0%);
    border-radius: 3px;
    background: currentColor;
    opacity: 0.35;
    transition: height 0.6s var(--ease);
}

.idt-spark span:last-child {
    opacity: 1;
}

.idt-segment {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}

.idt-segment button {
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.idt-segment button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

body.dark-mode .idt-segment button.active {
    background: var(--surface-3);
}

/* ═══════════════════════════════════════════════════════════════════
   10. QUICK ACTIONS
   ═══════════════════════════════════════════════════════════════════ */
.idt-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.idt-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.idt-action:hover {
    border-color: var(--primary-bd);
    background: var(--surface-2);
    color: var(--text);
    transform: translateY(-2px);
}

.idt-action .idt-ic {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    font-size: 1.15rem;
    transition: transform 0.2s var(--ease);
}

.idt-action:hover .idt-ic {
    transform: scale(1.06);
}

.idt-action strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
}

.idt-action small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.idt-action-count {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.idt-action-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--muted);
    font-size: 0.85rem;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.idt-action:hover .idt-action-arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   11. CHARTS (CSS only)
   ═══════════════════════════════════════════════════════════════════ */
.idt-chart {
    display: flex;
    gap: 10px;
}

.idt-chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 240px;
    padding-bottom: 0;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
}

.idt-chart-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

.idt-bars {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-width: 560px;
    height: 240px;
    padding: 0 4px;
    background-image: linear-gradient(var(--border-2) 1px, transparent 1px);
    background-size: 100% 25%;
    border-bottom: 1px solid var(--border);
}

.idt-bar {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.idt-bar span {
    position: relative;
    width: 100%;
    max-width: 38px;
    height: var(--h, 0%);
    min-height: 3px;
    border-radius: 7px 7px 3px 3px;
    background: rgba(var(--primary-rgb), 0.18);
    transition:
        height 0.7s var(--ease),
        background 0.15s ease;
    cursor: pointer;
}

.idt-bar:hover span,
.idt-bar.is-top span {
    background: var(--primary);
}

.idt-bar em {
    position: absolute;
    left: 50%;
    bottom: calc(var(--h, 0%) + 8px);
    z-index: 2;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--text);
    color: var(--surface);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        bottom 0.7s var(--ease);
    pointer-events: none;
}

.idt-bar:hover em {
    opacity: 1;
    transform: translate(-50%, 0);
}

.idt-bar-labels {
    display: flex;
    gap: 14px;
    min-width: 560px;
    padding: 8px 4px 0;
}

.idt-bar-labels small {
    flex: 1;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idt-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.idt-donut {
    position: relative;
    width: 168px;
    height: 168px;
    flex: 0 0 168px;
    border-radius: 50%;
    background: conic-gradient(var(--surface-3) 0 100%);
}

.idt-donut::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: var(--surface);
}

.idt-donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.idt-donut-center strong {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.idt-donut-center small {
    color: var(--muted);
    font-size: 0.74rem;
}

.idt-legend {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.idt-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
    color: var(--text-2);
    font-size: 0.82rem;
}

.idt-legend li:last-child {
    border-bottom: 0;
}

.idt-legend i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 3px;
}

.idt-legend span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idt-legend strong {
    color: var(--text);
    font-weight: 700;
}

.idt-ring-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.idt-ring-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--border-2);
    border-radius: 12px;
    background: var(--surface-2);
    text-align: center;
}

.idt-ring {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-c, var(--primary)) calc(var(--p, 0) * 1%),
        var(--surface-3) 0
    );
}

.idt-ring::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--surface-2);
}

.idt-ring b {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 800;
}

.idt-ring-item strong {
    color: var(--text);
    font-size: 0.82rem;
}

.idt-ring-item small {
    color: var(--muted);
    font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════════════════════════
   12. TABLES, PILLS, PROGRESS
   ═══════════════════════════════════════════════════════════════════ */
.idt-table-wrap {
    max-height: 372px;
    overflow: auto;
}

.idt-table {
    width: 100%;
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border-2);
}

.idt-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 16px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.idt-table tbody td {
    padding: 12px 16px;
    color: var(--text-2);
    font-size: 0.85rem;
    vertical-align: middle;
    white-space: nowrap;
}

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

.idt-table tbody tr:hover td {
    background: var(--surface-2);
}

.idt-entity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.idt-entity strong {
    display: block;
    color: var(--text);
    font-weight: 600;
}

.idt-entity small {
    color: var(--muted);
    font-size: 0.75rem;
}

.idt-entity .idt-ic {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.72rem;
    font-weight: 800;
}

.idt-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.idt-progress {
    width: 100%;
    min-width: 80px;
    height: 6px;
    border-radius: 6px;
    background: var(--surface-3);
    overflow: hidden;
}

.idt-progress span {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: 6px;
    background: var(--primary);
    transition: width 0.7s var(--ease);
}

.idt-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.idt-progress-row small {
    min-width: 34px;
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: right;
}

.idt-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-2);
    color: var(--muted);
    font-size: 0.8rem;
}

.idt-table-foot a {
    font-weight: 600;
}

.idt-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--muted);
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.idt-row-action:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   13. LISTS, STUDENTS, TIMELINE
   ═══════════════════════════════════════════════════════════════════ */
.idt-students {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.idt-student {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    border: 1px solid var(--border-2);
    border-radius: 12px;
    background: var(--surface-2);
    text-align: center;
    transition: border-color 0.15s ease;
}

.idt-student:hover {
    border-color: var(--primary-bd);
}

.idt-student-av {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 800;
}

.idt-student-av::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--surface-2);
    border-radius: 50%;
    background: var(--c-green);
}

.idt-student strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idt-student small {
    color: var(--muted);
    font-size: 0.72rem;
}

.idt-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-2);
}

.idt-list-item:last-child {
    border-bottom: 0;
}

.idt-list-text {
    flex: 1;
    min-width: 0;
}

.idt-list-text strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idt-list-text small {
    color: var(--muted);
    font-size: 0.75rem;
}

.idt-list-btns {
    display: flex;
    gap: 6px;
}

.idt-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.idt-mini-btn.is-ok:hover {
    border-color: var(--c-green);
    background: var(--c-green-bg);
    color: var(--c-green);
}

.idt-mini-btn.is-no:hover {
    border-color: var(--c-red);
    background: var(--c-red-bg);
    color: var(--c-red);
}

.idt-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.idt-timeline li {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
}

.idt-timeline li:last-child {
    padding-bottom: 0;
}

.idt-timeline li::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 46px;
    bottom: 4px;
    width: 1px;
    background: var(--border);
}

.idt-timeline li:last-child::before {
    display: none;
}

.idt-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    line-height: 1;
}

.idt-date b {
    font-size: 1rem;
    font-weight: 800;
}

.idt-date small {
    margin-top: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.idt-timeline-text strong {
    display: block;
    color: var(--text);
    font-size: 0.86rem;
}

.idt-timeline-text small {
    color: var(--muted);
    font-size: 0.76rem;
}

.idt-timeline-text .idt-pill {
    margin-top: 6px;
}

.idt-empty-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 20px 18px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════
   14. FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.idt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-height: 52px;
    padding: 12px var(--content-px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
}

.idt-footer a {
    font-weight: 600;
}

.idt-heart {
    color: var(--c-red);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════
   15. THEME CUSTOMIZER
   ═══════════════════════════════════════════════════════════════════ */
.idt-customizer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    transform: translateX(105%);
    transition: transform 0.25s var(--ease);
}

body.idt-customizer-open .idt-customizer {
    transform: translateX(0);
}

.idt-customizer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(15, 23, 42, 0.35);
}

body.idt-customizer-open .idt-customizer-backdrop {
    display: block;
}

.idt-customizer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.idt-customizer-head h6 {
    margin: 0;
    color: var(--text);
    font-weight: 700;
}

.idt-customizer-head small {
    color: var(--muted);
    font-size: 0.78rem;
}

.idt-customizer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.idt-customizer-foot {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

.idt-customizer-foot .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
}

.idt-cz-section {
    margin-bottom: 24px;
}

.idt-cz-label {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.idt-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.idt-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.7rem;
    font-weight: 600;
}

.idt-swatch-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.85rem;
}

.idt-swatch-dot i {
    display: none;
}

.idt-swatch.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
    color: var(--text);
}

.idt-swatch.active .idt-swatch-dot i {
    display: inline;
}

.idt-swatch-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.idt-swatch-custom input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.idt-swatch-custom span {
    flex: 1;
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 500;
}

.idt-swatch-custom code {
    color: var(--muted);
    font-size: 0.78rem;
}

.idt-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.idt-options.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.idt-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.idt-option > i {
    font-size: 1.2rem;
}

.idt-option.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
    color: var(--primary);
}

.idt-preview {
    display: flex;
    width: 100%;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.idt-preview b {
    width: 30%;
}

.idt-preview em {
    flex: 1;
    background: var(--surface-2);
}

.pv-dark b {
    background: #111827;
}
.pv-light b {
    background: #ffffff;
    border-right: 1px solid var(--border);
}
.pv-brand b {
    background: var(--primary);
}

body.radius-sharp {
    --radius: 8px;
    --radius-sm: 6px;
}

body.radius-round {
    --radius: 20px;
    --radius-sm: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1399.98px) {
    .idt-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    :root {
        --content-px: 22px;
    }

    .idt-search kbd {
        display: none;
    }

    .idt-search .form-control {
        padding-right: 12px;
    }

    .idt-welcome {
        flex-direction: column;
        align-items: flex-start;
    }

    .idt-welcome-stats {
        width: 100%;
    }

    .idt-welcome-stat {
        flex: 1;
    }
}

@media (max-width: 991.98px) {
    :root {
        --content-px: 16px;
        --content-py: 20px;
    }

    .idt-sidebar {
        transform: translateX(-100%);
    }

    .idt-main {
        width: 100%;
        margin-left: 0;
    }

    .idt-sidebar-close {
        display: inline-flex;
    }

    body.idt-sidebar-open .idt-sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-pop);
    }

    body.idt-sidebar-open .idt-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(15, 23, 42, 0.5);
    }

    .idt-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .idt-session-btn .idt-session-label {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .idt-search,
    .idt-hide-sm,
    .idt-profile-text,
    .idt-profile-btn > i {
        display: none;
    }

    .idt-profile-btn {
        padding: 3px;
    }

    .idt-topbar-right {
        gap: 8px;
    }

    .idt-page-head h1 {
        font-size: 1.3rem;
    }

    .idt-page-actions {
        width: 100%;
    }

    .idt-page-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .idt-welcome {
        padding: 22px 20px;
    }

    .idt-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .idt-card-head,
    .idt-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .idt-list-item {
        padding-left: 16px;
        padding-right: 16px;
    }

    .idt-donut-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .idt-donut {
        margin: 0 auto;
    }

    .idt-footer {
        justify-content: center;
        text-align: center;
    }

    .idt-notify {
        width: 310px;
    }

    .idt-customizer {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .idt-welcome-stats {
        flex-wrap: wrap;
    }

    .idt-welcome-stat {
        min-width: calc(50% - 6px);
    }

    .idt-stat-value {
        font-size: 1.35rem;
    }

    .idt-students,
    .idt-ring-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .idt-chart-axis {
        display: none;
    }

    .idt-table-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 379.98px) {
    .idt-actions {
        grid-template-columns: 1fr;
    }

    .idt-action {
        flex-direction: row;
        align-items: center;
    }

    .idt-icon-btn {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .idt-session-btn {
        padding: 0 8px;
    }

    .idt-students,
    .idt-ring-list {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   17. SHARED COMPONENTS
   Branch rail, hero, health, tabs, staff, attendance, EOD,
   leaves, tasks, notices, reports, modals, toast
   ═══════════════════════════════════════════════════════════════════ */
.bx-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.bx-rail {
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--topbar-h) - 40px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.bx-rail-head {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-2);
}

.bx-rail-head h6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.bx-rail-head h6 span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.bx-rail-search {
    position: relative;
}

.bx-rail-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.bx-rail-search .form-control {
    height: 38px;
    padding-left: 34px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 0.84rem;
}

.bx-rail-filter {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.bx-rail-filter button {
    flex: 1;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.bx-rail-filter button.active {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.bx-rail-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.bx-branch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    text-align: left;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.bx-branch:hover {
    background: var(--surface-2);
}

.bx-branch.active {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
}

.bx-branch.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.bx-branch-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 800;
}

.bx-branch-text {
    flex: 1;
    min-width: 0;
}

.bx-branch-text strong {
    display: block;
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-branch-text small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-score-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

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

.h-excellent {
    background: var(--c-green-bg);
    color: var(--c-green);
}
.h-good {
    background: var(--c-blue-bg);
    color: var(--c-blue);
}
.h-attention {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}
.h-critical {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.bx-rail-foot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-2);
    background: var(--surface-2);
    text-align: center;
}

.bx-rail-foot div strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
}

.bx-rail-foot div small {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
}

.bx-main {
    min-width: 0;
}

.bx-main.is-loading .bx-fade {
    opacity: 0.35;
    transform: translateY(4px);
}

.bx-fade {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.bx-hero {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bx-hero-cover {
    height: 92px;
    background:
        radial-gradient(
            circle at 85% -20%,
            rgba(255, 255, 255, 0.22) 0 120px,
            transparent 121px
        ),
        radial-gradient(
            circle at 70% 160%,
            rgba(255, 255, 255, 0.14) 0 90px,
            transparent 91px
        ),
        linear-gradient(120deg, var(--primary) 0%, var(--primary-d) 100%);
}

.bx-hero-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 24px 20px;
    margin-top: -40px;
}

.bx-hero-id {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.bx-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    padding: 6px;
    border: 4px solid var(--surface);
    border-radius: 20px;
    background: #ffffff;
}

.bx-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bx-hero-name {
    min-width: 0;
    padding-top: 50px;
}

.bx-hero-name h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.bx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-2);
    font-size: 0.8rem;
}

.bx-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bx-meta i {
    color: var(--muted);
}

.bx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bx-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
}

.bx-hero-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--border-2);
}

.bx-strip-item {
    padding: 14px 18px;
    border-right: 1px solid var(--border-2);
}

.bx-strip-item:last-child {
    border-right: 0;
}

.bx-strip-item small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.bx-strip-item strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.bx-strip-item em {
    color: var(--muted);
    font-size: 0.72rem;
    font-style: normal;
}

.bx-strip-item em.up {
    color: var(--c-green);
}
.bx-strip-item em.down {
    color: var(--c-red);
}

.bx-health {
    display: flex;
    align-items: center;
    gap: 22px;
}

.bx-health-ring {
    position: relative;
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-c, var(--primary)) calc(var(--p, 0) * 1%),
        var(--surface-3) 0
    );
    transition: background 0.4s ease;
}

.bx-health-ring::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--surface);
}

.bx-health-ring div {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bx-health-ring strong {
    color: var(--text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.bx-health-ring small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.bx-health-list {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
}

.bx-health-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    color: var(--text-2);
    font-size: 0.8rem;
}

.bx-health-top span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bx-health-top strong {
    color: var(--text);
    font-weight: 700;
}

.bx-alerts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bx-alerts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
}

.bx-alerts li:last-child {
    margin-bottom: 0;
}

.bx-alerts li i {
    margin-top: 1px;
}

.bx-tabs-wrap {
    position: sticky;
    top: var(--topbar-h);
    z-index: 20;
    margin-bottom: 20px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bx-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bx-tabs::-webkit-scrollbar {
    display: none;
}

.bx-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.bx-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.bx-tab.active {
    background: var(--primary);
    color: #ffffff;
}

.bx-tab b {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 0.68rem;
    font-weight: 700;
}

.bx-tab.active b {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.bx-pane {
    display: none;
    animation: bxIn 0.25s ease;
}

.bx-pane.active {
    display: block;
}

@keyframes bxIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bx-head-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bx-head-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 800;
}

.bx-head-card > div {
    min-width: 0;
}

.bx-head-card .idt-pill {
    white-space: normal;
}

.bx-head-card strong {
    display: block;
    color: var(--text);
    font-size: 0.98rem;
}

.bx-head-card small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

.bx-contact-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.bx-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.8rem;
    min-width: 0;
}

.bx-contact i {
    color: var(--primary);
}

.bx-contact span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-duo-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 190px;
    padding: 0 4px;
    background-image: linear-gradient(var(--border-2) 1px, transparent 1px);
    background-size: 100% 25%;
    border-bottom: 1px solid var(--border);
}

.bx-duo {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 100%;
}

.bx-duo span {
    width: 100%;
    max-width: 16px;
    height: var(--h, 0%);
    border-radius: 5px 5px 2px 2px;
    transition: height 0.6s var(--ease);
}

.bx-duo span:first-of-type {
    background: var(--primary);
}

.bx-duo span:last-of-type {
    background: rgba(var(--primary-rgb), 0.28);
}

.bx-duo em {
    position: absolute;
    left: 50%;
    top: 4px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--text);
    color: var(--surface);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.bx-duo:hover em {
    opacity: 1;
}

.bx-duo-labels {
    display: flex;
    gap: 12px;
    padding: 8px 4px 0;
}

.bx-duo-labels small {
    flex: 1;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

.bx-key {
    display: flex;
    gap: 14px;
    color: var(--text-2);
    font-size: 0.76rem;
    font-weight: 600;
}

.bx-key span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bx-key i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.bx-course-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}

.bx-course-row:last-child {
    border-bottom: 0;
}

.bx-course-row .idt-ic {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.9rem;
}

.bx-course-row div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.bx-course-row strong {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 0.82rem;
}

.bx-course-row strong span {
    color: var(--muted);
    font-weight: 600;
}

.bx-activity {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bx-activity li {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.bx-activity li:last-child {
    padding-bottom: 0;
}

.bx-activity li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 2px;
    width: 1px;
    background: var(--border);
}

.bx-activity li:last-child::before {
    display: none;
}

.bx-activity .idt-ic {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    font-size: 0.85rem;
}

.bx-activity strong {
    display: block;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.bx-activity small {
    color: var(--muted);
    font-size: 0.74rem;
}

.bx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.bx-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bx-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
}

.bx-toolbar .form-control,
.bx-toolbar .form-select {
    height: 38px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
}

.bx-search-sm {
    position: relative;
    width: 240px;
}

.bx-search-sm i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}

.bx-search-sm .form-control {
    padding-left: 34px;
}

.bx-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.bx-person {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}

.bx-person:hover {
    border-color: var(--primary-bd);
}

.bx-person.is-head {
    border-color: var(--primary-bd);
    background: linear-gradient(
        180deg,
        var(--primary-bg) 0%,
        var(--surface) 70%
    );
}

.bx-person-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bx-person-av {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 800;
}

.bx-person-av i {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--surface);
    border-radius: 50%;
}

.st-present {
    background: var(--c-green);
}
.st-leave {
    background: var(--c-amber);
}
.st-absent {
    background: var(--c-red);
}

.bx-person-name {
    flex: 1;
    min-width: 0;
}

.bx-person-name strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-person-name small {
    color: var(--muted);
    font-size: 0.75rem;
}

.bx-person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bx-person-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
}

.bx-person.is-head .bx-person-stats {
    background: var(--surface);
}

.bx-person-stats strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
}

.bx-person-stats small {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
}

.bx-person-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bx-person-foot small {
    color: var(--muted);
    font-size: 0.74rem;
}

.bx-person-foot .idt-list-btns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
}

.bx-person-foot .idt-list-btns a:hover {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
}

.bx-heat-head,
.bx-heat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.bx-heat-head {
    margin-bottom: 6px;
}

.bx-heat-head span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.bx-heat span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 46px;
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: default;
}

.bx-heat span.is-blank {
    background: transparent;
}

.bx-heat span.is-off {
    background: repeating-linear-gradient(
        45deg,
        var(--surface-2),
        var(--surface-2) 4px,
        var(--surface-3) 4px,
        var(--surface-3) 8px
    );
    color: var(--muted);
}

.bx-heat span.l1 {
    background: rgba(var(--primary-rgb), 0.16);
}
.bx-heat span.l2 {
    background: rgba(var(--primary-rgb), 0.34);
}
.bx-heat span.l3 {
    background: rgba(var(--primary-rgb), 0.58);
    color: #ffffff;
}
.bx-heat span.l4 {
    background: var(--primary);
    color: #ffffff;
}
.bx-heat span.is-today {
    outline: 2px solid var(--text);
    outline-offset: 1px;
}

.bx-heat-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.7rem;
}

.bx-heat-legend i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.bx-batch {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}

.bx-batch:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.bx-batch:first-child {
    padding-top: 0;
}

.bx-batch-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.bx-batch-top strong {
    color: var(--text);
}

.bx-batch-top small {
    color: var(--muted);
}

.bx-eod {
    border-bottom: 1px solid var(--border-2);
}

.bx-eod:last-child {
    border-bottom: 0;
}

.bx-eod-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
}

.bx-eod-row:hover {
    background: var(--surface-2);
}

.bx-eod-row .idt-ic {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 0.76rem;
    font-weight: 800;
}

.bx-eod-text {
    flex: 1;
    min-width: 0;
}

.bx-eod-text strong {
    display: block;
    font-size: 0.86rem;
}

.bx-eod-text small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-eod-time {
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.bx-eod-row .bx-chev {
    color: var(--muted);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.bx-eod.open .bx-chev {
    transform: rotate(180deg);
}

.bx-eod-body {
    display: none;
    padding: 0 20px 16px 70px;
}

.bx-eod-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.bx-eod-box {
    padding: 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.bx-eod-box h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bx-eod-box ul {
    margin: 0;
    padding-left: 16px;
    color: var(--text-2);
    font-size: 0.8rem;
}

.bx-leave-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.bx-mini-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bx-mini-stat strong {
    display: block;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.15;
}

.bx-mini-stat small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.bx-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bx-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.bx-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.bx-col-head h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
}

.bx-col-head h6 i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bx-col-head b {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.72rem;
}

.bx-col-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 60px;
}

.bx-task {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition:
        border-color 0.15s ease,
        opacity 0.2s ease;
}

.bx-task:hover {
    border-color: var(--primary-bd);
}

.bx-task-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.bx-task h6 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

.bx-task p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.77rem;
    line-height: 1.45;
}

.bx-task-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.bx-assignee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.bx-assignee span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    font-size: 0.62rem;
    font-weight: 800;
}

.bx-assignee em {
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.bx-due.is-late {
    color: var(--c-red);
}

.bx-task-move {
    display: flex;
    gap: 4px;
}

.bx-task-move button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8rem;
}

.bx-task-move button:hover {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
}

.bx-task.is-done h6 {
    color: var(--muted);
    text-decoration: line-through;
}

.bx-col-empty {
    padding: 18px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.bx-notices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bx-notice {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bx-notice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--n-c, var(--primary));
}

.bx-notice.is-pinned {
    background: linear-gradient(
        90deg,
        var(--primary-bg) 0%,
        var(--surface) 60%
    );
}

.bx-notice-body {
    flex: 1;
    min-width: 0;
}

.bx-notice-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.bx-notice-top h6 {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.bx-notice p {
    margin: 0 0 10px;
    color: var(--text-2);
    font-size: 0.82rem;
    line-height: 1.55;
}

.bx-notice-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    color: var(--muted);
    font-size: 0.75rem;
}

.bx-notice-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bx-notice-read {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}

.bx-notice-read .idt-progress {
    min-width: 70px;
}

.bx-notice-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bx-notice-side button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
}

.bx-notice-side button:hover,
.bx-notice-side button.active {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
}

.bx-reports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bx-report {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}

.bx-report:hover {
    border-color: var(--primary-bd);
}

.bx-report h6 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.bx-report p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.bx-report-btns {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.bx-report-btns .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    font-size: 0.78rem;
}

.bx-score-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 0.76rem;
    font-weight: 800;
}

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.modal-header,
.modal-footer {
    border-color: var(--border-2);
}

.modal-header {
    padding: 16px 20px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 14px 20px;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.idt-form .form-label {
    margin-bottom: 6px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.idt-form .form-control:not(textarea),
.idt-form .form-select {
    height: 42px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
}

.idt-form textarea.form-control {
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
}

body.dark-mode .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B4BDCD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.idt-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.idt-chip-group label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.idt-chip-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.idt-chip-group span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.idt-chip-group input:checked + span {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.idt-chip-group input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.idt-toast-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 40px);
}

.idt-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    animation: toastIn 0.25s ease;
}

.idt-toast i {
    font-size: 1.1rem;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1399.98px) {
    .bx-hero-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bx-strip-item:nth-child(3) {
        border-right: 0;
    }

    .bx-strip-item:nth-child(-n + 3) {
        border-bottom: 1px solid var(--border-2);
    }
}

@media (max-width: 1199.98px) {
    .bx-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-rail {
        position: static;
        max-height: none;
    }

    .bx-rail-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 12px;
    }

    .bx-branch {
        flex: 0 0 240px;
        margin: 0;
        border-color: var(--border);
    }

    .bx-branch.active::before {
        display: none;
    }

    .bx-rail-foot {
        display: none;
    }

    .bx-leave-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .bx-board {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-eod-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-eod-body {
        padding-left: 20px;
    }
}

@media (max-width: 767.98px) {
    .bx-hero-body {
        flex-direction: column;
        align-items: stretch;
        padding: 0 16px 16px;
    }

    .bx-hero-id {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bx-hero-name {
        padding-top: 0;
    }

    .bx-hero-logo {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .bx-hero-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .bx-hero-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bx-strip-item {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-2);
    }

    .bx-strip-item:nth-child(3) {
        border-right: 1px solid var(--border-2);
    }

    .bx-strip-item:nth-child(even) {
        border-right: 0;
    }

    .bx-strip-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .bx-health {
        flex-direction: column;
        align-items: stretch;
    }

    .bx-health-ring {
        margin: 0 auto;
    }

    .bx-health-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-toolbar,
    .bx-toolbar-left {
        align-items: stretch;
    }

    .bx-toolbar-left,
    .bx-search-sm {
        width: 100%;
    }

    .bx-toolbar .btn {
        flex: 1;
        justify-content: center;
    }

    .bx-eod-row {
        padding: 12px 16px;
    }

    .bx-eod-time {
        display: none;
    }

    .bx-notice {
        padding: 14px;
    }

    .bx-notice-side {
        display: none;
    }

    .bx-contact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .idt-toast-wrap {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .idt-toast {
        min-width: 0;
    }
}

@media (max-width: 479.98px) {
    .bx-leave-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-branch {
        flex-basis: 210px;
    }

    .bx-person-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media print {
    .idt-sidebar,
    .idt-topbar,
    .idt-footer,
    .bx-rail,
    .bx-tabs-wrap,
    .bx-hero-actions,
    .idt-page-actions,
    .idt-customizer,
    .idt-customizer-backdrop {
        display: none !important;
    }

    .idt-main {
        width: 100% !important;
        margin: 0 !important;
    }

    .bx-layout {
        display: block;
    }

    .bx-pane {
        display: block !important;
        margin-bottom: 20px;
        break-inside: avoid-page;
    }
}

.idt-table tr.is-link {
    cursor: pointer;
}

.idt-table tr.is-link strong a {
    color: var(--text);
}

.idt-table tr.is-link:hover strong a {
    color: var(--primary);
}

.idt-form .form-check-input {
    border-color: var(--border);
    background-color: var(--surface-3);
}

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

.idt-form .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.idt-form .form-check-label {
    color: var(--text-2);
    font-size: 0.84rem;
}

.idt-form .form-control.is-invalid {
    border-color: var(--c-red);
    background-image: none;
}

.text-body-secondary {
    color: var(--muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   18. CONTROL ROWS & SWITCHES
   App cards, feature switches, security rules, users & devices
   ═══════════════════════════════════════════════════════════════════ */
.ctl-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ctl-app {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ctl-app-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-2);
}

.ctl-app-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
}

.ctl-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ctl-app-icon b {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 3px solid var(--surface);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.7rem;
}

.ctl-app-title {
    flex: 1;
    min-width: 0;
}

.ctl-app-title h6 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 3px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.ctl-app-title small {
    color: var(--muted);
    font-size: 0.78rem;
}

.ctl-app-nums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border-2);
}

.ctl-app-nums div {
    padding: 14px 18px;
    border-right: 1px solid var(--border-2);
}

.ctl-app-nums div:last-child {
    border-right: 0;
}

.ctl-app-nums small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.ctl-app-nums strong {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
}

.ctl-app-body {
    padding: 6px 20px 16px;
}

.ctl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}

.ctl-row:last-child {
    border-bottom: 0;
}

.ctl-row-text {
    min-width: 0;
}

.ctl-row-text strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}

.ctl-row-text strong i {
    color: var(--muted);
}

.ctl-row-text small {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.ctl-row .form-select {
    width: auto;
    min-width: 110px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.ctl-switch.form-switch {
    margin: 0;
    padding-left: 2.6em;
    min-height: 0;
}

.ctl-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin-top: 0;
    margin-left: -2.6em;
    border-color: var(--border);
    background-color: var(--surface-3);
    cursor: pointer;
}

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

.ctl-switch .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.ctl-switch.is-danger .form-check-input:checked {
    border-color: var(--c-red);
    background-color: var(--c-red);
}

.ctl-maint {
    display: none;
    margin: 0 0 12px;
}

.ctl-maint.show {
    display: block;
}

.ctl-maint textarea {
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.ctl-app.is-off .ctl-app-head {
    background: var(--c-red-bg);
}

.ctl-app.is-maint .ctl-app-head {
    background: var(--c-amber-bg);
}

.ctl-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ctl-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.ctl-feature:has(.form-check-input:checked) {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
}

.ctl-feature .idt-ic {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.95rem;
}

.ctl-feature div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.ctl-feature strong {
    display: block;
    color: var(--text);
    font-size: 0.84rem;
}

.ctl-feature small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctl-range {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}

.ctl-range input {
    flex: 1;
    accent-color: var(--primary);
}

.ctl-range b {
    min-width: 52px;
    color: var(--text);
    font-size: 0.8rem;
    text-align: right;
}

.ctl-hours {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctl-hours input {
    width: 110px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.ctl-device {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ctl-device i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text-2);
}

.ctl-device strong {
    display: block;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.ctl-device small {
    color: var(--muted);
    font-size: 0.72rem;
}

.ctl-table tr.is-blocked td {
    background: var(--c-red-bg) !important;
}

.ctl-table tr.is-blocked .idt-entity strong {
    color: var(--c-red);
}

.ctl-actions .dropdown-menu {
    min-width: 210px;
    padding: 6px 0;
}

.ctl-actions .dropdown-item i {
    width: 18px;
    text-align: center;
}

.ctl-actions .dropdown-item.text-danger:hover {
    background: var(--c-red-bg);
}

.ctl-pager {
    display: flex;
    gap: 4px;
}

.ctl-pager button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.ctl-pager button.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.ctl-pager button:disabled {
    opacity: 0.45;
}

.ctl-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-2);
}

.ctl-filters .form-select,
.ctl-filters .form-control {
    height: 38px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
}

.ctl-filters .form-select {
    width: auto;
    min-width: 160px;
}

.ctl-bulk {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-2);
    background: var(--primary-bg);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
}

.ctl-bulk.show {
    display: flex;
}

.ctl-bulk .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    font-size: 0.78rem;
}

.idt-table .form-check-input {
    border-color: var(--border);
    background-color: var(--surface);
    cursor: pointer;
}

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

.ctl-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ctl-scope label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ctl-scope label:has(input:checked) {
    border-color: var(--c-red);
    background: var(--c-red-bg);
}

.ctl-scope input {
    margin-top: 3px;
    accent-color: var(--c-red);
}

.ctl-scope strong {
    display: block;
    color: var(--text);
    font-size: 0.84rem;
}

.ctl-scope small {
    color: var(--muted);
    font-size: 0.74rem;
}

.ctl-target {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.ctl-target strong {
    display: block;
    color: var(--text);
    font-size: 0.88rem;
}

.ctl-target small {
    color: var(--muted);
    font-size: 0.76rem;
}

.ctl-device-list .idt-list-item {
    padding-left: 0;
    padding-right: 0;
}

.btn-danger {
    --bs-btn-bg: var(--c-red);
    --bs-btn-border-color: var(--c-red);
}

/* ═══════════════════════════════════════════════════════════════════
   19. CONTROL ROWS RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1399.98px) {
    .wm-shell {
        grid-template-columns: 210px 330px minmax(0, 1fr);
    }
}

@media (max-width: 1199.98px) {
    .ctl-apps {
        grid-template-columns: minmax(0, 1fr);
    }

    .acl-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .acl-roles {
        position: static;
    }

    .acl-role-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 12px;
    }

    .acl-role {
        flex: 0 0 220px;
        margin: 0;
        border-color: var(--border);
    }

    .wm-shell {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .wm-read {
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        z-index: 1035;
        background: var(--surface);
        transform: translateX(100%);
        transition: transform 0.25s var(--ease);
    }

    body.wm-reading .wm-read {
        transform: translateX(0);
    }

    .wm-back {
        display: inline-flex !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .wm-read {
        left: var(--sidebar-w);
    }

    body.idt-collapsed .wm-read {
        left: var(--sidebar-w-mini);
    }
}

@media (max-width: 991.98px) {
    .wm-shell {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

    .wm-folders {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 10px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border-2);
    }

    .wm-compose-btn {
        flex: 0 0 auto;
        margin: 0;
        padding: 0 14px;
    }

    .wm-folder {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        border: 1px solid var(--border);
        background: var(--surface);
    }

    .wm-folder-label,
    .wm-storage {
        display: none;
    }

    .wm-list {
        border-right: 0;
    }

    .wm-items {
        max-height: 70vh;
    }
}

@media (max-width: 767.98px) {
    .ctl-features,
    .ctl-scope {
        grid-template-columns: minmax(0, 1fr);
    }

    .ctl-row {
        flex-wrap: wrap;
    }

    .ctl-app-nums div {
        padding: 12px;
    }

    .ctl-filters .form-select,
    .ctl-filters .bx-search-sm {
        width: 100%;
    }

    .acl-head-right,
    .acl-head-right .form-select {
        width: 100%;
    }

    .acl-savebar {
        left: 16px;
        right: 16px;
        justify-content: space-between;
        transform: translate(0, 140%);
    }

    .acl-savebar.show {
        transform: translate(0, 0);
    }

    .wm-bar-left,
    .wm-bar-right {
        width: 100%;
    }

    .wm-bar-right .btn {
        flex: 1;
        justify-content: center;
    }

    .wm-read-scroll {
        padding: 18px 16px;
    }

    .wm-from {
        flex-wrap: wrap;
    }

    .wm-file {
        min-width: 0;
        width: 100%;
    }
}

.wm-folder .wm-dot {
    flex: 0 0 9px;
}

.ctl-hours input {
    width: 128px;
}

@media (max-width: 575.98px) {
    .idt-session-btn .bi-chevron-down {
        display: none;
    }

    .ctl-hours {
        width: 100%;
    }

    .ctl-hours input {
        flex: 1;
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   20. ACTION BUTTON STATE
   Loading, done and fail states for save, reset, delete, view, add
   ═══════════════════════════════════════════════════════════════════ */
.btn.is-busy,
.btn.is-done,
.btn.is-fail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 1;
}

.btn.is-busy {
    cursor: progress;
}

.btn.is-busy .spinner-border-sm {
    width: 0.95rem;
    height: 0.95rem;
    border-width: 0.16em;
}

.btn.is-done,
.btn.is-done:disabled {
    border-color: var(--c-green);
    background: var(--c-green);
    color: #ffffff;
}

.btn-soft.is-done,
.btn-soft.is-done:disabled {
    border-color: var(--c-green);
    background: var(--c-green-bg);
    color: var(--c-green);
}

.btn.is-fail,
.btn.is-fail:disabled {
    border-color: var(--c-red);
    background: var(--c-red-bg);
    color: var(--c-red);
}

/* ═══════════════════════════════════════════════════════════════════
   21. COURSE FORM
   Course type cards, fast track semesters, image uploader,
   summernote theme, sticky side column, action bar
   ═══════════════════════════════════════════════════════════════════ */
.crs-card {
    height: auto;
}

.crs-form .form-text.crs-hint {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.74rem;
}

.crs-input-group .input-group-text {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.crs-input-group .btn {
    height: 42px;
    border-color: var(--border);
}

.crs-input-group > .form-control,
.crs-input-group > .input-group-text,
.crs-input-group > .btn {
    border-radius: 0 !important;
}

.crs-input-group > :first-child {
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

.crs-input-group > :last-child:not(.invalid-feedback),
.crs-input-group > :has(+ .invalid-feedback) {
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

.crs-form .form-select.is-invalid,
.crs-form .form-control.is-invalid {
    border-color: var(--c-red);
    background-image: none;
}

.crs-form .is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.crs-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.crs-type {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.crs-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.crs-type-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.crs-type:hover .crs-type-box {
    border-color: var(--primary-bd);
}

.crs-type input:checked + .crs-type-box {
    border-color: var(--primary);
    background: var(--primary-bg);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
}

.crs-type input:focus-visible + .crs-type-box {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.crs-type-ic {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.1rem;
}

.crs-type-text {
    flex: 1;
    min-width: 0;
}

.crs-type-text strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.crs-type-text small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.crs-type-check {
    color: var(--primary);
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.18s var(--ease);
}

.crs-type input:checked + .crs-type-box .crs-type-check {
    opacity: 1;
    transform: scale(1);
}

.crs-fast {
    display: none;
    margin-top: 18px;
    padding: 18px;
    border: 1px dashed var(--primary-bd);
    border-radius: var(--radius);
    background: var(--surface-2);
    transition: border-color 0.2s ease;
}

.crs-fast.has-error {
    border-color: rgba(217, 119, 6, 0.55);
}

.crs-fast-head h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.crs-fast-head h6 i {
    color: var(--primary);
}

.crs-fast-head p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.78rem;
}

.crs-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.crs-split-field {
    width: 130px;
}

.crs-split-x {
    padding-bottom: 10px;
    color: var(--muted);
    font-weight: 700;
}

.crs-split-btn {
    height: 42px;
    padding: 0 16px;
}

.crs-sem-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 14px 0 10px;
}

.crs-sem-list:empty {
    margin: 10px 0;
}

.crs-sem {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 190px 42px;
    grid-template-areas: "no title months remove";
    align-items: end;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    animation: crsIn 0.22s var(--ease);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.crs-sem.is-removing {
    opacity: 0;
    transform: translateX(14px);
}

.crs-sem .form-label {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.crs-sem-no {
    display: inline-flex;
    grid-area: no;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.crs-sem-title {
    grid-area: title;
    min-width: 0;
}

.crs-sem-months {
    grid-area: months;
}

.crs-sem-remove {
    display: inline-flex;
    grid-area: remove;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    transition: all 0.15s ease;
}

.crs-sem-remove:hover {
    border-color: var(--c-red);
    background: var(--c-red-bg);
    color: var(--c-red);
}

.crs-sem-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    border: 1.5px dashed var(--primary-bd);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.crs-sem-add:hover {
    background: var(--primary-bg);
}

.crs-timeline {
    margin-top: 16px;
}

.crs-timeline-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.crs-timeline-bar {
    display: flex;
    height: 30px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-3);
}

.crs-seg {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-right: 2px solid var(--surface-2);
    background: var(--primary);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    transition: width 0.3s var(--ease);
}

.crs-seg:nth-child(even) {
    background: rgba(var(--primary-rgb), 0.72);
}

.crs-seg.is-saved {
    border-right: 0;
    background: repeating-linear-gradient(
        135deg,
        var(--c-green-bg) 0 8px,
        transparent 8px 16px
    );
}

.crs-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.crs-sum {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.crs-sum small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.crs-sum strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.crs-sum.is-save {
    border-color: rgba(22, 163, 74, 0.35);
    background: var(--c-green-bg);
}

.crs-sum.is-save strong {
    color: var(--c-green);
}

.crs-sum.is-save.is-off {
    border-color: var(--border);
    background: var(--surface);
}

.crs-sum.is-save.is-off strong {
    color: var(--muted);
}

.crs-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--c-amber-bg);
    color: var(--c-amber);
    font-size: 0.8rem;
    font-weight: 600;
}

.crs-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.crs-side > .idt-card {
    min-width: 0;
}

@media (min-width: 1200px) {
    .crs-side {
        position: sticky;
        top: var(--side-top, calc(var(--topbar-h) + 20px));
    }
}

.crs-form .ctl-row-text {
    flex: 1 1 auto;
}

.crs-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 170px;
    aspect-ratio: var(--ratio, 4 / 3);
    padding: 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    outline: none;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.crs-drop:hover,
.crs-drop:focus-visible,
.crs-upload.is-drag .crs-drop {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.crs-upload.is-drag .crs-drop {
    transform: scale(1.015);
}

.crs-upload.is-invalid .crs-drop {
    border-color: var(--c-red);
    background: var(--c-red-bg);
}

.crs-drop-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 1.4rem;
    transition: transform 0.2s var(--ease);
}

.crs-upload.is-drag .crs-drop-ic {
    transform: translateY(-4px);
}

.crs-drop strong {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
}

.crs-drop small {
    color: var(--muted);
    font-size: 0.78rem;
}

.crs-drop small u {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.crs-drop em {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.7rem;
    font-style: normal;
}

.crs-preview {
    display: none;
}

.crs-upload.has-file .crs-drop {
    display: none;
}

.crs-upload.has-file .crs-preview {
    display: block;
    animation: crsIn 0.22s var(--ease);
}

.crs-preview-img {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio, 4 / 3);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
}

.crs-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.crs-upload.is-uploading .crs-preview-img img {
    opacity: 0.6;
}

.crs-preview-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

.crs-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: rgba(17, 24, 39, 0.68);
    color: #ffffff;
    font-size: 0.9rem;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease;
}

.crs-tool:hover {
    background: var(--primary);
}

.crs-tool.is-danger:hover {
    background: var(--c-red);
}

.crs-tool.is-busy .spinner-border-sm {
    width: 0.8rem;
    height: 0.8rem;
}

.crs-file {
    margin-top: 10px;
}

.crs-file-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.crs-file-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crs-file-meta {
    flex: none;
    color: var(--muted);
    font-size: 0.74rem;
}

.crs-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-3);
}

.crs-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 6px;
    background: var(--primary);
    transition: width 0.12s linear;
}

.crs-upload.is-done .crs-progress span {
    background: var(--c-green);
}

.crs-file-status {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.74rem;
}

.crs-upload.is-done .crs-file-status {
    color: var(--c-green);
    font-weight: 600;
}

.crs-upload-error {
    margin-top: 6px;
    color: var(--c-red);
    font-size: 0.76rem;
    font-weight: 600;
}

.crs-upload-error:empty {
    display: none;
}

.crs-status {
    flex: none;
    flex-wrap: nowrap;
    gap: 6px;
}

.crs-status span {
    padding: 5px 12px;
    font-size: 0.76rem;
}

.crs-form .ctl-row .crs-order {
    width: 90px;
    height: 36px;
    text-align: center;
}

.crs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 16px 12px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.crs-actions-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.8rem;
}

.crs-actions-btns {
    display: flex;
    gap: 10px;
}

.crs-actions-btns .btn {
    height: 42px;
    padding: 0 20px;
}

@keyframes crsIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crs-form .note-editor.note-frame {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.crs-form .note-editor.note-frame:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.crs-form .note-toolbar {
    padding: 8px 8px 4px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.crs-form .note-toolbar .note-btn {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-2);
}

.crs-form .note-toolbar .note-btn:hover,
.crs-form .note-toolbar .note-btn.active {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
}

.crs-form .note-editing-area .note-editable {
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.65;
}

.crs-form .note-placeholder {
    color: var(--muted);
}

.crs-form .note-statusbar {
    border-top: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
}

.note-dropdown-menu,
.note-modal-content {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.note-dropdown-item:hover {
    background: var(--surface-2);
}

.note-editor.note-frame.fullscreen {
    z-index: 1080;
    background: var(--surface);
}

@media (max-width: 767.98px) {
    .crs-types,
    .crs-summary {
        grid-template-columns: 1fr;
    }

    .crs-sem {
        grid-template-columns: 34px minmax(0, 1fr) 42px;
        grid-template-areas:
            "no title remove"
            "no months months";
    }

    .crs-sem-no {
        align-self: start;
        margin-top: 22px;
    }
}

@media (max-width: 575.98px) {
    .crs-fast {
        padding: 14px;
    }

    .crs-split-field {
        width: calc(50% - 20px);
    }

    .crs-split-btn {
        width: 100%;
    }

    .crs-actions {
        padding: 10px;
    }

    .crs-actions-text {
        display: none;
    }

    .crs-actions-btns {
        width: 100%;
    }

    .crs-actions-btns .btn {
        flex: 1;
        padding: 0 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   22. CUSTOM SELECT
   Theme styled dropdown, active option in accent colour with check
   ═══════════════════════════════════════════════════════════════════ */
.idt-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.idt-select {
    position: relative;
}

.idt-select-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.idt-select-btn:hover {
    border-color: var(--primary-bd);
}

.idt-select-btn:focus-visible,
.idt-select.is-open .idt-select-btn {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.idt-select-ic {
    flex: none;
    color: var(--primary);
    font-size: 1rem;
}

.idt-select-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idt-select-text.is-placeholder {
    color: var(--muted);
}

.idt-select-chev {
    flex: none;
    color: var(--muted);
    font-size: 0.8rem;
    transition: transform 0.2s var(--ease);
}

.idt-select.is-open .idt-select-chev {
    color: var(--primary);
    transform: rotate(180deg);
}

.idt-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 1050;
    max-height: 280px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    display: none;
}

.idt-select.is-up .idt-select-menu {
    top: auto;
    bottom: calc(100% + 8px);
}

.idt-select.is-open .idt-select-menu {
    display: block;
    animation: idtSelectIn 0.16s ease;
}

.idt-select.is-open.is-up .idt-select-menu {
    animation-name: idtSelectUp;
}

@keyframes idtSelectIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes idtSelectUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.idt-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.idt-select-option + .idt-select-option {
    margin-top: 2px;
}

.idt-select-option.is-hover {
    background: var(--surface-2);
}

.idt-select-option.is-selected {
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 600;
}

.idt-select-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.idt-select-check {
    font-size: 0.95rem;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
}

.idt-select-option.is-selected .idt-select-check {
    opacity: 1;
    transform: scale(1);
}

select.is-invalid + .idt-select .idt-select-btn {
    border-color: var(--c-red);
}

select.is-invalid + .idt-select .idt-select-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* ═══════════════════════════════════════════════════════════════════
   23. PASSWORD STRENGTH
   Password strength, API token, logo box, documents uploader
   ═══════════════════════════════════════════════════════════════════ */
.brn-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.brn-form .form-control.brn-token,
.brn-form .form-control[readonly] {
    background: var(--surface-2);
    color: var(--text-2);
}

.brn-form .form-control.brn-token {
    font-size: 0.8rem;
}

.brn-wa i {
    color: #25d366;
}

.brn-same {
    margin-top: 8px;
    min-height: 0;
}

.brn-same .form-check-label {
    font-size: 0.78rem;
    cursor: pointer;
}

.brn-strength {
    margin-top: 8px;
}

.brn-strength-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.brn-strength-bar span {
    height: 4px;
    border-radius: 4px;
    background: var(--surface-3);
    transition: background 0.2s ease;
}

.brn-strength small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.brn-strength.is-weak span:nth-child(-n + 1) {
    background: var(--c-red);
}

.brn-strength.is-fair span:nth-child(-n + 2) {
    background: var(--c-amber);
}

.brn-strength.is-good span:nth-child(-n + 3) {
    background: var(--c-sky);
}

.brn-strength.is-strong span {
    background: var(--c-green);
}

.brn-strength.is-weak small {
    color: var(--c-red);
}

.brn-strength.is-fair small {
    color: var(--c-amber);
}

.brn-strength.is-good small {
    color: var(--c-sky);
}

.brn-strength.is-strong small {
    color: var(--c-green);
}

.brn-logo {
    max-width: 260px;
    margin: 0 auto;
}

.brn-logo .crs-preview-img {
    background: repeating-conic-gradient(
            var(--surface-3) 0% 25%,
            var(--surface) 0% 50%
        )
        50% / 18px 18px;
}

.brn-logo .crs-preview-img img {
    padding: 12px;
    object-fit: contain;
}

.crs-drop.brn-doc-drop {
    aspect-ratio: auto;
    min-height: 150px;
}

.brn-docs.is-drag .brn-doc-drop {
    border-color: var(--primary);
    background: var(--primary-bg);
    transform: scale(1.015);
}

.brn-docs.is-invalid .brn-doc-drop {
    border-color: var(--c-red);
    background: var(--c-red-bg);
}

.brn-doc-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.brn-doc-list:empty {
    display: none;
}

.brn-doc {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    animation: crsIn 0.22s var(--ease);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.brn-doc.is-removing {
    opacity: 0;
    transform: translateX(14px);
}

.brn-doc > .idt-ic {
    flex: none;
}

.brn-doc-body {
    flex: 1;
    min-width: 0;
}

.brn-doc .crs-file-top {
    margin-bottom: 5px;
}

.brn-doc.is-done .crs-progress span {
    background: var(--c-green);
}

.brn-doc.is-done .crs-file-status {
    color: var(--c-green);
    font-weight: 600;
}

.brn-doc-remove {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    transition: all 0.15s ease;
}

.brn-doc-remove:hover {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.brn-doc-remove.is-busy .spinner-border-sm {
    width: 0.8rem;
    height: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════
   24. AUTH / LOGIN / RESET
   Split layout fits one screen, brand panel in theme colour,
   login card, reset steps, OTP boxes, logout state
   ═══════════════════════════════════════════════════════════════════ */
.auth-body {
    min-height: 100vh;
    background: var(--body-bg);
}

.auth-page {
    display: grid;
    grid-template-columns: minmax(380px, 46%) 1fr;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(16px, 4vh, 40px);
    min-height: 100vh;
    padding: clamp(22px, 4.5vh, 40px) clamp(28px, 3.4vw, 48px);
    overflow: hidden;
    background: linear-gradient(
        150deg,
        var(--primary) 0%,
        var(--primary-d) 100%
    );
    color: #ffffff;
    isolation: isolate;
}

.auth-brand::before,
.auth-brand::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.auth-brand::before {
    top: -140px;
    right: -120px;
    width: 420px;
    height: 420px;
}

.auth-brand::after {
    bottom: -180px;
    left: -140px;
    width: 460px;
    height: 460px;
    background: rgba(255, 255, 255, 0.06);
}

.auth-brand-body {
    position: relative;
    max-width: 460px;
}

.auth-brand-body::before {
    content: "";
    position: absolute;
    inset: -60px -40px auto auto;
    z-index: -1;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.28) 1.5px,
        transparent 1.5px
    );
    background-size: 16px 16px;
    opacity: 0.6;
}

.auth-brand-top,
.auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.auth-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.auth-logo-text strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.auth-logo-text small {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.74rem;
}

.auth-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-brand-body h2 {
    margin: clamp(10px, 2vh, 18px) 0 clamp(8px, 1.6vh, 12px);
    font-size: clamp(1.5rem, min(2.4vw, 4.6vh), 2.3rem);
    font-weight: 800;
    line-height: 1.2;
}

.auth-brand-body > p {
    margin: 0 0 clamp(14px, 3.4vh, 28px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
}

.auth-points {
    display: grid;
    gap: clamp(8px, 1.6vh, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-points li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(9px, 1.7vh, 14px) 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.auth-points li > span {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.1rem;
}

.auth-points strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
}

.auth-points small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}

.auth-brand-foot {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}

.auth-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px, 3vh, 28px) 32px;
}

.auth-top {
    position: absolute;
    top: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.auth-mobile-logo {
    display: none;
}

.auth-mobile-logo .auth-logo {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}

.auth-mobile-logo .auth-logo img {
    width: 28px;
    height: 28px;
}

.auth-mobile-logo strong {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: clamp(20px, 4vh, 34px) 32px clamp(16px, 3vh, 26px);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    animation: crsIn 0.35s var(--ease);
}

.auth-head {
    margin-bottom: clamp(14px, 2.6vh, 22px);
    text-align: center;
}

.auth-head-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 7vh, 54px);
    height: clamp(44px, 7vh, 54px);
    margin-bottom: clamp(8px, 1.6vh, 12px);
    border-radius: 15px;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 1.5rem;
}

.auth-head h1 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: clamp(1.25rem, 3.4vh, 1.5rem);
    font-weight: 800;
}

.auth-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--c-red-bg);
    color: var(--c-red);
    font-size: 0.82rem;
    font-weight: 600;
}

.auth-field {
    margin-bottom: clamp(10px, 2vh, 16px);
}

.auth-field .form-label {
    margin-bottom: 6px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.auth-link {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-link:hover {
    color: var(--primary-d);
    text-decoration: underline;
}

.auth-input {
    position: relative;
}

.auth-input .form-control {
    height: clamp(42px, 6.6vh, 46px);
    padding-left: 44px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.auth-input .form-control[type="password"],
.auth-input .form-control[data-login-password] {
    padding-right: 46px;
}

.auth-input-ic {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: var(--muted);
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    transition: color 0.15s ease;
}

.auth-input:focus-within .auth-input-ic {
    color: var(--primary);
}

.auth-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
    transition: all 0.15s ease;
}

.auth-eye:hover {
    background: var(--surface-2);
    color: var(--primary);
}

.auth-field.is-invalid .form-control {
    border-color: var(--c-red);
}

.auth-field.is-invalid .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.auth-field.is-invalid .auth-input-ic {
    color: var(--c-red);
}

.auth-error {
    margin-top: 6px;
    color: var(--c-red);
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-error:empty {
    display: none;
}

.auth-caps {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--c-amber);
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-caps.show {
    display: flex;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 clamp(12px, 2.4vh, 18px);
}

.auth-row .form-check-input {
    border-color: var(--border);
    background-color: var(--surface-3);
    cursor: pointer;
}

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

.auth-row .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.auth-row .form-check-label {
    color: var(--text-2);
    font-size: 0.84rem;
    cursor: pointer;
}

.btn.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: clamp(42px, 6.6vh, 46px);
    font-size: 0.92rem;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

.auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(12px, 2.6vh, 20px);
    padding-top: clamp(10px, 2.2vh, 16px);
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.76rem;
    text-align: center;
}

.auth-secure i {
    color: var(--c-green);
}

.auth-foot {
    margin-top: clamp(12px, 2.4vh, 20px);
    color: var(--muted);
    font-size: 0.78rem;
}

.auth-foot i {
    color: var(--c-red);
}

.auth-foot a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .auth-brand {
        padding: 36px;
    }
}

@media (max-width: 991.98px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        display: none;
    }

    .auth-top {
        position: static;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 8px;
    }

    .auth-mobile-logo {
        display: flex;
    }

    .auth-main {
        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(var(--primary-rgb), 0.12),
                transparent 45%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(var(--primary-rgb), 0.08),
                transparent 40%
            );
    }
}

@media (max-width: 575.98px) {
    .auth-main {
        padding: 16px;
    }

    .auth-main {
        justify-content: flex-start;
    }

    .auth-card {
        margin: 20px 0 auto;
        padding: 28px 20px 22px;
        box-shadow: var(--shadow-xs);
    }

    .auth-head h1 {
        font-size: 1.3rem;
    }
}

.auth-steps {
    display: flex;
    justify-content: space-between;
    margin: 0 0 clamp(14px, 3vh, 22px);
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.auth-steps li {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.auth-steps li + li::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 50%;
    left: -50%;
    height: 2px;
    margin: 0 18px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.3s ease;
}

.auth-steps li.done + li::before,
.auth-steps li.active:not(:first-child)::before {
    background: var(--primary);
}

.auth-steps li > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    transition: all 0.25s ease;
}

.auth-steps li.active {
    color: var(--primary);
}

.auth-steps li.active > span {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.auth-steps li.done {
    color: var(--text-2);
}

.auth-steps li.done > span {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0;
}

.auth-steps li.done > span::after {
    content: "\F633";
    font-family: "bootstrap-icons";
    font-size: 0.9rem;
    line-height: 1;
}

.auth-pane {
    display: none;
}

.auth-pane.active {
    display: block;
    animation: crsIn 0.3s var(--ease);
}

.auth-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.auth-channel {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.auth-channel input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-channel span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    transition: all 0.15s ease;
}

.auth-channel span i {
    font-size: 1.15rem;
}

.auth-channel span b {
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-channel:hover span {
    border-color: var(--primary-bd);
}

.auth-channel input:checked + span {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.auth-channel input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.is-wa {
    color: #25d366;
}

.auth-sent {
    display: grid;
    gap: 8px;
    margin: -6px 0 18px;
    padding: 0;
    list-style: none;
}

.auth-sent li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 0.82rem;
}

.auth-sent li i {
    font-size: 1rem;
}

.auth-sent li i.bi-envelope {
    color: var(--primary);
}

.auth-sent li span {
    color: var(--muted);
}

.auth-sent li b {
    margin-left: auto;
    color: var(--text);
    font-weight: 600;
}

.auth-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.auth-otp input {
    width: 100%;
    height: 52px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    outline: none;
    transition: all 0.15s ease;
}

.auth-otp input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.auth-otp input.filled {
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
}

.auth-otp.is-invalid input {
    border-color: var(--c-red);
    animation: authShake 0.3s ease;
}

@keyframes authShake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

.auth-resend {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 10px 0 14px;
    color: var(--muted);
    font-size: 0.8rem;
}

.auth-resend b {
    color: var(--text);
}

.auth-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-link-btn:hover {
    background: var(--primary-bg);
}

.auth-link-btn.is-busy .spinner-border-sm,
.auth-back.is-busy .spinner-border-sm {
    width: 0.8rem;
    height: 0.8rem;
}

.auth-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.auth-back:hover {
    color: var(--primary);
}

.auth-back-login {
    margin-top: clamp(10px, 2vh, 16px);
    padding-top: clamp(10px, 2vh, 14px);
    border-top: 1px dashed var(--border);
}

.auth-done {
    padding: 8px 0 4px;
    text-align: center;
}

.auth-done-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--c-green-bg);
    color: var(--c-green);
    font-size: 2.2rem;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.08);
    animation: authPop 0.45s var(--ease);
}

@keyframes authPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    70% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.auth-done h1 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 800;
}

.auth-done p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 0.86rem;
}

.auth-countdown {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.78rem;
}

.auth-countdown b {
    color: var(--primary);
}

.idt-profile-menu [data-logout].is-busy,
.idt-profile-menu [data-logout].is-done {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.idt-profile-menu [data-logout].is-done {
    color: var(--c-green) !important;
}

.idt-profile-menu [data-logout] .spinner-border-sm {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.15em;
}

.dropdown-menu.is-logging-out > li:not(:has([data-logout])) {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .auth-otp {
        gap: 6px;
    }

    .auth-otp input {
        height: 46px;
        font-size: 1.15rem;
    }

    .auth-channel span {
        padding: 9px 4px;
    }
}

.auth-alert.is-warning {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.auth-alert.is-success {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.auth-alert.is-info {
    background: var(--primary-bg);
    color: var(--primary);
}

.auth-alert i {
    flex: none;
    margin-top: 1px;
}

.auth-alert span {
    line-height: 1.45;
}

.auth-alert.is-pulse {
    animation: authAlertIn 0.3s var(--ease);
}

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

.auth-form.is-locked {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
}

.auth-card.is-shake {
    animation: authShake 0.35s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   25. SYSTEM SETTINGS
   Tabs, uploads grid, SEO preview, social links,
   business hours, cookie preview, maintenance and API cards
   ═══════════════════════════════════════════════════════════════════ */
.set-layout {
    display: block;
}

.set-form,
.set-api-wrap {
    min-width: 0;
}

.set-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.set-optional {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 500;
}

.set-counter {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: right;
}

.set-counter.is-over {
    color: var(--c-amber);
    font-weight: 700;
}

.set-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--primary-bd);
    border-radius: var(--radius-sm);
    background: var(--primary-bg);
    color: var(--text-2);
    font-size: 0.8rem;
}

.set-note i {
    color: var(--primary);
}

.set-note a {
    color: var(--primary);
    font-weight: 600;
}

.set-note-lg {
    padding: 12px 16px;
    font-size: 0.84rem;
}

.set-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--c-red-bg);
    color: var(--c-red);
    font-size: 0.8rem;
    font-weight: 600;
}

.set-reveal {
    display: none;
}

.set-reveal.show {
    display: block;
    animation: crsIn 0.25s var(--ease);
}

.set-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
    gap: 20px;
}

.set-upload-field {
    min-width: 0;
}

.set-upload-label {
    margin-bottom: 8px;
}

.set-upload-label strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set-upload-label small {
    display: block;
    min-height: 1.4em;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set-upload {
    width: 100%;
}

.set-upload .crs-drop,
.set-upload .crs-preview-img {
    width: 100%;
    height: 170px;
    min-height: 0;
    aspect-ratio: auto;
}

.set-upload .crs-drop {
    padding: 12px;
}

.set-upload .crs-drop-ic {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    font-size: 1.15rem;
}

.set-upload .crs-drop strong {
    font-size: 0.8rem;
}

.set-upload .crs-drop em {
    margin-top: 2px;
}

.set-upload .crs-preview-img {
    background: repeating-conic-gradient(
            var(--surface-3) 0% 25%,
            var(--surface) 0% 50%
        )
        50% / 16px 16px;
}

.set-upload .crs-preview-img img {
    padding: 12px;
    object-fit: contain;
}

.set-upload.is-dark .crs-drop,
.set-upload.is-dark .crs-preview-img {
    border-color: #2a3448;
    background: #111827;
}

.set-upload.is-dark .crs-drop strong {
    color: #e6e9f0;
}

.set-upload.is-dark .crs-drop:hover {
    border-color: var(--primary);
}

.set-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-2);
    scrollbar-width: none;
}

.set-tabs::-webkit-scrollbar {
    display: none;
}

.set-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

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

.set-tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

.set-pane {
    display: none;
    padding: 20px;
}

.set-pane.active {
    display: block;
    animation: crsIn 0.25s var(--ease);
}

.set-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.set-sub i {
    color: var(--primary);
}

.set-sub small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 500;
}

.set-serp {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.set-serp-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.set-serp-url {
    overflow: hidden;
    color: #188038;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set-serp-title {
    margin: 2px 0 4px;
    color: #1a0dab;
    font-size: 1.1rem;
    line-height: 1.3;
}

.set-serp-desc {
    color: #4d5156;
    font-size: 0.84rem;
    line-height: 1.5;
}

body.dark-mode .set-serp-title {
    color: #8ab4f8;
}

body.dark-mode .set-serp-url {
    color: #7fcf8f;
}

body.dark-mode .set-serp-desc {
    color: var(--text-2);
}

.set-social-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.set-social {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color 0.15s ease;
}

.set-social.is-linked {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}

.set-social-ic {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 24px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-size: 1.15rem;
}

body.dark-mode .set-social-ic {
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    color: color-mix(in srgb, var(--brand) 70%, #ffffff);
}

.set-social-body {
    flex: 1;
    min-width: 0;
}

.set-social-prefix {
    max-width: 52%;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem !important;
    text-overflow: ellipsis;
}

.set-social-open.disabled {
    opacity: 0.45;
}

.set-hours {
    display: grid;
    gap: 10px;
}

.set-day {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}

.set-day.is-closed {
    background: var(--surface-2);
}

.set-day.is-closed .set-day-times {
    opacity: 0.4;
}

.set-day.has-error {
    border-color: rgba(220, 38, 38, 0.45);
}

.set-day-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.set-day-name label {
    cursor: pointer;
}

.set-day-name strong {
    display: block;
    color: var(--text);
    font-size: 0.88rem;
}

.set-day-name small {
    color: var(--c-green);
    font-size: 0.74rem;
    font-weight: 600;
}

.set-day.is-closed .set-day-name small {
    color: var(--muted);
}

.set-day-times {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transition: opacity 0.2s ease;
}

.set-time {
    flex: 1;
    max-width: 220px;
}

.set-time .form-label {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.set-time-to {
    padding-bottom: 11px;
    color: var(--muted);
    font-size: 0.8rem;
}

.set-day-error {
    grid-column: 2;
    color: var(--c-red);
    font-size: 0.76rem;
    font-weight: 600;
}

.set-day-error:empty {
    display: none;
}

[data-schedule].is-muted .set-hours {
    opacity: 0.45;
    pointer-events: none;
}

[data-schedule].is-muted .idt-card-head .btn {
    pointer-events: none;
    opacity: 0.5;
}

.set-cookie-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.set-cookie-site {
    position: absolute;
    inset: 14px 14px auto;
    display: grid;
    gap: 8px;
}

.set-cookie-site span {
    height: 12px;
    border-radius: 6px;
    background: var(--surface-3);
}

.set-cookie-site span:first-child {
    width: 40%;
    height: 18px;
}

.set-cookie-site span:nth-child(3) {
    width: 80%;
}

.set-cookie-site span:last-child {
    width: 60%;
}

.set-cookie {
    position: relative;
    z-index: 1;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    animation: crsIn 0.25s var(--ease);
}

.set-cookie[data-position="bottom-left"],
.set-cookie[data-position="bottom-right"] {
    width: 78%;
}

.set-cookie[data-position="bottom-right"] {
    align-self: flex-end;
}

.set-cookie-text {
    display: flex;
    gap: 10px;
}

.set-cookie-text i {
    color: var(--c-amber);
    font-size: 1.2rem;
}

.set-cookie-text p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.78rem;
    line-height: 1.5;
}

.set-cookie-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.set-cookie-btn {
    padding: 6px 14px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
}

.set-cookie-btn.is-ghost {
    background: transparent;
    color: var(--primary);
}

.set-cookie-link {
    margin-right: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.76rem;
    text-decoration: underline;
}

.set-cookie-off {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.82rem;
}

.set-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 700;
}

.set-status.is-live {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.set-status.is-live i {
    animation: setBlink 1.6s ease-in-out infinite;
}

.set-status.is-down {
    background: var(--c-red-bg);
    color: var(--c-red);
}

@keyframes setBlink {
    50% {
        opacity: 0.35;
    }
}

.set-errors {
    display: grid;
    gap: 14px;
}

.set-code {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 700;
}

.set-api-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.5rem;
}

.set-api {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.set-api-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-2);
}

.set-api-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-size: 1.3rem;
}

body.dark-mode .set-api-logo {
    background: color-mix(in srgb, var(--brand) 25%, transparent);
    color: color-mix(in srgb, var(--brand) 60%, #ffffff);
}

.set-api-title h6 {
    margin: 0 0 3px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.set-api-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.set-api-status i {
    font-size: 0.45rem;
}

.set-api-status.is-on {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.set-api-body {
    flex: 1;
    padding: 4px 20px 20px;
}

.set-api-toggle {
    margin-bottom: 12px;
}

.set-api-body > .row {
    transition: opacity 0.2s ease;
}

.set-api.is-off .set-api-body > .row {
    opacity: 0.55;
}

.set-api-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-2);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

.set-api-foot .btn {
    height: 40px;
    padding: 0 16px;
}

.set-mode span {
    padding: 7px 14px;
}

@media (max-width: 1199.98px) {
    .set-api-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .set-social-list {
        grid-template-columns: 1fr;
    }

    .set-day {
        grid-template-columns: 1fr;
    }

    .set-day-error {
        grid-column: 1;
    }

    .set-time {
        max-width: none;
    }

    .set-pane {
        padding: 16px;
    }
}

@media (max-width: 575.98px) {
    .set-api-foot {
        flex-direction: column-reverse;
    }

    .set-api-foot .btn {
        width: 100%;
    }

    .set-upload-grid {
        grid-template-columns: 1fr;
    }

    .set-social-ic {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   26. IDT ONLINE PLUS
   Login hint, course form extras, dashboard bits
   ═══════════════════════════════════════════════════════════════════ */

.auth-alert.is-info {
    background: var(--c-blue-bg);
    color: var(--c-blue);
}

.lms-donut {
    flex-wrap: wrap;
    justify-content: center;
}

.lms-donut .idt-legend {
    flex: 1 1 200px;
}

.lms-donut .idt-legend span {
    flex: 1 0 auto;
}

.lms-donut .idt-legend strong {
    margin-left: auto;
    white-space: nowrap;
}

.auth-hint {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.76rem;
}

.auth-hint:has(+ .auth-error:not(:empty)) {
    display: none;
}

/* ------------------------------ course form ----------------------------- */

.crs-types.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crs-live {
    display: none;
}

.crs-row-flat {
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.crs-price-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--c-green-bg);
    color: var(--text-2);
    font-size: 0.82rem;
}

.crs-price-note i {
    color: var(--c-green);
}

.crs-free-note {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed rgba(22, 163, 74, 0.45);
    border-radius: var(--radius-sm);
    background: var(--c-green-bg);
}

.crs-free-note[style*="block"] {
    display: flex !important;
}

.crs-free-note strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
}

.crs-free-note small {
    color: var(--muted);
    font-size: 0.78rem;
}

.crs-outcome-add {
    display: flex;
    gap: 8px;
}

.crs-outcome-add .form-control {
    flex: 1;
    min-width: 0;
}

.crs-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.crs-outcomes:empty {
    display: none;
}

.crs-outcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    animation: crs-pop 0.25s ease;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.crs-outcome.is-removing {
    opacity: 0;
    transform: scale(0.96);
}

.crs-outcome > i {
    margin-top: 1px;
    color: var(--c-green);
}

.crs-outcome span {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.crs-outcome-remove {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 0.75rem;
}

.crs-outcome-remove:hover {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.crs-outcome-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.8rem;
}

.crs-outcome-empty i {
    color: var(--c-amber);
}

.crs-video-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--c-green-bg);
    color: var(--c-green);
    font-size: 0.76rem;
    font-weight: 600;
}

.crs-card-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.crs-card-preview-img {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background-color: var(--primary-bg);
    background-position: center;
    background-size: cover;
    color: var(--primary);
    font-size: 2rem;
}

.crs-card-preview-img.has-img > i {
    display: none;
}

.crs-card-preview-mode {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(17, 24, 39, 0.75);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

.crs-card-preview-body {
    padding: 14px 16px 16px;
}

.crs-card-preview-body > small {
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crs-card-preview-body > strong {
    display: block;
    margin: 4px 0 10px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.crs-card-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--muted);
    font-size: 0.74rem;
}

.crs-card-preview-meta em {
    font-style: normal;
}

.crs-card-preview-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.crs-card-preview-price b {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
}

.crs-card-preview-price b.is-free {
    color: var(--c-green);
}

.crs-card-preview-price s {
    color: var(--muted);
    font-size: 0.82rem;
}

.crs-card-preview-price span {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--c-green-bg);
    color: var(--c-green);
    font-size: 0.7rem;
    font-weight: 700;
}

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

/* ------------------------------ dashboard ----------------------------- */

.lms-chart .idt-bars,
.lms-chart .idt-bar-labels {
    min-width: 0;
    gap: 8px;
}

.lms-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
}

.lms-rating i {
    color: var(--c-amber);
}

.lms-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: lms-blink 1.4s ease-in-out infinite;
}

.lms-start {
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.74rem;
}

@keyframes lms-blink {
    50% {
        opacity: 0.3;
    }
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 991.98px) {
    .crs-types.is-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .crs-outcomes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   27. MODULES, LECTURES & FACULTY
   Video source, video information, tags, module preview,
   module list, resources, faculty card
   ═══════════════════════════════════════════════════════════════════ */

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--primary-d);
    --bs-btn-active-border-color: var(--primary-d);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

.idt-select.is-disabled .idt-select-btn,
.idt-select-btn:disabled {
    background: var(--surface-2);
    cursor: not-allowed;
    opacity: 0.7;
}

button.idt-row-action {
    padding: 0;
    border: 0;
    background: transparent;
}

.idt-row-action.is-danger:hover,
.idt-row-action.is-confirm {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.crs-card-preview-price b.is-muted {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.crs-outcomes.is-single {
    grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------ video source ----------------------------- */

.vid-source {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.vid-source label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.vid-source input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vid-source span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.vid-source input:checked + span {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

.vid-source input[value="vimeo"]:checked + span i {
    color: #1ab7ea;
}

.vid-source input[value="youtube"]:checked + span i {
    color: #ff0000;
}

.vid-source input:focus-visible + span {
    outline: 2px solid var(--primary);
}

/* ------------------------------ video information ----------------------------- */

.vid-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
}

.vid-status > span {
    flex: 1 1 260px;
    min-width: 0;
}

.vid-status.is-ok {
    border: 1px solid rgba(22, 163, 74, 0.25);
    background: var(--c-green-bg);
    color: #15803d;
}

.vid-status.is-off {
    border: 1px solid rgba(217, 119, 6, 0.3);
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.vid-test {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.vid-test:hover {
    text-decoration: underline;
}

.vid-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.vid-details {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    animation: crs-pop 0.25s ease;
}

.vid-thumb {
    display: grid;
    flex: 0 0 150px;
    place-items: center;
    width: 150px;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    background-color: var(--surface-3);
    background-position: center;
    background-size: cover;
    color: var(--muted);
    font-size: 1.6rem;
}

.vid-thumb.has-img i {
    display: none;
}

.vid-meta {
    flex: 1;
    min-width: 0;
}

.vid-meta strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.vid-meta > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 6px 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.vid-meta em {
    font-style: normal;
}

.vid-meta small {
    display: block;
    color: var(--text-2);
    font-size: 0.76rem;
    line-height: 1.45;
}

.vid-modal {
    overflow: hidden;
}

.vid-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.vid-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------ tags ----------------------------- */

.tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: text;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.tag-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}

.tag-list {
    display: contents;
}

.tag-box input {
    flex: 1 1 140px;
    min-width: 120px;
    padding: 4px 2px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.86rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border-radius: 20px;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    animation: crs-pop 0.2s ease;
}

.tag-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}

.tag-chip button:hover {
    background: var(--primary);
    color: #ffffff;
}

.tag-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.76rem;
}

.tag-suggest button {
    padding: 3px 10px;
    border: 1px dashed var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.76rem;
    font-weight: 600;
}

.tag-suggest button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tag-suggest button.is-used {
    border-style: solid;
    border-color: var(--primary-bd);
    background: var(--primary-bg);
    color: var(--primary);
    pointer-events: none;
}

/* ------------------------------ module preview ----------------------------- */

.mdl-preview {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.mdl-preview-no {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.mdl-preview-text {
    flex: 1;
    min-width: 0;
}

.mdl-preview-text small {
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mdl-preview-text strong {
    display: block;
    margin: 2px 0 8px;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mdl-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--muted);
    font-size: 0.74rem;
}

.mdl-preview-meta em {
    font-style: normal;
}

.mdl-preview-lock {
    color: var(--muted);
}

.mdl-preview-free {
    position: absolute;
    top: -9px;
    right: 12px;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--c-green);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
}

.mdl-siblings {
    margin-top: 14px;
}

.mdl-siblings:empty {
    display: none;
}

.mdl-siblings-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mdl-sibling {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.8rem;
}

.mdl-sibling:last-child {
    border-bottom: 0;
}

.mdl-sibling b {
    color: var(--muted);
    font-size: 0.74rem;
}

.mdl-sibling span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdl-sibling em {
    font-style: normal;
}

.mdl-days {
    flex: 0 0 120px;
}

/* ------------------------------ module list ----------------------------- */

.mdl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-2);
}

.mdl-search {
    flex: 1 1 260px;
    min-width: 0;
}

.mdl-filter {
    flex: 0 0 240px;
    min-width: 0;
}

.mdl-filter.is-sm {
    flex-basis: 170px;
}

.mdl-col-no {
    width: 84px;
}

.mdl-order {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mdl-order b {
    color: var(--text);
    font-size: 0.9rem;
}

.mdl-order span {
    display: flex;
    flex-direction: column;
}

.mdl-order button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 0.7rem;
}

.mdl-order button:hover:not(:disabled) {
    background: var(--primary-bg);
    color: var(--primary);
}

.mdl-order button:disabled {
    opacity: 0.3;
}

.mdl-table td {
    vertical-align: middle;
}

.mdl-actions {
    display: inline-flex;
    gap: 4px;
}

.mdl-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ------------------------------ resources ----------------------------- */

.res-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 18px 12px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.76rem;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.res-drop i {
    color: var(--primary);
    font-size: 1.4rem;
}

.res-drop strong {
    color: var(--text);
    font-size: 0.84rem;
}

.res-drop:hover,
.res-drop.is-over {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.res-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.res-list:empty {
    display: none;
}

.res-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    animation: crs-pop 0.2s ease;
}

.res-item + .res-item {
    margin-top: 6px;
}

.res-item > i {
    color: var(--primary);
    font-size: 1.2rem;
}

.res-item div {
    flex: 1;
    min-width: 0;
}

.res-item strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.res-item small {
    color: var(--muted);
    font-size: 0.7rem;
}

.res-item button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
}

.res-item button:hover {
    background: var(--c-red-bg);
    color: var(--c-red);
}

/* ------------------------------ faculty ----------------------------- */

.fac-courses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.fac-course {
    position: relative;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.fac-course.is-dim {
    opacity: 0.55;
}

.fac-course input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fac-course > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    height: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.fac-course i {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-3);
    color: var(--muted);
}

.fac-course b {
    overflow: hidden;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fac-course small {
    color: var(--muted);
    font-size: 0.7rem;
}

.fac-course input:checked + span {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.fac-course input:checked + span i {
    background: var(--primary);
    color: #ffffff;
}

.fac-course input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.fac-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 14px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(var(--primary-rgb), 0.12),
            transparent 60%
        ),
        var(--surface);
    text-align: center;
}

.fac-card-photo {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 10px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background-color: var(--primary);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}

.fac-card strong {
    color: var(--text);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.fac-card > small {
    color: var(--muted);
    font-size: 0.78rem;
}

.fac-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.fac-card-tags:empty {
    display: none;
}

.fac-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.fac-card-stats span {
    display: flex;
    flex-direction: column;
}

.fac-card-stats b {
    color: var(--text);
    font-size: 1.1rem;
}

.fac-card-stats small {
    color: var(--muted);
    font-size: 0.7rem;
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 767.98px) {
    .mdl-filter,
    .mdl-filter.is-sm {
        flex: 1 1 100%;
    }

    .vid-details {
        flex-direction: column;
    }

    .vid-thumb {
        width: 100%;
        flex-basis: auto;
    }

    .vid-btns .btn {
        flex: 1 1 auto;
    }

    .fac-courses {
        grid-template-columns: minmax(0, 1fr);
    }

    .idt-card-head > .vid-source {
        width: 100%;
    }

    .idt-card-head > .vid-source label {
        flex: 1;
    }

    .idt-card-head > .vid-source span {
        justify-content: center;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   28. STUDENTS, COURSE SETTINGS & SUBSCRIPTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ------------------------------ shared ----------------------------- */

.stu-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.idt-pill i {
    margin-right: 2px;
}

/* --------------------------- course settings --------------------------- */

.cst-guide {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-color: var(--primary-bd);
    background:
        linear-gradient(90deg, var(--primary-bg), transparent 70%),
        var(--surface);
}

.cst-guide strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: 0.9rem;
}

.cst-guide p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.82rem;
    line-height: 1.55;
}

.cst-sector span {
    gap: 6px;
}

.cst-card {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.cst-card.is-invalid {
    border-color: var(--c-red);
    box-shadow: 0 0 0 3px var(--c-red-bg);
}

.cst-card .idt-card-head {
    flex-wrap: wrap;
    gap: 10px;
}

.cst-card .idt-card-title {
    min-width: 0;
}

.cst-card .idt-card-title h6 {
    overflow-wrap: anywhere;
}

.cst-head-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cst-dirty {
    display: none;
    padding: 3px 8px;
    border: 1px dashed var(--c-amber);
    border-radius: 999px;
    color: var(--c-amber);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cst-dirty.is-on {
    display: inline-flex;
}

.cst-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.cst-mode label {
    margin: 0;
    cursor: pointer;
}

.cst-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cst-mode span {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    height: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.cst-mode span i {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font-size: 1rem;
}

.cst-mode span b {
    color: var(--text);
    font-size: 0.84rem;
}

.cst-mode span small {
    color: var(--muted);
    font-size: 0.72rem;
}

.cst-mode input:checked + span {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.cst-mode input:checked + span i {
    background: var(--primary);
    color: #ffffff;
}

.cst-mode input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cst-pane[data-cst-pane="none"] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--c-amber);
    border-radius: var(--radius-sm);
    background: var(--c-amber-bg);
    color: var(--c-amber);
    font-size: 0.8rem;
}

.cst-pane[data-cst-pane="none"] i {
    font-size: 1.2rem;
}

.cst-timeline {
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.cst-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-3);
}

.cst-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(var(--primary-rgb), 0.55),
        var(--primary)
    );
    transition: width 0.3s ease;
}

.cst-today {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
    transform: translate(-50%, -50%);
}

.cst-ends {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
}

.cst-ends small {
    color: var(--muted);
    font-size: 0.74rem;
}

.cst-ends b {
    color: var(--text);
    font-size: 0.8rem;
    text-align: center;
}

.cst-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-height: 38px;
    color: var(--text-2);
    font-size: 0.77rem;
    line-height: 1.45;
}

.cst-note:empty {
    display: none;
}

.cst-note i {
    color: var(--primary);
}

.cst-note.is-wide {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.cst-months {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cst-months .input-group {
    flex: 0 0 170px;
}

.cst-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cst-presets button {
    min-width: 42px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.76rem;
    font-weight: 700;
}

.cst-presets button:hover {
    border-color: var(--primary-bd);
    color: var(--primary);
}

.cst-presets button.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.cst-toggles {
    margin-top: 14px;
    border-top: 1px solid var(--border-2);
}

.cst-toggles .ctl-row:last-child {
    border-bottom: 0;
}

.cst-part {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cst-installments {
    gap: 4px;
    transition: opacity 0.15s ease;
}

.cst-installments span {
    min-width: 36px;
    padding: 4px 8px;
    font-size: 0.72rem;
}

.cst-installments.is-off {
    opacity: 0.35;
}

.cst-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--muted);
}

.cst-empty i {
    font-size: 1.8rem;
}

.cst-apply .form-check {
    margin: 0;
}

.cst-apply .form-check-label {
    color: var(--text-2);
    font-size: 0.82rem;
}

/* ------------------------------ add student ----------------------------- */

.stu-check {
    color: var(--border);
    transition: color 0.15s ease;
}

.stu-check.is-on {
    color: var(--c-green);
}

.stu-same {
    margin-top: 8px;
}

.stu-same .form-check-label {
    color: var(--text-2);
    font-size: 0.78rem;
}

.stu-schedule {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stu-schedule.is-blocked {
    border-color: var(--c-red);
}

.stu-schedule-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.82rem;
}

.stu-schedule-empty i {
    font-size: 1.2rem;
}

.stu-schedule-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-2);
    background: var(--surface-2);
}

.stu-schedule-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-2);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.stu-schedule-link:hover {
    color: var(--primary);
}

.stu-schedule-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.stu-schedule-grid > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stu-schedule-grid small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stu-schedule-grid b {
    color: var(--text);
    font-size: 0.95rem;
}

.stu-schedule-arrow {
    color: var(--muted);
}

.stu-schedule-total {
    padding-left: 12px;
    border-left: 1px dashed var(--border);
}

.stu-schedule-total b {
    color: var(--primary);
}

.stu-schedule-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 14px 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
}

.stu-schedule-note.is-info {
    background: var(--c-sky-bg);
    color: var(--c-sky);
}

.stu-schedule-note.is-warning {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.stu-schedule-note.is-danger {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.stu-custom {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border-2);
}

.stu-custom .form-check {
    margin-bottom: 0;
}

.stu-custom .form-check-label {
    color: var(--text-2);
    font-size: 0.82rem;
}

.stu-custom .row {
    margin-top: 2px;
}

.stu-net,
.stu-balance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.stu-net b,
.stu-balance b {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.2;
}

.stu-net small,
.stu-balance small {
    color: var(--muted);
    font-size: 0.72rem;
}

.stu-balance {
    background: var(--c-green-bg);
}

.stu-balance b {
    color: var(--c-green);
}

.stu-balance.is-due {
    background: var(--c-amber-bg);
}

.stu-balance.is-due b {
    color: var(--c-amber);
}

.stu-installments {
    margin-top: 16px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.stu-inst-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}

.stu-inst-head b {
    color: var(--text);
    font-size: 0.82rem;
}

.stu-inst-head small {
    color: var(--muted);
    font-size: 0.72rem;
}

.stu-inst {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-2);
}

.stu-inst > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 700;
}

.stu-inst > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.stu-inst b {
    color: var(--text);
    font-size: 0.85rem;
}

.stu-inst small {
    color: var(--muted);
    font-size: 0.72rem;
}

.stu-inst em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
}

.stu-inst.is-paid > span {
    background: var(--c-green);
    color: #ffffff;
}

.stu-inst.is-paid em {
    color: var(--c-green);
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.doc-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.doc-drop {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 18px 10px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.doc-drop:hover,
.doc-drop:focus-visible,
.doc-slot.is-drag .doc-drop {
    border-color: var(--primary);
    background: var(--primary-bg);
    outline: 0;
}

.doc-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border-radius: 11px;
    background: var(--surface);
    color: var(--primary);
    font-size: 1.15rem;
    box-shadow: var(--shadow-xs);
}

.doc-drop strong {
    color: var(--text);
    font-size: 0.83rem;
}

.doc-drop small {
    color: var(--muted);
    font-size: 0.72rem;
}

.doc-drop em {
    margin-top: 6px;
    color: var(--primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
}

.doc-file {
    display: none;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.doc-slot.has-file .doc-drop {
    display: none;
}

.doc-slot.has-file .doc-file {
    display: flex;
}

.doc-slot.is-done .doc-file {
    border-color: rgba(22, 163, 74, 0.35);
}

.doc-thumb {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    background-color: var(--c-red-bg);
    background-position: center;
    background-size: cover;
    color: var(--c-red);
    font-size: 1.3rem;
}

.doc-thumb.has-img {
    background-color: var(--surface-3);
}

.doc-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.doc-meta strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-meta small {
    color: var(--muted);
    font-size: 0.7rem;
}

.doc-meta .crs-progress {
    height: 4px;
}

.doc-slot.is-done .crs-progress {
    display: none;
}

.doc-tools {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-tools button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
}

.doc-tools button:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

.doc-tools button.is-danger:hover {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.doc-error {
    color: var(--c-red);
    font-size: 0.74rem;
}

.doc-error:empty {
    display: none;
}

.doc-slot.is-invalid .doc-drop {
    border-color: var(--c-red);
}

.stu-logins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.stu-logins span {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.stu-logins i {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--c-violet-bg);
    color: var(--c-violet);
}

.stu-logins small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stu-logins b {
    overflow: hidden;
    color: var(--text);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------- subscription card --------------------------- */

.sub-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(var(--primary-rgb), 0.14),
            transparent 55%
        ),
        var(--surface);
}

.sub-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.sub-card-top > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.sub-card-top strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-card-top small {
    color: var(--muted);
    font-size: 0.74rem;
}

.sub-card-photo,
.sub-hero-photo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 14px;
    background-color: var(--primary);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}

.sub-card-course {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.sub-card-course i {
    color: var(--primary);
}

.sub-card-dates,
.sub-card-fee {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 16px;
}

.sub-card-fee {
    grid-template-columns: 1fr 1fr;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.sub-card-dates span,
.sub-card-fee span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sub-card-dates small,
.sub-card-fee small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sub-card-dates b,
.sub-card-fee b {
    color: var(--text);
    font-size: 0.82rem;
}

.sub-card-fee b.is-due {
    color: var(--c-amber);
}

/* ---------------------------- subscriptions list ---------------------------- */

button.sub-stat {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.sub-stat:hover {
    border-color: var(--primary-bd);
}

button.sub-stat.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.sub-stat-filter {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

button.sub-stat:hover .sub-stat-filter,
button.sub-stat.is-active .sub-stat-filter {
    opacity: 1;
}

button.sub-stat.is-active .sub-stat-filter {
    color: var(--primary);
}

.sub-table td {
    vertical-align: middle;
}

.sub-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
}

.sub-course {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.sub-course b {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
}

.sub-course small,
.sub-fee small {
    color: var(--muted);
    font-size: 0.74rem;
}

.sub-validity {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
}

.sub-validity span {
    color: var(--text-2);
    font-size: 0.78rem;
    white-space: nowrap;
}

.sub-validity span i {
    margin: 0 3px;
    color: var(--muted);
    font-size: 0.7rem;
}

.sub-bar {
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
}

.sub-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.sub-days {
    color: var(--muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.sub-days.is-warn {
    color: var(--c-amber);
}

.sub-days.is-over {
    color: var(--c-red);
}

.sub-days.is-soon {
    color: var(--c-sky);
}

.sub-fee {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.sub-fee b {
    color: var(--text);
    font-size: 0.84rem;
}

.sub-fee small.is-due {
    color: var(--c-amber);
    font-weight: 600;
}

.sub-manage {
    white-space: nowrap;
}

@media (max-width: 1599.98px) {
    .sub-manage span {
        display: none;
    }
}

.sub-pager {
    display: inline-flex;
    gap: 4px;
}

.sub-pager button {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.sub-pager button:hover:not(:disabled) {
    border-color: var(--primary-bd);
    color: var(--primary);
}

.sub-pager button.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.sub-pager button:disabled {
    opacity: 0.4;
}

/* ---------------------------- manage subscription ---------------------------- */

.sub-hero .idt-card-body {
    padding: 20px;
}

.sub-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sub-hero-photo {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    border-radius: 16px;
    font-size: 1.2rem;
}

.sub-hero-name {
    flex: 1;
    min-width: 0;
}

.sub-hero-name h2 {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sub-hero-name p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.sub-line {
    margin-top: 22px;
}

.sub-line-labels,
.sub-line-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.sub-line-labels span {
    display: flex;
    flex-direction: column;
}

.sub-line-labels small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sub-line-labels b {
    color: var(--text);
    font-size: 0.95rem;
}

.sub-line-track {
    position: relative;
    height: 10px;
    margin: 12px 0 8px;
    border-radius: 999px;
    background: var(--surface-3);
}

.sub-line-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: currentColor;
    transition: width 0.4s ease;
}

.sub-line-fill.tone-green,
.sub-line-fill.tone-amber,
.sub-line-fill.tone-red,
.sub-line-fill.tone-sky,
.sub-line-fill.tone-violet {
    background: currentColor;
}

.sub-line-ext {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(22, 163, 74, 0.35) 0 4px,
        transparent 4px 8px
    );
}

.sub-line-today {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--text);
    transform: translate(-50%, -50%);
}

.sub-line-today em {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--text);
    color: var(--surface);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

.sub-line-foot small {
    color: var(--muted);
    font-size: 0.76rem;
}

.sub-line-foot small i {
    color: var(--c-green);
}

.sub-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.sub-kpis div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
}

.sub-kpis b {
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1.2;
}

.sub-kpis b.is-due {
    color: var(--c-amber);
}

.sub-kpis small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sub-presets span {
    gap: 6px;
}

.sub-extend-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--c-green-bg);
}

.sub-extend-preview span {
    display: flex;
    flex-direction: column;
}

.sub-extend-preview small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sub-extend-preview b {
    color: var(--text);
    font-size: 0.95rem;
}

.sub-extend-preview > i {
    color: var(--c-green);
}

.sub-extend-preview em {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--c-green);
    color: #ffffff;
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 700;
}

.sub-extend-preview em.is-bad {
    background: var(--c-red);
}

.sub-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.sub-payments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-payments li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-2);
}

.sub-payments li > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.sub-payments b {
    color: var(--text);
    font-size: 0.9rem;
}

.sub-payments small {
    color: var(--muted);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.sub-payments em {
    color: var(--muted);
    font-size: 0.75rem;
    font-style: normal;
    white-space: nowrap;
}

.sub-pay-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--c-violet-bg);
    color: var(--c-violet);
}

.sub-record {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.sub-inline-note {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--c-violet-bg);
    color: var(--c-violet);
    font-size: 0.78rem;
}

.sub-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-contact li {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.82rem;
}

.sub-contact li:last-child {
    border-bottom: 0;
}

.sub-contact i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--primary);
}

.sub-contact a,
.sub-contact span {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.sub-contact small {
    color: var(--muted);
    font-size: 0.72rem;
}

.sub-quick {
    display: grid;
    gap: 8px;
}

.sub-quick .btn {
    justify-content: flex-start;
    text-align: left;
}

.sub-history {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-history::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 15px;
    width: 2px;
    background: var(--border-2);
}

.sub-history li {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.sub-history li:last-child {
    padding-bottom: 0;
}

.sub-history li > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 0.8rem;
}

.sub-history li.is-extend > span {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.sub-history li.is-pay > span {
    background: var(--c-violet-bg);
    color: var(--c-violet);
}

.sub-history li.is-start > span {
    background: var(--primary-bg);
    color: var(--primary);
}

.sub-history li.is-edit > span {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.sub-history li.is-note > span {
    background: var(--c-sky-bg);
    color: var(--c-sky);
}

.sub-history li > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 4px;
}

.sub-history b {
    color: var(--text);
    font-size: 0.83rem;
}

.sub-history small {
    color: var(--text-2);
    font-size: 0.76rem;
}

.sub-history q {
    margin-top: 4px;
    padding: 6px 9px;
    border-left: 2px solid var(--c-green);
    border-radius: 0 6px 6px 0;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.76rem;
    quotes: none;
}

.sub-history em {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.7rem;
    font-style: normal;
}

.sub-history li.is-new,
.sub-payments li.is-new {
    animation: subIn 0.4s ease;
}

@keyframes subIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* ---------------------------- subscription settings ---------------------------- */

[data-sset-body] {
    transition: opacity 0.15s ease;
}

[data-sset-body].is-off {
    opacity: 0.45;
}

.sset-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sset-modes label {
    margin: 0;
    cursor: pointer;
}

.sset-modes input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sset-modes span {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.sset-modes b {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 0.83rem;
}

.sset-modes small {
    color: var(--muted);
    font-size: 0.72rem;
}

.sset-modes input:checked + span {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.sset-modes input:checked + span b {
    color: var(--primary);
}

.sset-modes input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sset-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.sset-flow > i {
    color: var(--muted);
}

.sset-flow span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.sset-flow .is-end {
    background: var(--surface-3);
    color: var(--text-2);
}

.sset-flow .is-grace {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.sset-flow .is-lock {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.sset-flow .is-read {
    background: var(--c-sky-bg);
    color: var(--c-sky);
}

.sset-switches {
    margin-top: 14px;
    border-top: 1px solid var(--border-2);
}

.sset-switches .ctl-row:last-child {
    border-bottom: 0;
}

.sset-num {
    flex: 0 0 130px;
}

.sset-chat {
    padding: 16px 14px;
    border-radius: var(--radius-sm);
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(13, 148, 136, 0.08),
            transparent 40%
        ),
        var(--surface-2);
}

.sset-bubble {
    position: relative;
    max-width: 92%;
    padding: 10px 12px;
    border-radius: 4px 12px 12px 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.5;
    box-shadow: var(--shadow-xs);
}

.sset-bubble small {
    color: var(--muted);
}

.sset-chat-time {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.68rem;
}

.sset-chat-time i {
    color: var(--c-sky);
}

.sset-summary {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sset-summary li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    color: var(--text-2);
    font-size: 0.8rem;
}

.sset-summary li:last-child {
    border-bottom: 0;
}

.sset-summary i {
    color: var(--primary);
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 991.98px) {
    .doc-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .doc-file {
        flex: 0 0 auto;
    }

    .doc-drop {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 10px;
        text-align: left;
    }

    .doc-ic {
        margin: 0;
    }

    .doc-drop em {
        margin: 0 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .cst-mode,
    .sset-modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .stu-schedule-grid {
        grid-template-columns: 1fr auto 1fr;
    }

    .stu-schedule-total {
        grid-column: 1 / -1;
        padding: 10px 0 0;
        border-top: 1px dashed var(--border);
        border-left: 0;
    }

    .stu-logins {
        grid-template-columns: minmax(0, 1fr);
    }

    .sub-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-hero-top {
        flex-wrap: wrap;
    }

    .sub-extend-preview em {
        margin-left: 0;
    }

    .cst-months .input-group {
        flex: 1 1 100%;
    }

    .idt-table-foot {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 479.98px) {
    .doc-drop em {
        margin-left: 0;
    }

    .cst-part {
        flex-direction: row-reverse;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   29. MANAGE COURSES, PROMO PLAYER & CONFIRM DIALOG
   ═══════════════════════════════════════════════════════════════════ */

/* ------------------------------ promo player ----------------------------- */

.crs-promo {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.crs-promo-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0b0f17;
}

.crs-promo-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.crs-promo-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}

.crs-promo-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.crs-promo-meta > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.crs-promo-meta strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crs-promo-meta small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crs-promo-ic {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--c-sky-bg);
    color: var(--c-sky);
}

.crs-promo-ic.is-youtube {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.crs-promo-open {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
}

.crs-promo-open:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

/* ------------------------------ manage courses ----------------------------- */

.crs-table td {
    vertical-align: middle;
}

.crs-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.crs-row-main > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crs-row-main strong {
    color: var(--text);
    font-size: 0.86rem;
}

.crs-row-main small {
    color: var(--muted);
    font-size: 0.74rem;
}

.crs-row-thumb {
    display: grid;
    place-items: center;
    width: 72px;
    height: 42px;
    flex: 0 0 72px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--muted);
}

.crs-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crs-row-meta {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.crs-row-meta b {
    color: var(--text);
    font-size: 0.84rem;
}

.crs-row-meta small {
    color: var(--muted);
    font-size: 0.74rem;
}

.crs-row-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crs-table tr.is-removing {
    background: var(--c-red-bg);
}

.crs-clear {
    white-space: nowrap;
}

.mdl-search.is-loading i {
    animation: crsSpin 0.8s linear infinite;
}

@keyframes crsSpin {
    to {
        transform: rotate(360deg);
    }
}

.sub-pager a {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.sub-pager a:hover {
    border-color: var(--primary-bd);
    color: var(--primary);
}

.sub-pager a.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

/* ------------------------------ confirm dialog ----------------------------- */

.idt-swal-wrap.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.idt-swal.swal2-popup {
    width: min(420px, calc(100vw - 32px));
    padding: 26px 24px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-pop);
    font-family: inherit;
}

.idt-swal .idt-swal-icon.swal2-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border: 0;
    background: var(--primary-bg);
    color: var(--primary);
    box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0.06);
}

.idt-swal .idt-swal-icon .swal2-icon-content {
    font-size: 1.6rem;
}

.idt-swal .idt-swal-title.swal2-title {
    padding: 0;
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 700;
}

.idt-swal .idt-swal-text.swal2-html-container {
    margin: 10px 0 0;
    padding: 0;
    color: var(--text-2);
    font-size: 0.85rem;
    line-height: 1.55;
}

.idt-swal-text p {
    margin: 12px 0 0;
}

.idt-swal-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.idt-swal-item b {
    color: var(--text);
    font-size: 0.9rem;
}

.idt-swal-item small {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
}

.idt-swal .idt-swal-actions.swal2-actions {
    width: 100%;
    margin: 20px 0 0;
    gap: 10px;
}

.idt-swal .idt-swal-actions .btn {
    flex: 1;
    margin: 0;
}

.idt-swal .idt-swal-loader.swal2-loader {
    border-color: var(--primary) transparent var(--primary) transparent;
}

.idt-swal .idt-swal-error.swal2-validation-message {
    margin: 14px 0 0;
    border-radius: var(--radius-sm);
    background: var(--c-red-bg);
    color: var(--c-red);
    font-size: 0.8rem;
}

.idt-swal .idt-swal-error.swal2-validation-message::before {
    background-color: var(--c-red);
}

/* ═══════════════════════════════════════════════════════════════════
   30. COMPACT STATS & DATATABLES
   ═══════════════════════════════════════════════════════════════════ */

/* ------------------------------ compact stats ----------------------------- */

.idt-stat.is-compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 12px 14px;
}

.idt-stat.is-compact .idt-stat-top {
    grid-row: span 2;
    margin: 0;
}

.idt-stat.is-compact .idt-stat-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1.05rem;
}

.idt-stat.is-compact .idt-stat-label {
    font-size: 0.74rem;
}

.idt-stat.is-compact .idt-stat-value {
    margin: 0;
    font-size: 1.25rem;
}

.idt-stat.is-compact .idt-stat-foot {
    grid-column: 2;
    margin: 0;
    padding: 0;
    border: 0;
}

.idt-stat.is-compact .idt-stat-foot small {
    font-size: 0.7rem;
}

.idt-stat.is-compact .sub-stat-filter {
    display: none;
}

/* -------------------------------- datatables ------------------------------- */

.idt-dt div.dt-container {
    position: relative;
}

.idt-dt .dt-container > .row {
    margin: 0;
}

.idt-dt .dt-container > .row > * {
    padding: 0;
}

.idt-dt .dt-layout-table > .dt-layout-full {
    display: block !important;
    overflow-x: auto;
}

.idt-dt .dt-container > .row:not(.dt-layout-table) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0 !important;
    padding: 12px 20px;
    border-top: 1px solid var(--border-2);
}

.idt-dt .dt-container > .row:not(.dt-layout-table) > * {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    width: auto;
    margin: 0 !important;
}

.idt-dt .dt-layout-table {
    margin-top: 0 !important;
}

.idt-dt table.dataTable {
    margin: 0 !important;
}

.idt-dt table.dataTable > thead > tr > th {
    white-space: nowrap;
}

.idt-dt table.dataTable > thead > tr > th.dt-orderable-asc span.dt-column-order,
.idt-dt
    table.dataTable
    > thead
    > tr
    > th.dt-orderable-desc
    span.dt-column-order {
    opacity: 0.6;
}

.idt-dt table.dataTable > thead > tr > th.dt-ordering-asc,
.idt-dt table.dataTable > thead > tr > th.dt-ordering-desc {
    color: var(--primary);
}

.idt-dt table.dataTable.table-striped > tbody > tr,
.idt-dt table.dataTable > tbody > tr.selected > * {
    box-shadow: none;
}

.idt-dt .dt-info {
    color: var(--muted);
    font-size: 0.8rem;
}

.idt-dt .dt-length {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.8rem;
}

.idt-dt .dt-length .idt-select {
    width: 120px;
}

.idt-dt .dt-length label {
    margin: 0;
}

.idt-dt .dt-paging .pagination {
    gap: 4px;
    margin: 0;
}

.idt-dt .dt-paging .page-link {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px !important;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: none;
}

.idt-dt .dt-paging .page-link:hover {
    border-color: var(--primary-bd);
    background: var(--surface);
    color: var(--primary);
}

.idt-dt .dt-paging .page-item.active .page-link {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.idt-dt .dt-paging .page-item.disabled .page-link {
    opacity: 0.4;
}

.idt-dt div.dt-processing {
    display: none !important;
}

.crs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px;
    color: var(--muted);
}

.crs-empty i {
    font-size: 1.8rem;
}

.crs-row-meta b i {
    margin-right: 3px;
    color: var(--muted);
}

@media (max-width: 767.98px) {
    .idt-dt .dt-container > .row:not(.dt-layout-table) {
        justify-content: center;
        padding: 12px 14px;
    }

    .idt-dt .dt-container > .row:not(.dt-layout-table) > * {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   31. DOTTED LOADER (GLOBAL)
   used by IDT.loader on every manage / list page
   ═══════════════════════════════════════════════════════════════════ */

.idt-loader-host {
    position: relative;
    transition: min-height 0.2s ease;
}

.idt-loader-host.is-loading {
    min-height: var(--loader-min, 340px);
}

.idt-loader {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--surface);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.idt-loader.is-on {
    opacity: 1;
    visibility: visible;
}

.idt-loader::before,
.idt-loader-dots {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 16px 16px;
}

.idt-loader::before {
    background-image: radial-gradient(
        circle,
        rgba(var(--primary-rgb), 0.9) 1.3px,
        transparent 1.8px
    );
    opacity: 0.14;
}

.idt-loader-dots {
    background-image: radial-gradient(
        circle,
        rgba(var(--primary-rgb), 0.95) 2.2px,
        transparent 2.7px
    );
    -webkit-mask-image: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        #000 0%,
        rgba(0, 0, 0, 0.6) 40%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        #000 0%,
        rgba(0, 0, 0, 0.6) 40%,
        transparent 100%
    );
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 46% 120%;
    mask-size: 46% 120%;
    animation: idtLoaderBreathe 2.4s ease-in-out infinite;
}

.idt-loader-text {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 14px 30px;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.idt-loader-text::before {
    content: "";
    position: absolute;
    inset: -10px -26px;
    z-index: -1;
    background: radial-gradient(
        closest-side,
        var(--surface) 55%,
        transparent 100%
    );
}

.idt-loader-text span {
    margin-right: 3px;
    background: linear-gradient(
        90deg,
        var(--text-2) 0%,
        var(--primary) 45%,
        var(--text-2) 90%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: idtLoaderShine 1.8s linear infinite;
}

.idt-loader-text i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    animation: idtLoaderBounce 1s ease-in-out infinite;
}

.idt-loader-text i:nth-of-type(2) {
    animation-delay: 0.15s;
}

.idt-loader-text i:nth-of-type(3) {
    animation-delay: 0.3s;
}

@keyframes idtLoaderBreathe {
    0%,
    100% {
        -webkit-mask-size: 40% 105%;
        mask-size: 40% 105%;
        -webkit-mask-position: 47% 48%;
        mask-position: 47% 48%;
    }
    50% {
        -webkit-mask-size: 64% 150%;
        mask-size: 64% 150%;
        -webkit-mask-position: 53% 52%;
        mask-position: 53% 52%;
    }
}

@keyframes idtLoaderShine {
    from {
        background-position: 120% 0;
    }
    to {
        background-position: -120% 0;
    }
}

@keyframes idtLoaderBounce {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .idt-loader-dots,
    .idt-loader-text span,
    .idt-loader-text i {
        animation: none;
    }
}

/* ------------------------------ module list ----------------------------- */

.mdl-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mdl-table .mdl-order button:disabled {
    cursor: not-allowed;
}

/* ------------------------------ lecture form ----------------------------- */

.lec-pdf .doc-drop {
    padding: 28px 16px;
}

.lec-pdf.is-drag .doc-drop,
.lec-pdf.is-drag .lec-pdf-list {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.lec-pdf.has-file .doc-drop {
    display: none;
}

.lec-pdf-list {
    display: none;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
}

.lec-pdf.has-file .lec-pdf-list {
    display: grid;
    gap: 6px;
}

.lec-pdf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    animation: subIn 0.25s ease;
}

.lec-pdf-item .doc-thumb {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 1.05rem;
}

.lec-pdf-no {
    min-width: 22px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.lec-pdf-tools {
    display: flex;
    gap: 2px;
}

.lec-pdf-tools button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
}

.lec-pdf-tools button:hover:not(:disabled) {
    background: var(--primary-bg);
    color: var(--primary);
}

.lec-pdf-tools button.is-danger:hover {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.lec-pdf-tools button:disabled {
    opacity: 0.3;
}

.lec-pdf-foot {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.78rem;
}

.lec-pdf.has-file .lec-pdf-foot {
    display: flex;
}

.lec-pdf.is-invalid .doc-drop,
.lec-pdf.is-invalid .lec-pdf-list {
    border-color: var(--c-red);
}

.lec-pdf .doc-error {
    margin-top: 8px;
}

.lec-pdf-opt {
    margin-top: 14px;
    border-top: 1px solid var(--border-2);
    border-bottom: 0;
}

@media (max-width: 575.98px) {
    .lec-pdf-item {
        flex-wrap: wrap;
    }

    .lec-pdf-tools {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ------------------------------ lecture list & view ----------------------------- */

.lec-row-thumb.is-video {
    color: var(--c-sky);
}

.lec-row-thumb.is-pdf {
    color: var(--c-red);
}

.lec-pdf-tools a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.82rem;
    text-decoration: none;
}

.lec-pdf-tools a:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

.lec-pdf-saved,
.lec-pdf-new {
    font-weight: 700;
}

.lec-pdf-saved {
    color: var(--c-green);
}

.lec-pdf-new {
    color: var(--c-sky);
}

.lec-view .modal-content,
.modal-content.lec-view {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.lec-view .modal-header,
.lec-view .modal-footer {
    border-color: var(--border-2);
}

.lec-view .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
}

.lec-view .modal-title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lec-view-player {
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.lec-view-cover {
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-3);
    background-position: center;
    background-size: cover;
}

.lec-view-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--c-amber-bg);
    color: var(--c-amber);
    font-size: 0.84rem;
}

.lec-view-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.lec-view-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lec-view-meta div {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.lec-view-meta i {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary);
}

.lec-view-meta small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lec-view-meta b {
    overflow: hidden;
    color: var(--text);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lec-view-head {
    margin: 20px 0 10px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
}

.lec-view-files {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lec-view-files li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.lec-view-files .doc-thumb {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.lec-view-desc {
    color: var(--text-2);
    font-size: 0.86rem;
    line-height: 1.6;
}

.lec-view-desc > :last-child {
    margin-bottom: 0;
}

.lec-view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--primary);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.lec-view-updated {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.74rem;
}

@media (max-width: 575.98px) {
    .lec-view-meta {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------ faculty form ----------------------------- */

.fac-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.fac-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 600;
}

.fac-link:hover {
    text-decoration: underline;
}

.fac-desig-add {
    margin-top: 10px;
    padding: 10px;
    border: 1.5px dashed var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary-bg);
    animation: subIn 0.25s ease;
}

.fac-desig-error {
    margin-top: 6px;
    color: var(--c-red);
    font-size: 0.76rem;
}

.fac-desig-error:empty {
    display: none;
}

.fac-status-row {
    padding: 12px 0 0;
    border-top: 1px solid var(--border-2);
    border-bottom: 0;
}

.fac-empty {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.84rem;
    text-align: center;
}

.fac-empty a {
    color: var(--primary);
    font-weight: 600;
}

/* ------------------------------ faculty list & view ----------------------------- */

.fac-avatar {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.fac-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fac-avatar.tone-blue {
    background: var(--c-blue-bg);
    color: var(--c-blue);
}
.fac-avatar.tone-teal {
    background: var(--c-teal-bg);
    color: var(--c-teal);
}
.fac-avatar.tone-violet {
    background: var(--c-violet-bg);
    color: var(--c-violet);
}
.fac-avatar.tone-pink {
    background: var(--c-pink-bg);
    color: var(--c-pink);
}
.fac-avatar.tone-amber {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.fac-avatar.is-lg {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    font-size: 1.2rem;
}

.fac-contact b,
.fac-contact small {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fac-contact i {
    color: var(--muted);
    font-size: 0.78rem;
}

.fac-row-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.fac-row-tags .idt-pill {
    padding: 2px 8px;
    font-size: 0.66rem;
}

.fac-exp {
    margin-right: 2px;
    color: var(--muted);
    font-size: 0.72rem;
}

.fac-view-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.fac-view-head h6 {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
}

.fac-view-head small {
    color: var(--muted);
    font-size: 0.8rem;
}

.fac-view-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fac-view-courses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.fac-view-courses span {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.fac-view-courses i {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--primary);
}

.fac-view-courses b {
    overflow: hidden;
    color: var(--text);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fac-view-courses small {
    color: var(--muted);
    font-size: 0.72rem;
}

.fac-view-none {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.fac-view-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

@media (max-width: 575.98px) {
    .fac-view-courses {
        grid-template-columns: minmax(0, 1fr);
    }

    .fac-view-head {
        align-items: flex-start;
    }
}

/* ------------------------------ notification settings ----------------------------- */

.ntf-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ntf-channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        opacity 0.15s ease;
}

.ntf-channel.is-on {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.ntf-channel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ntf-channel-ic {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.05rem;
}

.ntf-channel strong {
    color: var(--text);
    font-size: 0.9rem;
}

.ntf-channel small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.ntf-ready {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: var(--c-amber);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
}

.ntf-ready.is-on {
    color: var(--c-green);
}

.ntf-ready a {
    color: var(--primary);
}

.ntf-module + .ntf-module {
    margin-top: 18px;
}

.ntf-module-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ntf-module-head strong {
    color: var(--text);
    font-size: 0.92rem;
}

.ntf-module-head small {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.74rem;
}

.ntf-event {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: opacity 0.15s ease;
}

.ntf-event + .ntf-event {
    margin-top: 10px;
}

.ntf-event-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ntf-event-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.ntf-event-text strong {
    color: var(--text);
    font-size: 0.86rem;
}

.ntf-event-text small {
    color: var(--muted);
    font-size: 0.76rem;
}

.ntf-event-text .idt-pill {
    margin-top: 4px;
    padding: 2px 9px;
    font-size: 0.68rem;
}

.ntf-event-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.ntf-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ntf-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ntf-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.ntf-chip input:checked + span {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.ntf-chip input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ntf-chip.is-blocked span {
    border-style: dashed;
    opacity: 0.5;
}

.ntf-chip.is-blocked input:checked + span {
    background: var(--surface-2);
    color: var(--muted);
}

.ntf-event.is-off .ntf-event-channels {
    opacity: 0.45;
    pointer-events: none;
}

.ntf-event-note {
    margin-top: 8px;
    color: var(--c-amber);
    font-size: 0.74rem;
}

.ntf-event-note:empty {
    display: none;
}

.ntf-summary {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ntf-summary li {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.ntf-summary b {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 0.8rem;
}

.ntf-summary div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ntf-summary .idt-pill {
    padding: 2px 9px;
    font-size: 0.68rem;
}

@media (max-width: 991.98px) {
    .ntf-channels {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------ notification bell & page ----------------------------- */

.idt-notify-body {
    position: relative;
    min-height: 120px;
}

.idt-notify-body.is-loading {
    min-height: 200px;
}

.idt-notify-item .idt-ic {
    flex: 0 0 36px;
}

.idt-notify-text small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.idt-notify-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 34px 20px;
    color: var(--muted);
    text-align: center;
}

.idt-notify-empty i {
    margin-bottom: 4px;
    font-size: 1.6rem;
    color: var(--primary);
}

.idt-notify-empty strong {
    color: var(--text);
    font-size: 0.86rem;
}

.idt-notify-empty small {
    font-size: 0.76rem;
}

.idt-notify-empty.is-page {
    padding: 60px 20px;
}

[data-notify-read-all].is-busy {
    opacity: 0.5;
    pointer-events: none;
}

.idt-dot.is-pulse {
    animation: ntfPulse 0.6s ease 2;
}

@keyframes ntfPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.35);
    }
}

.ntf-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-2);
}

.ntf-page-head small {
    color: var(--muted);
    font-size: 0.78rem;
}

.ntf-page-head .idt-chip-group b {
    margin-left: 2px;
    padding: 0 7px;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 0.7rem;
}

.ntf-page-list .idt-notify-item {
    position: relative;
    align-items: center;
    padding: 14px 18px;
}

.ntf-page-dot {
    width: 9px;
    height: 9px;
    margin-left: auto;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--primary);
}

.ntf-pager {
    display: flex;
    gap: 8px;
}

.fac-pass {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.fac-pass-ic {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-bg);
    color: var(--primary);
}

.fac-pass-text {
    flex: 1;
    min-width: 0;
}

.fac-pass-value {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fac-pass-text small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

/* ------------------------------ faculty send email dialog ----------------------------- */

.fac-mail-opts {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    text-align: left;
}

.fac-mail-opt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.fac-mail-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fac-mail-opt:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.fac-mail-opt:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.fac-mail-opt.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fac-mail-ic {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--primary);
}

.fac-mail-opt b {
    display: block;
    color: var(--text);
    font-size: 0.86rem;
}

.fac-mail-opt small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.fac-mail-check {
    margin-left: auto;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.fac-mail-opt:has(input:checked) .fac-mail-check {
    opacity: 1;
}

/* ------------------------------ notifications page (categories + board) ----------------------------- */

.ntf-cats {
    position: sticky;
    top: 90px;
    overflow: hidden;
}

.ntf-cats-head {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--border-2);
}

.ntf-cats-head h6 {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.ntf-cats-head small {
    color: var(--muted);
    font-size: 0.76rem;
}

.ntf-cats-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

.ntf-cats-label {
    margin: 12px 8px 4px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ntf-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.ntf-cat:hover {
    background: var(--surface-2);
    color: var(--text);
}

.ntf-cat.is-active {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.ntf-cat-ic {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.92rem;
}

.ntf-cat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ntf-cat b {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.72rem;
    text-align: center;
}

.ntf-cat b.is-hot {
    background: var(--primary);
    color: #fff;
}

.ntf-cat.is-active b:not(.is-hot) {
    background: var(--surface);
    color: var(--primary);
}

.ntf-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-2);
}

.ntf-board-head h6 {
    margin: 0;
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 700;
}

.ntf-board-head small {
    color: var(--muted);
    font-size: 0.76rem;
}

.ntf-scope span {
    padding: 6px 14px;
    font-size: 0.78rem;
}

.ntf-board-body {
    position: relative;
    min-height: 320px;
    padding: 6px 22px 10px;
}

.ntf-group {
    position: sticky;
    top: 70px;
    z-index: 1;
    margin: 14px 0 8px;
    padding: 4px 0;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ntf-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
    animation: subIn 0.25s ease;
}

.ntf-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.ntf-item.unread {
    border-color: rgba(var(--primary-rgb), 0.25);
    background: var(--primary-bg);
}

.ntf-item.unread::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.ntf-item-link {
    display: flex;
    flex: 1;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    color: var(--text);
    text-decoration: none;
}

.ntf-item-link:hover {
    color: var(--text);
}

.ntf-item-ic {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1.02rem;
}

.ntf-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ntf-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ntf-item-top strong {
    font-size: 0.88rem;
    font-weight: 700;
}

.ntf-item-module {
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ntf-item.unread .ntf-item-module {
    background: var(--surface);
}

.ntf-item-text {
    color: var(--text-2);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ntf-item-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.72rem;
}

.ntf-item-read {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 14px 14px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    transition: all 0.15s ease;
}

.ntf-item-read:hover {
    border-color: var(--c-green);
    background: var(--c-green-bg);
    color: var(--c-green);
}

.ntf-board-foot {
    display: flex;
    justify-content: center;
    padding: 6px 22px 22px;
}

.ntf-board-foot small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.76rem;
}

.ntf-board-foot:has(.d-none + .d-none) {
    padding: 0;
}

@media (max-width: 991.98px) {
    .ntf-cats {
        position: static;
    }

    .ntf-cats-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ntf-cats-list::-webkit-scrollbar {
        display: none;
    }

    .ntf-cats-label {
        display: none;
    }

    .ntf-cat {
        flex: 0 0 auto;
        width: auto;
        border-color: var(--border);
    }

    .ntf-cat-ic {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
}

@media (max-width: 575.98px) {
    .ntf-board-head,
    .ntf-board-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ntf-item-link {
        gap: 10px;
        padding: 12px;
    }

    .ntf-item-ic {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    .ntf-item-read {
        margin: 12px 10px 0 0;
    }
}

/* ============================================================
   32. COUPONS & OFFERS
   ============================================================ */

.cpn-code-input {
    font-family: var(--font-mono, Consolas, monospace);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cpn-course-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cpn-course-tools .bx-search-sm {
    flex: 1 1 220px;
}

.cpn-courses {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.cpn-course-empty {
    padding: 18px;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

.cpn-switches {
    margin-top: 14px;
    border-top: 1px solid var(--border-2);
}

.cpn-switches .ctl-row:last-child {
    border-bottom: 0;
}

.cpn-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.cpn-presets span {
    color: var(--muted);
    font-size: 0.74rem;
}

.cpn-presets button {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 600;
}

.cpn-presets button:hover,
.cpn-presets button.is-active {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.cpn-ticket {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-d));
    color: #fff;
}

.cpn-ticket::before,
.cpn-ticket::after {
    content: "";
    position: absolute;
    right: 104px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    transform: translateX(50%);
}

.cpn-ticket::before {
    top: -9px;
}

.cpn-ticket::after {
    bottom: -9px;
}

.cpn-ticket-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 16px 18px;
}

.cpn-ticket-main strong {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.cpn-ticket-main small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpn-ticket-state {
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cpn-ticket-code {
    display: flex;
    flex: 0 0 104px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px;
    border-left: 2px dashed rgba(255, 255, 255, 0.45);
    text-align: center;
}

.cpn-ticket-code small {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cpn-ticket-code b {
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    word-break: break-all;
}

.cpn-rules {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.cpn-rules li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--text-2);
    font-size: 0.8rem;
    line-height: 1.45;
}

.cpn-rules i {
    margin-top: 1px;
    color: var(--primary);
}

.cpn-calc {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.cpn-calc-out {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.cpn-calc-out div {
    display: flex;
    justify-content: space-between;
    color: var(--text-2);
    font-size: 0.82rem;
}

.cpn-calc-out .is-save b {
    color: var(--c-green);
}

.cpn-calc-out .is-total {
    padding-top: 6px;
    border-top: 1px solid var(--border-2);
    color: var(--text);
    font-size: 0.9rem;
}

.cpn-calc-muted {
    display: inline-flex;
    gap: 6px;
    color: var(--muted);
    font-size: 0.78rem;
}

.cpn-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cpn-row-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1.5px dashed var(--primary);
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--primary);
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cpn-row small {
    color: var(--muted);
    font-size: 0.74rem;
}

.cpn-row-off {
    color: var(--c-green) !important;
    font-size: 0.92rem;
}

.cpn-usage {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    font-size: 0.8rem;
}

.cpn-usage small {
    color: var(--muted);
    font-size: 0.72rem;
}

.cpn-validity b,
.cpn-validity small {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.cpn-validity i {
    color: var(--muted);
    font-size: 0.74rem;
}

/* ============================================================
   33. STUDENTS · FEE, COUPONS, ENROLLMENT SUMMARY
   ============================================================ */

.stu-fee-lock {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    font-weight: 700;
    cursor: not-allowed;
}

.stu-discount-group .form-control {
    min-width: 0;
}

.stu-disc-type {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-2);
}

.stu-disc-type label {
    margin: 0;
    cursor: pointer;
}

.stu-disc-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stu-disc-type span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 100%;
    padding: 0 8px;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 700;
    transition: all 0.15s ease;
}

.stu-disc-type input:checked + span {
    background: var(--primary);
    color: #fff;
}

.stu-disc-type input:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

.stu-coupons {
    padding: 14px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.stu-coupons-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.stu-coupons-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
}

.stu-coupons-head i {
    color: var(--primary);
}

.stu-coupon-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.stu-coupon-muted {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.8rem;
}

.stu-coupon-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    text-align: left;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.stu-coupon-chip:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12);
}

.stu-coupon-chip-code {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1.5px dashed var(--primary);
    border-radius: 7px;
    background: var(--primary-bg);
    color: var(--primary);
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.74rem;
    font-weight: 700;
}

.stu-coupon-chip-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.stu-coupon-chip-text b {
    color: var(--c-green);
    font-size: 0.84rem;
}

.stu-coupon-chip-text small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stu-coupon-chip-go {
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 700;
}

.stu-coupon-on {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--c-green);
    border-radius: 10px;
    background: var(--c-green-bg);
}

.stu-coupon-on > i {
    color: var(--c-green);
    font-size: 1.3rem;
}

.stu-coupon-on div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.stu-coupon-on b {
    color: var(--text);
    font-size: 0.86rem;
}

.stu-coupon-on small {
    color: var(--text-2);
    font-size: 0.74rem;
}

.stu-coupon-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.stu-coupon-modal-head > i {
    color: var(--primary);
    font-size: 1.2rem;
}

.stu-coupon-modal-head span {
    display: flex;
    flex-direction: column;
}

.stu-coupon-modal-head b {
    color: var(--text);
    font-size: 0.9rem;
}

.stu-coupon-modal-head small {
    color: var(--muted);
    font-size: 0.76rem;
}

.stu-coupon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stu-coupon-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.stu-coupon-card.is-on {
    border-color: var(--c-green);
    background: var(--c-green-bg);
}

.stu-coupon-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.stu-coupon-card-off {
    color: var(--c-green);
    font-size: 1.05rem;
    font-weight: 800;
}

.stu-coupon-card-code {
    padding: 3px 8px;
    border: 1.5px dashed var(--primary);
    border-radius: 7px;
    color: var(--primary);
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.74rem;
    font-weight: 700;
}

.stu-coupon-card > b {
    color: var(--text);
    font-size: 0.86rem;
}

.stu-coupon-card p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.78rem;
}

.stu-coupon-card > small {
    color: var(--muted);
    font-size: 0.72rem;
}

.stu-coupon-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    color: var(--text-2);
    font-size: 0.78rem;
}

.stu-coupon-card-foot em {
    color: var(--c-green);
    font-style: normal;
    font-weight: 700;
}

.stu-force {
    margin-top: 6px;
}

.stu-notify-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.stu-notify-link:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--text);
}

.stu-notify-link > i:first-child {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-bg);
    color: var(--primary);
}

.stu-notify-link span {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.stu-notify-link b {
    font-size: 0.84rem;
}

.stu-notify-link small {
    color: var(--muted);
    font-size: 0.74rem;
}

.stu-notify-link > i:last-child {
    color: var(--muted);
}

.stu-enr {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.stu-enr + .stu-enr {
    margin-top: 10px;
}

.stu-enr-course {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stu-enr-course > i {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary);
}

.stu-enr-course div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.stu-enr-course b {
    color: var(--text);
    font-size: 0.9rem;
}

.stu-enr-course small {
    color: var(--muted);
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.72rem;
}

.stu-enr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.stu-enr-grid span {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--surface-2);
}

.stu-enr-grid small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stu-enr-grid b {
    color: var(--text);
    font-size: 0.84rem;
}

.stu-enr-pay {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    font-size: 0.8rem;
}

.stu-enr-pay > i {
    color: var(--c-green);
}

.stu-enr-pay > span {
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: var(--font-mono, Consolas, monospace);
    font-weight: 700;
}

.stu-enr-pay > span small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 400;
}

.stu-enr-pay > small {
    flex: 1;
    color: var(--muted);
}

.stu-enr-pay > b {
    color: var(--c-green);
}

.stu-row-course small {
    max-width: 150px;
    white-space: normal;
}

.stu-row-course b {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stu-row-course small.is-warn {
    color: var(--c-amber);
}

.stu-row-course small.is-over {
    color: var(--c-red);
}

.doc-slot.is-saved .doc-meta small {
    color: var(--c-green);
}

[data-student-table] .fac-contact b,
[data-student-table] .fac-contact small {
    max-width: 150px;
}

@media (max-width: 767.98px) {
    .stu-coupon-list,
    .stu-coupon-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stu-enr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stu-enr-pay {
        flex-wrap: wrap;
    }
}

/* ============================================================
   34. FEES · INSTALLMENT PLAN, FEE DUES, SUBSCRIPTION SETTINGS
   ============================================================ */

.stu-inst-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stu-inst-head small a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.stu-inst-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stu-inst-paid .stu-inst {
    border-top: 0;
}

.stu-inst-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-2);
}

.stu-inst-row > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-amber-bg);
    color: var(--c-amber);
    font-size: 0.74rem;
    font-weight: 700;
}

.stu-inst-row .form-control {
    height: 36px;
    font-size: 0.84rem;
}

.stu-inst-row .input-group-text {
    height: 36px;
    font-size: 0.8rem;
}

.stu-inst-del {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.stu-inst-del:hover:not(:disabled) {
    border-color: var(--c-red);
    background: var(--c-red-bg);
    color: var(--c-red);
}

.stu-inst-del:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stu-inst-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-2);
    font-size: 0.78rem;
}

.stu-inst-foot span {
    color: var(--muted);
}

.stu-inst-foot b {
    color: var(--c-green);
}

.stu-inst-foot.is-bad b {
    color: var(--c-red);
}

.stu-installments.is-invalid {
    border-color: var(--c-red);
}

[data-stu-paytype] label.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-stu-paytype] label.is-disabled span {
    pointer-events: none;
}

[data-stu-part-off] a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.due-stat-sub {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.due-name {
    display: block;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.due-name:hover {
    color: var(--primary);
}

.due-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.due-date b {
    color: var(--text);
    font-size: 0.84rem;
}

.sub-fee b i {
    color: var(--c-green);
    font-size: 0.72rem;
}

.sub-fee b.is-over {
    color: var(--c-red);
}

.due-rem b {
    font-weight: 600;
}

.due-collect-btn {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.due-collect-btn:hover {
    background: var(--c-green);
    color: #ffffff;
}

.due-course b {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.due-collect-head {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.due-collect-student {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.due-collect-student b {
    color: var(--text);
    font-size: 0.95rem;
}

.due-collect-student small {
    color: var(--muted);
    font-size: 0.76rem;
}

.due-collect-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.due-collect-grid b.is-due {
    color: var(--c-amber);
}

.due-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.due-quick-btn {
    padding: 4px 10px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 600;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}

.due-quick-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.due-plan {
    margin-top: 18px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.due-plan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.due-plan-head b {
    color: var(--text);
    font-size: 0.82rem;
}

.due-plan-head small {
    color: var(--muted);
    font-size: 0.72rem;
}

.stu-inst.is-clear > span {
    background: var(--c-green);
    color: #ffffff;
}

.stu-inst.is-clear em,
.stu-inst.is-part em {
    color: var(--c-green);
}

.stu-inst.is-part > span {
    background: var(--c-green-bg);
    color: var(--c-green);
}

.sset-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.78rem;
    line-height: 1.45;
}

.sset-note i {
    color: var(--primary);
    font-size: 1rem;
}

.sset-note a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.sset-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.sset-timeline > i {
    color: var(--muted);
}

.sset-timeline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.sset-timeline .is-before {
    background: var(--c-sky-bg);
    color: var(--c-sky);
}

.sset-timeline .is-due {
    background: var(--c-amber-bg);
    color: var(--c-amber);
}

.sset-timeline .is-late {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.sset-timeline .is-admin {
    background: var(--c-violet-bg);
    color: var(--c-violet);
}

.sset-timeline .is-off {
    background: var(--surface-3);
    color: var(--text-2);
}

@media (max-width: 767.98px) {
    .stu-inst-row {
        grid-template-columns: 26px minmax(0, 1fr) 34px;
        grid-template-areas: "no amount del" ". date .";
    }

    .stu-inst-row > span {
        grid-area: no;
    }

    .stu-inst-row > .stu-inst-amount {
        grid-area: amount;
    }

    .stu-inst-row > .stu-inst-date {
        grid-area: date;
    }

    .stu-inst-row > .stu-inst-del {
        grid-area: del;
    }

    .due-collect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   35. SUBSCRIPTIONS · LIVE LIST & MANAGE
   ============================================================ */

.sub-hero-photo.has-img {
    overflow: hidden;
    padding: 0;
    background: var(--surface-3);
}

.sub-hero-photo.has-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sub-pay-empty b {
    color: var(--muted);
}

.sub-payments + .due-plan {
    margin-top: 12px;
}

.sub-record {
    margin-top: 14px;
}

.sub-quick .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-sub-table] .sub-validity {
    min-width: 170px;
}