/**
 * MusicJuries 2.0 - Unified Stylesheet
 * Copyright (c) Taveren Labs LLC. All rights reserved.
 *
 * This file consolidates all CSS for the MusicJuries application.
 * Tenant theming is handled via CSS custom properties only.
 *
 * Table of Contents:
 * ====================
 * 1.  CSS Custom Properties (Design Tokens)
 * 2.  Reset / Base Styles
 * 3.  Layout (Header, Sidebar, Footer, Main Content)
 * 4.  Typography
 * 5.  Forms and Inputs
 * 6.  Buttons
 * 7.  Tables
 * 8.  Cards and Panels
 * 9.  Modals and Overlays
 * 10. Alerts and Notifications
 * 11. Navigation and Menus
 * 12. Page-Specific Styles
 * 13. Utility Classes
 */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Primary Colors - Tenant Customizable
       ------------------------------------------------------------------------- */
    --primary-color: #4f46e5;
    --primary-color-rgb: 79, 70, 229;
    --primary-dark: #4338ca;
    --primary-light: #6366f1;
    --primary-50: #eef2ff;

    --secondary-color: #14b8a6;
    --secondary-color-rgb: 20, 184, 166;
    --secondary-dark: #0f766e;
    --secondary-light: #2dd4bf;

    --accent-color: #f59e0b;
    --accent-color-rgb: 245, 158, 11;
    --accent-dark: #d97706;
    --accent-light: #fbbf24;

    /* -------------------------------------------------------------------------
       Semantic Colors
       ------------------------------------------------------------------------- */
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --success-light: #d1fae5;
    --success-dark: #065f46;

    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --warning-light: #fef3c7;
    --warning-dark: #92400e;

    --error: #ef4444;
    --error-rgb: 239, 68, 68;
    --error-light: #fee2e2;
    --error-dark: #991b1b;

    --info: #3b82f6;
    --info-rgb: 59, 130, 246;
    --info-light: #dbeafe;
    --info-dark: #1e40af;

    /* -------------------------------------------------------------------------
       Text Colors
       ------------------------------------------------------------------------- */
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-inverse: #ffffff;

    /* -------------------------------------------------------------------------
       Background Colors
       ------------------------------------------------------------------------- */
    --bg-color: #ffffff;
    --bg-alt: #f3f4f6;
    --bg-dark: #e5e7eb;
    --bg-darker: #d1d5db;

    /* -------------------------------------------------------------------------
       Border Colors
       ------------------------------------------------------------------------- */
    --border-color: #e5e7eb;
    --border-dark: #d1d5db;
    --border-light: #f3f4f6;

    /* -------------------------------------------------------------------------
       Shadow Colors
       ------------------------------------------------------------------------- */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-dark: rgba(0, 0, 0, 0.25);

    /* -------------------------------------------------------------------------
       Sidebar/Navigation Colors - Tenant Customizable
       ------------------------------------------------------------------------- */
    --sidebar-bg: var(--primary-color);
    --sidebar-bg-dark: var(--primary-dark);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --sidebar-icon: var(--secondary-color);
    --sidebar-active-bg: rgba(255, 255, 255, 0.2);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);

    /* -------------------------------------------------------------------------
       Header Colors - Tenant Customizable
       ------------------------------------------------------------------------- */
    --header-bg: var(--primary-color);
    --header-text: #ffffff;

    /* -------------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Montserrat', var(--font-sans);
    --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;
    --font-signature: 'Dancing Script', cursive;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --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.625;

    /* -------------------------------------------------------------------------
       Spacing Scale
       ------------------------------------------------------------------------- */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* -------------------------------------------------------------------------
       Border Radius
       ------------------------------------------------------------------------- */
    --radius-sm: 0.25rem;    /* 4px */
    --radius: 0.375rem;      /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
       Shadows
       ------------------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px 0 var(--shadow-color);
    --shadow-sm: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);

    /* -------------------------------------------------------------------------
       Transitions
       ------------------------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-menu: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* -------------------------------------------------------------------------
       Z-Index Scale
       ------------------------------------------------------------------------- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-sidebar: 1000;
    --z-overlay: 999;
    --z-mobile-menu: 1010;

    /* -------------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------------- */
    --sidebar-width-collapsed: 4rem;
    --sidebar-width-expanded: 16rem;
    --header-height: 4rem;
    --container-max-width: 1280px;
    --content-max-width: 1200px;
}

/* =============================================================================
   Dark Mode Variables
   ============================================================================= */

html.dark-mode {
    --text-color: #f9fafb;
    --text-muted: #d1d5db;
    --text-light: #9ca3af;

    --bg-color: #111827;
    --bg-alt: #1f2937;
    --bg-dark: #374151;
    --bg-darker: #4b5563;

    --border-color: #374151;
    --border-dark: #4b5563;
    --border-light: #1f2937;

    --shadow-color: rgba(0, 0, 0, 0.3);

    --sidebar-bg: #0f172a;
    --sidebar-bg-dark: #020617;
    --sidebar-text: #f9fafb;
    --sidebar-text-muted: rgba(255, 255, 255, 0.7);

    --header-bg: #1f2937;

    /* Adjust semantic colors for dark mode */
    --success-light: rgba(16, 185, 129, 0.2);
    --warning-light: rgba(245, 158, 11, 0.2);
    --error-light: rgba(239, 68, 68, 0.2);
    --info-light: rgba(59, 130, 246, 0.2);

    --primary-50: rgba(79, 70, 229, 0.2);
}

/* =============================================================================
   Theme Variants
   ============================================================================= */

/**
 * Theme: Classic (Default)
 * The original MusicJuries theme - modern and clean
 * This is the base theme; variables are already defined in :root
 */
body.theme-classic {
    /* Classic theme uses default :root variables - no overrides needed */
}

/**
 * Theme: Concert Hall Elegance
 * A sophisticated, refined theme inspired by concert hall aesthetics
 * Deep navy, warm gold accents, cream backgrounds
 */
body.theme-elegance {
    /* -------------------------------------------------------------------------
       Primary Colors - Navy & Gold
       ------------------------------------------------------------------------- */
    --primary-color: #1a2744;
    --primary-color-rgb: 26, 39, 68;
    --primary-dark: #0a1628;
    --primary-light: #2a3a5c;
    --primary-50: #f0f2f7;

    --secondary-color: #c9a962;
    --secondary-color-rgb: 201, 169, 98;
    --secondary-dark: #b8944d;
    --secondary-light: #dbc07a;

    --accent-color: #c9a962;
    --accent-color-rgb: 201, 169, 98;
    --accent-dark: #b8944d;
    --accent-light: #dbc07a;

    /* -------------------------------------------------------------------------
       Text Colors - Warmer tones
       ------------------------------------------------------------------------- */
    --text-color: #1a2744;
    --text-muted: #5a6478;
    --text-light: #8a92a4;

    /* -------------------------------------------------------------------------
       Background Colors - Cream palette
       ------------------------------------------------------------------------- */
    --bg-color: #faf8f3;
    --bg-alt: #f5f3ed;
    --bg-dark: #f0ede5;
    --bg-darker: #e5e2da;

    /* -------------------------------------------------------------------------
       Border Colors - Softer
       ------------------------------------------------------------------------- */
    --border-color: #e5e2da;
    --border-dark: #d5d2ca;
    --border-light: #f5f3ed;

    /* -------------------------------------------------------------------------
       Shadow Colors - Warmer shadows
       ------------------------------------------------------------------------- */
    --shadow-color: rgba(10, 22, 40, 0.08);
    --shadow-color-dark: rgba(10, 22, 40, 0.15);

    /* -------------------------------------------------------------------------
       Sidebar/Navigation - Dark navy
       ------------------------------------------------------------------------- */
    --sidebar-bg: #1a2744;
    --sidebar-bg-dark: #0a1628;
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --sidebar-icon: #c9a962;
    --sidebar-active-bg: rgba(201, 169, 98, 0.2);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);

    /* -------------------------------------------------------------------------
       Header Colors
       ------------------------------------------------------------------------- */
    --header-bg: #1a2744;
    --header-text: #ffffff;

    /* -------------------------------------------------------------------------
       Typography - Elegant fonts
       ------------------------------------------------------------------------- */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;

    /* -------------------------------------------------------------------------
       Border Radius - Slightly larger for elegance
       ------------------------------------------------------------------------- */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
}

/**
 * Theme: Concert Hall Elegance + Dark Mode
 * Combines elegance theme with dark mode preferences
 */
html.dark-mode body.theme-elegance {
    --text-color: #f9fafb;
    --text-muted: #a8b4d4;
    --text-light: #8a92a4;

    --bg-color: #0a1628;
    --bg-alt: #1a2744;
    --bg-dark: #2a3a5c;
    --bg-darker: #3a4a6c;

    --border-color: #2a3a5c;
    --border-dark: #3a4a6c;
    --border-light: #1a2744;

    --shadow-color: rgba(0, 0, 0, 0.3);

    --sidebar-bg: #050d18;
    --sidebar-bg-dark: #020810;
}

/* -------------------------------------------------------------------------
   Theme Override Rules - Override Tailwind defaults when theme is applied
   ------------------------------------------------------------------------- */

/* Elegance theme overrides for Tailwind background classes */
body.theme-elegance {
    background-color: var(--bg-color) !important;
}

body.theme-elegance .bg-gray-50,
body.theme-elegance .bg-gray-100 {
    background-color: var(--bg-color) !important;
}

body.theme-elegance .bg-white {
    background-color: var(--bg-color) !important;
}

body.theme-elegance .text-gray-800,
body.theme-elegance .text-gray-900 {
    color: var(--text-color) !important;
}

body.theme-elegance .text-gray-600,
body.theme-elegance .text-gray-700 {
    color: var(--text-muted) !important;
}

/* Elegance theme - cards and containers */
body.theme-elegance .card,
body.theme-elegance .bg-white.rounded-lg,
body.theme-elegance .bg-white.shadow {
    background-color: #ffffff !important;
    border: 1px solid rgba(201, 169, 98, 0.2);
}

/* Elegance theme - buttons use gold accent */
body.theme-elegance .btn-primary,
body.theme-elegance .bg-indigo-600,
body.theme-elegance .bg-blue-600 {
    background-color: var(--primary-color) !important;
}

body.theme-elegance .btn-primary:hover,
body.theme-elegance .hover\:bg-indigo-700:hover,
body.theme-elegance .hover\:bg-blue-700:hover {
    background-color: var(--primary-dark) !important;
}

/* Elegance theme - accent/secondary buttons */
body.theme-elegance .btn-secondary,
body.theme-elegance .bg-teal-500,
body.theme-elegance .bg-green-500 {
    background-color: var(--secondary-color) !important;
    color: var(--primary-dark) !important;
}

/* Elegance theme - text accents */
body.theme-elegance .text-indigo-600,
body.theme-elegance .text-blue-600 {
    color: var(--primary-color) !important;
}

/* Elegance theme - borders */
body.theme-elegance .border-gray-200,
body.theme-elegance .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Elegance theme - headings */
body.theme-elegance h1,
body.theme-elegance h2,
body.theme-elegance h3,
body.theme-elegance h4,
body.theme-elegance h5,
body.theme-elegance h6 {
    font-family: var(--font-heading, var(--font-sans));
    color: var(--text-color);
}

/* Elegance theme - elegant navigation styling */
body.theme-elegance {
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;

    /* Elegant navigation uses the theme's navy colors
       Tenant's --sidebar-icon and --secondary-color provide accent colors */
    --topbar-bg: var(--sidebar-bg, #1a2744);
    --topbar-text: #ffffff;
}

/* Classic theme - uses tenant branding colors directly */
body.theme-classic {
    /* Navigation colors come entirely from tenant-override.php */
}

/* Topbar base styles */
.topbar-elegant {
    position: relative;
}

/* Gradient stroke on bottom of topbar using tenant brand colors */
.topbar-elegant::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--tenant-primary, #4f46e5) 0%,
        var(--tenant-secondary, #14b8a6) 50%,
        var(--tenant-accent, #f59e0b) 100%
    );
}

/* Elegance theme - navigation refinements */
body.theme-elegance .topbar-elegant {
    background: linear-gradient(135deg, var(--sidebar-bg, #1a2744) 0%, var(--sidebar-bg-dark, #0a1628) 100%);
}

body.theme-elegance .sidebar-gradient {
    background: linear-gradient(180deg, var(--sidebar-bg, #1a2744) 0%, var(--sidebar-bg-dark, #0a1628) 100%);
}

/* Elegance theme - refined shadows and effects */
body.theme-elegance .topbar-elegant,
body.theme-elegance .sidebar-gradient {
    box-shadow: 0 4px 20px rgba(10, 22, 40, 0.15);
}

body.theme-elegance .nav-user-avatar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.theme-elegance .sidebar-item-icon {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-elegance .sidebar-item:hover .sidebar-item-icon,
body.theme-elegance .sidebar-item.active .sidebar-item-icon {
    background: rgba(255, 255, 255, 0.15);
}

/* Elegance theme - user role text uses tenant secondary/accent color */
body.theme-elegance .nav-user-role {
    color: var(--sidebar-icon, var(--secondary-color, #c9a962));
}

/* Elegance theme - icon colors use tenant sidebar-icon */
body.theme-elegance .sidebar-item-icon svg,
body.theme-elegance .sidebar-item-icon i {
    color: var(--sidebar-icon, var(--secondary-color, #c9a962));
}

/* Elegance theme - active states use tenant accent with transparency */
body.theme-elegance .sidebar-item.active {
    background: var(--sidebar-active-bg, rgba(255, 255, 255, 0.15));
}

/* Elegance theme - grain texture overlay for refined look */
body.theme-elegance::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Elegance theme - refined card styling */
body.theme-elegance .card,
body.theme-elegance .panel,
body.theme-elegance .bg-white.rounded-lg.shadow {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(10, 22, 40, 0.06);
}

/* Elegance theme - refined button styling */
body.theme-elegance .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.theme-elegance .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   2. RESET / BASE STYLES
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-color);
    background-color: var(--bg-alt);
    min-height: 100vh;
}

/* Remove default list styles */
ul, ol {
    list-style: none;
}

/* Remove default link styles */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Images */
img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove default button styles */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Remove default fieldset styles */
fieldset {
    border: none;
    padding: 0;
}

/* Selection styling */
::selection {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Hidden utility */
[hidden] {
    display: none !important;
}

/* =============================================================================
   3. LAYOUT (Header, Sidebar, Footer, Main Content)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page Container
   ----------------------------------------------------------------------------- */
.layout-container {
    display: flex;
    min-height: 100vh;
}

.layout-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: padding-left var(--transition-menu);
}

@media (min-width: 1024px) {
    .layout-main {
        padding-left: var(--sidebar-width-collapsed);
    }

    .layout-main.sidebar-expanded {
        padding-left: var(--sidebar-width-expanded);
    }
}

/* -----------------------------------------------------------------------------
   Content Wrapper
   ----------------------------------------------------------------------------- */
.content-wrapper {
    flex: 1;
    padding: var(--spacing-lg);
    transition: padding-left var(--transition-menu);
}

@media (min-width: 1024px) {
    .content-wrapper {
        padding-left: calc(var(--sidebar-width-collapsed) + var(--spacing-lg));
    }
}

.content-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */
.header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.header-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--header-text);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* -----------------------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width-collapsed);
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-dark) 100%);
    color: var(--sidebar-text);
    z-index: var(--z-sidebar);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width var(--transition-menu);
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .sidebar:hover {
        width: var(--sidebar-width-expanded);
    }
}

/* Mobile sidebar */
@media (max-width: 1023px) {
    .sidebar {
        width: var(--sidebar-width-expanded);
        transform: translateX(-100%);
        transition: transform var(--transition-menu);
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }
}

.sidebar-header {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--header-height);
    border-bottom: 1px solid var(--sidebar-hover-bg);
}

.sidebar-logo {
    width: 2.5rem;
    height: 2.5rem;
    transition: transform var(--transition-base);
}

.sidebar:hover .sidebar-logo {
    transform: scale(1);
}

.sidebar:not(:hover) .sidebar-logo {
    transform: scale(0.8);
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-sm) 0;
}

.sidebar-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--sidebar-hover-bg);
}

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */
.footer {
    background-color: var(--bg-alt);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-lg);
    margin-top: auto;
}

.footer-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------------------------
   Page Header / Title Section
   ----------------------------------------------------------------------------- */
.page-header {
    margin-bottom: var(--spacing-xl);
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.page-breadcrumb a {
    color: var(--text-muted);
}

.page-breadcrumb a:hover {
    color: var(--primary-color);
}

/* =============================================================================
   4. TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
}

.text-lead {
    font-size: var(--font-size-xl);
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}

.text-small {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-muted {
    color: var(--text-muted);
}

.text-light {
    color: var(--text-light);
}

strong, .text-bold {
    font-weight: var(--font-weight-bold);
}

em, .text-italic {
    font-style: italic;
}

.text-mono {
    font-family: var(--font-mono);
}

.text-signature {
    font-family: var(--font-signature);
    font-size: var(--font-size-2xl);
}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text colors */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

/* Links */
.link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link:hover {
    color: var(--primary-dark);
}

/* Lists */
.list-disc {
    list-style-type: disc;
    padding-left: var(--spacing-lg);
}

.list-decimal {
    list-style-type: decimal;
    padding-left: var(--spacing-lg);
}

.list-disc li,
.list-decimal li {
    margin-bottom: var(--spacing-sm);
}

/* Code */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: var(--bg-dark);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background-color: var(--bg-dark);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}

/* =============================================================================
   5. FORMS AND INPUTS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Form Layout
   ----------------------------------------------------------------------------- */
.form {
    width: 100%;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.form-row > * {
    flex: 1;
    min-width: 200px;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

/* -----------------------------------------------------------------------------
   Labels
   ----------------------------------------------------------------------------- */
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
}

.form-label-required::after {
    content: ' *';
    color: var(--error);
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* -----------------------------------------------------------------------------
   Input Base Styles
   ----------------------------------------------------------------------------- */
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--border-dark);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-light);
}

/* Input sizes */
.form-input-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.form-input-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
}

/* Disabled state */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--bg-alt);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Readonly state */
.form-input[readonly],
.form-textarea[readonly] {
    background-color: var(--bg-alt);
}

/* Error state */
.form-input-error,
.form-select-error,
.form-textarea-error {
    border-color: var(--error);
}

.form-input-error:focus,
.form-select-error:focus,
.form-textarea-error:focus {
    box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.1);
}

.form-error-message {
    font-size: var(--font-size-sm);
    color: var(--error);
    margin-top: var(--spacing-xs);
}

/* Success state */
.form-input-success,
.form-select-success {
    border-color: var(--success);
}

/* -----------------------------------------------------------------------------
   Select
   ----------------------------------------------------------------------------- */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2 + 16px);
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Textarea
   ----------------------------------------------------------------------------- */
.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-textarea-autosize {
    resize: none;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Checkbox and Radio
   ----------------------------------------------------------------------------- */
.form-checkbox,
.form-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form-checkbox input,
.form-radio input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.form-checkbox-label,
.form-radio-label {
    font-size: var(--font-size-base);
    color: var(--text-color);
    cursor: pointer;
}

/* Checkbox/Radio group */
.form-checkbox-group,
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-checkbox-group-inline,
.form-radio-group-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* -----------------------------------------------------------------------------
   File Input
   ----------------------------------------------------------------------------- */
.form-file {
    display: block;
    width: 100%;
}

.form-file-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-alt);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-file-label:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-50);
}

.form-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* -----------------------------------------------------------------------------
   Input Group (with addons)
   ----------------------------------------------------------------------------- */
.form-input-group {
    display: flex;
    align-items: stretch;
}

.form-input-group .form-input {
    flex: 1;
    border-radius: 0;
}

.form-input-group .form-input:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.form-input-group .form-input:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.form-input-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    background-color: var(--bg-alt);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.form-input-addon:first-child {
    border-right: none;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.form-input-addon:last-child {
    border-left: none;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/* -----------------------------------------------------------------------------
   Range Slider
   ----------------------------------------------------------------------------- */
.form-range {
    width: 100%;
    height: 0.5rem;
    background: linear-gradient(to right, var(--error) 0%, var(--warning) 50%, var(--success) 100%);
    border-radius: var(--radius-full);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.form-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--primary-color);
    border: 3px solid var(--bg-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.form-range::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--primary-color);
    border: 3px solid var(--bg-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

/* =============================================================================
   6. BUTTONS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base Button
   ----------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3);
}

.btn:disabled,
.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button icon */
.btn-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Icon-only button */
.btn-icon-only {
    padding: var(--spacing-sm);
}

.btn-icon-only .btn-icon {
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Button Variants
   ----------------------------------------------------------------------------- */

/* Primary */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-primary:active {
    background-color: var(--primary-dark);
    transform: translateY(1px);
}

/* Secondary */
.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-inverse);
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

/* Accent */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-inverse);
}

.btn-accent:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Success */
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--text-inverse);
}

.btn-success:hover {
    background-color: var(--success-dark);
    border-color: var(--success-dark);
}

/* Warning */
.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--text-inverse);
}

.btn-warning:hover {
    background-color: var(--warning-dark);
    border-color: var(--warning-dark);
}

/* Danger/Error */
.btn-danger,
.btn-error {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--text-inverse);
}

.btn-danger:hover,
.btn-error:hover {
    background-color: var(--error-dark);
    border-color: var(--error-dark);
}

/* Light */
.btn-light {
    background-color: var(--bg-alt);
    border-color: var(--border-color);
    color: var(--text-color);
}

.btn-light:hover {
    background-color: var(--bg-dark);
    border-color: var(--border-dark);
}

/* Dark */
.btn-dark {
    background-color: var(--text-color);
    border-color: var(--text-color);
    color: var(--text-inverse);
}

.btn-dark:hover {
    background-color: #000;
}

/* -----------------------------------------------------------------------------
   Outline Buttons
   ----------------------------------------------------------------------------- */
.btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}

.btn-outline:hover {
    background-color: var(--bg-alt);
}

.btn-outline-primary {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.btn-outline-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--text-inverse);
}

.btn-outline-danger {
    background-color: transparent;
    border-color: var(--error);
    color: var(--error);
}

.btn-outline-danger:hover {
    background-color: var(--error);
    color: var(--text-inverse);
}

/* -----------------------------------------------------------------------------
   Ghost/Text Buttons
   ----------------------------------------------------------------------------- */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-color);
}

.btn-ghost:hover {
    background-color: var(--bg-alt);
}

.btn-ghost-primary {
    color: var(--primary-color);
}

.btn-ghost-primary:hover {
    background-color: var(--primary-50);
}

/* Link Button */
.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-color);
    text-decoration: underline;
    padding: 0;
}

.btn-link:hover {
    color: var(--primary-dark);
}

/* -----------------------------------------------------------------------------
   Button Sizes
   ----------------------------------------------------------------------------- */
.btn-xs {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.btn-xl {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-xl);
}

/* Full width button */
.btn-block {
    display: flex;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Button Group
   ----------------------------------------------------------------------------- */
.btn-group {
    display: inline-flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.btn-group .btn:not(:last-child) {
    border-right-color: rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   7. TABLES
   ============================================================================= */

.table-container {
    width: 100%;
    overflow-x: auto;
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table th,
.table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background-color: var(--bg-alt);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    white-space: nowrap;
}

.table tbody tr:hover {
    background-color: var(--bg-alt);
}

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

/* Table variants */
.table-striped tbody tr:nth-child(even) {
    background-color: var(--bg-alt);
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color);
}

/* Compact table */
.table-compact th,
.table-compact td {
    padding: var(--spacing-sm);
}

/* Table alignment */
.table td.text-right,
.table th.text-right {
    text-align: right;
}

.table td.text-center,
.table th.text-center {
    text-align: center;
}

/* Table responsive wrapper */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   8. CARDS AND PANELS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Card Base
   ----------------------------------------------------------------------------- */
.card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-alt);
}

.card-header-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin: 0;
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-alt);
}

/* Card variants */
.card-flat {
    box-shadow: none;
}

.card-hover {
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.card-clickable {
    cursor: pointer;
}

/* Card with accent border */
.card-accent-primary {
    border-left: 4px solid var(--primary-color);
}

.card-accent-success {
    border-left: 4px solid var(--success);
}

.card-accent-warning {
    border-left: 4px solid var(--warning);
}

.card-accent-error {
    border-left: 4px solid var(--error);
}

/* -----------------------------------------------------------------------------
   Stat Card
   ----------------------------------------------------------------------------- */
.card-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.card-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: var(--primary-50);
    color: var(--primary-color);
    flex-shrink: 0;
}

.card-stat-content {
    flex: 1;
}

.card-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    line-height: 1;
}

.card-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* -----------------------------------------------------------------------------
   Panel
   ----------------------------------------------------------------------------- */
.panel {
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.panel-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.panel-title-icon {
    color: var(--primary-color);
}

.panel-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.panel-body {
    padding: var(--spacing-lg);
}

.panel-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-alt);
}

/* =============================================================================
   9. MODALS AND OVERLAYS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Modal Backdrop
   ----------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-backdrop.modal-open {
    opacity: 1;
    visibility: visible;
}

/* -----------------------------------------------------------------------------
   Modal
   ----------------------------------------------------------------------------- */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.modal.modal-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Modal sizes */
.modal-sm { width: 24rem; }
.modal-md { width: 32rem; }
.modal-lg { width: 48rem; }
.modal-xl { width: 64rem; }
.modal-full { width: calc(100vw - 2rem); height: calc(100vh - 2rem); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
    background-color: var(--bg-alt);
    color: var(--text-color);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: calc(90vh - 10rem);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-alt);
}

/* -----------------------------------------------------------------------------
   Overlay
   ----------------------------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    display: none;
}

.overlay.overlay-open {
    display: block;
}

/* Mobile menu overlay */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: var(--z-overlay);
    display: none;
}

.mobile-overlay.menu-open {
    display: block;
}

/* =============================================================================
   10. ALERTS AND NOTIFICATIONS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Alert Base
   ----------------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    border-left: 4px solid;
    margin-bottom: var(--spacing-md);
}

.alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.alert-message {
    font-size: var(--font-size-sm);
}

.alert-close {
    flex-shrink: 0;
    padding: var(--spacing-xs);
    margin: calc(var(--spacing-xs) * -1);
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.alert-close:hover {
    opacity: 1;
}

/* Alert variants */
.alert-success {
    background-color: var(--success-light);
    border-color: var(--success);
    color: var(--success-dark);
}

.alert-warning {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning-dark);
}

.alert-error {
    background-color: var(--error-light);
    border-color: var(--error);
    color: var(--error-dark);
}

.alert-info {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--info-dark);
}

/* Inline alert (no left border) */
.alert-inline {
    border-left: none;
    border: 1px solid;
}

/* -----------------------------------------------------------------------------
   Toast Notification
   ----------------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: var(--z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 24rem;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: toast-slide-in var(--transition-base) ease-out;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.toast-close {
    flex-shrink: 0;
    padding: var(--spacing-xs);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.toast-close:hover {
    background-color: var(--bg-alt);
    color: var(--text-color);
}

/* Toast variants */
.toast-success .toast-icon { color: var(--success); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-error .toast-icon { color: var(--error); }
.toast-info .toast-icon { color: var(--info); }

/* -----------------------------------------------------------------------------
   Badge
   ----------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-primary {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.badge-secondary {
    background-color: var(--secondary-color);
    color: var(--text-inverse);
}

.badge-success {
    background-color: var(--success);
    color: var(--text-inverse);
}

.badge-warning {
    background-color: var(--warning);
    color: var(--text-inverse);
}

.badge-error {
    background-color: var(--error);
    color: var(--text-inverse);
}

.badge-info {
    background-color: var(--info);
    color: var(--text-inverse);
}

.badge-light {
    background-color: var(--bg-alt);
    color: var(--text-color);
}

/* Outline badges */
.badge-outline-primary {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.badge-outline-success {
    background-color: transparent;
    border: 1px solid var(--success);
    color: var(--success);
}

.badge-outline-warning {
    background-color: transparent;
    border: 1px solid var(--warning);
    color: var(--warning);
}

.badge-outline-error {
    background-color: transparent;
    border: 1px solid var(--error);
    color: var(--error);
}

/* Badge sizes */
.badge-sm {
    padding: 0 0.375rem;
    font-size: 0.625rem;
}

.badge-lg {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-sm);
}

/* Dot badge (notification indicator) */
.badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: var(--radius-full);
}

/* =============================================================================
   11. NAVIGATION AND MENUS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Navigation Menu
   ----------------------------------------------------------------------------- */
.nav-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--sidebar-text-muted);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
}

.nav-link.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-text);
}

.nav-link-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--sidebar-icon);
}

.nav-link-text {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar collapsed state - hide text */
@media (min-width: 1024px) {
    .sidebar:not(:hover) .nav-link-text,
    .sidebar:not(:hover) .nav-link-chevron {
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }

    .sidebar:not(:hover) .nav-link {
        justify-content: center;
        padding: var(--spacing-sm);
    }

    .sidebar:not(:hover) .nav-link-icon {
        margin: 0;
        transform: scale(1.2);
    }
}

/* Nav group */
.nav-group {
    margin-bottom: var(--spacing-md);
}

.nav-group-title {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Submenu */
.nav-submenu {
    display: none;
    flex-direction: column;
    padding-left: var(--spacing-xl);
    margin-top: var(--spacing-xs);
}

.nav-submenu.open {
    display: flex;
}

.nav-submenu .nav-link {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.nav-link-chevron {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.nav-item.open .nav-link-chevron {
    transform: rotate(180deg);
}

/* -----------------------------------------------------------------------------
   Tabs
   ----------------------------------------------------------------------------- */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    gap: var(--spacing-xs);
}

.tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.tab:hover {
    color: var(--text-color);
}

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

.tab-content {
    padding: var(--spacing-lg) 0;
}

.tab-panel {
    display: none;
}

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

/* Pill tabs */
.tabs-pills {
    border-bottom: none;
    background-color: var(--bg-alt);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
}

.tabs-pills .tab {
    border-bottom: none;
    border-radius: var(--radius);
    margin-bottom: 0;
}

.tabs-pills .tab.active {
    background-color: var(--bg-color);
    box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------------------------
   Breadcrumb
   ----------------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
}

.breadcrumb-item a {
    color: var(--text-muted);
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: var(--text-color);
}

.breadcrumb-separator {
    color: var(--text-light);
}

/* -----------------------------------------------------------------------------
   Dropdown
   ----------------------------------------------------------------------------- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    padding: var(--spacing-xs);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown.open .dropdown-menu,
.dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--bg-alt);
}

.dropdown-item-icon {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: var(--spacing-xs) 0;
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.pagination-item:hover {
    background-color: var(--bg-alt);
    border-color: var(--border-dark);
}

.pagination-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

.pagination-item:disabled,
.pagination-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================================================
   12. PAGE-SPECIFIC STYLES
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Login Page
   ----------------------------------------------------------------------------- */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.login-card {
    width: 100%;
    max-width: 24rem;
    background-color: var(--bg-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.login-header {
    padding: var(--spacing-xl);
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-inverse);
}

.login-logo {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--spacing-md);
}

.login-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.login-form {
    padding: var(--spacing-xl);
}

/* -----------------------------------------------------------------------------
   Dashboard Page
   ----------------------------------------------------------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--spacing-lg);
}

.dashboard-stat {
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
}

.dashboard-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
}

.dashboard-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Jury Setup Page
   ----------------------------------------------------------------------------- */
.jury-setup-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .jury-setup-container {
        grid-template-columns: 2fr 1fr;
    }
}

.jury-slot {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: box-shadow var(--transition-fast);
}

.jury-slot:hover {
    box-shadow: var(--shadow-md);
}

.jury-slot-time {
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    min-width: 5rem;
}

.jury-slot-student {
    flex: 1;
}

.jury-slot-actions {
    display: flex;
    gap: var(--spacing-xs);
}

/* -----------------------------------------------------------------------------
   Student Evaluation Page
   ----------------------------------------------------------------------------- */
.evaluation-header {
    background: linear-gradient(to right, var(--primary-50), var(--bg-alt));
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.evaluation-student-name {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-dark);
    margin-bottom: var(--spacing-sm);
}

.evaluation-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    color: var(--text-muted);
    flex-wrap: wrap;
}

.evaluation-criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--spacing-lg);
}

.evaluation-criterion {
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.evaluation-criterion-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
}

.evaluation-slider-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.evaluation-score {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    min-width: 3rem;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Repertoire Sheet Page
   ----------------------------------------------------------------------------- */
.repertoire-container {
    max-width: 50rem;
    margin: 0 auto;
}

.repertoire-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.repertoire-section {
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.repertoire-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.repertoire-piece {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-md);
}

.repertoire-piece:last-child {
    margin-bottom: 0;
}

.repertoire-piece-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.repertoire-piece-composer {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Schedule Page
   ----------------------------------------------------------------------------- */
.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.schedule-day-header {
    padding: var(--spacing-md);
    background-color: var(--bg-alt);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.schedule-day {
    min-height: 8rem;
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
}

.schedule-day-number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.schedule-event {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    background-color: var(--primary-50);
    color: var(--primary-color);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.schedule-event:hover {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

/* -----------------------------------------------------------------------------
   Statistics/Reports Page
   ----------------------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--spacing-lg);
}

.stats-chart-container {
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.stats-chart-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
}

.stats-chart {
    height: 16rem;
}

/* -----------------------------------------------------------------------------
   User Management Page
   ----------------------------------------------------------------------------- */
.user-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
    color: var(--text-inverse);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.user-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.user-status-active {
    background-color: var(--success-light);
    color: var(--success-dark);
}

.user-status-inactive {
    background-color: var(--error-light);
    color: var(--error-dark);
}

.user-status-pending {
    background-color: var(--warning-light);
    color: var(--warning-dark);
}

/* -----------------------------------------------------------------------------
   Repertoire Sheet
   ----------------------------------------------------------------------------- */

/* Page-Level Variables */
.rep-sheet-page {
    overflow: visible !important;
    --rep-card-bg: var(--bg-color);

    /* Three repertoire type colors (blue / indigo / purple) */
    --rep-jury-color: var(--info, #3b82f6);
    --rep-jury-light: var(--info-light, #dbeafe);
    --rep-jury-dark: var(--info-dark, #1e40af);
    --rep-jury-border: #60a5fa;
    --rep-jury-accent: #93c5fd;
    --rep-jury-header-from: #1e3a8a;

    --rep-general-color: var(--primary-light, #6366f1);
    --rep-general-light: #e0e7ff;
    --rep-general-dark: var(--primary-dark, #4338ca);
    --rep-general-border: #818cf8;
    --rep-general-accent: #a5b4fc;
    --rep-general-header-from: #3730a3;

    --rep-technical-color: #a855f7;
    --rep-technical-light: #f3e8ff;
    --rep-technical-dark: #7e22ce;
    --rep-technical-border: #c084fc;
    --rep-technical-accent: #d8b4fe;
    --rep-technical-header-from: #6b21a8;
}

.dark-mode .rep-sheet-page {
    overflow: visible !important;
    --rep-card-bg: var(--bg-alt);
    --rep-jury-light: #1e3a8a;
    --rep-jury-accent: var(--rep-jury-color);
    --rep-jury-header-from: var(--rep-jury-dark);
    --rep-general-light: #312e81;
    --rep-general-accent: var(--rep-general-color);
    --rep-general-header-from: var(--rep-general-dark);
    --rep-technical-light: #581c87;
    --rep-technical-accent: var(--rep-technical-color);
    --rep-technical-header-from: var(--rep-technical-dark);
}

html.dark-mode { overflow: auto !important; }
html.dark-mode body { overflow: visible !important; background-color: var(--sidebar-bg, #0f172a); }
.dark-mode .content-container,
.dark-mode .content-wrapper,
.dark-mode .content-body { overflow: visible !important; }

/* Cards */
.rep-sheet-page .rep-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-color: var(--rep-card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.rep-sheet-page .rep-card-header {
    font-weight: bold;
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: white;
    border-bottom: 1px solid var(--border-color);
}

.rep-sheet-page .rep-card-body {
    padding: 1rem;
    background-color: var(--rep-card-bg);
    color: var(--text-color);
}

.rep-sheet-page .student-card,
.rep-sheet-page .accompanist-card,
.rep-sheet-page .ai-powered-card,
.rep-sheet-page .repertoire-card {
    background-color: var(--rep-card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.rep-sheet-page .ai-result-area {
    background-color: var(--rep-card-bg);
    border-left: 1px solid var(--border-color);
}

/* Buttons */
.rep-sheet-page .btn-primary {
    background-color: var(--rep-jury-dark);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s;
}

.rep-sheet-page .btn-primary:hover { background-color: var(--rep-jury-header-from); }

.rep-sheet-page .btn-secondary {
    background-color: var(--bg-alt);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s;
}

.rep-sheet-page .btn-secondary:hover { background-color: var(--border-color); }

.rep-sheet-page .btn-danger {
    background-color: var(--error);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s;
}

.rep-sheet-page .btn-danger:hover { background-color: var(--error-dark); }

/* Forms */
.rep-sheet-page .form-group { margin-bottom: 1.5rem; }

.rep-sheet-page .form-control {
    width: 100%;
    padding: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background-color: var(--rep-card-bg);
    color: var(--text-color);
    transition: all 0.2s;
}

.rep-sheet-page .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 79, 70, 229), 0.2);
    outline: none;
}

.rep-sheet-page .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.rep-sheet-page .appearance-checkbox {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
}

.rep-sheet-page select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.dark-mode .rep-sheet-page select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.rep-sheet-page .work-type-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    width: 100%;
}

.rep-sheet-page .work-type-field-wrapper { flex-shrink: 0; }
.rep-sheet-page .repertoire-input-field-wrapper { flex: 1; }

.rep-sheet-page .work-type-select {
    width: auto;
    min-width: fit-content;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--text-color);
    background-color: var(--rep-card-bg);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
}

.rep-sheet-page .work-type-select:hover { border-color: var(--text-light); }

.rep-sheet-page .work-type-select:focus {
    outline: none;
    border-color: var(--rep-jury-color);
    box-shadow: 0 0 0 1px var(--rep-jury-color);
}

.dark-mode .rep-sheet-page .work-type-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

.rep-sheet-page #smartRepertoireInput {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    background-color: var(--rep-card-bg);
    color: var(--text-color);
}

.rep-sheet-page #smartRepertoireInput:focus {
    outline: none;
    border-color: var(--rep-jury-color);
    box-shadow: 0 0 0 1px var(--rep-jury-color);
}

.rep-sheet-page #smartRepertoireInput:disabled {
    background-color: var(--bg-alt);
    color: var(--text-light);
    cursor: not-allowed;
}

/* Tables */
.rep-sheet-page .table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.rep-sheet-page .table-modern thead { background-color: var(--bg-alt); }

.rep-sheet-page .table-modern th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.rep-sheet-page .repertoire-card:nth-of-type(1) .table-modern thead { background-color: var(--rep-jury-light); }
.rep-sheet-page .repertoire-card:nth-of-type(1) .table-modern th { color: var(--rep-jury-dark); border-bottom-color: var(--rep-jury-accent); }
.rep-sheet-page .repertoire-card:nth-of-type(2) .table-modern thead { background-color: var(--rep-general-light); }
.rep-sheet-page .repertoire-card:nth-of-type(2) .table-modern th { color: var(--rep-general-dark); border-bottom-color: var(--rep-general-accent); }
.rep-sheet-page .repertoire-card:nth-of-type(3) .table-modern thead { background-color: var(--rep-technical-light); }
.rep-sheet-page .repertoire-card:nth-of-type(3) .table-modern th { color: var(--rep-technical-dark); border-bottom-color: var(--rep-technical-accent); }

.dark-mode .rep-sheet-page .repertoire-card:nth-of-type(1) .table-modern th { color: var(--info-light, #dbeafe); }
.dark-mode .rep-sheet-page .repertoire-card:nth-of-type(2) .table-modern th { color: #e0e7ff; }
.dark-mode .rep-sheet-page .repertoire-card:nth-of-type(3) .table-modern th { color: #f3e8ff; }

.rep-sheet-page .table-modern tbody tr { transition: all 0.2s; }
.rep-sheet-page .table-modern tbody tr:hover { background-color: var(--bg-alt); }

.rep-sheet-page .table-modern td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--rep-card-bg);
    color: var(--text-color);
}

.rep-sheet-page .rep-table-header {
    background-color: var(--text-light);
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}

/* Badges */
.rep-sheet-page .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 500;
}

.rep-sheet-page .badge-blue { background-color: var(--rep-jury-light); color: var(--rep-jury-dark); }
.rep-sheet-page .badge-purple { background-color: #ede9fe; color: #5b21b6; }
.dark-mode .rep-sheet-page .badge-purple { background-color: #5b21b6; color: #ede9fe; }

/* Lucide Icons */
.rep-sheet-page *[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
}

.rep-sheet-page .rep-icon { color: var(--primary-color); }
.rep-sheet-page .rep-text-muted { color: var(--text-muted); }

.rep-sheet-page .rep-delete-btn {
    color: var(--error);
    padding: 0.25rem;
    border-radius: var(--radius-full, 9999px);
    transition: all 0.2s;
}

.rep-sheet-page .rep-delete-btn:hover { color: var(--error-dark); background-color: var(--error-light); }

.rep-sheet-page .repertoire-item {
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    transition: all 0.3s;
}

/* Animations */
.rep-sheet-page .fade-in { animation: repFadeIn 0.5s ease forwards; }
@keyframes repFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rep-sheet-page .slide-in { animation: repSlideIn 0.5s ease forwards; }
@keyframes repSlideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rep-sheet-page .highlight-new { animation: repHighlightNew 2s ease-out; }
@keyframes repHighlightNew { 0% { background-color: rgba(var(--info-rgb, 59, 130, 246), 0.15); } 100% { background-color: transparent; } }
.rep-sheet-page .animate-pulse { animation: repPulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes repPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.03); } }

/* Suggestions Dropdown */
.rep-sheet-page .suggestions-dropdown {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--rep-card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

@media (min-width: 768px) {
    .rep-sheet-page #smartRepertoireInput + .suggestions-dropdown { width: 110%; }
}

.rep-sheet-page .suggestion-item { padding: 0.75rem; cursor: pointer; transition: all 0.1s; color: var(--text-color); }
.rep-sheet-page .suggestion-item:hover { background-color: var(--bg-alt); }
.rep-sheet-page .suggestion-item.active { background-color: var(--border-color); }

/* Toast Notification */
.rep-sheet-page .toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--rep-card-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    min-width: 300px;
    max-width: 90%;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.dark-mode .rep-sheet-page .toast { border: 1px solid var(--border-color); }
.rep-sheet-page .toast.show { transform: translateY(0); opacity: 1; }

/* Tooltips */
.rep-sheet-page .tooltip { position: relative; display: inline-flex; cursor: pointer; }

.rep-sheet-page .tooltip-content {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    width: 250px;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem;
    background-color: var(--rep-card-bg);
    color: var(--text-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
}

.dark-mode .rep-sheet-page .tooltip-content { background-color: var(--sidebar-bg, #0f172a); }
.rep-sheet-page .tooltip:hover .tooltip-content { visibility: visible; opacity: 1; }

.rep-sheet-page .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--rep-card-bg) transparent transparent transparent;
}

.dark-mode .rep-sheet-page .tooltip-content::after { border-color: var(--sidebar-bg, #0f172a) transparent transparent transparent; }

/* AI Input & Results */
.rep-sheet-page .ai-input-section { display: flex; flex-direction: column; gap: 0.5rem; }

.rep-sheet-page .ai-result-card {
    background-color: var(--rep-card-bg);
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.rep-sheet-page .ai-result-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.rep-sheet-page .ai-result-text {
    font-size: 0.875rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.25;
    position: relative;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm, 0.25rem);
    transition: all 0.2s ease;
}

.rep-sheet-page .ai-result-text.editable { cursor: pointer; padding-right: 1.75rem; }

.rep-sheet-page .ai-result-text.editable::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.rep-sheet-page .ai-result-text.editable:hover { background-color: rgba(var(--info-rgb, 59, 130, 246), 0.1); }
.rep-sheet-page .ai-result-text.editable:hover::after { opacity: 1; }

.rep-sheet-page .ai-result-text.editable::before {
    content: "Click to edit";
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 5;
}

.rep-sheet-page .ai-result-text.editable:hover::before { opacity: 1; visibility: visible; }

.dark-mode .rep-sheet-page .ai-result-text.editable::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}

.dark-mode .rep-sheet-page .ai-result-text.editable::before { border: 1px solid var(--border-color); }

.rep-sheet-page .ai-result-edit-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--rep-jury-color);
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--rep-card-bg);
    color: var(--text-color);
    box-shadow: 0 0 0 2px rgba(var(--info-rgb, 59, 130, 246), 0.25);
    outline: none;
}

.rep-sheet-page .ai-button {
    background-color: var(--rep-jury-dark);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.rep-sheet-page .ai-button:hover { background-color: var(--rep-jury-header-from); }
.rep-sheet-page .ai-button:disabled { background-color: var(--text-light); cursor: not-allowed; }

/* Help Section */
.rep-sheet-page #tableHelpText {
    border-left: 3px solid var(--rep-jury-color);
    line-height: 1.4;
    color: var(--text-color);
}

.rep-sheet-page #tableHelpText p { margin-bottom: 0.5rem; }
.rep-sheet-page #tableHelpText p:last-child { margin-bottom: 0; }
.rep-sheet-page #tableHelpText.hidden { display: none; }
.rep-sheet-page #tableHelpText:not(.hidden) { animation: repFadeInSlide 0.3s ease-out; }

@keyframes repFadeInSlide {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Add-to-Table Buttons */
.rep-sheet-page .add-table-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.rep-sheet-page .add-table-btn[disabled],
.rep-sheet-page .add-table-btn.disabled { opacity: 0.5; cursor: not-allowed; }

.rep-sheet-page .add-table-btn--jury { background-color: var(--rep-jury-light); color: var(--rep-jury-dark); border-color: var(--rep-jury-border); }
.rep-sheet-page .add-table-btn--jury:hover:not([disabled]) { background-color: var(--rep-jury-accent); border-color: var(--rep-jury-color); transform: translateY(-1px); }
.rep-sheet-page .add-table-btn--jury:active:not([disabled]) { background-color: var(--rep-jury-accent); transform: translateY(0); }

.rep-sheet-page .add-table-btn--general { background-color: var(--rep-general-light); color: var(--rep-general-dark); border-color: var(--rep-general-border); }
.rep-sheet-page .add-table-btn--general:hover:not([disabled]) { background-color: var(--rep-general-accent); border-color: var(--rep-general-color); transform: translateY(-1px); }
.rep-sheet-page .add-table-btn--general:active:not([disabled]) { background-color: var(--rep-general-accent); transform: translateY(0); }

.rep-sheet-page .add-table-btn--technical { background-color: var(--rep-technical-light); color: var(--rep-technical-dark); border-color: var(--rep-technical-border); }
.rep-sheet-page .add-table-btn--technical:hover:not([disabled]) { background-color: var(--rep-technical-accent); border-color: var(--rep-technical-color); transform: translateY(-1px); }
.rep-sheet-page .add-table-btn--technical:active:not([disabled]) { background-color: var(--rep-technical-accent); transform: translateY(0); }

.rep-sheet-page .add-table-btn i { stroke-width: 2.5; width: 16px; height: 16px; }

.rep-sheet-page .add-table-btn--jury.selected,
.rep-sheet-page .add-table-btn--jury:has(input:checked) {
    background-color: var(--rep-jury-color) !important;
    color: white !important;
    border-color: #2563eb !important;
    box-shadow: 0 3px 6px rgba(var(--info-rgb, 59, 130, 246), 0.3) !important;
    opacity: 1 !important;
}

.rep-sheet-page .add-table-btn--general.selected,
.rep-sheet-page .add-table-btn--general:has(input:checked) {
    background-color: var(--rep-general-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 3px 6px rgba(var(--primary-color-rgb, 79, 70, 229), 0.3) !important;
    opacity: 1 !important;
}

.rep-sheet-page .add-table-btn--technical.selected,
.rep-sheet-page .add-table-btn--technical:has(input:checked) {
    background-color: var(--rep-technical-color) !important;
    color: white !important;
    border-color: #9333ea !important;
    box-shadow: 0 3px 6px rgba(147, 51, 234, 0.3) !important;
    opacity: 1 !important;
}

/* Radio Group */
.rep-sheet-page .radio-group { display: flex; gap: 0.5rem; }

.rep-sheet-page .radio-option { position: relative; transition: all 0.2s ease; }

.rep-sheet-page .radio-option.selected {
    background-color: var(--rep-jury-light);
    border-color: var(--rep-jury-color);
    color: var(--rep-jury-dark);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.rep-sheet-page .radio-option:hover:not(.selected) { background-color: var(--bg-alt); border-color: var(--border-color); }
.rep-sheet-page .radio-option:focus-within { outline: 2px solid var(--rep-jury-color); outline-offset: 2px; }

/* Colorful Card Headers for Repertoire Sections */
.rep-sheet-page .repertoire-card:nth-of-type(1) .rep-card-header {
    background: linear-gradient(to right, var(--rep-jury-header-from), var(--rep-jury-color));
    color: white;
    border-bottom-color: var(--rep-jury-border);
}

.rep-sheet-page .repertoire-card:nth-of-type(2) .rep-card-header {
    background: linear-gradient(to right, var(--rep-general-header-from), var(--rep-general-color));
    color: white;
    border-bottom-color: var(--rep-general-border);
}

.rep-sheet-page .repertoire-card:nth-of-type(3) .rep-card-header {
    background: linear-gradient(to right, var(--rep-technical-header-from), var(--rep-technical-color));
    color: white;
    border-bottom-color: var(--rep-technical-border);
}

/* Responsive */
@media (max-width: 768px) {
    .rep-sheet-page .rep-card-body { padding: 0.75rem; }
    .rep-sheet-page .table-modern th,
    .rep-sheet-page .table-modern td { padding: 0.5rem 0.375rem; }
    .rep-sheet-page .ai-result-area { border-left: none; border-top: 1px solid var(--border-color); margin-top: 1rem; padding-top: 1rem; }
    .rep-sheet-page .rep-card-header { padding: 0.5rem 0.75rem; font-size: 1.125rem; }
    .rep-sheet-page .table-modern { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
    .rep-sheet-page .work-type-input-wrapper { flex-direction: column; align-items: stretch; }
    .rep-sheet-page .work-type-field-wrapper,
    .rep-sheet-page .repertoire-input-field-wrapper { width: 100%; }
    .rep-sheet-page .work-type-select { width: 100%; }
    .rep-sheet-page #smartRepertoireInput { width: 100%; }
    .rep-sheet-page .radio-group { flex-direction: column; }
    .rep-sheet-page .radio-option { width: 100%; justify-content: flex-start; padding: 0.5rem 0.75rem; }
}

/* =============================================================================
   13. UTILITY CLASSES
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Display
   ----------------------------------------------------------------------------- */
.u-hidden { display: none !important; }
.u-block { display: block !important; }
.u-inline { display: inline !important; }
.u-inline-block { display: inline-block !important; }
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-grid { display: grid !important; }

/* Responsive display */
@media (max-width: 639px) {
    .u-hidden-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .u-hidden-tablet { display: none !important; }
}

@media (min-width: 1024px) {
    .u-hidden-desktop { display: none !important; }
}

@media (max-width: 1023px) {
    .u-show-desktop-only { display: none !important; }
}

@media (min-width: 640px) {
    .u-show-mobile-only { display: none !important; }
}

/* -----------------------------------------------------------------------------
   Flexbox
   ----------------------------------------------------------------------------- */
.u-flex-row { flex-direction: row !important; }
.u-flex-column { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }

.u-justify-start { justify-content: flex-start !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-around { justify-content: space-around !important; }

.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }
.u-align-center { align-items: center !important; }
.u-align-stretch { align-items: stretch !important; }

.u-flex-1 { flex: 1 1 0% !important; }
.u-flex-auto { flex: 1 1 auto !important; }
.u-flex-none { flex: none !important; }
.u-flex-shrink-0 { flex-shrink: 0 !important; }
.u-flex-grow { flex-grow: 1 !important; }

.u-gap-xs { gap: var(--spacing-xs) !important; }
.u-gap-sm { gap: var(--spacing-sm) !important; }
.u-gap-md { gap: var(--spacing-md) !important; }
.u-gap-lg { gap: var(--spacing-lg) !important; }
.u-gap-xl { gap: var(--spacing-xl) !important; }

/* -----------------------------------------------------------------------------
   Margin
   ----------------------------------------------------------------------------- */
.u-margin-0 { margin: 0 !important; }
.u-margin-xs { margin: var(--spacing-xs) !important; }
.u-margin-sm { margin: var(--spacing-sm) !important; }
.u-margin-md { margin: var(--spacing-md) !important; }
.u-margin-lg { margin: var(--spacing-lg) !important; }
.u-margin-xl { margin: var(--spacing-xl) !important; }
.u-margin-auto { margin: auto !important; }

.u-margin-top-0 { margin-top: 0 !important; }
.u-margin-top-xs { margin-top: var(--spacing-xs) !important; }
.u-margin-top-sm { margin-top: var(--spacing-sm) !important; }
.u-margin-top-md { margin-top: var(--spacing-md) !important; }
.u-margin-top-lg { margin-top: var(--spacing-lg) !important; }
.u-margin-top-xl { margin-top: var(--spacing-xl) !important; }

.u-margin-bottom-0 { margin-bottom: 0 !important; }
.u-margin-bottom-xs { margin-bottom: var(--spacing-xs) !important; }
.u-margin-bottom-sm { margin-bottom: var(--spacing-sm) !important; }
.u-margin-bottom-md { margin-bottom: var(--spacing-md) !important; }
.u-margin-bottom-lg { margin-bottom: var(--spacing-lg) !important; }
.u-margin-bottom-xl { margin-bottom: var(--spacing-xl) !important; }

.u-margin-left-0 { margin-left: 0 !important; }
.u-margin-left-xs { margin-left: var(--spacing-xs) !important; }
.u-margin-left-sm { margin-left: var(--spacing-sm) !important; }
.u-margin-left-md { margin-left: var(--spacing-md) !important; }
.u-margin-left-lg { margin-left: var(--spacing-lg) !important; }
.u-margin-left-xl { margin-left: var(--spacing-xl) !important; }
.u-margin-left-auto { margin-left: auto !important; }

.u-margin-right-0 { margin-right: 0 !important; }
.u-margin-right-xs { margin-right: var(--spacing-xs) !important; }
.u-margin-right-sm { margin-right: var(--spacing-sm) !important; }
.u-margin-right-md { margin-right: var(--spacing-md) !important; }
.u-margin-right-lg { margin-right: var(--spacing-lg) !important; }
.u-margin-right-xl { margin-right: var(--spacing-xl) !important; }
.u-margin-right-auto { margin-right: auto !important; }

.u-margin-x-auto { margin-left: auto !important; margin-right: auto !important; }

/* -----------------------------------------------------------------------------
   Padding
   ----------------------------------------------------------------------------- */
.u-padding-0 { padding: 0 !important; }
.u-padding-xs { padding: var(--spacing-xs) !important; }
.u-padding-sm { padding: var(--spacing-sm) !important; }
.u-padding-md { padding: var(--spacing-md) !important; }
.u-padding-lg { padding: var(--spacing-lg) !important; }
.u-padding-xl { padding: var(--spacing-xl) !important; }

.u-padding-top-0 { padding-top: 0 !important; }
.u-padding-top-xs { padding-top: var(--spacing-xs) !important; }
.u-padding-top-sm { padding-top: var(--spacing-sm) !important; }
.u-padding-top-md { padding-top: var(--spacing-md) !important; }
.u-padding-top-lg { padding-top: var(--spacing-lg) !important; }
.u-padding-top-xl { padding-top: var(--spacing-xl) !important; }

.u-padding-bottom-0 { padding-bottom: 0 !important; }
.u-padding-bottom-xs { padding-bottom: var(--spacing-xs) !important; }
.u-padding-bottom-sm { padding-bottom: var(--spacing-sm) !important; }
.u-padding-bottom-md { padding-bottom: var(--spacing-md) !important; }
.u-padding-bottom-lg { padding-bottom: var(--spacing-lg) !important; }
.u-padding-bottom-xl { padding-bottom: var(--spacing-xl) !important; }

.u-padding-left-0 { padding-left: 0 !important; }
.u-padding-left-sm { padding-left: var(--spacing-sm) !important; }
.u-padding-left-md { padding-left: var(--spacing-md) !important; }
.u-padding-left-lg { padding-left: var(--spacing-lg) !important; }

.u-padding-right-0 { padding-right: 0 !important; }
.u-padding-right-sm { padding-right: var(--spacing-sm) !important; }
.u-padding-right-md { padding-right: var(--spacing-md) !important; }
.u-padding-right-lg { padding-right: var(--spacing-lg) !important; }

/* -----------------------------------------------------------------------------
   Width and Height
   ----------------------------------------------------------------------------- */
.u-width-full { width: 100% !important; }
.u-width-auto { width: auto !important; }
.u-width-screen { width: 100vw !important; }
.u-max-width-full { max-width: 100% !important; }
.u-min-width-0 { min-width: 0 !important; }

.u-height-full { height: 100% !important; }
.u-height-auto { height: auto !important; }
.u-height-screen { height: 100vh !important; }
.u-min-height-screen { min-height: 100vh !important; }

/* -----------------------------------------------------------------------------
   Text Utilities
   ----------------------------------------------------------------------------- */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }

.u-text-xs { font-size: var(--font-size-xs) !important; }
.u-text-sm { font-size: var(--font-size-sm) !important; }
.u-text-base { font-size: var(--font-size-base) !important; }
.u-text-lg { font-size: var(--font-size-lg) !important; }
.u-text-xl { font-size: var(--font-size-xl) !important; }
.u-text-2xl { font-size: var(--font-size-2xl) !important; }
.u-text-3xl { font-size: var(--font-size-3xl) !important; }

.u-font-normal { font-weight: var(--font-weight-normal) !important; }
.u-font-medium { font-weight: var(--font-weight-medium) !important; }
.u-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.u-font-bold { font-weight: var(--font-weight-bold) !important; }

.u-text-uppercase { text-transform: uppercase !important; }
.u-text-lowercase { text-transform: lowercase !important; }
.u-text-capitalize { text-transform: capitalize !important; }

.u-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.u-whitespace-nowrap { white-space: nowrap !important; }
.u-whitespace-normal { white-space: normal !important; }

.u-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.u-line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Text colors */
.u-text-primary { color: var(--primary-color) !important; }
.u-text-secondary { color: var(--secondary-color) !important; }
.u-text-success { color: var(--success) !important; }
.u-text-warning { color: var(--warning) !important; }
.u-text-error { color: var(--error) !important; }
.u-text-info { color: var(--info) !important; }
.u-text-muted { color: var(--text-muted) !important; }
.u-text-light { color: var(--text-light) !important; }
.u-text-inverse { color: var(--text-inverse) !important; }

/* -----------------------------------------------------------------------------
   Background Utilities
   ----------------------------------------------------------------------------- */
.u-bg-transparent { background-color: transparent !important; }
.u-bg-white { background-color: var(--bg-color) !important; }
.u-bg-alt { background-color: var(--bg-alt) !important; }
.u-bg-dark { background-color: var(--bg-dark) !important; }
.u-bg-primary { background-color: var(--primary-color) !important; }
.u-bg-secondary { background-color: var(--secondary-color) !important; }
.u-bg-success { background-color: var(--success) !important; }
.u-bg-warning { background-color: var(--warning) !important; }
.u-bg-error { background-color: var(--error) !important; }
.u-bg-info { background-color: var(--info) !important; }

.u-bg-success-light { background-color: var(--success-light) !important; }
.u-bg-warning-light { background-color: var(--warning-light) !important; }
.u-bg-error-light { background-color: var(--error-light) !important; }
.u-bg-info-light { background-color: var(--info-light) !important; }

/* -----------------------------------------------------------------------------
   Border Utilities
   ----------------------------------------------------------------------------- */
.u-border { border: 1px solid var(--border-color) !important; }
.u-border-0 { border: 0 !important; }
.u-border-top { border-top: 1px solid var(--border-color) !important; }
.u-border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.u-border-left { border-left: 1px solid var(--border-color) !important; }
.u-border-right { border-right: 1px solid var(--border-color) !important; }

.u-border-primary { border-color: var(--primary-color) !important; }
.u-border-success { border-color: var(--success) !important; }
.u-border-warning { border-color: var(--warning) !important; }
.u-border-error { border-color: var(--error) !important; }

.u-rounded-none { border-radius: 0 !important; }
.u-rounded-sm { border-radius: var(--radius-sm) !important; }
.u-rounded { border-radius: var(--radius) !important; }
.u-rounded-md { border-radius: var(--radius-md) !important; }
.u-rounded-lg { border-radius: var(--radius-lg) !important; }
.u-rounded-xl { border-radius: var(--radius-xl) !important; }
.u-rounded-full { border-radius: var(--radius-full) !important; }

/* -----------------------------------------------------------------------------
   Shadow Utilities
   ----------------------------------------------------------------------------- */
.u-shadow-none { box-shadow: none !important; }
.u-shadow-xs { box-shadow: var(--shadow-xs) !important; }
.u-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.u-shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* -----------------------------------------------------------------------------
   Positioning
   ----------------------------------------------------------------------------- */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-sticky { position: sticky !important; }
.u-static { position: static !important; }

.u-top-0 { top: 0 !important; }
.u-right-0 { right: 0 !important; }
.u-bottom-0 { bottom: 0 !important; }
.u-left-0 { left: 0 !important; }
.u-inset-0 { inset: 0 !important; }

/* -----------------------------------------------------------------------------
   Z-Index
   ----------------------------------------------------------------------------- */
.u-z-0 { z-index: 0 !important; }
.u-z-10 { z-index: 10 !important; }
.u-z-20 { z-index: 20 !important; }
.u-z-30 { z-index: 30 !important; }
.u-z-40 { z-index: 40 !important; }
.u-z-50 { z-index: 50 !important; }
.u-z-auto { z-index: auto !important; }

/* -----------------------------------------------------------------------------
   Overflow
   ----------------------------------------------------------------------------- */
.u-overflow-auto { overflow: auto !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-visible { overflow: visible !important; }
.u-overflow-scroll { overflow: scroll !important; }
.u-overflow-x-auto { overflow-x: auto !important; }
.u-overflow-y-auto { overflow-y: auto !important; }
.u-overflow-x-hidden { overflow-x: hidden !important; }
.u-overflow-y-hidden { overflow-y: hidden !important; }

/* -----------------------------------------------------------------------------
   Cursor
   ----------------------------------------------------------------------------- */
.u-cursor-pointer { cursor: pointer !important; }
.u-cursor-default { cursor: default !important; }
.u-cursor-not-allowed { cursor: not-allowed !important; }
.u-cursor-move { cursor: move !important; }
.u-cursor-grab { cursor: grab !important; }

/* -----------------------------------------------------------------------------
   Pointer Events
   ----------------------------------------------------------------------------- */
.u-pointer-events-none { pointer-events: none !important; }
.u-pointer-events-auto { pointer-events: auto !important; }

/* -----------------------------------------------------------------------------
   User Select
   ----------------------------------------------------------------------------- */
.u-select-none { user-select: none !important; }
.u-select-text { user-select: text !important; }
.u-select-all { user-select: all !important; }

/* -----------------------------------------------------------------------------
   Opacity
   ----------------------------------------------------------------------------- */
.u-opacity-0 { opacity: 0 !important; }
.u-opacity-25 { opacity: 0.25 !important; }
.u-opacity-50 { opacity: 0.5 !important; }
.u-opacity-75 { opacity: 0.75 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* -----------------------------------------------------------------------------
   Transitions
   ----------------------------------------------------------------------------- */
.u-transition { transition: all var(--transition-base) !important; }
.u-transition-fast { transition: all var(--transition-fast) !important; }
.u-transition-slow { transition: all var(--transition-slow) !important; }
.u-transition-none { transition: none !important; }

/* -----------------------------------------------------------------------------
   Animation
   ----------------------------------------------------------------------------- */
.u-animate-spin {
    animation: spin 1s linear infinite !important;
}

.u-animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.u-animate-bounce {
    animation: bounce 1s infinite !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* -----------------------------------------------------------------------------
   Visibility
   ----------------------------------------------------------------------------- */
.u-visible { visibility: visible !important; }
.u-invisible { visibility: hidden !important; }

/* Screen reader only */
.u-sr-only {
    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;
}

/* -----------------------------------------------------------------------------
   Print Utilities
   ----------------------------------------------------------------------------- */
@media print {
    .u-print-hidden { display: none !important; }
    .u-print-block { display: block !important; }
    .u-print-break-before { page-break-before: always !important; }
    .u-print-break-after { page-break-after: always !important; }
    .u-print-avoid-break { page-break-inside: avoid !important; }
}

/* -----------------------------------------------------------------------------
   Schedule Planner
   ----------------------------------------------------------------------------- */

/* Week view table */
.planner-week-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.planner-week-table th,
.planner-week-table td {
    border: 1px solid #e5e7eb;
    padding: 8px;
    vertical-align: top;
    text-align: left;
}
.planner-week-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
    white-space: nowrap;
}
.planner-week-table th.planner-day-header {
    cursor: pointer;
    transition: background 0.15s;
}
.planner-week-table th.planner-day-header:hover {
    background: #eff6ff;
    color: var(--primary-color);
}
.planner-week-table td {
    min-height: 60px;
    position: relative;
}
.planner-week-table td.planner-cell-empty {
    background: #fafafa;
}

/* Plan block card in week view */
.planner-block {
    position: relative;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    border-left: 4px solid var(--block-color, #6366f1);
    background: color-mix(in srgb, var(--block-color, #6366f1) 10%, white);
    font-size: 0.8rem;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.planner-block:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.planner-block .planner-block-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}
.planner-block .planner-block-time {
    color: #6b7280;
    font-size: 0.75rem;
}
.planner-block .planner-block-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 3px;
}
.planner-block .planner-block-badge.generated {
    background: #d1fae5;
    color: #065f46;
}

/* Empty cell placeholder */
.planner-add-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    font-size: 1.2rem;
}
.planner-add-placeholder:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #eff6ff;
}

/* Day view grid */
.planner-day-grid {
    display: grid;
    grid-template-columns: 60px repeat(var(--room-count, 4), 1fr);
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.planner-day-grid .planner-time-label {
    padding: 4px 6px;
    font-size: 0.7rem;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
    text-align: right;
    background: #f9fafb;
}
.planner-day-grid .planner-room-header {
    padding: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    color: #374151;
}
.planner-day-grid .planner-room-col {
    position: relative;
    border-left: 1px solid #e5e7eb;
    min-height: 30px;
    border-bottom: 1px solid #f3f4f6;
}
.planner-day-grid .planner-day-block {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    border-left: 3px solid var(--block-color, #6366f1);
    background: color-mix(in srgb, var(--block-color, #6366f1) 12%, white);
    padding: 4px 6px;
    font-size: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    transition: box-shadow 0.15s;
}
.planner-day-grid .planner-day-block:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 3;
}

/* Legend */
.planner-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.planner-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #4b5563;
}
.planner-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* Action bar */
.planner-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Mobile: stacked cards */
@media (max-width: 1023px) {
    .planner-week-table { display: none; }
    .planner-day-grid { display: none; }
    .planner-mobile-cards { display: block !important; }
}
@media (min-width: 1024px) {
    .planner-mobile-cards { display: none !important; }
}

.planner-mobile-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--block-color, #6366f1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.planner-mobile-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* -----------------------------------------------------------------------------
   Division Management Page
   ----------------------------------------------------------------------------- */
.division-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.division-stat-card {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.division-progress-bar {
    height: 0.5rem;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}
.division-progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}
.division-student-group {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
}
.division-student-group:hover {
    background: #f3f4f6;
}
.division-readiness-dot {
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.division-readiness-dot.dot-complete { color: #10b981; }
.division-readiness-dot.dot-partial  { color: #f59e0b; }
.division-readiness-dot.dot-none     { color: #d1d5db; }

@media (max-width: 768px) {
    .division-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .division-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   END OF MAIN.CSS
   ============================================================================= */