/**
 * UI Design System - Standard Components
 * 
 * This file defines reusable CSS classes for consistent styling across the application.
 * All classes use Tailwind utilities for maintainability.
 * 
 * Documentation: __documentation/UI_DESIGN_SYSTEM.md
 * Last Updated: 2025-11-26
 */

/* ==================================
   GOOGLE FONTS IMPORT
   ================================== */

@import url('../vendor/fonts/fonts.css');

/* Alpine.js x-cloak: hide elements until Alpine removes the attribute */
[x-cloak] { display: none !important; }

/* ==================================
   GLOBAL TYPOGRAPHY
   ================================== */

/**
 * Apply Open Sans to body and all elements (default)
 */
body,
html {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

/**
 * Apply Open Sans to all common elements
 */
p, span, div, a, button, input, textarea, select, label, li, td, th {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

/**
 * Apply EB Garamond to all h1 and h2 headings (override body font)
 * Using Regular weight (400) for elegant, refined appearance
 */
h1, h2,
.heading-page,
.heading-section,
.page-title {
    font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif !important;
    font-weight: 400 !important; /* Regular */
}

h1 {
    font-size: 2.5rem !important; /* 40px */
}

h2 {
    font-size: 2rem !important; /* 32px */
}

.route-number {
    font-size: 4rem !important;
    line-height: 1 !important;
}

/**
 * Typographic h2 effect for non-heading elements
 */
.heading-h2 {
    font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif !important;
    font-size: 1.6rem !important; /* 20% smaller than h2 */
    font-weight: 400 !important;
}

/**
 * Apply Open Sans to h3 (panel titles, card headers)
 * Keep as Open Sans to distinguish from main page headings
 */
h3,
.heading-card,
.heading-subsection,
.panel-title,
.card-title,
.modal-title {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 1.125rem !important; /* text-lg */
    font-weight: 600 !important; /* font-semibold */
    color: rgb(17 24 39) !important; /* text-gray-900 */
    line-height: 1.75rem !important;
}

/* ==================================
   FORM ELEMENTS
   ================================== */

/**
 * Custom Select Styling
 * Makes <select> elements match <input> field appearance
 * Removes native dropdown arrow and adds custom SVG
 */
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3E%3Cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3E%3C/svg%3E');
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* ==================================
   PANEL COMPONENTS
   ================================== */

/**
 * .panel - Default panel (most common)
 * Use for: Main content containers, form sections, data displays
 */
.panel {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow */
    padding: 1.5rem; /* p-6 */
}

/**
 * .panel-elevated - Elevated panel with larger shadow
 * Use for: Dashboard hero sections, important callouts
 */
.panel-elevated {
    background-color: white;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    padding: 1.5rem; /* p-6 */
}

/**
 * .panel-compact - Compact panel with horizontal padding
 * Use for: List items, table headers, compact layouts
 */
.panel-compact {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow */
    padding: 1rem 1.5rem; /* px-6 py-4 */
}

/**
 * .panel-borderless - Panel without shadow (for nested content)
 * Use for: Nested sections within panels
 */
.panel-borderless {
    background-color: rgb(249 250 251); /* bg-gray-50 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
}

/**
 * .panel-flat - Flat panel with border, no shadow
 * Use for: Filter sections, search bars, secondary containers
 */
.panel-flat {
    background-color: white;
    border: 1px solid rgb(229 231 235); /* border-gray-200 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
}

/**
 * .panel-flat-compact - Compact flat panel
 * Use for: Tight layouts, inline filters
 */
.panel-flat-compact {
    background-color: white;
    border: 1px solid rgb(229 231 235); /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
}

/**
 * .panel-minimal - Minimal panel with subtle background, no border
 * Use for: Very subtle containers, light emphasis
 */
.panel-minimal {
    background-color: rgb(249 250 251); /* bg-gray-50 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
}

/* ==================================
   STATUS COLORS
   ================================== */

.status-success {
    background-color: rgb(220 252 231); /* bg-green-100 */
    color: rgb(22 101 52); /* text-green-800 */
    border-color: rgb(187 247 208); /* border-green-200 */
}

.status-warning {
    background-color: rgb(254 249 195); /* bg-yellow-100 */
    color: rgb(133 77 14); /* text-yellow-800 */
    border-color: rgb(254 240 138); /* border-yellow-200 */
}

.status-error {
    background-color: rgb(254 226 226); /* bg-red-100 */
    color: rgb(153 27 27); /* text-red-800 */
    border-color: rgb(254 202 202); /* border-red-200 */
}

.status-info {
    background-color: rgb(219 234 254); /* bg-blue-100 */
    color: rgb(30 64 175); /* text-blue-800 */
    border-color: rgb(191 219 254); /* border-blue-200 */
}

.status-neutral {
    background-color: rgb(243 244 246); /* bg-gray-100 */
    color: rgb(31 41 55); /* text-gray-800 */
    border-color: rgb(229 231 235); /* border-gray-200 */
}

/* ==================================
   HERO GRADIENT CARDS
   ================================== */

.hero-card {
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    padding: 1.5rem; /* p-6 */
    color: white;
}

.hero-card-blue {
    background: linear-gradient(to bottom right, rgb(59 130 246), rgb(37 99 235)); /* from-blue-500 to-blue-600 */
}

.hero-card-green {
    background: linear-gradient(to bottom right, rgb(34 197 94), rgb(22 163 74)); /* from-green-500 to-green-600 */
}

.hero-card-purple {
    background: linear-gradient(to bottom right, rgb(168 85 247), rgb(147 51 234)); /* from-purple-500 to-purple-600 */
}

.hero-card-orange {
    background: linear-gradient(to bottom right, rgb(249 115 22), rgb(234 88 12)); /* from-orange-500 to-orange-600 */
}

.hero-card-red {
    background: linear-gradient(to bottom right, rgb(239 68 68), rgb(220 38 38)); /* from-red-500 to-red-600 */
}

.hero-card-indigo {
    background: linear-gradient(to bottom right, rgb(99 102 241), rgb(79 70 229)); /* from-indigo-500 to-indigo-600 */
}

/* ==================================
   PAGE HEADER COMPONENT
   ================================== */

/**
 * .page-header - Standardized page header container
 * Use for: Top of every page/fragment
 * Contains: Title (h1) + subtitle (p)
 */
.page-header {
    margin-bottom: 1.5rem; /* mb-6 */
}

.page-header h1,
.page-header .page-title {
    font-family: 'EB Garamond', serif !important;
    font-size: 2.5rem !important; /* 40px — matches h1 */
    font-weight: 500 !important; /* font-medium */
    color: rgb(17 24 39); /* text-gray-900 */
}

.page-header p,
.page-header .page-subtitle {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: rgb(75 85 99); /* text-gray-600 */
}

/* ==================================
   LAYOUT UTILITIES
   ================================== */

/**
 * .content-container - Shared width constraint for header, nav, and main content
 * Ensures consistent alignment across all major layout sections
 * 
 * Properties:
 * - max-w-7xl: Maximum width of 1280px (80rem)
 * - mx-auto: Horizontally centered
 * - px-4 sm:px-6 lg:px-8: Responsive horizontal padding
 *   - Mobile: 16px (1rem)
 *   - Tablet: 24px (1.5rem)
 *   - Desktop: 32px (2rem)
 */
.content-container {
    max-width: 80rem !important; /* 1280px = max-w-7xl */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important; /* px-4 */
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .content-container {
        padding-left: 1.5rem !important; /* sm:px-6 */
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .content-container {
        padding-left: 2rem !important; /* lg:px-8 */
        padding-right: 2rem !important;
    }
}

/* ==================================
   TYPOGRAPHY
   ================================== */

.heading-page {
    font-family: 'EB Garamond', serif !important;
    font-size: 2.5rem !important; /* 40px — matches h1 */
    font-weight: 500 !important; /* font-medium */
    color: rgb(17 24 39); /* text-gray-900 */
}

.heading-section {
    font-family: 'EB Garamond', serif !important;
    font-size: 2rem !important; /* 32px — matches h2 */
    font-weight: 500 !important; /* font-medium */
    color: rgb(17 24 39); /* text-gray-900 */
}

/* Heading classes are now defined in GLOBAL TYPOGRAPHY section above */
/* .heading-card and .heading-subsection now use h3 styling */

.text-body {
    font-size: 0.875rem; /* text-sm */
    color: rgb(75 85 99); /* text-gray-600 */
}

.text-body-emphasis {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: rgb(17 24 39); /* text-gray-900 */
}

.text-muted {
    font-size: 0.75rem; /* text-xs */
    color: rgb(107 114 128); /* text-gray-500 */
}

/* ==================================
   BUTTONS
   ================================== */

button.btn-primary,
.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    background-color: rgb(37 99 235) !important; /* bg-blue-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    line-height: 1.25rem !important; /* leading-5 */
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

button.btn-primary:hover,
.btn-primary:hover {
    background-color: rgb(29 78 216) !important; /* hover:bg-blue-700 */
}

button.btn-primary:focus,
.btn-primary:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3) !important; /* focus:ring-blue-300 */
}

button.btn-primary:active,
.btn-primary:active {
    background-color: rgb(30 64 175) !important; /* active:bg-blue-800 */
}

button.btn-primary:disabled,
.btn-primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

button.btn-secondary,
.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    background-color: white !important;
    border: 1px solid rgb(209 213 219) !important; /* border-gray-300 */
    color: rgb(55 65 81) !important; /* text-gray-700 */
    border-radius: 0.5rem !important; /* rounded-lg */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    line-height: 1.25rem !important; /* leading-5 */
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

button.btn-secondary:hover,
.btn-secondary:hover {
    background-color: rgb(249 250 251) !important; /* hover:bg-gray-50 */
}

button.btn-secondary:focus,
.btn-secondary:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.3) !important; /* focus:ring-gray-300 */
}

button.btn-secondary:disabled,
.btn-secondary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

button.btn-danger,
.btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    background-color: rgb(220 38 38) !important; /* bg-red-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    line-height: 1.25rem !important; /* leading-5 */
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

button.btn-danger:hover,
.btn-danger:hover {
    background-color: rgb(185 28 28) !important; /* hover:bg-red-700 */
}

button.btn-danger:focus,
.btn-danger:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3) !important; /* focus:ring-red-300 */
}

button.btn-danger:active,
.btn-danger:active {
    background-color: rgb(153 27 27) !important; /* active:bg-red-800 */
}

button.btn-danger:disabled,
.btn-danger:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

button.btn-link,
a.btn-link,
.btn-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
    background-color: transparent !important;
    border: none !important;
    font-size: 0.875rem !important; /* text-sm */
    color: rgb(37 99 235) !important; /* text-blue-600 */
    font-weight: 500 !important; /* font-medium */
    line-height: 1.25rem !important; /* leading-5 */
    cursor: pointer !important;
    transition: color 0.15s ease-in-out !important;
}

button.btn-link:hover,
a.btn-link:hover,
.btn-link:hover {
    color: rgb(29 78 216) !important; /* hover:text-blue-700 */
    text-decoration: underline !important;
}

button.btn-link:focus,
a.btn-link:focus,
.btn-link:focus {
    outline: none !important;
    color: rgb(29 78 216) !important; /* focus:text-blue-700 */
}

button.btn-link:disabled,
a.btn-link:disabled,
.btn-link:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Button Sizes */
button.btn-sm,
.btn-sm {
    padding: 0.375rem 0.75rem !important; /* px-3 py-1.5 */
    font-size: 0.75rem !important; /* text-xs */
}

button.btn-lg,
.btn-lg {
    padding: 0.625rem 1.25rem !important; /* px-5 py-2.5 */
    font-size: 1rem !important; /* text-base */
}

/* Button with icon spacing */
.btn-primary svg,
.btn-secondary svg,
.btn-danger svg,
.btn-link svg {
    flex-shrink: 0;
}

/* ==================================
   SPACING UTILITIES
   ================================== */

.space-y-default > * + * {
    margin-top: 1.5rem; /* 24px */
}

/* ==================================
   RESPONSIVE UTILITIES
   ================================== */

/* Ensure panels stack properly on mobile */
@media (max-width: 768px) {
    .panel,
    .panel-elevated,
    .panel-compact {
        border-radius: 0.5rem; /* Keep rounded-lg on mobile */
    }
}

/* ==================================
   FORM ELEMENTS - EXTENDED
   ================================== */

/**
 * .form-input - Standard input field
 * Use for: All text inputs, textareas, selects
 */
.form-input,
input.form-input,
textarea.form-input,
select.form-input {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
    border: 1px solid rgb(209 213 219) !important; /* border-gray-300 */
    border-radius: 0.375rem !important; /* rounded-md */
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.25rem !important;
    color: rgb(17 24 39) !important; /* text-gray-900 */
    background-color: white !important;
    transition: all 0.15s ease-in-out !important;
}

.form-input:focus,
input.form-input:focus,
textarea.form-input:focus,
select.form-input:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    border-color: rgb(59 130 246) !important; /* border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; /* ring-blue-500 */
}

.form-input:disabled,
input.form-input:disabled,
textarea.form-input:disabled,
select.form-input:disabled {
    background-color: rgb(243 244 246) !important; /* bg-gray-100 */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.form-input::placeholder,
input.form-input::placeholder,
textarea.form-input::placeholder {
    color: rgb(156 163 175) !important; /* text-gray-400 */
}

/* Textarea variant */
textarea.form-input {
    resize: vertical !important;
    min-height: 80px !important;
}

/* Select dropdown - extends existing .form-select */
select.form-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3E%3Cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3E%3C/svg%3E') !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
}

/**
 * .form-label - Standard form label
 */
.form-label,
label.form-label {
    display: block !important;
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    color: rgb(55 65 81) !important; /* text-gray-700 */
    margin-bottom: 0.25rem !important; /* mb-1 */
}

/**
 * .form-help-text - Helper text below inputs
 */
.form-help-text {
    font-size: 0.75rem !important; /* text-xs */
    color: rgb(107 114 128) !important; /* text-gray-500 */
    margin-top: 0.25rem !important; /* mt-1 */
}

/**
 * .form-error-text - Error message text
 */
.form-error-text {
    font-size: 0.75rem !important; /* text-xs */
    color: rgb(220 38 38) !important; /* text-red-600 */
    margin-top: 0.25rem !important; /* mt-1 */
}

/**
 * .form-group - Wrapper for label + input + help text
 */
.form-group {
    margin-bottom: 1rem !important; /* mb-4 */
}

/* ==================================
   ALERT/MESSAGE COMPONENTS
   ================================== */

/**
 * Alert boxes for success, error, warning, info messages
 */
.alert {
    padding: 1rem !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    border-width: 1px !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.alert-success {
    background-color: rgb(220 252 231) !important; /* bg-green-50 */
    border-color: rgb(187 247 208) !important; /* border-green-200 */
    color: rgb(22 101 52) !important; /* text-green-800 */
}

.alert-error {
    background-color: rgb(254 226 226) !important; /* bg-red-50 */
    border-color: rgb(254 202 202) !important; /* border-red-200 */
    color: rgb(153 27 27) !important; /* text-red-800 */
}

.alert-warning {
    background-color: rgb(254 249 195) !important; /* bg-yellow-50 */
    border-color: rgb(254 240 138) !important; /* border-yellow-200 */
    color: rgb(133 77 14) !important; /* text-yellow-800 */
}

.alert-info {
    background-color: rgb(219 234 254) !important; /* bg-blue-50 */
    border-color: rgb(191 219 254) !important; /* border-blue-200 */
    color: rgb(30 64 175) !important; /* text-blue-800 */
}

.alert-icon {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.alert-content {
    flex: 1 !important;
}

.alert-title {
    font-weight: 500 !important;
    margin-bottom: 0.25rem !important;
}

.alert-close {
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.15s ease-in-out !important;
}

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

/* ==================================
   BADGE/STATUS COMPONENTS
   ================================== */

/**
 * Status badges for tables and lists
 */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.625rem !important; /* px-2.5 py-1 */
    border-radius: 9999px !important; /* rounded-full */
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 500 !important; /* font-medium */
    line-height: 1rem !important;
}

.badge-sm {
    padding: 0.125rem 0.5rem !important; /* px-2 py-0.5 */
    font-size: 0.6875rem !important;
}

.badge-lg {
    padding: 0.375rem 0.75rem !important; /* px-3 py-1.5 */
    font-size: 0.875rem !important; /* text-sm */
}

.badge-success {
    background-color: rgb(220 252 231) !important; /* bg-green-100 */
    color: rgb(22 101 52) !important; /* text-green-800 */
}

.badge-danger {
    background-color: rgb(254 226 226) !important; /* bg-red-100 */
    color: rgb(153 27 27) !important; /* text-red-800 */
}

.badge-warning {
    background-color: rgb(254 249 195) !important; /* bg-yellow-100 */
    color: rgb(133 77 14) !important; /* text-yellow-800 */
}

.badge-info {
    background-color: rgb(219 234 254) !important; /* bg-blue-100 */
    color: rgb(30 64 175) !important; /* text-blue-800 */
}

.badge-neutral {
    background-color: rgb(243 244 246) !important; /* bg-gray-100 */
    color: rgb(31 41 55) !important; /* text-gray-800 */
}

.badge-purple {
    background-color: rgb(243 232 255) !important; /* bg-purple-100 */
    color: rgb(107 33 168) !important; /* text-purple-800 */
}

/* Badge with icon */
.badge-icon {
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin-right: 0.25rem !important;
}

/* ==================================
   LOADING/SPINNER COMPONENTS
   ================================== */

/**
 * Loading spinner
 */
.spinner {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    border-top-color: rgb(59, 130, 246) !important; /* blue-500 */
    border-radius: 50% !important;
    animation: spin 0.6s linear infinite !important;
}

.spinner-sm {
    width: 0.75rem !important;
    height: 0.75rem !important;
    border-width: 1.5px !important;
}

.spinner-lg {
    width: 2rem !important;
    height: 2rem !important;
    border-width: 3px !important;
}

.spinner-white {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
}

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

/**
 * Loading overlay (full screen)
 */
.loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

/**
 * Loading state for buttons
 */
.btn-loading {
    position: relative !important;
    pointer-events: none !important;
}

.btn-loading .spinner {
    margin-right: 0.5rem !important;
}

/* ==================================
   EMPTY STATE COMPONENTS
   ================================== */

/**
 * Empty state for tables/lists with no data
 */
.empty-state {
    text-align: center !important;
    padding: 3rem 1.5rem !important;
    color: rgb(107 114 128) !important; /* text-gray-500 */
}

.empty-state-icon {
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 auto 1rem !important;
    color: rgb(209 213 219) !important; /* text-gray-300 */
}

.empty-state-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: rgb(55 65 81) !important; /* text-gray-700 */
    margin-bottom: 0.5rem !important;
}

.empty-state-description {
    font-size: 0.875rem !important;
    color: rgb(107 114 128) !important; /* text-gray-500 */
    margin-bottom: 1rem !important;
}

.empty-state-action {
    margin-top: 1rem !important;
}

/* ==================================
   MODAL COMPONENTS
   ================================== */

/**
 * Modal overlay and container
 */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    padding: 1rem !important;
}

.modal-container {
    background-color: white !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
    max-width: 32rem !important; /* max-w-lg */
    width: 100% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.modal-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid rgb(229 231 235) !important; /* border-gray-200 */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modal-header h3,
.modal-header .modal-title {
    margin: 0 !important;
    font-size: 1.125rem !important; /* text-lg */
    font-weight: 600 !important; /* font-semibold */
}

/* Modal title now defined in GLOBAL TYPOGRAPHY section */

.modal-close {
    background: none !important;
    border: none !important;
    padding: 0.25rem !important;
    cursor: pointer !important;
    color: rgb(107 114 128) !important; /* text-gray-500 */
    transition: color 0.15s ease-in-out !important;
}

.modal-close:hover {
    color: rgb(55 65 81) !important; /* text-gray-700 */
}

.modal-body {
    padding: 1.5rem !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

.modal-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid rgb(229 231 235) !important; /* border-gray-200 */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

/* Modal sizes */
.modal-container-sm {
    max-width: 24rem !important; /* max-w-md */
}

.modal-container-lg {
    max-width: 48rem !important; /* max-w-3xl */
}

.modal-container-xl {
    max-width: 64rem !important; /* max-w-5xl */
}

/* ==================================
   UTILITY CLASSES
   ================================== */

/**
 * Additional button variants
 */
.btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: transparent !important;
    border: 1px solid rgb(37 99 235) !important; /* border-blue-600 */
    color: rgb(37 99 235) !important; /* text-blue-600 */
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-outline:hover {
    background-color: rgb(37 99 235) !important; /* bg-blue-600 */
    color: white !important;
}

.btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: transparent !important;
    border: none !important;
    color: rgb(55 65 81) !important; /* text-gray-700 */
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-ghost:hover {
    background-color: rgb(243 244 246) !important; /* bg-gray-100 */
}

/**
 * Divider
 */
.divider {
    border-top: 1px solid rgb(229 231 235) !important; /* border-gray-200 */
    margin: 1.5rem 0 !important;
}

/**
 * Card
 */
.card {
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    overflow: hidden !important;
}

.card-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid rgb(229 231 235) !important;
}

.card-header h3,
.card-header .card-title {
    margin: 0 !important;
    font-size: 1.125rem !important; /* text-lg */
    font-weight: 600 !important; /* font-semibold */
}

.card-body {
    padding: 1.5rem !important;
}

.card-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid rgb(229 231 235) !important;
    background-color: rgb(249 250 251) !important; /* bg-gray-50 */
}

/* ==================================
   DARK MODE SUPPORT (Future)
   ================================== */

/* Uncomment when implementing dark mode
@media (prefers-color-scheme: dark) {
    .panel,
    .panel-elevated,
    .panel-compact {
        background-color: rgb(31 41 55); // bg-gray-800
        color: rgb(243 244 246); // text-gray-100
    }
    
    .panel-borderless {
        background-color: rgb(55 65 81); // bg-gray-700
    }
}
*/