:root {
    /* Brand Palette */
    --primary: #204164;         /* OECTA Navy */
    --primary-hover: #162e4a;
    --accent: #f39c12;          /* OECTA Orange */
    --accent-hover: #d68910;

    /* UI Colors */
    --bg-app: #f8fafc;
    --bg-panel: #ffffff;
    --text-main: #2d3748;
    --text-muted: #64748b;
    --border: #e2e8f0;

    /* Status Colors */
    --success: #38a169;
    --error: #e53e3e;
    --warning: #dd6b20;

    /* Dimensions */
    --rail-width: 80px;
    --header-height: 85px;
    --app-height: 100dvh;

    /* Z-INDEX LAYERS */
    --z-base: 1;
    --z-nav: 500;               /* Header/Footer/Sidebar */
    --z-drawer: 600;            /* Slide-out drawer */
    --z-modal: 5000;            /* Modals */
    --z-picker: 6000;           /* Google Picker */
    --z-app-overlay: 9000;      /* Kiosk & Login Screens */
}

/* ── Dark Mode ────────────────────────────────────────────────────── */
body.dark-mode {
    --bg-app: #0f1419;
    --bg-panel: #1a2332;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border: #2d3a4a;
    --primary: #4a90d9;
    --primary-hover: #3a7bc8;
    color-scheme: dark;
}

/* Global catch-all: invert hardcoded text colors and backgrounds */
body.dark-mode,
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color:#2d3748"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color: #2d3748"],
body.dark-mode [style*="color: #334155"] {
    color: #e2e8f0 !important;
}

body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color:#718096"],
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color: #718096"],
body.dark-mode [style*="color:#94a3b8"],
body.dark-mode [style*="color: #94a3b8"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: #475569"] {
    color: #94a3b8 !important;
}

/* Surfaces */
body.dark-mode .admin-layout,
body.dark-mode .portal-main,
body.dark-mode .main-panel {
    background-color: #0f1419 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .event-drawer {
    background: #1a2332 !important;
    border-color: #2d3a4a !important;
}

body.dark-mode .event-card,
body.dark-mode .data-card,
body.dark-mode .card,
body.dark-mode .settings-card,
body.dark-mode .modal-content,
body.dark-mode .waffle-panel,
body.dark-mode .profile-dropdown,
body.dark-mode .member-card,
body.dark-mode .event-detail-header {
    background: #1a2332 !important;
    border-color: #2d3a4a !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

body.dark-mode .waffle-tile:hover { background: #243044 !important; }
body.dark-mode .waffle-tile-label { color: #94a3b8 !important; }
body.dark-mode .waffle-category-label { color: #64748b !important; }
body.dark-mode .waffle-divider { background: #2d3a4a !important; }

/* Header */
body.dark-mode #global-dash-nav {
    background: #111827 !important;
    border-bottom-color: #2d3a4a !important;
}

body.dark-mode .dash-nav-icon-btn { color: #94a3b8 !important; }
body.dark-mode .dash-nav-icon-btn:hover { background: rgba(255,255,255,0.06) !important; }

body.dark-mode .header-search-input,
body.dark-mode [id*="search"] input,
body.dark-mode .search-input {
    background: #1a2332 !important;
    color: #e2e8f0 !important;
    border-color: #2d3a4a !important;
}

/* Tables and grids */
body.dark-mode table { background: #1a2332 !important; color: #e2e8f0 !important; }
body.dark-mode th { background: #1e293b !important; color: #94a3b8 !important; border-color: #2d3a4a !important; }
body.dark-mode td { border-color: #2d3a4a !important; color: #e2e8f0 !important; }
body.dark-mode tr:hover td { background: rgba(255,255,255,0.03) !important; }

/* AG Grid */
body.dark-mode .ag-theme-alpine,
body.dark-mode .ag-theme-balham {
    --ag-background-color: #1a2332;
    --ag-header-background-color: #1e293b;
    --ag-odd-row-background-color: #1e2a3a;
    --ag-row-hover-color: #243044;
    --ag-foreground-color: #e2e8f0;
    --ag-secondary-foreground-color: #94a3b8;
    --ag-border-color: #2d3a4a;
    --ag-header-foreground-color: #94a3b8;
    --ag-input-border-color: #2d3a4a;
}

/* Inputs */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-input {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #2d3a4a !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #4a90d9 !important;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.15) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #64748b !important; }

/* Buttons */
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline { background: #1e293b !important; color: #e2e8f0 !important; border-color: #2d3a4a !important; }
body.dark-mode .btn-secondary:hover { background: #243044 !important; }

body.dark-mode .member-card:hover { background: #1e293b !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; }
body.dark-mode .modal-overlay { background: rgba(0,0,0,0.65) !important; }

/* Settings */
body.dark-mode .settings-view,
body.dark-mode .settings-section-title,
body.dark-mode .settings-label { color: #e2e8f0 !important; }
body.dark-mode .settings-hint { color: #94a3b8 !important; }
body.dark-mode .settings-rail-item { background: #1e293b !important; border-color: #2d3a4a !important; color: #e2e8f0 !important; }

/* Footer */
body.dark-mode .app-footer { background: #111827 !important; border-top-color: #2d3a4a !important; color: #94a3b8 !important; }

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar-track { background: #0f1419; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #2d3a4a; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3d4a5a; }

/* Event drawer/list */
body.dark-mode .event-list-item { border-color: #2d3a4a !important; color: #e2e8f0 !important; }
body.dark-mode .event-list-item:hover { background: #1e293b !important; }
body.dark-mode .event-status-badge { border-color: #2d3a4a !important; }
body.dark-mode .filter-bar,
body.dark-mode .quick-filter-wrapper { background: #1a2332 !important; border-color: #2d3a4a !important; }

/* Inline-styled backgrounds */
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background: #f1f5f9"] {
    background: #1a2332 !important;
}

body.dark-mode [style*="border:1px solid #e2e8f0"],
body.dark-mode [style*="border: 1px solid #e2e8f0"],
body.dark-mode [style*="border-color:#e2e8f0"],
body.dark-mode [style*="border-bottom:1px solid #e"],
body.dark-mode [style*="border-bottom: 1px solid #e"] {
    border-color: #2d3a4a !important;
}

/* ── User Appearance Preferences ──────────────────────────────────── */

/* Font family override (applied via JS to body) */
body[data-font="system"] { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
body[data-font="inter"] { font-family: 'Inter', 'Segoe UI', sans-serif !important; }
body[data-font="manrope"] { font-family: 'Manrope', 'Segoe UI', sans-serif !important; }
body[data-font="roboto"] { font-family: 'Roboto', 'Segoe UI', sans-serif !important; }
body[data-font="opendyslexic"] { font-family: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif !important; }

body[data-font] *:not(.material-icons):not(.material-icons-outlined) {
    font-family: inherit !important;
}

/* Line spacing override */
body[data-line-spacing] { line-height: var(--user-line-spacing) !important; }
body[data-line-spacing] p,
body[data-line-spacing] li,
body[data-line-spacing] td,
body[data-line-spacing] span,
body[data-line-spacing] div { line-height: inherit !important; }

/* Word spacing override */
body[data-word-spacing] { word-spacing: var(--user-word-spacing) !important; }
body[data-word-spacing] p,
body[data-word-spacing] li,
body[data-word-spacing] td,
body[data-word-spacing] span,
body[data-word-spacing] div { word-spacing: inherit !important; }

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* App-like feel */
}




/* ==========================================================================
   2. GLOBAL LAYOUT (The Foundation)
   ========================================================================== */

/* The root container: A horizontal flexbox that fills the screen */
.admin-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: var(--bg-app);
}

/* Admin body: icon rail + portal-main side by side, fills remaining height */
.admin-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* 2a. THE ICON RAIL — Auto-hide sidebar */
.icon-rail {
    --rail-icon-color: rgba(255, 255, 255, 0.55);
    --rail-icon-size: 22px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--rail-width);
    background: var(--rail-bg, linear-gradient(180deg, #1a2e44 0%, #0f1f33 100%));
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    z-index: 9000;
    overflow: visible;
    /* Slide off the left edge by default */
    transform: translateX(calc(-1 * var(--rail-width)));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
}

/* Scrollable inner area for rail items when they overflow */
.icon-rail-scroll {
    flex: 1;
    min-height: 0; /* critical for flex overflow scrolling */
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.icon-rail-scroll::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* Invisible hover trigger zone extending into the visible area */
.icon-rail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 18px;
    height: 100%;
    cursor: pointer;
}

/* Visible pull-tab handle — indicates a drawer menu on the left */
.icon-rail::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 14px;
    height: 48px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #2a4a6b 0%, #1a2e44 100%);
    opacity: 0.7;
    box-shadow: 2px 0 8px rgba(15, 31, 51, 0.25);
    transition: opacity 0.25s ease, box-shadow 0.25s ease;
    z-index: 1;
    pointer-events: none;
}

/* Reveal rail on hover (or when settings dropdown is open) */
.icon-rail:hover,
.icon-rail:has(.settings-popover:not(.hidden)) {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(15, 31, 51, 0.22);
}

.icon-rail:hover::before,
.icon-rail:has(.settings-popover:not(.hidden))::before {
    opacity: 0;
}

/* Fade-in for rail items when revealed */
.icon-rail .rail-item,
.icon-rail .rail-item-container {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.icon-rail:hover .rail-item,
.icon-rail:hover .rail-item-container,
.icon-rail:has(.settings-popover:not(.hidden)) .rail-item,
.icon-rail:has(.settings-popover:not(.hidden)) .rail-item-container {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.12s;
}


.rail-item {
    width: calc(100% - 12px);
    margin: 0 6px 4px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    color: var(--rail-icon-color, rgba(255, 255, 255, 0.55));
    transition: all 0.2s ease;
    border-radius: 8px;
    border-left: none;
    position: relative;
}

.rail-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* The visual highlight for the active view */
.rail-item.active {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2) 0%, rgba(254, 165, 32, 0.12) 100%) !important;
    color: #fea520 !important;
    border-left: none !important;
    box-shadow: inset 0 0 0 1px rgba(243, 156, 18, 0.2);
}

.rail-item.active .material-icons {
    color: #fea520 !important;
}

.rail-item .material-icons {
    font-size: var(--rail-icon-size, 22px);
    transition: transform 0.15s ease;
}

.rail-item:hover .material-icons {
    transform: scale(1.08);
}

.rail-text {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1;
    margin-top: 4px;
    width: 100%;
    padding: 0 4px;
    pointer-events: none;
    color: inherit;
}


.portal-main {
    flex: 1;
    min-width: 0;
    min-height: 0; /* do not use height:100% — resolves to 100vh instead of flex-allocated height */
    position: relative;
    overflow: hidden;
    background-color: var(--bg-app);
    display: flex;
    flex-direction: column;
    /* 45px clearance for the fixed footer */
    padding-bottom: 45px;
}


.calendar-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    /* Fill vertical space */
    width: 100%;
    height: 100%;
    /* Ensure it reaches the bottom */
    overflow: hidden;
    background: white;

}

/* Global header: must not shrink in the flex-column admin-layout */
#global-dash-nav {
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-nav); /* 500 — above all panel content so search dropdown overlays correctly */
    width: 100%;
}

/* All views (Dashboard, Venues, etc.) are panels inside the portal.
   Header is now outside portal-main, so panels start at top: 0. */
.main-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background-color: #f8fafc;
    z-index: 10;
    overflow: hidden;
    padding: 0 !important;
}

/* Panel-specific toolbars: no orange top border (global nav has it) */
.panel-toolbar {
    border-top: none !important;
    box-shadow: 0 1px 0 #e8edf3 !important;
}

/* Inside a .main-panel (overflow:hidden), position:sticky breaks — use relative instead */
.main-panel .dash-nav.panel-toolbar {
    position: relative !important;
    top: auto !important;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   EVENT MANAGEMENT HERO
   Dark navy gradient command bar — replaces the old dash-nav on panel-event
   ═══════════════════════════════════════════════════════════════════════ */

.event-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 28px 0 0;
    height: 100px;
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(110deg, #152a40 0%, #1e3d5c 50%, #204164 100%);
    box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* Left accent stripe */
.event-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent);
    flex-shrink: 0;
}

/* Subtle diagonal texture */
.event-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 40px,
        rgba(255,255,255,0.012) 40px,
        rgba(255,255,255,0.012) 80px
    );
    pointer-events: none;
}

/* ── Back button ── */
.event-hero-back {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-left: 20px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    position: relative; z-index: 1;
}
.event-hero-back:hover {
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}
.event-hero-back .material-icons { font-size: 20px; }

/* ── Identity block ── */
.event-hero-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative; z-index: 1;
}

.event-hero-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Meta row ── */
.event-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.event-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.event-hero-meta-item .material-icons {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

.event-hero-sep {
    color: rgba(255,255,255,0.25);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Thin vertical rule before the stat badges */
.event-hero-meta-rule {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
    margin: 0 4px;
}

/* Stat badges (checked-in, print, quorum) */
.event-hero-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.event-hero-stat .material-icons { font-size: 12px; }

/* Quorum states — reuse existing class names */
.event-hero-stat.quorum-met    { background: rgba(56,161,105,0.25); border-color: rgba(56,161,105,0.5); color: #9ae6b4; }
.event-hero-stat.quorum-pending{ background: rgba(243,156,18,0.2);  border-color: rgba(243,156,18,0.4); color: #fbd38d; }
.event-hero-stat.quorum-danger { background: rgba(229,62,62,0.2);   border-color: rgba(229,62,62,0.4);  color: #feb2b2; }

/* ── Right controls ── */
.event-hero-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    position: relative; z-index: 1;
}

/* Tool icon strip */
.event-hero-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.hero-tool {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.hero-tool:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.95);
}
.hero-tool .material-icons { font-size: 18px; }
.hero-tool.hero-tool-purple { color: rgba(188,155,255,0.75); }
.hero-tool.hero-tool-purple:hover { color: rgba(188,155,255,1); }
.hero-tool.hero-tool-green  { color: rgba(104,211,145,0.75); }
.hero-tool.hero-tool-green:hover  { color: rgba(104,211,145,1); }

/* Vertical divider in tool strip */
.event-hero-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.16);
    margin: 0 6px;
    flex-shrink: 0;
}

/* LIVE toggle — on dark bg */
.hero-live-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    user-select: none;
    padding: 0 4px;
}

.hero-live-toggle input { display: none; }

.hero-live-toggle .switch-rail {
    width: 34px;
    height: 18px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
}

.hero-live-toggle .switch-rail::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}

.hero-live-toggle input:checked + .switch-rail {
    background: #38a169;
    border-color: #38a169;
}

.hero-live-toggle input:checked + .switch-rail::after {
    transform: translateX(16px);
    background: #ffffff;
}

/* Primary action buttons */
.event-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-btn-kiosk {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    backdrop-filter: blur(4px);
}
.hero-btn-kiosk:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
}
.hero-btn-kiosk .material-icons { font-size: 17px; }

.hero-btn-draw {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(243,156,18,0.45);
    transition: filter 0.2s, box-shadow 0.2s;
}
.hero-btn-draw:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 18px -2px rgba(243,156,18,0.6);
}
.hero-btn-draw .material-icons { font-size: 17px; }

#panel-calendar .calendar-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    /* This fills the space between header and footer */
    width: 100%;
    overflow: hidden;
}

#panel-calendar .cal-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#panel-calendar .cal-grid-body {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    /* This ensures all 5-6 weeks stretch to fill the height */
    overflow: hidden;
}

/* Active State */
.main-panel.active {
    display: flex !important;
    /* Force Flexbox so the Header stays at top */
    animation: fadeIn 0.2s ease-out;
    
}


/* The Days Header (Sun, Mon...) */
.cal-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 0;
    flex-shrink: 0;
    /* Important: Don't let it scroll away */
}

.cal-day-name {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cal-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Ensure the grid itself scrolls */
.cal-grid-body {
    flex: 1;
    /* Grow to fill vertical space */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    /* Forces rows to expand equally to fill total height */
    overflow: hidden;
    /* No internal scrollbars needed if 1fr is used */
    background: white;


}

.cal-cell {
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 8px;
    background: white;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    /* Important for flex/grid stretching */
}

.cal-cell:hover {
    background: #f8fafc;
}

.cal-date-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 5px;
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
}

.cal-cell.today .cal-date-num {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 4px rgba(243, 156, 18, 0.4);
}

/* The Glow effect for jumped-to events */
.highlight-target {
    z-index: 5;
    box-shadow: inset 0 0 0 3px var(--accent) !important;
    background-color: #fff9db !important;
    /* Soft yellow highlight */
    transition: background-color 0.5s ease;
}


.cal-cell.highlight-target {
    background-color: #fff9db !important;
    /* Soft Glow */
    outline: 2px solid var(--accent);
    z-index: 5;
}











/* Full Width Mode (for Calendar/Builder) — keeps icon rail visible */
.full-width-mode .main-panel {
    max-width: 100%;
    padding: 0;
}

/* ==========================================================================
   2b. EVENT DRAWER (The Middle Column)
   ========================================================================== */
.event-drawer {
    width: 320px;
    background: white;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 45;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.3s ease;
    overflow: hidden;
}

/* The "Folded" State */
.drawer-collapsed .event-drawer {
    width: 0;
    padding: 0;
    opacity: 0;
    border: none;
    pointer-events: none;
}

.drawer-collapsed #drawer-new-btn-container {
    display: none;
}

.drawer-collapsed #drawer-new-btn-container {
    display: none;
}

@media (min-width: 769px) {
    .drawer-collapsed #rail-new-btn {
        display: flex;
    }

    .admin-layout:not(.drawer-collapsed) #rail-new-btn {
        display: none;
    }
}




.admin-layout:not(.drawer-collapsed) #drawer-new-btn-container {
    display: block;
}


.drawer-collapsed .new-event-dropdown-container {
    display: none;
}


/* --- 3. THE ELEGANT NEW BUTTON (Rail Version) --- */
#rail-new-btn {
    display: none;
    /* Hidden by default */
    width: 48px;
    height: 48px;
    margin: 5px auto 20px auto;
    border-radius: 14px;
    background: rgba(254, 165, 32, 0.15);
    border: 1px solid rgba(254, 165, 32, 0.25);
    box-shadow: 0 2px 8px rgba(15, 31, 51, 0.2);
    align-items: center;
    justify-content: center;
    color: #fea520;
    cursor: pointer;
    color: #3c4043;
    transition: background 0.2s;
}

.rail-new-btn:hover {
    background-color: rgba(254, 165, 32, 0.25);
    box-shadow: 0 4px 12px rgba(254, 165, 32, 0.2);
}

.rail-new-btn .material-icons {
    font-size: 28px;
    color: #fea520;
}

.rail-header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 0 8px 0;
    background: transparent;
    border: none;
}

.rail-burger {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #5f6368;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rail-burger:hover {
    background-color: rgba(60, 64, 67, 0.08);
    color: var(--primary);
}

.rail-burger .material-icons {
    font-size: 24px;
}

.drawer-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0;
    transition: transform 0.3s ease;
}


.drawer-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Gmail/Drive Left Align */
    gap: 20px;
    padding: 30px 25px 20px 25px;
    background-color: white;
    border-bottom: 1px solid var(--border);
}

.btn-add-drive {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Icon and text align to the left */
    gap: 12px;
    width: auto;
    min-width: 160px;
    /* Standard "New Event" width */
    background-color: white;
    border: 1px solid #dadce0;
    border-radius: 24px;
    /* The Google pill shape */
    padding: 12px 24px 12px 16px;
    /* Correct spacing: more on right for text */
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.1s;
    font-family: 'Google Sans', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
}

.btn-add-drive:hover {
    box-shadow: 0 4px 6px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    background-color: #f8f9fa;
}


/* style2.css */
.btn-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    color: #64748b;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.btn-icon-small:hover {
    background: #f1f5f9;
    color: #204164;
    border-color: #cbd5e0;
}

.drive-style-menu {
    position: absolute;
    top: 0;
    left: 60px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 240px;
    z-index: 1000;
    padding: 8px 0;
    border: 1px solid #e2e8f0;
}







.menu-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.95em;
    font-weight: 500;
}

.menu-item:hover {
    background-color: #f1f5f9;
}

.menu-item .material-icons {
    color: var(--text-muted);
    font-size: 20px;
}

.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 5px 0;
}

.search-row {
    margin-top: 5px;
}

.drawer-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-app);
    font-size: 0.9em;
}

.drawer-search:focus {
    background-color: white;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(32, 65, 100, 0.1);
    outline: none;
}

#sidebar-list {
    overflow-y: auto;
    flex-grow: 1;
    padding: 10px;
}

.event-list-item {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    background: white;
}

.event-list-item:hover {
    background-color: #f8fafc;
    border-color: var(--border);
}

.event-list-item.selected {
    background-color: #ebf8ff;
    border-color: var(--primary);
}

.event-card-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    font-size: 0.95em;
}

.event-card-date {
    font-size: 0.85em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* HIDE DRAWER IN FULL WIDTH MODE */
.full-width-mode .event-drawer {
    margin-left: -320px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

/* ==========================================================================
   2c. ADMIN SETTINGS POPOVER
   ========================================================================== */
.rail-item-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible !important;
    /* Ensure the popover can bleed outside the rail */

}

.settings-popover {
    position: absolute;
    left: 75px;
    bottom: 60px;
    /* Lifted higher from the bottom */
    width: 240px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    z-index: 9500;
    padding: 8px 0;
    transform-origin: bottom left;
    animation: slideUpFade 0.2s ease-out;

}

.popover-header {
    padding: 10px 15px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    margin-bottom: 5px;
}

.popover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s;
}

.popover-item:hover {
    background-color: #f1f5f9;
    color: var(--primary);
}

.popover-item .material-icons {
    font-size: 20px;
    color: var(--text-muted);
}

.popover-item:hover .material-icons {
    color: var(--primary);
}

.hidden {
    display: none !important;
}


/* --- DRAG AND DROP VISUALS --- */
.material-strip {
    cursor: grab;
    /* Shows the user they can move it */
}

.material-strip:active {
    cursor: grabbing;
}


/* The ghost image while dragging */
.material-strip.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    border-style: dashed;
}

.modal-body {
    padding: 32px;
    overflow-y: auto;
}

.form-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-grid-row>div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#tab-logistics>div:nth-child(2) {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 12px;
    margin: 24px 0;
}

.input-group {
    display: flex;
    gap: 5px;
}

/* Tooltip */
.tooltip-container {
    display: inline-flex;
    position: relative;
    margin-left: 8px;
    vertical-align: middle;
}

.tooltip-icon {
    width: 18px;
    height: 18px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: all 0.2s ease;
}

.tooltip-container:hover .tooltip-icon {
    background: var(--primary);
    color: white;
}

.tooltip-text {
    display: none !important;
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e293b;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    width: 240px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10001;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    text-align: center;
}

.tooltip-container:hover .tooltip-text {
    display: block !important;
    animation: fadeIn 0.2s ease-out;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Drive Feedback */
.valid-file {
    border-color: #38a169 !important;
    background-color: #f0fff4 !important;
    border-width: 2px !important;
}

.invalid-file {
    border-color: #e53e3e !important;
    background-color: #fff5f5 !important;
    border-width: 2px !important;
}

.permission-error {
    font-size: 0.75rem;
    margin-top: 4px;
    color: #c53030;
    display: none;
    font-weight: 600;
}

#evt-notes {
    font-family: inherit;
    line-height: 1.5;
    background-color: #fcfcfd;
    border-style: dashed;
    transition: all 0.3s ease;
}

#evt-notes:focus {
    border-style: solid;
    background-color: #ffffff;
}

.custom-pac-container {
    z-index: 25000 !important;
    /* Higher than the Location Modal (20000) */

    position: absolute;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    width: 100%;
    z-index: 10002;
    margin-top: 4px;
    display: none;
    overflow: hidden;
}

.pac-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.pac-item:hover {
    background-color: #f0f7ff;
    /* Light OECTA blue */
}

.pac-item-query {
    font-weight: 700;
    color: var(--primary);
    /* Navy */
    font-size: 0.95rem;
    line-height: 1.2;
}

.pac-item:last-child {
    border-bottom: none;
}



.custom-pac-container {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}


.nav-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(32, 65, 100, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(32, 65, 100, 0.3);
}

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

.btn-primary:disabled {
    background-color: #cbd5e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;

    opacity: 0.7;
}

.btn-secondary {
    background-color: white;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}


.btn-secondary:hover {

    color: var(--text-main);
    border-color: #cbd5e0;
    background: var(--accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);


}

.btn-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
}

.btn-action:hover {
    background-color: #f1f5f9;
    color: var(--primary);
}

.form-input,
.form-control,
#view-portal :where(select:not([class*="sd-"]):not([class*="sv-"]):not([class*="svc-"]):not([class*="spg-"]):not(#surveyCreatorContainer *)) {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.93rem;
    color: var(--text-main);
    background-color: #ffffff;
    transition: all 0.18s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(32, 65, 100, 0.1);
    background-color: #ffffff;
}

.card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.app-view {
    display: none !important;
    /* Force everything hidden by default */
    height: 100vh;
    width: 100vw;
    position: fixed;
    /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    overflow: hidden;
}

.app-view.active {
    display: flex !important;
    /* Only show when JS adds .active */
    flex-direction: column;
}



/* ── LOGIN SCREEN — Split-panel redesign ─────────────────────────────────── */

#view-login {
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: white;
    z-index: var(--z-app-overlay) !important;
}

/* HIDE UI ELEMENTS WHEN LOGIN IS ACTIVE */
body:has(#view-login.active) .icon-rail,
body:has(#view-login.active) .dash-nav,
body:has(#view-login.active) .app-footer,
body:has(#view-login.active) .event-drawer {
    display: none !important;
}

/* ── Left branded panel ───────────────────────────────────────────────────── */
.login-brand-panel {
    width: 52%;
    background: linear-gradient(160deg, #1a3554 0%, #204164 45%, #162e4a 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 64px 72px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* decorative ring top-right */
.login-brand-panel::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    top: -180px;
    right: -160px;
    pointer-events: none;
}

/* warm glow bottom-left */
.login-brand-panel::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.13) 0%, transparent 70%);
    bottom: -80px;
    left: -80px;
    pointer-events: none;
}

.login-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.login-brand-logo {
    width: 170px;
    height: auto;
    display: block;
    opacity: 0.97;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.4));
}

.login-brand-name {
    color: white;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px 0;
    letter-spacing: -0.3px;
    text-align: center;
}

.login-brand-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin: 0 0 28px 0;
    text-align: center;
}

.login-brand-rule {
    width: 44px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto 20px auto;
}

.login-brand-desc {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.85rem;
    line-height: 1.8;
    margin: 0;
    text-align: center;
}

.login-brand-copy {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.72rem;
    margin: 0;
    text-align: center;
}

/* ── Right form panel ─────────────────────────────────────────────────────── */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 72px;
    background: white;
    overflow-y: auto;
}

.login-form-inner {
    width: 100%;
    max-width: 360px;
}

.login-form-heading h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a202c;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.login-form-heading p {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 36px 0;
    line-height: 1.6;
}

.login-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.login-google-btn:hover {
    border-color: #cbd5e0;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.login-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

.login-or-divider::before,
.login-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.login-or-divider span {
    white-space: nowrap;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.login-field {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}

.login-field:focus {
    background: white !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(32, 65, 100, 0.1) !important;
    outline: none;
}

.login-forgot {
    font-size: 0.82rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.login-forgot:hover {
    text-decoration: underline;
}

.login-submit-btn {
    width: 100%;
    padding: 13px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    letter-spacing: 0.2px;
}

.login-submit-btn:hover {
    background: #1a3554;
    box-shadow: 0 4px 16px rgba(32, 65, 100, 0.28);
    transform: translateY(-1px);
}

.login-submit-btn:active {
    transform: translateY(0);
}

/* ── LOGIN ANIMATIONS & EFFECTS ──────────────────────────────────────────── */

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

@keyframes loginFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes floatOrbA {
    0%, 100% { transform: translateY(0)   rotate(0deg)  scale(1); }
    40%       { transform: translateY(-22px) rotate(8deg)  scale(1.05); }
    70%       { transform: translateY(10px)  rotate(-4deg) scale(0.97); }
}

@keyframes floatOrbB {
    0%, 100% { transform: translateY(0)   rotate(0deg); }
    50%       { transform: translateY(18px) rotate(-10deg); }
}

@keyframes pulseRing {
    0%   { transform: scale(1);    opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0; }
}

@keyframes accentRuleGrow {
    from { width: 0; }
    to   { width: 44px; }
}

@keyframes shimmerBtn {
    from { left: -100%; }
    to   { left: 150%; }
}

/* entrance: left panel content */
.login-brand-inner {
    animation: loginFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.login-brand-copy {
    animation: loginFadeIn 1s ease 0.5s both;
}

/* entrance: right form */
.login-form-inner {
    animation: loginFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

/* accent rule grows in */
.login-brand-rule {
    animation: accentRuleGrow 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
    width: 0;
}

/* dot grid overlay */
.login-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
    animation: loginFadeIn 1.5s ease 0.3s both;
}

/* floating orbs */
.login-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.login-orb-1 {
    width: 200px;
    height: 200px;
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    top: 18%;
    right: 6%;
    animation: floatOrbA 9s ease-in-out infinite;
}

.login-orb-2 {
    width: 110px;
    height: 110px;
    border: 1px solid rgba(243, 156, 18, 0.18);
    bottom: 22%;
    right: 18%;
    animation: floatOrbB 12s ease-in-out 1s infinite;
}

.login-orb-3 {
    width: 60px;
    height: 60px;
    background: rgba(243, 156, 18, 0.07);
    top: 55%;
    right: 32%;
    animation: floatOrbA 7s ease-in-out 2.5s infinite reverse;
}

/* logo pulse ring */
.login-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 125px;
    top:100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 55%, transparent 75%);
    box-shadow: 0 0 80px rgba(255,255,255,0.07), inset 0 0 60px rgba(255,255,255,0.04);
}

.login-logo-wrap::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    animation: pulseRing 3.2s ease-out infinite;
}

.login-brand-logo {
    top: 125px;
    width: 300px;
    height: auto;
    margin-bottom: 0;
    filter: drop-shadow(0 8px 40px rgba(0,0,0,0.5));
}

/* sign-in button shimmer on hover */
.login-submit-btn {
    position: relative;
    overflow: hidden;
}

.login-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
}

.login-submit-btn:hover::after {
    animation: shimmerBtn 0.55s ease forwards;
}

/* google button animated border on hover */
.login-google-btn {
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
}

.login-google-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
    #view-login { flex-direction: column !important; }

    .login-brand-panel {
        width: 100%;
        padding: 32px;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        flex-shrink: 0;
    }

    .login-logo-wrap { margin-bottom: 0; }
    .login-brand-logo { width: 52px; }
    .login-brand-name { font-size: 1.05rem; }
    .login-brand-label, .login-brand-rule,
    .login-brand-desc, .login-brand-copy { display: none; }
    .login-orb, .login-dot-grid { display: none; }

    .login-form-panel { padding: 36px 24px; align-items: flex-start; }
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* DASHBOARD & CALENDAR */
.sys-dash {
    animation: fadeIn 0.3s ease-out;
}

.dash-section-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    margin-top: 30px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}

.upcoming-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    justify-content: start;
    /* Aligns grid items to the left */
}

.quick-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.quick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.quick-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 5px;
}

.quick-card-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

.quick-card-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.detail-unit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.detail-unit .material-icons {
    font-size: 18px;
    color: var(--text-muted);
    padding-top: 2px;
}

.detail-text {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.detail-val {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.overview-dashboard {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    display: none;
}

.overview-dashboard.visible {
    display: block;
    animation: slideUp 0.3s ease-out;
}

.ov-header {
    margin-bottom: 25px;
}

.ov-title {
    margin: 0;
    font-size: 2rem;
    color: var(--primary);
}

.ov-date {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-top: 5px;
}

.bubble-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.bubble {
    background: var(--bg-app);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border);
}

.bubble-val {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin: 10px 0;
}

.bubble-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}



/* EVENTS IN CALENDAR */
.cal-chip {
    position: relative;
    z-index: 2;

    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    display: block;
    cursor: pointer;
}

/* Layer Colors */
.chip-event {
    background: #ebf8ff;
    color: var(--primary);
    border-left: 3px solid var(--primary);
}

.chip-holiday {
    background: #fff5f5;
    color: #e53e3e;
    border-left: 3px solid #e53e3e;
}

.chip-office1 {
    background: #ebf8ff;
    color: #2b6cb0;
    border-left: 3px solid #3182ce;
}

.chip-office2 {
    background: #faf5ff;
    color: #553c9a;
    border-left: 3px solid #805ad5;
}

.chip-office3 {
    background: #f0fff4;
    color: #22543d;
    border-left: 3px solid #38a169;
}

.chip-office4 {
    background: #fffff0;
    color: #975a16;
    border-left: 3px solid #d69e2e;
}




/* Right side: The Sidebar */
.cal-sidebar {
    width: 280px;
    background: white;
    border-left: 1px solid #e2e8f0;
    padding: 25px;
    display: flex;
    flex-direction: column;
    z-index: 20;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.02);
}

/* HEADER CONTROLS (The Buttons) */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.btn-cal-nav {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: white;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-cal-nav:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}


.sidebar-heading {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.layer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 500;
}

.layer-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.sidebar-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 20px 0;
}


/* CONTEXT MENU */
.context-menu {
    position: absolute;
    background: white;
    width: 200px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    z-index: 5000;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

.context-header {
    background: #f8fafc;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.context-actions button {
    width: 100%;
    text-align: left;
    background: white;
    border: none;
    padding: 10px 15px;
    font-size: 0.85rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.context-actions button:hover {
    background: #f0f7ff;
    color: var(--primary);
}

.cal-event:hover {
    background: var(--primary);
    color: white;
}

.cal-event.past {
    opacity: 0.6;
    filter: grayscale(1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.event-dashboard-container {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    height: calc(100vh - 180px);
    margin-top: 20px;
}

.event-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px;
    padding: 20px;
    /* Fill whatever space remains below the panel toolbar in the flex-column panel */
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


.event-main-content {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.alert-card.question {
    border-left: 4px solid #805ad5;
    /* Purple */
    background: #faf5ff;
    border-color: #e9d8fd;
}

.event-panel {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.event-main-content .event-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    /* CRITICAL: Allows flex child to shrink and enable scrolling */


    overflow: visible !important;
    z-index: 100;
    /* Ensure header stays above the table body */
}

/* 3. Style the School Select to look more premium */
#filter-school {
    background-color: white;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
    border: 1px solid #cbd5e0;
    transition: all 0.2s;
}

#filter-school:hover {
    border-color: var(--primary);
    background-color: #f8fafc;
}

/* Prevent sidebar panels from shrinking too much */
.event-sidebar-right .event-panel {
    flex: 0 0 auto;
    /* Height determined by content/scroll */
    min-height: 100px;
}

.panel-header {
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-header .material-icons {
    color: #94a3b8;
    font-size: 20px;
}


.material-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-main);
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.material-link:hover {
    background-color: #f0f7ff;
    color: var(--primary);
}

.material-link .material-icons {
    margin-right: 12px;
    color: #3182ce;
    font-size: 20px;
}

.alert-card {
    margin: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
}

.alert-card.dietary {
    border-left: 4px solid #e53e3e;
}

.alert-card.accom {
    border-left: 4px solid #3182ce;
    background: #ebf8ff;
    border-color: #bee3f8;
}

.alert-name {
    font-weight: 800;
    font-size: 0.85rem;
    color: #2d3748;
}

.alert-detail {
    font-size: 0.8rem;
    color: #4a5568;
    margin-top: 2px;
}

.table-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    vertical-align: middle;
}

.table-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.table-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: .3s;
    border-radius: 20px;
}

.table-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked+.table-slider {
    background-color: #38a169;
}

input:checked+.table-slider:before {
    transform: translateX(14px);
}

.row-attended {
    background-color: #f0fff4 !important;
    transition: background-color 0.4s ease;
}

/* ── Bulk Selection ── */
.bulk-selected { background-color: #eff6ff !important; }
.bulk-row-chk, .bulk-select-all { cursor: pointer; width: 16px; height: 16px; accent-color: var(--primary, #204164); }
.bulk-action-bar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    background: var(--primary, #204164); color: #fff;
    padding: 10px 18px; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    z-index: 9000;
    animation: bulkBarIn 0.2s ease-out;
}
@keyframes bulkBarIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.bulk-action-bar.hidden { display: none; }
.bulk-action-count { font-size: 0.85rem; font-weight: 700; margin-right: 6px; white-space: nowrap; }
.bulk-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; padding: 6px 12px; border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.bulk-action-btn:hover { background: rgba(255,255,255,0.25); }
.bulk-action-btn .material-icons { font-size: 16px; }
.bulk-action-btn--clear {
    background: transparent; border: none; padding: 6px;
    margin-left: 4px; opacity: 0.7;
}
.bulk-action-btn--clear:hover { opacity: 1; }

.status-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.arrival-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
}

.arrival-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* style2.css */

.status-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

.arrival-status-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #38a169;
    /* Success Green */
    text-transform: uppercase;
    margin-top: 4px;
    display: none;
    line-height: 1;
}

/* Show the label only when the row has the attended class */
.row-attended .arrival-status-label {
    display: block;
}

.arrival-time {
    font-size: 0.55rem;
    color: #94a3b8;
    /* Subtle Grey */
    font-weight: 500;
    margin-top: 2px;
    display: block;
}

.slider-round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: .4s;
    border-radius: 34px;
}

.slider-round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider-round {
    background-color: #38a169;
}

input:checked+.slider-round:before {
    transform: translateX(20px);
}

.arrival-time {
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    height: 12px;
}




.toggle-locked {
    cursor: not-allowed !important;
    opacity: 0.8;
}

.arrival-toggle input:disabled+.slider-round {
    background-color: #38a169;
}

.arrival-time {
    font-size: 0.55rem;
    color: #718096;
    white-space: nowrap;
}

/* ==========================================================================
   5. CALENDAR CELLS (COMPACT GRID FOR SCHOOL YEAR CONFIG)
   ========================================================================== */
.month-block {
    background: white;
    padding: 12px;
    /* Reduced from 20 */
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.month-name {
    text-align: center;
    font-weight: 800;
    color: #204164;
    margin-bottom: 8px;
    /* Reduced */
    text-transform: uppercase;
    font-size: 0.8rem;
    /* Smaller font */
}

.day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    /* Tighter gap */
}

.day-header {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
}

.day-cell {
    aspect-ratio: 1.1;
    /* Slightly wider than tall to save vertical space */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    /* Smaller font */
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    color: #334155;
    position: relative;
}

/* Stat Decorator size fix */
.stat-decorator {
    font-size: 0.5em;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* ==========================================================================
   FINAL FIX: SCHOOL YEAR CONFIGURATOR & SIDEBAR
   ========================================================================== */

/* 1. AGGRESSIVE HIDING (Prevents Leak to Dashboard) */
#panel-calendar-config {
    z-index: -9999;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* 2. ACTIVE STATE (The Actual View - Global Override) */
#panel-calendar-config.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    background: #f8fafc;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0 !important;

    /* --- ADD THESE LINES TO FIX VISIBILITY --- */
    opacity: 1 !important;
    pointer-events: auto !important;


}

.dash-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    height: var(--header-height);
    padding: 0 32px 0 40px;

    position: sticky;
    top: 0;
    z-index: var(--z-nav);

    background: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e8edf3;
    border-top: 6px solid var(--accent);
    box-shadow: 0 4px 24px -4px rgba(32, 65, 100, 0.1);
}

/* Brand group: logo + divider + title text */
.dash-nav-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* Back-to-dashboard button — hidden by default, shown in event-mode */
.header-back-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.header-back-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateX(-2px);
}

.header-back-btn .material-icons {
    font-size: 20px;
}

/* Back button hidden in event-mode — the event hero has its own back button */
.event-mode .header-back-btn {
    display: none;
}

.dash-nav-divider {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, transparent, #dde3ec, transparent);
    flex-shrink: 0;
}

.dash-nav-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dash-nav-title-main {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.2px;
    line-height: 1.2;
    white-space: nowrap;
}

.dash-nav-title-sub {
    font-size: 0.63rem;
    font-weight: 700;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Nav title always visible — event drawer is now hidden */
.admin-layout:not(.drawer-collapsed) .dash-nav-title,
.admin-layout:not(.drawer-collapsed) .dash-nav-divider {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* User area: email + role pill */
.dash-nav-user-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dash-user-email {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-role-pill {
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    padding: 4px 13px;
    border-radius: 20px;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: rgba(32, 65, 100, 0.07);
    white-space: nowrap;
}

.dash-role-pill[data-role="developer"] {
    background: rgba(107, 70, 193, 0.08);
    border-color: #6b46c1;
    color: #6b46c1;
}

.dash-nav-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

.dash-nav-icon-btn .material-icons {
    font-size: 18px;
}

.dash-nav-icon-btn:hover {
    background: #f0f4f9;
    color: var(--primary);
}

.dash-nav-icon-btn--logout:hover {
    background: #fff5f5;
    color: #e53e3e;
}

/* ── Profile Corner ────────────────────────────────────────────────── */
.profile-avatar-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    border: none; cursor: pointer; font-weight: 700; font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.5px; transition: box-shadow 0.15s;
}
.profile-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(32,65,100,0.2); }

/* ── Google-style Profile Menu ─────────────────────────────────────── */
.gp-menu {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 16px;
    width: 360px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
    z-index: 9600;
    overflow: hidden;
    animation: waffleSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
}

.gp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    transition: background 0.15s;
    z-index: 1;
}

.gp-close:hover {
    background: rgba(0,0,0,0.06);
}

.gp-close .material-icons {
    font-size: 20px;
}

.gp-email-banner {
    padding: 16px 48px 12px;
    font-size: 0.82rem;
    color: #5f6368;
}

.gp-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 16px;
}

.gp-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary, #204164);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.gp-greeting {
    font-size: 1.4rem;
    font-weight: 700;
    color: #202124;
    margin-bottom: 2px;
}

.gp-full-name {
    font-size: 0.82rem;
    color: #5f6368;
}

.gp-manage-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    margin: 12px 0 16px;
    border: 1.5px solid #dadce0;
    border-radius: 99px;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a73e8;
    transition: background 0.15s, border-color 0.15s;
}

.gp-manage-btn:hover {
    background: #f0f4ff;
    border-color: #d2e3fc;
}

.gp-divider {
    height: 1px;
    background: #e8eaed;
    margin: 0 20px;
}

.gp-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    font-size: 0.9rem;
    color: #3c4043;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
}

.gp-menu-item:hover {
    background: #f1f3f4;
}

.gp-menu-item .material-icons {
    font-size: 20px;
    color: #5f6368;
    width: 24px;
    text-align: center;
}

.gp-menu-item--logout {
    color: #d93025;
}

.gp-menu-item--logout .material-icons {
    color: #d93025;
}

.gp-menu-item--logout:hover {
    background: #fce8e6;
}

.gp-footer {
    padding: 12px 24px 16px;
    display: flex;
    justify-content: center;
}

/* Dark mode overrides for profile menu */
body.dark-mode .gp-menu {
    background: #1a2332 !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
}

body.dark-mode .gp-close { color: #94a3b8 !important; }
body.dark-mode .gp-close:hover { background: rgba(255,255,255,0.06) !important; }
body.dark-mode .gp-email-banner { color: #94a3b8 !important; }
body.dark-mode .gp-greeting { color: #e2e8f0 !important; }
body.dark-mode .gp-full-name { color: #94a3b8 !important; }
body.dark-mode .gp-manage-btn { color: #4a90d9 !important; border-color: #2d3a4a !important; }
body.dark-mode .gp-manage-btn:hover { background: rgba(74,144,217,0.1) !important; }
body.dark-mode .gp-divider { background: #2d3a4a !important; }
body.dark-mode .gp-menu-item { color: #e2e8f0 !important; }
body.dark-mode .gp-menu-item:hover { background: #243044 !important; }
body.dark-mode .gp-menu-item .material-icons { color: #94a3b8 !important; }
body.dark-mode .gp-menu-item--logout { color: #f87171 !important; }
body.dark-mode .gp-menu-item--logout .material-icons { color: #f87171 !important; }
body.dark-mode .gp-menu-item--logout:hover { background: rgba(248,113,113,0.1) !important; }

/* ── Waffle Menu ───────────────────────────────────────────────────── */
/* ── Waffle Menu (Google-style app launcher) ──────────────────────── */
/* ── Waffle Menu (Google-style app launcher) ──────────────────────── */
.waffle-panel {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 16px;
    width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    background: #f0f4f9;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
    z-index: 9600;
    padding: 20px 14px 24px;
    animation: waffleSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes waffleSlideIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.waffle-header {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f1f1f;
    padding: 2px 10px 14px;
}

.waffle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0;
}

.waffle-category-label {
    grid-column: 1 / -1;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5f6368;
    padding: 12px 8px 4px;
}

.waffle-category-label:first-child {
    padding-top: 0;
}

.waffle-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: #dadce0;
    margin: 10px 6px 4px;
}

.waffle-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s;
    gap: 8px;
}

.waffle-tile:hover {
    background: rgba(255,255,255,0.8);
}

.waffle-tile:active {
    background: #e8eaed;
}

.waffle-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}

.waffle-tile:hover .waffle-tile-icon {
    transform: scale(1.1);
}

.waffle-tile-icon .material-icons,
.waffle-tile-icon .material-icons-outlined {
    font-size: 24px;
    color: #fff;
}

.waffle-tile-label {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #3c4043;
    line-height: 1.25;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waffle-tile-external {
    color: inherit;
}

.waffle-tile-external .waffle-tile-label {
    color: #3c4043;
}

/* Scrollbar */
.waffle-panel::-webkit-scrollbar { width: 4px; }
.waffle-panel::-webkit-scrollbar-track { background: transparent; }
.waffle-panel::-webkit-scrollbar-thumb { background: #bdc1c6; border-radius: 4px; }
.waffle-panel::-webkit-scrollbar-thumb:hover { background: #80868b; }


/* ── Settings Panel — Categorized Layout ───────────────────────────── */

.stg-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.stg-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-panel, #fff);
    border-right: 1px solid var(--border, #e2e8f0);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.stg-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 20px 18px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #1e293b);
}

.stg-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    text-align: left;
    width: 100%;
    transition: all 0.12s;
    border-left: 3px solid transparent;
}

.stg-nav-item:hover {
    background: rgba(32, 65, 100, 0.04);
    color: var(--text-main, #1e293b);
}

.stg-nav-item.active {
    background: rgba(32, 65, 100, 0.06);
    color: var(--primary, #204164);
    font-weight: 600;
    border-left-color: var(--primary, #204164);
}

.stg-nav-item .material-icons {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.stg-content {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

.stg-content-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 32px;
}

/* Dark mode */
body.dark-mode .stg-sidebar {
    background: #111827 !important;
    border-color: #2d3a4a !important;
}

body.dark-mode .stg-sidebar-header { color: #e2e8f0 !important; }
body.dark-mode .stg-nav-item { color: #94a3b8 !important; }
body.dark-mode .stg-nav-item:hover { background: rgba(255,255,255,0.04) !important; color: #e2e8f0 !important; }
body.dark-mode .stg-nav-item.active { background: rgba(74,144,217,0.1) !important; color: #4a90d9 !important; border-left-color: #4a90d9 !important; }

/* Responsive: stack on narrow screens */
@media (max-width: 700px) {
    .stg-layout { flex-direction: column; }
    .stg-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        gap: 4px;
        border-right: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
    }
    .stg-nav-item {
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 8px 12px;
        white-space: nowrap;
        font-size: 0.8rem;
    }
    .stg-nav-item.active { border-bottom-color: var(--primary); border-left-color: transparent; }
    .stg-nav-item .material-icons { font-size: 18px; }
    .stg-content-inner { padding: 20px 16px; }
}

/* ── Settings — Section Styles ─────────────────────────────────────── */
.settings-section { margin-bottom: 32px; }
.settings-section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; color: #1e293b;
    margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0;
}
.settings-section-title .material-icons { font-size: 22px; color: var(--primary); }
.settings-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 18px 20px; margin-bottom: 12px;
}
.settings-label { font-size: 0.82rem; font-weight: 600; color: #334155; display: block; margin-bottom: 6px; }
.settings-hint { font-size: 0.78rem; color: #94a3b8; margin: 0 0 10px; }
.settings-color-input { width: 44px; height: 32px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px; cursor: pointer; }
.settings-presets { display: flex; gap: 6px; }
.settings-preset-swatch {
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    transition: transform 0.1s; display: inline-block;
}
.settings-preset-swatch:hover { transform: scale(1.2); }
.settings-radio-group { display: flex; flex-direction: column; gap: 6px; }
.settings-radio-group label { font-size: 0.88rem; color: #475569; cursor: pointer; display: flex; align-items: center; gap: 6px; }

/* Dark mode toggle switch */
.dark-mode-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.dark-mode-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dark-mode-slider {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 99px;
    transition: background 0.25s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.dark-mode-slider::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode-toggle input:checked + .dark-mode-slider {
    background: #334155;
}

.dark-mode-toggle input:checked + .dark-mode-slider::after {
    transform: translateX(24px);
    background: #f39c12;
}

.dark-mode-icon-sun {
    color: #f39c12;
    z-index: 1;
}

.dark-mode-icon-moon {
    color: #94a3b8;
    z-index: 1;
}

.dark-mode-toggle input:checked + .dark-mode-slider .dark-mode-icon-sun {
    color: #64748b;
}

.dark-mode-toggle input:checked + .dark-mode-slider .dark-mode-icon-moon {
    color: #f39c12;
}

/* Font selector buttons */
.settings-font-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    transition: all 0.15s;
}

.settings-font-btn span:first-child {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary, #204164);
    width: 28px;
    text-align: center;
}

.settings-font-btn:hover {
    border-color: var(--primary, #204164);
    background: rgba(32, 65, 100, 0.03);
}

.settings-font-btn.active {
    border-color: var(--primary, #204164);
    background: rgba(32, 65, 100, 0.06);
    font-weight: 700;
    color: var(--primary, #204164);
    box-shadow: 0 0 0 1px var(--primary, #204164);
}

body.dark-mode .settings-font-btn {
    background: #1e293b !important;
    border-color: #2d3a4a !important;
    color: #e2e8f0 !important;
}

body.dark-mode .settings-font-btn.active {
    border-color: #4a90d9 !important;
    background: rgba(74,144,217,0.1) !important;
    color: #4a90d9 !important;
}

/* Range slider */
.settings-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e2e8f0;
    border-radius: 99px;
    outline: none;
    cursor: pointer;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary, #204164);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.1s;
}

.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary, #204164);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

body.dark-mode .settings-slider {
    background: #2d3a4a !important;
}

body.dark-mode .settings-slider::-webkit-slider-thumb {
    background: #4a90d9;
    border-color: #1a2332;
}

.settings-rail-list { list-style: none; padding: 0; margin: 0; }
.settings-rail-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
    margin-bottom: 4px; background: #fff; cursor: grab;
}
.settings-rail-item:active { cursor: grabbing; }
.settings-rail-item.rail-drag-over { border-top: 3px solid var(--accent); margin-top: -3px; }
.settings-rail-item.rail-dragging { opacity: 0.35; }
.settings-rail-drag { color: #cbd5e1; font-size: 20px; cursor: grab; }
.settings-rail-item-label { flex: 1; font-size: 0.9rem; font-weight: 500; color: #334155; }
.settings-rail-vis-btn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; }
.settings-rail-vis-btn:hover { background: #f1f5f9; }

.settings-link-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; font-size: 0.92rem; color: #334155;
    cursor: pointer; border-radius: 8px; transition: background 0.1s;
}
.settings-link-item:hover { background: #f1f5f9; }
.settings-link-item .material-icons:first-child { font-size: 20px; color: var(--primary); }

/* ── Rail Customization ─────────────────────────────────────────────── */
.icon-rail { background: var(--rail-bg, white); }
.rail-item .material-icons.rail-icon { font-size: var(--rail-icon-size, 24px); }
.rail-item.rail-drag-over { border-top: 3px solid var(--accent); margin-top: -3px; }
.rail-item.rail-dragging { opacity: 0.35; }
.rail-item[draggable="true"] { cursor: grab; }
.rail-item[draggable="true"]:active { cursor: grabbing; }


/* 3. FLOATING HEADER (Save Button Area) */
#panel-calendar-config.active .dash-nav {
    flex-shrink: 0;
    margin: 0;
    width: 100%;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    z-index: 110;
}

/* 4. SPLIT LAYOUT CONTAINER (Sidebar + Grid) */
#panel-calendar-config.active .config-layout {
    display: flex !important;
    flex-direction: row !important;
    flex: 1;
    width: 100%;
    height: calc(100vh - 100px);
    /* Fill remaining height */
    overflow: hidden;
    padding: 0;
    gap: 0;
}


/* OPTIONAL: Ensure date inputs don't force width issues */
.config-sidebar input[type="date"] {
    min-width: 0;
    width: 100%;
}


/* 5. SIDEBAR (The Tool Bar) */
#panel-calendar-config.active .config-sidebar {
    display: flex !important;
    flex-direction: column;

    /* UPDATED: Increased width to 380px */
    width: 380px !important;
    min-width: 380px !important;
    flex: 0 0 380px !important;

    height: 100%;
    background: white;
    border-right: 1px solid #e2e8f0;

    /* UPDATED: Increased right padding to 45px */
    padding: 25px 45px 25px 25px !important;

    overflow-y: auto;
    z-index: 5500;
}

/* 6. GRID AREA (The Calendar - Expanded) */
#panel-calendar-config.active .config-grid-wrapper {
    flex: 1;
    height: 100%;
    background: #f1f5f9;
    overflow-y: auto;
    padding: 20px 40px 100px 40px;
    /* Generous side padding, huge bottom padding */
    display: block;
}




#panel-calendar-config.active .calendar-container {
    width: 100%;
    max-width: none !important;
    display: grid;
    /* This will now pack as many months as possible into your screen width */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 25px;
    align-content: start;
}

/* Compact Month Cards to maximize density */
.month-block {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
}

.month-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


/* 7. PAINT TOOLS STYLING (Restoring Buttons) */
#panel-calendar-config .tool-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    text-align: left;
}

#panel-calendar-config .tool-btn:hover {
    background: #e2e8f0;
}

#panel-calendar-config .tool-btn.active {
    background: #ebf8ff;
    border-color: #3182ce;
    color: #204164;
}

/* RESTORED MISSING CLASS: Instructional Day Counters */
.inst-day-num {
    position: absolute;
    bottom: 2px;
    /* Slightly raised from the bottom edge */
    left: 50%;
    /* Move to middle of parent */
    transform: translateX(-50%);
    /* Center perfectly based on text width */

    font-size: 0.55rem;
    color: #94a3b8;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
    z-index: 5;
}


/* 1. Stat Holiday (Red) */
.day-cell.is-holiday {
    background-color: #FED7D7;
    color: #C53030;
    font-weight: 700;
    border-color: #FEB2B2;
}

/* 2. PA Day (Orange) */
.day-cell.is-pa {
    background-color: #FEEBC8;
    color: #C05621;
    font-weight: 700;
    border-color: #FBD38D;
}

/* 3. Board Holiday (Purple) */
.day-cell.is-board {
    background-color: #E9D8FD;
    color: #6B46C1;
    font-weight: 700;
    border-color: #D6BCFA;
}

/* 4. Fixed Stat Holiday (Immutable - Dashed Red) */
.day-cell.is-stat-immutable {
    background-color: #FFF5F5;
    color: #E53E3E;
    border: 1px dashed #FEB2B2;
    /* Dashed border distinguishes fixed holidays */
}

.inst-day-over {
    color: #e53e3e !important;
    /* Red if over target */
    font-weight: 800;
}



/* Dots and Badges */
#panel-calendar-config .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

#panel-calendar-config .dot-holiday {
    background: #E53E3E;
}

#panel-calendar-config .dot-pa {
    background: #DD6B20;
}

#panel-calendar-config .dot-board {
    background: #805AD5;
}

#panel-calendar-config .badge-count {
    margin-left: auto;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

#panel-calendar-config .tool-btn.active .badge-count {
    background: white;
    color: #204164;
}

/* Stats Box */
#panel-calendar-config .stats-box {
    margin-top: auto;
    background: #204164;
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}



/* ==========================================================================
   FORM BUILDER: MASTER LAYOUT & STYLING FIXES
   ========================================================================== */

/* --- PART 1: LAYOUT (Full Screen & Flex) --- */




/* 2. Header Bar (Name Input & Save Button) */
#forms-editor-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding: 0 25px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    z-index: 200;
}





@keyframes winnerPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}



#wheel-container {
    position: relative;
    background: white;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

    /* 
       STRICT SQUARE LOGIC:
       We anchor EVERYTHING to the height (vh) and force width to match.
    */
    height: 60vh;
    /* Anchor size to viewport height */
    width: 60vh;
    /* Force width to be identical */
    aspect-ratio: 1 / 1;
    /* Modern browser override */

    /* 
       FLEXBOX PROTECTION: 
       Stop the parent flexbox from trying to resize this.
    */
    flex: 0 0 auto;
    /* Do not grow, do not shrink */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Centering */
    margin: 30px auto;
}

#prize-canvas {
    /* 
       The canvas should fill the strict square container perfectly.
       We use object-fit: contain as a final safety measure.
    */
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

#wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}


/* Meeting Header Info Items */
.header-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.header-meta-item .material-icons {
    font-size: 16px;
    color: var(--primary);
}

.attendance-badge {
    background: #ebf8ff;
    color: #2b6cb0;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #bee3f8;
    margin-left: 5px;
}

.eligible-name {
    color: #4a5568;
    font-weight: 600;

    padding: 5px 0;
    border-bottom: 1px solid #edf2f7 !important;
    opacity: 1 !important;
}

#spinner-modal .modal-header {
    background-color: #204164 !important;
    /* OECTA Navy */
    color: #ffffff !important;
    border-bottom: 1px solid #162e4a;
}


/* Full screen adjustment for the wheel */
:fullscreen .modal-box {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}


#spinner-modal .modal-header h3 {
    color: #ffffff !important;
}

#spinner-modal .btn-icon-round-large {
    background: rgba(255, 255, 255, 0.2);
    /* Semi-transparent white button */
    color: white !important;
    transition: all 0.2s ease;

}

#spinner-modal .btn-icon-round-large:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: rotate(45deg);
    /* Subtle gear turn or X tilt */
}

#spinner-modal .btn-icon-round-large:active {
    transform: scale(0.9);
}


#spinner-names-sidebar {
    background: #ffffff !important;
    /* White sidebar */
    border-right: 1px solid #e2e8f0 !important;
    color: #204164 !important;
    /* Navy text */
}

#spinner-modal .modal-box {
    background: #f4f7f9 !important;
    /* Ensure the light grey background */
    border: 1px solid #cbd5e0;
}



/* --- SPINNER SPLIT SIDEBAR --- */
#spinner-names-sidebar {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    /* Remove default padding, use inner containers */
}

.spin-side-section {
    flex: 1;
    /* Both take equal height initially */
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    overflow: hidden;
    border-bottom: 1px solid #e2e8f0;
}

.spin-side-section:last-child {
    border-bottom: none;
    background: #fffaf0;
    /* Slight tint for winners log */
}

.spin-side-header {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scroll-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

/* Winner Log Items in Spinner */
.mini-log-item {
    font-size: 0.85rem;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-log-item .material-icons {
    font-size: 14px;
}

.log-claimed {
    color: #38a169;
}

.log-absent {
    color: #e53e3e;
    text-decoration: line-through;
    opacity: 0.7;
}



/* Subtle Header Gear */
.btn-icon-round-tiny {
    background: transparent;
    border: none;
    color: #cbd5e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    padding: 2px;
}

.btn-icon-round-tiny:hover {
    color: var(--primary);
}

/* Log Delete Button (Subtle Circle-X) */
.btn-log-delete {
    background: transparent;
    border: none;
    color: #e2e8f0;
    /* Very subtle initially */
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
    transition: all 0.2s;
}

.prize-item:hover .btn-log-delete {
    color: #cbd5e0;
}

/* Visible on row hover */
.btn-log-delete:hover {
    color: #e53e3e !important;
}

/* Red on direct hover */






















.modal-box {
    max-width: 950px;
    width: 90%;
    border-radius: 20px;
}

#btn-spin {
    transition: all 0.2s ease;
    transform: scale(1);
}

#btn-spin:hover:not(:disabled) {
    transform: scale(1.05);
    background: #e67e22 !important;
    /* Brighter orange on hover */
}

.btn-prize-claimed {
    background: #38a169 !important;
    /* Green */
    color: white;
}

/* The "Left Meeting" Button - Red and Outlined */
.btn-prize-absent {
    background: white !important;
    color: #e53e3e !important;
    /* Red */
    border: 2px solid #fed7d7 !important;
    transition: all 0.2s;
}

.btn-prize-absent:hover {
    background: #fff5f5 !important;
    border-color: #e53e3e !important;
}

.need-icon.prize-winner {
    color: #f39c12 !important;
    background: #fffaf0;
}

.need-icon.prize-absent {
    color: #e53e3e !important;
    background: #fff5f5;
}




/* style2.css */

.btn-icon-round-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-round-large:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.btn-danger-circle:hover {
    background: #e53e3e !important;
}

.spinner-tab {
    flex: 1;
    padding: 15px;
    border: none;
    background: none;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.spinner-tab.active {
    color: #204164;
    border-bottom-color: #204164;
    background: white;
}

.spin-setting-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Table Sorting Styles */
.sort-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.sort-icon-inline {
    font-size: 14px !important;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.3;
}

/* Needs Icons & Tooltips */
.icon-container {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
    margin-left: 8px;


    position: relative;
}

.icon-container:hover {
    z-index: 999;
    /* Brings the current row's tooltip to the very front */
}


.need-icon {
    font-size: 16px !important;
    cursor: help;
    position: relative;
    padding: 2px;
    border-radius: 4px;
}

.need-icon.dietary {
    color: #e53e3e;
    background: #fff5f5;
}

.need-icon.inclusion {
    color: #3182ce;
    background: #ebf8ff;
}

.need-icon.question {
    color: #805ad5;
    background: #faf5ff;
}

.need-icon.plusone {
    color: #38a169;
    background: #f0fff4;
}

/* The Hover Card (Tooltip) */
.need-icon .hover-card {
    visibility: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: white;
    font-family: sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    position: absolute;
    bottom: 150%;
    /* Raise it slightly higher above the icon */
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    width: max-content;
    /* Adjust width to content */
    max-width: 250px;
    font-size: 0.8rem;
    line-height: 1.4;
    z-index: 1000;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    text-align: left;
    white-space: normal;
    /* Allow text wrapping for long comments */
}





.need-icon:hover .hover-card {
    visibility: visible;
    opacity: 1;
}

.hover-card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #2d3748 transparent transparent transparent;
}








/* --- ANALYTICS TABS --- */

.analytics-tabs {
    display: flex;
    border-top: 1px solid #e2e8f0;
    margin: 0 -24px;
}

.analytics-tab {
    flex: 1;
    padding: 9px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.analytics-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: white;
}

.analytics-tab:hover:not(.active) {
    color: #475569;
    background: #f8fafc;
}

.analytics-panel-body {
    padding: 15px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* --- REGISTRANT DIRECTORY OVERHAUL --- */

.panel-body-scroll {
    flex: 1;
    overflow-y: auto !important;
    background: white;
    min-height: 0;
    position: relative;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    flex-direction: column;
}

.panel-body-scroll::-webkit-scrollbar {
    width: 8px;
}


.panel-body-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.panel-body-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.panel-body-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.reg-table {
    width: 100%;
    border-collapse: collapse;
}

.reg-table thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 10;
}



.col-status {
    width: 95px !important;
    padding-left: 15px !important;
    padding-right: 0 !important;
    vertical-align: middle !important;
}

.col-name {
    width: 35%;
    padding-left: 5px !important;
    /* Minimal gap between toggle and name */
}

/* 2. Re-balance remaining columns */
.col-school {
    width: auto;
}

.col-type {
    width: 140px;
    padding-right: 25px !important;
    text-align: center !important;
}


/* Align the status icon nicely with the text */
.col-status .header-content {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* 3. Header Polish: Ensure the "STATUS" text doesn't truncate at 95px */
.reg-table th.col-status {
    font-size: 0.65rem;
    /* Slightly smaller header font to fit the narrow col */
    letter-spacing: 0.5px;
    min-width: 110px !important;
    cursor: pointer;
}


/* Ensure Headers match the alignment */
.reg-table th.col-type {
    text-align: center !important;
    padding-right: 20px !important;
}

/* Ensure the pill doesn't hug the edges while centering */
.info-pill {
    display: inline-block;
    min-width: 90px;
    text-align: center;
}

/* 2. Header Styling */
.reg-table th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f8fafc;
    padding: 16px 15px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #edf2f7;
    text-align: left;
    white-space: nowrap;
    /* Prevent "STATUS" from wrapping */
    text-overflow: clip !important;
    /* Allow the word to show fully */
    overflow: visible !important;
}

/* 3. Row & Cell Polish */
.reg-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    word-wrap: break-word;
}

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

.reg-table tr:hover {
    background-color: #fcfdfe;
}

/* Attended Row - Softer Green */
.row-attended {
    background-color: #f0fff4 !important;
}

/* 4. Status Column Specifics (Stacked Date/Time) */
.status-cell-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center everything under the toggle */
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 55px;
    /* Fixed height for the whole cell */

}

.arrival-time-display {
    font-size: 0.65rem;
    font-weight: 800;
    color: #718096;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;


    /* FIX: Default to collapsed so the toggle centers vertically */
    margin-top: 0;
    min-height: 0;
    transition: all 0.2s ease-out;
}

/* Only apply spacing and height when content actually exists */
.arrival-time-display:not(:empty) {
    margin-top: 5px;
    min-height: 28px;
}

/* Month and Day (Bold) */
.arrival-time-display b {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #4a5568;
    /* Darker slate */
    letter-spacing: 0.5px;
}

/* Time (Subtle) */
.arrival-time-display span {
    display: block;
    font-size: 0.68rem;
    color: #94a3b8;
    /* Muted slate */
    font-weight: 600;
}


/* 5. Sort UI */
.sort-header {
    cursor: pointer;
    transition: color 0.2s;
    display: table-cell;
    vertical-align: middle;


}

.sort-header:hover {

    color: var(--primary);
}


.sort-icon-inline {

    font-size: 14px !important;
    vertical-align: middle;
    opacity: 0.3;
    font-size: 16px !important;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;

}


.sort-header.active .sort-icon-inline {
    opacity: 1;
    color: var(--primary);
}










/* 1. Ensure the table cell doesn't cut off the tooltip */
.reg-table td.col-name {
    overflow: visible !important;
    position: relative;
    z-index: auto;
    /* Default */
}


/* Ensure header content stays on one line */
.sort-header {
    white-space: nowrap;
    display: table-cell;
    /* Revert if flex was added */
    vertical-align: middle;
}

.sort-header span.material-icons {
    font-size: 16px !important;
    vertical-align: text-bottom;
    margin-left: 2px;
}

/* Adjust cell padding to be identical */
.reg-table th,
.reg-table td {
    padding: 12px 15px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle !important;

}





.prize-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}

.prize-item.winner {
    background: #f0fff4;
}

.prize-item.absentee {
    background: #fff5f5;
    opacity: 0.8;
}

.prize-item .material-icons {
    font-size: 20px;
}

.prize-item.winner .material-icons {
    color: #38a169;
}

.prize-item.absentee .material-icons {
    color: #e53e3e;
}

.prize-info {
    flex: 1;
}

.prize-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
}

.prize-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}


.need-icon.prize-winner {
    color: #f39c12 !important;
    /* OECTA Orange */
    background: #fffaf0;
    border: 1px solid #fbd38d;
}

.need-icon.prize-winner:hover {
    background: #fbd38d;
    color: #ffffff !important;
}

/* style2.css */

.attendance-badge.quorum-pending {
    background: #fefcbf;
    /* Pale Yellow */
    color: #b7791f;
    border: 1px solid #faf089;
    display: flex;
    align-items: center;
}

.attendance-badge.quorum-met {
    background: #c6f6d5;
    /* Bright Green */
    color: #22543d;
    border: 1px solid #9ae6b4;
    display: flex;
    align-items: center;
    animation: pulse-green 2s infinite;
    /* Optional subtle pulse */
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
    }
}

/* style2.css */




/* style2.css */

#mreg-search-section {
    position: relative;
    /* Anchor for the dropdown */
}

#mreg-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;

    /* The Unfold Animation */
    transform-origin: top;
    animation: slideDownUnfold 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDownUnfold {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

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

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
    animation: fadeInItem 0.2s ease-out both;
}

.search-item:hover {
    background: #f8fafc;
}

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

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

/* style2.css */

.manual-action-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border: 2px solid #edf2f7;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.manual-action-card:hover {
    border-color: var(--primary);
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Update the Results to not be absolute */
#mreg-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Remove position: absolute if it was there */
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
}

.search-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.search-item:hover {
    background: white;
    border-color: var(--primary);
    transform: translateX(5px);
}

.btn-icon-round-small {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    /* Matching your dashboard theme */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-icon-round-small:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-icon-round-small:active {
    transform: translateY(0);
}

/* style2.css */

/* Add this under the existing .material-link styles */
.material-link.pending {
    cursor: pointer;
    background: #fdfdfd;
    border-bottom: 1px dashed #e2e8f0;
}

.material-link.pending:hover {
    background: #f7fafc;
}

.material-link.pending:hover .material-icons {
    color: var(--primary) !important;
    /* Highlight icon on hover */
}

/* style2.css */

.material-link-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    background: white;
    transition: background 0.2s;
}

.material-link-container:hover {
    background: #f8fafc;
}

/* Ensure the main link still takes up most of the room */
.material-link-container .material-link {
    flex: 1;
    border-bottom: none;
    /* Removed border because container has it */
}

.material-actions {
    display: flex;
    gap: 4px;
    padding-right: 12px;
}

/* Small adjustments to make the action buttons subtle */
.material-actions .btn-icon-round-small {
    background: transparent;
    opacity: 0.5;
}

.material-link-container:hover .material-actions .btn-icon-round-small {
    opacity: 1;
    background: #edf2f7;
}

.material-actions .btn-icon-round-small:hover {
    background: #e2e8f0 !important;
}




.card-accent-bar {
    height: 4px;
    background: var(--primary);
    width: 100%;
}

.card-main-content {
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.card-date-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 65px;
    height: 70px;
    /* Slightly taller for the year */
    padding: 4px 0;
}

.card-date-badge .month {
    font-size: 0.65rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    line-height: 1;
}


.card-date-badge .day {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.1;
    margin: 2px 0;
}

.card-date-badge .year {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    line-height: 1;
}


.card-category {
    font-size: 0.65rem;
    font-weight: 800;
    color: #f39c12;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.card-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 8px;
}

.card-meta-row {
    display: flex;
    gap: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.meta-item .material-icons {
    font-size: 14px;
    color: #94a3b8;
}

.card-footer {
    margin-top: auto;
    background: #f8fafc;
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #475569;
}

.card-action-trigger {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 4px;
}


.premium-card.past {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

.premium-card.past .card-accent-bar {
    background-color: #cbd5e0 !important;
    /* Grey bar */
}

.premium-card.past .card-title {
    color: #64748b;
    /* Muted title */
}

.premium-card.past .card-date-badge {
    opacity: 0.7;
    filter: grayscale(1);
}

.premium-card.past:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e0;
}








/* --- SOURCE SELECTION MODAL --- */
.source-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.source-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.source-card:hover {
    border-color: #204164;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(32, 65, 100, 0.1);
}

.source-card .material-icons {
    font-size: 42px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.source-card b {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #204164;
    letter-spacing: 0.5px;
}

.source-card.local:hover .material-icons {
    color: #f39c12;
}

.source-card.google:hover .material-icons {
    color: #4285F4;
}











/* --- MATERIALS ACTION REGION --- */
.material-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.material-link-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    /* Important for text truncation */
}

.material-icon-box {
    width: 36px;
    height: 36px;
    background: #ebf8ff;
    color: #3182ce;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-sub {
    font-size: 0.7rem;
    color: #94a3b8;
}

.material-action-region {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
    margin-left: 10px;
}

.action-btn {
    border: none;
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

.action-btn.delete:hover {
    background: #fee2e2;
    color: #ef4444;
}

.action-btn .material-icons {
    font-size: 18px;
    color: #64748b;
}


/* style2.css */

.card-action-region {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-edit-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.card-edit-btn:hover {
    background: white;
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-edit-btn .material-icons {
    font-size: 18px;
}



/* style2.css */

/* 1. Ensure the container takes full height and scrolls */
.event-sidebar-right {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 10px;
    min-height: 0;

    /* Firefox visibility */
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #f1f5f9;

    gap: 15px;
    padding-bottom: 20px;
}



/* 2. Custom Scrollbar Styling for Chrome/Safari/Edge */
.event-sidebar-right::-webkit-scrollbar {
    width: 6px;
    /* Slim but visible */
}

.event-sidebar-right::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.event-sidebar-right::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    /* Subtle grey */
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.event-sidebar-right::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary);
    /* Turns Navy on hover */
}

/* 3. Layout Fix: Prevent the sidebar from growing past the screen */
.event-dashboard-container {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    height: calc(100vh - 150px);
    /* Adjust based on your header height */
    overflow: hidden;
    /* Main container stays fixed, children scroll */
}


/* style2.css */

.btn-settings-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-settings-header:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
    color: var(--primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-settings-header .material-icons {
    font-size: 18px;
}










/* style2.css */

#new-event-menu {
    position: absolute !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(32, 65, 100, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    padding: 8px 0 !important;
    min-width: 260px !important;
    z-index: 999999 !important;
    transform-origin: top left;
    animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    height: auto !important;      /* Overrides the full-height inherited from settings-popover */
    min-height: unset !important;  /* Removes any minimum height constraints */
    max-height: fit-content !important; /* Forces container to hug the items */
      /* Consistent professional width */
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 5px !important;

    
    bottom: auto !important;      /* <--- THIS KILLS THE STRETCHING BUG */
    
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


#new-event-menu.hidden {
    display: none !important;
}


#new-event-menu .popover-header {
    padding: 12px 20px 8px 20px;
    font-size: 0.65rem;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

#new-event-menu .popover-item {
   
    text-decoration: none !important;

     display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 12px 20px !important;
    cursor: pointer;
    transition: background 0.15s ease;

flex: 0 0 auto !important; 
    height: auto !important;


}


#new-event-menu .popover-item .material-icons {
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 10px;
    transition: transform 0.2s ease;

        padding: 8px;

}
#new-event-menu .popover-item:hover .material-icons {
    transform: scale(1.1);
    background: #f8fafc ;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


/* Specific Icon Colors */
#new-event-menu .popover-item:nth-child(2) .material-icons { color: #204164; } /* Navy */
#new-event-menu .popover-item:nth-child(3) .material-icons { color: #f39c12; } /* Orange */

#new-event-menu .popover-item span[style*="font-weight:700"] {
    display: block;
    color: #1e293b;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

#new-event-menu .popover-item span[style*="font-size:0.7rem"] {
    color: #64748b !important;
    font-weight: 500;
}

#new-event-menu .popover-item:hover {
    background-color: #f8fafc !important;
}


/* --- Visibility Control --- */
/* When the 'hidden' class is removed, the menu becomes visible and scales in */
#new-event-menu:not(.hidden) {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    /* Clickable when visible */
}

/* Redundant but safe: Ensure the .hidden class from JS works */
.drive-style-menu.hidden {
    display: block !important;
    /* Override any old display:none */
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    /* Final guarantee */
}








/* ==========================================================================
   WIZARD & MATERIALS WORKSPACE - BRANDED HERO DESIGN
   ========================================================================== */

/* 1. THE MODAL OVERLAY */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.modal-box {
    background: white;
    width: 95%;
    max-width: 1150px;
    max-height: 92vh;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
    position: relative;
    /* Anchor for close button */
}

/* 2. THE HERO HEADER */
.modal-hero {
    background: linear-gradient(135deg, #204164 0%, #162e4a 100%);
    padding: 28px 50px;
    position: relative;
    border-bottom: 4px solid #f39c12;
    color: white;
}

.modal-hero-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin: 0;
}

.modal-hero-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.6;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* 3. UPPER RIGHT CLOSE BUTTON (Universal App Standard) */
.close-wizard-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 11000;
}

.close-wizard-btn:hover {
    background: #e53e3e;
    /* Standard Red for Exit */
    border-color: #e53e3e;
    transform: rotate(90deg);
}

.modal-tabs {
    display: flex;
    width: 100%;
    background: #1a3554;
    border-bottom: none;
    padding: 0;
}

.tab-btn {
    flex: 1;
    padding: 15px 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 3px solid transparent;
    position: relative;
}

.tab-btn:last-child {
    border-right: none;
}

.tab-btn:hover:not(.active) {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.06);
}

.tab-btn.active {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    font-weight: 900;
    border-bottom: 3px solid var(--accent);
    position: relative;
    z-index: 2;
}

.tab-btn.active::before {
    display: none;
}

/* 5. CONTENT AREAS */
.modal-body {
    padding: 0;
    /* Removing padding to allow sub-panels to control it */
    overflow-y: auto;
}

#tab-logistics {
    padding: 30px 40px 40px;
    background: white;
}

#tab-materials {
    background-color: #f1f5f9;
    padding: 30px 40px 40px;
    min-height: 550px;
}

/* Live form preview bar inside Registration tab */
.form-preview-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 28px;
    background: #f8fafc;
    border-top: 1px solid #e8edf3;
    border-bottom: 1px solid #e8edf3;
    margin: 14px -28px 0;
}

.form-preview-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-preview-label .material-icons {
    font-size: 15px;
}







.card-header-row {
    display: flex;
    align-items: center;
    /* FIX: Perfect vertical alignment with icon */
    gap: 18px;
}

/* Make the document name field subtly apparent as an input */
.card-input-name {
    flex: 1;
    border: 1px solid transparent !important;
    background: #f8fafc !important;
    /* Subtle tint shows it's editable */
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: #204164 !important;
    padding: 8px 12px !important;
    outline: none !important;
    transition: all 0.2s ease;
}

/* Interaction feedback: Orange highlight on hover/focus */
.card-input-name:hover,
.card-input-name:focus {
    background: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}


/* Policy Group: 3 Checkboxes Now */
.card-policy-group {
    display: flex;
    gap: 25px;
    /* More breathing room */
    padding: 0 20px;
    border-left: 2px solid #e2e8f0;
}

/* Dashboard Toolbar Toggles Styling */
/* --- SLICK TOOLBAR TOGGLES --- */
.toolbar-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    height: 46px; /* Fixed height for alignment */
}


.btn-ghost-toolbar {
    background: transparent;
    border: none;
    color: #64748b;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-icon-toolbar {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon-toolbar:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.btn-icon-toolbar .material-icons {
    font-size: 20px;
}

.btn-ghost-toolbar:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.btn-ghost-toolbar .material-icons {
    font-size: 18px;
}








.toolbar-toggle-group .policy-toggle {
    margin: 0;
    color: var(--primary);
}


.toolbar-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 8px;
}












.material-card.has-link {
    border-left-color: #204164;
}

.material-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(32, 65, 100, 0.1);
}






.card-body-row {
    display: grid;
    grid-template-columns: 1fr 280px auto;
    gap: 20px;
    align-items: center;
    background: #f8fafc;
    padding: 12px 20px;
    border-radius: 12px;
}

.card-input-url {
    flex: 1;
    border: 1px solid #e2e8f0 !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-family: monospace;
    font-size: 0.8rem !important;
}

.card-policy-group {
    display: flex;
    gap: 20px;
    padding: 0 20px;
    border-left: 2px solid #e2e8f0;
}

/* Visibility Classes */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* --- SOURCE MODAL ENHANCEMENTS --- */

/* Account Display Note */
.google-account-note {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 15px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
}

.google-account-note b {
    color: var(--primary);
}

/* Coming Soon Tooltip for OneDrive */
.source-card.onedrive {
    position: relative;
    cursor: not-allowed;
    opacity: 0.7;
}

.source-card.onedrive::after {
    content: "Coming Soon";
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent);
    color: white;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.source-card.onedrive:hover::after {
    opacity: 1;
}

.source-card.onedrive:hover {
    transform: none;
    /* Disable lift effect */
    border-color: #e2e8f0;
}

/* --- DASHBOARD SIDEBAR: DOCUMENT CONTROL CONSOLE --- */
.sidebar-mat-row {
    display: grid;
    /* Grid: Icon | Name | Toggles | Edit */
    grid-template-columns: 32px 1fr auto 40px;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    background: white;
    border-bottom: 1px solid #f1f5f9;
}


/* The Dot next to the name */
.share-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #e2e8f0;
}


.share-status-dot.public {
    background: #38a169;
}

/* Green */
.share-status-dot.domain {
    background: #e53e3e;
}

/* Red */
.share-status-dot.staff {
    background: #1a202c;
}

/* Black */



/* --- SHARING INDICATOR COLORS --- */
.btn-sidebar-tiny.is-public {
    background: #38a169 !important;
    color: white !important;
    border-color: #38a169 !important;
}

.btn-sidebar-tiny.is-domain {
    background: #e53e3e !important;
    color: white !important;
    border-color: #e53e3e !important;
}

.btn-sidebar-tiny.is-restricted {
    background: #1a202c !important;
    color: white !important;
    border-color: #1a202c !important;
}

.mat-sidebar-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-mat-actions {
    display: flex;
    gap: 5px;
}



.btn-sidebar-tiny {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    /* Neutral background */
    color: #94a3b8;
    /* Default grey icon */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* State: Public (Green) */
.btn-sidebar-tiny.state-public {
    border-color: #38a169 !important;
    color: #38a169 !important;
    background: #f0fff4 !important;
}

/* State: Domain (Yellow/Orange) */
.btn-sidebar-tiny.state-domain {
    border-color: #d69e2e !important;
    color: #d69e2e !important;
    background: #fffaf0 !important;
}

/* State: Private/Restricted (Red) */
.btn-sidebar-tiny.state-private {
    border-color: #e53e3e !important;
    color: #e53e3e !important;
    background: #fff5f5 !important;
}

/* State: Not Linked (Grey/Faded) */
.btn-sidebar-tiny.state-empty {
    border-color: #cbd5e0 !important;
    color: #cbd5e0 !important;
    opacity: 0.3;
    cursor: default;
}

.btn-sidebar-tiny:hover {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.sidebar-mat-row:hover {
    background: #f8fafc;
}

/* --- MATERIAL VISIBILITY CHIPS --- */
.mat-vis-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.mat-vis-public {
    background: #f0fff4;
    color: #38a169;
    border: 1px solid #c6f6d5;
}
.mat-vis-members {
    background: #ebf8ff;
    color: #3182ce;
    border: 1px solid #bee3f8;
}
.mat-vis-office {
    background: #faf5ff;
    color: #805ad5;
    border: 1px solid #e9d8fd;
}
.mat-vis-email {
    background: #fffaf0;
    color: #dd6b20;
    border: 1px solid #feebc8;
}

/* --- RESOURCE EDITOR: VISIBILITY BUTTONS --- */
.res-vis-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}
.res-vis-btn .material-icons { font-size: 18px; }
.res-vis-btn:hover { border-color: var(--primary); color: var(--primary); }
.res-vis-btn.active[data-vis="public"] {
    background: #f0fff4; border-color: #38a169; color: #38a169;
}
.res-vis-btn.active[data-vis="members"] {
    background: #ebf8ff; border-color: #3182ce; color: #3182ce;
}
.res-vis-btn.active[data-vis="office"] {
    background: #faf5ff; border-color: #805ad5; color: #805ad5;
}

/* The text area */
.mat-info {
    min-width: 0;
    cursor: pointer;
}

.mat-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mat-status {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
}

/* Tray 1: Security Policies (Public / Email) */
.mat-policy-tray {
    display: flex;
    gap: 4px;
    padding-right: 10px;
    border-right: 1px solid #edf2f7;
}

/* Tray 2: File Management (Edit / Delete) */
.mat-mgmt-tray {
    display: flex;
    gap: 4px;
    padding-left: 10px;
}

/* Small Sidebar Action Buttons */
.btn-sidebar-round {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #cbd5e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sidebar-round .material-icons {
    font-size: 16px;
}

/* Active Toggle States */
.btn-sidebar-round.active-navy {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-sidebar-round.active-green {
    background: #38a169;
    color: white;
    border-color: #38a169;
}

/* Hover States */
.btn-sidebar-round:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-sidebar-round.delete:hover {
    background: #fff5f5;
    color: #e53e3e;
    border-color: #feb2b2;
}

/* Drag Handle */
.mat-drag-handle {
    color: #cbd5e0;
    cursor: grab;
    display: flex;
    align-items: center;
}


/* --- RESOURCE EDITOR MODAL STYLES --- */

/* 1. Sleek Hero Header */
.modal-header-sleek {
    background: var(--primary);
    /* Navy */
    padding: 25px 30px;
    position: relative;
    border-bottom: 4px solid var(--accent);
    /* Orange Strip */
}

.modal-header-sleek h3 {
    margin: 0;
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.modal-header-sleek .sub-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* 2. Floating Close Button (Upper Right) */
.close-modal-float {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.close-modal-float:hover {
    background: #e53e3e;
    /* Red on hover */
    border-color: #e53e3e;
    transform: rotate(90deg);
}

/* 3. Integration Buttons Row */
.integration-row {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.btn-integration {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Google Drive State */
.btn-integration.google:hover {
    border-color: #3182ce;
    background: #ebf8ff;
    color: #204164;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* OneDrive State (Disabled/Future) */
.btn-integration.onedrive {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f8fafc;
    position: relative;
    /* For tooltip positioning */
}

.btn-integration.onedrive:hover {
    border-color: #cbd5e0;
}

/* Tooltip for Future Feature */
.btn-integration.onedrive:hover::after {
    content: "Coming Soon";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    pointer-events: none;
    animation: fadeIn 0.2s;
}

/* ========================================= */
/* FIX: GOOGLE PICKER Z-INDEX OVERRIDE       */
/* ========================================= */
/* The Resource Editor modal is at z-index 50,000. 
   We must force Google's popup elements higher to be visible. */

.picker-dialog-bg,
.picker-dialog {
    z-index: 50005 !important;
}

/* Account Status Bar in Resource Modal */
.google-status-row {
    margin-top: 12px;
    background: #f0fff4;
    /* Very light green background */
    border: 1px solid #c6f6d5;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: fadeIn 0.3s ease-out;
}

.btn-text {
    background: transparent;
    border: none;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 10px;
}

.btn-text-action {
    background: transparent;
    border: none;
    color: #3182ce;
    /* Link Blue */
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.btn-text-action:hover {
    color: #2c5282;
}




/* --- PRIVACY PANELS --- */
.privacy-header {
    cursor: pointer;
    justify-content: space-between;
    /* Push chevron to right */
    transition: background 0.2s;
}

.privacy-header:hover {
    background: #edf2f7;
}

.privacy-badge {
    background: #e53e3e;
    /* Bright Red */
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(229, 62, 62, 0.3);
}

.privacy-badge.hidden {
    display: none;
}

.hidden-panel {
    display: none;
}

.chevron {
    transition: transform 0.3s ease;
    color: #cbd5e0;
}

.privacy-header.expanded .chevron {
    transform: rotate(180deg);
}

/* --- CLICKABLE MATERIALS --- */
.mat-sidebar-name.clickable {
    color: var(--primary);
    /* OECTA Navy */
    cursor: pointer;
    /* Hand cursor */
    pointer-events: auto;
    /* Allow clicks */

}

.mat-sidebar-name.clickable:hover {
    color: var(--accent);
    /* OECTA Orange */
    text-decoration: underline;
}

/* --- PERMISSION STATUS ICONS --- */
/* These classes are applied to the material-icons inside the toggle buttons */
.icon-public {
    color: #38a169 !important;
}

/* Green */
.icon-domain {
    color: #dd6b20 !important;
}

/* Orange */
.icon-private {
    color: #e53e3e !important;
}

/* Red */
.icon-default {
    color: #cbd5e0 !important;
}

/* Grey */



/* --- SLICK HEADER CONTROLS --- */
.header-controls-group {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f8fafc;
    padding: 8px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-right: 10px;
}



.header-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
    margin: 0;
    padding: 0 5px;
}




.header-toggle input {
    display: none;
}

.header-toggle .switch-rail {
    width: 32px;
    height: 18px;
    background: #cbd5e0;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.header-toggle .switch-rail::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


}

.header-toggle input:checked+.switch-rail {
    background: var(--success);
}

.header-toggle input:checked+.switch-rail::after {
    transform: translateX(14px);
}

/* --- MATERIALS SIDEBAR POLISH --- */
.sidebar-mat-row {
    padding: 12px 15px !important;
    grid-template-columns: 1fr auto auto !important;
    /* Name takes all space */
    gap: 10px !important;
}

.mat-sidebar-name {
    font-size: 0.85rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    transition: all 0.2s;

    /* Default: Unpopulated State */
    color: #cbd5e0;
    /* Subtle grey */
    cursor: default;
    /* Normal arrow cursor */
    pointer-events: none;
    /* Prevent clicks on the text itself when greyed out */

}

.sidebar-mat-actions {
    gap: 4px !important;
}


/* --- RESOURCE MODAL STATUS LEGEND --- */
.status-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed #cbd5e0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dot-legend {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Legend Colors matching the buttons */
.dot-green {
    background: #38a169;
    box-shadow: 0 0 4px rgba(56, 161, 105, 0.4);
}

.dot-yellow {
    background: #f39c12;
    box-shadow: 0 0 4px rgba(243, 156, 18, 0.4);
}

.dot-red {
    background: #e53e3e;
    box-shadow: 0 0 4px rgba(229, 62, 62, 0.4);
}

.dot-grey {
    background: #cbd5e0;
}

/* Subtle fade in for the mirror console when triggered */
#res-mirror-console:not(.hidden) {
    display: block;
    animation: slideDownFade 0.3s ease-out;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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








/* --- DASHBOARD DRAG & DROP VISUALS --- */
.sidebar-mat-row {
    cursor: grab;
    user-select: none;
    transition: transform 0.2s, background-color 0.2s;
}

.sidebar-mat-row:active {
    cursor: grabbing;
}

/* The item being moved */
.sidebar-mat-row.dragging {
    opacity: 0.5;
    background: #f1f5f9;
    border: 1px dashed var(--primary);
}

/* The visual indicator for where the item will land */
.sidebar-mat-row.drag-over {
    border-top: 3px solid var(--accent) !important;
}


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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


/* --- DASHBOARD SIDEBAR LEGEND --- */
.panel-footer-legend {
    padding: 10px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* Prevents legend from squishing */
}

/* Re-using and refining the legend-item styles for the sidebar */
.panel-footer-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.panel-footer-legend .dot-legend {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Ensure the material list leaves enough room for the footer */
#panel-event .event-panel {
    display: flex;
    flex-direction: column;
}

#panel-event { 

    top:85px;
}

#mat-list {
    flex-grow: 1;
    overflow-y: auto;
}




.wizard-card,
.material-card {
    background: #ffffff !important;
    border: 1px solid rgba(32, 65, 100, 0.08);
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 28px 28px 24px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.06),
        0 4px 12px -2px rgba(148, 163, 184, 0.12);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wizard-card:hover {
    border-color: rgba(32, 65, 100, 0.18);
    box-shadow: 0 4px 20px -4px rgba(32,65,100,0.12);
}

.wizard-card-header {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
}

.wizard-card-header .wc-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(32, 65, 100, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wizard-card-header .wc-icon .material-icons {
    font-size: 16px;
    color: var(--primary);
}

.wizard-card-header .wc-title {
    flex: 1;
}

/* Tighten grid rows inside cards */
.wizard-card .form-grid-row {
    margin-bottom: 0;
    gap: 20px;
}






/* 2. Make the body area scrollable while the footer stays put */
#event-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}







/* --- WIZARD LAYOUT REPAIR --- */

#event-modal .modal-box {
    display: flex;
    flex-direction: column;
    height: 92vh;
    max-height: 92vh;
}

#event-modal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent body from scrolling; let children handle it */
    position: relative;
}

/* Steps: Hidden by default, Flex when active */
.wizard-step {
    display: none;
    flex-direction: column;
    height: 100%;
}

.wizard-step.active {
    display: flex;
    /* This allows JS to toggle visibility correctly */
}

#new-event-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modal-body-scroller {
    flex: 1;
    overflow-y: auto;
    background: #f1f5f9 !important;
    padding: 24px 0 40px 0;
}

.modal-footer {
    flex-shrink: 0;
    background: #ffffff;
    padding: 16px 40px;
    border-top: 1px solid #e8edf3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}



/* --- MODAL STACKING HIERARCHY --- */

/* Base Level: Main Portal UI */
.admin-layout {
    z-index: 1;
}

/* Level 1: Main Event Wizard */
#event-modal {
    z-index: 15000 !important;
}

/* Level 2: Venue Management (Must be above Event Wizard) */
#location-modal {
    z-index: 20000 !important;
}

/* Level 3: Confirmations & Warnings (e.g., "Discard Changes?") */
#confirm-modal,
#unsaved-modal,
#reset-confirm-modal {
    z-index: 30000 !important;
}

/* Level 4: Priority Tools (Spinner, Resource Editor) */
#spinner-modal,
#resource-editor-modal,
#response-viewer-modal {
    z-index: 40000 !important;
}

/* Level 5: File Pickers (Google/Local Source Selector) */
#source-modal {
    z-index: 50000 !important;
}

/* Level 6: The actual Google Drive Picker Window */
.picker-dialog-bg,
.picker-dialog {
    z-index: 60000 !important;
}


.field-sub-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    color: #94a3b8;
    /* Slate grey */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-left: 2px;


}

.highlight-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

/* Field group — consistent vertical stacking inside wizard cards */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* --- WIZARD SURFACE & CARD DEPTH --- */

/* 1. The main scrolling track - now consistent for all tabs */
.modal-body-scroller {
    flex: 1 !important;
    overflow-y: auto !important;
    background: #f1f5f9 !important;
    /* Soft Slate Grey background for the whole track */
    padding: 30px 0;
    /* Add vertical padding to the track itself */
}

/* 2. Uniform tab content styling */
.tab-content {
    display: none;
    padding: 20px 40px 40px;
    background: transparent !important;
}

.tab-content.active {
    display: block;
}


.wizard-card:hover,
.material-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

/* 4. Banner consistency for Materials Tab */
.materials-workspace-banner {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
    align-items: center;
}


/* =====================================================
   MATERIAL CARD — REDESIGNED LAYOUT
   ===================================================== */

/* Header row: drag + name + action buttons */
.material-card .card-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.material-card .card-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.mat-action-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.15s ease;
}

.mat-action-btn:hover {
    background: #f1f5f9;
    color: var(--primary);
    border-color: var(--primary);
}

.mat-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.mat-action-btn .material-icons { font-size: 18px; }

.mat-action-btn.mat-action-delete:hover {
    color: #e53e3e;
    border-color: #e53e3e;
    background: #fff5f5;
}

/* URL row */
.card-url-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.card-url-icon {
    font-size: 18px;
    color: #94a3b8;
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.card-url-row .card-input-url {
    width: 100%;
    padding-left: 38px !important;
}

/* Controls row: visibility + toggles */
.card-controls-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.mat-visibility-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mat-control-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* --- SEGMENTED TOGGLE (Visibility) --- */
.mat-seg-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.mat-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mat-seg-btn .material-icons {
    font-size: 16px;
}

.mat-seg-btn:hover {
    background: rgba(255,255,255,0.6);
    color: var(--primary);
}

.mat-seg-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}

/* --- CHIP TOGGLES (Email / Remember) --- */
.mat-toggle-options {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.mat-chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.mat-chip-toggle input[type="checkbox"] {
    display: none;
}

.mat-chip-toggle .material-icons {
    font-size: 16px;
}

.mat-chip-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(32, 65, 100, 0.03);
}

.mat-chip-toggle.active {
    background: rgba(32, 65, 100, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}





.venue-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.venue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.venue-header {
    padding: 20px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.venue-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 4px;
}

.venue-address {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.venue-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.badge-active {
    background: #f0fff4;
    color: #38a169;
    border: 1px solid #c6f6d5;
}

.badge-review {
    background: #fffaf0;
    color: #d69e2e;
    border: 1px solid #fbd38d;
}

.badge-blacklisted {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #fed7d7;
}

.venue-body {
    padding: 20px;
    background: #fcfcfd;
    flex: 1;
}

.venue-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #475569;
}

.venue-amenities {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.amenity-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amenity-icon.has-it {
    background: #ebf8ff;
    color: #3182ce;
}

.venue-footer {
    padding: 15px 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}





.modal-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-list-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.modal-list-item:hover {
    background: white;
    border-color: var(--primary);
    transform: translateX(5px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.venue-tab-content {
    position: relative;
    /* Provides anchor for the absolute dropdown */
    overflow: visible !important;
    /* Prevents the dropdown from being cut off */

}

.venue-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Prevents the Admin Notes box from being resized horizontally */
textarea.form-input {
    resize: vertical;
    min-height: 120px;
    /* Optional: sets a nice starting height */
    max-width: 100%;
    /* Safety fallback to ensure it never exceeds container */
}


#delete-venue-modal .btn-primary:hover {
    background-color: #c53030 !important;
    /* Darker red on hover */
}









/* --- VENUE DASHBOARD OVERHAUL --- */

/* 1. The Analytics Strip (The broken part in your screenshot) */
.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Responsive Grid */
    gap: 24px;
    margin-bottom: 30px;
}

.mini-card {
    background: white;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 20px;
    /* Space between icon and text */
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    /* Subtle lift */
    transition: transform 0.2s ease;
}

.mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.mini-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
    /* Icon size inside */
}

/* Typography inside the mini-card */
.mini-val {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: 4px;
}

.mini-lbl {
    font-size: 0.75rem;
    color: #64748b;
    /* Slate 500 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 2. The Search Bar Area */
#panel-locations .dash-nav {
    padding: 0 32px;
}

#venue-manager-search {
    width: 100%;
    min-width: 320px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    padding: 10px 15px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

#venue-manager-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(32, 65, 100, 0.1);
}


.venue-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.venue-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 24px -8px rgba(32, 65, 100, 0.15);
    transform: translateY(-4px);
}

/* Badge Tweaks */
.venue-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- KIOSK RESULT CARD (The "Magic Mirror" Popup) --- */
.kiosk-result-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    /* Start slightly smaller */
    width: 90%;
    max-width: 480px;
    background: white;
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* Deep shadow */

    /* HIDE BY DEFAULT */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999 !important;
    /* Force it to the absolute front */

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy pop-in */
}

/* ACTIVE STATE (Applied by JS when a scan happens) */
.kiosk-result-card.active {
    display: flex !important;
    /* Show when active */
    flex-direction: column;


    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.kiosk-ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Top */
    background: rgba(0, 0, 0, 0.2) !important;
    /* Dim the camera slightly for readability */
}

/* Sentinel State: Camera is sharp, Search is a small button */
#view-kiosk:not(.mode-search) .kiosk-search-integrated {
    max-width: 300px;
    opacity: 0.8;
}

/* Searcher State: Camera blurs, Search input grows and centers */
#view-kiosk.mode-search .kiosk-cam-layer {
    filter: blur(15px) grayscale(1);
    opacity: 0.4;
}

/* 3. Fix the results dropdown positioning */
#kiosk-results {
    position: absolute;
    top: 100%;
    /* Sits exactly under the search bar */
    left: 0;
    right: 0;
    background: white;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    z-index: 5000 !important;
    max-height: 400px;
    overflow-y: auto;
}

.kiosk-cam-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Bottom */
    background: #000;
}

#view-kiosk {
    display: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #0a0f1e !important;
    /* Solid background prevents bleed-through */
    background-image:
        radial-gradient(at 0% 0%, #204164 0px, transparent 50%),
        radial-gradient(at 100% 100%, #242064 0px, transparent 50%),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;

    z-index: var(--z-app-overlay) !important;
    position: fixed;
    top: 0;
    left: 0;
}


.app-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    background: var(--primary);
    border-top: 1px solid var(--primary-hover);
    z-index: var(--z-nav);

    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}


/* HIDE UI ELEMENTS WHEN KIOSK IS ACTIVE */
body:has(#view-kiosk.active) .icon-rail,
body:has(#view-kiosk.active) .dash-nav,
body:has(#view-kiosk.active) .app-footer {
    display: none !important;
}


/* Show only when active */
#view-kiosk.active {
    display: flex !important;
}

/* Neural Mesh Effect (Subtle floating shapes) */
#view-kiosk::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at center, rgba(32, 100, 93, 0.05) 0%, transparent 40%);
    animation: backgroundSlowMove 20s infinite alternate ease-in-out;
    pointer-events: none;
}


@keyframes backgroundSlowMove {
    from {
        transform: translate(-10%, -10%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

/* Container for the logo */
#view-kiosk .kiosk-branding-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 35px;
    z-index: 100;

    /* Removed the grey glass box to let the logo breathe */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* The Logo Image */
.kiosk-pro-logo {
    width: 100%;
    max-width: 550px;
    /* Forces it to fill the space generously */
    height: auto !important;
    /* Maintains perfect aspect ratio */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
    /* Deep shadow for depth */
    display: block;
}

.kiosk-search-integrated-row {
    width: 700px;
    margin-bottom: 25px;
    position: relative;
    /* Anchor for the results dropdown */
}

.kiosk-status-pill {
    /* Branding: Pantone Navy with OECTA Orange Border */
    background: #204164;
    border: 1px solid var(--accent);
    color: #ffffff;

    /* Layout */
    padding: 8px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;

    /* Typography: Institutional Feel */
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 3px;
    /* Wide tracking for high-end look */
    text-transform: uppercase;

    /* Effects: Subtle Glow */
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.15);
}


/* Immersive Scale-up */
#view-kiosk.immersive-mode .kiosk-branding-header {
    transform: scale(1.1);
    margin-bottom: 40px;
    /* Increase gap in full screen */
    transition: all 0.8s ease;
}

#view-kiosk.immersive-mode .scanner-window-container {
    box-shadow: 0 0 100px rgba(32, 65, 100, 0.4);
    /* Navy outer glow */
}


.pulse-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: blink 2s infinite;
}

#view-kiosk.immersive-mode .kiosk-search-integrated-row {
    transform: scale(1.05);
}


/* --- KIOSK RESULT CARD ACTIONS --- */

.kiosk-result-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

#btn-kiosk-email {
    width: 100%;
    max-width: 320px;
    padding: 16px;
    font-size: 1.1rem;
    border-radius: 12px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kiosk-next-timer {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    /* Subtle slate */
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.kiosk-next-timer:hover {
    color: var(--primary);
    background: #f1f5f9;
    border-color: #e2e8f0;
}

#kiosk-countdown {
    color: var(--accent);
    /* Highlight the numbers in orange */
}


























.kiosk-top-bar {
    height: 90px;
    padding: 0 40px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
}


.kiosk-header-logo {
    height: 40px;
}

#view-kiosk.mode-search .kiosk-search-integrated {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: 90vw;
    z-index: 1000;
}

#view-kiosk.mode-search #manual-search {
    height: 80px;
    font-size: 1.8rem;
    border: 3px solid var(--accent);
    background: white;
    color: black;
}

.search-item.cta-register {
    background: #fffaf0;
    /* Light Orange tint */
    border: 2px dashed var(--accent);
    margin-top: 10px;
    padding: 20px;
    border-radius: 12px;
}

.search-item.cta-register:hover {
    background: #fff5e6;
    transform: scale(1.02);
}


/* Kiosk Search UI */
.kiosk-interaction-container {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 90vw;
    text-align: center;
    z-index: 1000;
}

/* Constrained Search Box */
.kiosk-search-wrap {
    position: relative;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    flex: 0 1 450px;
    /* Shrunken width */
    margin: 0 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.kiosk-search-wrap input {
    height: 44px;
    /* Shrunken height */
    border: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 10px;
    width: 100%;
    outline: none;
}


/* 3. THE STAGE: Large Camera Window */
.kiosk-main-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}





.kiosk-search-wrap .material-icons {
    color: #94a3b8;
}



.scanner-window-container {
    width: 700px !important;
    height: 700px !important;
    border-radius: 40px;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative; 
}



/* Floating UI Overlays */
.scanner-ui-overlay {
    position: absolute;
    width: 100%;
    z-index: 60;
    display: flex;
    justify-content: center;
}

.scanner-ui-overlay.top {
    top: 40px;
}

.scanner-ui-overlay.bottom {
    bottom: 40px;
}




/* The Glassmorphism Search Bar */
.scanner-search-wrap {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    transition: all 0.3s ease;
}

.scanner-search-wrap:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.2);
}


.scanner-search-wrap input {
    height: 54px;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    width: 100%;
    outline: none;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    /* Sits exactly under the search bar */
    left: 0;
    right: 0;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    /* High priority: covers the camera window */
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    animation: slideDownFade 0.2s ease-out;
}

.terminal-btn .material-icons {
    font-size: 22px;
    /* Slightly larger icon */
}

.scanner-search-wrap .material-icons {
    color: var(--accent);
    margin-right: 15px;
}


/* Floating Controls */
.kiosk-terminal-controls {
    position: absolute;
    bottom: 40px;
    left: 35px;
    display: flex;
    gap: 12px;
    z-index: 1000;
}


.terminal-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    /* Professional frosted effect */
}


/* Hover: Full high-contrast pop */
.terminal-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: var(--accent);
    /* subtle orange glow on hover */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.terminal-btn.danger:hover {
    background: #e53e3e;
    border-color: #e53e3e;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}



/* Logic for "Immersive" mode: still slightly visible so you don't lose them */
#view-kiosk.immersive-mode .kiosk-terminal-controls {
    opacity: 0.3;
    /* Clearly visible but "dimmed" */
    transition: opacity 0.5s ease;
}


#view-kiosk.immersive-mode .kiosk-terminal-controls:hover {
    opacity: 1;
    /* Brighten up when the admin moves the mouse there */
}




#qr-reader {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px;
    opacity: 1 !important;

}


/* Branded Frame Corners */
.scanner-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid var(--accent);
    z-index: 51;
    pointer-events: none;
}

/* Container for the visual target area */
.scanner-target-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    /* Narrow the target to 70% of the video */
    height: 70%;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    /* The dark overlay around the target */
    border-radius: 20px;
    /* Optional: Rounded focus area */
}




/* 2. Hide the library's default white brackets & shading overlay */
/* We rely on your custom Orange Corners instead */
#qr-reader__scan_region {
    display: none !important;
    opacity: 0 !important;
    border: none !important;



}


/* Hide the semi-transparent overlay divs the library injects */
#qr-reader>div:nth-child(2),
#qr-reader>div:nth-child(3) {
    display: none !important;
}



#qr-reader__dashboard_section_csr span {
    display: none !important;
}


/* Hide the shaded region around the box */
#qr-reader div[style*="opacity: 0.5"] {
    display: none !important;
}


.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-radius: 12px 0 0 0;
}

.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 12px 0 0;
}

.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 12px;
}

.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 12px 0;
}


.scanner-hint {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    position: absolute;
    bottom: 60px;
    width: 100%;
    text-align: center;
}

.kiosk-lock-trigger {
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: color 0.2s;
}

.kiosk-lock-trigger:hover {
    color: white;
}




/* Recognition Flash for Brackets */
.scanner-target-frame.flash-success {
    animation: borderFlash 0.5s ease-out;
}

@keyframes borderFlash {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        filter: brightness(2);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1);
    }
}















.kiosk-exit-trigger {
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.kiosk-exit-trigger:hover {
    color: white;
}

.kiosk-welcome-text {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 30px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.kiosk-search-massive {
    position: relative;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.kiosk-search-massive .material-icons {
    font-size: 40px;
    color: var(--primary);
}

.kiosk-search-massive input {
    flex: 1;
    height: 100px;
    border: none;
    font-size: 2rem;
    font-weight: 600;
    padding: 0 20px;
    outline: none;
}

/* Flagged Row for Dashboard Notification */
.row-flagged {
    border-left: 6px solid var(--accent) !important;
    background-color: #fffaf0 !important;
    /* Slight orange tint */
}

.row-flagged .col-name::after {
    content: "WALK-IN";
    font-size: 0.6rem;
    font-weight: 900;
    background: var(--accent);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Exit Button */
.kiosk-exit-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.kiosk-exit-btn:hover {
    opacity: 1;
    background: var(--error);
}




/* --- Internal Elements --- */
#res-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    background: #C6F6D5;
    color: #276749;
}

#res-name {
    margin: 0;
    font-size: 2rem;
    color: #2D3748;
    font-weight: 800;
    line-height: 1.1;
}

#res-school {
    margin: 10px 0 20px 0;
    color: #718096;
    font-weight: 500;
    font-size: 1.1rem;
}

/* Fix the button that looked like a blue bar */
.kiosk-result-card .btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    border-radius: 12px;
    margin-top: 20px;
    background-color: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
}


/* Ensure content fills the middle */
.venue-grid .card-main-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Specific styling for cards inside the Venue Grid */
.venue-grid .premium-card {
    height: auto !important;

    min-height: 380px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Contains the map image */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}


/* Venue specific override - for the Maps */
.venue-grid .premium-card {
    min-height: 380px !important;
    height: auto !important;
}




/* Ensure map preview has a fixed height */
.venue-grid .card-map-preview {
    height: 140px;
    flex-shrink: 0;
    /* Prevent shrinking */
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
}


.btn-manage-card {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-manage-card:hover {
    background: var(--primary-hover);
}


.btn-gear-card,
.btn-row-settings {
    background: transparent;
    color: var(--primary) !important;
    /* Match Manage Event text */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.8;


}

.btn-gear-card:hover.btn-row-settings:hover {
    opacity: 1;
    transform: rotate(30deg);
}




.venue-grid .card-footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    /* Stats | Manage Link | Gear */
    align-items: center;
    gap: 15px;
    padding: 10px 15px !important;
    background: #fcfcfd;
    /* Subtle contrast */
    border-top: 1px solid #f1f5f9;
}

/* The Mini-Map placeholder in the card */
.card-map-preview {
    height: 120px;
    width: 100%;
    background-color: #e5e7eb;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.card-stat-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.card-stat-link:hover {
    background: #f0fff4;
    /* Success Green tint */
}

.card-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #94a3b8;
    display: block;
    line-height: 1;
}

/* --- BUTTON HOVER ACTIONS --- */

/* 1. Manage Event Text */
.action-manage-text {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    /* Vital for smooth hover */
}

.action-manage-text:hover {
    background: var(--primary);
    /* Flips to OECTA Navy */
    color: white;
    /* Text turns white */
}

/* 2. Settings Gear Button */
.btn-gear-card {
    background: transparent;
    color: #94a3b8;
    /* Muted grey initially */
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-gear-card:hover {
    background: #edf2f7;
    /* Soft grey background */
    color: var(--primary);
    /* Icon turns Navy */
    transform: rotate(45deg);
    /* Professional gear tilt */
}




/* Participant Note Indicator on Card */
.ticket-note-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(243, 156, 18, 0.9);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}


.card-map-preview::after {
    content: "location_on";
    font-family: 'Material Icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
    font-size: 24px;
    opacity: 0.6;
}


.venue-grid .footer-stat .material-icons {
    font-size: 16px;
}

.venue-grid .footer-stat {
    display: flex;
    gap: 15px;
    color: #64748b;
}



/* Icon badge specific to venues */
.venue-grid .card-date-badge {
    background: #f0f7ff;
    border: 1px solid #bee3f8;
    color: var(--primary);
    width: 65px;
    height: 65px;
    min-width: 65px;
    border-radius: 15px;
}



/* --- 4. THE SEARCH BAR (Integrated) --- */
/* Making the search bar feel like a cockpit instrument */
.dash-nav .search-row input {
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 50px;
    /* Full pill shape */
    padding-left: 20px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.dash-nav .search-row input:focus {
    background: white;
    border-color: var(--accent);
    /* Orange focus */
    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);
    width: 320px;
    /* Expands slightly on focus */
}

/* --- 5. THE CARDS (Refined) --- */
.venue-card {
    border: none !important;
    /* Remove harsh borders */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.venue-card:hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}





.header-actions-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 20px !important;
    /* Increased from 12px */
}




/* ==========================================================================
   VIEW 1: SCHOOL YEAR CONFIGURATOR (Split Layout)
   ========================================================================== */

/* Ensure the layout fills the space below the header */
#panel-calendar-config .config-layout {
    display: flex;
    flex-direction: row;
    /* Sidebar | Grid */
    flex: 1;
    /* Take remaining height */
    width: 100%;
    height: 100%;
    /* Critical for scrolling */
    overflow: hidden;
}

/* Sidebar Styling */
#panel-calendar-config .config-sidebar {
    width: 340px;
    min-width: 340px;
    background: white;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 25px;
    overflow-y: auto;
    z-index: 15;
}

/* Calendar Grid Area */
#panel-calendar-config .config-grid-wrapper {
    flex: 1;
    background: #f1f5f9;
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

/* The Grid Itself */
#panel-calendar-config .calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    padding-bottom: 100px;
}

/* ==========================================================================
   VIEW 2: FORM BUILDER (Full Screen Fix)
   ========================================================================== */

/* ==========================================================================
   FORM TEMPLATE LIBRARY — CARD GRID
   ========================================================================== */

.nav-subtitle {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 2px;
    letter-spacing: 0.01em;
}

#forms-list-view {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

.ftl-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 40px 16px;
    background: #f8fafc;
    flex-shrink: 0;
}

.ftl-search-wrap {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.ftl-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94a3b8;
    pointer-events: none;
}

.ftl-search-input {
    width: 100%;
    padding: 9px 14px 9px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--text-main);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.ftl-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(32,65,100,0.1);
}

.ftl-count-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    margin-left: auto;
}

.ftl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    padding: 4px 40px 40px;
    align-content: start;
}

/* Individual card */
.ftl-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.ftl-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 28px rgba(32,65,100,0.11);
    transform: translateY(-2px);
}

.ftl-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ftl-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ftl-card-icon .material-icons {
    font-size: 24px;
    color: #fff;
}

.ftl-card-info {
    flex: 1;
    min-width: 0;
}

.ftl-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.ftl-card-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.77rem;
    color: #94a3b8;
}

.ftl-card-date .material-icons {
    font-size: 13px;
}

/* Actions row */
.ftl-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.ftl-edit-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.ftl-edit-btn:hover {
    background: var(--primary-hover);
}

.ftl-edit-btn .material-icons {
    font-size: 16px;
}

.ftl-delete-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ftl-delete-btn:hover {
    color: var(--error);
    border-color: var(--error);
    background: #fee2e2;
}

.ftl-delete-btn .material-icons {
    font-size: 18px;
}

/* Empty state */
.ftl-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 40px;
    gap: 10px;
    text-align: center;
}

.ftl-empty-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.ftl-empty-ring .material-icons {
    font-size: 34px;
    color: #94a3b8;
}

.ftl-empty h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.ftl-empty p {
    font-size: 0.87rem;
    color: #94a3b8;
    margin: 0;
}

/* Card left-accent and question count badge */
.ftl-card {
    border-left: 4px solid var(--primary);
}

.ftl-q-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(32,65,100,0.07);
    padding: 2px 9px;
    border-radius: 20px;
    margin-top: 5px;
}

.ftl-q-count .material-icons {
    font-size: 11px;
}

.ftl-dup-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ftl-dup-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(32,65,100,0.05);
}

.ftl-dup-btn .material-icons {
    font-size: 16px;
}

/* ==========================================================================
   GLOBAL HEADER EVENT SEARCH — Gmail-style quick launcher
   ========================================================================== */

/* Hide the legacy event drawer — its features now live in the global header */
.event-drawer {
    display: none !important;
}

.header-search-zone {
    flex: 1;
    max-width: 520px;
    position: relative;
    margin: 0 24px;
}

.header-search-bar {
    display: flex;
    align-items: center;
    position: relative;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: 24px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.header-search-bar:focus-within {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(32,65,100,0.1);
}

.header-search-icon {
    position: absolute;
    left: 14px;
    font-size: 20px;
    color: #94a3b8;
    pointer-events: none;
}

.header-search-input {
    width: 100%;
    padding: 9px 42px 9px 44px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.88rem;
    color: var(--text-main);
    font-family: inherit;
}

.header-search-input::placeholder {
    color: #94a3b8;
}

.header-search-clear {
    position: absolute;
    right: 10px;
    width: 22px;
    height: 22px;
    border: none;
    background: #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.15s;
    flex-shrink: 0;
}

.header-search-clear:hover { background: #94a3b8; }
.header-search-clear .material-icons { font-size: 13px; }
.header-search-clear.hidden { display: none; }

.header-search-dropdown {
    /* position/top/left/width are set by JS after appending to body */
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(32,65,100,0.18);
    z-index: 99999;
    overflow: hidden;
    max-height: 560px;
    overflow-y: auto;
}

.header-search-dropdown.hidden { display: none; }

.hsd-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 16px 6px;
}

.hsd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.hsd-item:hover { background: #f1f5f9; }
.hsd-item:hover .hsd-item-name { color: var(--primary); }

.hsd-item-icon {
    font-size: 20px;
    color: #94a3b8;
    flex-shrink: 0;
}

.hsd-item-info {
    flex: 1;
    min-width: 0;
}

.hsd-item-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.hsd-item-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 1px;
}
.hsd-highlight {
    background: #fef08a; color: inherit;
    border-radius: 2px; padding: 0 1px;
}

.hsd-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hsd-status.published { background: #dcfce7; color: #16a34a; }
.hsd-status.draft { background: #f1f5f9; color: #64748b; }

.hsd-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ── Universal search result types ─────────────────────────────────────────── */

/* Section divider between result groups */
.hsd-section-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

/* Event date card */
.hsd-date-card {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0;
}
.hsd-date-card--empty {
    background: #e2e8f0;
}
.hsd-date-card--empty .material-icons {
    font-size: 20px;
    color: #94a3b8;
}
.hsd-date-card-mon {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.5px;
    line-height: 1;
    margin-top: 4px;
}
.hsd-date-card-day {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* Contact avatar */
.hsd-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

/* Status dot (inline in contact name) */
.hsd-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 4px;
    margin-bottom: 1px;
}
.hsd-status-dot--active   { background: #16a34a; }
.hsd-status-dot--inactive { background: #94a3b8; }

/* School chip */
.hsd-school-chip {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hsd-school-chip .material-icons {
    font-size: 20px;
    color: #2563eb;
}

/* Venue chip */
.hsd-venue-chip {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hsd-venue-chip .material-icons {
    font-size: 20px;
    color: #d97706;
}

/* New Event pill button in global header */
.btn-header-new {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-header-new:hover {
    background: #1a3455;
    box-shadow: 0 4px 12px rgba(32,65,100,0.25);
}

.btn-header-new .material-icons { font-size: 18px; }

/* ==========================================================================
   VIEW 2: FORM BUILDER
   ========================================================================== */

/* #panel-forms is a direct child of .admin-layout (position: static), so its
   containing block resolves to #view-portal (position: fixed; top: 0).
   Override top/height so the panel starts below the website header. */
#panel-forms {
    top: var(--header-height);
    height: calc(var(--app-height) - var(--header-height));
}

/* Form editor — absolutely fills #panel-forms; JS toggles display: none / block */
#forms-editor-view {
    position: absolute;
    inset: 0;
    background: white;
}

/* SurveyJS Creator container — simple flex child; stock SurveyJS CSS handles internals */
#surveyCreatorContainer {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}





/* ==========================================================================
   VIEW 3: VENUE DASHBOARD
   ========================================================================== */

/* ── Venue Hero ── */
.venue-hero {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 32px;
    flex-shrink: 0;
}
.venue-hero-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 10px;
    gap: 20px;
}
.venue-hero-identity {
    display: flex; align-items: center; gap: 12px;
}
.venue-hero-icon {
    font-size: 28px; color: var(--primary);
    background: rgba(32,65,100,0.08);
    padding: 8px; border-radius: 10px;
}
.venue-hero-title { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
.venue-hero-sub { font-size: 0.75rem; color: #64748b; font-weight: 500; }
.venue-hero-stats {
    display: flex; gap: 12px; align-items: center;
}
.venue-stat-chip {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 20px;
    background: #f1f5f9; font-size: 0.82rem; font-weight: 700; color: #475569;
}
.venue-stat-chip .material-icons { font-size: 16px; }
.venue-stat-label { font-weight: 500; font-size: 0.75rem; color: #94a3b8; }
.venue-stat-active { background: #f0fdf4; color: #16a34a; }
.venue-stat-active .material-icons { color: #16a34a; }
.venue-hero-actions { display: flex; gap: 10px; }
.venue-hero-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 14px; gap: 16px;
}
.venue-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 0 12px; flex: 1; max-width: 400px;
}
.venue-search-wrap .material-icons { color: #94a3b8; font-size: 20px; }
.venue-search-wrap input {
    border: none; background: transparent; outline: none;
    padding: 9px 0; font-size: 0.88rem; color: #334155; width: 100%;
}
.venue-view-toggles { display: flex; gap: 4px; }
.venue-view-btn {
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 6px 8px; cursor: pointer; color: #94a3b8; transition: all 0.15s;
}
.venue-view-btn:hover { background: #e2e8f0; }
.venue-view-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.venue-view-btn .material-icons { font-size: 18px; display: block; }

/* ── Venue Grid ── */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 24px 32px;
    width: 100%;
    align-content: start;
    overflow-y: auto;
    flex: 1;
}
.venue-grid.venue-list-view {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* ── Venue Cards ── */
.venue-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex; flex-direction: column;
}
.venue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(32,65,100,0.1);
    border-color: var(--primary);
}
.vc-map {
    height: 120px; background: #e2e8f0;
    background-size: cover; background-position: center;
    position: relative;
}
.vc-status {
    position: absolute; top: 10px; left: 10px;
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px;
}
.vc-status--active { background: #dcfce7; color: #16a34a; }
.vc-status--review { background: #fef9c3; color: #a16207; }
.vc-status--blocked { background: #fee2e2; color: #dc2626; }
.vc-note-badge {
    position: absolute; top: 10px; right: 10px;
    background: rgba(243,156,18,0.9); color: #fff;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.vc-note-badge .material-icons { font-size: 14px; }
.vc-body { padding: 16px 18px 10px; flex: 1; }
.vc-name { font-size: 1rem; font-weight: 800; color: var(--primary); margin-bottom: 6px; line-height: 1.3; }
.vc-address, .vc-phone {
    display: flex; align-items: flex-start; gap: 5px;
    font-size: 0.78rem; color: #64748b; margin-bottom: 3px; line-height: 1.4;
}
.vc-address .material-icons, .vc-phone .material-icons { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.vc-phone { color: var(--primary); }
.vc-footer {
    padding: 10px 18px;
    background: #f8fafc; border-top: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
}
.vc-amenities { display: flex; gap: 8px; align-items: center; }
.vc-amenity {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.72rem; color: #94a3b8; font-weight: 600;
}
.vc-amenity .material-icons { font-size: 15px; }
.vc-amenity--on { color: var(--primary); }
.vc-events {
    display: flex; align-items: center; gap: 2px;
    font-size: 0.78rem; font-weight: 700; color: var(--primary);
}
.vc-events .material-icons { font-size: 16px; }

/* List view variant */
.venue-list-view .venue-card {
    flex-direction: row; border-radius: 10px;
}
.venue-list-view .vc-map { width: 180px; height: auto; min-height: 100px; flex-shrink: 0; }
.venue-list-view .vc-body { padding: 12px 16px; }
.venue-list-view .vc-footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; border-top: none; border-left: 1px solid #f1f5f9; min-width: 140px; }

/* Legacy premium-card (still used by event cards) */
.premium-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 240px;
}
.premium-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--primary);
}
.premium-card .card-main-content { padding: 20px; flex: 1; }
.premium-card .card-footer {
    padding: 15px 20px; background: #fcfcfd;
    border-top: 1px solid #f1f5f9; border-radius: 0 0 16px 16px;
}

/* ==========================================================================
   NAVIGATION & Z-INDEX LAYERS (Critical for Clicks)
   ========================================================================== */

/* 1. Left Icon Rail (Must be top) */
.icon-rail {
    z-index: 9000 !important;
    background: white;
}

/* 2. Middle Drawer (Event List) */
.event-drawer {
    z-index: 900 !important;
    position: relative;
}

/* 3. Modals (Highest Priority) */
.modal-overlay {
    z-index: 50000 !important;
}

/* 4. Google Picker (Above Modals) */
.picker-dialog-bg,
.picker-dialog {
    z-index: 60000 !important;
}

/* --- FORM EDITOR ENHANCEMENTS --- */

/* Make the title input look like a high-priority header */
#editor-form-name {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--primary);
    border: 2px solid var(--border) !important;
    border-left-width: 6px !important;
    /* Visual indicator of importance */
    border-left-color: var(--accent) !important;
    padding: 12px 20px !important;
    background: white !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#editor-form-name:focus {
    border-color: var(--primary) !important;
    border-left-color: var(--primary) !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(32, 65, 100, 0.1);
}

#editor-form-name::placeholder {
    color: #cbd5e0;
    font-weight: 400;
}

/* Save Status text styling */
.form-save-status {
    font-size: 0.85rem;
    color: #94a3b8;
    font-style: italic;
    margin-right: 15px;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}











/* Specific hover for the download button in the toolbar */
button[onclick="exportEventData()"]:hover {
    background-color: #f0fff4 !important;
    /* Light success green */
    border-color: #38a169 !important;
    color: #276749 !important;
}




/* --- ADAPTABLE MASTER GRID --- */

.reg-table {
    table-layout: fixed;
    width: 100%;
}

.resizable-header {
    position: relative;
    overflow: hidden;
    resize: horizontal;
    /* User can drag the edge */
    min-width: 100px;
    max-width: 500px;
    padding: 12px !important;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

.editable-cell {
    outline: none;
    transition: background 0.2s;
    cursor: text;
}

.editable-cell:focus {
    background: #fffbe6 !important;
    /* Slight yellow highlight while editing */
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Feedback for successful sync */
.sync-success {
    animation: flashGreen 1s ease;
}

@keyframes flashGreen {
    0% {
        background: transparent;
    }

    50% {
        background: #c6f6d5;
    }

    100% {
        background: transparent;
    }
}

/* Ensure custom text wraps properly in cells */
.reg-table td {
    white-space: normal;
    word-wrap: break-word;
    font-size: 0.85rem;
    line-height: 1.4;
}


/* --- PULSE ANALYTICS --- */
.pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.pulse-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.pulse-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
}

.pulse-card.warning::before {
    background: #e53e3e;
}

.pulse-card.info::before {
    background: var(--accent);
}

.pulse-val {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.pulse-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.pulse-trend {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
}



/* --- VIEW TOGGLE --- */
.view-toggle-container {
    background: #edf2f7;
    padding: 3px;
    /* Tighter padding around buttons */
    border-radius: 10px;
    display: flex;
    gap: 2px;
    height: 36px;
    /* Reduced from 42px to 36px */
    align-items: stretch;
    border: 1px solid #e2e8f0;
}

.toggle-btn {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #718096;
    background: transparent;
}

.toggle-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.premium-card.past {
    opacity: 0.8;
    filter: saturate(0.5);
}

.premium-card.past:hover {
    opacity: 1;
    filter: saturate(1);
}






.event-list-item.expired {
    background-color: #f8fafc;
    /* Very light slate */
    border-left: 4px solid #cbd5e0;
    /* Muted gray border instead of Navy */
    opacity: 0.75;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

/* Title and Date text */
.event-list-item.expired .event-card-title {
    color: #64748b;
    /* Slate 500 */
    font-weight: 600;
}

.event-list-item.expired .event-card-date {
    color: #94a3b8;
    /* Slate 400 */
}

/* Grayscale icon */
.event-list-item.expired .material-icons {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Interaction: Bring it back to life on hover */
.event-list-item.expired:hover {
    opacity: 1;
    background-color: #ffffff;
    border-left-color: var(--primary);
    /* Shift back to Navy on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateX(4px);
    /* Subtle slide to signify "I am clickable" */
}

/* The "Completed" Badge */
.status-tag-expired {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Selection state for expired cards */
.event-list-item.expired.selected {
    background-color: #f1f5f9;
    border-left-color: var(--primary);
    opacity: 1;
}

/* --- SCHOOL ENGAGEMENT TABLE --- */
.engagement-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.engagement-table-wrapper {
    max-height: 500px;
    /* Limits height, enables internal scroll */
    overflow-y: auto;
}

.engagement-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.engagement-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    padding: 15px 20px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #edf2f7;
    z-index: 10;
    white-space: nowrap;
    padding: 15px 20px;
    vertical-align: middle;

}


/* Name Column: Left align for readability, but headers still centered */
.col-name-data {
    text-align: left;
    padding-left: 25px !important;
}

/* Alignment Classes */
.col-left {
    text-align: left !important;
}

.col-center {
    text-align: center !important;
}

/* Flex wrapper for headers with sort icons */
.engagement-table th.sort-header .header-content {
    display: inline-flex;
    /* Changed from flex to inline-flex for centering */
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

.engagement-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: var(--text-main);
    vertical-align: middle;
}

.engagement-table tr:hover {
    background-color: #f0f7ff;
}

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


.engagement-table a {
    transition: color 0.2s;
}

.engagement-table a:hover {
    color: var(--accent-hover);
}

.action-cell-group {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 15px;
}

.btn-row-manage {
    background: var(--primary);
    color: white !important;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-row-manage:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-row-manage .material-icons {
    font-size: 14px;
}

/* Style the name to look like a link */
.meeting-name-link {
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
}

.meeting-name-link:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

#dash-main-search {

    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 35px 0 40px;
    /* Space for Magnifier (Left) and X (Right) */
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    outline: none;
}

#dash-main-search::placeholder {
    color: #94a3b8;
}


#dash-main-search:focus {
    width: 400px;
    /* Expands when searching */
    background: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(32, 65, 100, 0.1);
    outline: none;


}

.search-icon-fixed {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 18px;
    pointer-events: none;
    z-index: 5;



    color: #94a3b8;
    pointer-events: none;
}


.search-clear-btn {
    position: absolute;
    right: 10px;
    font-size: 18px !important;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
    padding: 2px;
    border-radius: 50%;
}

.search-clear-btn:hover {
    color: var(--error);
    background: #fff5f5;
}

.search-clear-btn.hidden {
    display: none !important;
}







.school-name-cell {
    font-weight: 700;
    color: var(--primary);
}

.count-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
}

.badge-reg {
    background: #ebf8ff;
    color: #3182ce;
}

.badge-att {
    background: #f0fff4;
    color: #38a169;
}

.rate-bar-container {
    width: 100px;
    height: 8px;
    background: #edf2f7;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.rate-bar-fill {
    height: 100%;
    background: var(--accent);
}


/* --- SCHOOL PROFILE STYLES --- */
.prof-event-row {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Anchor for tooltip */
    cursor: default;
}

.prof-event-row:hover {
    background-color: #f8fafc;
}

.prof-event-date {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
}

.prof-event-name {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.9rem;
}

.attendance-pill {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    background: #edf2f7;
    color: #4a5568;
}

.attendance-pill.good {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #c6f6d5;
}

.attendance-pill.bad {
    background: #fff5f5;
    color: #c53030;
    opacity: 0.7;
}

/* HOVER TOOLTIP FOR NAMES */
.prof-event-row .roster-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 250px;
    background: #2d3748;
    color: white;
    padding: 15px;
    border-radius: 8px;
    z-index: 100;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.prof-event-row:hover .roster-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(-5px);
}

.tooltip-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #a0aec0;
    margin-bottom: 5px;
    display: block;
}

.tooltip-list {
    font-size: 0.85rem;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════
   SCHOOLS PANEL — REDESIGN
   ═══════════════════════════════════════════════════════ */

/* Panel body wrapper (both directory and profile use this) */
.school-panel-body {
    padding: 28px 36px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── DIRECTORY TABLE ───────────────────────────────────── */
.school-dir-table tbody tr.school-dir-row {
    cursor: pointer;
}
.school-dir-table tbody tr.school-dir-row:hover td {
    background-color: #f0f7ff;
}
.school-dir-name {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.92rem;
}
.school-dir-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}
.school-type-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.chip-elementary { background: #ebf8ff; color: #2c5282; }
.chip-secondary  { background: #f0fff4; color: #276749; }
.chip-board      { background: #faf5ff; color: #553c9a; }
.chip-oecta      { background: #fffbeb; color: #744210; }
.chip-other      { background: #f7fafc; color: #4a5568; }

.school-eng-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}
.school-eng-badge.good { background: #f0fff4; color: #276749; }
.school-eng-badge.warn { background: #fffbeb; color: #744210; }
.school-eng-badge.bad  { background: #fff5f5; color: #c53030; }

/* ── PROFILE HERO CARD ─────────────────────────────────── */
.school-hero-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(32, 65, 100, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.school-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}
.school-hero-avatar {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: #eef2ff;
    border: 2px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.school-hero-info { min-width: 0; }
.school-hero-type {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.school-hero-name {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
.school-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #64748b;
}
.school-hero-meta span { display: flex; align-items: center; gap: 5px; }
.school-hero-meta .material-icons { font-size: 15px; color: #94a3b8; }
.school-hero-stats {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
}
.school-hero-stat { text-align: center; }
.school-hero-stat-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}
.school-hero-stat-value.good { color: #276749; }
.school-hero-stat-value.warn { color: #744210; }
.school-hero-stat-value.bad  { color: #c53030; }
.school-hero-stat-value.muted { color: #cbd5e0; }
.school-hero-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── DETAIL CARDS GRID ─────────────────────────────────── */
.school-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.school-detail-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.school-detail-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.school-detail-card-title .material-icons { font-size: 16px; color: #94a3b8; }
.school-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 20px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}
.school-detail-row:last-child { border-bottom: none; }
.school-detail-label {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
    flex-shrink: 0;
}
.school-detail-value {
    font-size: 0.88rem;
    color: #1e293b;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* Edit form uses same card structure */
.school-edit-field {
    padding: 10px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
}
.school-edit-field:last-child { border-bottom: none; }
.school-edit-field label {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
    flex: 0 0 110px;
}
.school-edit-field .form-input {
    flex: 1;
    font-size: 0.88rem;
    padding: 6px 10px;
    min-width: 0;
}
.school-edit-field .form-input[readonly] { background: #f8fafc; color: #94a3b8; cursor: default; }

/* ── TABS ──────────────────────────────────────────────── */
.school-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.school-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 8px 8px 0 0;
    border: 1.5px solid #e2e8f0;
    border-bottom: none;
    background: #f8fafc;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
.school-tab .material-icons { font-size: 17px; }
.school-tab:hover { background: #eef2ff; color: var(--primary); }
.school-tab.active { background: white; color: var(--primary); border-color: #e2e8f0; position: relative; }
.school-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
}
.school-tab-panel {
    border-radius: 0 8px 8px 8px;
}

/* ── STAFF ROW ─────────────────────────────────────────── */
.school-staff-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.school-staff-row:last-child { border-bottom: none; }
.school-staff-row:hover { background: #f8fafc; }
.school-staff-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    flex-shrink: 0;
}
.school-staff-info { flex: 1; min-width: 0; }
.school-staff-name { font-weight: 700; color: #1e293b; font-size: 0.9rem; }
.school-staff-email { font-size: 0.75rem; color: #94a3b8; }
.school-staff-position {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: right;
}
.school-staff-type {
    font-weight: 500;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: 0;
}

/* ── STAFF ROSTER REDESIGN ─────────────────────────────── */

.roster-header {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.roster-header-left { display: flex; flex-direction: column; gap: 8px; }
.roster-header-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.roster-summary-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.roster-summary-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #eef3fa;
    color: var(--primary);
    border: 1px solid #c7d9ef;
}
.roster-chip-unassigned {
    background: #fef9ec;
    color: #92400e;
    border-color: #fde68a;
}

/* Card */
.roster-card {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.roster-card:hover { background: #f8fafc; }

.roster-card-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Avatar */
.roster-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

/* Info */
.roster-info { flex: 1; min-width: 0; }
.roster-name {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    line-height: 1.2;
}
.roster-email {
    font-size: 0.73rem;
    color: #94a3b8;
    margin-top: 2px;
}
.roster-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.roster-position {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.roster-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.roster-badge-type { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.roster-badge-fte  { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* Schedule picker / chip */
.roster-schedule-picker { flex-shrink: 0; text-align: right; }
.roster-sched-label {
    font-size: 0.62rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}
.roster-sched-select {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    background: white;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}
.roster-sched-select:hover,
.roster-sched-select:focus { border-color: var(--primary); outline: none; }

.roster-schedule-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: #eef3fa;
    border: 1px solid #c7d9ef;
    border-radius: 20px;
    padding: 5px 12px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 3px;
}

/* Stats bar */
.roster-stats-bar {
    display: flex;
    margin-top: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.roster-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
    flex: 1;
    border-right: 1px solid #e2e8f0;
    gap: 1px;
}
.roster-stat:last-child { border-right: none; }
.roster-stat .material-icons { font-size: 14px; opacity: 0.7; }
.roster-stat-value {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
}
.roster-stat-label {
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.roster-stat-instruction .material-icons,
.roster-stat-instruction .roster-stat-value { color: #2563eb; }
.roster-stat-prep .material-icons,
.roster-stat-prep .roster-stat-value { color: #7c3aed; }
.roster-stat-breaks .material-icons,
.roster-stat-breaks .roster-stat-value { color: #16a34a; }
.roster-stat-total .material-icons,
.roster-stat-total .roster-stat-value { color: #475569; }

/* End of list marker */
.roster-end-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 20px;
    color: #94a3b8;
    font-size: 0.8rem;
    border-top: 2px dashed #f1f5f9;
}
.roster-end-marker .material-icons { font-size: 16px; color: #22c55e; }

/* ═══════════════════════════════════════════════════════
   SCHEDULE HISTORY PANEL
   ═══════════════════════════════════════════════════════ */

/* Top bar */
.hist-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e2e8f0;
    gap: 16px;
    flex-wrap: wrap;
}
.hist-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}
.hist-panel-title .material-icons { color: var(--primary); font-size: 20px; }
.hist-panel-subtitle { font-size: 0.78rem; color: #94a3b8; margin-top: 3px; }

/* Empty state */
.hist-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 30px;
    text-align: center;
    color: #94a3b8;
}
.hist-empty-state .material-icons { font-size: 48px; opacity: 0.35; }
.hist-empty-state p { margin: 0; font-size: 0.9rem; }
.hist-empty-hint { font-size: 0.8rem; max-width: 440px; }

/* History entry (accordion card) */
.hist-entry {
    border-bottom: 1px solid #e2e8f0;
}
.hist-entry-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.hist-entry-header:hover { background: #f8fafc; }
.hist-entry-open .hist-entry-header { background: #f1f7ff; }

.hist-entry-year-badge {
    flex-shrink: 0;
    background: var(--primary);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.hist-entry-meta { flex: 1; min-width: 0; }
.hist-entry-label-text {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e293b;
    margin-bottom: 3px;
}
.hist-entry-byline {
    font-size: 0.75rem;
    color: #64748b;
}
.hist-entry-stats {
    display: flex;
    gap: 14px;
    margin-top: 5px;
}
.hist-entry-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}
.hist-entry-stats .material-icons { font-size: 13px; }
.hist-entry-chevron {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 22px;
    transition: transform 0.2s;
}
.hist-entry-open .hist-entry-chevron { transform: rotate(180deg); }

/* Entry body */
.hist-entry-body {
    border-top: 1px solid #e2e8f0;
    background: white;
}

/* Schedule tabs within an entry */
.hist-sched-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.hist-sched-tab {
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.hist-sched-tab:hover { color: var(--primary); }
.hist-sched-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: white;
}

/* Schedule panel content */
.hist-sched-panel { padding: 0; }

/* Timeline bar */
.hist-timeline-wrap {
    padding: 16px 24px 0;
}

/* Section headings */
.hist-section {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
}
.hist-section:first-child { border-top: none; }
.hist-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.hist-section-title .material-icons { font-size: 15px; }

/* Block list */
.hist-block-list { display: flex; flex-direction: column; gap: 4px; }
.hist-block-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    font-size: 0.82rem;
}
.hist-block-accent {
    width: 4px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}
.hist-block-time {
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    min-width: 120px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.hist-block-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hist-block-label {
    flex: 1;
    color: #1e293b;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hist-block-dur {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Staff list */
.hist-staff-list { display: flex; flex-direction: column; gap: 2px; }
.hist-staff-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 6px;
    transition: background 0.1s;
}
.hist-staff-row:hover { background: #f8fafc; }
.hist-staff-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.hist-staff-name {
    font-weight: 600;
    font-size: 0.87rem;
    color: #1e293b;
    flex: 1;
    min-width: 0;
}
.hist-staff-details { display: flex; gap: 8px; align-items: center; }
.hist-staff-pos {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hist-staff-fte {
    font-size: 0.65rem;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 2px 8px;
    font-weight: 600;
}
.hist-no-content {
    font-size: 0.82rem;
    color: #94a3b8;
    padding: 12px 0;
}

/* ── COMMIT MODAL ────────────────────────────────────────── */
.schedhistory-commit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.schedhistory-commit-modal {
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}
.schedhistory-commit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.schedhistory-commit-body { padding: 20px 22px; }
.schedhistory-commit-desc {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 18px;
}
.schedhistory-commit-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.schedhistory-commit-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}
.schedhistory-commit-summary {
    background: #f0f7ff;
    border: 1px solid #c7d9ef;
    border-radius: 8px;
    padding: 14px 16px;
}
.schedhistory-commit-summary-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}
.schedhistory-commit-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.schedhistory-commit-summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: #475569;
}
.schedhistory-commit-summary-list .material-icons {
    font-size: 15px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 1px;
}
.schedhistory-commit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ── LOADING / EMPTY STATES ────────────────────────────── */
.school-loading-cell {
    padding: 40px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}
.school-loading-inline {
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.88rem;
}
.school-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 0.88rem;
    text-align: center;
}
.school-empty-state .material-icons { font-size: 36px; opacity: 0.5; }
.school-empty-state p { margin: 0; }
.school-empty-state.error { color: #e53e3e; }
.school-empty-state.error .material-icons { opacity: 0.7; }

/* ── SCHOOLS PANEL BREADCRUMB & BACK BUTTON ───────────── */
.school-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.school-back-btn:hover {
    background: #f1f5f9;
    color: var(--primary);
}
.school-back-btn .material-icons { font-size: 20px; }

.school-breadcrumb-parent {
    font-size: 0.88rem;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
}
.school-breadcrumb-parent:hover { color: var(--primary); }

.school-breadcrumb-sep {
    font-size: 16px !important;
    color: #cbd5e0;
    flex-shrink: 0;
}

.school-breadcrumb-current {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* ── BREADCRUMB DIVIDER (legacy) ───────────────────────── */
.nav-title-divider {
    color: #cbd5e0;
    font-size: 1.1rem;
    font-weight: 300;
    user-select: none;
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
    .school-details-grid { grid-template-columns: 1fr; }
    .school-hero-card { flex-direction: column; align-items: flex-start; }
    .school-hero-stats { width: 100%; justify-content: space-around; }
    .school-panel-body { padding: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCHOOLS PANEL — EXTENDED STYLES (cards, map, sort, schedule, modal)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DIRECTORY VIEW TOGGLE ─────────────────────────────── */
.school-view-toggle {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.school-view-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.school-view-btn .material-icons { font-size: 16px; }
.school-view-btn:hover { background: #e2e8f0; color: var(--primary); }
.school-view-btn.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── SCHOOL CARDS GRID ─────────────────────────────────── */
.school-dir-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    padding: 4px 0 8px;
}
.school-dir-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.school-dir-card:hover {
    box-shadow: 0 8px 24px rgba(32,65,100,0.14);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.school-dir-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.school-dir-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eef2ff;
    border: 2px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
    flex-shrink: 0;
}
.school-dir-card-identity { flex: 1; min-width: 0; }
.school-dir-card-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.25;
    margin-bottom: 6px;
}
.school-dir-card-city {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}
.school-dir-card-city .material-icons { font-size: 13px; }
.school-dir-card-stats {
    display: flex;
    gap: 0;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}
.school-dir-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0 4px;
    border-right: 1px solid #f1f5f9;
}
.school-dir-card-stat:last-child { border-right: none; }
.school-dir-card-stat-value {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}
.school-dir-card-stat-value.good { color: #276749; }
.school-dir-card-stat-value.warn { color: #744210; }
.school-dir-card-stat-value.bad  { color: #c53030; }
.school-dir-card-stat-value.muted { color: #cbd5e0; }
.school-dir-card-stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-align: center;
}

/* ── SCHOOL MAP VIEW ───────────────────────────────────── */

/* In map mode, the directory panel body becomes a flex column
   so the map can expand to fill all remaining height. */
.school-panel-body.map-mode-active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The map content div bleeds past the panel padding and fills remaining space */
#school-content-map.active-map {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0 -36px -28px;   /* offset the panel's 28px/36px padding */
}

/* The map container and inner element fill their flex parent */
.school-map-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* ── MAP CONTROL PANEL ─────────────────────────────────── */

/* The map container is position:relative so the panel overlays it */
.school-map-container {
    position: relative;
}

/* Floating left sidebar */
.map-control-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 280px;
    max-height: calc(100% - 24px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(32,65,100,0.18), 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
    transition: width 0.2s ease;
    border: 1px solid rgba(32,65,100,0.1);
}

/* Header row */
.map-cp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--primary);
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.map-cp-header span:nth-child(2) {
    flex: 1;
}
.map-cp-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: #94a3b8;
    transition: background 0.15s, color 0.15s;
}
.map-cp-collapse-btn:hover { background: #e2e8f0; color: var(--primary); }

/* Scrollable content area */
.map-control-panel > .map-cp-section:first-of-type,
.map-control-panel > .map-cp-section {
    overflow-y: auto;
}
.map-control-panel {
    overflow-y: auto;
}
/* Override: header stays sticky */
.map-cp-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Each section */
.map-cp-section {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.map-cp-section:last-child { border-bottom: none; }

/* Section header */
.map-cp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.map-cp-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #334155;
}
.map-cp-section-title .material-icons { font-size: 16px; color: var(--primary); }

/* Count badge */
.map-cp-count {
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* All / None buttons */
.map-cp-toggle-row {
    display: flex;
    gap: 4px;
}
.map-cp-mini-btn {
    background: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #64748b;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.map-cp-mini-btn .material-icons { font-size: 15px; }
.map-cp-mini-btn:hover {
    background: #eef2f7;
    border-color: var(--primary);
    color: var(--primary);
}

/* Search input */
.map-cp-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.map-cp-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px !important;
    color: #94a3b8;
    pointer-events: none;
}
.map-cp-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 30px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    font-family: inherit;
    color: #334155;
    outline: none;
    transition: border-color 0.15s;
    background: #f8fafc;
}
.map-cp-search:focus { border-color: var(--primary); background: white; }

/* Type toggle chips */
.map-cp-type-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}
.map-cp-type-chip {
    padding: 3px 10px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.map-cp-type-chip .chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.map-cp-type-chip.active {
    border-color: var(--primary);
    background: #eef2f7;
    color: var(--primary);
}
.map-cp-type-chip:hover:not(.active) { border-color: #94a3b8; }

/* Scrollable item list */
.map-cp-item-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.map-cp-item-list::-webkit-scrollbar { width: 4px; }
.map-cp-item-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* Individual item row */
.map-cp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.76rem;
    color: #334155;
}
.map-cp-item:hover { background: #f1f5f9; }
.map-cp-item.active { background: #eef2f7; }
.map-cp-item-check {
    width: 15px; height: 15px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
}
.map-cp-item.active .map-cp-item-check {
    background: var(--primary);
    border-color: var(--primary);
}
.map-cp-item.active .map-cp-item-check::after {
    content: '';
    width: 8px; height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}
.map-cp-item-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.map-cp-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-cp-item-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* Load button */
.map-cp-load-btn {
    width: 100%;
    padding: 8px 12px;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.map-cp-load-btn:hover {
    background: #eef2f7;
    border-color: var(--primary);
    color: var(--primary);
}
.map-cp-load-btn .material-icons { font-size: 16px; }

/* Filter dropdowns */
.map-cp-filter-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.map-cp-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.map-cp-select {
    width: 100%;
    padding: 6px 8px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-size: 0.76rem;
    font-family: inherit;
    color: #334155;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.map-cp-select:focus { border-color: var(--primary); }

/* Expand button (shows when panel is collapsed) */
.map-cp-expand-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: white;
    border: 1px solid rgba(32,65,100,0.12);
    box-shadow: 0 2px 8px rgba(32,65,100,0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    z-index: 10;
    transition: background 0.15s, box-shadow 0.15s;
}
.map-cp-expand-btn:hover { background: #eef2f7; box-shadow: 0 4px 12px rgba(32,65,100,0.2); }
.map-cp-expand-btn .material-icons { font-size: 20px; }

/* Loading state */
.map-cp-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.76rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── TABLE SORT INDICATORS ─────────────────────────────── */
.school-dir-table thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.school-dir-table thead th:hover { color: var(--primary); }
.school-sort-icon {
    font-size: 14px !important;
    vertical-align: middle;
    opacity: 0.25;
    transition: opacity 0.15s;
}
.school-sort-icon.active-asc,
.school-sort-icon.active-desc { opacity: 1; color: var(--primary); }

/* ── ADD FACILITY MODAL ────────────────────────────────── */
#school-add-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(2px);
}
#school-add-modal {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}
.school-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    border-radius: 20px 20px 0 0;
}
.school-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.school-modal-body {
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.school-modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.school-modal-field.full-width { grid-column: 1 / -1; }
.school-modal-field label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.school-modal-field .form-input { font-size: 0.88rem; padding: 8px 12px; }
.school-modal-footer {
    padding: 16px 28px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #f1f5f9;
}

/* ── DELETE DANGER BUTTON ──────────────────────────────── */
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid #fed7d7;
    background: #fff5f5;
    color: #c53030;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-danger:hover { background: #c53030; color: white; border-color: #c53030; }
.btn-danger .material-icons { font-size: 16px; }

/* ── THREE-COLUMN DETAIL GRID ──────────────────────────── */
.school-details-grid.three-col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1150px) { .school-details-grid.three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .school-details-grid.three-col { grid-template-columns: 1fr; } }

/* ── SCHEDULE BUILDER ──────────────────────────────────── */
.schedule-builder-wrap { padding: 4px 0; }

/* ── Schedule header ──────────────────────────────────────────────────────── */
.sched-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

/* ── Schedule metadata card (Material Design) ────────────────────────────── */
.sched-meta-card {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 0 transparent;
    overflow: visible;
    padding: 14px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s;
}
.sched-meta-card:focus-within {
    box-shadow: 0 3px 12px rgba(32,65,100,0.12);
}
.sched-meta-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.sched-meta-desc-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sched-meta-card-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sched-meta-card-label .material-icons { font-size: 11px; }
.sched-meta-desc-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1.5px solid #e2e8f0;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    padding: 3px 2px 5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.sched-meta-desc-input::placeholder { color: #cbd5e0; font-weight: 400; }
.sched-meta-desc-input:hover { border-bottom-color: #94a3b8; }
.sched-meta-desc-input:focus { border-bottom-color: var(--primary); }
.sched-meta-bellchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 14px;
}
.sched-meta-bellchip .material-icons { font-size: 14px; color: var(--primary); }
.sched-meta-bellchip-missing { background: #f8f9fb; color: #94a3b8; }
.sched-meta-bellchip-missing .material-icons { color: #cbd5e0; }

.sched-meta-card-bot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sched-meta-teacher-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sched-meta-teacher-a-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef4fb;
    border: 1px solid #c7d9ef;
    border-radius: 8px;
    padding: 7px 14px 7px 10px;
    flex-shrink: 0;
}
.sched-meta-teacher-a-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sched-meta-teacher-a-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
}
.sched-meta-teacher-a-role {
    font-size: 0.66rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sdd-empty-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    padding: 6px 0;
}
.sdd-empty-hint .material-icons { font-size: 14px; }

/* ── Custom schedule dropdown (sdd) ─────────────────────────────────────── */
.sdd-wrap {
    position: relative;
    display: inline-block;
    min-width: 220px;
    max-width: 340px;
    width: 100%;
}
.sdd-wrap.sdd-compact {
    min-width: 160px;
    max-width: 260px;
}
.sdd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    color: #1e293b;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sdd-trigger:hover { border-color: #94a3b8; background: #fff; }
.sdd-wrap.sdd-open .sdd-trigger {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32,65,100,0.08);
}
.sdd-compact .sdd-trigger { padding: 5px 8px; font-size: 0.78rem; }
.sdd-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sdd-trigger-placeholder { color: #94a3b8; font-weight: 400; }
.sdd-chevron { font-size: 18px; color: #94a3b8; flex-shrink: 0; transition: transform 0.2s; margin-left: auto; }
.sdd-wrap.sdd-open .sdd-chevron { color: var(--primary); }

.sdd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    z-index: 1200;
    overflow: hidden;
    animation: sddSlideIn 0.12s ease;
}
@keyframes sddSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sdd-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfd;
}
.sdd-search-icon { font-size: 15px; color: #94a3b8; flex-shrink: 0; }
.sdd-search {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    color: #1e293b;
    font-family: inherit;
    outline: none;
}
.sdd-search::placeholder { color: #cbd5e0; }
.sdd-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
}
.sdd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.sdd-item:hover { background: #f1f5f9; }
.sdd-item.sdd-item-selected { background: #eef4fb; }
.sdd-item-label {
    font-size: 0.81rem;
    font-weight: 600;
    color: #334155;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sdd-item.sdd-item-selected .sdd-item-label { color: var(--primary); }

/* ── Shared avatar for dropdowns ─────────────────────────────────────────── */
.sdd-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.sdd-avatar-none {
    background: #e2e8f0;
    color: #94a3b8;
}
.sdd-avatar-none .material-icons { font-size: 15px; }
.sdd-compact .sdd-avatar { width: 22px; height: 22px; font-size: 0.6rem; }
.sdd-compact .sdd-avatar-none .material-icons { font-size: 13px; }

/* ── Teacher B picker inside instruction blocks ──────────────────────────── */
.sched-block-row-teacherb {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px 6px;
    margin-top: 4px;
    border-top: 1px dashed #f1f5f9;
    background: #fafbff;
    border-radius: 0 0 6px 6px;
}
.sched-block-row-teacherb.assigned { background: #f0f7ff; border-top-color: #c7d9ef; }
.sched-teacherb-icon {
    font-size: 14px;
    color: #94a3b8;
    flex-shrink: 0;
    margin-top: 8px;
}
.sched-block-row-teacherb.assigned .sched-teacherb-icon { color: var(--primary); }
.sched-teacherb-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sched-teacherb-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sched-block-row-teacherb.assigned .sched-teacherb-label { color: #475569; }
.sched-teacherb-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2d6a4f;
    margin-top: 2px;
}
.sched-teacherb-confirmed .material-icons { font-size: 13px; color: #38a169; }
.sched-title   { font-size: 1rem; font-weight: 800; color: var(--primary); margin-bottom: 2px; }
.sched-subtitle { font-size: 0.78rem; color: #94a3b8; }

/* ── Schedule template tabs ───────────────────────────────────────────────── */
.sched-tabs-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}
.sched-tab {
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sched-tab:hover  { color: var(--primary); background: #eef3fa; }
.sched-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: #dce8f5; }

/* Inline rename input that appears when double-clicking a tab */
.sched-tab-name-input {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--primary);
    outline: none;
    padding: 0 2px;
    min-width: 60px;
    max-width: 160px;
    width: auto;
}

/* Delete (×) badge inside the active tab */
.sched-tab-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s, background 0.15s;
}
.sched-tab-x:hover { color: #e53e3e; background: #fecdd3; }

.sched-tab-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    background: none;
    border: 1.5px dashed #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 4px;
    transition: color 0.15s, border-color 0.15s;
}
.sched-tab-add:hover { color: var(--primary); border-color: var(--primary); }

/* .sched-tab-remove removed — delete is now the × badge inside the active tab */

/* ── Table column widths ──────────────────────────────────────────────────── */
.sched-col-time     { width: 128px; white-space: nowrap; }
.sched-col-type     { width: 190px; }
.sched-col-duration { width: 80px; text-align: center; }
.sched-col-delete   { width: 36px; }

/* ── Validation bar ───────────────────────────────────────────────────────── */
.sched-validation-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
}
.sched-val-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #475569;
}
.sched-val-item .material-icons { font-size: 16px; }
.sched-val-item.ok   .material-icons { color: #38a169; }
.sched-val-item.ok   { color: #276749; }
.sched-val-item.warn .material-icons { color: #dd6b20; }
.sched-val-item.warn { color: #7b341e; }
.sched-val-hint { font-size: 0.75rem; font-weight: 400; color: #dd6b20; margin-left: 2px; }

/* ── Save button inactive state ───────────────────────────────────────────── */
.sched-save-btn:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
    pointer-events: auto;
}

/* ── Staff assignment section ─────────────────────────────────────────────── */
.sched-staff-section {
    margin-top: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.sched-staff-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}
.sched-staff-toggle:hover { background: #f1f5f9; }

.sched-staff-chevron {
    font-size: 18px !important;
    color: #94a3b8;
    transition: transform 0.2s;
}

.sched-staff-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 2px 9px;
    border-radius: 20px;
}

.sched-staff-panel {
    border-top: 1px solid #e8eef5;
    padding: 12px 14px;
    background: white;
    max-height: 320px;
    overflow-y: auto;
}

.sched-staff-empty {
    font-size: 0.83rem;
    color: #94a3b8;
    font-style: italic;
    margin: 0;
    padding: 6px 0;
}

.sched-staff-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sched-staff-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid transparent;
}
.sched-staff-row:hover   { background: #f8fafc; }
.sched-staff-row.assigned {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.sched-staff-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.sched-staff-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e40af;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sched-staff-row.assigned .sched-staff-avatar {
    background: #2563eb;
    color: white;
}

.sched-staff-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sched-staff-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: #1e293b;
}
.sched-staff-pos {
    font-size: 0.73rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-timeline {
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.schedule-timeline-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
}
.schedule-timeline-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    font-size: 0.8rem;
    font-style: italic;
}

/* Block type colors — timeline segments and table rows */
.sched-instruction { background: #dbeafe; color: #1e40af; }
.sched-recess      { background: #dcfce7; color: #166534; }
.sched-lunch       { background: #fef9c3; color: #854d0e; }
.sched-prep        { background: #ede9fe; color: #5b21b6; }
.sched-assembly    { background: #ffe4e6; color: #9f1239; }
.sched-other       { background: #f1f5f9; color: #475569; }

/* ── Block cards list ─────────────────────────────────────────────────────── */
.sched-empty-hint {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 16px;
    font-style: italic;
}

.sched-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.sched-block-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
    position: relative;
}
.sched-block-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    border-color: #cdd8e8;
}
.sched-block-card:hover .sched-block-delete { opacity: 1; }

/* Left accent stripe — vivid color per block type */
.sched-block-accent {
    width: 5px;
    flex-shrink: 0;
    border-radius: 0;
}
.sched-block-accent.sched-instruction { background: #3b82f6; }
.sched-block-accent.sched-recess      { background: #22c55e; }
.sched-block-accent.sched-lunch       { background: #eab308; }
.sched-block-accent.sched-prep        { background: #8b5cf6; }
.sched-block-accent.sched-assembly    { background: #ec4899; }
.sched-block-accent.sched-other       { background: #94a3b8; }

/* Subtle left-border tint on the card itself */
.sched-instruction-card { border-left-color: #bfdbfe; }
.sched-recess-card      { border-left-color: #bbf7d0; }
.sched-lunch-card       { border-left-color: #fef08a; }
.sched-prep-card        { border-left-color: #ddd6fe; }
.sched-assembly-card    { border-left-color: #fbcfe8; }
.sched-other-card       { border-left-color: #e2e8f0; }

/* Card body */
.sched-block-body {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Top row: times + duration pill + delete */
.sched-block-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sched-block-times {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sched-time-bare {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    font-family: inherit;
    padding: 4px 6px;
    border: none;
    background: transparent;
    border-bottom: 1.5px solid transparent;
    border-radius: 4px 4px 0 0;
    width: 112px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.sched-time-bare:hover  { background: #f1f5f9; border-bottom-color: #cbd5e0; }
.sched-time-bare:focus  { outline: none; background: #eef3fa; border-bottom-color: var(--primary); }

.sched-time-arrow {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Duration pill — floats right of times, before the delete */
.sched-duration-pill {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 11px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Spacer pushes delete to the far right */
.sched-block-row-top .sched-block-delete { margin-left: auto; }

.sched-block-delete {
    background: none;
    border: none;
    color: #cbd5e0;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.sched-block-delete:hover { color: #e53e3e; background: #fff1f2; }
.sched-block-delete .material-icons { font-size: 17px; }

/* Bottom row: type badge + ghost label */
.sched-block-row-bot {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Type as a styled select that looks like a badge */
.sched-type-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23475569'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
    transition: opacity 0.15s;
}
.sched-type-badge:focus { outline: none; }
.sched-type-badge:hover { opacity: 0.85; }

/* Per-type badge colours */
.sched-instruction-badge { background: #dbeafe; color: #1e40af; }
.sched-recess-badge      { background: #dcfce7; color: #166534; }
.sched-lunch-badge       { background: #fef9c3; color: #854d0e; }
.sched-prep-badge        { background: #ede9fe; color: #5b21b6; }
.sched-assembly-badge    { background: #fce7f3; color: #9d174d; }
.sched-other-badge       { background: #f1f5f9; color: #475569; }

/* Ghost label input — invisible until hovered/focused */
.sched-label-ghost {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem;
    color: #64748b;
    font-family: inherit;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid transparent;
    padding: 3px 4px;
    border-radius: 4px 4px 0 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sched-label-ghost::placeholder { color: #cbd5e0; font-style: italic; }
.sched-label-ghost:hover  { background: #f8fafc; border-bottom-color: #e2e8f0; }
.sched-label-ghost:focus  {
    outline: none;
    background: #f8fafc;
    border-bottom-color: var(--primary);
    color: #1e293b;
}

/* Add block — full width dashed card */
.sched-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: 1.5px dashed #cbd5e0;
    background: transparent;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 16px;
    font-family: inherit;
}
.sched-add-btn:hover { border-color: var(--primary); color: var(--primary); background: #f0f5ff; }
.sched-add-btn .material-icons { font-size: 18px; }

.schedule-totals {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-top: 2px solid #e2e8f0;
    margin-top: 4px;
}
.schedule-total-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}
.schedule-total-chip .chip-label { opacity: 0.75; font-weight: 600; }
.schedule-total-chip .chip-value { font-weight: 900; font-size: 0.9rem; }

.schedule-save-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.schedule-save-bar .schedule-hint {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── DIRECTORY CONTROLS BAR ────────────────────────────── */
.school-dir-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ── PROFILE BACK NAVIGATION ROW ──────────────────────── */
.school-profile-back-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 18px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.school-profile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: white;
    color: #64748b;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.school-profile-back-btn .material-icons { font-size: 18px; }
.school-profile-back-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(32,65,100,0.2);
}

/* ── WEEKLY SCHEDULE VIEW ──────────────────────────────── */
.weekly-schedule-wrap { padding: 4px 0; }
.weekly-schedule-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.weekly-day-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: white;
}
.weekly-day-header {
    padding: 10px 12px;
    background: var(--primary);
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.weekly-day-timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.weekly-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    overflow: hidden;
    min-height: 20px;
}
.weekly-block:last-child { border-bottom: none; }
.weekly-block-label {
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.weekly-block-time {
    font-size: 0.62rem;
    opacity: 0.7;
    margin-top: 2px;
    font-weight: 600;
}
.weekly-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 10px;
    color: #94a3b8;
    text-align: center;
    font-size: 0.88rem;
}
.weekly-empty .material-icons { font-size: 36px; opacity: 0.4; }
.weekly-summary-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 0 0;
    margin-top: 16px;
    border-top: 2px solid #e2e8f0;
}

@media (max-width: 900px) {
    .weekly-schedule-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .weekly-schedule-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── SORT CONTROLS FOR CARDS ───────────────────────────── */
.school-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: #64748b;
}
.school-sort-bar select {
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    background: white;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
}

/* --- Dashboard List View --- */
.row-past-event td {
    color: #94a3b8 !important;
    /* Muted slate */
    font-style: italic;
    opacity: 0.8;
}

.row-past-event:hover td {
    color: var(--primary) !important;
    font-style: normal;
    opacity: 1;
}

.hidden {
    display: none !important;
}

/* Sortable Headers */
.sort-header {
    cursor: pointer;
    user-select: none;
}

.sort-header:hover {
    background-color: #f1f5f9 !important;
    color: var(--primary) !important;
}

.sort-header .material-icons {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 0.5;
}

.view-toggle-container {
    background: #edf2f7;
    /* Matching your existing sidebar/toggle theme */
    padding: 4px;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    height: 42px;
    /* Force consistent container height */
    align-items: stretch;
}

.toggle-btn {
    padding: 0 14px;
    /* Reduced horizontal padding */
    border-radius: 7px;
    border: none;
    font-weight: 700;
    font-size: 0.82rem;
    /* Slightly smaller font */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
    /* Slate 500 for inactive */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 38px;
    /* Compact square for icon buttons */
    white-space: nowrap;
}

.toggle-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for active state */
}

.toggle-btn .material-icons {
    font-size: 18px !important;
}

/* Ensure the table doesn't bleed out of the dashboard */
#meeting-list-container {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
}

.toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary);
}

/* --- Dashboard List View Refinements --- */
.engagement-table td {
    vertical-align: middle;
}

.registration-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.reg-stat-pill {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    background: #f1f5f9;
    padding: 2px 10px;
    border-radius: 12px;
}

.reg-deadline-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.reg-deadline-text.expired {
    color: #e53e3e;
}



.btn-row-settings:hover {
    color: var(--primary);
    transform: rotate(30deg);
}

/* --- SIDEBAR ACTIVE STATE --- */
.rail-item.active {
    background-color: #ebf8ff;
    /* Light OECTA Blue tint */
    color: var(--primary);
    /* Navy Text */
    border-left: 4px solid var(--primary);
    /* Visual indicator strip */
    font-weight: 800;
}

.rail-item.active .material-icons {
    color: var(--primary);
}

/* Ensure the hover doesn't conflict with active */
.rail-item:hover:not(.active) {
    background-color: #f8fafc;
}

/* --- ICON SPINNER ANIMATION --- */
@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn-sidebar-tiny.is-loading .material-icons {
    animation: icon-spin 1s linear infinite;
    color: var(--primary) !important;
}

/* Ensure the published toggle in the list view is compact */
.list-toggle-cell {
    width: 100px;
    text-align: center;
}


.search-row-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    /* Exact match for adjacent toggle buttons */
    width: 220px;
    /* Wider default state */
    background: #edf2f7;
    /* Matching toggle background */
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, border-color 0.2s;
    overflow: hidden;
}



/* Expands left because parent uses justify-content: flex-end */
.search-row-wrapper:focus-within {
    width: 450px;
    background: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(32, 65, 100, 0.1);
}
















/* --- CALENDAR QUICK JUMP PICKER --- */
.date-jump-popover {
    position: absolute;
    top: 120%;
    /* Sits just below the title */
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 5000;
    width: 260px;
    padding: 10px;
}

.picker-columns {
    display: flex;
    gap: 8px;
    height: 200px;
    /* Fixed height for scrolling */
}

.picker-col {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Slim Scrollbar */
.picker-col::-webkit-scrollbar {
    width: 4px;
}

.picker-col::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.picker-item {
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 2px;
    transition: all 0.2s;
}

.picker-item:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.picker-item.active {
    background: var(--primary);
    color: white;
}

.picker-col.years {
    border-left: 1px solid #f1f5f9;
    padding-left: 8px;
}







/* ==========================================================================
   LOGIN & AUTHENTICATION UI
   ========================================================================== */

/* 1. The Spinner Animation */
.spin-icon {
    animation: oecta-rotate 2s infinite linear;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 20px;
}

@keyframes oecta-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/* 2. Login Button Loading State */
.btn-primary:disabled {
    background-color: var(--primary-hover) !important;
    opacity: 0.8;
    cursor: wait;
}


/* --- GOOGLE BUTTON FIX --- */
.btn-google {
    background: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
    padding: 0 !important;
    /* Remove padding to let height/flex handle it */
    height: 44px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-family: 'Roboto', arial, sans-serif !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: background-color .2s, box-shadow .2s;

    /* Layout Logic */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 15px !important;

    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15) !important;
    white-space: nowrap !important;
}

/* Force the image size and prevent it from stretching */
.btn-google img {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    /* Prevents icon from squishing */
    display: block !important;
}

.btn-google span {
    display: inline-block !important;
    margin: 0 !important;
}

/* Hover/Active states */
.btn-google:hover:not(:disabled) {
    background-color: #f8f9fa !important;
    border-color: #d2e3fc !important;
}

.btn-google:active:not(:disabled) {
    background-color: #eeeeee !important;
}

.btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f1f3f4 !important;
    box-shadow: none !important;
}





/* --- KIOSK CONTROLS & IMMERSIVE MODE --- */

/* 1. Control Group Layout */
.kiosk-actions {
    display: flex;
    gap: 12px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 2. Immersive Mode Logic */
/* When kiosk is immersive, hide the controls and search */
#view-kiosk.immersive-mode .kiosk-actions,
#view-kiosk.immersive-mode .kiosk-search-wrap,
#view-kiosk.immersive-mode .kiosk-top-bar {
    background: transparent;
    border-bottom-color: transparent;
}

#view-kiosk.immersive-mode .kiosk-actions,
#view-kiosk.immersive-mode .kiosk-search-wrap {
    opacity: 0;
    pointer-events: none;
    /* Prevent clicking hidden buttons */
    transform: translateY(-20px);
}

/* But keep logo visible! */
#view-kiosk.immersive-mode .kiosk-header-logo {
    opacity: 0.6;
    /* Slightly dim it */
    filter: grayscale(1) brightness(200%);
    /* Make it white/ghostly for dark mode */
}

/* 4. SETTINGS DRAWER: Re-anchored to Bottom Left */
#kiosk-settings-drawer {
    position: absolute;
    bottom: 150px;
    /* Sits exactly above the control buttons */
    left: 35px;
    width: 340px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 5000;
    transform-origin: bottom left;
    animation: drawerPopUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

     left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: calc(120px + env(safe-area-inset-bottom)) !important;
        width: 90vw !important;
        max-width: 400px !important;
        transform-origin: bottom center !important;
}


@keyframes drawerPopUp {
        from { transform: translate(-50%, 20px) scale(0.95); opacity: 0; }
        to { transform: translate(-50%, 0) scale(1); opacity: 1; }
    }


#kiosk-settings-drawer.hidden {
    display: none !important;
}

.drawer-inner {
    padding: 25px;
}


.drawer-header h4 {
    margin: 0;

    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-weight: 800;


}

.setting-row {
    margin-bottom: 20px;
}

.setting-row label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;

}

/* Resolution Grid */
.res-toggle-grid {
    display: flex;
    gap: 8px;
    background: #f8fafc;
    padding: 5px;
    border-radius: 10px;
}


.res-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    font-weight: 800;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.75rem;
    transition: all 0.2s;

}



.res-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}



.res-btn:hover:not(.active) {
    color: var(--primary);
}

/* Mirror CSS Override */
#qr-reader.mirrored video {
    transform: scaleX(-1) !important;
}


@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

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





/* --- KIOSK IMMERSIVE OVERRIDES --- */

/* Smoothly hide the top bar controls */
#view-kiosk.immersive-mode .kiosk-actions,
#view-kiosk.immersive-mode .kiosk-search-wrap {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: Make the branding logo more subtle or ghosted in immersive mode */
#view-kiosk.immersive-mode .kiosk-header-logo {
    opacity: 0.3;
    filter: grayscale(1);
    transition: opacity 2s ease;
}

/* Ensure the camera stays centered and prominent */
#view-kiosk.immersive-mode .kiosk-main-stage {
    transform: scale(1.1);
    /* Slightly enlarge stage in full screen */
    transition: transform 0.8s ease;
}

/* Hide the settings drawer if it was left open */
#view-kiosk.immersive-mode #kiosk-settings-drawer {
    display: none !important;
}

/* --- KIOSK PROXIMITY DIMMER --- */
.scanner-window-container::after {
    content: 'SCANNER STANDBY';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 2px;
    z-index: 40;
    pointer-events: none;
    /* Allows clicks to pass through if hidden */
    transition: opacity 0.4s ease;
    opacity: 1;
}

/* Awake State: Remove Dim and Blur */
.scanner-window-container.awake::after {
    opacity: 0;
    visibility: hidden !important;
    pointer-events: none;
}



/* Adjust corners to stay bright while camera is dim */
.scanner-corner {
    z-index: 50;
    filter: drop-shadow(0 0 5px var(--accent));
}





/* ==========================================================================
   CRITICAL FIXES (Add to bottom of style.css)
   ========================================================================== */

/* 1. FIX THE EXPLODING LOGO
   This constrains the image inside the header so it doesn't push the page down. */
.header-logo-banner {
    height: 50px;
    /* Fits perfectly inside the 85px header */
    width: auto;
    object-fit: contain;
    display: block;
}

/* 2. FORCE HIDE KIOSK ORPHANS
   This ensures that if the Kiosk View is NOT active, its internal 
   components (Scanner and Background) are invisible, even if they leak. */
.app-view:not(.active) .kiosk-main-stage,
.app-view:not(.active) .kiosk-branding-header,
.app-view:not(.active) .kiosk-search-integrated-row,
.app-view:not(.active) .kiosk-terminal-controls {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 3. ENSURE DASHBOARD HEADER LAYOUT
   Keeps the logo and buttons aligned horizontally. */
.dash-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    /* Prevents spills */
}







/* --- VIEW PADDING & ALIGNMENT --- */

/* ── EVENT TAG SUGGESTION CHIPS (in modal) ──────────────── */
.evt-tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    min-height: 32px;
}

.evt-tag-chip {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.evt-tag-chip:hover {
    border-color: var(--primary);
    background: #eef2f7;
    color: var(--primary);
}

/* ── FORM TEMPLATE SEARCHABLE COMBOBOX ─────────────────── */
.form-search-combobox {
    position: relative;
}

.fsc-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #fbd38d;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}

.fsc-input-row:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(32, 65, 100, 0.1);
}

.fsc-icon {
    font-size: 18px;
    color: #94a3b8;
    flex-shrink: 0;
}

.fsc-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main);
    padding: 0;
    cursor: pointer;
    min-width: 0;
}

.fsc-input::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.fsc-chevron {
    font-size: 20px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.fsc-input-row:focus-within .fsc-chevron {
    transform: rotate(180deg);
    color: var(--primary);
}

.fsc-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px -4px rgba(0,0,0,0.18);
    z-index: 99999;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.fsc-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font-size: 0.86rem;
    color: var(--text-main);
}

.fsc-option:hover,
.fsc-option--selected {
    background: #f0f4f8;
}

.fsc-opt-icon {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

.fsc-option--selected .fsc-opt-icon {
    color: var(--primary);
}

.fsc-opt-name {
    flex: 1;
    font-weight: 600;
}

.fsc-opt-badge {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f0f4f8;
    color: #64748b;
    border-radius: 6px;
    padding: 2px 7px;
    flex-shrink: 0;
}

.fsc-opt-check {
    font-size: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

.fsc-no-results {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    color: #94a3b8;
    font-size: 0.84rem;
    font-style: italic;
}

.fsc-no-results .material-icons {
    font-size: 18px;
}

/* ── EVENT DASHBOARD CONTROL BAR ───────────────────────── */
.dash-panel-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    margin: 0 0 18px 0;
}

.dash-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 60px;
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.dcb-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dcb-stat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dcb-stat-chip:hover {
    background: #e2e8f0;
    border-color: #cbd5e0;
}

.dcb-stat-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.dcb-stat-chip.active .material-icons {
    color: #ffffff;
}

.dcb-stat-chip .material-icons { font-size: 14px; color: var(--primary); }

.dcb-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dcb-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 4px;
}

.dcb-type-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.dcb-type-pill {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.dcb-type-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.dcb-type-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* 1. Add breathing room to the main dashboard content */
#system-dashboard.view-body {
    padding: 28px 60px 40px !important;
    /* Reduced top padding since control bar sits above */
}

/* 2. Fix the alignment of the Global Header to match the dashboard content below it */
#global-dash-nav {
    padding: 0 60px !important;
}

/* 3. Polish: Ensure the grid cards don't feel squished at smaller widths */
.upcoming-cards-grid {
    padding-top: 10px;
    gap: 30px;
    /* Increase space between cards */
}

/* 4. Fix for other views (Schools, Locations) to ensure consistency */
.view-body {
    padding: 40px 60px !important;
}




.new-event-dropdown-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Aligns button to the left */
    margin-bottom: 25px;
    /* Standard spacing below the button */
}


/* 3. Rail Button Toggle Logic 
   Hide rail '+' when sidebar is open, show when collapsed */
.admin-layout:not(.drawer-collapsed) #rail-new-btn {
    display: none !important;
}

.drawer-collapsed #rail-new-btn {
    display: flex !important;
}

/* 4. CONTENT LOGO FADE LOGIC 
   Target the logo in the dashboard nav when sidebar is expanded */
.admin-layout:not(.drawer-collapsed) .header-logo-banner {
    opacity: 0;
    transform: translateX(-10px);
    /* Slight slide for elegance */
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show it when sidebar is collapsed */
.drawer-collapsed .header-logo-banner {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Adjust the Logo inside the sidebar to ensure it looks clean */
.drawer-logo {
    max-width: 220px !important;
    margin-bottom: 0 !important;
}











/* Ensure table header sort content is centered when using col-center */
.engagement-table th.col-center .header-content {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 4px;
}

.engagement-table th.sort-header.active {
    color: var(--primary);
}

.engagement-table th.sort-header.active .material-icons {
    opacity: 1;
}







.role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}



.badge-admin {
    background: #ebf8ff;
    color: var(--primary);
    border: 1px solid #bee3f8;
}

.badge-staff {
    background: #f7fafc;
    color: #718096;
    border: 1px solid #e2e8f0;
}

.actions-cell {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.role-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid var(--border);
}

.role-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.role-label.is-admin {
    color: var(--primary);
}

/* Fix the user details stacking */
.user-info-stack {
    display: flex;
    flex-direction: column;
}

.user-full-name {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
}

.user-email-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}





/* --- STAFF MANAGEMENT HIGH-FIDELITY --- */

.staff-table tr td {
    padding: 20px 15px !important;
    /* Taller, more breathable rows */
}

/* User Info Stack */
.staff-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.staff-name {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
}

.staff-email {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Professional Role Badges */
.role-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.role-admin {
    background: #ebf8ff;
    color: var(--primary);
    border: 1px solid #bee3f8;
}

.role-staff {
    background: #f7fafc;
    color: #718096;
    border: 1px solid #e2e8f0;
}

/* Horizontal Actions Toolbar */
.staff-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.staff-role-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 15px;
    margin-right: 10px;
    border-right: 1px solid var(--border);
}

.staff-date-cell {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}






/* Ensure automation inputs are visible when enabled */
#wrapper-evt-close-time,
#wrapper-evt-reminder-time {
    margin-top: 10px;
    padding-left: 32px;
    /* Aligns with the checkbox label text */
}

/* Visually dim inputs when automation is disabled */
.form-input:disabled {
    background-color: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.6;
}


/* --- REGISTRANT DIRECTORY TABLE REPAIR --- */

.reg-table {
    table-layout: fixed;
    /* Force columns to obey widths */
    width: 100%;
}

/* Status Column (The Toggle & Time) */
.col-status {
    width: 110px !important;
    text-align: center;
    padding-left: 10px 5px !important;
}

/* Name & Email Column */
.col-name {
    width: 35% !important;
    white-space: nowrap;
    overflow: hidden;

}

/* School Column */
.col-school {
    width: 25% !important;
}

/* Status Pill Column */
.col-type {
    width: 140px !important;
    text-align: center;
}

/* The Timestamp container */
.arrival-time-display {
    min-height: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    margin-top: 5px;
}



.arrival-time-display b {
    font-size: 0.65rem;
    color: var(--primary);
}

.arrival-time-display span {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Ensure vertical alignment is centered for all cells */
.reg-table td {
    vertical-align: middle !important;
    height: 72px;
    /* Consistent row height */
}


/* Fix panel header layout for integrated search */
.panel-header {
    display: flex;
    align-items: center;
    padding: 12px 20px !important;
    /* Slightly tighter for search fit */
}

#reg-directory-search:focus {
    width: 320px;
    /* Slight expansion for focus */
    background: white;
    border-color: var(--primary);
}

/* Ensure the search row wrapper in the header doesn't break alignment */
.panel-header .search-row-wrapper {
    margin-right: 0;
    flex-shrink: 0;
}


/* --- DIRECTORY SEARCH EMPTY STATE --- */
#reg-table-body tr td {
    transition: background-color 0.3s ease;
}

/* Make the Walk-in button in the table stand out slightly differently than the main Save buttons */
#reg-table-body .btn-primary {
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

#reg-table-body .btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}


/* --- TABLE HEADER & RESIZE FIXES --- */

/* 1. Force Header Alignment */
.engagement-table th {
    position: relative;
    /* Anchor for resize handle */
    vertical-align: middle !important;
}

/* Center content specifically for centered columns */
.engagement-table th.col-center .header-content {
    justify-content: center !important;
    width: 100%;
    display: flex;
}

/* Left align content for name/school columns */
.engagement-table th.col-left .header-content,
.engagement-table th.col-name .header-content,
.engagement-table th.col-school .header-content {
    justify-content: flex-start !important;
}

/* Notification badge on bell icon */
.notif-count-badge {
    position: absolute; top: 2px; right: 2px;
    background: #e53e3e; color: white;
    font-size: 0.6rem; font-weight: 900;
    min-width: 16px; height: 16px;
    border-radius: 8px; display: flex;
    align-items: center; justify-content: center;
    padding: 0 4px; box-shadow: 0 2px 4px rgba(229,62,62,0.3);
    animation: notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Pricing variable chips */
.pricing-var-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; font-size: 0.7rem; font-weight: 600;
    color: var(--primary); background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 12px; cursor: pointer; transition: all 0.15s;
    font-family: inherit;
}
.pricing-var-chip:hover { background: #dbeafe; border-color: #93c5fd; }

/* Column resize handle for registrant grid */
.col-resize-handle { background: transparent; transition: background 0.15s; }
.col-resize-handle:hover { background: rgba(243,156,18,0.5); }

/* 2. Resize Handle (The "Grabber") */
.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 20;
    transition: background 0.2s;
}

.resize-handle:hover,
.engagement-table th:hover .resize-handle {
    background: var(--border);
    /* Show light line on hover */
}

.resize-handle.active {
    background: var(--primary);
    /* Blue line when dragging */
}



/* --- CANCELLED ROW STYLES --- */
.row-cancelled {
    background-color: #f8fafc;
    transition: background 0.2s;
    cursor: pointer;
}

.row-cancelled:hover {
    background-color: #fffaf0;
    /* Subtle warning color on hover */
}

.pill-cancelled {
    background-color: #ffe4e6 !important;
    color: #be123c !important;
    border: 1px solid #fecdd3;
    font-size: 0.55rem;
}

.pill-guest {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a;
    font-size: 0.55rem;
}

.delete-btn:hover {
    background-color: #fff5f5 !important;
    border-color: #e53e3e !important;
}


/* --- MASTER TABLE RESIZING --- */

.reg-table {
    table-layout: fixed !important;
    /* CRITICAL: Allows manual widths */
    width: 100%;
    border-collapse: collapse;
}

.reg-table th {
    position: relative;
    /* Anchor for the handle */
    overflow: visible !important;
    /* Handle must "stick out" slightly */
}

.resize-handle {
    position: absolute;
    right: -2px;
    /* Center it over the border */
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background 0.2s;
}

.resize-handle:hover,
.resize-handle.active {
    background: var(--accent) !important;
    /* Show orange line when active */
}


/* 1. Prevent Dropdown Clipping */
.event-panel {
    overflow: visible !important;
    /* Allows dropdowns to "break out" of the panel */
}

.panel-header {
    z-index: 100;
    /* Keeps filters above the table rows */
}

/* 2. Fix Footer Spillage */
.portal-main {
    overflow: hidden;
}

/* 3. The "Table Bottom" Visual */
.event-main-content .event-panel {
    height: 100%;
    margin-bottom: 20px;
    /* Space before the actual bottom boundary */
    border-bottom: 2px solid var(--border);
    /* Visual floor */
}

/* 4. Filter Dropdown Styling */
#filter-school {
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    padding: 0 10px;
    font-weight: 700;
    color: var(--primary);
    background: #fff;
    cursor: pointer;
}


/* --- ENHANCED STAFF UTILITY STYLES --- */

.staff-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 5px 0;
}

.meta-unit {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meta-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-value .material-icons {
    font-size: 14px;
}

/* Status "Live" Dot */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #cbd5e0;
    /* Default Offline */
}

.status-active {
    background: #38a169;
    box-shadow: 0 0 8px rgba(56, 161, 105, 0.4);
}

/* Capability Pills */
.cap-pill {
    font-size: 0.6rem;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    color: #475569;
    font-weight: 700;
}


/* --- MULTI-SELECT SCHOOL FILTER --- */
.school-filter-container {
    position: relative;
    width: 320px;
}

#filter-school-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #cbd5e0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 5000;
    display: none;
    /* Toggled by JS */
    padding: 10px 0;
}

.school-opt {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.school-opt:hover {
    background: #f8fafc;
}

.school-opt input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.school-opt .count-pill {
    margin-left: auto;
    background: #edf2f7;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
}

/* Red/Italic Style for 0 Registrants */
.school-opt.unrepresented {
    color: #e53e3e;
    font-style: italic;
    opacity: 0.8;
}

.school-opt.unrepresented .count-pill {
    color: #e53e3e;
}

.filter-trigger-btn {
    width: 100%;
    height: 36px;
    background: white;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}




/* Styling for schools with 0 registrants in the filter list */
.school-opt.zero-count-site span {
    color: #e53e3e !important;
    /* Brighter Red */
    font-style: italic !important;
    opacity: 0.85;
}

/* Ensure the count pill for 0 also looks distinct */
.school-opt.zero-count-site .count-pill {
    background: #fff5f5 !important;
    color: #e53e3e !important;
    border: 1px solid #feb2b2;
}

/* Hover state for 0 count sites */
.school-opt.zero-count-site:hover {
    background-color: #fff5f5 !important;
}


/* CATEGORY FILTERS (Type & Attendance) */
.btn-sidebar-tiny.active-navy {
    background-color: var(--primary) !important;
    /* OECTA Navy */
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(32, 65, 100, 0.3);
}

/* CANCELLED FILTER (Distinctive warning color) */
.btn-sidebar-tiny.active-orange {
    background-color: var(--accent) !important;
    /* OECTA Orange */
    color: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

/* Maintain icon color white when active */
.btn-sidebar-tiny.active-navy .material-icons,
.btn-sidebar-tiny.active-orange .material-icons {
    color: #ffffff !important;
}


code {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    letter-spacing: 1px;
    font-size: 0.8rem;
    border: 1px solid #e2e8f0;
}

/* --- School Filter Zero-Count Styles --- */

.school-opt.zero-representation span {
    color: #e53e3e !important;
    /* Brighter Red */
    font-style: italic !important;
    opacity: 0.85;
}

/* Make the '0' pill look more like a warning */
.school-opt.zero-representation .count-pill {
    background: #fff5f5 !important;
    color: #e53e3e !important;
    border: 1px solid #feb2b2;
    opacity: 0.6;
}

/* Hover state for missing schools */
.school-opt.zero-representation:hover {
    background-color: #fff5f5 !important;
}

/* Custom checkbox tint for the red rows */
.school-opt.zero-representation input[type="checkbox"] {
    accent-color: #e53e3e;
}



/* --- VIRTUAL KEYBOARD SYSTEM --- */
.v-keyboard-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 15, 30, 0.95);
    backdrop-filter: blur(15px);
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    z-index: 10000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideUpFade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vk-key {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.1s;
    user-select: none;
}

.vk-key:active {
    background: var(--accent);
    transform: scale(0.95);
}

.vk-key.wide {
    grid-column: span 2;
    background: rgba(255, 255, 255, 0.2);
}

.vk-key.extra-wide {
    grid-column: span 5;
}

.vk-key.danger {
    background: rgba(229, 62, 62, 0.3);
}



/* Ensure the Kiosk Result Photo is centered and sharp */
#res-icon-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prevents "squished" faces */
    border-radius: 50%;
}









/* --- QUICK ZOOM SLIDERS (ON-SCREEN) --- */
#kiosk-quick-sliders {
    position: absolute;
    bottom: -15px;
    transform: translateY(100%);
    width: 85vw;
    max-width: 400px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-slider-row {
    background: rgba(25, 30, 45, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: slideUpFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}

.quick-slider-reset {
    background: rgba(229, 62, 62, 0.15);
    color: #fc8181;
    border: 1px solid rgba(229, 62, 62, 0.3);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-slider-reset:active {
    background: rgba(229, 62, 62, 0.5);
    color: white;
    transform: scale(0.9);
}



/* Ensure the search dropdown inside the staff modal behaves correctly */
#staff-modal .search-results-dropdown {
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

/* Re-use the existing highlight-tag style but ensure it's bold */
#staff-modal .highlight-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

/* Subtle focus animation for the inputs */
#staff-modal .form-input {
    transition: all 0.2s ease;
}

#staff-modal .form-input:focus {
    border-color: var(--primary);
    background: white;
}


.spin-tab-content.hidden {
    display: none !important;
}

.spin-tab-content {
    display: block; /* Ensures it shows when .hidden is removed */
    animation: fadeIn 0.3s ease;
}



/* --- ANALYTICS MODAL STYLES --- */
.analytics-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 20px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    margin-bottom: 5px;
}

.analytics-nav-item:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.analytics-nav-item.active {
    background: #ebf8ff;
    color: var(--primary);
    font-weight: 800;
}

.analytics-nav-item .material-icons {
    color: #94a3b8;
}

.analytics-nav-item.active .material-icons {
    color: var(--primary);
}

.analytics-view.hidden {
    display: none;
}

/* User Result Card in Universal Search */
.user-result-card {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s;
}

.user-result-card:hover {
    background: #f8fafc;
}

.ur-name { font-weight: 700; color: #1e293b; font-size: 0.9rem; }
.ur-meta { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.ur-type { 
    display: inline-block; 
    font-size: 0.6rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    padding: 2px 6px; 
    border-radius: 4px; 
    margin-top: 5px;
}
.ur-type.staff { background: #e0e7ff; color: #4338ca; }
.ur-type.participant { background: #dcfce7; color: #15803d; }



/* --- COMMAND CENTER: ENTERPRISE THEME --- */
#system-analytics-modal .modal-box {
    background: #f1f5f9;
}

/* Dark Sidebar */
#system-analytics-modal .sidebar-dark {
    background: #0f172a; /* Slate 900 */
    border-right: 1px solid #1e293b;
    color: #94a3b8;
}

#system-analytics-modal .search-row-wrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
}

#system-analytics-modal input {
    color: white !important;
}

#system-analytics-modal input::placeholder {
    color: #64748b;
}

/* Nav Items */
.analytics-nav-item {
    color: #94a3b8;
    border-radius: 6px;
    margin-bottom: 2px;
}

.analytics-nav-item:hover {
    background: #1e293b;
    color: #f8fafc;
}

.analytics-nav-item.active {
    background: #3b82f6; /* Bright Blue */
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5);
}

.analytics-nav-item.active .material-icons {
    color: white !important;
}

/* Search Results in Sidebar */
#analytics-search-results {
    background: #0f172a !important; /* Match Sidebar */
    border-right: 1px solid #1e293b !important;
    top: 145px !important;
}

.user-result-card {
    border-bottom: 1px solid #1e293b;
    padding: 12px 20px;
}

.user-result-card:hover {
    background: #1e293b;
}

.user-result-card .ur-name { color: #f8fafc; }
.user-result-card .ur-meta { color: #64748b; }

/* Profile View Styles */
.profile-header-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    margin-bottom: 25px;
}

.stat-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.stat-tile {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.stat-tile-label { font-size: 0.7rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
.stat-tile-val { font-size: 1.8rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-top: 5px; }




/* --- COMMAND CENTER: REFINED STYLING --- */

/* Badge System */
.cc-badge {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-right: 4px;
}

.cc-badge.admin { background: #3b82f6; color: white; border: 1px solid #2563eb; }
.cc-badge.staff { background: #6366f1; color: white; border: 1px solid #4f46e5; }
.cc-badge.member { background: #10b981; color: white; border: 1px solid #059669; }
.cc-badge.ticket { background: #f59e0b; color: white; border: 1px solid #d97706; }

/* Result Card */
.user-result-card {
    padding: 12px 20px;
    border-bottom: 1px solid #1e293b;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}

.user-result-card:hover {
    background: #1e293b;
    padding-left: 25px; /* Subtle slide effect */
}

.ur-name { color: #f8fafc; font-weight: 700; font-size: 0.9rem; }
.ur-meta { color: #94a3b8; font-size: 0.75rem; margin-top: 2px; }
.ur-badges { margin-top: 6px; display: flex; gap: 4px; }

/* School Metrics Table */
.school-metric-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}
.school-metric-row:hover { background: #f8fafc; }

.metric-bar-bg {
    width: 100px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.metric-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
}

/* --- COMMAND CENTER SEARCH FIX --- */
#analytics-global-search {
    background: #1e293b !important; /* Darker slate */
    border: 1px solid #334155 !important;
    color: #f8fafc !important; /* Off-white text */
    height: 40px;
    padding-left: 40px !important;
    border-radius: 8px;
    width: 100%;
}

#analytics-global-search::placeholder {
    color: #64748b;
}

#analytics-global-search:focus {
    border-color: #3b82f6 !important;
    background: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ==========================================================================
   ROLE-BASED UI OVERRIDES
   ========================================================================== */
/* Hide Event Hero Tools (Settings, Analytics, Preview, Export, Live Toggle) for Staff */
body.role-staff .event-hero-tools {
    display: none !important;
}

/* Hide Event configuration buttons in Dashboard views for Staff */
body.role-staff .btn-row-settings,
body.role-staff .card-edit-btn {
    display: none !important;
}

/* Hide Publish Toggles in Dashboard views for Staff */
body.role-staff .btn-header-new,
body.role-staff #rail-new-btn,
body.role-staff .btn-add-drive {
    display: none !important;
}

/* 7. Hide Live, Draft, and Total stat chips for Staff (keep Upcoming) */
body.role-staff .dcb-stat-chip[data-status="live"],
body.role-staff .dcb-stat-chip[data-status="draft"],
body.role-staff .dcb-stat-chip[data-status="all"] {
     display: none !important;
}


/* Hide Live/Publish toggles on event cards and search results for Staff */
body.role-staff .ecard-publish-toggle,
body.role-staff .elist-col-status .table-switch,
body.role-staff .event-card .table-switch,
body.role-staff .live-toggle-container,
body.role-staff [data-status-toggle] {
    display: none !important;
}


/* 1. Swap the "Clipboard" Registration Viewer Icon to a "QR Code" Icon for Staff */
body.role-staff button[onclick*="openResponseViewer"] .material-icons {
    font-size: 0 !important; /* Hide original icon text */
}

body.role-staff button[onclick*="openResponseViewer"] .material-icons::after {
    content: 'qr_code_2'; /* Inject the QR icon instead */
    font-size: 18px !important;
    display: block;
    color: var(--primary); /* Keep it cleanly styled */
}

/* 2. Hide the "Delete/Cancel Registration" button (Red X) for Staff */
body.role-staff .reg-table button[onclick*="confirmSoftDelete"],
body.role-staff .reg-table button[onclick*="softDeleteRegistration"] {
    display: none !important;
}

/* 3. panel-members is a sibling of .admin-layout inside #view-portal (position:fixed;top:0).
      Its containing block is view-portal (y=0), NOT admin-body (y=85px).
      Override top/height so the panel starts below the website header — same fix as #panel-forms. */
#panel-members {
    top: var(--header-height);
    height: calc(var(--app-height) - var(--header-height));
}

/* Hide Contacts (Members) panel and rail item for Staff */
body.role-staff #rail-members {
    display: none !important;
}
body.role-staff #panel-members {
    display: none !important;
}

/* 4. Hide Expenses panel and rail item for Staff */
body.role-staff #rail-expenses {
    display: none !important;
}
body.role-staff #panel-expenses {
    display: none !important;
}












/* ======================================================
   EVENT CARD v2 — Brand-forward dashboard redesign
   ====================================================== */

.upcoming-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}

#system-dashboard .upcoming-cards-grid {
    gap: 22px !important;
}

/* Base card */
.premium-card.ecard {
    min-height: 0;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.premium-card.ecard:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 40px -10px rgba(32, 65, 100, 0.18) !important;
    border-color: var(--primary) !important;
}

.premium-card.ecard.past {
    opacity: 0.72;
    filter: grayscale(0.25);
}

.premium-card.ecard.past:hover {
    opacity: 1;
    filter: none;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.08) !important;
}

/* ── ECARD-HEADER DYNAMIC EFFECTS ───────────────────────────────────── */

/* Inner date/chip elements: smooth spring transitions */
.ecard-day {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.ecard-month {
    transition: letter-spacing 0.3s ease, color 0.25s ease;
    position: relative;
    z-index: 1;
}

.ecard-type-chip {
    transition: transform 0.3s ease, background 0.25s ease;
    position: relative;
    z-index: 1;
}

/* Sweep sheen across the header on hover */
.ecard-header::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -90%;
    width: 55%;
    height: 120%;
    background: linear-gradient(
        105deg,
        transparent 15%,
        rgba(255,255,255,0.2) 50%,
        transparent 85%
    );
    transform: skewX(-10deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 0;
}

.premium-card.ecard:hover .ecard-header::after {
    left: 150%;
}

/* Day pops on hover */
.premium-card.ecard:hover .ecard-day {
    transform: scale(1.08);
    transform-origin: left bottom;
}

/* Month spacing opens up slightly */
.premium-card.ecard:hover .ecard-month {
    letter-spacing: 1.8px;
}

/* Type chip floats and brightens */
.premium-card.ecard:hover .ecard-type-chip {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.28);
}

/* Header brightens subtly on card hover */
.premium-card.ecard:hover .ecard-header {
    filter: brightness(1.08);
}

/* Header: gradient + date */
.ecard-header {
    position: relative;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    min-height: 108px;
    overflow: hidden;
    transition: filter 0.3s ease;
}

.ecard-type-chip {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 2px 10px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 6px;
    backdrop-filter: blur(4px);
}

.ecard-date {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}

.ecard-month {
    font-size: 0.85rem;
    font-weight: 900;
    color: rgba(255,255,255,0.82);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ecard-day {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

.ecard-year {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    align-self: flex-end;
    padding-bottom: 5px;
}

@keyframes ecard-live-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(243, 156, 18, 0.45); }
    50%       { box-shadow: 0 2px 18px rgba(243, 156, 18, 0.85); }
}

.ecard-live-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    animation: ecard-live-pulse 2s ease-in-out infinite;
}

/* Body */
.ecard-body {
    padding: 14px 18px 10px;
    flex: 1;
    background: #ffffff;
}

.ecard-name {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.25;
    margin-bottom: 9px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ecard-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ecard-meta-line {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ecard-meta-line .material-icons {
    font-size: 13px;
    flex-shrink: 0;
    color: #cbd5e0;
}

/* Footer: stats + action */
.ecard-footer {
    padding: 11px 18px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ecard-stats {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex-wrap: wrap;
}

.ecard-stat-sep {
    color: #cbd5e0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
}

/* ── ECARD PUBLISH TOGGLE ─────────────────────────── */
.ecard-publish-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ecard-pub-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #94a3b8;
    text-transform: uppercase;
    white-space: nowrap;
}

.ecard-pub-label.is-live {
    color: #38a169;
}

.ecard-stat-label {
    display: inline;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
}

.ecard-progress {
    height: 5px;
    background: #e2e8f0;
    overflow: hidden;
    margin-top: 0;
}

.ecard-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* List view enhancements */
.ecard-mini-progress {
    height: 3px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    width: 56px;
    margin-top: 3px;
}

.ecard-mini-progress-fill {
    height: 100%;
    border-radius: 3px;
}

/* ============================================================
   DASHBOARD MULTI-SELECT DELETE
   ============================================================ */

/* Floating toolbar */
.dash-select-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    margin: 0 0 12px 0;
    animation: dstSlideIn 0.2s ease;
}
@keyframes dstSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dst-count {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}
.dst-delete-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.dst-delete-btn:hover { background: #c53030; }
.dst-cancel-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.dst-cancel-btn:hover { color: white; background: rgba(255,255,255,0.1); }

/* Checkbox overlay on cards */
.dash-select-cb {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: 2px solid #cbd5e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0;
    transform: scale(0.7);
}
.dash-select-cb .material-icons {
    font-size: 18px;
    color: transparent;
}
.dash-select-cb.checked {
    background: var(--primary);
    border-color: var(--primary);
}
.dash-select-cb.checked .material-icons {
    color: white;
}

/* Show checkboxes when in select mode */
.dash-select-mode .dash-select-cb {
    opacity: 1;
    transform: scale(1);
}

/* Prevent text selection while long-pressing */
.dash-select-mode .premium-card.ecard,
.dash-select-mode .elist-item {
    user-select: none;
}

/* Selected card ring */
.premium-card.ecard.dash-selected {
    outline: 3px solid var(--primary);
    outline-offset: -1px;
}

/* In select mode, add a checkbox column to the list grid */
.dash-select-mode .elist-item {
    grid-template-columns: 36px 76px 1fr 110px 120px 170px 200px;
}
.elist-item > .dash-select-cb {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    transform: none;
    opacity: 0;
}
.dash-select-mode .elist-item > .dash-select-cb {
    opacity: 1;
    transform: scale(1);
}
.elist-item.dash-selected {
    background: #eef2f7 !important;
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

/* Dim interactive controls while in select mode */
.dash-select-mode .ecard-publish-toggle,
.dash-select-mode .btn-gear-card,
.dash-select-mode .btn-row-manage,
.dash-select-mode .btn-row-settings,
.dash-select-mode .elist-col-status label,
.dash-select-mode .elist-col-reg a {
    pointer-events: none;
    opacity: 0.4;
}

/* ============================================================
   REIMAGINED LIST VIEW — .elist-*
   ============================================================ */

.elist-container-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
    margin-top: 10px;
}

/* Header row */
.elist-header {
    display: grid;
    grid-template-columns: 80px 1fr 110px 120px 170px 200px;
    align-items: center;
    padding: 10px 20px 10px 24px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #94a3b8;
    gap: 12px;
}

.elist-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.elist-sort-btn:hover { color: #204164; }
.elist-sort-btn.active { color: #204164; }
.elist-sort-btn .material-icons { font-size: 14px; }

/* Each event row */
.elist-item {
    display: grid;
    grid-template-columns: 76px 1fr 110px 120px 170px 200px;
    align-items: center;
    gap: 12px;
    /* No vertical padding here — hero fills full height, content cols carry their own */
    padding: 0 20px 0 0;
    min-height: 72px;
    border-bottom: 1px solid #f1f5f9;
    background: white;
    overflow: hidden;   /* keeps hero flush with row edges */
    transition: background 0.15s;
    position: relative;
}

.elist-item:last-child { border-bottom: none; }

.elist-item:hover { background: #f8fbff; }

.elist-item.elist-past {
    opacity: 0.55;
    filter: grayscale(0.35);
}

.elist-item.elist-past:hover {
    opacity: 1;
    filter: none;
}

/* ── CARD HERO (replaces date badge) ────────────────────────────────── */
/* Full-height coloured panel — the event's visual identity              */
.elist-hero {
    align-self: stretch;       /* fill the full row height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--evt-color, #204164);
    padding: 10px 8px;
    position: relative;
    overflow: hidden;
    min-width: 76px;
    cursor: default;
}

/* Subtle top-left sheen for depth */
.elist-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,0.14) 0%, transparent 55%);
    pointer-events: none;
}

.elist-hero-month {
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    line-height: 1;
}

.elist-hero-day {
    font-size: 2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin: 1px 0;
}

.elist-hero-year {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    line-height: 1;
    letter-spacing: 0.5px;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}
.elist-hero-icon {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1;
    margin-top: 3px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.25s ease;
    position: relative;
    z-index: 1;
}

/* ── ELIST-HERO DYNAMIC EFFECTS ─────────────────────────────────────── */

/* Ambient breathe — the static sheen gently pulses in opacity          */
@keyframes hero-breathe {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1;   }
}

.elist-hero::before {
    animation: hero-breathe 6s ease-in-out infinite;
}

.elist-item:hover .elist-hero::before {
    animation: none;
    opacity: 1;
}

/* Sweep sheen — a bright diagonal strip that crosses the hero on hover */
.elist-hero::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -90%;
    width: 55%;
    height: 120%;
    background: linear-gradient(
        105deg,
        transparent 15%,
        rgba(255,255,255,0.28) 50%,
        transparent 85%
    );
    transform: skewX(-10deg);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.elist-item:hover .elist-hero::after {
    left: 150%;
}

/* Inner elements float above the pseudo-element overlays */
.elist-hero-month,
.elist-hero-day {
    position: relative;
    z-index: 1;
}

/* Smooth transitions for inner elements */
.elist-hero-month {
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.elist-hero-day {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Day number pops forward on row hover */
.elist-item:hover .elist-hero-day {
    transform: scale(1.12);
}

/* Icon sharpens and grows */
.elist-item:hover .elist-hero-icon {
    color: rgba(255,255,255,0.92);
    transform: scale(1.3);
}

/* Month brightens */
.elist-item:hover .elist-hero-month {
    color: rgba(255,255,255,0.92);
    letter-spacing: 2.5px;
}

/* Content columns need their own vertical padding now that the parent has none */
.elist-col-info,
.elist-col-status,
.elist-col-reg,
.elist-col-turnout,
.elist-col-actions {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Event info */
.elist-col-info {
    min-width: 0;
}

.elist-event-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1a202c;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
    margin-bottom: 5px;
}

.elist-event-name:hover { color: #204164; }

.elist-event-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.elist-type-chip {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.elist-sub-text {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status */
.elist-col-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.elist-live-badge {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #c6f6d5;
    color: #276749;
    box-shadow: 0 0 0 2px #9ae6b450;
}

.elist-draft-badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #94a3b8;
}

/* Registration link */
.elist-col-reg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.elist-reg-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    padding: 5px 10px;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    transition: all 0.15s;
    white-space: nowrap;
}

.elist-reg-link:hover {
    background: var(--accent);
    color: white;
}

/* Turnout */
.elist-col-turnout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.elist-turnout-nums {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.elist-att {
    font-size: 1rem;
    font-weight: 900;
    color: #2d3748;
}

.elist-sep {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
}

.elist-pct {
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 2px;
}

.elist-progress-track {
    height: 5px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.elist-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.elist-no-reg {
    font-size: 0.7rem;
    color: #cbd5e0;
    font-style: italic;
}

/* Actions */
.elist-col-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 16px;
}

/* ============================================================
   REGISTRANT DETAIL DRAWER
   ============================================================ */

.reg-drawer {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: flex;
    justify-content: flex-end;
}

.reg-drawer.hidden { display: none; }

.reg-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(2px);
}

.reg-drawer-panel {
    position: relative;
    width: 560px;
    max-width: 96vw;
    height: 100vh;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.14);
    animation: drawer-in 0.22s ease;
    overflow: hidden;
}

@keyframes drawer-in {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1;   }
}

/* ── Header ── */
.rdh-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, #2a5298 0%, #204164 100%);
    flex-shrink: 0;
}

.rdh-header.status-attended  { background: linear-gradient(135deg, #2f855a 0%, #276749 100%); }
.rdh-header.status-cancelled { background: linear-gradient(135deg, #c53030 0%, #9b2c2c 100%); }

.rdh-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.rdh-meta { flex: 1; min-width: 0; }

.rdh-name {
    font-size: 1.1rem;
    font-weight: 900;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.rdh-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rdh-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.rdh-status-badge {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,0.18);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    text-transform: uppercase;
}

.rdh-conf-code {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.2);
    font-family: monospace;
    letter-spacing: 1.5px;
}

.rdh-close-btn {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    flex-shrink: 0;
    transition: background 0.15s;
}

.rdh-close-btn:hover { background: rgba(255,255,255,0.28); }

/* ── Quick Actions ── */
.rdh-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.rdh-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #e2e8f0;
    background: white;
    color: #475569;
    transition: all 0.15s;
    white-space: nowrap;
}

.rdh-action-btn:hover          { border-color: var(--primary); color: var(--primary); }
.rdh-action-btn .material-icons { font-size: 15px; }
.rdh-action-btn.success        { background: #f0fff4; color: #276749; border-color: #9ae6b4; }
.rdh-action-btn.success:hover  { background: #276749; color: white; border-color: #276749; }
.rdh-action-btn.warning        { background: #fffbeb; color: #d69e2e; border-color: #f6e05e; }
.rdh-action-btn.warning:hover  { background: #d69e2e; color: white; border-color: #d69e2e; }

/* ── Tabs ── */
.rdh-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    background: white;
    flex-shrink: 0;
}

.rdh-tab {
    flex: 1;
    padding: 10px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
}

.rdh-tab .material-icons { font-size: 15px; }
.rdh-tab:hover { color: var(--primary); }
.rdh-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 800; }

/* ── Scrollable Body ── */
.rdh-body {
    flex: 1;
    overflow-y: auto;
    background: white;
}

.rdh-panel { padding: 20px; }
.rdh-panel.hidden { display: none; }

/* ── Details tab ── */
.rdh-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rdh-field label {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.rdh-field.full-width { grid-column: 1 / -1; }

.rdh-section-sep {
    grid-column: 1 / -1;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary);
    padding: 8px 0 4px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.rdh-save-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: 16px;
}

/* ── Responses tab ── */
.rdh-responses-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.rdh-responses-title {
    font-size: 0.7rem;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.rdh-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--accent);
    background: white;
    color: var(--accent);
    transition: all 0.15s;
}

.rdh-edit-btn:hover,
.rdh-edit-btn.active { background: var(--accent); color: white; }
.rdh-edit-btn .material-icons { font-size: 15px; }

.rdh-survey-wrap { min-height: 120px; }

.rdh-no-form {
    text-align: center;
    padding: 50px 20px;
    color: #94a3b8;
}

.rdh-no-form .material-icons { display: block; font-size: 42px; color: #cbd5e0; margin-bottom: 10px; }
.rdh-no-form p { font-size: 0.85rem; line-height: 1.5; }

/* ── Admin tab ── */
.rdh-section-title {
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.rdh-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}

.rdh-info-item label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.rdh-info-item span {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2d3748;
}

.rdh-danger-zone {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px dashed #feb2b2;
}

.rdh-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #fc8181;
    background: #fff5f5;
    color: #c53030;
    transition: all 0.15s;
}

.rdh-danger-btn:hover          { background: #c53030; color: white; border-color: #c53030; }
.rdh-danger-btn .material-icons { font-size: 16px; }

/* ── List view: taller rows (hero fills height; no vertical padding on item) ── */
.elist-item { min-height: 80px; }


/* ── Drawer: form toolbar (label + edit hint) ── */
.rdh-form-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.rdh-form-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
}

.rdh-form-label .material-icons { font-size: 14px; }

.rdh-edit-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    cursor: default;
    white-space: nowrap;
}

.rdh-editing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    background: #fffbeb;
    border: 1px solid #f6e05e;
    white-space: nowrap;
}

/* ── Survey container: locked vs editable ── */
.rdh-survey-wrap {
    min-height: 80px;
    border-radius: 6px;
    transition: outline 0.15s;
    cursor: pointer;
}

.rdh-survey-wrap.rdh-survey-locked {
    position: relative;
}

.rdh-survey-wrap.rdh-survey-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    cursor: pointer;
    z-index: 5;
}

.rdh-survey-wrap.rdh-survey-locked:hover::after {
    background: rgba(32, 65, 100, 0.03);
    outline: 2px dashed #cbd5e0;
}

/* ── Drawer sticky footer ── */
.rdh-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border-top: 2px solid var(--accent);
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}

.rdh-footer .btn-primary:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Drawer accordion (Admin section) ── */
.rdh-accordion {
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.rdh-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f8fafc;
    border: none;
    border-top: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-align: left;
    transition: background 0.15s;
}

.rdh-accordion-trigger:hover { background: #eef2f7; color: var(--primary); }
.rdh-accordion-trigger .material-icons { font-size: 16px; }
.rdh-chevron { margin-left: auto; font-size: 18px !important; }

.rdh-accordion-body {
    padding: 16px 20px 20px;
    background: white;
    border-top: 1px solid #f1f5f9;
}

.rdh-accordion-body.hidden { display: none; }


/* ============================================================
   ALL RESPONSES PANEL (split view)
   ============================================================ */

.arp-overlay {
    position: fixed;
    inset: 0;
    z-index: 45000;
    background: white;
    display: flex;
    flex-direction: column;
}

.arp-overlay.hidden { display: none; }

.arp-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header */
.arp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: linear-gradient(135deg, #2a5298 0%, #204164 100%);
    flex-shrink: 0;
}

.arp-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: white;
    line-height: 1.2;
}

.arp-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}

/* Search bar in dark header */
.arp-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
}

.arp-search-bar .material-icons { font-size: 17px; color: rgba(255,255,255,0.6); }
.arp-search-bar input {
    border: none;
    outline: none;
    font-size: 0.82rem;
    color: white;
    background: transparent;
    width: 200px;
}
.arp-search-bar input::placeholder { color: rgba(255,255,255,0.45); }

/* Table wrapper */
.arp-table-wrap {
    flex: 1;
    overflow: auto;
    background: #f8fafc;
    position: relative;
}

/* Responses table */
.arp-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    font-size: 0.82rem;
}

.arp-th {
    position: sticky;
    top: 0;
    background: #204164;
    color: white;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid rgba(255,255,255,0.1);
    user-select: none;
    cursor: pointer;
    z-index: 10;
    white-space: nowrap;
}
.arp-th:last-child { border-right: none; }
.arp-th:hover { background: #2a5280; }
.arp-th.arp-th-drag-over { background: #b7791f; outline: 2px solid var(--accent); }

.arp-th-inner {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 4px;
    overflow: hidden;
}

.arp-th-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arp-sort-icon {
    font-size: 13px;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.arp-sort-icon.active { opacity: 1; }

.arp-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: col-resize;
    z-index: 11;
}
.arp-resize-handle:hover,
.arp-resize-handle.resizing { background: rgba(243,156,18,0.6); }

.arp-td {
    padding: 0.6em 1.1em;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2d3748;
    vertical-align: middle;
}
.arp-td-name {
    font-weight: 700;
    color: #204164;
}
.arp-td-wrap {
    white-space: normal;
    overflow: hidden;
    vertical-align: top;
}
/* Inner wrapper handles line-clamp — must not apply -webkit-box directly to <td> */
.arp-wrap-inner {
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

.arp-row:hover .arp-td { background: #eef2f7; }
.arp-row:nth-child(even) .arp-td { background: #fafbfc; }
.arp-row:nth-child(even):hover .arp-td { background: #eef2f7; }

.arp-empty-cell { color: #cbd5e0; }

.arp-no-rows {
    text-align: center;
    padding: 48px;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Zoom controls */
.arp-zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 3px 4px;
}
.arp-zoom-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    transition: background 0.12s, border-color 0.12s;
}
.arp-zoom-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); }
.arp-zoom-btn .material-icons { font-size: 18px; }
.arp-zoom-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    min-width: 38px;
    text-align: center;
    letter-spacing: 0.02em;
}

.arp-status-badge {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.arp-status-in         { background: #38a16915; color: #276749; border: 1px solid #38a16940; }
.arp-status-reg        { background: #3182ce15; color: #2b6cb0; border: 1px solid #3182ce40; }
.arp-status-cancelled  { background: #e53e3e15; color: #c53030; border: 1px solid #e53e3e40; }

/* ── Schema-driven response grid (used in All Responses panel + drawer) ── */
.rsf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rsf-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rsf-full {
    grid-column: 1 / -1;
}

.rsf-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
}

.rsf-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.4;
    word-break: break-word;
}

.rsf-empty {
    color: #cbd5e0;
    font-weight: 400;
}

/* ============================================================
   REGISTRATION SUMMARY BUILDER (event modal — REGISTRATION FORM tab)
   ============================================================ */
.reg-summary-builder {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.rsb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.rsb-header-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
}
.rsb-header-label .material-icons { font-size: 14px; }
.rsb-toggle-all {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary);
    background: none;
    border: 1px solid rgba(32,65,100,0.3);
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.rsb-toggle-all:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.rsb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* No max-height — expands to show all fields; outer modal body scrolls */
}
.rsb-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f4f8;
    background: #fff;
    user-select: none;
    transition: background 0.12s;
}
.rsb-field-row:last-child { border-bottom: none; }
.rsb-field-row:hover { background: #f8fafc; }
.rsb-field-row.rsb-drag-over { background: #fffaf0; outline: 2px solid var(--accent); outline-offset: -2px; }
.rsb-drag-handle {
    color: #cbd5e0;
    font-size: 18px;
    cursor: grab;
    flex-shrink: 0;
    transition: color 0.12s;
}
.rsb-field-row:hover .rsb-drag-handle { color: #a0aec0; }
.rsb-checkbox {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary);
}
/* Wrap for label input + original-field hint */
.rsb-label-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
/* Inline-editable label — looks like plain text until focused */
.rsb-label-input {
    flex: 1;
    border: none;
    border-bottom: 1.5px solid transparent;
    background: transparent;
    font-size: 0.84rem;
    color: #2d3748;
    line-height: 1.3;
    padding: 2px 4px;
    border-radius: 3px 3px 0 0;
    outline: none;
    min-width: 0;
    cursor: text;
    transition: border-color 0.15s, background 0.15s;
}
.rsb-label-input:hover {
    background: #eef2f7;
    border-bottom-color: #cbd5e0;
}
.rsb-label-input:focus {
    background: #f0f4f8;
    border-bottom-color: var(--primary);
}
/* Small muted hint shown when label has been customised */
.rsb-original-hint {
    font-size: 0.7rem;
    color: #a0aec0;
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
}
.rsb-type-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #edf2f7;
    color: #718096;
    flex-shrink: 0;
}
.rsb-empty {
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #a0aec0;
}

/* ==========================================================================
   AI COPILOT SIDEBAR
   ========================================================================== */

/* Body row: absolutely fills space below the 70px toolbar */
#forms-editor-body {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 45px; /* clear the fixed footer */
    display: flex;
    overflow: hidden;
}


/* Sidebar panel */
#copilot-sidebar {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    transition: width 0.25s ease, opacity 0.2s ease;
    overflow: hidden;
}

#copilot-sidebar.collapsed {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

/* Sidebar header */
#copilot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
}
#copilot-header .copilot-title {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
#copilot-header .material-icons {
    font-size: 18px;
}
#copilot-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
#copilot-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

/* Message history */
#copilot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
}

/* Chat bubbles */
.copilot-msg {
    max-width: 88%;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    word-break: break-word;
}
.copilot-msg-user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.copilot-msg-ai {
    align-self: flex-start;
    background: #fff;
    color: #2d3748;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Proactive suggestion cards */
.copilot-suggestion {
    max-width: 95% !important;
    border: 1px solid #fde68a !important;
    background: #fffbeb !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden;
    animation: copilotSuggestIn 0.3s ease-out;
}
@keyframes copilotSuggestIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.copilot-suggestion-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: rgba(245,158,11,0.08);
    font-size: 0.82rem; color: #92400e;
}
.copilot-suggestion-icon { font-size: 18px; color: #f59e0b; }
.copilot-suggestion-body {
    padding: 10px 14px; font-size: 0.8rem; color: #78350f; line-height: 1.5;
}
.copilot-suggestion-context {
    padding: 6px 14px; font-size: 0.7rem; color: #a16207;
    display: flex; align-items: center; gap: 4px;
    border-top: 1px solid #fde68a;
    background: rgba(245,158,11,0.04);
}
.copilot-suggestion-dismiss {
    display: block; width: 100%; padding: 8px;
    background: transparent; border: none; border-top: 1px solid #fde68a;
    color: #a16207; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.copilot-suggestion-dismiss:hover { background: rgba(245,158,11,0.08); }
.copilot-msg-ai.thinking {
    color: #a0aec0;
    font-style: italic;
}

/* Input row */
#copilot-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
}
#copilot-input {
    flex: 1;
    resize: none;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 0.82rem;
    font-family: inherit;
    line-height: 1.45;
    min-height: 88px;
    max-height: 160px;
    background: #f8fafc;
    transition: border-color 0.15s;
    overflow-y: auto;
}
#copilot-input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
}
#copilot-send-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
#copilot-send-btn:hover {
    background: #1a3455;
}
#copilot-send-btn .material-icons {
    font-size: 18px;
}
#copilot-send-btn:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
}

/* New Chat button in copilot header */
#copilot-new-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
#copilot-new-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.18);
}

/* Attachment button in input row */
#copilot-attach-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
#copilot-attach-btn:hover {
    color: var(--primary);
    background: #f1f5f9;
}
#copilot-attach-btn .material-icons { font-size: 18px; }

/* Attachment preview strip */
#copilot-attachment-preview {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
#copilot-attachment-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}
#copilot-attachment-preview button {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
#copilot-attachment-preview button:hover {
    color: var(--error);
    background: #fee2e2;
}
#copilot-attachment-preview button .material-icons { font-size: 16px; }

/* Image thumbnail inside user chat bubble */
.copilot-msg-thumb {
    display: block;
    max-width: 160px;
    max-height: 120px;
    border-radius: 6px;
    margin-bottom: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Copilot toggle button in editor header */
#copilot-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
#copilot-toggle-btn:hover,
#copilot-toggle-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
#copilot-toggle-btn .material-icons {
    font-size: 20px;
}

/* Copilot sidebar resize handle */
#copilot-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
}
#copilot-resize-handle:hover,
#copilot-resize-handle.dragging {
    background: var(--primary);
    opacity: 0.25;
}
#copilot-sidebar {
    position: relative; /* needed for absolute resize handle */
}

/* Undo button */
#editor-undo-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
#editor-undo-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
#editor-undo-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
#editor-undo-btn .material-icons { font-size: 20px; }

/* Save button — pulse ring when there are unsaved changes */
#editor-save-btn.has-changes {
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.45);
    animation: save-pulse 2s ease-in-out infinite;
}
@keyframes save-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.45); }
    50%       { box-shadow: 0 0 0 6px rgba(243, 156, 18, 0.15); }
}

/* Full-screen toggle button (same style as copilot toggle) */
#editor-fullscreen-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
#editor-fullscreen-btn:hover,
#editor-fullscreen-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
#editor-fullscreen-btn .material-icons {
    font-size: 20px;
}

/* Full-screen mode: editor takes over the entire viewport */
body.editor-fullscreen #global-dash-nav {
    display: none !important;
}
body.editor-fullscreen .icon-rail {
    display: none !important;
}
body.editor-fullscreen #forms-editor-view {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    z-index: 99999 !important;
}
/* Footer gap is irrelevant in fullscreen (footer sits behind the overlay) */
body.editor-fullscreen #forms-editor-body {
    bottom: 0 !important;
}

/* Save status text ("All changes saved") */
.form-save-status {
    font-size: 0.82rem;
    color: transparent;
    font-style: italic;
    transition: color 0.3s ease, opacity 0.3s ease;
    white-space: nowrap;
    margin-right: 4px;
}
.form-save-status.saved {
    color: #64748b;
}

/* Save button disabled state in editor (greyed, not clickable) */
#editor-save-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* ==========================================================================
   INACTIVITY / SESSION EXPIRED MODAL
   ========================================================================== */
#inactivity-modal .inactivity-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 48px 40px 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.inactivity-modal-icon-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #2d5a8e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(32, 65, 100, 0.35);
}
.inactivity-modal-icon-ring .material-icons {
    font-size: 36px;
    color: #fff;
}
.inactivity-modal-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}
.inactivity-modal-body {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0 0 32px;
}
.inactivity-modal-btn {
    width: 100% !important;
    padding: 14px 28px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   AI COPILOT — HELP CARD
   ========================================================================== */

.copilot-msg-help {
    max-width: 100%;
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    font-size: 0.82rem;
}
.copilot-msg-help ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
}
.copilot-msg-help li {
    margin-bottom: 4px;
    color: #475569;
    line-height: 1.45;
}
.copilot-msg-ai code {
    background: #e2e8f0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.78rem;
    font-family: monospace;
}
.copilot-help-section {
    margin-top: 10px;
}
.copilot-help-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 4px;
}

/* Clickable sample prompt chips */
.copilot-samples-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.copilot-sample-item {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.78rem;
    color: #334155;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.4;
}
.copilot-sample-item:hover {
    background: #eff6ff;
    border-color: var(--primary);
    color: var(--primary);
}

/* ==========================================================================
   AI COPILOT — DRAFT COMPONENT CARD
   ========================================================================== */

.copilot-draft-card {
    align-self: flex-start;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.copilot-draft-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #fffaf0;
    border-bottom: 1px solid #fde68a;
}
.copilot-draft-header .material-icons {
    font-size: 17px;
    color: var(--accent);
}
.copilot-draft-intro {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
    flex: 1;
}
.copilot-draft-type-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
}

.copilot-draft-preview {
    margin: 0;
    padding: 10px 13px;
    font-size: 0.72rem;
    line-height: 1.55;
    font-family: 'Consolas', 'Monaco', monospace;
    background: #f8fafc;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 180px;
    overflow-y: auto;
    border-bottom: 1px solid #e2e8f0;
}

.copilot-draft-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    gap: 8px;
    background: #fff;
}

.copilot-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.copilot-add-btn:hover {
    background: #e08e0b;
}
.copilot-add-btn.injected {
    background: var(--success);
    cursor: default;
    opacity: 0.85;
}
.copilot-add-btn:disabled {
    cursor: not-allowed;
}
.copilot-add-btn .material-icons {
    font-size: 15px;
}

/* ==========================================================================
   SURVEYJS — SUPPRESS LICENSE NOTICE BANNER
   ========================================================================== */
/* SurveyJS renders a license notice banner for non-keyed builds.
   This is an internal non-commercial tool — hide the overlay entirely. */
.svc-creator__banner,
.sv-popup--dropdown.sv-popup--show-pointer .svc-creator__banner,
[class*="svc-creator__banner"],
.svc-logo {
    display: none !important;
}


.svc-toolbox__item-title {
    color: #204164
}

/* ── SurveyJS Creator: Better visual separation ────────────────────────── */

/* Panel containers — distinct card look with left accent */
.svc-question__content--panel {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary, #204164) !important;
    border-radius: 8px !important;
    margin: 12px 0 !important;
    padding: 16px !important;
}

/* Individual questions inside panels */
.svc-question__content:not(.svc-question__content--panel) {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    margin: 8px 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Selected question highlight */
.svc-question__content--selected:not(.svc-question__content--panel) {
    border-color: var(--accent, #f39c12) !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2) !important;
}

/* Selected panel highlight */
.svc-question__content--panel.svc-question__content--selected {
    border-left-color: var(--accent, #f39c12) !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.15) !important;
}

/* Page separator */
.svc-page {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Question titles in designer — bolder */
.svc-string-editor {
    font-weight: 600 !important;
}

/* "Add Question" button — subtler */
.svc-panel__add-new-question-container,
.svc-page__add-new-question-container {
    border-top: 1px dashed #cbd5e0 !important;
    margin-top: 12px !important;
    padding-top: 8px !important;
}

.sv-svg-icon svc-toolbox__item-icon {


    color: #204164
}

.svc-toolbox__item-container use {
    fill: var(--ctr-toolbox-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #204164)));
}

/* ══════════════════════════════════════════════════════════════════════════
   SUPERVISION SCHEDULE BUILDER
══════════════════════════════════════════════════════════════════════════ */

.sup-builder-wrap { padding: 4px 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.sup-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sup-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sup-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.sup-max-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #92400e;
    width: fit-content;
}
.sup-max-chip .material-icons { font-size: 13px; }
.sup-max-chip-unset {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}
.sup-max-chip-unset .material-icons { color: #cbd5e0; }

/* ── View toggle ─────────────────────────────────────────────────────────── */
.sup-view-toggle {
    display: flex;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.sup-view-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.sup-view-btn:first-child { border-right: 1.5px solid #e2e8f0; }
.sup-view-btn.active { background: var(--primary); color: #fff; }
.sup-view-btn .material-icons { font-size: 15px; }
.sup-save-btn:disabled { opacity: 0.42; cursor: default; pointer-events: none; }

/* ── Weekly grid ─────────────────────────────────────────────────────────── */
.sup-week-grid-wrap {
    overflow-x: auto;
    margin-bottom: 14px;
}
.sup-week-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
    min-width: 750px;
}
.sup-day-col { display: flex; flex-direction: column; gap: 6px; }
.sup-day-header {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 800;
    background: var(--primary);
    color: #fff;
    border-radius: 6px;
    padding: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sup-day-empty {
    text-align: center;
    font-size: 0.72rem;
    color: #cbd5e0;
    padding: 14px 0;
    font-style: italic;
}
.sup-add-day-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    border: 1.5px dashed #e2e8f0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 2px;
}
.sup-add-day-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f0f4f8;
}
.sup-add-day-btn .material-icons { font-size: 16px; }

/* ── Week block cards ────────────────────────────────────────────────────── */
.sup-week-card {
    border-radius: 6px;
    padding: 7px 8px;
    position: relative;
    font-size: 0.72rem;
    transition: box-shadow 0.15s;
}
.sup-week-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.sup-wcard-instruction { background: #f1f5f9; border: 1px solid #e2e8f0; opacity: 0.65; }
.sup-wcard-supervision { background: #fff;    border: 1.5px solid #c7d9ef; }
.sup-wcard-transition  { background: #fefce8; border: 1.5px solid #fef08a; }
.sup-wcard-other       { background: #faf5ff; border: 1.5px solid #e9d5ff; }
.sup-wcard-warn        { border-color: #fcd34d !important; }

.sup-week-card-time {
    font-size: 0.66rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sup-week-card-dur { color: #94a3b8; font-weight: 400; }
.sup-week-card-label {
    font-weight: 700;
    color: #334155;
    font-size: 0.73rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sup-week-card-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.sup-chip-mini {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.63rem;
    font-weight: 700;
    white-space: nowrap;
}
.sup-wcard-unassigned {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: #d97706;
    font-weight: 600;
    margin-top: 4px;
}
.sup-wcard-unassigned .material-icons { font-size: 11px; }
.sup-week-card-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.sup-week-card:hover .sup-week-card-actions { opacity: 1; }
.sup-wcard-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px;
    line-height: 1;
    border-radius: 4px;
}
.sup-wcard-edit-btn:hover { color: var(--primary); background: #f0f4f8; }
.sup-wcard-edit-btn .material-icons { font-size: 13px; }

/* ── Day view ────────────────────────────────────────────────────────────── */
.sup-day-panel { display: flex; flex-direction: column; gap: 10px; }
.sup-day-pills { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.sup-day-pill {
    padding: 5px 16px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.sup-day-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.sup-day-block-list { display: flex; flex-direction: column; gap: 8px; }
.sup-day-empty-large {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}
.sup-day-empty-large .material-icons { font-size: 36px; margin-bottom: 8px; display: block; }
.sup-day-empty-large p { margin: 0 0 14px; font-size: 0.9rem; }

/* ── Day view block cards ────────────────────────────────────────────────── */
.sup-day-card {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid #e2e8f0;
}
.sup-day-card-accent { width: 5px; flex-shrink: 0; }
.sup-day-card-body   { flex: 1; padding: 10px 14px; min-width: 0; }

.sup-day-instruction .sup-day-card-accent { background: #94a3b8; }
.sup-day-supervision .sup-day-card-accent { background: var(--primary); }
.sup-day-transition  .sup-day-card-accent { background: #f59e0b; }
.sup-day-other       .sup-day-card-accent { background: #a78bfa; }
.sup-day-instruction { background: #f8fafc; }

/* Duration pills */
.sup-pill-instruction { background: #e2e8f0; color: #475569; }
.sup-pill-supervision { background: #dbeafe; color: var(--primary); }
.sup-pill-transition  { background: #fef3c7; color: #92400e; }
.sup-pill-other       { background: #ede9fe; color: #6d28d9; }

/* Type select badges */
.sup-type-badge {
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s;
}
.sup-badge-instruction { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.sup-badge-supervision { background: #dbeafe; color: var(--primary); border-color: #93c5fd; }
.sup-badge-transition  { background: #fef3c7; color: #92400e;  border-color: #fcd34d; }
.sup-badge-other       { background: #ede9fe; color: #6d28d9;  border-color: #ddd6fe; }

/* ── Staff assignment section ────────────────────────────────────────────── */
.sup-staff-section {
    margin-top: 10px;
    border-top: 1px dashed #f1f5f9;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sup-staff-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sup-staff-label .material-icons { font-size: 13px; }
.sup-staff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}
.sup-staff-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #1e40af;
}
.sup-chip-remove {
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.1s;
}
.sup-chip-remove:hover { color: #1e40af; }

/* Staff search */
.sup-staff-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 10px;
    transition: border-color 0.15s;
}
.sup-staff-search-wrap:focus-within { border-color: var(--primary); background: #fff; }
.sup-search-icon { font-size: 15px; color: #94a3b8; flex-shrink: 0; }
.sup-staff-search {
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px 0;
    font-size: 0.8rem;
    font-family: inherit;
    color: #334155;
    outline: none;
}
.sup-staff-search::placeholder { color: #cbd5e0; }
.sup-staff-results {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.11);
    z-index: 600;
    overflow: hidden;
}
.sup-staff-results.hidden { display: none; }
.sup-staff-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.sup-staff-result:hover { background: #f1f5f9; }
.sup-result-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
}
.sup-result-info  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sup-result-name  { font-size: 0.8rem; font-weight: 600; color: #1e293b; }
.sup-result-pos   { font-size: 0.68rem; color: #94a3b8; }

/* ── Supervision totals bar ──────────────────────────────────────────────── */
.sup-totals-section {
    margin-top: 18px;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
}
.sup-totals-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.sup-totals-title .material-icons { font-size: 14px; }
.sup-totals-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-total-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
}
.sup-total-row.sup-total-over {
    background: #fef2f2;
    border-color: #fecaca;
}
.sup-total-name { font-size: 0.8rem; font-weight: 600; color: #334155; }
.sup-total-mins { font-size: 0.78rem; font-weight: 700; color: var(--primary); }
.sup-total-over .sup-total-mins { color: #dc2626; }
.sup-total-warn {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    color: #dc2626;
    font-weight: 600;
}
.sup-total-warn .material-icons { font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   STAFF ANALYTICS  (.sa-*)
   ══════════════════════════════════════════════════════════════════════════ */

.sa-loading, .sa-empty, .sa-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    font-size: 0.88rem;
    color: #64748b;
}
.sa-error  { color: #dc2626; }
.sa-spin   { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Wrap & top bar ────────────────────────────────────────────────────── */
.sa-wrap { padding: 20px; }

.sa-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.sa-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}
.sa-title .material-icons { font-size: 20px; }

.sa-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sa-thresholds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sa-thresh-chip {
    font-size: 0.72rem;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 3px 10px;
}
.sa-thresh-chip b { color: var(--primary); }

.sa-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #f8fafc;
    cursor: pointer;
    color: #64748b;
    transition: background 0.15s, color 0.15s;
}
.sa-refresh-btn:hover { background: #e2e8f0; color: var(--primary); }
.sa-refresh-btn .material-icons { font-size: 16px; }

/* ── Notes & legend ────────────────────────────────────────────────────── */
.sa-notes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.sa-note-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
}
.sa-note-chip .material-icons { font-size: 14px; color: #94a3b8; }

.sa-legend-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    color: #64748b;
    margin-bottom: 14px;
}

/* ── Badges ────────────────────────────────────────────────────────────── */
.sa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}
.sa-badge-crit { background: #fef2f2; border: 1.5px solid #fca5a5; color: #dc2626; }
.sa-badge-adv  { background: #fffbeb; border: 1.5px solid #fcd34d; color: #b45309; }

/* ── Table ─────────────────────────────────────────────────────────────── */
.sa-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 14px;
}
.sa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.sa-th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.sa-th-name { text-align: left; min-width: 180px; }
.sa-th-sub  { font-weight: 500; text-transform: none; color: #94a3b8; letter-spacing: 0; }

.sa-row td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.sa-row:last-child td { border-bottom: none; }
.sa-row-critical { background: #fffafa; }
.sa-row-advisory { background: #fffdf0; }

.sa-td      { text-align: center; white-space: nowrap; }
.sa-td-name { text-align: left; }

.sa-member-name { font-weight: 600; color: #1e293b; font-size: 0.84rem; }
.sa-sched-name  { font-size: 0.68rem; color: #94a3b8; margin-top: 2px; }
.sa-no-sched    { color: #fca5a5; }

.sa-val        { font-size: 0.84rem; font-weight: 600; color: #334155; }
.sa-val-crit   { color: #dc2626; }
.sa-val-warn   { color: #b45309; }
.sa-val-dash   { color: #cbd5e1; font-weight: 400; }

.sa-empty-row { padding: 24px; text-align: center; color: #94a3b8; }

/* ── Footer summary bar ────────────────────────────────────────────────── */
.sa-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
}
.sa-summary .material-icons { font-size: 16px; }
.sa-summary-ok   { background: #f0fdf4; color: #166534; }
.sa-summary-adv  { background: #fffbeb; color: #92400e; }
.sa-summary-crit { background: #fef2f2; color: #991b1b; }


/* ══════════════════════════════════════════════════════════════════════════
   MEMBER PROFILE  (.mp-*, .roster-identity-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Roster card click target ─────────────────────────────────────────── */
.roster-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.roster-identity-link {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background 0.15s;
}
.roster-identity-link:hover { background: #f1f5f9; }
.roster-identity-link:hover .roster-name { color: var(--primary); }
.roster-profile-icon {
    font-size: 16px !important;
    color: #94a3b8;
    vertical-align: middle;
    margin-left: 2px;
    transition: color 0.15s;
}
.roster-identity-link:hover .roster-profile-icon { color: var(--primary); }

/* ── Loading / error states ───────────────────────────────────────────── */
.mp-loading, .mp-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    font-size: 0.88rem;
    color: #64748b;
}
.mp-error { color: #dc2626; }
.mp-spin  { animation: spin 1.2s linear infinite; }

/* ── Outer wrap ───────────────────────────────────────────────────────── */
.mp-wrap {
    padding: 24px;
    max-width: 1100px;
    overflow-y: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.mp-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 20px;
}
.mp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    flex-shrink: 0;
}
.mp-hero-info { flex: 1; min-width: 0; }
.mp-hero-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
}
.mp-hero-sub {
    font-size: 0.82rem;
    color: #64748b;
    margin-bottom: 6px;
}
.mp-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mp-badge-active   { background: #dcfce7; color: #166534; }
.mp-badge-inactive { background: #fef2f2; color: #991b1b; }
.mp-hero-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Info grid ────────────────────────────────────────────────────────── */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.mp-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.mp-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}
.mp-card-title .material-icons { font-size: 15px; }
.mp-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.82rem;
}
.mp-row:last-child { border-bottom: none; }
.mp-row-label {
    width: 110px;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 500;
}
.mp-row-value { color: #1e293b; word-break: break-word; }

/* ── Assignments section ──────────────────────────────────────────────── */
.mp-assignments-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.mp-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}
.mp-section-title .material-icons { font-size: 15px; }
.mp-assign-table-wrap { overflow-x: auto; }
.mp-assign-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.mp-assign-table th {
    padding: 8px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.mp-assign-table td {
    padding: 9px 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
.mp-assign-table tr:last-child td { border-bottom: none; }
.mp-assign-empty { text-align: center; color: #94a3b8; padding: 20px !important; }
.mp-current-assign { color: #059669; font-weight: 600; }

/* ── Edit form ────────────────────────────────────────────────────────── */
.mp-edit-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    padding: 4px 0;
}
.mp-edit-row { display: flex; flex-direction: column; gap: 4px; }
.mp-edit-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mp-edit-input { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERS DIRECTORY PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CRM Hero ─────────────────────────────────────────────────────────────── */
.members-hero {
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    flex-shrink: 0;
}

/* Row 1: identity + stats + actions */
.members-hero-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 60px;
    border-bottom: 1px solid #f1f5f9;
}
.members-hero-top--profile {
    padding: 10px 60px;
    gap: 10px;
    border-bottom: none;
}

.members-hero-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.members-hero-icon {
    font-size: 28px;
    color: var(--primary);
    opacity: 0.85;
}
.members-hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.members-hero-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 1px;
}

.members-hero-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}
.mhero-stat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px 5px 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.mhero-stat-chip .material-icons { font-size: 15px; color: #94a3b8; }
.mhero-stat-chip:hover { background: #f1f5f9; border-color: #cbd5e0; }
.mhero-stat-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.mhero-stat-chip.active .material-icons { color: rgba(255,255,255,0.8); }
.mhero-stat-label { font-size: 0.72rem; font-weight: 500; opacity: 0.8; margin-left: 1px; }

.members-hero-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.mhero-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mhero-action-btn .material-icons { font-size: 17px; }
.mhero-action-btn:hover { background: #f1f5f9; border-color: #cbd5e0; color: var(--primary); }
.mhero-action-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.mhero-action-btn--primary:hover { background: #1a3554; border-color: #1a3554; color: #fff; }
.mhero-action-btn--danger {
    background: #fff5f5;
    border-color: #fed7d7;
    color: #e53e3e;
}
.mhero-action-btn--danger:hover { background: #e53e3e; border-color: #e53e3e; color: #fff; }
.mhero-action-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 2px;
}

/* Row 2: filters + search */
.members-hero-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 60px;
}
.members-search-box--grow {
    flex: 1;
    max-width: none;
}

/* ── Search box (control bar) ─────────────────────────────────────────────── */
/* Search + Add/Delete buttons always stay on one line */
.members-search-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.members-search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 260px;
    width: 100%;
}
.members-search-icon {
    position: absolute;
    left: 12px;
    font-size: 20px;
    color: #94a3b8;
    pointer-events: none;
}
.members-search-input {
    width: 100%;
    padding: 6px 32px 6px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.members-search-input:focus {
    border-color: #204164;
    box-shadow: 0 0 0 3px rgba(32,65,100,0.10);
    background: #fff;
}
.members-search-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #94a3b8;
    border-radius: 50%;
    display: flex;
    align-items: center;
}
.members-search-clear:hover { color: #475569; background: #f1f5f9; }
.members-search-clear .material-icons { font-size: 18px; }

/* ── Control bar (stats + filters) ────────────────────────────────────────── */
.members-control-bar {
    padding: 16px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.members-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.members-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.2s;
    user-select: none;
}
.members-stat-chip .material-icons { font-size: 16px; }
.members-stat-chip:hover { background: #e2e8f0; }
.members-stat-chip.active {
    background: #204164;
    color: #fff;
    border-color: #204164;
}
.members-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.members-filter-select {
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
    background: #fff;
    min-width: 120px;
    max-width: 150px;
    cursor: pointer;
    outline: none;
}
.members-filter-select:focus {
    border-color: #204164;
    box-shadow: 0 0 0 2px rgba(32,65,100,0.10);
}

/* ── Directory body ───────────────────────────────────────────────────────── */
.members-directory-body {
    padding: 20px 28px 40px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.members-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 80px 20px;
    color: #64748b;
    font-size: 0.95rem;
}
.members-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #94a3b8;
    text-align: center;
}
.members-empty-state .material-icons {
    font-size: 56px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.members-empty-state.error { color: #dc2626; }
.members-empty-state.error .material-icons { color: #dc2626; }
.members-result-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

/* ── Card grid ────────────────────────────────────────────────────────────── */
.members-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.mdir-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.mdir-card:hover {
    border-color: #204164;
    box-shadow: 0 4px 16px rgba(32,65,100,0.10);
    transform: translateY(-1px);
}
.mdir-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.mdir-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.mdir-card-identity {
    flex: 1;
    min-width: 0;
}
.mdir-card-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mdir-card-position {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 1px;
}
.mdir-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mdir-status-active { background: #38a169; }
.mdir-status-inactive { background: #e53e3e; }
.mdir-card-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #64748b;
    padding: 3px 0;
    overflow: hidden;
}
.mdir-card-detail .material-icons {
    font-size: 15px;
    color: #94a3b8;
    flex-shrink: 0;
}
.mdir-card-detail span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mdir-card-footer {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.mdir-badge {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mdir-badge-type { background: #eff6ff; color: #1d4ed8; }
.mdir-badge-fte  { background: #f0fdf4; color: #166534; }
.mdir-badge-id   { background: #f8fafc; color: #64748b; }

/* ── Selection mode ───────────────────────────────────────────────────────── */
.mdir-selection-mode .mdir-card { cursor: default; }
.mdir-card { position: relative; }
.mdir-card-checkbox {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.mdir-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #204164;
    cursor: pointer;
}
.mdir-card-selected {
    border-color: #204164 !important;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(32,65,100,0.18);
}
.mdir-card-held {
    transform: scale(0.97);
    box-shadow: 0 0 0 3px #204164;
}
/* btn-danger in the control bar */
.btn-danger {
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger:hover { background: #c53030; }
.btn-danger:disabled { background: #fc8181; cursor: not-allowed; }

/* ── Table view ───────────────────────────────────────────────────────────── */
.mdir-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.mdir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.mdir-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.mdir-table-row {
    cursor: pointer;
    transition: background 0.15s;
}
.mdir-table-row:hover { background: #f8fafc; }
.mdir-table-row td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}
.mdir-table-row:last-child td { border-bottom: none; }
.mdir-table-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mdir-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.mdir-table-name {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}
.mdir-table-email {
    font-size: 0.78rem;
    color: #94a3b8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ADD MEMBER MODAL (TABBED)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tab bar */
.amm-tabs {
    display: flex;
    border-bottom: 2px solid #e8edf3;
    padding: 0 24px;
    gap: 4px;
    background: #f8fafc;
    flex-shrink: 0;
}
.amm-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.amm-tab .material-icons { font-size: 16px; }
.amm-tab:hover { color: var(--primary); }
.amm-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Panel */
.amm-panel { display: flex; flex-direction: column; }
.amm-panel.hidden { display: none; }

/* Section title */
.amm-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 14px 0 6px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 10px;
}
.amm-section-title:first-child { padding-top: 0; }

/* 2-col grid for fields */
.amm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 4px;
}
.amm-field { display: flex; flex-direction: column; gap: 4px; }
.amm-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.amm-field .req { color: #e53e3e; }
.amm-full { grid-column: 1 / -1; }

/* CSV tab */
.amm-csv-instructions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.83rem;
    color: #1e3a5f;
    line-height: 1.6;
}
.amm-csv-headers {
    margin-top: 6px;
    font-family: monospace;
    font-size: 0.78rem;
    color: #334155;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 6px 10px;
    line-height: 1.8;
}
.amm-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    color: #64748b;
    font-size: 0.88rem;
    transition: border-color 0.2s, background 0.2s;
    cursor: default;
    margin-bottom: 16px;
}
.amm-dropzone p { margin: 8px 0 12px; }
.amm-dropzone.dragover {
    border-color: var(--primary);
    background: #f0f5fb;
}
.amm-csv-preview-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}
.amm-csv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.amm-csv-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.amm-csv-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.amm-csv-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-top: 12px;
}
/* Step layout */
.amm-csv-step {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    align-items: flex-start;
}
.amm-csv-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.amm-csv-step-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}
.amm-csv-step-desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.55;
}
.amm-csv-step-body { flex: 1; }

/* Summary pills above preview table */
.amm-csv-summary-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.amm-csv-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}
.amm-csv-pill .material-icons { font-size: 14px; }
.amm-csv-pill--green  { background: #dcfce7; color: #166534; }
.amm-csv-pill--amber  { background: #fef3c7; color: #92400e; }

/* Table wrap with scroll */
.amm-csv-table-wrap {
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.amm-csv-more {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 8px;
    font-size: 0.78rem;
}

/* ContactID inline chip */
code.amm-id-chip {
    font-family: monospace;
    font-size: 0.72rem;
    background: #f1f5f9;
    color: #475569;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* Post-import report */
.amm-csv-report {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
}
.amm-csv-report--success { background: #dcfce7; color: #166534; }
.amm-csv-report--warning { background: #fef3c7; color: #78350f; }
.amm-csv-report--error   { background: #fee2e2; color: #991b1b; }
.amm-csv-report--info    { background: #eff6ff; color: #1e40af; }
.amm-csv-report.hidden   { display: none; }

.amm-import-report-grid {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.amm-import-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.55);
}
.amm-import-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.amm-import-stat-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    opacity: 0.75;
}
.amm-import-stat--green { color: #166534; }
.amm-import-stat--red   { color: #991b1b; }
.amm-import-stat--grey  { color: #475569; }
.amm-import-stat--blue  { color: #1e40af; }

.amm-import-failures { margin-top: 6px; }
.amm-import-failures-title {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}
.amm-import-failure-row {
    font-size: 0.78rem;
    padding: 2px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPENSE MANAGEMENT PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Control bar ──────────────────────────────────────────────────────────── */
.expenses-control-bar {
    padding: 16px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.expenses-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.expenses-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.expenses-total-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #166534;
    background: #dcfce7;
    border: 1.5px solid #bbf7d0;
    font-variant-numeric: tabular-nums;
}

/* ── Expenses table ───────────────────────────────────────────────────────── */
.exp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.exp-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.exp-table th:hover { background: #f1f5f9; }
.exp-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.exp-table tr:hover { background: #fafbfe; cursor: pointer; }
.exp-table .exp-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.exp-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.exp-badge-draft      { background: #f1f5f9; color: #64748b; }
.exp-badge-submitted  { background: #dbeafe; color: #1e40af; }
.exp-badge-review     { background: #fff7ed; color: #c2410c; }
.exp-badge-approved   { background: #dcfce7; color: #166534; }
.exp-badge-denied     { background: #fef2f2; color: #991b1b; }
.exp-badge-paid       { background: #f3e8ff; color: #6b21a8; }

/* ── Detail view ──────────────────────────────────────────────────────────── */
.exp-detail-wrap {
    padding: 24px;
    max-width: 900px;
    overflow-y: auto;
}
.exp-detail-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 20px;
}
.exp-detail-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.exp-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.exp-timeline {
    position: relative;
    padding-left: 24px;
}
.exp-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.exp-timeline-item {
    position: relative;
    padding: 8px 0 16px 16px;
    font-size: 0.82rem;
}
.exp-timeline-dot {
    position: absolute;
    left: -20px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e2e8f0;
}

/* ── Member autocomplete suggestions ──────────────────────────────────────── */
.exp-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.exp-suggestion-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.exp-suggestion-item:hover { background: #f8fafc; }

/* ── Profile expenses table ───────────────────────────────────────────────── */
.exp-profile-table tr:hover { background: #f8fafc; cursor: pointer; }


/* ── SCHOOL YEAR ROLLOVER MODAL ─────────────────────────────────────────── */
.rollover-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.rollover-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 100%; max-width: 480px;
    overflow: hidden;
}
.rollover-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.rollover-body {
    padding: 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.rollover-info-box {
    display: flex; align-items: flex-start; gap: 10px;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 8px; padding: 12px 14px;
    font-size: 0.83rem; color: #1e40af; line-height: 1.5;
}
.rollover-label {
    font-size: 0.78rem; font-weight: 600; color: #475569;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rollover-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTACT IMPORT VIEW
   ══════════════════════════════════════════════════════════════════════════════ */

/* Full-screen overlay inside #panel-members — top:0 because #panel-members itself
   already starts at var(--header-height); no additional offset needed */
.members-import-view {
    position: absolute;
    top: 0;
    left: 0; right: 0; bottom: 0;
    background: var(--bg, #f8fafc);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.members-import-view.hidden { display: none; }

/* Toolbar */
.members-import-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 62px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.members-import-back-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    color: var(--primary, #204164); font-size: 0.9rem; font-weight: 600;
    padding: 6px 10px; border-radius: 6px;
}
.members-import-back-btn:hover { background: #f1f5f9; }
.members-import-back-btn .material-icons { font-size: 18px; }
.members-import-title {
    font-weight: 700; font-size: 1rem; color: var(--primary, #204164);
}
.import-step-dots {
    display: flex; gap: 8px; margin-left: auto;
}
.import-step-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #cbd5e0;
    transition: background 0.2s;
}
.import-step-dot.active { background: var(--primary, #204164); }
.import-step-dot.done   { background: var(--success, #38a169); }

/* Scrollable body */
.members-import-body {
    flex: 1;
    overflow-y: auto;
    padding: 36px 40px;
}

/* Step panel */
.import-step-panel { max-width: 860px; margin: 0 auto; }
/* Step 2 (column preview) gets full width — many columns need room */
.import-step-panel--wide { max-width: 100%; }
.import-step-panel--centered {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 320px;
}

/* Step headings */
.import-step-heading { margin-bottom: 28px; }
.import-step-heading h2 { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 0 0 6px; }
.import-step-heading p  { font-size: 0.9rem; color: var(--text-muted, #64748b); margin: 0; }

/* Footer row (prev/next buttons) */
.import-step-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-top: 32px;
}
.import-step-footer--sticky {
    position: sticky; bottom: 0;
    background: linear-gradient(to top, #f8fafc 70%, transparent);
    padding: 20px 24px 24px;
    margin: 0 -24px;
    z-index: 5;
}

/* ── Step 1: Dropzone ── */
.import-dropzone {
    position: relative;
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: border-color 0.2s, background 0.2s;
}
.import-dropzone:hover,
.import-dropzone--drag {
    border-color: var(--primary, #204164);
    background: #eff6ff;
}
.import-dropzone-icon { font-size: 48px !important; color: #94a3b8; margin-bottom: 12px; }
.import-dropzone-label { font-size: 1rem; color: #475569; margin-bottom: 4px; }
.import-dropzone-link  { color: var(--primary); font-weight: 600; text-decoration: underline; }
.import-dropzone-hint  { font-size: 0.8rem; color: #94a3b8; }

/* Parsing overlay — sits on top of the dropzone content while a file is being read */
.import-dz-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    pointer-events: none;
}
.import-dz-overlay.hidden { display: none; }
.import-dz-overlay-spinner {
    width: 40px; height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary, #204164);
    border-radius: 50%;
    animation: importSpin 0.85s linear infinite;
}
.import-dz-overlay-msg {
    font-size: 0.88rem; font-weight: 600; color: var(--primary, #204164);
    max-width: 260px; text-align: center; line-height: 1.4;
}

/* Drive import button */
.import-drive-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.import-drive-divider::before,
.import-drive-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.import-drive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 11px 20px;
    border: 1.5px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    color: #3c4043;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.import-drive-btn:hover {
    background: #f8f9fa;
    border-color: #c0c4cc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.import-drive-btn:active {
    background: #f1f3f4;
}
.import-drive-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Sheet selector (multi-sheet workbooks) */
.import-sheet-selector {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 8px;
    font-size: 0.88rem;
}
.import-sheet-selector-info {
    display: flex; align-items: center; gap: 6px; color: #1e40af;
}
.import-sheet-selector-info .material-icons { font-size: 18px; }
.import-sheet-selector-label { font-weight: 600; color: #334155; }
.import-sheet-select {
    padding: 7px 10px; border: 1px solid #93c5fd; border-radius: 6px;
    font-size: 0.88rem; background: #fff; max-width: 320px;
}
.import-sheet-select:focus { outline: none; border-color: var(--primary, #204164); }
.import-sheet-change-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.82rem; color: var(--primary, #204164);
    text-decoration: underline; padding: 0; margin-left: 4px;
}
.import-sheet-change-btn:hover { color: var(--accent, #f39c12); }
.import-file-info {
    margin-top: 14px; font-size: 0.88rem; color: #475569;
    display: flex; align-items: center; gap: 6px;
}
.import-file-info.hidden { display: none; }

/* ── Step 3: Column Mapping grid ── */
.import-map-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
@media (max-width: 700px) {
    .import-map-grid { grid-template-columns: 1fr; }
}
.import-map-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px 9px;
}
.import-map-card--mapped {
    border-color: #86efac;
    background: #f0fdf4;
}
.import-map-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 5px;
}
.import-map-card-label {
    font-size: 0.82rem; font-weight: 600; color: #334155;
}
.import-map-card-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.import-map-card-input { width: 100%; }
.import-map-dropdown {
    width: 100%; padding: 5px 8px; font-size: 0.83rem;
    border: 1px solid #e2e8f0; border-radius: 6px;
    background: #fff; color: #334155; cursor: pointer;
}
.import-map-dropdown:focus { outline: none; border-color: var(--primary); }
.import-map-matched { color: var(--success, #38a169); font-size: 16px !important; }
.import-custom-toggle {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    font-size: 0.75rem; color: #64748b; font-weight: 500; user-select: none;
}
.import-custom-toggle input[type="checkbox"] { cursor: pointer; }
.import-custom-toggle:has(input:checked) { color: var(--primary, #204164); }
.import-custom-value-input {
    width: 100%; padding: 5px 8px; border: 1px solid var(--primary, #204164);
    border-radius: 6px; font-size: 0.83rem; background: #eff6ff;
}
.import-custom-value-input:focus { outline: none; border-color: var(--accent, #f39c12); }
select.import-custom-value-select { cursor: pointer; appearance: auto; color: #334155; }

/* ── Unmapped columns interactive section ── */
.import-unmapped-section {
    margin-top: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
}
.import-unmapped-section-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: #f1f5f9;
    font-size: 0.84rem; color: #475569;
    border-bottom: 1px solid #e2e8f0;
}
.import-unmapped-section-header .material-icons { font-size: 18px; color: #64748b; }
.import-unmapped-rows { padding: 4px 0; }
.import-unmapped-row {
    padding: 8px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.import-unmapped-row:last-child { border-bottom: none; }
.import-unmapped-row-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.import-unmapped-chip {
    background: #fef3c7; border: 1px solid #fde68a; border-radius: 4px;
    padding: 2px 10px; font-size: 0.82rem; color: #92400e; font-weight: 500;
}
.import-unmapped-toggle {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 0.8rem; color: #64748b; font-weight: 500; user-select: none;
}
.import-unmapped-toggle input[type="checkbox"] { cursor: pointer; }
.import-unmapped-toggle:has(input:checked) { color: var(--primary, #204164); }
.import-unmapped-row-config {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding-left: 4px;
}
.import-unmapped-field-label {
    font-size: 0.78rem; color: #64748b; white-space: nowrap;
}
.import-unmapped-field-name {
    flex: 1; padding: 4px 8px; font-size: 0.83rem;
    border: 1px solid #cbd5e1; border-radius: 5px;
    background: #fff; color: #334155;
}
.import-unmapped-field-name:focus { outline: none; border-color: var(--primary, #204164); }

/* ── Step 3: Processing spinner ── */
.import-processing-spinner {
    margin-bottom: 24px;
}
.import-spinner-ring {
    width: 52px; height: 52px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--primary, #204164);
    border-radius: 50%;
    animation: importSpin 0.9s linear infinite;
}
@keyframes importSpin { to { transform: rotate(360deg); } }
.import-processing-status {
    font-size: 0.95rem; color: #64748b; text-align: center;
}

/* ── Step 4: Review ── */
.import-review-summary {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 28px;
}
.import-summary-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 8px;
    font-size: 0.88rem; font-weight: 500;
}
.import-summary-chip .material-icons { font-size: 18px; }
.import-summary-chip--green { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.import-summary-chip--blue  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.import-summary-chip--amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.import-summary-chip--navy  { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }

.import-section {
    margin-bottom: 28px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden;
}
.import-section.hidden { display: none; }
.import-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.import-section-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 0.95rem; color: var(--primary);
}
.import-section-title .material-icons { font-size: 18px; }
.import-section-note {
    margin: 0; padding: 12px 18px 0;
    font-size: 0.84rem; color: #64748b;
}

/* Update cards */
.import-update-card { border-bottom: 1px solid #f1f5f9; }
.import-update-card:last-child { border-bottom: none; }
.import-update-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; cursor: pointer; user-select: none;
}
.import-update-header:hover { background: #f8fafc; }
.import-update-name {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.92rem;
}
.import-update-name .material-icons { font-size: 18px; color: #94a3b8; }
.import-update-by { font-size: 0.78rem; color: #94a3b8; margin-left: 4px; }
.import-update-actions { display: flex; align-items: center; gap: 8px; }
.import-change-count { font-size: 0.78rem; color: #64748b; }
.import-expand-icon  { font-size: 20px !important; color: #94a3b8; }
.import-update-body { padding: 0 16px 12px; }
.import-update-body.hidden { display: none; }

/* Diff table */
.import-diff-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px;
}
.import-diff-table thead th {
    padding: 6px 10px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8;
    border-bottom: 1px solid #e2e8f0; text-align: left;
}
.import-diff-table tbody td { padding: 7px 10px; border-bottom: 1px solid #f8fafc; }
.import-diff-field { color: #475569; font-weight: 500; white-space: nowrap; }
.import-diff-old   { color: #94a3b8; text-decoration: line-through; }
.import-diff-arrow .material-icons { font-size: 16px !important; color: #94a3b8; vertical-align: middle; }
.import-diff-new   { color: #166534; font-weight: 600; }
.import-diff-toggle { text-align: center; }
.import-empty { font-style: italic; color: #cbd5e0; }

/* Row-level buttons */
.import-row-btn {
    padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
    transition: background 0.15s;
}
.import-row-btn:hover { background: #e2e8f0; }
.import-row-btn--accept { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.import-row-btn--accept:hover { background: #dcfce7; }
.import-row-btn--reject { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.import-row-btn--reject:hover { background: #ffe4e6; }

/* Name-review and ambiguous rows */
.import-review-row {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}
.import-review-row:last-child { border-bottom: none; }
.import-review-row--confirmed { background: #f0fdf4; }
.import-review-row--skipped   { background: #f9fafb; opacity: 0.6; }
.import-review-match {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
    flex-wrap: wrap;
}
.import-review-side {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px; border-radius: 8px; flex: 1; min-width: 180px;
}
.import-review-side .material-icons { font-size: 20px; margin-top: 2px; }
.import-review-side--sheet { background: #eff6ff; color: #1e40af; }
.import-review-side--db    { background: #f0fdf4; color: #166534; }
.import-review-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.import-review-meta  { font-size: 0.78rem; opacity: 0.75; margin-top: 2px; }
.import-review-arrow { color: #94a3b8; font-size: 22px !important; }
.import-review-actions { display: flex; gap: 8px; }

/* Ambiguous */
.import-ambig-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem; margin-bottom: 10px;
}
.import-ambig-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.import-ambig-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 8px;
}
.import-ambig-detail { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.import-ambig-detail strong { color: var(--primary); }
.import-ambig-detail span   { color: #64748b; font-size: 0.78rem; }
.import-ambig-decision { margin-top: 8px; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }

/* New contacts */
.import-new-controls {
    display: flex; gap: 8px; padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
}
.import-new-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid #f8fafc;
    cursor: pointer; transition: background 0.15s;
}
.import-new-row:hover { background: #f8fafc; }
.import-new-row .material-icons { color: #94a3b8; font-size: 20px; }
.import-new-detail { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.import-new-detail strong { color: var(--primary); }
.import-new-detail span   { color: #64748b; font-size: 0.78rem; }

/* ── Step 5: Progress & Report ── */
.import-progress-wrap { width: 100%; max-width: 420px; text-align: center; margin-bottom: 32px; }
.import-progress-bar {
    height: 10px; background: #e2e8f0; border-radius: 9999px; overflow: hidden;
    margin-bottom: 10px;
}
.import-progress-bar-inner {
    height: 100%; background: var(--primary, #204164);
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.import-report-container { text-align: center; max-width: 560px; width: 100%; }
.import-report-icon { margin-bottom: 12px; }
.import-report-icon .material-icons { font-size: 56px !important; }
.import-report-icon--success .material-icons { color: var(--success, #38a169); }
.import-report-icon--warning .material-icons { color: var(--warning, #dd6b20); }
.import-report-icon--error   .material-icons { color: var(--error,   #e53e3e); }
.import-report-title { font-size: 1.4rem; font-weight: 700; color: var(--primary); margin: 0 0 20px; }
.import-report-stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.import-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 20px; border-radius: 10px; min-width: 90px;
}
.import-stat-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.import-stat-lbl { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; opacity: 0.8; }
.import-stat--green { background: #f0fdf4; color: #166534; }
.import-stat--blue  { background: #eff6ff; color: #1e40af; }
.import-stat--grey  { background: #f1f5f9; color: #475569; }
.import-stat--red   { background: #fff1f2; color: #be123c; }
.import-report-errors {
    text-align: left; background: #fff1f2; border: 1px solid #fecdd3;
    border-radius: 8px; padding: 12px 16px; margin-top: 16px;
    font-size: 0.85rem; color: #be123c;
}
.import-report-errors ul { margin: 6px 0 0 16px; padding: 0; }
.import-report-errors li  { margin-bottom: 4px; }

/* ── Step 2: Column Preview Table ────────────────────────────────────────── */
.import-preview-wrap { display: flex; flex-direction: column; gap: 0; }
/* Preview note bar above table */
.import-preview-note {
    display: flex; align-items: center; gap: 8px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-bottom: none;
    border-radius: 8px 8px 0 0; padding: 8px 14px;
    font-size: 0.82rem; color: #1e40af;
}
.import-preview-note .material-icons { font-size: 16px; flex-shrink: 0; }
.import-preview-scroll-hint {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto; font-size: 0.8rem; color: #3b82f6; font-weight: 500;
    white-space: nowrap;
}
.import-preview-table-wrap {
    overflow-x: scroll; /* always show scrollbar — multiple columns */
    border: 1px solid #e2e8f0;
    border-radius: 0 0 10px 10px; /* top corners handled by note bar */
    max-height: 460px; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}
.import-preview-table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.import-preview-table-wrap::-webkit-scrollbar-track { background: #f1f5f9; }
.import-preview-table-wrap::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
/* When there's no note bar above, restore full radius */
.import-preview-wrap--no-note .import-preview-table-wrap { border-radius: 10px; }
.import-preview-table {
    border-collapse: collapse; width: max-content; min-width: 100%;
    font-size: 0.84rem;
}
.import-preview-table thead { position: sticky; top: 0; z-index: 2; }
.import-preview-th {
    background: #f8fafc; border: 1px solid #e2e8f0;
    padding: 0; white-space: nowrap; min-width: 120px; max-width: 240px;
}
.import-preview-th--virtual { background: #f0fdfa; }
.import-preview-th--active  { background: #eff6ff; outline: 2px solid var(--primary, #204164); outline-offset: -2px; }
.import-preview-th-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px; padding: 8px 10px;
}
.import-preview-th-name {
    font-weight: 600; color: #1e293b; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.import-preview-virtual-name {
    font-weight: 600; color: #0f766e; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.import-preview-source-tag {
    font-size: 0.72rem; color: #64748b; white-space: nowrap;
    display: flex; align-items: center; gap: 2px;
}
.import-col-split-btn {
    background: none; border: 1px solid #cbd5e1; border-radius: 4px;
    padding: 2px 4px; cursor: pointer; color: #64748b; line-height: 1;
    flex-shrink: 0; transition: background 0.15s, color 0.15s;
}
.import-col-split-btn:hover, .import-col-split-btn.is-active {
    background: var(--primary, #204164); color: #fff; border-color: var(--primary, #204164);
}
.import-col-split-btn .material-icons { font-size: 15px; vertical-align: middle; }
.import-col-edit-split {
    background: none; border: none; cursor: pointer; color: #94a3b8;
    padding: 0; line-height: 1; margin-left: 3px;
}
.import-col-edit-split:hover { color: var(--primary, #204164); }
.import-col-edit-split .material-icons { font-size: 12px; vertical-align: middle; }
.import-col-remove-split {
    background: none; border: none; cursor: pointer; color: #94a3b8;
    padding: 0; line-height: 1; margin-left: 2px;
}
.import-col-remove-split:hover { color: var(--error, #e53e3e); }
.import-col-remove-split .material-icons { font-size: 13px; vertical-align: middle; }
.import-preview-td {
    border: 1px solid #f1f5f9; padding: 6px 10px;
    white-space: nowrap; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; color: #334155;
}
.import-preview-td--virtual { background: #f0fdfa; }
.import-preview-table tbody tr:nth-child(even) .import-preview-td { background: #fafafa; }
.import-preview-table tbody tr:nth-child(even) .import-preview-td--virtual { background: #e6faf7; }

/* Split config panel (appears above the preview table) */
.import-split-config-panel {
    border: 2px solid var(--primary, #204164); border-radius: 10px;
    background: #fff; margin-bottom: 12px; overflow: hidden;
}
.import-split-config-title {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: var(--primary, #204164); color: #fff;
    font-weight: 600; font-size: 0.92rem;
}
.import-split-config-title .material-icons { font-size: 18px; }
.import-split-config-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.import-split-config-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-split-config-label { font-size: 0.82rem; font-weight: 600; color: #475569; }
#import-split-delimiter-input {
    width: 80px; padding: 6px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: 0.9rem; font-family: monospace;
    text-align: center;
}
.import-split-preview-wrap { display: flex; flex-direction: column; gap: 6px; }
.import-split-preview-table-wrap { overflow-x: auto; border-radius: 6px; border: 1px solid #e2e8f0; }
.import-split-preview-table { border-collapse: collapse; font-size: 0.83rem; width: max-content; }
.import-split-preview-cell {
    border: 1px solid #e2e8f0; padding: 4px 10px;
    background: #f0fdfa; color: #134e4a; font-family: monospace;
}
.import-split-partnames { display: flex; flex-direction: column; gap: 6px; }
.import-split-partname-row { display: flex; align-items: center; gap: 10px; }
.import-split-partname-num {
    font-size: 0.78rem; font-weight: 700; color: var(--primary, #204164);
    text-transform: uppercase; letter-spacing: 0.04em; width: 50px; flex-shrink: 0;
}
.import-split-partname-input {
    flex: 1; padding: 6px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: 0.88rem;
}
.import-split-config-actions {
    display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px;
}

/* ── Preview Zoom Controls ───────────────────────────────────────────────── */
.import-preview-zoom {
    display: flex; align-items: center; gap: 4px;
    margin-left: 12px; border-left: 1px solid #bfdbfe; padding-left: 12px;
}
.import-preview-zoom-btn {
    background: none; border: 1px solid #bfdbfe; border-radius: 4px;
    padding: 1px 8px; cursor: pointer; color: #1e40af; font-size: 0.82rem; line-height: 1.6;
    font-weight: 700;
}
.import-preview-zoom-btn:hover { background: #dbeafe; }
.import-preview-zoom-level {
    font-size: 0.78rem; color: #1e40af; font-weight: 600;
    min-width: 38px; text-align: center;
}
/* Format conversion failure indicators */
.import-preview-fmt-warn {
    display: inline-flex; align-items: center; gap: 4px;
    color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600;
    margin-left: 8px;
}
.import-preview-fmt-warn .material-icons { font-size: 14px; }
.import-preview-td--fmt-error {
    background: #fffbeb !important; color: #b45309 !important;
    font-style: italic;
}
.import-preview-table tbody tr:nth-child(even) .import-preview-td--fmt-error {
    background: #fef9c3 !important;
}
/* Warning bar shown at bottom of Step 2 when format failures exist */
.import-fmt-warning-bar {
    margin: 16px 0 0;
    padding: 14px 18px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #78350f;
    font-size: 0.875rem;
    line-height: 1.5;
}
.import-fmt-warning-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px;
}
.import-fmt-warning-actions .btn {
    padding: 6px 14px; font-size: 0.82rem;
}

/* ==========================================================================
   INVOICES & PAYMENTS MODULE
   ========================================================================== */

/* ── Hero ── */
.inv-hero {
    background: #fff; border-bottom: 1px solid #e2e8f0;
    padding: 0 32px; flex-shrink: 0;
}
.inv-hero-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 12px; gap: 20px;
}
.inv-hero-identity { display: flex; align-items: center; gap: 12px; }
.inv-hero-icon {
    font-size: 28px; color: var(--success);
    background: rgba(56,161,105,0.08);
    padding: 8px; border-radius: 10px;
}
.inv-hero-title { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
.inv-hero-sub { font-size: 0.75rem; color: #64748b; font-weight: 500; }

/* ── Stats Bar ── */
.inv-stats-bar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; padding: 0 0 14px;
}
.inv-stat-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px 16px; text-align: center;
}
.inv-stat-value { font-size: 1.4rem; font-weight: 800; }
.inv-stat-label { font-size: 0.72rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; margin-top: 2px; }

/* ── Control Bar ── */
.inv-control-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 14px; gap: 16px; flex-wrap: wrap;
}
.inv-chips { display: flex; gap: 6px; }
.inv-chip {
    padding: 5px 14px; border-radius: 20px; border: 1px solid #e2e8f0;
    background: #fff; color: #64748b; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.inv-chip:hover { background: #f1f5f9; }
.inv-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.inv-controls { display: flex; align-items: center; gap: 10px; }
.inv-search-wrap {
    display: flex; align-items: center; gap: 6px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 0 10px; width: 220px;
}
.inv-search-wrap .material-icons { color: #94a3b8; font-size: 18px; }
.inv-search-wrap input {
    border: none; background: transparent; outline: none;
    padding: 7px 0; font-size: 0.82rem; color: #334155; width: 100%;
}
.inv-count-badge {
    background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 12px; min-width: 24px; text-align: center;
}

/* ── Body ── */
.inv-body { flex: 1; overflow-y: auto; padding: 24px 32px; }

/* ── Table ── */
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table thead th {
    background: #f8fafc; padding: 10px 14px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;
    border-bottom: 2px solid #e2e8f0; text-align: left; white-space: nowrap;
}
.inv-table thead th:hover { color: var(--primary); }
.inv-row { cursor: pointer; transition: background 0.15s; }
.inv-row:hover { background: #f8fafc; }
.inv-row td {
    padding: 12px 14px; border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem; color: #334155;
}
.inv-col-id code {
    background: #f1f5f9; padding: 3px 8px; border-radius: 4px;
    font-weight: 700; font-size: 0.78rem; color: var(--primary);
}
.inv-col-amount, .inv-col-paid, .inv-col-balance { font-weight: 600; font-family: monospace; }
.inv-col-balance { color: var(--warning, #dd6b20); }

/* ── Status Badges ── */
.inv-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px;
}
.inv-badge-issued { background: #fef9c3; color: #a16207; }
.inv-badge-partial { background: #ffedd5; color: #c2410c; }
.inv-badge-paid { background: #dcfce7; color: #16a34a; }
.inv-badge-void { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }

/* ── Detail View ── */
.inv-detail-wrap { max-width: 900px; }
.inv-detail-hero {
    display: flex; justify-content: space-between; align-items: flex-start;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 24px 28px; margin-bottom: 20px; gap: 20px;
}
.inv-detail-id { font-size: 0.78rem; font-weight: 700; color: var(--primary); font-family: monospace; margin-bottom: 6px; }
.inv-detail-name { font-size: 1.2rem; font-weight: 800; color: #1e293b; }
.inv-detail-meta { font-size: 0.82rem; color: #64748b; margin-top: 2px; }
.inv-detail-event { font-size: 0.82rem; color: #475569; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.inv-detail-hero-right { text-align: right; }
.inv-detail-total { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.inv-detail-balance { font-size: 0.85rem; color: #64748b; margin-bottom: 8px; }

.inv-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 700px) { .inv-detail-grid { grid-template-columns: 1fr; } }
.inv-detail-section {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px;
}
.inv-detail-section h4 {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: #64748b;
    letter-spacing: 0.05em; margin: 0 0 12px;
}

/* ── Line Items Table ── */
.inv-line-items { width: 100%; border-collapse: collapse; }
.inv-line-items th {
    font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase;
    padding: 6px 0; border-bottom: 1px solid #e2e8f0; text-align: left;
}
.inv-line-items td { padding: 8px 0; font-size: 0.85rem; border-bottom: 1px solid #f1f5f9; }
.inv-line-items tfoot td { border-bottom: none; padding-top: 10px; }

/* ── Payment Timeline ── */
.inv-payment-entry {
    display: flex; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.inv-payment-entry:last-child { border-bottom: none; }
.inv-payment-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--success); flex-shrink: 0; margin-top: 6px;
}

/* ── Action Buttons ── */
.inv-detail-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: 16px; border-top: 1px solid #e2e8f0;
}

/* ── Column Format Selector ──────────────────────────────────────────────── */
.import-col-format-row {
    padding: 4px 8px 6px;
    border-top: 1px solid #e2e8f0;
}
.import-col-format-select {
    width: 100%; font-size: 0.72rem; padding: 3px 5px;
    border: 1px solid #cbd5e1; border-radius: 4px;
    background: #fff; color: #475569; cursor: pointer;
    /* suppress default browser arrow chrome on very small selects */
    appearance: auto;
}
.import-col-format-select:focus { outline: 2px solid var(--primary, #204164); outline-offset: 0; }
/* When a non-raw format is chosen, tint the column header */
.import-preview-th--formatted { background: #fefce8 !important; }
.import-preview-th--virtual.import-preview-th--formatted { background: #ecfdf5 !important; }
/* Formatted cell values get a subtle highlight so the user sees the transform */
.import-preview-td--formatted { color: #0f766e; font-style: italic; }

/* ── Phone Extension Fields ──────────────────────────────────────────────── */
.phone-ext-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.78rem; color: #64748b; cursor: pointer;
    margin-top: 5px; user-select: none;
}
.phone-ext-toggle input[type="checkbox"] { cursor: pointer; accent-color: var(--primary, #204164); }
.phone-ext-row { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.phone-ext-row label { font-size: 0.78rem; color: #64748b; white-space: nowrap; }
.phone-ext-input { width: 90px !important; }

/* ── Validation Warnings ─────────────────────────────────────────────────── */
.import-val-warn {
    display: inline-flex; align-items: center;
    margin-left: 5px; vertical-align: middle;
    color: #b45309; cursor: help;
}
.import-val-warn .material-icons { font-size: 15px; }
.import-val-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-weight: 600;
    color: #b45309; background: #fef3c7;
    border: 1px solid #fde68a; border-radius: 4px;
    padding: 2px 7px; margin-top: 3px; cursor: help;
}
.import-val-badge .material-icons { font-size: 13px; }

/* ============================================================
   MEMBER ACCOUNTS PANEL
   ============================================================ */
.acct-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.acct-stat-chip {
    flex: 1;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.acct-stat-chip .material-icons { font-size: 24px; margin-bottom: 4px; }
.acct-stat-value { font-size: 1.4em; font-weight: 800; color: #1e293b; }
.acct-stat-label { font-size: 0.75em; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.acct-filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}
.acct-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 12px;
}
.acct-search-wrapper .material-icons { color: #94a3b8; font-size: 20px; }
.acct-search-input {
    border: none;
    outline: none;
    padding: 10px 8px;
    font-size: 0.9em;
    width: 100%;
    background: transparent;
}
.acct-filter-select {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85em;
    background: #fff;
    color: #334155;
    cursor: pointer;
    min-width: 150px;
}

/* Status pills */
.acct-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.acct-pill .material-icons { font-size: 14px; }
.acct-pill--active { background: #f0fff4; color: #22543d; }
.acct-pill--disabled { background: #fff5f5; color: #c53030; }
.acct-pill--none { background: #f7fafc; color: #718096; }
.acct-pill--guest { background: #fffaf0; color: #c05621; }

/* Action buttons in table rows */
.acct-action-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    color: #64748b;
    font-size: 0.78em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.acct-action-btn:hover { border-color: var(--primary); color: var(--primary); background: #f0f4ff; }
.acct-action-btn .material-icons { font-size: 16px; }
.acct-action-btn--danger:hover { border-color: #e53e3e; color: #e53e3e; background: #fff5f5; }
.acct-action-btn--success:hover { border-color: #38a169; color: #38a169; background: #f0fff4; }

.acct-actions-cell {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Info banner */
.acct-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.85em;
    color: #1e40af;
    line-height: 1.5;
}
.acct-info-banner .material-icons { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

/* Sortable headers */
.acct-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.acct-sortable:hover { color: var(--primary); }
.acct-sort-icon { font-size: 16px !important; vertical-align: -3px; color: #cbd5e0; }
.acct-sortable.sort-asc .acct-sort-icon,
.acct-sortable.sort-desc .acct-sort-icon { color: var(--primary); }

/* Bulk toolbar */
.acct-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
}
.acct-bulk-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88em;
    font-weight: 700;
    color: #1e40af;
    margin-right: auto;
}
.acct-bulk-info .material-icons { font-size: 20px; }

/* Clickable name */
.acct-name-link { cursor: pointer; color: #1e293b; text-decoration: none; }
.acct-name-link:hover { color: var(--primary); text-decoration: underline; }

/* Stat chip hover */
.acct-stat-chip:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.acct-stat-chip { transition: all 0.15s; }

/* Table tweaks */
#acct-table td { vertical-align: middle; }
#acct-table .acct-name-cell { font-weight: 600; color: #1e293b; }
#acct-table .acct-email-cell { color: #64748b; font-size: 0.88em; }
#acct-table .acct-role-cell { font-size: 0.85em; color: #4a5568; }
#acct-table .acct-date-cell { font-size: 0.82em; color: #94a3b8; }
#acct-table .acct-school-cell { font-size: 0.85em; color: #4a5568; }

/* Pulse animation for outstanding balance alert */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(229, 62, 62, 0); }
}

/* ============================================================
   EMAIL TEMPLATE PANEL
   ============================================================ */
.etpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.etpl-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s;
    cursor: pointer;
}
.etpl-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.etpl-card-header {
    background: linear-gradient(135deg, #1a365d 0%, #2a4a7f 100%);
    padding: 16px 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.etpl-card-header h4 { margin: 0; font-size: 0.95em; font-weight: 700; }
.etpl-card-type {
    font-size: 0.7em;
    background: rgba(255,255,255,0.15);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.etpl-card-body {
    padding: 14px 18px;
}
.etpl-card-subject {
    font-size: 0.85em;
    color: #475569;
    margin-bottom: 8px;
    font-style: italic;
}
.etpl-card-meta {
    font-size: 0.75em;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}
.etpl-card-actions {
    padding: 10px 18px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.etpl-card-actions button {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    color: #64748b;
    font-size: 0.78em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.etpl-card-actions button:hover { border-color: var(--primary); color: var(--primary); background: #f0f4ff; }
.etpl-card-actions button.etpl-delete:hover { border-color: #e53e3e; color: #e53e3e; background: #fff5f5; }
.etpl-card-actions button .material-icons { font-size: 15px; }

/* Default badge */
.etpl-default-badge {
    font-size: 0.7em;
    background: #f0fff4;
    color: #22543d;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

/* Editor layout */
.etpl-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1200px) {
    .etpl-editor-layout { grid-template-columns: 1fr; }
}
.etpl-editor-form { min-width: 0; }
.etpl-preview-pane { min-width: 0; position: sticky; top: 80px; }

/* Quill overrides */
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0 !important; border-color: #e2e8f0 !important; }
.ql-container.ql-snow { border-color: #e2e8f0 !important; }
#etpl-body-editor .ql-editor { min-height: 180px; font-family: inherit; font-size: 0.95em; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════
   COMMUNICATIONS HUB
   ══════════════════════════════════════════════════════════════════════════ */

/* Connection status dot */
.cc-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cc-disconnected { background: #e53e3e; }
.cc-connected { background: #38a169; }

/* Tab bar */
.cc-tab-bar { display: flex; gap: 4px; padding: 0 0 20px; border-bottom: 1px solid #e2e8f0; margin-bottom: 20px; }
.cc-tab { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border: none; background: transparent; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 0; transition: all 0.15s; }
.cc-tab:hover { color: #334155; background: #f8fafc; }
.cc-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cc-tab .material-icons { font-size: 18px; }

/* Tab content */
.cc-tab-content { display: none; }
.cc-tab-content.active { display: block; }

/* Section header */
.cc-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* Stats row */
.cc-stats-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cc-stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; flex: 1; min-width: 140px; text-align: center; }
.cc-stat-card .material-icons { font-size: 28px; color: var(--primary); margin-bottom: 8px; }
.cc-stat-num { font-size: 28px; font-weight: 700; color: #1e293b; }
.cc-stat-label { font-size: 12px; color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Reconciliation */
.cc-recon-container { display: flex; flex-direction: column; gap: 20px; }
.cc-recon-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.cc-recon-header { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 14px; border-bottom: 1px solid #e2e8f0; }
.cc-recon-header .material-icons { font-size: 20px; }
.cc-recon-desc { color: #64748b; font-weight: 400; }
.cc-recon-matched .material-icons { color: #38a169; }
.cc-recon-review .material-icons { color: #dd6b20; }
.cc-recon-fsonly .material-icons { color: var(--primary); }
.cc-recon-cconly .material-icons { color: #64748b; }

.cc-recon-list { padding: 0; }
.cc-recon-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.cc-recon-row:last-child { border-bottom: none; }
.cc-recon-review-row { flex-wrap: wrap; }
.cc-recon-name { font-weight: 500; min-width: 180px; }
.cc-recon-email { color: #64748b; flex: 1; }
.cc-recon-badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 500; white-space: nowrap; }
.cc-badge-matched { background: #dcfce7; color: #166534; }
.cc-badge-name { background: #fef3c7; color: #92400e; }
.cc-badge-fuzzy { background: #fed7aa; color: #9a3412; }
.cc-badge-new { background: #dbeafe; color: #1e40af; }
.cc-badge-cconly { background: #f1f5f9; color: #475569; }
.cc-recon-more { padding: 10px 20px; color: #64748b; font-size: 12px; font-style: italic; }
.cc-recon-actions { display: flex; gap: 6px; margin-left: auto; }
.cc-recon-result { text-align: center; padding: 48px 24px; }
.cc-recon-result h3 { margin: 12px 0 8px; }

.cc-progress { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 48px; color: #64748b; font-size: 15px; }

/* Spin animation */
@keyframes cc-spin { to { transform: rotate(360deg); } }
.spin { animation: cc-spin 1s linear infinite; }

/* Small buttons */
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn-sm:hover { background: #f8fafc; }
.btn-sm.btn-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.btn-sm.btn-success:hover { background: #bbf7d0; }
.btn-sm.btn-danger { color: #dc2626; border-color: #fecaca; }
.btn-sm.btn-danger:hover { background: #fef2f2; }

/* Lists grid */
.cc-lists-grid { display: flex; flex-direction: column; gap: 8px; }
.cc-list-card { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.cc-list-name { font-weight: 600; font-size: 15px; color: #1e293b; }
.cc-list-meta { font-size: 13px; color: #64748b; margin-top: 2px; }
.cc-list-actions { display: flex; gap: 6px; }

/* Campaigns grid */
.cc-campaigns-grid { display: flex; flex-direction: column; gap: 8px; }
.cc-campaign-card { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.cc-campaign-name { font-weight: 600; font-size: 15px; color: #1e293b; }
.cc-campaign-meta { font-size: 13px; color: #64748b; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.cc-campaign-status { font-size: 11px; padding: 2px 10px; border-radius: 99px; font-weight: 600; }
.cc-status-draft { background: #f1f5f9; color: #475569; }
.cc-status-scheduled { background: #dbeafe; color: #1e40af; }
.cc-status-sent { background: #dcfce7; color: #166534; }
.cc-campaign-actions { display: flex; gap: 6px; }

/* Campaign filter chips */
.cc-campaign-filters { display: flex; gap: 6px; margin-bottom: 16px; }
.cc-filter-chip { padding: 6px 16px; border-radius: 99px; border: 1px solid #e2e8f0; background: #fff; font-size: 13px; cursor: pointer; color: #64748b; }
.cc-filter-chip:hover { background: #f8fafc; }
.cc-filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Empty state */
.cc-empty-state { text-align: center; padding: 60px 24px; color: #94a3b8; }
.cc-empty-state p { margin-top: 12px; font-size: 14px; }

/* Campaign stats modal */
.cc-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cc-stat-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.cc-stat-card .material-icons { font-size: 22px; color: #94a3b8; }
.cc-stat-val { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.cc-stat-lbl { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.cc-stat-sends .material-icons { color: #3b82f6; }
.cc-stat-sends { border-color: #bfdbfe; background: #eff6ff; }
.cc-stat-opens .material-icons { color: #10b981; }
.cc-stat-opens { border-color: #a7f3d0; background: #ecfdf5; }
.cc-stat-clicks .material-icons { color: #8b5cf6; }
.cc-stat-clicks { border-color: #c4b5fd; background: #f5f3ff; }
.cc-stat-bounces .material-icons { color: #f59e0b; }
.cc-stat-bounces { border-color: #fde68a; background: #fffbeb; }
.cc-stat-unsubs .material-icons { color: #ef4444; }
.cc-stat-unsubs { border-color: #fecaca; background: #fef2f2; }
.cc-stat-spam .material-icons { color: #dc2626; }
.cc-stat-spam { border-color: #fca5a5; background: #fef2f2; }

.cc-rate-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-rate-label { font-size: 0.82rem; color: #475569; width: 80px; flex-shrink: 0; }
.cc-rate-bar-bg { flex: 1; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.cc-rate-bar { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.cc-rate-opens { background: #10b981; }
.cc-rate-clicks { background: #8b5cf6; }
.cc-rate-bounces { background: #f59e0b; }
.cc-rate-pct { font-size: 0.82rem; font-weight: 600; color: #1e293b; width: 48px; text-align: right; }

@media (max-width: 480px) { .cc-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* CC Overview Tab */
.cc-ov-status-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; margin-bottom: 20px;
}
.cc-ov-status-icon { width: 48px; height: 48px; border-radius: 50%; background: #f8fafc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-ov-status-icon .material-icons { font-size: 28px; }
.cc-ov-status-title { font-weight: 700; font-size: 1.05rem; color: #1e293b; }
.cc-ov-status-sub { font-size: 0.82rem; color: #64748b; margin-top: 2px; }

.cc-ov-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cc-ov-metric-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 20px 12px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; text-align: center;
}
.cc-ov-metric-icon { font-size: 28px; }
.cc-ov-metric-val { font-size: 1.6rem; font-weight: 700; color: #1e293b; }
.cc-ov-metric-label { font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

.cc-ov-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cc-ov-action-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 12px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; cursor: pointer; transition: all 0.15s;
    font-size: 0.82rem; font-weight: 500; color: #334155; font-family: inherit;
}
.cc-ov-action-card:hover:not(:disabled) { background: #eff6ff; border-color: #bfdbfe; color: var(--primary); }
.cc-ov-action-card:disabled { opacity: 0.4; cursor: not-allowed; }
.cc-ov-action-card .material-icons { font-size: 24px; color: var(--primary); }

.cc-ov-recent { display: flex; flex-direction: column; gap: 4px; }
.cc-ov-recent-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 8px; cursor: pointer; transition: background 0.1s;
}
.cc-ov-recent-item:hover { background: #f8fafc; }
.cc-ov-recent-info { flex: 1; min-width: 0; }
.cc-ov-recent-name { font-weight: 600; font-size: 0.9rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ov-recent-date { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }

@media (max-width: 768px) {
    .cc-ov-metrics { grid-template-columns: repeat(2, 1fr); }
    .cc-ov-actions { grid-template-columns: 1fr; }
}

/* Contact Search */
.cc-contact-search-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 10px; margin-bottom: 16px;
}
.cc-contact-search-input {
    flex: 1; border: none; outline: none; font-size: 0.9rem; font-family: inherit;
    background: transparent; color: #1e293b;
}
.cc-contact-search-input::placeholder { color: #94a3b8; }
.cc-contact-search-clear { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 2px; border-radius: 4px; }
.cc-contact-search-clear:hover { background: #f1f5f9; }

/* Contact Results */
.cc-contact-results-list { display: flex; flex-direction: column; gap: 2px; }
.cc-contact-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 8px; cursor: pointer;
    transition: background 0.1s;
}
.cc-contact-row:hover { background: #f8fafc; }
.cc-contact-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.72rem; flex-shrink: 0;
    letter-spacing: 0.5px;
}
.cc-contact-row-info { flex: 1; min-width: 0; }
.cc-contact-row-name { font-weight: 600; font-size: 0.88rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-contact-row-email { font-size: 0.78rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-contact-list-badge { font-size: 0.68rem; padding: 2px 8px; background: #eff6ff; color: #2563eb; border-radius: 99px; font-weight: 500; }

/* Contact Detail Panel */
.cc-contact-detail {
    position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 90vw;
    background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.12); z-index: 9500;
    display: flex; flex-direction: column; animation: slideInRight 0.2s ease-out;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.cc-contact-detail-header {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.cc-contact-detail-body { flex: 1; overflow-y: auto; padding: 0; }
.cc-detail-hero { text-align: center; padding: 28px 20px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.cc-detail-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; margin-bottom: 10px;
}
.cc-detail-name { font-weight: 700; font-size: 1.1rem; color: #1e293b; }
.cc-detail-email { font-size: 0.85rem; color: #64748b; margin-top: 2px; }
.cc-detail-section { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
.cc-detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
.cc-detail-value { font-size: 0.9rem; color: #1e293b; }
.cc-detail-field { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.85rem; }
.cc-detail-field-key { color: #64748b; }
.cc-detail-field-val { color: #1e293b; font-weight: 500; }
.cc-detail-list-chip { display: inline-block; font-size: 0.75rem; padding: 2px 10px; background: #eff6ff; color: #2563eb; border-radius: 99px; margin: 2px 4px 2px 0; font-weight: 500; }

/* List Detail Panel */
.cc-list-detail {
    position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 90vw;
    background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.12); z-index: 9400;
    display: flex; flex-direction: column; animation: slideInRight 0.2s ease-out;
}
.cc-list-detail-header {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.cc-list-detail-count { font-size: 0.78rem; color: #64748b; margin-left: auto; }
.cc-list-detail-search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid #e2e8f0;
}
.cc-list-detail-search input {
    flex: 1; border: none; outline: none; font-size: 0.85rem; font-family: inherit;
    background: transparent; color: #1e293b;
}
.cc-list-detail-search input::placeholder { color: #94a3b8; }
.cc-list-detail-body { flex: 1; overflow-y: auto; padding: 8px; }

/* Campaign editor */
.cc-editor-header { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 24px; }
.cc-editor-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1200px) { .cc-editor-body { grid-template-columns: 1fr; } }
.cc-editor-form { display: flex; flex-direction: column; gap: 12px; }

.cc-field-label { font-size: 13px; font-weight: 600; color: #334155; margin-top: 4px; }
.cc-input { padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; }
.cc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(32,65,100,0.1); }

.cc-target-lists { display: flex; gap: 8px; }
.cc-target-lists select { flex: 1; }
.cc-selected-lists { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.cc-list-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #dbeafe; color: #1e40af; border-radius: 99px; font-size: 12px; font-weight: 500; }

.cc-editor-preview { position: sticky; top: 80px; }
.cc-preview-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #64748b; margin-bottom: 12px; }
.cc-preview-frame { background: #e2e8f0; border-radius: 8px; padding: 16px; max-height: 600px; overflow-y: auto; }
.cc-preview-frame > div { background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Reconciliation summary bar */
.cc-recon-summary { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cc-recon-summary-item { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; font-size: 13px; }
.cc-recon-summary-matched { background: #dcfce7; color: #166534; }
.cc-recon-summary-review { background: #fef3c7; color: #92400e; }
.cc-recon-summary-fsonly { background: #dbeafe; color: #1e40af; }
.cc-recon-summary-cconly { background: #f1f5f9; color: #475569; }
.cc-recon-summary-item .material-icons { font-size: 18px; }

/* Reconciliation compare layout */
.cc-recon-compare { display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; }
.cc-recon-compare-side { min-width: 200px; }
.cc-recon-compare-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; font-weight: 600; margin-bottom: 2px; }
.cc-recon-compare-name { font-weight: 600; font-size: 14px; color: #1e293b; }
.cc-recon-compare-email { font-size: 13px; color: #64748b; }
.cc-recon-compare-arrow { color: #cbd5e1; }
.cc-recon-compare-arrow .material-icons { font-size: 20px; }

/* Collapsible sections */
.cc-collapsed { display: none !important; }

/* Execute bar */
.cc-recon-execute-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid #e2e8f0; margin-top: 8px; flex-wrap: wrap; }
.cc-recon-execute-summary { font-size: 13px; color: #64748b; }

/* Template ownership tabs */
.tpl-ownership-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tpl-own-tab { padding: 8px 18px; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s; }
.tpl-own-tab:hover { background: #f8fafc; color: #334155; }
.tpl-own-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Template ownership badge on cards */
.tpl-owner-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #64748b; padding: 2px 8px; background: #f1f5f9; border-radius: 99px; }
.tpl-owner-badge .material-icons { font-size: 12px; }
.tpl-owner-badge.tpl-mine { color: var(--primary); background: #dbeafe; }
.tpl-owner-badge.tpl-shared { color: #7c3aed; background: #ede9fe; }

/* Share button on cards */
.tpl-share-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; font-size: 11px; color: #64748b; cursor: pointer; }
.tpl-share-btn:hover { background: #f8fafc; }

/* Share modal */
.share-modal-body { padding: 20px; }
.share-email-row { display: flex; gap: 8px; margin-bottom: 12px; }
.share-email-row input { flex: 1; }
.share-email-row select { width: 120px; }
.share-list { margin-top: 16px; }
.share-list-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.share-list-item:last-child { border-bottom: none; }
.share-role-badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #f1f5f9; color: #475569; }

/* Password validation rules */
.pass-rule { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e53e3e; padding: 2px 0; }
.pass-rule .material-icons { font-size: 14px; }

/* Campaign Quill editor overrides */
#cc-campaign-editor-quill .ql-editor { min-height: 250px; font-family: inherit; font-size: 0.95em; line-height: 1.7; }

/* ============================================================
   AG GRID — OECTA THEME OVERRIDES
   ============================================================ */

/* Container sizing */
#reg-ag-grid {
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

/* Header styling — match OECTA design system */
#reg-ag-grid .ag-header {
    background: #f8fafc;
    border-bottom: 2px solid #edf2f7;
}

#reg-ag-grid .ag-header-cell {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 12px;
}

#reg-ag-grid .ag-header-cell:hover {
    background: #f1f5f9 !important;
}

#reg-ag-grid .ag-header-cell-sorted-asc,
#reg-ag-grid .ag-header-cell-sorted-desc {
    color: var(--primary, #204164);
}

/* Row styling */
#reg-ag-grid .ag-row {
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    transition: background 0.15s;
}

#reg-ag-grid .ag-row:hover {
    background-color: #fcfdfe !important;
}

#reg-ag-grid .ag-row-attended {
    background-color: #f0fff4 !important;
}

#reg-ag-grid .ag-row-attended:hover {
    background-color: #e6ffed !important;
}

#reg-ag-grid .ag-row-cancelled {
    background-color: #f8fafc;
    opacity: 0.7;
}

#reg-ag-grid .ag-row-cancelled:hover {
    background-color: #fffaf0 !important;
    opacity: 1;
}

#reg-ag-grid .ag-row-sub-registrant {
    background-color: #fafbff;
}

/* Cell styling */
#reg-ag-grid .ag-cell {
    display: flex;
    align-items: center;
    padding: 0 12px;
    line-height: 1.4;
}

/* Checkbox column */
#reg-ag-grid .ag-selection-checkbox,
#reg-ag-grid .ag-header-select-all {
    accent-color: var(--primary, #204164);
}

#reg-ag-grid .ag-checkbox-input-wrapper input {
    accent-color: var(--primary, #204164);
}

/* Sort icons */
#reg-ag-grid .ag-sort-ascending-icon,
#reg-ag-grid .ag-sort-descending-icon {
    color: var(--accent, #f39c12);
}

/* Column resize handle */
#reg-ag-grid .ag-header-cell-resize {
    width: 4px;
}

#reg-ag-grid .ag-header-cell-resize::after {
    background-color: transparent;
    transition: background 0.15s;
}

#reg-ag-grid .ag-header-cell-resize:hover::after {
    background-color: var(--accent, #f39c12) !important;
}

/* Selected row */
#reg-ag-grid .ag-row-selected {
    background-color: #eff6ff !important;
}

/* No rows overlay */
#reg-ag-grid .ag-overlay-no-rows-center {
    font-size: 0.9rem;
    color: #94a3b8;
    padding: 40px;
}

/* Pinned columns subtle shadow */
#reg-ag-grid .ag-pinned-left-header,
#reg-ag-grid .ag-pinned-left-cols-container {
    box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}

#reg-ag-grid .ag-pinned-right-header,
#reg-ag-grid .ag-pinned-right-cols-container {
    box-shadow: -2px 0 4px rgba(0,0,0,0.04);
}


/* ============================================================
   MOBILE CARD VIEW — REGISTRANT DIRECTORY
   ============================================================ */

.reg-mobile-cards {
    display: none;
    padding: 8px;
    gap: 8px;
}

@media (max-width: 767px) {
    #reg-ag-grid {
        display: none !important;
    }
    .reg-mobile-cards {
        display: flex !important;
        flex-direction: column;
    }
}

.reg-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.reg-card:active {
    border-color: var(--primary, #204164);
    box-shadow: 0 2px 12px rgba(32, 65, 100, 0.1);
}

.reg-card--attended {
    background: #f0fff4;
    border-color: #c6f6d5;
}

.reg-card--cancelled {
    opacity: 0.65;
    background: #f8fafc;
}

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

.reg-card-name {
    font-weight: 700;
    color: var(--primary, #204164);
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-card-status {
    flex-shrink: 0;
}

.reg-card-email {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 8px;
}

.reg-card-dot {
    color: #cbd5e0;
    font-weight: 700;
}

.reg-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.reg-card-actions .btn-sidebar-tiny {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 6px 12px;
}

.rmc-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 0.9rem;
}
.rmc-empty .material-icons {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    color: #cbd5e0;
}

.rmc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s ease;
}
.rmc-card:active { box-shadow: 0 2px 12px rgba(32,65,100,0.10); }

/* Cancelled card */
.rmc-card.rmc-cancelled { opacity: 0.55; }
.rmc-card.rmc-cancelled .rmc-name { text-decoration: line-through; }

/* Sub-registrant card */
.rmc-card.rmc-sub {
    margin-left: 18px;
    border-left: 3px solid var(--accent);
}

/* Header: name + toggle */
.rmc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.rmc-name-block { flex: 1; min-width: 0; }
.rmc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    word-break: break-word;
}
.rmc-email {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
    word-break: break-all;
}
.rmc-toggle { flex-shrink: 0; }

/* Meta row */
.rmc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 8px 0;
    font-size: 12px;
    color: #64748b;
}
.rmc-meta-sep { color: #cbd5e0; }
.rmc-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}
.rmc-pill.rmc-pill-guest { background: #fef3c7; color: #92400e; }
.rmc-pill.rmc-pill-cancelled { background: #fee2e2; color: #dc2626; }

/* Icons row */
.rmc-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

/* Payment badge */
.rmc-payment { margin: 6px 0; }
.rmc-pay-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}
.rmc-pay-paid { background: #dcfce7; color: #16a34a; }
.rmc-pay-partial { background: #fef9c3; color: #a16207; }
.rmc-pay-unpaid { background: #fee2e2; color: #dc2626; }
.rmc-pay-free { color: #94a3b8; font-size: 12px; font-weight: 400; }

/* Party badge */
.rmc-party {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: #dbeafe;
    color: #1e40af;
    margin: 4px 0;
}
.rmc-party-sub {
    font-size: 11px;
    color: #94a3b8;
    margin: 4px 0;
}

/* Actions row */
.rmc-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.rmc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s;
}
.rmc-action-btn:active { background: #f1f5f9; }
.rmc-action-btn .material-icons { font-size: 16px; }
.rmc-action-btn.rmc-btn-view { color: var(--primary); border-color: var(--primary); }
.rmc-action-btn.rmc-btn-cancel { color: var(--error); border-color: var(--error); }
.rmc-action-btn.rmc-btn-restore { color: var(--success); border-color: var(--success); }
.rmc-action-btn.rmc-btn-pay { color: #a16207; border-color: #a16207; }

/* Arrival time display in card */
.rmc-arrival {
    font-size: 11px;
    color: var(--success);
    font-weight: 600;
    margin-top: 2px;
}