@charset "UTF-8";
/* ==========================================================================
   Portal surface: admin, gaming, lms, personalcrm, businesscrm, families. Loaded after core.css.
   ========================================================================== */

@layer app {

    /* ==========================================================================
       1. DESIGN TOKENS & THEMING (LIGHT & DARK)
       ========================================================================== */
    :root {
        --theme-primary: #0D47A1;
        --text-inverse: #ffffff;
        --basic-white: #ffffff;
        --basic-black: #000000;
        --basic-red: #ff0000;
        --basic-darkred: #D44638;
        --basic-green: #25D366;
        --basic-darkgreen: #28a745;
        --basic-darkgreen-2: #1e7e34;
        --basic-orange: #ffc107;
        --basic-darkorange: #f97316;
        --basic-blue: #007bff;
        --basic-darkblue: #0000ff;
        --basic-yellow: #ffff00;
        --basic-pink: #f8d7da;
        --basic-purple: #9c27b0;
        --basic-amber: #ff9800;
        --basic-lightblue: #2196f3;
        --basic-hotpink: #e83e8c;
        --basic-grey-w: #fff;
        --basic-grey-0: #ccc;
        --basic-grey-1: #aaa;
        --basic-grey-2: #999;
        --basic-grey-3: #888;
        --basic-grey-4: #777;
        --basic-grey-5: #666;
        --basic-grey-6: #555;
        --basic-grey-7: #444;
        --basic-grey-8: #333;
        --basic-grey-9: #222;
        --basic-grey-10: #111;
        --basic-grey-b: #000;
        --basic-grey-alt: #6c757d;
        --z-base: 1;
        --z-base1: 5;
        --z-base2: 10;
        --z-base3: 20;
        --z-base4: 100;
        --z-low1: 1000;
        --z-low2: 2000;
        --z-low2-5: 2500;
        --z-low3: 3000;
        --z-low3-5: 3500;
        --z-low3-6: 3600;
        --z-mid4: 4000;
        --z-mid4-5: 4500;
        --z-mid5: 5000;
        --z-mid5-5: 5500;
        --z-mid6: 6000;
        --z-mid6-5: 6500;
        --z-high7: 7000;
        --z-high8: 8000;
        --z-high9: 9000;
        --z-max: 9999;
        --z-top: 10000;
        --text-success-dark: #155724;
        --text-warning-dark: #856404;
        --text-danger-dark: #721c24;
        --bg-info-light: #e3f2fd;
        --border-info-light: #b6d4fe;
        --bg-warning-light: #fff3cd;
        --border-warning-light: #ffeeba;
        --bg-score-card: #f8faff;
        --loader-ring: #f3f3f3;
        --bg-dark-panel: #1e1e1e;
        --radius-full: 9999px;
        --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* --- Dark Mode Surface Overrides --- */
    [data-theme="dark"] {
        --text-inverse: #ffffff;
        --surface-glass: rgba(22, 27, 34, 0.85);
        --surface-glass-border: rgba(255, 255, 255, 0.1);
        --surface-card-hover: #1c222b;
        --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
        --shadow-glow-primary: 0 0 22px rgba(33, 150, 243, 0.4);
    }

    /* --- Dark Mode Logo & Brand Title Glow --- */
    [data-theme="dark"] #header-ws-logo,
    [data-theme="dark"] .header-ws-info img,
    [data-theme="dark"] .class-sidebar-header img,
    [data-theme="dark"] #ws-logo,
    [data-theme="dark"] #ws-logo-display,
    [data-theme="dark"] .brand-logo,
    [data-theme="dark"] .ws-logo,
    [data-theme="dark"] .header-ws-logo,
    [data-theme="dark"] .welcome-game-logo,
    [data-theme="dark"] .ingame-logo,
    [data-theme="dark"] #projector-logo,
    [data-theme="dark"] #welcome-logo,
    [data-theme="dark"] #waiting-logo,
    [data-theme="dark"] #ingame-logo,
    [data-theme="dark"] #crm-qr-logo-thumb,
    body.dark-mode #header-ws-logo,
    body.dark-mode .header-ws-info img,
    body.dark-mode .ws-logo,
    body.dark-mode #ws-logo {
        filter:
            /*
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.65))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 22px rgba(255, 255, 255, 0.15)) !important;
            */
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.90)) !important;

        transition: filter 0.25s ease !important;
    }

    [data-theme="dark"] #ui-ws-name,
    [data-theme="dark"] #ui-admin-title,
    [data-theme="dark"] .header-ws-text h1,
    [data-theme="dark"] .header-ws-text h2,
    [data-theme="dark"] .header-ws-info h1,
    [data-theme="dark"] .header-ws-info h2,
    [data-theme="dark"] #header-ws-title,
    [data-theme="dark"] #ui-crm-title,
    [data-theme="dark"] #ui-gaming-title,
    [data-theme="dark"] .ws-title,
    [data-theme="dark"] #ws-title,
    [data-theme="dark"] #event-name-display,
    [data-theme="dark"] #ws-name-display,
    body.dark-mode #ui-ws-name,
    body.dark-mode .class-topbar h1,
    body.dark-mode #ui-admin-title,
    body.dark-mode .ws-title {
        text-shadow: 0 0 22px rgba(255, 255, 255, 0.20) !important;
    }

    /* ==========================================================================
       2. GLOBAL RESET & BASE STYLES
       ========================================================================== */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-attachment: fixed;
        margin: 0;
        padding: 0;
        transition: background-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* --- Custom Sleek Scrollbars --- */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: var(--radius-full);
    }

    /* --- Accessible Focus Outlines --- */
    :focus-visible {
        outline-offset: 2px;
    }

    /* --- Global Keyframe Animations --- */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.98);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes modalPop {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes tabSlideUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ==========================================================================
       3. BASE UI COMPONENTS & FORM CONTROLS
       ========================================================================== */
    /* --- Forms & Inputs --- */
    .form-control {
        width: 100%;
        padding: 8px 14px;
        margin-bottom: 12px;
        color: var(--text-main);
        box-sizing: border-box;
        font-family: inherit;
        transition: all 0.2s var(--ease-smooth);
        vertical-align: middle;
    }

    select.form-control {
        padding-inline-start: 14px !important;
        padding-inline-end: 28px !important;
        vertical-align: middle !important;
        cursor: pointer;
        background-color: var(--bg-input);
        color: var(--text-main);
    }

    select.form-control option {
        background-color: var(--bg-card);
        color: var(--text-main);
        padding: 10px;
    }

    select.form-control option:checked,
    select.form-control option:hover {
        background-color: var(--theme-primary);
        color: var(--text-inverse);
    }

    textarea.form-control {
        height: auto !important;
        min-height: 80px;
        padding: 10px 14px;
        line-height: 1.5;
    }

    .form-control:focus {
        outline: none;
    }

    /* --- Custom Multi-Select Dropdowns & Tree Dropdowns --- */
    .custom-multi-select {
        position: relative;
        user-select: none;
    }

    .custom-multi-select .form-control {
        user-select: none;
        transition: all 0.2s ease;
    }

    .custom-multi-select .form-control:hover {
        border-color: var(--theme-primary);
    }

    .tree-dropdown-item {
        user-select: none;
        color: var(--text-main);
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .tree-dropdown-item:hover {
        background: rgba(13, 71, 161, 0.08);
    }

    [data-theme="dark"] .tree-dropdown-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .tree-dropdown-node {
        margin-bottom: 4px;
        color: var(--text-main);
    }

    /* --- Buttons --- */
    .btn-primary {
        color: var(--text-inverse);
        border: none;
        cursor: pointer;
        transition: all 0.2s var(--ease-spring);
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn-action-sm {
        border: none;
        color: var(--text-inverse);
        cursor: pointer;
        transition: all 0.2s var(--ease-spring);
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 38px;
    }

    .btn-action-sm:hover {
        opacity: 1;
        filter: brightness(.97);
    }

    .btn-edit {
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--ease-spring);
        --m-c: #d97706;
    }

    .delete-q-btn {
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--ease-spring);
        --m-c: var(--theme-danger);
    }

    .btn-icon {
        cursor: pointer;
        padding: 6px 12px;
        font-size: 1.1rem;
        transition: all 0.2s var(--ease-spring);
    }

    .btn-icon:hover {
        border-color: var(--theme-primary);
    }

    .btn-google {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        background: var(--bg-card);
        color: var(--text-main);
        cursor: pointer;
        font-family: inherit;
        margin-top: 18px;
        transition: all 0.2s var(--ease-spring);
    }

    [dir="rtl"] .btn-google {
        flex-direction: row-reverse;
    }

    .btn-google:active {
        transform: translateY(0) scale(0.98);
    }

    .upload-group {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }

    .upload-group .form-control {
        margin-bottom: 0;
        flex: 1;
    }

    .btn-upload {
        color: var(--text-inverse);
        border: none;
        padding: 0 22px;
        font-size: 1rem;
        cursor: pointer;
        font-family: inherit;
        white-space: nowrap;
        transition: all 0.2s var(--ease-spring);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
    }

    .btn-upload:hover:not(:disabled) {
        box-shadow: none;
        filter: brightness(1.06);
    }

    .btn-upload:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
    }

    .btn-upload:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* --- Header & Top Bar Action Buttons --- */
    .top-action-btn,
    .logout-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 42px !important;
        padding: 8px 18px !important;
        border-radius: var(--radius-sm, 10px) !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        font-family: inherit !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        text-decoration: none;
        transition: all 0.2s var(--ease-spring) !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .top-action-btn#theme-toggle-btn,
    .top-action-btn#btn-change-password {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    .top-action-btn:not(.btn-danger-icon):not(#logout-btn) {
        color: var(--text-main);
    }

    .top-action-btn:not(.btn-danger-icon):not(#logout-btn):hover {
        transform: translateY(-2px);
        border-color: var(--theme-primary) !important;
    }

    [data-theme="dark"] .top-action-btn:not(.btn-danger-icon):not(#logout-btn):hover {
        border-color: var(--theme-primary) !important;
        box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12) !important;
    }

    .logout-btn,
    .top-action-btn.btn-danger-icon,
    #logout-btn {
        background: linear-gradient(135deg, var(--theme-danger) 0%, #bd2130 100%) !important;
        color: var(--text-inverse) !important;
        border: none !important;
        box-shadow: 0 4px 10px rgba(220, 53, 69, 0.25) !important;
    }

    .logout-btn:hover,
    .top-action-btn.btn-danger-icon:hover,
    #logout-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(220, 53, 69, 0.35) !important;
    }

    .top-action-btn:active,
    .logout-btn:active {
        transform: translateY(0) scale(0.98);
    }

    /* --- Modern Segmented Tabs & Nav --- */
    .tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: fit-content !important;
        box-sizing: border-box !important;
        backdrop-filter: none;
        padding: 6px !important;
        margin-bottom: 22px;
        box-shadow: var(--shadow-sm);
        max-width: 100% !important;
    }

    .tab-btn {
        flex: 1 1 auto !important;
        white-space: normal !important;
        min-width: 130px !important;
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 1.08rem;
        font-weight: 700;
        padding: 12px 18px;
        cursor: pointer;
        border-radius: var(--radius-sm);
        margin: 0;
        transition: all 0.22s var(--ease-spring);
        position: relative;
    }

    .tab-btn:hover {
        color: var(--theme-primary);
        background: rgba(13, 71, 161, 0.06);
        transform: translateY(-1px);
    }

    [data-theme="dark"] .tab-btn:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .tab-btn.active {
        color: var(--text-inverse) !important;
        background: var(--theme-primary) !important;
        box-shadow: var(--shadow-glow-primary);
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
        animation: tabSlideUp 0.3s var(--ease-spring);
    }

    /* --- Modern Toggle Switch --- */
    .modern-toggle {
        appearance: none;
        -webkit-appearance: none;
        width: 44px !important;
        height: 24px !important;
        border-radius: 24px;
        position: relative;
        cursor: pointer;
        outline: none;
        transition: background 0.3s, border-color 0.3s;
        flex-shrink: 0;
        margin: 0 !important;
    }

    /* Knob centred vertically whatever the track border (the track has no border in the tonal theme below) */
    .modern-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 3px;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        background: var(--text-muted);
        border-radius: 50%;
        transition: transform 0.3s var(--ease-spring), background 0.3s;
    }

    .modern-toggle:checked {
        background: var(--theme-success);
        border-color: var(--theme-success);
    }

    .modern-toggle:checked::after {
        transform: translate(20px, -50%);
        background: var(--text-inverse);
    }

    [dir="rtl"] .modern-toggle::after {
        left: auto;
        right: 3px;
    }

    [dir="rtl"] .modern-toggle:checked::after {
        transform: translate(-20px, -50%);
    }

    /* ==========================================================================
       4. LAYOUTS, CARDS, MODALS & TABLES
       ========================================================================== */
    /* --- Login Screen --- */
    .screen {
        display: none;
    }

    #login-screen.active {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        animation: fadeIn 0.4s var(--ease-spring);
        padding: 20px;
    }

    .login-box {
        width: 90%;
        max-width: 420px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--shadow-lg);
        text-align: center;
        transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
    }

    .login-nav-header {
        width: 90%;
        max-width: 420px;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
    }

    #login-lang-toggle {
        background: var(--surface-glass);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        color: var(--text-main);
        padding: 6px 16px;
        transition: all 0.2s var(--ease-spring);
        backdrop-filter: blur(8px);
    }

    #login-lang-toggle:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        transform: translateY(-1px);
    }

    /* --- Dashboard Header --- */
    .dashboard-container {
        display: none;
        max-width: none;
        margin: 0 auto;
        animation: fadeIn 0.35s var(--ease-spring);
        width: 100%;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        transition: all 0.3s var(--ease-smooth);
    }

    .header h1 {
        color: var(--theme-primary);
    }

    .header-ws-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        max-width: 100%;
        min-width: 0;
    }

    .header-ws-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: start;
        overflow: hidden;
        min-width: 0;
    }

    /* --- Modals --- */
    .modal {
        display: none;
        position: fixed;
        z-index: var(--z-low1);
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        align-items: flex-start;
        justify-content: center;
    }

    .modal-content {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin: 40px auto;
        padding: 32px;
        width: 90%;
        max-width: 1100px;
        height: fit-content;
        align-self: flex-start;
        position: relative;
        box-shadow: var(--shadow-lg);
        animation: modalPop 0.3s var(--ease-spring);
    }

    .close {
        position: absolute;
        right: 25px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s, transform 0.2s;
        line-height: 1;
    }

    [dir="rtl"] .close {
        right: auto;
        left: 25px;
    }


    .btn-copy-modern {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-main);
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: none;
    }

    .btn-copy-modern:hover {
        border-color: var(--theme-primary);
    }

    .btn-copy-modern:active {
        transform: translateY(0);
    }

    .btn-copy-modern.copied {
        background: var(--theme-success);
        color: var(--text-inverse);
        border-color: var(--theme-success);
    }

    /* --- Quiz Cards & Builder --- */
    .quiz-card {
        backdrop-filter: none;
        margin-bottom: 14px;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        transition: all 0.25s var(--ease-spring);
    }

    .quiz-title {
        color: var(--text-main);
    }

    .quiz-info {
        color: var(--text-muted);
        margin-top: 6px;
    }

    .quiz-actions {
        display: flex;
        flex-wrap: wrap;
        margin-top: 16px;
        padding-top: 16px;
        align-items: center;
        width: 100%;
    }

    .add-question-box {
        background: var(--bg-panel);
        padding: 24px;
        box-shadow: none;
    }

    .option-row {
        background: var(--bg-card);
        padding: 16px;
        margin-bottom: 12px;
        transition: border-color 0.2s;
    }

    .option-row:hover {
        border-color: var(--theme-primary);
    }

    .q-item {
        padding: 18px;
        margin-bottom: 16px;
        border-right: 4px solid var(--theme-primary);
        position: relative;
        transition: all 0.2s var(--ease-spring);
    }

    [dir="ltr"] .q-item {
        border-right: 1px solid var(--border-light);
        border-left: 4px solid var(--theme-primary);
    }

    .q-item-title {
        margin-bottom: 10px;
        color: var(--text-main);
        padding-left: 80px;
    }

    [dir="ltr"] .q-item-title {
        padding-left: 0;
        padding-right: 80px;
    }

    .q-item-opts {
        font-size: 0.96rem;
        color: var(--text-muted);
    }

    .q-item-correct {
        color: var(--theme-success);
        font-weight: 700;
    }

    .q-type-badge {
        font-size: 0.82rem;
        padding: 4px 10px;
        border-radius: var(--radius-full);
        margin-right: 10px;
        display: inline-block;
    }

    [dir="ltr"] .q-type-badge {
        margin-right: 0;
        margin-left: 10px;
    }

    .q-item-actions {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        justify-content: flex-end;
        align-items: stretch;
    }

    /* --- Tables & Grids --- */
    .table-container {
        width: 100%;
        overflow-y: auto;
        overflow-x: auto;
        margin-bottom: 20px;
        box-shadow: var(--shadow-sm);
        position: relative;
        box-sizing: border-box;
    }

    .table-container::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .table-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    .table-container::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }

    .table-container::-webkit-scrollbar-corner {
        background: transparent;
    }

    .leaderboard-table {
        width: 100%;
        margin: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 14px 16px;
        text-align: center;
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle;
        color: var(--text-main);
        transition: background-color 0.15s ease;
        box-sizing: border-box;
        border-radius: 0;
    }

    .leaderboard-table thead {
        position: sticky;
        top: 0;
        z-index: var(--z-base, 10);
        background-color: var(--theme-primary);
    }

    .leaderboard-table th {
        background-color: var(--theme-primary) !important;
        white-space: nowrap;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        border-top: none;
        border-left: none;
        border-right: none;
        letter-spacing: 0.02em;
        position: sticky;
        top: 0;
        z-index: var(--z-base, 10);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .leaderboard-table tr:last-child td {
        border-bottom: none;
    }

    .leaderboard-table tbody tr {
        background-color: transparent;
        transition: background-color 0.15s ease;
    }

    .leaderboard-table tbody tr:hover {
        background: var(--bg-light-hover);
    }

    [data-theme="dark"] .leaderboard-table tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }

    .tab-content>.leaderboard-table,
    .card>.leaderboard-table {
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        margin-top: 20px;
    }

    .rank-1 {
        background-color: rgba(255, 193, 7, 0.12);
        font-weight: 800;
    }

    .rank-2 {
        background-color: rgba(108, 117, 125, 0.1);
        font-weight: 700;
    }

    .rank-3 {
        background-color: rgba(253, 126, 20, 0.1);
        font-weight: 700;
    }

    #leaderboard-controls {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    #leaderboard-controls input,
    #leaderboard-controls select,
    #leaderboard-controls button {
        margin: 0;
        padding: 11px 14px;
        flex: 1 1 180px;
        max-width: 100%;
        box-sizing: border-box;
    }

    div[id*="pagination"],
    .pagination,
    #page-selector,
    .page-selector {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .pagination button,
    [id*="pagination"] button {
        flex: 0 1 auto !important;
        min-width: 42px !important;
    }

    /* --- Host Live Panel --- */
    .host-modal-content {
        max-width: 680px !important;
        border: none !important;
        border-top: 6px solid var(--theme-primary) !important;
        padding: 36px 42px !important;
        text-align: center;
        background: var(--bg-card);
    }

    #host-modal .host-modal-content>div:first-child {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #host-header-title {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
        font-size: 2rem !important;
        color: var(--text-main);
    }

    #host-modal .host-modal-content>div:first-child>div:nth-child(2),
    #host-modal .host-modal-content>div:first-child>button {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       5. FEATURE MODULES (CLASS PORTAL, AUDIT SYSTEM, BIOMETRICS)
       ========================================================================== */
    /* --- 5.1 Class Portal Dashboard Layout --- */
    .class-portal-layout {
        display: flex;
        height: 100vh;
        overflow: hidden;
    }

    .class-sidebar {
        border-right: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        transition: width 0.3s var(--ease-smooth);
        z-index: 100;
    }

    [dir="rtl"] .class-sidebar {
        border-right: none;
        border-left: 1px solid var(--border-color);
    }

    .class-sidebar-header {
        padding: 20px;
        text-align: center;
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .class-sidebar-header img {
        max-height: 48px;
        max-width: 100%;
    }

    .class-nav {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .class-nav-link {
        text-decoration: none;
        border-left: 4px solid transparent;
        transition: all 0.2s var(--ease-spring);
        display: none;
    }

    [dir="rtl"] .class-nav-link {
        border-left: none;
        border-right: 4px solid transparent;
    }

    .class-nav-link:hover,
    .class-nav-link.active {
        background-color: rgba(13, 71, 161, 0.08);
        border-left-color: var(--theme-primary);
    }

    [dir="rtl"] .class-nav-link:hover,
    [dir="rtl"] .class-nav-link.active {
        border-right-color: var(--theme-primary);
        transform: translateX(-3px);
    }

    [data-theme="dark"] .class-nav-link:hover,
    [data-theme="dark"] .class-nav-link.active {
        background-color: rgba(255, 255, 255, 0.06);
    }

    /* ==========================================
       PROMINENT YEAR TRANSITIONS STYLING
       ========================================== */
    #nav-transitions.class-nav-link {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(234, 88, 12, 0.18) 100%);
        border: 1.5px solid rgba(245, 158, 11, 0.45);
        border-left: 5px solid var(--theme-warning, #f59e0b);
        color: var(--text-main);
        font-weight: 800;
        box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
        margin-top: 10px;
        position: relative;
        letter-spacing: 0.2px;
    }

    [dir="rtl"] #nav-transitions.class-nav-link {
        border-left: 1.5px solid rgba(245, 158, 11, 0.45);
        border-right: 5px solid var(--theme-warning, #f59e0b);
    }

    #nav-transitions.class-nav-link:hover,
    #nav-transitions.class-nav-link.active {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.24) 0%, rgba(234, 88, 12, 0.32) 100%);
        border-color: var(--theme-warning, #f59e0b);
        border-left-color: #d97706;
        color: #b45309;
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
        transform: translateX(4px);
    }

    [dir="rtl"] #nav-transitions.class-nav-link:hover,
    [dir="rtl"] #nav-transitions.class-nav-link.active {
        border-right-color: #d97706;
        transform: translateX(-4px);
    }

    [data-theme="dark"] #nav-transitions.class-nav-link {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(234, 88, 12, 0.26) 100%);
        border-color: rgba(245, 158, 11, 0.55);
        color: #fbbf24;
    }

    [data-theme="dark"] #nav-transitions.class-nav-link:hover,
    [data-theme="dark"] #nav-transitions.class-nav-link.active {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.32) 0%, rgba(234, 88, 12, 0.4) 100%);
        color: #fef3c7;
        box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4);
    }

    .transitions-admin-banner {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
        border: 1px solid rgba(245, 158, 11, 0.35);
        border-left: 5px solid var(--theme-warning, #f59e0b);
        color: var(--text-main);
        padding: 14px 20px;
        border-radius: var(--radius-md, 10px);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    [dir="rtl"] .transitions-admin-banner {
        border-left: 1px solid rgba(245, 158, 11, 0.35);
        border-right: 5px solid var(--theme-warning, #f59e0b);
    }

    .foolproof-checkbox-group {
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .foolproof-checkbox-group label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.9rem;
        color: var(--text-main);
        cursor: pointer;
        line-height: 1.4;
        user-select: none;
    }

    .foolproof-checkbox-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        cursor: pointer;
        accent-color: var(--theme-warning, #f59e0b);
    }

    .class-main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .class-topbar {
        min-height: 72px;
        height: auto;
        backdrop-filter: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        box-shadow: none;
    }

    .class-viewport {
        flex: 1;
        overflow-y: auto;
    }

    .class-view-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .class-detail-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        gap: 15px;
    }

    .class-view-title {
        color: var(--theme-primary);
        margin: 0;
        font-weight: 800;
    }

    .class-list-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .class-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .class-detail-grid > .detail-card--wide {
        grid-column: span 2;
    }

    @media (max-width: 900px) {
        .class-detail-grid > .detail-card--wide {
            grid-column: auto;
        }
    }

    .btn-class-back {
        background: var(--bg-panel);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        padding: 6px 18px;
        border-radius: var(--radius-sm);
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s var(--ease-spring);
    }

    .btn-class-back:hover {
        border-color: var(--theme-primary);
        transform: translateY(-1px);
    }

    /* --- 5.2 Modern Audit Logs & Retention UI --- */
    .audit-retention-box {
        width: 100%;
        box-sizing: border-box;
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .audit-retention-box:hover {
        border-color: rgba(220, 53, 69, 0.6);
        box-shadow: 0 6px 24px rgba(220, 53, 69, 0.1);
    }

    .btn-audit-refresh {
        margin: 0 !important;
        white-space: nowrap;
        height: 42px;
        padding: 0 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 0.9rem;
        border-radius: 10px;
        background: var(--theme-primary, #0D47A1);
        color: #ffffff !important;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(13, 71, 161, 0.25);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        justify-content: center;
    }

    .btn-audit-refresh:hover {
        background: var(--theme-primary);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(13, 71, 161, 0.35);
    }

    .btn-audit-refresh:hover .refresh-icon {
        transform: rotate(180deg);
    }

    .btn-audit-refresh .refresh-icon {
        display: inline-block;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .btn-audit-refresh:active {
        transform: scale(0.96);
    }

    .btn-audit-page {
        margin: 0 !important;
        padding: 8px 16px;
        height: 38px;
        font-size: 0.85rem;
        font-weight: 700;
        border-radius: 10px;
        background: var(--bg-card);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        justify-content: center;
    }

    .btn-audit-page:hover:not(:disabled) {
        background: var(--theme-primary);
        color: #ffffff;
        border-color: var(--theme-primary);
        box-shadow: 0 4px 12px rgba(13, 71, 161, 0.2);
    }

    .btn-audit-page:active:not(:disabled) {
        transform: scale(0.96);
    }

    .btn-audit-page:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }

    .btn-audit-danger {
        margin: 0 !important;
        white-space: nowrap;
        height: 42px;
        padding: 10px 18px;
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: #ffffff !important;
        border: none;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        justify-content: center;
    }

    .btn-audit-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
        filter: brightness(1.08);
    }

    .btn-audit-danger:active {
        transform: scale(0.96);
    }

    /* --- 5.3 Biometrics & Strict Webcam Modal --- */
    .face-enrollment-layout {
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
    }

    #face-webcam-modal .modal-content {
        max-width: 500px !important;
        width: 90% !important;
        margin: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 85vh !important;
        overflow: hidden !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #face-webcam-modal .face-enrollment-layout {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: 50vh;
        background: #000;
        margin-bottom: 15px !important;
        overflow: hidden !important;
        border-radius: var(--radius-sm);
    }

    #face-webcam-modal video {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        object-fit: cover !important;
        display: block !important;
    }

    #face-webcam-modal button {
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       6. HIERARCHICAL RESPONSIVE BREAKPOINTS
       ========================================================================== */
    #user-name-display,
    .header h1,
    .class-topbar h1 {
        word-break: break-word !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 42px;
    }

    /* ==========================================================================
       7. APP PRELOADER & SEAMLESS TRANSITIONS
       ========================================================================== */
    .app-preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .app-preloader.hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .preloader-spinner {
        width: 44px;
        height: 44px;
        border: 3.5px solid rgba(125, 125, 125, 0.2);
        border-radius: 50%;
        animation: preloaderSpin 0.75s linear infinite;
    }

    .preloader-text {
        color: var(--text-main, #333333);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        opacity: 0.85;
    }

    @keyframes preloaderSpin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ==========================================================================
       8. AUDIT LOGS DASHBOARD & CONTROLS
       ========================================================================== */

    .audit-retention-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 240px;
    }

    .btn-audit-danger:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    }

    .btn-audit-danger:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-audit-refresh:hover {
        transform: translateY(-2px);
    }

    .btn-audit-page:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    /* ==========================================================================
       QR Code Builder Swatches
       ========================================================================== */
    .qr-swatch-item {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid var(--border-color);
        box-sizing: border-box;
        display: inline-block;
    }

    .qr-swatch-black {
        background: #000000;
    }

    .qr-swatch-white {
        background: #FFFFFF;
    }

    .qr-swatch-orange {
        background: #FF7900;
    }

    .qr-swatch-cyan {
        background: #06B6D4;
    }

    .qr-swatch-green {
        background: #10B981;
    }

    .qr-swatch-purple {
        background: #8B5CF6;
    }

    .qr-swatch-dark {
        background: #0B0F17;
    }

    .qr-swatch-navy {
        background: #1E293B;
    }

    /* ==========================================================================
       18. FAMILIES & FAMILY TREE PORTAL
       ========================================================================== */
    /* Main Layout Grid */
    .families-layout {
        display: grid;
        grid-template-columns: 360px 1fr;
        height: calc(100vh - 75px);
        height: calc(100dvh - 75px);
        overflow: hidden;
        background: var(--bg-body);
    }

    /* Sidebar: Family Directory */
    .families-sidebar {
        background: var(--bg-panel);
        border-inline-end: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        position: relative;
        z-index: 10;
    }

    .families-sidebar-header {
        padding: 16px 20px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .families-sidebar-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .families-kpi-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px 16px;
        background: rgba(13, 71, 161, 0.04);
        border-bottom: 1px solid var(--border-color);
    }

    .families-kpi-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        background: var(--bg-card);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .families-kpi-val {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--theme-primary);
    }

    .families-kpi-lbl {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 600;
    }

    .families-search-box {
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-color);
    }

    .families-list-container {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Family List Item Card */
    .family-list-card {
        padding: 12px 16px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;
    }

    .family-list-card:hover {
        transform: translateY(-2px);
        border-color: var(--theme-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .family-list-card.active {
        border-color: var(--theme-primary);
        background: rgba(13, 71, 161, 0.05);
        box-shadow: 0 0 0 2px var(--theme-primary);
    }

    .family-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .family-card-title {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-main);
    }

    .family-card-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        font-size: 0.75rem;
    }

    .family-badge {
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .family-badge-students {
        background: rgba(40, 167, 69, 0.12);
        color: var(--basic-darkgreen-2);
    }

    .family-badge-members {
        background: rgba(111, 66, 193, 0.12);
        color: var(--theme-secondary);
    }

    .family-card-meta {
        font-size: 0.8rem;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Canvas Area: Visual Family Tree */
    .families-canvas-area {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: var(--bg-body);
    }

    /* Tree Controls Top Bar - Modernized */
    .tree-toolbar {
        min-height: 60px;
        padding: 8px 20px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        z-index: 5;
        flex-shrink: 0;
        flex-wrap: wrap;
    }

    .tree-toolbar-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 800;
        font-size: 1.15rem;
        color: var(--theme-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    /* Modern segmented zoom control pill */
    .tree-zoom-pill-group {
        display: inline-flex;
        align-items: center;
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: 30px;
        padding: 3px;
        gap: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .tree-zoom-pill-btn {
        border: none;
        background: transparent;
        color: var(--text-main);
        font-size: 0.85rem;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tree-zoom-pill-btn:hover {
        background: var(--bg-card);
        color: var(--theme-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .tree-zoom-pill-btn:active {
        transform: scale(0.95);
    }

    .tree-tool-btn {
        padding: 8px 14px;
        background: var(--bg-card);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    }

    .tree-tool-btn:hover {
        background: var(--bg-panel);
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .tree-tool-btn:active {
        transform: translateY(0);
    }

    .tree-tool-btn-primary {
        background: linear-gradient(135deg, var(--theme-primary), var(--basic-blue)) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(13, 71, 161, 0.25) !important;
    }

    .tree-tool-btn-primary:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(13, 71, 161, 0.35) !important;
        color: #ffffff !important;
    }

    /* Interactive Viewport / Canvas */
    .tree-viewport {
        flex: 1;
        overflow: auto;
        position: relative;
        cursor: grab;
        user-select: none;
        background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
        background-size: 24px 24px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 40px;
    }

    .tree-viewport:active,
    .tree-viewport.grabbing {
        cursor: grabbing;
    }

    .tree-canvas-wrapper {
        position: relative;
        min-width: 900px;
        width: max-content;
        margin: 0 auto;
        transform-origin: center top;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    /* Tree Generations / Tiers - In-flow header to prevent sidebar overlap */
    .tree-tier {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        position: relative;
        width: 100%;
        z-index: 2;
    }

    .tree-tier-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        position: relative;
        width: 100%;
        flex-wrap: wrap;
    }

    .tree-tier-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        background: var(--bg-card);
        padding: 6px 16px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* Marital Unit (Spouses linked horizontally: Husband on Left, Wife on Right) */
    .marital-pair {
        display: flex;
        direction: ltr !important;
        align-items: center;
        gap: 16px;
        position: relative;
        padding: 10px 14px;
        border-radius: 16px;
        background: rgba(13, 71, 161, 0.03);
        border: 1px dashed var(--border-color);
        transition: all 0.22s ease;
    }

    html[dir="rtl"] .marital-pair .tree-node-card {
        direction: rtl;
        text-align: right;
    }

    html[dir="ltr"] .marital-pair .tree-node-card {
        direction: ltr;
        text-align: left;
    }

    .marital-ring-connector {
        font-size: 1.2rem;
        color: var(--theme-secondary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: relative;
        padding: 0 4px;
    }

    /* Tree Node Card */
    .tree-node-card {
        width: 250px;
        box-sizing: border-box;
        background: var(--bg-card);
        border: 1.5px solid var(--border-color);
        border-radius: 14px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        cursor: default;
    }

    .tree-node-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
        border-color: var(--theme-primary);
    }

    .tree-node-card.is-dragging,
    .marital-pair.is-dragging {
        transition: none !important;
        z-index: 100 !important;
        cursor: grabbing !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25) !important;
        opacity: 0.95;
    }

    /* Role Color Themes */
    .tree-node-card.role-grandparent {
        border-top: 4px solid #b8860b;
    }

    .tree-node-card.role-parent {
        border-top: 4px solid var(--theme-primary);
    }

    .tree-node-card.role-adult {
        border-top: 4px solid var(--theme-secondary);
    }

    .tree-node-card.role-student {
        border-top: 4px solid var(--theme-success);
    }

    .tree-node-card.role-group {
        border-top: 4px solid var(--theme-success);
    }

    .tree-node-card.role-subgroup {
        border-top: 4px solid var(--theme-info);
    }

    .tree-node-card.role-classgroup {
        border-top: 4px solid var(--theme-primary);
    }

    .tree-node-card.role-class {
        border-top: 4px solid var(--theme-secondary);
    }

    .tree-node-card.tree-match-highlight {
        outline: 3px solid var(--theme-warning);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
        transform: translateY(-4px) scale(1.03);
        z-index: 10;
    }

    .tree-node-card.tree-dimmed {
        opacity: 0.3;
        filter: grayscale(0.6);
        pointer-events: none;
    }

    /* Node Header: Avatar + Identity */
    .node-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .node-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--border-light);
        border: 2px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .node-info {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .node-name {
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .node-role-badge {
        font-size: 0.72rem;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 6px;
        display: inline-block;
        width: fit-content;
        margin-top: 2px;
    }

    .node-role-badge.grandparent {
        background: rgba(184, 134, 11, 0.15);
        color: #8a6404;
    }

    .node-role-badge.parent {
        background: rgba(13, 71, 161, 0.12);
        color: var(--theme-primary);
    }

    .node-role-badge.adult {
        background: rgba(111, 66, 193, 0.12);
        color: var(--theme-secondary);
    }

    .node-role-badge.student {
        background: rgba(40, 167, 69, 0.15);
        color: var(--basic-darkgreen-2);
    }

    .node-role-badge.group {
        background: rgba(40, 167, 69, 0.15);
        color: var(--basic-darkgreen-2);
    }

    .node-role-badge.subgroup {
        background: rgba(23, 162, 184, 0.15);
        color: #117a8b;
    }

    .node-role-badge.classgroup {
        background: rgba(13, 71, 161, 0.12);
        color: var(--theme-primary);
    }

    .node-role-badge.class {
        background: rgba(111, 66, 193, 0.12);
        color: var(--theme-secondary);
    }

    /* Node Body Details */
    .node-details {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 0.82rem;
        color: var(--text-muted);
        border-top: 1px solid var(--border-light);
        padding-top: 8px;
    }

    .node-detail-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .node-phone-box {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: monospace;
        font-size: 0.85rem;
        color: var(--text-main);
        font-weight: 600;
        direction: ltr;
        unicode-bidi: isolate;
    }

    .node-phone-box bdi,
    .family-card-phone,
    .family-card-phone bdi,
    input[type="tel"] {
        direction: ltr !important;
        unicode-bidi: isolate;
    }

    .node-copy-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 0.85rem;
        transition: background 0.15s ease;
    }

    .node-copy-btn:hover {
        background: var(--border-color);
    }

    .node-map-link {
        color: var(--basic-blue);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        font-size: 0.8rem;
    }

    .node-map-link:hover {
        text-decoration: underline;
    }

    /* Node Contextual Actions (Hover Toolbar) */
    .node-actions-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border-light);
        width: 100%;
        box-sizing: border-box;
    }

    .node-action-btn {
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background: var(--bg-panel);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
        box-sizing: border-box;
        flex: 0 1 auto;
        max-width: 100%;
    }

    .node-action-btn:hover {
        background: var(--theme-primary);
        color: white;
        border-color: var(--theme-primary);
    }

    /* SVG Connecting Lines Overlay */
    .tree-svg-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: visible !important;
    }

    .tree-branch-line {
        fill: none;
        stroke: var(--theme-primary);
        stroke-width: 2.5;
        stroke-linecap: round;
        opacity: 0.45;
        transition: stroke 0.3s ease;
    }

    .tree-branch-line.highlighted {
        stroke-width: 3.5;
        opacity: 0.95;
        filter: drop-shadow(0 0 6px var(--theme-primary));
    }

    /* Rebuild Modal & Preview Table */
    .rebuild-preview-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        font-size: 0.9rem;
    }

    .rebuild-preview-table th {
        background: var(--bg-panel);
        color: var(--text-muted);
        font-weight: 700;
        padding: 10px 12px;
        text-align: start;
        border-bottom: 2px solid var(--border-color);
    }

    .rebuild-preview-table td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .rebuild-status-pill {
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.78rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .rebuild-status-pill.success {
        background: rgba(40, 167, 69, 0.15);
        color: var(--basic-darkgreen-2);
    }

    .rebuild-status-pill.warning {
        background: rgba(255, 193, 7, 0.2);
        color: #856404;
    }

    /* ==========================================================================
       LMS END OF YEAR TRANSITIONS & PROMOTIONS
       ========================================================================== */
    .transitions-stepper {
        display: flex;
        align-items: center;
        gap: 15px;
        background: var(--bg-card);
        padding: 16px 24px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        flex-wrap: wrap;
    }

    .stepper-step {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-muted);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .stepper-step.active {
        color: var(--theme-primary);
    }

    .stepper-step.completed {
        color: var(--theme-success);
    }

    .stepper-num {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--bg-panel);
        border: 2px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.9rem;
        transition: all 0.2s ease;
    }

    .stepper-step.active .stepper-num {
        background: var(--theme-primary);
        border-color: var(--theme-primary);
        color: #fff;
    }

    .stepper-step.completed .stepper-num {
        background: var(--theme-success);
        border-color: var(--theme-success);
        color: #fff;
    }

    .stepper-divider {
        flex: 1;
        height: 2px;
        background: var(--border-color);
        min-width: 30px;
    }

    .transitions-kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }

    .transitions-kpi-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    .transitions-kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--kpi-color, var(--theme-primary));
    }

    .transitions-kpi-val {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1;
    }

    .transitions-kpi-lbl {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 600;
    }

    /* Badge Hierarchy #0.0.0.0 */
    .badge-hierarchy {
        font-family: monospace, 'Courier New', Courier;
        font-size: 0.82rem;
        font-weight: 700;
        background: rgba(13, 71, 161, 0.1);
        color: var(--theme-primary);
        padding: 3px 8px;
        border-radius: 6px;
        border: 1px solid rgba(13, 71, 161, 0.25);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Class Progression Flow Cards */
    .class-flow-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 16px;
    }

    .class-flow-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: var(--shadow-sm);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .class-flow-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .class-flow-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
    }

    .class-flow-route {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--bg-panel);
        padding: 10px 14px;
        border-radius: 8px;
    }

    .class-flow-arrow {
        font-size: 1.2rem;
        color: var(--theme-primary);
    }

    /* Revision Table */
    .transitions-revision-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 10px;
    }

    .transitions-revision-table th {
        background: var(--bg-panel);
        color: var(--text-muted);
        font-weight: 700;
        padding: 12px 14px;
        text-align: start;
        border-bottom: 2px solid var(--border-color);
        font-size: 0.88rem;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .transitions-revision-table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.9rem;
        vertical-align: middle;
    }

    .table-revision-row {
        transition: background-color 0.15s ease;
    }

    .table-revision-row:hover {
        background-color: rgba(13, 71, 161, 0.03);
    }

    .table-revision-row.retained {
        background-color: rgba(220, 53, 69, 0.05);
    }

    .table-revision-row.unassigned {
        background-color: rgba(255, 193, 7, 0.08);
    }

    .table-revision-row.graduated {
        background-color: rgba(40, 167, 69, 0.05);
    }

    /* Action Badges */
    .badge-action {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .badge-action-promote {
        background: rgba(40, 167, 69, 0.15);
        color: var(--basic-darkgreen-2);
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .badge-action-graduate {
        background: rgba(13, 71, 161, 0.15);
        color: var(--theme-primary);
        border: 1px solid rgba(13, 71, 161, 0.3);
    }

    .badge-action-retained {
        background: rgba(220, 53, 69, 0.15);
        color: var(--theme-danger);
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    .badge-action-unassigned {
        background: rgba(255, 193, 7, 0.2);
        color: #856404;
        border: 1px solid rgba(255, 193, 7, 0.4);
    }

    /* Sticky Action Bar */
    .sticky-commit-bar {
        position: sticky;
        bottom: 20px;
        background: var(--bg-card);
        padding: 16px 24px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        z-index: var(--z-low1);
        flex-wrap: wrap;
    }

    /* Archive & Clear Interface */
    .archive-purge-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .archive-stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }

    .archive-stat-card {
        background: var(--bg-panel);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .archive-stat-icon {
        font-size: 2rem;
    }

    .archive-stat-num {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--text-main);
    }

    .danger-confirm-box {
        background: rgba(220, 53, 69, 0.06);
        border: 1px solid rgba(220, 53, 69, 0.3);
        border-radius: 12px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* ==========================================================================
       LMS HIERARCHY TABS, COLLAPSIBLE CARDS & TREE VIEW
       ========================================================================== */
    .hierarchy-tabs-nav {
        display: inline-flex;
        background: var(--bg-panel);
        padding: 4px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        gap: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .hierarchy-tab-btn {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.88rem;
        font-weight: 600;
        padding: 7px 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .hierarchy-tab-btn:hover {
        color: var(--text-main);
        background: rgba(0, 0, 0, 0.03);
    }

    .hierarchy-tab-btn.active {
        background: var(--theme-primary);
        color: var(--basic-white) !important;
        box-shadow: 0 2px 6px rgba(13, 71, 161, 0.25);
    }

    /* Collapsible Card Elements in Hierarchy View */
    .hier-card-collapse-btn {
        background: var(--bg-body);
        color: var(--text-muted);
        border: 1px solid var(--border-light);
        border-radius: 5px;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.72rem;
        transition: all 0.2s ease;
        flex-shrink: 0;
        user-select: none;
    }

    .hier-card-collapse-btn:hover {
        background: var(--bg-panel);
        color: var(--theme-primary);
        border-color: var(--theme-primary);
    }

    .hier-card-collapsed .hier-card-collapsible-target {
        display: none !important;
    }

    .hier-card-collapsed .hier-card-collapse-btn .chevron-icon {
        display: inline-block;
        transform: rotate(-90deg);
    }

    [dir="rtl"] .hier-card-collapsed .hier-card-collapse-btn .chevron-icon {
        transform: rotate(90deg);
    }

    .hier-summary-pill {
        display: none;
        font-size: 0.76rem;
        background: var(--bg-body);
        color: var(--text-muted);
        padding: 2px 8px;
        border-radius: 12px;
        border: 1px solid var(--border-light);
        font-weight: 500;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .hier-card-collapsed .hier-summary-pill {
        display: inline-flex;
    }

    /* Tree View Styles */
    .tree-highlight-match {
        background: rgba(255, 193, 7, 0.4);
        border-radius: 2px;
        padding: 0 2px;
        font-weight: bold;
    }

    /* LMS Hierarchy Canvas Single-Row Tier Layout */
    #hierarchy-tree-canvas-wrapper {
        width: max-content;
        min-width: 900px;
        margin: 0;
        direction: ltr !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    #hierarchy-tree-canvas-wrapper .tree-tier {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    #hierarchy-tree-canvas-wrapper .tree-tier-content {
        display: flex;
        flex-wrap: nowrap !important;
        justify-content: center;
        align-items: center;
        gap: 36px;
        width: 100%;
    }

    .tree-branch-column {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .tree-node-placeholder {
        display: block;
        height: 1px;
        visibility: hidden;
        pointer-events: none;
        flex-shrink: 0;
    }

    #hierarchy-tree-canvas-wrapper .tree-node-card {
        cursor: grab;
        user-select: none;
    }

    #hierarchy-tree-canvas-wrapper .tree-node-card:active {
        cursor: grabbing;
    }

    #hierarchy-tree-canvas-wrapper .tree-node-card.is-dragging {
        cursor: grabbing !important;
        z-index: 100 !important;
        transition: none !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25) !important;
    }

    #hierarchy-tree-canvas-wrapper .tree-node-card button,
    #hierarchy-tree-canvas-wrapper .tree-node-card a,
    #hierarchy-tree-canvas-wrapper .tree-node-card input,
    #hierarchy-tree-canvas-wrapper .tree-node-card select {
        cursor: pointer;
    }

    .tier-groups .tree-tier-label {
        border-inline-start: 4px solid var(--theme-success);
    }

    .tier-subgroups .tree-tier-label {
        border-inline-start: 4px solid var(--theme-info);
    }

    .tier-classgroups .tree-tier-label {
        border-inline-start: 4px solid var(--theme-primary);
    }

    .tier-classes .tree-tier-label {
        border-inline-start: 4px solid var(--theme-secondary);
    }

    /* Tree Top Toolbar Color Legend */
    .tree-legend-item {
        background: var(--bg-card);
        padding: 5px 12px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        font-weight: 700;
        color: var(--text-main);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        transition: transform 0.15s ease;
    }

    .tree-legend-item:hover {
        transform: translateY(-1px);
    }

    .tree-legend-item.group {
        border-inline-start: 4px solid var(--theme-success);
    }

    .tree-legend-item.subgroup {
        border-inline-start: 4px solid var(--theme-info);
    }

    .tree-legend-item.classgroup {
        border-inline-start: 4px solid var(--theme-primary);
    }

    .tree-legend-item.class {
        border-inline-start: 4px solid var(--theme-secondary);
    }

    .tree-legend-item .legend-val.group {
        color: var(--theme-success);
    }

    .tree-legend-item .legend-val.subgroup {
        color: var(--theme-info);
    }

    .tree-legend-item .legend-val.classgroup {
        color: var(--theme-primary);
    }

    .tree-legend-item .legend-val.class {
        color: var(--theme-secondary);
    }

    .tree-legend-item .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .tree-legend-item .legend-dot.group {
        background: var(--theme-success);
    }

    .tree-legend-item .legend-dot.subgroup {
        background: var(--theme-info);
    }

    .tree-legend-item .legend-dot.classgroup {
        background: var(--theme-primary);
    }

    .tree-legend-item .legend-dot.class {
        background: var(--theme-secondary);
    }

    /* Tree Node Add Choice Modal */
    .tree-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .tree-modal-content {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        width: 100%;
        max-width: 420px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
        text-align: center;
        animation: modalScaleIn 0.2s ease-out;
    }

    @keyframes modalScaleIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .tree-choice-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: var(--bg-panel);
        color: var(--text-main);
        font-weight: 600;
        cursor: pointer;
        text-align: start;
        width: 100%;
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .tree-choice-btn:hover {
        border-color: var(--theme-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    :where([data-portal="families"]) .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100000;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    /* ===== Tonal theme: app-shell overrides (from modern.css) ===== */
    .login-box {
        background: var(--bg-card);
        border: 0;
        border-radius: var(--radius-lg);
        padding: 40px 32px 34px;
    }

    .login-box:hover {
        box-shadow: var(--shadow-lg);
    }

    .login-box h2 {
        margin: 0 0 26px;
        font-size: 1.55rem;
        font-weight: 700;
        color: var(--text-main);
    }

    .login-nav-header {
        gap: 8px;
    }

    .login-nav-header button {
        height: 42px;
        min-width: 42px;
        padding: 0 16px;
        border-radius: 999px !important;
        border: 0 !important;
        background: var(--bg-card) !important;
        color: var(--m-on-tonal) !important;
        font-weight: 600;
        font-size: .92rem;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .login-nav-header button:hover {
        background: var(--m-tonal) !important;
        transform: none;
    }

    #login-or-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: .85rem;
        color: var(--text-muted);
    }

    #login-or-divider::before,
    #login-or-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

    .top-action-btn[data-icon] {
        --m-icon: var(--i-moon);
    }

    /* fallback: never draw an unmasked square */
    .top-action-btn[data-icon="🌙"],
    #login-theme-toggle {
        --m-icon: var(--i-moon);
    }

    .top-action-btn[data-icon^="☀"],
    #login-theme-toggle[data-icon^="☀"] {
        --m-icon: var(--i-sun);
    }

    .top-action-btn[data-icon="🌐"] {
        --m-icon: var(--i-globe);
    }

    .top-action-btn[data-icon="🚪"] {
        --m-icon: var(--i-logout);
    }

    .top-action-btn[data-icon="🏢"] {
        --m-icon: var(--i-building);
    }

    .top-action-btn[data-icon="🔑"] {
        --m-icon: var(--i-key);
    }

    [dir="rtl"] .top-action-btn[data-icon="🚪"]::before {
        transform: scaleX(-1);
    }

    /* ---------- 6. Dashboard shell & header ---------- */
    /* Full screen width (admin, gaming, personal/business CRM), like the LMS app shell */
    .dashboard-container {
        padding: 20px 32px 48px;
    }

    .header-ws-info {
        gap: 14px;
        flex: 1;
    }

    /* WS logo shown bare, like the ws selector: no tile/frame/rounding, so irregular PNG
       shapes keep styles.css's dark-mode glow (drop-shadow follows the logo's own outline) */
    #header-ws-logo {
        width: 48px;
        height: 48px;
        object-fit: contain;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
        flex-shrink: 0;
    }

    .header-ws-text {
        gap: 4px;
    }

    #ui-admin-ws-code {
        font: 600 .78rem/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace;
        padding: 1px 10px;
        border-radius: 999px;
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        white-space: nowrap;
        width: fit-content;
    }

    .header-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    #admin-user-container {
        padding-inline-end: 6px;
    }

    #admin-user-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        text-align: end;
    }

    #admin-login-method {
        font-size: .75rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    #admin-user-name {
        font-weight: 600;
        color: var(--text-main);
        font-size: .95rem;
    }

    #admin-user-separator {
        width: 1px;
        height: 28px;
        background: var(--border-color);
        margin-inline: 4px;
    }

    .top-action-btn:not(.btn-danger-icon):not(#logout-btn),
    .top-action-btn,
    #btn-change-ws.top-action-btn,
    #logout-btn,
    .top-action-btn.btn-danger-icon {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: var(--bg-card) !important;
        box-shadow: var(--shadow-sm) !important;
        transform: none !important;
    }

    .top-action-btn:hover,
    #btn-change-ws.top-action-btn:hover,
    .top-action-btn:not(.btn-danger-icon):not(#logout-btn):hover {
        background: var(--m-tonal) !important;
        box-shadow: none !important;
    }

    #logout-btn:hover,
    .top-action-btn.btn-danger-icon:hover {
        background: color-mix(in srgb, var(--theme-danger) 12%, transparent) !important;
        box-shadow: none !important;
    }

    /* ---------- 7. Tabs → tonal pill chips ---------- */
    .tabs {
        background: var(--bg-card);
        border: 0;
        border-radius: 999px;
    }

    .tabs .tab-btn {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        border-radius: 999px;
        padding: 10px 20px;
        font-size: .98rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .tabs .tab-btn:hover,
    [data-theme="dark"] .tabs .tab-btn:hover {
        color: var(--text-main);
        background: var(--bg-panel);
        transform: none;
    }

    .tabs .tab-btn.active {
        background: var(--m-tonal) !important;
        color: var(--m-on-tonal) !important;
        box-shadow: none;
    }

    .btn-action-sm {
        border-radius: 999px;
        font-weight: 600;
        font-size: .9rem;
        padding: 0 16px;
    }

    .btn-action-sm:hover {
        transform: none;
        box-shadow: none;
    }

    .btn-action-circle {
        width: 30px;
        height: 30px;
        min-height: 30px;
        min-width: 30px;
        max-width: 30px;
        padding: 0;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-main);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.15s ease;
        box-sizing: border-box;
        line-height: 1;
    }

    .btn-action-circle:hover:not(:disabled) {
        border-color: var(--theme-primary);
        filter: brightness(0.95);
    }

    .btn-edit,
    .delete-q-btn {
        border-radius: 999px;
        font-weight: 600;
        min-height: 36px;
        padding: 0 16px;
        background: color-mix(in srgb, var(--m-c) 13%, transparent);
        color: color-mix(in srgb, var(--m-c), var(--m-ink-mix) var(--m-ink-pct));
    }

    .btn-edit:hover,
    .delete-q-btn:hover {
        transform: none;
        background: color-mix(in srgb, var(--m-c) 22%, transparent);
        opacity: 1;
    }

    .btn-icon {
        border: 0;
        border-radius: 12px;
        background: var(--bg-panel);
        color: var(--m-on-tonal);
    }

    .btn-icon:hover {
        background: var(--m-tonal);
        transform: none;
    }

    .btn-upload {
        background: var(--theme-secondary);
        border-radius: 999px;
        font-weight: 600;
    }

    .btn-upload:hover:not(:disabled) {
        transform: none;
    }


    .btn-copy-modern {
        border-radius: 999px;
        border: 0;
        background: var(--bg-panel);
    }

    .btn-copy-modern:hover {
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        transform: none;
        box-shadow: none;
    }


    .modern-toggle {
        border: 0;
        background: var(--m-tonal-strong);
    }

    /* ---------- 10. Cards, lists, quiz & question items ---------- */
    .quiz-card {
        background: var(--bg-card);
        border: 0;
        border-radius: var(--radius-md);
        padding: 20px 22px;
    }

    .quiz-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .quiz-title {
        font-size: 1.18rem;
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }

    .quiz-title>span {
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--m-tonal) !important;
        color: var(--m-on-tonal) !important;
        font-weight: 600;
        padding: 3px 10px !important;
    }

    .quiz-info {
        font-size: .9rem;
    }

    .quiz-actions {
        border-top: 1px solid var(--border-light);
        gap: 8px;
    }

    .add-question-box {
        border: 0;
        border-radius: var(--radius-md);
    }

    .option-row {
        border-radius: var(--radius-sm);
        border: 1.5px dashed var(--border-color);
    }

    .q-item,
    [dir] .q-item {
        border: 0;
        border-inline-start: 4px solid var(--theme-primary);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        background: var(--bg-card);
    }

    .q-item:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .q-item-title {
        font-weight: 600;
        font-size: 1.05rem;
    }

    .q-type-badge {
        border: 0;
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        font-weight: 600;
    }

    .modal-content {
        background: var(--bg-card);
        border: 0;
        border-radius: var(--radius-lg);
    }

    /* ---------- 12. Tables ---------- */
    .table-container {
        border: 0;
        border-radius: var(--radius-sm);
        background: var(--bg-card);
    }

    .leaderboard-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .leaderboard-table thead,
    .leaderboard-table th {
        background: var(--bg-panel) !important;
        color: var(--text-muted) !important;
        font-weight: 600;
        font-size: .85rem;
        border: 0 !important;
    }

    .leaderboard-table td {
        border-color: var(--border-light) !important;
    }

    /* Bordered white boxes become borderless tonal cards */
    .dashboard-container :is([style*="background: var(--bg-card)"], .u-bg-bg-card):is([style*="border: 1px solid var(--border-color)"], .u-bd-1px-solid-border-color) {
        border-color: transparent !important;
        box-shadow: var(--shadow-sm) !important;
    }

    /* Grey panels lose their hairline border (the tint already separates them) */
    .dashboard-container :is([style*="background: var(--bg-panel)"], .u-bg-bg-panel):is([style*="border: 1px solid var(--border-color)"], .u-bd-1px-solid-border-color) {
        border-color: transparent !important;
    }

    /* ---------- 13b. LMS app shell (sidebar + topbar) ---------- */
    .class-portal-layout {
        background-color: var(--bg-body);
    }

    .class-sidebar,
    [dir="rtl"] .class-sidebar {
        background: var(--bg-card);
        backdrop-filter: none;
        border: 0;
        box-shadow: none;
        width: 248px;
    }

    .class-sidebar-header {
        border-bottom: 0;
    }

    .class-nav {
        padding: 6px 0 16px;
        gap: 2px;
    }

    .class-nav-link,
    [dir] .class-nav-link {
        border: 0;
        border-radius: 999px;
        margin: 0 12px;
        padding: 10px 18px;
        font-size: .95rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .class-nav-link:hover,
    [dir] .class-nav-link:hover,
    [data-theme="dark"] .class-nav-link:hover {
        background: var(--bg-panel);
        color: var(--text-main);
        transform: none;
    }

    .class-nav-link.active,
    [dir] .class-nav-link.active,
    [data-theme="dark"] .class-nav-link.active {
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        font-weight: 600;
        transform: none;
    }

    #nav-transitions.class-nav-link,
    [dir] #nav-transitions.class-nav-link {
        border-radius: 999px;
        transform: none;
    }

    .class-topbar {
        background: transparent;
        border-bottom: 0;
        padding: 18px 30px 6px;
    }

    .class-topbar h1,
    #ui-ws-name {
        font-size: 1.35rem;
        font-weight: 700;
    }

    #user-name-display {
        font-weight: 600 !important;
    }

    .class-viewport {
        padding: 18px 30px 40px;
    }

    .portal-view h2 {
        font-weight: 700;
    }

    /* ---------- 13c. Families app shell ---------- */
    [data-portal="families"] #dashboard-screen>.header {
        background: var(--bg-card) !important;
        border-bottom: 0 !important;
        box-shadow: var(--shadow-sm);
    }

    #ui-ws-name {
        letter-spacing: -0.015em !important;
    }

    [data-portal="families"] #header-ws-logo {
        width: 44px;
        height: 44px;
    }

    [data-portal="families"] .header .top-action-btn {
        background: var(--bg-panel) !important;
        box-shadow: none !important;
    }

    [data-portal="families"] .header .top-action-btn:hover {
        background: var(--m-tonal) !important;
    }

    /* ---------- LMS academic hierarchy (js/lms/lms-hierarchy.js) ----------
       Stage > grade > class group > class. Box styles that used to be set inline by the script. */
    .hier-node--stage {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 25px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .hier-node--grade {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-inline-start: 4px solid var(--theme-info);
        border-radius: 8px;
        overflow: hidden;
    }

    .hier-node--stage>.hier-card-collapsible-target>.hier-node__body {
        padding: 20px;
    }

    .hier-node--grade>.hier-card-collapsible-target>.hier-node__body {
        padding: 15px;
    }

    .hier-list {
        display: flex;
        min-height: 50px;
    }

    .hier-list--classes {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
        background: var(--bg-card);
    }

    .hier-list--direct {
        margin-bottom: 20px;
        padding: 5px;
        background: rgba(0, 0, 0, .01);
        border: 1px dashed transparent;
        border-radius: 8px;
    }

    .hier-list--nodes {
        flex-direction: column;
        gap: 15px;
        min-height: 60px;
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(0, 0, 0, .015);
        border: 1px dashed var(--border-color);
        border-radius: 8px;
    }

    /* Class card title: the hierarchy number never gets clipped, long names wrap */
    .hier-class__title {
        flex-wrap: wrap;
        row-gap: 4px;
        min-width: 0;
    }

    .hier-class__title .badge {
        flex: none;
        overflow: visible;
    }

    .hier-class__name {
        overflow-wrap: anywhere;
    }

    /* Short "+ Add" label, shown on phones only */
    .hier-lbl-short {
        display: none;
    }

    /* Responsive shell: the declarations that must stay !important (they fight inline display or
       another app-layer !important), kept here in the app layer; the rest lives in @layer overrides */
    .tabs>.tab-btn:not([style*="display: none"], [style*="display:none"]) {
        display: inline-flex !important;
    }

    @media (max-width: 1023.98px) {

        #admin-login-method,
        #admin-user-separator {
            display: none !important;
        }

        .top-action-btn {
            width: 40px !important;
            height: 40px !important;
        }

        .tabs {
            flex-wrap: nowrap !important;
            max-width: 100% !important;
        }

        .tabs>.tab-btn {
            flex: none !important;
        }

        .filter-toolbar,
        .audit-filter-toolbar {
            display: grid !important;
        }

        .modal-content {
            max-width: min(92vw, 760px) !important;
        }

        table[data-rt="cards"]>tbody>tr>td[data-actions]>div {
            display: flex !important;
        }

    }

    @media (max-width: 639.98px) {

        .header,
        .class-topbar {
            background: color-mix(in srgb, var(--bg-body) 90%, transparent) !important;
            border: 0 !important;
        }

        .ui-header-actions {
            display: none !important;
        }

        .tabs {
            width: auto !important;
            max-width: none !important;
            padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
            gap: 4px !important;
            justify-content: space-around !important;
        }

        .tabs>.tab-btn {
            flex: 1 1 0 !important;
        }

        .tabs>.tab-btn.active {
            background: var(--m-tonal) !important;
            color: var(--m-on-tonal) !important;
        }

        .class-portal-layout[style*="display: none"] {
            display: none !important;
        }

        [data-ui-filters] {
            display: grid !important;
        }

        [data-ui-filters]:not(.is-expanded)> :not([data-filter-keep], .ui-filter-toggle) {
            display: none !important;
        }

        .modal-content {
            position: fixed !important;
            width: 100% !important;
            max-width: none !important;
            max-height: 92dvh !important;
            margin: 0 !important;
            overflow-y: auto !important;
            padding: 22px 16px calc(24px + env(safe-area-inset-bottom)) !important;
        }

        .families-layout[data-pane="list"]>.families-canvas-area,
        .families-layout[data-pane="tree"]>.families-sidebar {
            display: none !important;
        }

    }
}

@layer overrides {

    /* ==========================================================================
       RESPONSIVE SHELL — three distinct layouts
         desktop ≥ 1024px : the layout above (unchanged)
         tablet  640–1023 : compact header, scrolling tab chips, LMS icon rail, 2-column forms
         phone   < 640px  : sticky app bar + menu, bottom navigation, LMS drawer,
                            tables as cards, filters behind a toggle, modals as bottom sheets
       Controls marked .ui-* are added by js/ui-responsive.js.
       This layer sits above "app" and "utilities", so these rules win without !important.
       The few declarations that still need it (inline display, legacy !important) are kept
       at the end of the app layer, just above.
       ========================================================================== */
    /* Phone header menu built by js/ui-responsive.js (hidden on wider screens) */
    .ui-menu {
        display: none;
    }


    /* ---------- Button icons (js/ui-responsive.js) ----------
       Action emojis inside buttons become line icons in the button's own text colour. The emoji is kept
       in the span at zero size, so scripts that read a button label still see it. */
    :root {
        --bi-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
        --bi-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
        --bi-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
        --bi-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
        --bi-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
        --bi-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
        --bi-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9M7 14l5-5 5 5M5 3h14'/%3E%3C/svg%3E");
        --bi-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
        --bi-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
        --bi-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
        --bi-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
        --bi-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 12 0v1M16 4a4 4 0 0 1 0 8M22 21v-1a6 6 0 0 0-4-5.7'/%3E%3C/svg%3E");
        --bi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
        --bi-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
        --bi-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
        --bi-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h2l2-3h6l2 3h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
        --bi-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
        --bi-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E");
        --bi-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-8M22 20H2'/%3E%3C/svg%3E");
        --bi-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E");
        --bi-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.9 4.9 7 7M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
        --bi-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
        --bi-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 3'/%3E%3C/svg%3E");
        --bi-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.5 7-12a7 7 0 0 0-14 0c0 4.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
        --bi-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
        --bi-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
        --bi-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
        --bi-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
        --bi-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
        --bi-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");
        --bi-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
        --bi-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E");
        --bi-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.3L12 17.5l-5.6 2.9 1.1-6.3L3 9.7l6.2-.9z'/%3E%3C/svg%3E");
        --bi-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3h16v18l-3-2-3 2-2-2-2 2-3-2-3 2z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
        --bi-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
        --bi-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
        --bi-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E");
        --bi-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 9v12h14V9'/%3E%3C/svg%3E");
        --bi-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");
        --bi-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E");
    }

    .ui-bi {
        display: inline-block;
        flex: none;
        width: 17px;
        height: 17px;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        vertical-align: -3px;
        background: currentColor;
        -webkit-mask: var(--bi) center / contain no-repeat;
        mask: var(--bi) center / contain no-repeat;
    }

    .ui-bi[data-i="save"] {
        --bi: var(--bi-save);
    }

    .ui-bi[data-i="trash"] {
        --bi: var(--bi-trash);
    }

    .ui-bi[data-i="x"] {
        --bi: var(--bi-x);
    }

    .ui-bi[data-i="refresh"] {
        --bi: var(--bi-refresh);
    }

    .ui-bi[data-i="edit"] {
        --bi: var(--bi-edit);
    }

    .ui-bi[data-i="download"] {
        --bi: var(--bi-download);
    }

    .ui-bi[data-i="upload"] {
        --bi: var(--bi-upload);
    }

    .ui-bi[data-i="send"] {
        --bi: var(--bi-send);
    }

    .ui-bi[data-i="clipboard"] {
        --bi: var(--bi-clipboard);
    }

    .ui-bi[data-i="folder"] {
        --bi: var(--bi-folder);
    }

    .ui-bi[data-i="eye"] {
        --bi: var(--bi-eye);
    }

    .ui-bi[data-i="users"] {
        --bi: var(--bi-users);
    }

    .ui-bi[data-i="check"] {
        --bi: var(--bi-check);
    }

    .ui-bi[data-i="left"] {
        --bi: var(--bi-left);
    }

    .ui-bi[data-i="right"] {
        --bi: var(--bi-right);
    }

    .ui-bi[data-i="camera"] {
        --bi: var(--bi-camera);
    }

    .ui-bi[data-i="lock"] {
        --bi: var(--bi-lock);
    }

    .ui-bi[data-i="key"] {
        --bi: var(--bi-key);
    }

    .ui-bi[data-i="chart"] {
        --bi: var(--bi-chart);
    }

    .ui-bi[data-i="book"] {
        --bi: var(--bi-book);
    }

    .ui-bi[data-i="settings"] {
        --bi: var(--bi-settings);
    }

    .ui-bi[data-i="stop"] {
        --bi: var(--bi-stop);
    }

    .ui-bi[data-i="history"] {
        --bi: var(--bi-history);
    }

    .ui-bi[data-i="pin"] {
        --bi: var(--bi-pin);
    }

    .ui-bi[data-i="link"] {
        --bi: var(--bi-link);
    }

    .ui-bi[data-i="minus"] {
        --bi: var(--bi-minus);
    }

    .ui-bi[data-i="search"] {
        --bi: var(--bi-search);
    }

    .ui-bi[data-i="calendar"] {
        --bi: var(--bi-calendar);
    }

    .ui-bi[data-i="package"] {
        --bi: var(--bi-package);
    }

    .ui-bi[data-i="map"] {
        --bi: var(--bi-map);
    }

    .ui-bi[data-i="card"] {
        --bi: var(--bi-card);
    }

    .ui-bi[data-i="warning"] {
        --bi: var(--bi-warning);
    }

    .ui-bi[data-i="star"] {
        --bi: var(--bi-star);
    }

    .ui-bi[data-i="ticket"] {
        --bi: var(--bi-ticket);
    }

    .ui-bi[data-i="mail"] {
        --bi: var(--bi-mail);
    }

    .ui-bi[data-i="zap"] {
        --bi: var(--bi-zap);
    }

    .ui-bi[data-i="print"] {
        --bi: var(--bi-print);
    }

    .ui-bi[data-i="home"] {
        --bi: var(--bi-home);
    }

    .ui-bi[data-i="ban"] {
        --bi: var(--bi-ban);
    }

    .ui-bi[data-i="globe"] {
        --bi: var(--i-globe);
    }

    .ui-bi[data-i="logout"] {
        --bi: var(--i-logout);
    }

    .ui-menu-btn,
    .ui-drawer-btn,
    .ui-drawer-backdrop,
    .ui-filter-toggle,
    .ui-pane-switch {
        display: none;
    }

    /* Icon + label split (nav links and tabs) */
    .ui-ico {
        flex: none;
        line-height: 1;
    }

    .ui-lbl {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Letter stand-in for labels without an emoji: only shown in the LMS icon rail (tablet) */
    .ui-ico--letter {
        display: none;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        font-size: .9rem;
        font-weight: 700;
    }

    .tabs>.tab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45em;
        white-space: nowrap;
    }

    /* Scripts reveal role-gated tabs with style.display = 'block' / 'inline-block' */
    .class-nav>.class-nav-link {
        display: flex;
        align-items: center;
        gap: .6em;
    }

    /* Round icon buttons added by the helper (same look as the header icon buttons) */
    .ui-menu-btn,
    .ui-drawer-btn {
        flex: none;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 999px;
        background: var(--bg-card);
        color: var(--m-on-tonal);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .ui-menu-btn::before,
    .ui-drawer-btn::before {
        content: '';
        width: 20px;
        height: 20px;
        background: currentColor;
        -webkit-mask: var(--m-icon) center / contain no-repeat;
        mask: var(--m-icon) center / contain no-repeat;
    }

    .ui-menu-btn {
        --m-icon: var(--i-dots);
    }

    .ui-drawer-btn {
        --m-icon: var(--i-menu);
    }

    .ui-menu-btn[aria-expanded="true"],
    .ui-nav-open .ui-drawer-btn {
        --m-icon: var(--i-x);
        background: var(--m-tonal);
    }

    /* Families: the "select a family" message centres in the visible canvas, not in the 900px tree width */
    .tree-canvas-wrapper:not(:has(.tree-node-card)) {
        min-width: 0;
        width: 100%;
    }

    /* Table rows: keep action buttons on one line on wide screens */
    td[data-actions]>div,
    td[data-actions] {
        white-space: nowrap;
    }

    /* Rows with a searchable dropdown and a button (e.g. Assign, Allocate) */
    .searchable-select-trigger + button,
    .searchable-select-trigger + .btn-primary {
        align-self: stretch;
        flex: none;
        white-space: nowrap;
    }

    /* Hierarchy rows at desktop: trigger and button match at 28px */
    .hier-class__assign .searchable-select-trigger,
    .hier-node__assign .searchable-select-trigger {
        height: 28px;
        min-height: 28px;
    }
    .hier-class__assign .hier-assign-btn,
    .hier-node__assign .hier-assign-btn,
    .hier-class__assign .searchable-select-trigger + button,
    .hier-node__assign .searchable-select-trigger + button {
        height: 28px;
        min-height: 28px;
        align-self: center;
    }

    /* Class detail rows: wrap when trigger (min 150px) + button don't fit, both full-width on wrap */
    .class-assign-row {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 10px;
    }
    .class-assign-row .searchable-select-trigger {
        flex: 10 1 150px;
        min-width: 150px;
        max-width: 100%;
        width: auto !important;
        height: 38px;
        min-height: 38px;
        box-sizing: border-box;
    }
    .class-assign-row .searchable-select-trigger + button,
    .class-assign-row .searchable-select-trigger + .btn-primary,
    .class-assign-row>button,
    .class-assign-row>.btn-primary {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        height: 38px;
        min-height: 38px;
        align-self: stretch;
        box-sizing: border-box;
    }

    /* ---------- Tablet and phone (< 1024px) ---------- */
    @media (max-width: 1023.98px) {

        /* Rows of labelled fields (js/ui-responsive.js marks them): two per row */
        [data-ui-fields]:not([data-ui-filters]) {
            display: flex !important;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 10px 12px;
        }

        [data-ui-fields]:not([data-ui-filters])>* {
            flex: 1 1 calc(50% - 12px);
            min-width: 0;
            max-width: none;
            margin: 0;
        }

        /* LMS hierarchy: cards fill the row (about two per row), lighter nesting */
        .hier-node--stage>.hier-card-collapsible-target>.hier-node__body {
            padding: 14px;
        }

        .hier-node--grade>.hier-card-collapsible-target>.hier-node__body {
            padding: 12px;
        }

        .hier-list--nodes {
            padding: 8px;
            gap: 12px;
        }

        #view-port .hier-class {
            flex: 1 1 240px;
            min-width: 0;
            max-width: none;
        }

        .dashboard-container {
            padding: 14px 20px 40px;
        }

        /* Header: one compact row, title truncates instead of wrapping */
        .header,
        .class-topbar {
            flex-wrap: nowrap;
            align-items: center;
            gap: 14px;
        }

        .header-ws-info,
        .header>div:first-child {
            min-width: 0;
            flex: 1 1 auto;
        }

        .header-ws-text {
            min-width: 0;
        }

        #header-ws-logo {
            max-width: 56px;
            max-height: 56px;
        }

        .ui-header-actions {
            flex: none;
            flex-wrap: nowrap;
            gap: 8px;
        }

        /* Tabs: one scrolling row of chips */
        .tabs {
            overflow-x: auto;
            scrollbar-width: none;
            overscroll-behavior-x: contain;
        }

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

        /* LMS: icon rail, labels in tooltips */
        .class-sidebar {
            width: 76px;
        }

        .class-sidebar-header {
            height: 72px;
            padding: 0;
            justify-content: center;
        }

        .class-sidebar-header img {
            max-width: 44px;
            max-height: 40px;
        }

        .class-nav>.class-nav-link,
        [dir] .class-nav>.class-nav-link {
            justify-content: center;
            margin: 0 10px;
            padding: 11px 0;
        }

        .class-nav-link .ui-lbl {
            display: none;
        }

        .class-nav-link .ui-ico {
            font-size: 1.3rem;
        }

        .class-nav-link .ui-ico--letter {
            display: inline-flex;
        }

        #nav-transitions.class-nav-link {
            margin-top: 8px;
        }

        .class-topbar {
            padding: 12px 20px 4px;
            min-height: 64px;
        }

        .class-topbar h1,
        #ui-ws-name {
            min-width: 0;
            flex: 1 1 auto;
            font-size: 1.2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .class-topbar>.ui-header-actions {
            flex: none;
            flex-wrap: nowrap;
            gap: 8px;
        }

        #user-name-display {
            max-width: 18ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .class-viewport {
            padding: 12px 20px 40px;
        }

        /* Filter toolbars: two columns */
        .filter-toolbar,
        .audit-filter-toolbar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .filter-toolbar> :first-child {
            grid-column: 1 / -1;
        }

        .filter-toolbar>*,
        .audit-filter-toolbar>* {
            width: auto;
            min-width: 0;
            max-width: none;
            margin: 0;
        }

        /* Wide auto-fit grids that cannot fit two columns */
        .dashboard-container :is([style*="minmax(400px"], .u-cols-repeat-auto-fit-minmax-400px-1fr),
        .class-viewport :is([style*="minmax(400px"], .u-cols-repeat-auto-fit-minmax-400px-1fr) {
            grid-template-columns: minmax(0, 1fr);
        }

        /* Table action buttons: compact */
        td .btn-action-sm,
        td .btn-edit,
        td .delete-q-btn {
            min-height: 34px;
            padding-inline: 12px;
            font-size: .85rem;
        }

        /* Families: narrower directory, tree keeps the rest */
        .families-layout {
            grid-template-columns: 300px minmax(0, 1fr);
        }

        .face-enrollment-layout {
            flex-direction: column;
        }
    }

    /* ---------- Tables become cards (tablet: two-column card grid, phone: one column) ----------
       js/ui-responsive.js labels each cell (data-label) and marks tables data-rt="cards" (≤ 8 columns)
       or data-rt="scroll" (wider matrices such as timetables). Desktop keeps the full table. */
    @media (max-width: 1023.98px) {

        /* Tables become cards */
        table[data-rt="cards"],
        table[data-rt="cards"]>tbody,
        table[data-rt="cards"]>tbody>tr,
        table[data-rt="cards"]>tbody>tr>td {
            display: block;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        table[data-rt="cards"] {
            background: transparent;
            border: 0;
            white-space: normal;
        }

        table[data-rt="cards"]>thead {
            display: none;
        }

        table[data-rt="cards"]>tbody>tr {
            margin: 0 0 12px;
            padding: 12px 14px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
        }

        table[data-rt="cards"]>tbody>tr[style*="display: none"],
        table[data-rt="cards"]>tbody>tr[style*="display:none"] {
            display: none;
        }

        /* Label column on the start side; it grows with long labels (float), the value flows beside it */
        table[data-rt="cards"]>tbody>tr>td {
            display: flow-root;
            padding: 6px 0;
            border: 0;
            text-align: start;
            white-space: normal;
            overflow-wrap: break-word;
        }

        /* Buttons and option labels inside a card cell keep their words whole and wrap as units */
        table[data-rt="cards"]>tbody>tr>td :is(button, label, .badge) {
            white-space: nowrap;
            overflow-wrap: normal;
        }

        table[data-rt="cards"]>tbody>tr>td div:has(> :is(button, label)) {
            flex-wrap: wrap;
        }

        table[data-rt="cards"]>tbody>tr>td::before {
            content: attr(data-label);
            float: inline-start;
            width: min(34%, 130px);
            margin-inline-end: 10px;
            padding-top: 2px;
            color: var(--text-muted);
            font-size: .78rem;
            font-weight: 600;
            line-height: 1.35;
        }

        /* Cells that hold controls (status buttons, selects, notes): label on its own line, control full width */
        table[data-rt="cards"]>tbody>tr>td:has(input, select, textarea, button)::before {
            float: none;
            display: block;
            width: auto;
            margin: 0 0 6px;
        }

        /* First cell is the card title; unlabeled cells use the full width */
        table[data-rt="cards"]>tbody>tr>td:first-child,
        table[data-rt="cards"]>tbody>tr>td[data-label=""],
        table[data-rt="cards"]>tbody>tr>td[data-actions],
        [dir="rtl"] table[data-rt="cards"]>tbody>tr>td:first-child,
        [dir="rtl"] table[data-rt="cards"]>tbody>tr>td[data-label=""],
        [dir="rtl"] table[data-rt="cards"]>tbody>tr>td[data-actions] {
            padding-inline: 0;
        }

        table[data-rt="cards"]>tbody>tr>td:first-child br {
            display: block;
            content: '';
            margin-top: 2px;
        }

        table[data-rt="cards"]>tbody>tr>td:first-child::before,
        table[data-rt="cards"]>tbody>tr>td[data-label=""]::before,
        table[data-rt="cards"]>tbody>tr>td[data-actions]::before {
            content: none;
        }

        table[data-rt="cards"]>tbody>tr>td:first-child {
            padding-top: 0;
            font-size: 1rem;
        }

        table[data-rt="cards"]>tbody>tr>td[data-actions] {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
            margin-top: 6px;
            padding-top: 12px;
            border-top: 1px solid var(--border-light);
            white-space: normal;
        }

        table[data-rt="cards"]>tbody>tr>td[data-actions]>div {
            flex-wrap: wrap;
            flex-direction: row;
            gap: 8px;
            width: 100%;
            justify-content: flex-start;
            white-space: normal;
        }

        table[data-rt="cards"]>tbody>tr[data-empty] {
            text-align: center;
            box-shadow: none;
            background: transparent;
            border-style: dashed;
        }

        table[data-rt="cards"]>tbody>tr[data-empty]>td {
            display: block;
            text-align: center;
        }

        /* Wide matrices (timetables etc.) scroll sideways */
        table[data-rt="scroll"] {
            display: block;
            overflow-x: auto;
            max-width: 100%;
            -webkit-overflow-scrolling: touch;
        }

        table[data-rt="cards"]>tbody>tr[data-rt-head] {
            display: none;
        }
    }

    @media (min-width: 640px) and (max-width: 1023.98px) {
        table[data-rt="cards"]>tbody {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            align-items: start;
        }

        table[data-rt="cards"]>tbody>tr {
            margin: 0;
            height: 100%;
        }

        table[data-rt="cards"]>tbody>tr[data-empty] {
            grid-column: 1 / -1;
        }
    }

    /* ---------- Phone (< 640px) ---------- */
    @media (max-width: 639.98px) {

        /* Header menu: card under the app bar; rows of icon + label (they click the original header buttons) */
        .ui-menu:not([hidden]) {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: calc(100% + 6px);
            inset-inline-end: 10px;
            z-index: 600;
            width: min(280px, calc(100vw - 20px));
            padding: 6px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-light);
        }

        .ui-menu-user {
            padding: 10px 14px 12px;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--border-light);
            color: var(--text-main);
            font-size: .9rem;
            font-weight: 600;
            overflow-wrap: anywhere;
        }

        .ui-menu-item {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            min-height: 48px;
            padding: 0 14px;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: var(--text-main);
            font: inherit;
            font-size: .95rem;
            font-weight: 500;
            text-align: start;
            cursor: pointer;
        }

        .ui-menu-item:hover,
        .ui-menu-item:focus-visible {
            background: var(--bg-panel);
        }

        .ui-menu-item.is-danger {
            color: var(--theme-danger);
        }

        .ui-menu-ico {
            flex: none;
            width: 20px;
            height: 20px;
            color: var(--m-on-tonal);
            background: currentColor;
            -webkit-mask: var(--m-icon, var(--i-dots)) center / contain no-repeat;
            mask: var(--m-icon, var(--i-dots)) center / contain no-repeat;
        }

        .ui-menu-item.is-danger .ui-menu-ico {
            color: var(--theme-danger);
        }

        .ui-menu-ico[data-icon="🌙"] {
            --m-icon: var(--i-moon);
        }

        [data-theme="dark"] .ui-menu-ico[data-icon="🌙"],
        .ui-menu-ico[data-icon^="☀"] {
            --m-icon: var(--i-sun);
        }

        .ui-menu-ico[data-icon="🌐"] {
            --m-icon: var(--i-globe);
        }

        .ui-menu-ico[data-icon="🚪"] {
            --m-icon: var(--i-logout);
        }

        .ui-menu-ico[data-icon="🏢"] {
            --m-icon: var(--i-building);
        }

        .ui-menu-ico[data-icon="🔑"] {
            --m-icon: var(--i-key);
        }

        /* Rows of labelled fields: one per line, buttons full width */
        [data-ui-fields]:not([data-ui-filters])>* {
            flex: 1 1 100%;
        }

        [data-ui-fields] select,
        [data-ui-fields] input:not([type="checkbox"]):not([type="radio"]) {
            width: 100%;
            min-width: 0;
        }

        /* Flex columns never wrap (a wrapping column spills into a second column when height runs out) */
        #view-port div.u-dir-column,
        :is(.dashboard-container, .modal) div.u-dir-column.u-dir-column[style] {
            flex-wrap: nowrap;
        }

        /* LMS hierarchy on phones: one class card per row, compact nesting, tidy action rows */
        .hier-node--stage>.hier-card-collapsible-target>.hier-node__body {
            padding: 10px;
        }

        .hier-node--grade>.hier-card-collapsible-target>.hier-node__body {
            padding: 8px;
        }

        .hier-list--nodes {
            padding: 6px;
            gap: 10px;
            border-style: solid;
            border-color: var(--border-light);
        }

        .hier-list--direct {
            padding: 0;
        }

        #view-port .hier-node__head {
            padding: 10px 12px;
            gap: 8px;
        }

        #view-port .hier-node__title-row {
            flex: 1 1 100%;
            flex-wrap: wrap;
            gap: 6px 8px;
            min-width: 0;
        }

        #view-port .hier-node__title {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 1.05rem;
            overflow-wrap: anywhere;
        }

        #view-port .hier-node__tools {
            margin-inline-start: auto;
        }

        #view-port .hier-node__tools>button {
            width: 36px;
            height: 36px;
        }

        #view-port .hier-node__adds,
        #view-port .hier-node__head>.hier-node__add {
            flex: 1 1 100%;
            gap: 8px;
        }

        #view-port .hier-node__adds>button,
        #view-port .hier-node__head>.hier-node__add {
            flex: 1 1 auto;
            justify-content: center;
            min-height: 38px;
        }

        #view-port .hier-node__leaders {
            padding: 10px 12px;
            gap: 8px;
        }

        #view-port .hier-node__assign,
        #view-port .hier-class__assign {
            flex: 1 1 100%;
            flex-wrap: nowrap;
            min-width: 0;
        }

        /* basis 0: the select takes the free space instead of its longest option's width */
        #view-port .hier-node__assign>select,
        #view-port .hier-class__assign>select,
        #view-port .hier-node__assign>.searchable-select-trigger,
        #view-port .hier-class__assign>.searchable-select-trigger {
            flex: 1 1 0;
            min-width: 0;
            height: 38px;
            width: auto !important;
        }

        #view-port .hier-node__assign>button,
        #view-port .hier-class__assign>button {
            flex: none;
            height: 38px;
            padding-inline: 14px;
        }

        /* Short add labels; Assign and Expand / Collapse show only their icon (full text stays in title / aria-label) */
        #view-port .hier-lbl-full,
        #btn-hierarchy-expand-all>[data-i18n],
        #btn-hierarchy-collapse-all>[data-i18n] {
            display: none;
        }

        #view-port .hier-lbl-short {
            display: inline;
        }

        #view-port .hier-node__assign>.hier-assign-btn,
        #view-port .hier-class__assign>.hier-assign-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            padding-inline: 0;
        }

        #view-port .hier-assign-btn::before {
            content: "";
            width: 20px;
            height: 20px;
            background: currentColor;
            -webkit-mask: var(--bi-user-plus) center / contain no-repeat;
            mask: var(--bi-user-plus) center / contain no-repeat;
        }

        #btn-hierarchy-expand-all,
        #btn-hierarchy-collapse-all {
            min-width: 44px;
            min-height: 40px;
            justify-content: center;
        }

        #view-port .hier-node__classes {
            padding: 6px;
        }

        #view-port .hier-class {
            flex: 1 1 100%;
            min-width: 0;
            max-width: none;
        }

        #view-port .hier-class__head {
            flex-wrap: nowrap;
            align-items: stretch;
        }

        #view-port .hier-class__tools {
            flex: none;
            height: auto;
        }

        #view-port .hier-class__tools>button {
            width: 42px;
            height: auto;
            min-height: 42px;
            padding: 0;
        }

        /* Classes card Assign Teacher & Allocate Course rows on phones */
        .class-card .class-assign-row,
        .class-assign-row {
            flex-wrap: wrap;
        }
        .class-card .searchable-select-trigger,
        .class-assign-row .searchable-select-trigger {
            flex: 1 1 100%;
            min-width: 0;
            width: 100% !important;
            height: 38px;
        }
        .class-card .searchable-select-trigger + button,
        .class-card .searchable-select-trigger + .btn-primary,
        .class-assign-row .searchable-select-trigger + button,
        .class-assign-row .searchable-select-trigger + .btn-primary {
            flex: 1 1 100%;
            width: 100%;
            height: 38px;
            align-self: stretch;
        }

        /* Floating "Add" button: the first "+ …" action of the current view (js/ui-responsive.js) */
        [data-fab] {
            position: fixed;
            inset-inline-end: 16px;
            bottom: calc(16px + env(safe-area-inset-bottom));
            z-index: 450;
            width: auto;
            max-width: calc(100vw - 32px);
            min-height: 54px;
            margin: 0;
            padding-inline: 22px;
            border-radius: 999px;
            box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--theme-primary) 60%, rgb(0 0 0 / .45));
            font-size: 1rem;
            white-space: nowrap;
        }

        .ui-has-bottom-nav [data-fab] {
            bottom: calc(84px + env(safe-area-inset-bottom));
        }

        html,
        body {
            overflow-x: clip;
            overscroll-behavior: contain;
        }

        .dashboard-container {
            padding: 0 12px calc(92px + env(safe-area-inset-bottom));
        }

        /* App bar */
        .header,
        .class-topbar {
            position: sticky;
            top: 0;
            z-index: 500;
            flex-direction: row;
            min-height: 60px;
            height: auto;
            margin: 0 -12px 12px;
            padding: 8px 12px;
            gap: 10px;
            background: color-mix(in srgb, var(--bg-card) 95%, transparent);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            box-shadow: 0 1px 0 var(--border-light);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .class-topbar {
            margin: 0;
        }

        .header-ws-info {
            gap: 10px;
        }

        #header-ws-logo {
            max-width: 34px;
            max-height: 34px;
            width: auto;
            height: auto;
        }

        .header h1,
        #ui-admin-title,
        .class-topbar h1,
        #ui-ws-name {
            font-size: 1.05rem;
        }

        #ui-admin-ws-code {
            font-size: .68rem;
            padding: 1px 8px;
            margin-top: 2px;
        }

        .ui-menu-btn,
        .ui-drawer-btn {
            display: inline-flex;
        }

        /* Header actions become a dropdown menu */
        .header,
        .class-topbar {
            isolation: isolate;
        }

        /* Bottom navigation (tab portals) */
        .tabs {
            position: fixed;
            inset-inline: 0;
            bottom: 0;
            z-index: 500;
            margin: 0;
            overflow: visible;
            border-radius: 0;
            background: var(--bg-card);
            box-shadow: 0 -1px 0 var(--border-light), 0 -10px 30px -16px rgb(0 0 0 / .25);
        }

        .tabs>.tab-btn {
            min-width: 0;
            flex-direction: column;
            gap: 3px;
            min-height: 54px;
            padding: 6px 2px;
            border-radius: 16px;
            font-size: .7rem;
            line-height: 1.15;
            background: transparent;
        }

        .tabs>.tab-btn .ui-ico {
            font-size: 1.35rem;
        }

        .tabs>.tab-btn .ui-lbl {
            max-width: 100%;
        }

        /* LMS: off-canvas drawer */
        .class-portal-layout {
            display: block;
            height: auto;
            min-height: 100dvh;
            overflow: visible;
        }

        /* min-width: wide content (a long <select>) must not stretch the page past the screen */
        .class-main-content {
            overflow: visible;
            min-width: 0;
        }

        #students-map-view-container {
            padding-bottom: 25vh;
            overscroll-behavior: contain;
            overflow-anchor: none;
        }

        .class-sidebar,
        [dir="rtl"] .class-sidebar {
            position: fixed;
            inset-block: 0;
            inset-inline-start: 0;
            z-index: 900;
            width: min(300px, 84vw);
            transform: translateX(-105%);
            transition: transform .25s ease;
            box-shadow: var(--shadow-lg);
            overflow-y: auto;
        }

        [dir="rtl"] .class-sidebar {
            transform: translateX(105%);
        }

        .ui-nav-open .class-sidebar {
            transform: none;
        }

        .ui-drawer-backdrop {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 890;
            background: rgb(0 0 0 / .4);
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease;
        }

        .ui-nav-open .ui-drawer-backdrop {
            opacity: 1;
            pointer-events: auto;
        }

        .ui-nav-open,
        .ui-nav-open body {
            overflow: hidden;
        }

        .class-sidebar-header {
            height: 76px;
            justify-content: flex-start;
            padding: 0 24px;
        }

        .class-nav>.class-nav-link,
        [dir] .class-nav>.class-nav-link {
            justify-content: flex-start;
            margin: 0 12px;
            padding: 12px 16px;
        }

        .class-nav-link .ui-lbl {
            display: inline;
        }

        .class-nav-link .ui-ico {
            font-size: 1.1rem;
        }

        .class-nav-link .ui-ico--letter {
            display: none;
        }

        .class-topbar>h1 {
            margin: 0;
            align-self: center;
            line-height: 1.2;
            height: auto;
            min-height: 0;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .class-topbar>.ui-header-actions {
            position: static;
        }

        .class-viewport {
            padding: 12px 12px 40px;
        }

        /* Filters: search stays, the rest folds behind a toggle */
        [data-ui-filters] {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }

        [data-ui-filters]>* {
            grid-column: 1 / -1;
            width: auto;
            min-width: 0;
            margin: 0;
        }

        [data-ui-filters]>[data-filter-keep] {
            grid-column: 1;
            grid-row: 1;
        }

        [data-ui-filters]>.ui-filter-toggle {
            display: inline-flex;
            grid-column: 2;
            grid-row: 1;
            align-items: center;
            gap: 6px;
            min-height: 44px;
            padding: 0 14px;
            border: 0;
            border-radius: 999px;
            background: var(--bg-card);
            color: var(--m-on-tonal);
            font-weight: 600;
            font-size: .88rem;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
        }

        [data-ui-filters]>.ui-filter-toggle::before {
            content: '';
            width: 16px;
            height: 16px;
            background: currentColor;
            -webkit-mask: var(--i-filter) center / contain no-repeat;
            mask: var(--i-filter) center / contain no-repeat;
        }

        [data-ui-filters].is-expanded>.ui-filter-toggle {
            background: var(--m-tonal);
        }

        /* Inline grids: fixed multi-column layouts stack; small tile grids keep two columns */
        .dashboard-container :is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr):not(:is([style*="repeat(7"], .u-cols-repeat-7-1fr)),
        .class-viewport :is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr):not(:is([style*="repeat(7"], .u-cols-repeat-7-1fr)),
        .modal :is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr):not(:is([style*="repeat(7"], .u-cols-repeat-7-1fr)) {
            grid-template-columns: minmax(0, 1fr);
        }

        .dashboard-container :is([style*="minmax(1"], .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr):is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr),
        .class-viewport :is([style*="minmax(1"], .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr):is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr),
        .dashboard-container :is([style*="repeat(2"], .u-cols-repeat-2-1fr):is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr),
        .class-viewport :is([style*="repeat(2"], .u-cols-repeat-2-1fr):is([style*="grid-template-columns"], .u-cols-1_2fr-1fr, .u-cols-1_4fr-1fr, .u-cols-1fr, .u-cols-1fr-1fr, .u-cols-1fr-1fr-1fr, .u-cols-1fr-2fr, .u-cols-1fr-340px, .u-cols-2fr-1fr, .u-cols-2fr-3fr-1_5fr-auto, .u-cols-max-content-1fr, .u-cols-repeat-2-1fr, .u-cols-repeat-3-1fr, .u-cols-repeat-7-1fr, .u-cols-repeat-auto-fill-minmax-280px-1fr, .u-cols-repeat-auto-fill-minmax-320px-1fr, .u-cols-repeat-auto-fit-minmax-130px-1fr, .u-cols-repeat-auto-fit-minmax-140px-1fr, .u-cols-repeat-auto-fit-minmax-150px-1fr, .u-cols-repeat-auto-fit-minmax-160px-1fr, .u-cols-repeat-auto-fit-minmax-180px-1fr, .u-cols-repeat-auto-fit-minmax-190px-1fr, .u-cols-repeat-auto-fit-minmax-200px-1fr, .u-cols-repeat-auto-fit-minmax-220px-1fr, .u-cols-repeat-auto-fit-minmax-240px-1fr, .u-cols-repeat-auto-fit-minmax-250px-1fr, .u-cols-repeat-auto-fit-minmax-28pct-1fr, .u-cols-repeat-auto-fit-minmax-300px-1fr, .u-cols-repeat-auto-fit-minmax-400px-1fr) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Inline flex rows wrap instead of overflowing */
        .dashboard-container div[style*="display: flex"]:not(:is([style*="nowrap"], .u-wrap-nowrap, .u-ws-nowrap), :is([style*="cursor: pointer"], .u-cur-pointer)),
        .dashboard-container div[style*="display:flex"]:not(:is([style*="nowrap"], .u-wrap-nowrap, .u-ws-nowrap), :is([style*="cursor:pointer"], .u-cur-pointer)),
        .class-viewport div[style*="display: flex"]:not(:is([style*="nowrap"], .u-wrap-nowrap, .u-ws-nowrap), :is([style*="cursor: pointer"], .u-cur-pointer)),
        .class-viewport div[style*="display:flex"]:not(:is([style*="nowrap"], .u-wrap-nowrap, .u-ws-nowrap), :is([style*="cursor:pointer"], .u-cur-pointer)),
        .modal div[style*="display: flex"]:not(:is([style*="nowrap"], .u-wrap-nowrap, .u-ws-nowrap), :is([style*="cursor: pointer"], .u-cur-pointer)),
        .modal div[style*="display:flex"]:not(:is([style*="nowrap"], .u-wrap-nowrap, .u-ws-nowrap), :is([style*="cursor:pointer"], .u-cur-pointer)) {
            flex-wrap: wrap;
        }

        /* Collapsible section headers (title + ▼): one line, the title shrinks */
        div:is([style*="cursor: pointer"], .u-cur-pointer)[style*="display: flex"]> :first-child,
        div:is([style*="cursor:pointer"], .u-cur-pointer)[style*="display:flex"]> :first-child {
            min-width: 0;
            font-size: 1.15rem;
        }

        /* Field-sized minimum widths (150-280px) stay, capped at the available width: groups wrap instead of collapsing.
           Smaller minimums are left as designed (they fit, and a capped value would be ignored when sizing rows) */

        #view-port .u-minw-150px,
        .dashboard-container .u-minw-150px,
        .modal .u-minw-150px {
            min-width: min(100%, 150px);
        }

        #view-port .u-minw-155px,
        .dashboard-container .u-minw-155px,
        .modal .u-minw-155px {
            min-width: min(100%, 155px);
        }

        #view-port .u-minw-160px,
        .dashboard-container .u-minw-160px,
        .modal .u-minw-160px {
            min-width: min(100%, 160px);
        }

        #view-port .u-minw-170px,
        .dashboard-container .u-minw-170px,
        .modal .u-minw-170px {
            min-width: min(100%, 170px);
        }

        #view-port .u-minw-180px,
        .dashboard-container .u-minw-180px,
        .modal .u-minw-180px {
            min-width: min(100%, 180px);
        }

        #view-port .u-minw-200px,
        .dashboard-container .u-minw-200px,
        .modal .u-minw-200px {
            min-width: min(100%, 200px);
        }

        #view-port .u-minw-210px,
        .dashboard-container .u-minw-210px,
        .modal .u-minw-210px {
            min-width: min(100%, 210px);
        }

        #view-port .u-minw-220px,
        .dashboard-container .u-minw-220px,
        .modal .u-minw-220px {
            min-width: min(100%, 220px);
        }

        #view-port .u-minw-230px,
        .dashboard-container .u-minw-230px,
        .modal .u-minw-230px {
            min-width: min(100%, 230px);
        }

        #view-port .u-minw-240px,
        .dashboard-container .u-minw-240px,
        .modal .u-minw-240px {
            min-width: min(100%, 240px);
        }

        #view-port .u-minw-250px,
        .dashboard-container .u-minw-250px,
        .modal .u-minw-250px {
            min-width: min(100%, 250px);
        }

        #view-port .u-minw-260px,
        .dashboard-container .u-minw-260px,
        .modal .u-minw-260px {
            min-width: min(100%, 260px);
        }

        #view-port .u-minw-280px,
        .dashboard-container .u-minw-280px,
        .modal .u-minw-280px {
            min-width: min(100%, 280px);
        }

        /* flex: 1 / 2 … start from zero width and squeeze instead of wrapping: start from their natural width */
        #view-port .u-flex-0_8,
        .dashboard-container .u-flex-0_8,
        .modal .u-flex-0_8,
        #view-port .u-flex-1,
        .dashboard-container .u-flex-1,
        .modal .u-flex-1,
        #view-port .u-flex-1_2,
        .dashboard-container .u-flex-1_2,
        .modal .u-flex-1_2,
        #view-port .u-flex-1_5,
        .dashboard-container .u-flex-1_5,
        .modal .u-flex-1_5,
        #view-port .u-flex-2,
        .dashboard-container .u-flex-2,
        .modal .u-flex-2 {
            flex-basis: auto;
        }

        .form-control,
        select.form-control,
        textarea.form-control {
            max-width: 100%;
            min-width: 0;
        }

        /* Short selects (per page, sort order) keep room for their value and the arrow */
        select.form-control {
            min-width: 5.5em;
        }

        /* Primary actions: full-width row of pills under the section title */
        .dashboard-container .btn-primary,
        .class-viewport .btn-primary {
            max-width: 100%;
        }

        /* Modals become bottom sheets */
        .modal {
            padding: 0;
        }

        .modal-content {
            inset-inline: 0;
            bottom: 0;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            box-sizing: border-box;
        }

        /* Families: Directory / Tree switch */
        #dashboard-screen>.families-layout {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            height: auto;
            overflow: hidden;
        }

        .ui-pane-switch {
            display: flex;
            flex: none;
            gap: 4px;
            margin: 8px 12px;
            padding: 4px;
            background: var(--bg-card);
            border-radius: 999px;
            box-shadow: var(--shadow-sm);
        }

        .ui-pane-switch>button {
            flex: 1 1 0;
            min-height: 40px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-weight: 600;
            font-size: .92rem;
            cursor: pointer;
        }

        .ui-pane-switch>button[aria-selected="true"] {
            background: var(--m-tonal);
            color: var(--m-on-tonal);
        }

        .families-layout>.families-sidebar,
        .families-layout>.families-canvas-area {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            border: 0;
        }

        .families-layout>.families-sidebar {
            overflow-y: auto;
        }

        .families-layout>.families-canvas-area {
            display: flex;
            flex-direction: column;
        }

        .tree-toolbar {
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px 12px;
        }

        .tree-toolbar-actions {
            flex-wrap: wrap;
            gap: 8px;
        }

        /* Page-specific */
        .staff-att-date-col,
        .staff-att-scope-col {
            min-width: 0;
            flex: 1 1 100%;
        }

        #audit-superadmin-metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .audit-retention-box,
        .audit-retention-box>div {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        #host-modal .host-modal-content>div:first-child {
            flex-direction: column;
            text-align: center;
        }
    }
}