/**
 * AM Cloud - Theme Foundation Bundle
 * Combines _variables.css + _theme-light.css + site.css into a single HTTP request.
 * Generated: 2026-05-11 | DO NOT edit this file directly.
 * Source files: css/_variables.css, css/_theme-light.css, css/site.css
 */

/* ==========================================================================
   _variables.css — Global CSS Variables / Design Tokens
   ========================================================================== */

/**
 * AM Cloud - Global CSS Variables
 * Single source of truth for design tokens
 * Used by all pages, components, and areas
 *
 * Responsive Design System:
 * - Mobile First approach
 * - Fluid typography using clamp()
 * - CSS Container Queries for component-level responsiveness
 * - Breakpoints: sm(640) md(768) lg(1024) xl(1280) 2xl(1536) 3xl(1920) 4k(2560)
 */

:root {
    /* Brand Colors */
    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-accent: #3b82f6;
    --brand-blue: #3b82f6;
    --brand-success: #10b981;
    --brand-warning: #f59e0b;
    --brand-error: #ef4444;
    --brand-info: #06b6d4;

    /* Alpha Variants (for backgrounds) */
    --brand-blue-alpha: rgba(59, 130, 246, 0.1);
    --brand-primary-alpha: rgba(102, 126, 234, 0.1);
    --color-error-alpha: rgba(239, 68, 68, 0.1);
    --color-success-alpha: rgba(16, 185, 129, 0.1);

    /* Semantic Colors */
    --color-error: #ef4444;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-info: #06b6d4;

    /* ==========================================================================
       RESPONSIVE SPACING - Fluid Scale using clamp()
       Formula: clamp(min, preferred, max)
       Preferred uses viewport width for fluid scaling
       ========================================================================== */
    --space-xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);      /* 2-4px */
    --space-sm: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);     /* 4-6px */
    --space-md: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);       /* 8-12px */
    --space-lg: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);          /* 12-16px */
    --space-xl: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);           /* 16-24px */
    --space-2xl: clamp(1.5rem, 1.2rem + 0.75vw, 2rem);         /* 24-32px */
    --space-3xl: clamp(2rem, 1.5rem + 1vw, 3rem);              /* 32-48px */
    --space-4xl: clamp(3rem, 2rem + 1.5vw, 4rem);              /* 48-64px */

    /* ==========================================================================
       RESPONSIVE TYPOGRAPHY - Fluid Font Sizes using clamp()
       Base: 16px at 1920px viewport
       Scales down to 14px at 320px, up to 18px at 3840px
       ========================================================================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Cascadia Code', 'Consolas', 'Monaco', monospace;

    /* Fluid font sizes - scale with viewport */
    --font-size-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);     /* 10-12px */
    --font-size-sm: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem); /* 11-13px */
    --font-size-base: clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem);   /* 12-15px */
    --font-size-lg: clamp(0.8125rem, 0.75rem + 0.25vw, 1rem);      /* 13-16px */
    --font-size-xl: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);   /* 15-18px */
    --font-size-2xl: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);        /* 18-24px */
    --font-size-3xl: clamp(1.375rem, 1.2rem + 0.5vw, 1.875rem);    /* 22-30px */
    --font-size-4xl: clamp(1.75rem, 1.5rem + 0.75vw, 2.5rem);      /* 28-40px */
    --font-size-5xl: clamp(2.25rem, 1.8rem + 1vw, 3.5rem);         /* 36-56px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ==========================================================================
       RESPONSIVE LAYOUT DIMENSIONS
       ========================================================================== */
    /* Sidebar widths - fluid based on viewport */
    --sidebar-width: clamp(180px, 12vw, 240px);           /* 180-240px */
    --sidebar-collapsed-width: clamp(48px, 3.5vw, 64px);  /* 48-64px */

    /* Navbar height - slightly fluid */
    --navbar-height: clamp(56px, 4vw, 72px);              /* 56-72px */

    /* Content max-width for ultra-wide screens */
    --content-max-width: 2400px;

    /* Container padding - fluid */
    --container-padding: clamp(0.75rem, 1.5vw, 2rem);     /* 12-32px */

    /* ==========================================================================
       BORDER RADIUS - Slightly fluid for larger screens
       ========================================================================== */
    --radius-none: 0;
    --radius-sm: clamp(0.125rem, 0.1rem + 0.05vw, 0.1875rem);  /* 2-3px */
    --radius-md: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);     /* 4-6px */
    --radius-lg: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);     /* 6-8px */
    --radius-xl: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);       /* 8-12px */
    --radius-2xl: clamp(0.75rem, 0.6rem + 0.25vw, 1rem);       /* 12-16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ==========================================================================
       BREAKPOINTS - Extended for all screen sizes
       Use in media queries: @media (min-width: 768px) { }
       ========================================================================== */
    --breakpoint-xs: 480px;   /* Extra small phones */
    --breakpoint-sm: 640px;   /* Large phones */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops (13") */
    --breakpoint-xl: 1280px;  /* Laptops (15") */
    --breakpoint-2xl: 1536px; /* Large laptops / small monitors */
    --breakpoint-3xl: 1920px; /* Full HD monitors */
    --breakpoint-4xl: 2560px; /* 2K / QHD monitors */
    --breakpoint-5xl: 3840px; /* 4K monitors */

    /* ==========================================================================
       GRID SYSTEM - Responsive column counts
       ========================================================================== */
    --grid-columns: 12;
    --grid-gap: var(--space-md);

    /* Auto-fit grid item min/max widths */
    --grid-item-min: 280px;
    --grid-item-max: 1fr;
}

/* ==========================================================================
   _theme-light.css — Light Mode Color Tokens
   ========================================================================== */

/**
 * AM Cloud - Light Theme
 * Light mode color tokens
 */

[data-theme="light"],
:root {
    /* Bootstrap Variable Overrides for Light Mode */
    --bs-body-bg: #ffffff;
    --bs-body-color: #1e293b;
    --background: #ffffff;

    /* Landing Page Background Colors */
    --page-bg: #ffffff;
    --page-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%);
    --surface: #ffffff;
    --surface-alt: #f8fafc;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-gradient-start: #667eea;
    --bg-gradient-end: #764ba2;

    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border: #e2e8f0;
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-focus: var(--brand-accent);

    /* Input Colors */
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-focus: var(--brand-accent);
    --input-placeholder: #94a3b8;
    --input-disabled-bg: #f1f5f9;
    --input-disabled-text: #cbd5e1;

    /* Card/Panel Colors */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: var(--shadow-lg);
    --card-hover-shadow: var(--shadow-xl);

    /* Button Colors */
    --btn-primary-bg: var(--brand-accent);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #2563eb;

    --btn-secondary-bg: #f1f5f9;
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: #e2e8f0;

    /* Navigation/Sidebar */
    --nav-bg: rgba(255, 255, 255, 0.88);
    --nav-bg-solid: rgba(255, 255, 255, 0.97);
    --nav-border: rgba(226, 232, 240, 0.7);
    --nav-shadow: 0 12px 30px -22px rgba(15, 23, 42, 0.45);
    --nav-item-hover: #f8fafc;
    --nav-item-active: #eff6ff;
    --nav-item-active-text: var(--brand-accent);
    --nav-item-active-border: var(--brand-accent);

    /* Status Colors (Semantic) */
    --success-bg: #f0fdf4;
    --success-text: #166534;
    --success-border: #86efac;
    /* Live/online presence dot — vivid green-500, visible on light surfaces.
       --success-text (#166534, green-800) is a readable-text green and is far too
       dark for a small status dot ("barely visible"). */
    --online-dot: #22c55e;

    --warning-bg: #fffbeb;
    --warning-text: #92400e;
    --warning-border: #fde68a;

    --error-bg: #fef2f2;
    --error-text: #991b1b;
    --error-border: #fecaca;

    /* Navbar count badges (chat / tasks / notifications) — same red in both themes */
    --badge-count-bg: #dc2626;
    --badge-count-text: #ffffff;

    --info-bg: #f0f9ff;
    --info-text: #075985;
    --info-border: #bae6fd;

    /* Brand Colors */
    --brand-blue: #3b82f6;
    --brand-blue-light: #60a5fa;
    --brand-indigo: #4338ca;
    --brand-purple: #7c3aed;

    /* Card Gradient for Light Mode */
    --card-gradient: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 255, 0.92));
    --card-gradient-strong: linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(241, 245, 249, 0.95));

    /* Shadow enhancements */
    --shadow-card: 0 4px 12px -4px rgba(15, 23, 42, 0.1);
    --shadow-card-strong: 0 12px 24px -8px rgba(15, 23, 42, 0.2);
}

/* ==========================================================================
   site.css — Global Application Styles
   ========================================================================== */

/* Intentionally minimal so legacy CSS controls the visual theme */

/* ========================================
   GLOBAL FIX: Form Select Dropdown Arrow
   Prevents duplicate/repeating arrow characters
   ======================================== */
.form-select {
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    padding-right: 2.25rem !important;
}

/* Hide default Blazor error UI - using custom reconnection modal */
#blazor-error-ui {
    display: none !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODEwMkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ========================================
   GLOBAL PRINT STYLES FOR ADMIT CARDS
   ======================================== */
@media print {
    /* Hide layout elements */
    .sidebar,
    .top-navbar,
    .navbar,
    nav,
    .nav-sidebar,
    .main-sidebar,
    .layout-sidebar,
    .role-sidebar,
    .page-header,
    .stats-row,
    .filter-bar,
    .table-container,
    .toast-message,
    footer,
    .footer,
    header,
    .header,
    .breadcrumb,
    .btn,
    button:not(.no-print-hide),
    [class*="sidebar"],
    [class*="Sidebar"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide modal overlay background but show content */
    .modal-overlay,
    .print-preview-overlay {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Hide preview header/actions */
    .preview-header,
    .preview-actions,
    .modal-header,
    .modal-footer {
        display: none !important;
    }

    /* Show and position admit card */
    .print-preview-modal,
    .modal-content {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .preview-content,
    .modal-body {
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
    }

    /* Admit card styling for print */
    .admit-card-preview {
        display: block !important;
        visibility: visible !important;
        border: 1px solid #000 !important;
        padding: 20px !important;
        margin: 0 auto !important;
        max-width: 700px !important;
        background: white !important;
    }

    .admit-card-preview * {
        visibility: visible !important;
    }

    /* Main content area should take full width */
    .main-content,
    .content-wrapper,
    .page-content,
    main,
    [class*="content"] {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Ensure colors print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Page settings */
    @page {
        size: A4;
        margin: 10mm;
    }

    /* Body reset for print */
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
}

/* ========================================
   BOOK COVER UPLOAD - Hide native file input
   ======================================== */
.cover-cell input[type="file"],
.cover-placeholder input[type="file"],
.upload-btn input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   Attendance grid — row/column crosshair
   Uses inset box-shadow so P/A cell colours show through
   ======================================== */
.att-row-hl > td,
.att-row-hl > th {
    box-shadow: inset 0 0 0 9999px rgba(79, 70, 229, 0.07);
}
.att-col-hl {
    box-shadow: inset 0 0 0 9999px rgba(79, 70, 229, 0.07);
}
.att-row-hl > .att-col-hl {
    box-shadow: inset 0 0 0 9999px rgba(79, 70, 229, 0.2);
    cursor: cell;
}