/*
 * BISU Laravel-Style Interface Theme
 * Presentation layer only: colors, spacing, typography, responsive layout, and component styling.
 * No application behavior, validation, database, attendance, payment, reporting, or Telegram logic is defined here.
 */

:root {
    --bisu-purple-950: #1d0b35;
    --bisu-purple-900: #281044;
    --bisu-purple-800: #3b1763;
    --bisu-purple-700: #55228a;
    --bisu-purple-600: #6d2eaa;
    --bisu-purple-100: #f1e9fb;
    --bisu-purple-50: #faf7fe;
    --bisu-gold-500: #f5c518;
    --bisu-gold-400: #ffd84d;
    --bisu-gold-100: #fff4bf;
    --bisu-green-700: #08723a;
    --bisu-green-600: #0b8a47;
    --bisu-navy-900: #111b55;
    --bisu-canvas: #f5f6fa;
    --bisu-surface: #ffffff;
    --bisu-text: #172033;
    --bisu-muted: #667085;
    --bisu-border: #e3e7ef;
    --bisu-danger: #c62828;
    --bisu-warning: #a46100;
    --bisu-success: #08723a;
    --bisu-radius-sm: 8px;
    --bisu-radius: 12px;
    --bisu-radius-lg: 18px;
    --bisu-shadow-sm: 0 1px 2px rgba(26, 16, 45, .05);
    --bisu-shadow: 0 10px 30px rgba(34, 15, 58, .08);
    --bisu-shadow-lg: 0 24px 64px rgba(29, 11, 53, .16);
    --bisu-ring: 0 0 0 3px rgba(109, 46, 170, .16);
    --bisu-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media screen {
    html {
        background: var(--bisu-canvas);
        scrollbar-color: rgba(85, 34, 138, .45) transparent;
        scrollbar-width: thin;
    }

    body.bisu-theme {
        font-family: var(--bisu-font) !important;
        color: var(--bisu-text);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body.bisu-theme * {
        scrollbar-color: rgba(85, 34, 138, .38) transparent;
        scrollbar-width: thin;
    }

    body.bisu-theme *::-webkit-scrollbar { width: 10px; height: 10px; }
    body.bisu-theme *::-webkit-scrollbar-track { background: transparent; }
    body.bisu-theme *::-webkit-scrollbar-thumb {
        background: rgba(85, 34, 138, .34);
        border: 3px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
    }
    body.bisu-theme *::-webkit-scrollbar-thumb:hover { background-color: rgba(85, 34, 138, .55); }

    body.bisu-theme button,
    body.bisu-theme input,
    body.bisu-theme select,
    body.bisu-theme textarea {
        font-family: inherit;
    }

    body.bisu-theme a,
    body.bisu-theme button,
    body.bisu-theme input,
    body.bisu-theme select,
    body.bisu-theme textarea {
        -webkit-tap-highlight-color: transparent;
    }

    body.bisu-theme :focus-visible {
        outline: 2px solid var(--bisu-gold-500);
        outline-offset: 2px;
    }

    /* ---------------------------------------------------------------------
       Shared Laravel-style dashboard shell
       --------------------------------------------------------------------- */
    body.page-dashboard {
        --bg-main: var(--bisu-canvas);
        --sidebar-bg: var(--bisu-purple-950);
        --sidebar-hover: rgba(255, 255, 255, .08);
        --sidebar-active: rgba(245, 197, 24, .13);
        --sidebar-text: #ddd5e9;
        --primary: var(--bisu-purple-700);
        --primary-hover: var(--bisu-purple-800);
        --primary-focus: rgba(109, 46, 170, .18);
        --card-bg: var(--bisu-surface);
        --text-main: var(--bisu-text);
        --text-muted: var(--bisu-muted);
        --border: var(--bisu-border);
        background: var(--bisu-canvas) !important;
    }

    .page-dashboard .sidebar {
        position: relative;
        width: 272px !important;
        min-width: 272px;
        background:
            radial-gradient(circle at 18% 2%, rgba(245, 197, 24, .13), transparent 12rem),
            linear-gradient(180deg, var(--bisu-purple-950) 0%, #23103d 58%, #170a2a 100%) !important;
        border-right: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 12px 0 36px rgba(29, 11, 53, .12) !important;
        isolation: isolate;
    }

    .page-dashboard .sidebar::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        z-index: 2;
        background: linear-gradient(90deg, var(--bisu-gold-500), var(--bisu-gold-400), var(--bisu-purple-600));
    }

    .page-dashboard .sidebar::after {
        content: "BOHOL ISLAND STATE UNIVERSITY";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 72px;
        color: rgba(255, 255, 255, .28);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .17em;
        line-height: 1.5;
        text-align: center;
        pointer-events: none;
    }

    .page-dashboard .sidebar-header,
    .page-special-events .sidebar > h2 {
        min-height: 92px;
        display: flex !important;
        align-items: center;
        gap: 13px;
        padding: 20px 20px !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
        font-size: 1.02rem !important;
        font-weight: 750 !important;
        letter-spacing: -.01em !important;
        line-height: 1.25;
    }

    .page-dashboard .sidebar-header::before,
    .page-special-events .sidebar > h2::before {
        content: "";
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 50%;
        background: #fff url("../../bisu_logo.jpg") center / cover no-repeat;
        border: 2px solid var(--bisu-gold-500);
        box-shadow: 0 0 0 4px rgba(245, 197, 24, .11), 0 8px 20px rgba(0, 0, 0, .25);
    }

    .page-dashboard .nav-links {
        padding: 18px 12px 110px !important;
    }

    .page-dashboard .nav-links a,
    .page-special-events .sidebar a {
        position: relative;
        display: flex !important;
        align-items: center;
        margin: 3px 0;
        padding: 11px 15px !important;
        border: 1px solid transparent !important;
        border-radius: 10px;
        color: #dcd4e8 !important;
        font-size: .91rem !important;
        font-weight: 600 !important;
        line-height: 1.35;
        transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
    }

    .page-dashboard .nav-links a:hover,
    .page-special-events .sidebar a:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, .075) !important;
        border-color: rgba(255, 255, 255, .08) !important;
        transform: translateX(2px);
    }

    .page-dashboard .nav-links a.active,
    .page-special-events .sidebar a.active {
        color: #fff !important;
        background: linear-gradient(90deg, rgba(245, 197, 24, .18), rgba(109, 46, 170, .20)) !important;
        border-color: rgba(245, 197, 24, .26) !important;
        box-shadow: inset 3px 0 0 var(--bisu-gold-500);
    }

    .page-dashboard .nav-links a.active::after,
    .page-special-events .sidebar a.active::after {
        content: "";
        position: absolute;
        right: 13px;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bisu-gold-500);
        box-shadow: 0 0 0 4px rgba(245, 197, 24, .10);
        transform: translateY(-50%);
    }

    .page-dashboard .btn-sidebar-scan,
    .page-special-events .sidebar .scan-link {
        margin: 12px !important;
        color: #281044 !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        border: 1px solid rgba(255, 255, 255, .22) !important;
        box-shadow: 0 10px 24px rgba(245, 197, 24, .16);
        text-align: center;
    }

    .page-dashboard .btn-sidebar-scan:hover,
    .page-special-events .sidebar .scan-link:hover {
        color: #1d0b35 !important;
        background: #ffe178 !important;
        transform: translateY(-1px) !important;
    }

    .page-dashboard .main-content,
    .page-special-events .content {
        position: relative;
        min-width: 0;
        padding: clamp(22px, 2.4vw, 38px) !important;
        background:
            radial-gradient(circle at 96% 0%, rgba(109, 46, 170, .07), transparent 24rem),
            linear-gradient(180deg, #f8f8fc 0%, var(--bisu-canvas) 100%) !important;
    }

    .page-dashboard .main-content::before,
    .page-special-events .content::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        left: 272px;
        height: 4px;
        z-index: 30;
        background: linear-gradient(90deg, var(--bisu-purple-700), var(--bisu-gold-500), var(--bisu-green-600));
    }

    .page-dashboard .header,
    .page-special-events .topbar,
    .page-special-events .header {
        position: relative;
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 24px !important;
        padding: 20px 22px;
        border: 1px solid var(--bisu-border);
        border-radius: var(--bisu-radius-lg);
        background: rgba(255, 255, 255, .92);
        box-shadow: var(--bisu-shadow-sm);
        backdrop-filter: blur(12px);
    }

    .page-dashboard .header::before,
    .page-special-events .topbar::before,
    .page-special-events .header::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5px;
        border-radius: var(--bisu-radius-lg) 0 0 var(--bisu-radius-lg);
        background: linear-gradient(180deg, var(--bisu-purple-700), var(--bisu-gold-500));
    }

    .page-dashboard .header-info h1,
    .page-special-events .topbar h1,
    .page-special-events .header h1 {
        color: var(--bisu-purple-950) !important;
        font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
        font-weight: 800 !important;
        letter-spacing: -.035em !important;
        line-height: 1.15;
    }

    .page-dashboard .header-info p,
    .page-special-events .topbar p,
    .page-special-events .header p {
        color: var(--bisu-muted) !important;
        max-width: 920px;
        line-height: 1.6;
    }

    .page-dashboard .card,
    .page-special-events .card,
    .page-special-events .search-card,
    .page-special-events .profile-card,
    .page-special-events .history-card,
    .page-special-events .queue-card,
    .page-special-events .state-card {
        border: 1px solid var(--bisu-border) !important;
        border-radius: var(--bisu-radius-lg) !important;
        background: var(--bisu-surface) !important;
        box-shadow: var(--bisu-shadow-sm) !important;
    }

    .page-dashboard .card,
    .page-special-events .card {
        padding: clamp(18px, 2vw, 26px) !important;
    }

    .page-dashboard .card:hover,
    .page-special-events .profile-card:hover,
    .page-special-events .history-card:hover,
    .page-special-events .queue-card:hover {
        border-color: #d5c5e8 !important;
        box-shadow: var(--bisu-shadow) !important;
    }

    .page-dashboard .card h2,
    .page-dashboard .card h3,
    .page-special-events .card h2,
    .page-special-events .card h3,
    .page-special-events .history-card h2,
    .page-special-events .queue-card h2 {
        color: var(--bisu-purple-950) !important;
        letter-spacing: -.02em;
    }

    .page-dashboard .card h3::after,
    .page-dashboard .card > h2::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin-top: 9px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--bisu-gold-500), var(--bisu-purple-600));
    }

    .page-dashboard .grid-container,
    .page-dashboard .card-grid,
    .page-dashboard .stats-grid,
    .page-special-events .summary,
    .page-special-events .stats,
    .page-special-events .cards {
        gap: 16px !important;
    }

    .page-dashboard .stat,
    .page-dashboard .stat-card,
    .page-special-events .stat,
    .page-special-events .queue-stat {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--bisu-border) !important;
        border-radius: var(--bisu-radius) !important;
        background: linear-gradient(145deg, #fff, #fbf9fe) !important;
        box-shadow: none !important;
    }

    .page-dashboard .stat::before,
    .page-dashboard .stat-card::before,
    .page-special-events .stat::before,
    .page-special-events .queue-stat::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--bisu-purple-600);
    }

    .page-dashboard .stat strong,
    .page-dashboard .stat-value,
    .page-special-events .stat strong,
    .page-special-events .queue-stat strong {
        color: var(--bisu-purple-900) !important;
        font-weight: 800 !important;
    }

    .page-dashboard .stat-title,
    .page-dashboard .stat-subtext,
    .page-special-events .stat span,
    .page-special-events .queue-stat span {
        color: var(--bisu-muted) !important;
    }

    .page-dashboard .table-container,
    .page-dashboard .table-wrap,
    .page-dashboard .audit-table-wrap,
    .page-special-events .table-wrap,
    .page-special-events .queue-table-wrap {
        overflow: auto;
        border: 1px solid var(--bisu-border) !important;
        border-radius: var(--bisu-radius) !important;
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .page-dashboard table,
    .page-special-events table {
        width: 100%;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .page-dashboard th,
    .page-special-events th {
        position: sticky;
        top: 0;
        z-index: 2;
        color: #51366a !important;
        background: linear-gradient(180deg, #fcfbfe, #f5f0fa) !important;
        border-bottom: 1px solid #ded4e9 !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
        letter-spacing: .055em !important;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .page-dashboard td,
    .page-special-events td {
        color: #293246 !important;
        border-bottom-color: #edf0f5 !important;
        vertical-align: middle;
    }

    .page-dashboard tbody tr,
    .page-special-events tbody tr {
        transition: background .14s ease, box-shadow .14s ease;
    }

    .page-dashboard tbody tr:hover,
    .page-special-events tbody tr:hover {
        background: #fcf9ff !important;
        box-shadow: inset 3px 0 0 rgba(109, 46, 170, .45);
    }

    .page-dashboard input:not([type="checkbox"]):not([type="radio"]),
    .page-dashboard select,
    .page-dashboard textarea,
    .page-special-events input:not([type="checkbox"]):not([type="radio"]),
    .page-special-events select,
    .page-special-events textarea {
        width: 100%;
        min-height: 42px;
        color: var(--bisu-text) !important;
        background: #fff !important;
        border: 1px solid #ccd3df !important;
        border-radius: 9px !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
    }

    .page-dashboard input:not([type="checkbox"]):not([type="radio"]):focus,
    .page-dashboard select:focus,
    .page-dashboard textarea:focus,
    .page-special-events input:not([type="checkbox"]):not([type="radio"]):focus,
    .page-special-events select:focus,
    .page-special-events textarea:focus {
        outline: none !important;
        border-color: var(--bisu-purple-600) !important;
        box-shadow: var(--bisu-ring) !important;
    }

    .page-dashboard label,
    .page-special-events label {
        display: block;
        color: #4a365c !important;
        font-weight: 700 !important;
    }

    .page-dashboard .btn,
    .page-dashboard button.btn,
    .page-special-events .btn,
    .page-special-events button.btn {
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 9px 16px !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        color: #fff !important;
        background: linear-gradient(135deg, var(--bisu-purple-600), var(--bisu-purple-800)) !important;
        box-shadow: 0 5px 13px rgba(85, 34, 138, .17) !important;
        font-weight: 750 !important;
        text-decoration: none;
        transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
    }

    .page-dashboard .btn:hover,
    .page-dashboard button.btn:hover,
    .page-special-events .btn:hover,
    .page-special-events button.btn:hover {
        filter: brightness(1.07);
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(85, 34, 138, .22) !important;
    }

    .page-dashboard .btn:active,
    .page-special-events .btn:active { transform: translateY(0); }

    .page-dashboard .btn-green,
    .page-dashboard .btn.green,
    .page-dashboard .btn-success,
    .page-special-events .btn.green {
        color: #fff !important;
        background: linear-gradient(135deg, var(--bisu-green-600), #066733) !important;
        box-shadow: 0 5px 13px rgba(8, 114, 58, .17) !important;
    }

    .page-dashboard .btn-yellow,
    .page-dashboard .btn-small.btn-yellow {
        color: #2a1737 !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        box-shadow: 0 5px 13px rgba(245, 197, 24, .18) !important;
    }

    .page-dashboard .btn-red,
    .page-dashboard .btn-danger,
    .page-dashboard .btn.btn-danger,
    .page-special-events .btn.danger {
        color: #fff !important;
        background: linear-gradient(135deg, #dc3b3b, #a91e2a) !important;
        box-shadow: 0 5px 13px rgba(198, 40, 40, .16) !important;
    }

    .page-dashboard .btn-small,
    .page-special-events .btn.secondary,
    .page-dashboard .btn.secondary {
        min-height: 34px;
        padding: 7px 12px !important;
    }

    .page-dashboard .btn.secondary,
    .page-special-events .btn.secondary {
        color: var(--bisu-purple-800) !important;
        background: #fff !important;
        border-color: #d9cbea !important;
        box-shadow: var(--bisu-shadow-sm) !important;
    }

    .page-dashboard .btn-logout,
    .page-dashboard .logout-container a,
    .page-special-events .top-actions a[href*="logout"] {
        color: #9d1d2a !important;
        background: #fff7f7 !important;
        border: 1px solid #f3c4c8 !important;
        border-radius: 9px !important;
        box-shadow: none !important;
    }

    .page-dashboard .btn-logout:hover,
    .page-dashboard .logout-container a:hover,
    .page-special-events .top-actions a[href*="logout"]:hover {
        color: #fff !important;
        background: #ad2632 !important;
        border-color: #ad2632 !important;
    }

    .page-dashboard .alert,
    .page-special-events .alert,
    .page-special-events .notice,
    .page-dashboard .warning-box,
    .page-dashboard .retention-note {
        border-radius: var(--bisu-radius) !important;
        box-shadow: none !important;
        line-height: 1.55;
    }

    .page-dashboard .alert-success,
    .page-special-events .notice.success {
        color: #086439 !important;
        background: #edfff5 !important;
        border: 1px solid #b8ebd0 !important;
    }

    .page-dashboard .alert-error,
    .page-special-events .notice.error {
        color: #9e2631 !important;
        background: #fff5f5 !important;
        border: 1px solid #f2c3c7 !important;
    }

    .page-dashboard .badge,
    .page-special-events .badge,
    .page-special-events .payment-state,
    .page-dashboard .operation-badge {
        border-radius: 999px !important;
        font-weight: 800 !important;
        letter-spacing: .015em;
    }

    .page-dashboard .pagination-controls,
    .page-dashboard .pagination-container,
    .page-special-events .pagination-actions {
        gap: 8px !important;
    }

    .page-dashboard .search-input,
    .page-dashboard .student-list-tools {
        border-radius: var(--bisu-radius) !important;
    }

    .page-dashboard .avatar-img,
    .page-dashboard .avatar-placeholder,
    .page-special-events .profile-photo {
        border: 3px solid #fff !important;
        box-shadow: 0 0 0 2px var(--bisu-gold-500), 0 8px 22px rgba(29, 11, 53, .13) !important;
    }

    .page-dashboard .danger-zone {
        border-color: #efc8cc !important;
        background: linear-gradient(145deg, #fff, #fff8f8) !important;
    }

    .page-dashboard .pdf-report-card {
        border-color: #d8c6e9 !important;
        background: linear-gradient(145deg, #fff, #fbf7ff) !important;
    }

    .page-dashboard .pdf-highlight {
        color: var(--bisu-purple-900) !important;
        background: var(--bisu-gold-100) !important;
        border-color: #ecd36f !important;
    }

    /* Special event pages use a slightly different original shell. */
    body.page-special-events {
        --bg: var(--bisu-canvas);
        --surface: #fff;
        --surface-soft: #faf8fd;
        --card: #fff;
        --sidebar: var(--bisu-purple-950);
        --sidebar-hover: rgba(255, 255, 255, .08);
        --primary: var(--bisu-purple-700);
        --primary-dark: var(--bisu-purple-900);
        --text: var(--bisu-text);
        --muted: var(--bisu-muted);
        --border: var(--bisu-border);
        --success: var(--bisu-success);
        --warning: var(--bisu-warning);
        --danger: var(--bisu-danger);
        --shadow: var(--bisu-shadow);
        background: var(--bisu-canvas) !important;
    }

    .page-special-events .layout {
        grid-template-columns: 272px minmax(0, 1fr) !important;
    }

    .page-special-events .sidebar {
        position: relative;
        padding-top: 4px !important;
        background:
            radial-gradient(circle at 18% 2%, rgba(245, 197, 24, .13), transparent 12rem),
            linear-gradient(180deg, var(--bisu-purple-950), #170a2a) !important;
        box-shadow: 12px 0 36px rgba(29, 11, 53, .12);
    }

    .page-special-events .sidebar > h2 { margin-bottom: 12px !important; }
    .page-special-events .sidebar a { margin-left: 12px; margin-right: 12px; }

    .page-special-events .workspace-tabs {
        padding: 5px;
        border: 1px solid var(--bisu-border);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--bisu-shadow-sm);
    }

    .page-special-events .workspace-tab {
        min-height: 40px;
        padding: 8px 14px;
        border: 0;
        border-radius: 8px;
        color: var(--bisu-muted);
        background: transparent;
        font-weight: 750;
    }

    .page-special-events .workspace-tab.active {
        color: #fff;
        background: linear-gradient(135deg, var(--bisu-purple-600), var(--bisu-purple-800));
        box-shadow: 0 5px 13px rgba(85, 34, 138, .18);
    }

    .page-special-events .search-wrap {
        border-radius: 10px !important;
        background: #fff;
    }

    .page-special-events .ready-indicator {
        color: #5b3a72 !important;
        background: var(--bisu-purple-100) !important;
        border: 1px solid #dbc8ee !important;
        border-radius: 999px;
    }

    .page-special-events .capture-img,
    .page-special-events .capture {
        border-radius: 9px !important;
        border-color: #d5c5e8 !important;
        box-shadow: var(--bisu-shadow-sm);
    }

    .page-special-events .modal-backdrop {
        background: rgba(22, 8, 39, .66) !important;
        backdrop-filter: blur(8px);
    }

    .page-special-events .payment-modal {
        border: 1px solid rgba(245, 197, 24, .35) !important;
        border-radius: 18px !important;
        box-shadow: var(--bisu-shadow-lg) !important;
    }

    .page-special-events .payment-modal-head {
        color: #fff;
        background: linear-gradient(135deg, var(--bisu-purple-950), var(--bisu-purple-700)) !important;
        border-bottom: 4px solid var(--bisu-gold-500) !important;
    }

    /* ---------------------------------------------------------------------
       Login screen
       --------------------------------------------------------------------- */
    body.page-login {
        position: relative;
        overflow-x: hidden;
        color: var(--bisu-text) !important;
        background:
            radial-gradient(circle at 8% 12%, rgba(245, 197, 24, .26), transparent 18rem),
            radial-gradient(circle at 92% 92%, rgba(11, 138, 71, .16), transparent 22rem),
            linear-gradient(135deg, var(--bisu-purple-950) 0%, #3b1763 52%, var(--bisu-navy-900) 100%) !important;
    }

    .page-login::before,
    .page-login::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .08);
        pointer-events: none;
    }
    .page-login::before { width: 480px; height: 480px; left: -230px; bottom: -260px; }
    .page-login::after { width: 620px; height: 620px; right: -370px; top: -340px; }

    .page-login .login-wrapper {
        position: relative;
        z-index: 1;
        max-width: 470px !important;
    }

    .page-login .brand-header {
        margin-bottom: 20px !important;
        color: #fff;
    }

    .page-login .brand-header::before {
        content: "";
        width: 94px;
        height: 94px;
        margin-bottom: 15px;
        border-radius: 50%;
        background: #fff url("../../bisu_logo.jpg") center / cover no-repeat;
        border: 3px solid var(--bisu-gold-500);
        box-shadow: 0 0 0 7px rgba(245, 197, 24, .13), 0 18px 42px rgba(0, 0, 0, .28);
    }

    .page-login .brand-header:has(.brand-logo)::before { display: none; }

    .page-login .brand-logo {
        width: 94px !important;
        height: 94px !important;
        max-width: 94px !important;
        max-height: 94px !important;
        padding: 3px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--bisu-gold-500);
        box-shadow: 0 0 0 7px rgba(245, 197, 24, .13), 0 18px 42px rgba(0, 0, 0, .28);
    }

    .page-login .brand-header h1 {
        color: #fff !important;
        font-size: clamp(1.65rem, 4vw, 2.15rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.04em !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .22);
    }

    .page-login .brand-header p {
        color: rgba(255, 255, 255, .76) !important;
        line-height: 1.55;
    }

    .page-login .login-card {
        position: relative;
        overflow: hidden;
        padding: 30px !important;
        border: 1px solid rgba(255, 255, 255, .68) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: var(--bisu-shadow-lg) !important;
        backdrop-filter: blur(18px);
    }

    .page-login .login-card::before {
        content: "University Account";
        display: block;
        margin: -30px -30px 26px;
        padding: 15px 30px;
        color: #fff;
        background: linear-gradient(135deg, var(--bisu-purple-900), var(--bisu-purple-700));
        border-bottom: 4px solid var(--bisu-gold-500);
        font-size: .78rem;
        font-weight: 850;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .page-login .form-group label {
        color: #4b365d !important;
        font-weight: 750 !important;
    }

    .page-login .form-group input {
        min-height: 46px;
        border: 1px solid #cfd5df !important;
        border-radius: 10px !important;
        box-shadow: var(--bisu-shadow-sm) !important;
    }

    .page-login .form-group input:focus {
        border-color: var(--bisu-purple-600) !important;
        box-shadow: var(--bisu-ring) !important;
    }

    .page-login .btn-submit {
        min-height: 46px;
        border-radius: 10px !important;
        background: linear-gradient(135deg, var(--bisu-purple-600), var(--bisu-purple-900)) !important;
        box-shadow: 0 8px 20px rgba(85, 34, 138, .24) !important;
        font-weight: 800 !important;
    }

    .page-login .btn-submit:hover {
        background: linear-gradient(135deg, var(--bisu-purple-700), var(--bisu-purple-950)) !important;
        transform: translateY(-1px);
    }

    .page-login .scanner-tile {
        min-height: 58px;
        margin-top: 16px !important;
        color: #24113f !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        border: 1px solid rgba(255, 255, 255, .46) !important;
        border-radius: 13px !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, .20) !important;
        font-weight: 850 !important;
    }

    .page-login .scanner-tile:hover {
        background: #ffe27a !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, .25) !important;
    }

    /* ---------------------------------------------------------------------
       Scanner / kiosk interface
       --------------------------------------------------------------------- */
    body.page-scanner {
        --bg: #130822;
        --panel: rgba(42, 18, 70, .82);
        --panel-strong: rgba(31, 12, 53, .97);
        --border: rgba(255, 216, 77, .18);
        --text: #fffdf6;
        --muted: #c5b8d5;
        --primary: var(--bisu-gold-500);
        --success: #35d47d;
        --danger: #ff777f;
        --warning: var(--bisu-gold-400);
        color-scheme: dark;
        background:
            radial-gradient(circle at 12% -12%, rgba(245, 197, 24, .20), transparent 30rem),
            radial-gradient(circle at 100% 100%, rgba(11, 138, 71, .16), transparent 32rem),
            linear-gradient(145deg, #11071f, #281044 52%, #111b55) !important;
    }

    .page-scanner .terminal::before {
        content: "";
        position: fixed;
        inset: 0 0 auto;
        height: 4px;
        z-index: 100;
        background: linear-gradient(90deg, var(--bisu-gold-500), var(--bisu-purple-600), var(--bisu-green-600));
        pointer-events: none;
    }

    .page-scanner .topbar {
        border: 1px solid rgba(255, 216, 77, .16) !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, rgba(59, 23, 99, .92), rgba(29, 11, 53, .88)) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .20) !important;
        backdrop-filter: blur(15px);
    }

    .page-scanner .brand img,
    .page-scanner .capture-popup-brandmark {
        border: 2px solid var(--bisu-gold-500) !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: 0 0 0 4px rgba(245, 197, 24, .10) !important;
    }

    .page-scanner .brand h1,
    .page-scanner .active-scan-name,
    .page-scanner .logs-title-wrap h2,
    .page-scanner .panel-heading h3 {
        color: #fff !important;
    }

    .page-scanner .brand-subtitle,
    .page-scanner .logs-subtitle,
    .page-scanner .active-scan-help {
        color: #c8bdd6 !important;
    }

    .page-scanner .connection-pill {
        border-color: rgba(255, 216, 77, .20) !important;
        background: rgba(29, 11, 53, .78) !important;
    }

    /* Keep the live camera section title clearly visible against the BISU panel. */
    .page-scanner .camera-header .live-capture-title {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 7px 11px;
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(245, 197, 24, .07)) !important;
        border: 1px solid rgba(255, 216, 77, .28);
        border-left: 4px solid var(--bisu-gold-500);
        border-radius: 10px;
        font-weight: 900 !important;
        line-height: 1.2;
        text-shadow:
            0 2px 3px rgba(0, 0, 0, .90),
            0 0 12px rgba(255, 255, 255, .22) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .08),
            0 5px 14px rgba(0, 0, 0, .16);
    }

    /* High-contrast scanner clock: presentation only. */
    .page-scanner #live-time {
        color: #ffffff !important;
        border-color: rgba(255, 216, 77, .78) !important;
        border-left-color: var(--bisu-gold-500) !important;
        background: linear-gradient(135deg, rgba(6, 3, 12, .82), rgba(59, 23, 99, .80)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 0 0 3px rgba(245, 197, 24, .09),
            0 8px 22px rgba(0, 0, 0, .30) !important;
        text-shadow:
            0 2px 3px rgba(0, 0, 0, .92),
            0 0 12px rgba(255, 255, 255, .36),
            0 0 22px rgba(245, 197, 24, .20) !important;
    }

    .page-scanner .glass-card,
    .page-scanner .logs-panel,
    .page-scanner .settings-panel,
    .page-scanner .mode-setup-card,
    .page-scanner .install-guide-card {
        border-color: rgba(255, 216, 77, .16) !important;
        background: linear-gradient(145deg, rgba(48, 20, 80, .90), rgba(25, 10, 44, .92)) !important;
        box-shadow: 0 20px 48px rgba(0, 0, 0, .24) !important;
    }

    .page-scanner .camera-viewport {
        border-color: rgba(245, 197, 24, .30) !important;
        background: #08040d !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 0 0 1px rgba(245, 197, 24, .06) !important;
    }

    .page-scanner .camera-guide,
    .page-scanner .capture-popup-frame-corners {
        border-color: var(--bisu-gold-500) !important;
    }

    .page-scanner .mode-banner,
    .page-scanner .active-scan-indicator,
    .page-scanner .capture-popup-live-chip {
        color: #251239 !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        border-color: rgba(255, 255, 255, .35) !important;
    }

    .page-scanner .icon-btn,
    .page-scanner .camera-actions button,
    .page-scanner .setup-action,
    .page-scanner .quick-mode-button,
    .page-scanner .mode-footer-button.activate,
    .page-scanner .mode-install-action,
    .page-scanner .refresh-events-button {
        border-color: rgba(245, 197, 24, .25) !important;
    }

    .page-scanner .mode-footer-button.activate,
    .page-scanner .mode-install-action,
    .page-scanner .setup-action:not(.secondary) {
        color: #251239 !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        box-shadow: 0 8px 20px rgba(245, 197, 24, .14) !important;
        font-weight: 850 !important;
    }

    .page-scanner .mode-choice:hover,
    .page-scanner .mode-choice.selected,
    .page-scanner .quick-mode-button:hover {
        border-color: var(--bisu-gold-500) !important;
        background: rgba(245, 197, 24, .10) !important;
        box-shadow: 0 0 0 3px rgba(245, 197, 24, .08) !important;
    }

    .page-scanner input,
    .page-scanner select {
        border-color: rgba(255, 216, 77, .20) !important;
        background: rgba(12, 6, 22, .76) !important;
    }

    .page-scanner input:focus,
    .page-scanner select:focus {
        border-color: var(--bisu-gold-500) !important;
        box-shadow: 0 0 0 3px rgba(245, 197, 24, .12) !important;
    }

    .page-scanner .scan-feedback {
        border-color: rgba(245, 197, 24, .34) !important;
        background: rgba(29, 11, 53, .92) !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
        backdrop-filter: blur(16px);
    }

    .page-scanner .mobile-toolbar {
        border-top-color: rgba(245, 197, 24, .18) !important;
        background: rgba(25, 10, 44, .96) !important;
        backdrop-filter: blur(18px);
    }

    .page-scanner .mobile-action.active,
    .page-scanner .mobile-action:hover {
        color: var(--bisu-gold-400) !important;
    }

    .page-scanner .capture-popup-brandbar {
        border-bottom: 4px solid var(--bisu-gold-500) !important;
        background: linear-gradient(135deg, var(--bisu-purple-950), var(--bisu-purple-700)) !important;
    }

    .page-scanner .capture-popup-card {
        border: 1px solid rgba(245, 197, 24, .32) !important;
        border-radius: 22px !important;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .38) !important;
    }

    /* ---------------------------------------------------------------------
       Standalone maintenance / upgrade / queue pages
       --------------------------------------------------------------------- */
    body.page-utility {
        min-height: 100vh;
        color: var(--bisu-text) !important;
        background:
            radial-gradient(circle at 5% 5%, rgba(245, 197, 24, .14), transparent 22rem),
            radial-gradient(circle at 100% 100%, rgba(109, 46, 170, .10), transparent 25rem),
            var(--bisu-canvas) !important;
    }

    .page-utility .shell,
    .page-utility > .card,
    .page-utility .card {
        border: 1px solid var(--bisu-border) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: var(--bisu-shadow) !important;
    }

    .page-utility > .card,
    .page-utility .shell {
        position: relative;
        overflow: hidden;
    }

    .page-utility > .card::before,
    .page-utility .shell::before {
        content: "BOHOL ISLAND STATE UNIVERSITY";
        display: block;
        margin: -1px -1px 22px;
        padding: 15px 22px;
        color: #fff;
        background: linear-gradient(135deg, var(--bisu-purple-950), var(--bisu-purple-700));
        border-bottom: 4px solid var(--bisu-gold-500);
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .13em;
    }

    .page-utility .header h1,
    .page-utility h1,
    .page-utility h2 {
        color: var(--bisu-purple-950) !important;
        letter-spacing: -.03em;
    }

    .page-utility .btn,
    .page-utility button,
    .page-utility .actions a:not(.secondary) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px !important;
        color: #fff !important;
        background: linear-gradient(135deg, var(--bisu-purple-600), var(--bisu-purple-900)) !important;
        border-color: transparent !important;
        box-shadow: 0 6px 16px rgba(85, 34, 138, .18) !important;
        font-weight: 750 !important;
    }

    .page-utility .btn.secondary,
    .page-utility .secondary,
    .page-utility .actions a.secondary {
        color: var(--bisu-purple-800) !important;
        background: #fff !important;
        border: 1px solid #d9cbea !important;
        box-shadow: var(--bisu-shadow-sm) !important;
    }

    .page-utility .btn.danger,
    .page-utility button.danger {
        color: #fff !important;
        background: linear-gradient(135deg, #dc3b3b, #a91e2a) !important;
    }

    .page-utility table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .page-utility th {
        color: #51366a !important;
        background: #f7f2fb !important;
    }

    .page-utility .notice,
    .page-utility .status,
    .page-utility .error-text {
        border-radius: 10px !important;
    }

    /* ---------------------------------------------------------------------
       Printable screens: only modernize controls; printed documents remain intact.
       --------------------------------------------------------------------- */
    body.page-print {
        background: var(--bisu-canvas) !important;
    }

    .page-dtr .no-print {
        border: 1px solid var(--bisu-border) !important;
        border-top: 4px solid var(--bisu-purple-700) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: var(--bisu-shadow) !important;
    }

    .page-dtr .no-print input,
    .page-dtr .no-print select {
        min-height: 40px;
        border: 1px solid #ccd3df !important;
        border-radius: 8px !important;
    }

    .page-dtr .no-print input:focus,
    .page-dtr .no-print select:focus {
        outline: none;
        border-color: var(--bisu-purple-600) !important;
        box-shadow: var(--bisu-ring) !important;
    }

    .page-dtr .no-print .btn {
        min-height: 40px;
        border-radius: 8px !important;
        background: linear-gradient(135deg, var(--bisu-purple-600), var(--bisu-purple-900)) !important;
        box-shadow: 0 5px 13px rgba(85, 34, 138, .17) !important;
    }

    .page-dtr .no-print .btn-print {
        background: linear-gradient(135deg, var(--bisu-green-600), #066733) !important;
    }

    .page-dtr .dtr-wrapper {
        border: 1px solid #dfe3ea;
        box-shadow: 0 18px 42px rgba(25, 16, 38, .12) !important;
    }

    .page-student-ids .screen-toolbar {
        border-bottom: 4px solid var(--bisu-gold-500) !important;
        background: linear-gradient(135deg, rgba(29, 11, 53, .99), rgba(85, 34, 138, .99)) !important;
        box-shadow: 0 14px 35px rgba(29, 11, 53, .28) !important;
    }

    .page-student-ids .toolbar-btn.primary,
    .page-student-ids .toolbar-btn.apply {
        color: #251239 !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        border-color: rgba(255, 255, 255, .35) !important;
    }

    .page-student-ids .template-picker,
    .page-student-ids .custom-template-panel,
    .page-student-ids .filters,
    .page-student-ids .print-guide {
        border-color: var(--bisu-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--bisu-shadow-sm) !important;
    }

    /* Offline fallback page */
    body.page-offline {
        min-height: 100vh;
        display: grid;
        place-items: center;
        color: #fff !important;
        background:
            radial-gradient(circle at 12% 10%, rgba(245, 197, 24, .18), transparent 20rem),
            linear-gradient(135deg, var(--bisu-purple-950), var(--bisu-navy-900)) !important;
    }

    .page-offline main,
    .page-offline .card {
        position: relative;
        border: 1px solid rgba(255, 216, 77, .22) !important;
        border-radius: 20px !important;
        background: rgba(41, 17, 69, .88) !important;
        box-shadow: var(--bisu-shadow-lg) !important;
        backdrop-filter: blur(16px);
    }

    .page-offline main::before,
    .page-offline .card::before {
        content: "";
        display: block;
        width: 84px;
        height: 84px;
        margin: 0 auto 18px;
        border-radius: 50%;
        background: #fff url("../../bisu_logo.jpg") center / cover no-repeat;
        border: 3px solid var(--bisu-gold-500);
        box-shadow: 0 0 0 6px rgba(245, 197, 24, .11);
    }

    .page-offline h1 { color: #fff !important; }
    .page-offline p { color: #d2c7df !important; }
    .page-offline a,
    .page-offline button {
        color: #251239 !important;
        background: linear-gradient(135deg, var(--bisu-gold-400), var(--bisu-gold-500)) !important;
        border-radius: 9px !important;
        font-weight: 800 !important;
    }

    /* ---------------------------------------------------------------------
       Persistent desktop sidebar
       Keeps navigation visible while the document content scrolls.
       Presentation only; no application behavior is changed.
       --------------------------------------------------------------------- */
    @media (min-width: 761px) {
        body.page-dashboard .sidebar,
        body.page-special-events .sidebar {
            position: sticky !important;
            top: 0;
            align-self: start;
            height: 100vh !important;
            height: 100dvh !important;
            min-height: 100vh;
            min-height: 100dvh;
            max-height: 100vh;
            max-height: 100dvh;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            z-index: 40;
        }

        .page-special-events .layout {
            align-items: start;
        }
    }

    /* ---------------------------------------------------------------------
       Responsive behavior
       --------------------------------------------------------------------- */
    @media (max-width: 980px) {
        .page-dashboard .sidebar { width: 238px !important; min-width: 238px; }
        .page-dashboard .main-content::before,
        .page-special-events .content::before { left: 238px; }
        .page-special-events .layout { grid-template-columns: 238px minmax(0, 1fr) !important; }
        .page-dashboard .main-content,
        .page-special-events .content { padding: 20px !important; }
    }

    @media (max-width: 760px) {
        body.page-dashboard { overflow: auto !important; height: auto !important; min-height: 100vh; flex-direction: column; }
        .page-dashboard .sidebar,
        .page-special-events .sidebar {
            position: relative;
            width: 100% !important;
            min-width: 0;
            max-height: none;
            box-shadow: 0 12px 30px rgba(29, 11, 53, .15) !important;
        }
        .page-dashboard .sidebar::after { display: none; }
        .page-dashboard .sidebar-header,
        .page-special-events .sidebar > h2 { min-height: 76px; padding: 14px 18px !important; }
        .page-dashboard .sidebar-header::before,
        .page-special-events .sidebar > h2::before { width: 42px; height: 42px; flex-basis: 42px; }
        .page-dashboard .nav-links { padding: 8px 10px 12px !important; display: flex; gap: 6px; overflow-x: auto; }
        .page-dashboard .nav-links a { flex: 0 0 auto; white-space: nowrap; }
        .page-dashboard .nav-links a.active::after,
        .page-special-events .sidebar a.active::after { display: none; }
        .page-dashboard .btn-sidebar-scan { margin: 6px 10px 12px !important; }
        .page-dashboard .main-content { overflow: visible !important; }
        .page-dashboard .main-content::before,
        .page-special-events .content::before { left: 0; }
        .page-special-events .layout { display: block !important; }
        .page-special-events .sidebar { padding-bottom: 10px !important; }
        .page-special-events .sidebar a { display: inline-flex !important; margin: 3px 2px !important; }
        .page-dashboard .header,
        .page-special-events .topbar,
        .page-special-events .header { padding: 17px 18px; border-radius: 14px; }
        .page-dashboard .header-actions,
        .page-special-events .top-actions { width: 100%; }
        .page-dashboard .header-actions .btn,
        .page-special-events .top-actions .btn { flex: 1 1 auto; }
    }

    @media (max-width: 520px) {
        .page-dashboard .main-content,
        .page-special-events .content { padding: 14px !important; }
        .page-dashboard .header,
        .page-special-events .topbar,
        .page-special-events .header { padding: 15px 15px 15px 18px; }
        .page-dashboard .card,
        .page-special-events .card { padding: 16px !important; border-radius: 14px !important; }
        .page-login .login-card { padding: 24px !important; }
        .page-login .login-card::before { margin: -24px -24px 22px; padding-left: 24px; }
        .page-login .brand-header::before,
        .page-login .brand-logo { width: 82px !important; height: 82px !important; }
    }
}

@media print {
    /* Theme intentionally leaves generated reports, DTRs, and student IDs unchanged. */
    body.page-dashboard .sidebar,
    body.page-special-events .sidebar,
    body.page-dashboard .main-content::before,
    body.page-special-events .content::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}