/*
 * =============================================================================
 * Copyright (c) 2026 Paseo Platform LLC. All rights reserved.
 *
 * CONFIDENTIAL AND PROPRIETARY
 *
 * This file is part of the Paseo Platform software system and constitutes
 * proprietary trade secret information of Paseo Platform LLC. This source
 * code is protected under applicable trade secret laws and may not be
 * copied, modified, distributed, or disclosed without the express written
 * permission of Paseo Platform LLC.
 *
 * For licensing inquiries: www.paseoplatform.com
 * =============================================================================
 */

/**
 * Paseo Platform - Design System
 * Dutch Design Week Inspired Visual Identity
 * Bold Typography, Generous Whitespace, Purposeful Color
 * Version: 3.0.0 - Complete Design Specification Implementation
 */

/* =============================================================================
   CSS Variables - Design Tokens (Per Specification Section 9.1)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Brand Colors - Paseo Purple (Section 2.2.1)
       ------------------------------------------------------------------------- */
    --color-primary: #4527a0;
    --color-primary-light: #7c4dff;
    --color-primary-dark: #311b92;

    /* Accent Colors - Paseo Cyan (Section 2.2.1) */
    --color-accent: #0288d1;
    --color-accent-light: #4fc3f7;
    --color-accent-dark: #01579b;

    /* Secondary Accent - Paseo Pink (Section 2.2.1) */
    --color-pink: #d81b60;
    --color-pink-light: #ff6ec7;
    --color-pink-dark: #880e4f;

    /* -------------------------------------------------------------------------
       Neutral Colors (Section 2.2.2)
       ------------------------------------------------------------------------- */
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F0F3F6;
    --color-gray-200: #E1E7ED;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9AA5B1;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-black: #111827;

    /* -------------------------------------------------------------------------
       Semantic Colors (Section 2.2.3)
       ------------------------------------------------------------------------- */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-success-dark: #065F46;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-warning-dark: #92400E;
    --color-danger: #EF4444;
    --color-danger-light: #FEE2E2;
    --color-danger-dark: #991B1B;
    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;
    --color-info-dark: #1E40AF;

    /* -------------------------------------------------------------------------
       Typography (Section 2.3)
       ------------------------------------------------------------------------- */
    --font-primary: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

    /* Type Scale (Section 2.3.2) */
    --text-display-xl: clamp(48px, 8vw, 100px);
    --text-display: clamp(36px, 5vw, 64px);
    --text-h1: clamp(28px, 3vw, 36px);
    --text-h2: clamp(22px, 2.5vw, 28px);
    --text-h3: clamp(18px, 2vw, 22px);
    --text-body-lg: clamp(16px, 1.5vw, 20px);
    --text-body: 16px;
    --text-body-sm: 14px;
    --text-caption: 12px;
    --text-overline: 11px;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-none: 1.0;
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.7;

    /* Letter Spacing */
    --tracking-tighter: -3px;
    --tracking-tight: -2px;
    --tracking-normal: 0;
    --tracking-wide: 0.5px;
    --tracking-wider: 1.5px;
    --tracking-widest: 2px;

    /* -------------------------------------------------------------------------
       Spacing System - 8px Base Grid (Section 2.4)
       ------------------------------------------------------------------------- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Legacy spacing aliases for backwards compatibility */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* -------------------------------------------------------------------------
       Border Radius (Section 2.5)
       ------------------------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
       Shadow System - Navy-based (Section 2.6)
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(28, 54, 84, 0.05);
    --shadow-md: 0 4px 6px rgba(28, 54, 84, 0.1);
    --shadow-lg: 0 10px 15px rgba(28, 54, 84, 0.1);
    --shadow-xl: 0 20px 25px rgba(28, 54, 84, 0.15);
    --shadow-hover: 0 12px 24px rgba(28, 54, 84, 0.12);

    /* -------------------------------------------------------------------------
       Animation & Transitions (Section 6.1)
       ------------------------------------------------------------------------- */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --duration-loader: 1500ms;

    --ease-default: ease;
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;

    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-theme: 300ms ease;

    /* -------------------------------------------------------------------------
       Layout (Section 4.1)
       ------------------------------------------------------------------------- */
    --sidebar-width-expanded: 260px;
    --sidebar-width-collapsed: 64px;
    --topbar-height: 64px;
    --topbar-height-desktop: 72px;
    --navbar-height: 80px;
    --content-max-width: 1400px;
    --search-bar-width: 320px;

    /* Navigation item sizing */
    --nav-item-height: 48px;
    --nav-item-padding-x: 16px;
    --nav-item-padding-y: 12px;
    --nav-item-radius: 8px;
    --nav-item-icon-size: 20px;
    --nav-item-border-left: 3px;

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

    /* -------------------------------------------------------------------------
       Responsive Breakpoints (Section 8.2)
       ------------------------------------------------------------------------- */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* -------------------------------------------------------------------------
       Legacy aliases for backwards compatibility
       ------------------------------------------------------------------------- */
    --ds-primary: var(--color-primary);
    --ds-primary-dark: var(--color-primary-dark);
    --ds-primary-light: var(--color-primary-light);
    --ds-primary-bg: var(--color-gray-100);
    --ds-accent: var(--color-accent);
    --ds-accent-dark: var(--color-accent-dark);
    --ds-accent-light: var(--color-accent-light);
    --ds-accent-bg: #FDF6E8;
    --ds-secondary: var(--color-primary-light);
    --ds-secondary-dark: var(--color-primary);
    --ds-secondary-light: var(--color-gray-200);
    --ds-surface: var(--color-white);
    --ds-surface-hover: var(--color-gray-50);
    --ds-background: var(--color-gray-100);
    --ds-background-alt: var(--color-gray-50);
    --ds-text-primary: var(--color-gray-800);
    --ds-text-secondary: var(--color-gray-500);
    --ds-text-muted: var(--color-gray-400);
    --ds-text-disabled: var(--color-gray-300);
    --ds-text-inverse: var(--color-white);
    --ds-success: var(--color-success);
    --ds-success-dark: var(--color-success-dark);
    --ds-success-bg: var(--color-success-light);
    --ds-warning: var(--color-warning);
    --ds-warning-dark: var(--color-warning-dark);
    --ds-warning-bg: var(--color-warning-light);
    --ds-danger: var(--color-danger);
    --ds-danger-dark: var(--color-danger-dark);
    --ds-danger-bg: var(--color-danger-light);
    --ds-info: var(--color-info);
    --ds-info-dark: var(--color-info-dark);
    --ds-info-bg: var(--color-info-light);
    --ds-border: var(--color-gray-200);
    --ds-border-light: var(--color-gray-100);
    --ds-border-dark: var(--color-gray-300);
    --ds-border-focus: var(--color-accent);
    --ds-table-header-bg: var(--color-gray-100);
    --ds-table-header-color: var(--color-gray-700);
    --ds-shadow-xs: var(--shadow-sm);
    --ds-shadow-sm: var(--shadow-sm);
    --ds-shadow-md: var(--shadow-md);
    --ds-shadow-lg: var(--shadow-lg);
    --ds-shadow-xl: var(--shadow-xl);
    --ds-radius-sm: var(--radius-sm);
    --ds-radius-md: var(--radius-md);
    --ds-radius-lg: var(--radius-lg);
    --ds-radius-xl: var(--radius-xl);
    --ds-radius-full: var(--radius-full);
    --ds-sidebar-width: var(--sidebar-width-expanded);
    --ds-sidebar-collapsed: var(--sidebar-width-collapsed);
    --ds-topbar-height: var(--topbar-height);
    --ds-content-max-width: var(--content-max-width);
    --ds-font-sans: var(--font-primary);
    --ds-font-mono: var(--font-mono);
    --ds-text-xs: 12px;
    --ds-text-sm: 14px;
    --ds-text-base: 16px;
    --ds-text-lg: 18px;
    --ds-text-xl: 20px;
    --ds-text-2xl: 24px;
    --ds-text-3xl: 30px;
    --ds-font-normal: var(--font-normal);
    --ds-font-medium: var(--font-medium);
    --ds-font-semibold: var(--font-semibold);
    --ds-font-bold: var(--font-bold);
    --ds-leading-tight: var(--leading-tight);
    --ds-leading-normal: var(--leading-normal);
    --ds-leading-relaxed: var(--leading-relaxed);
    --ds-transition-fast: var(--transition-fast);
    --ds-transition-normal: var(--transition-normal);
    --ds-transition-slow: var(--transition-slow);
    --ds-z-dropdown: var(--z-dropdown);
    --ds-z-sticky: var(--z-sticky);
    --ds-z-fixed: var(--z-fixed);
    --ds-z-modal-backdrop: var(--z-modal-backdrop);
    --ds-z-modal: var(--z-modal);
    --ds-z-popover: var(--z-popover);
    --ds-z-tooltip: var(--z-tooltip);
}

/* =============================================================================
   Dark Mode (Section 4.5.2)
   ============================================================================= */

[data-theme="dark"],
.theme-dark {
    /* Background hierarchy - deep navy-purple */
    --color-white: #0a0a1a;
    --color-gray-50: #14142e;
    --color-gray-100: #1e1e44;
    --color-gray-200: #2a2a55;
    --color-gray-300: #4a4a7a;
    --color-gray-400: #9090b0;
    --color-gray-500: #b0b0cc;
    --color-gray-600: #d0d0e8;
    --color-gray-700: #e8e8f4;
    --color-gray-800: #f5f5ff;
    --color-black: #ffffff;

    /* Purple primary for dark mode (brighter) */
    --color-primary: #7c4dff;
    --color-primary-dark: #4527a0;
    --color-primary-light: #b388ff;

    /* Cyan accent for dark mode (brighter) */
    --color-accent: #4fc3f7;
    --color-accent-dark: #0288d1;
    --color-accent-light: #80d8ff;

    /* Pink accent for dark mode */
    --color-pink: #ff6ec7;
    --color-pink-dark: #d81b60;
    --color-pink-light: #ff94d8;

    /* Sidebar darker in dark mode */
    --sidebar-bg: #080818;

    /* Updated shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.6);

    /* Table headers - solid dark purple to avoid rgba blending issues */
    --ds-table-header-bg: #1a1245;
    --ds-table-header-color: var(--color-primary-light);

    /* Semantic background colors — translucent for dark mode */
    --ds-success-bg: rgba(105, 240, 174, 0.12);
    --ds-warning-bg: rgba(255, 190, 74, 0.12);
    --ds-danger-bg: rgba(255, 107, 107, 0.12);
    --ds-info-bg: rgba(100, 216, 255, 0.12);
    --color-success-light: rgba(105, 240, 174, 0.15);
    --color-danger-light: rgba(255, 107, 107, 0.15);
    --color-warning-light: rgba(255, 190, 74, 0.15);
    --color-info-light: rgba(100, 216, 255, 0.15);

    /* Update legacy aliases */
    --ds-surface: var(--color-gray-50);
    --ds-surface-hover: var(--color-gray-100);
    --ds-background: var(--color-white);
    --ds-background-alt: var(--color-gray-50);
    --ds-text-primary: var(--color-gray-800);
    --ds-text-secondary: var(--color-gray-400);
    --ds-text-muted: var(--color-gray-300);
    --ds-border: var(--color-gray-200);
    --ds-border-light: var(--color-gray-100);
    --ds-border-dark: var(--color-gray-300);
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --color-white: #0a0a1a;
        --color-gray-50: #14142e;
        --color-gray-100: #1e1e44;
        --color-gray-200: #2a2a55;
        --color-gray-300: #4a4a7a;
        --color-gray-400: #9090b0;
        --color-gray-500: #b0b0cc;
        --color-gray-600: #d0d0e8;
        --color-gray-700: #e8e8f4;
        --color-gray-800: #f5f5ff;
        --color-black: #ffffff;
        --color-primary: #7c4dff;
        --color-primary-dark: #4527a0;
        --color-primary-light: #b388ff;
        --color-accent: #4fc3f7;
        --color-accent-dark: #0288d1;
        --color-accent-light: #80d8ff;
        --color-pink: #ff6ec7;
        --color-pink-dark: #d81b60;
        --color-pink-light: #ff94d8;
        --sidebar-bg: #080818;
    }
}

/* =============================================================================
   High Contrast Mode (Section 4.5.3)
   ============================================================================= */

[data-theme="high-contrast"],
.theme-high-contrast {
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-100: #FFFFFF;
    --color-gray-200: #000000;
    --color-gray-800: #000000;

    /* Maximum contrast */
    --ds-surface: #FFFFFF;
    --ds-background: #FFFFFF;
    --ds-text-primary: #000000;
    --ds-border: #000000;

    /* Thicker borders */
    --border-width: 2px;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* High contrast focus indicators */
[data-theme="high-contrast"] :focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
}

/* Always underline links in high contrast */
[data-theme="high-contrast"] a {
    text-decoration: underline !important;
}

/* Thicker icon strokes in high contrast */
[data-theme="high-contrast"] svg {
    stroke-width: 2.5px;
}

/* =============================================================================
   Theme Transition (Section 4.5.4)
   ============================================================================= */

.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 300ms ease,
                color 300ms ease,
                border-color 300ms ease,
                box-shadow 300ms ease !important;
}

/* =============================================================================
   Dark Mode Enhancements (Section 4.5.5)
   ============================================================================= */

/* Gradient card backgrounds for dark mode */
[data-theme="dark"] .card,
[data-theme="dark"] .card-paseo {
    background: linear-gradient(145deg, #14142e, #1e1e44);
    border-color: #2a2a55;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .card-paseo:hover {
    box-shadow: 0 8px 32px rgba(124, 77, 255, 0.1);
}

/* Dark mode accordions */
[data-theme="dark"] .accordion-item {
    background: #1e1e44;
    border-color: #2a2a55;
    color: #e0e0e0;
}

[data-theme="dark"] .accordion-button {
    background: #1e1e44;
    color: #e0e0e0;
    border-color: #2a2a55;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: #14142e;
    color: #b388ff;
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .accordion-body {
    background: #14142e;
    color: #d0d0e8;
    border-top-color: #2a2a55;
}

/* Dark mode sidebar gradient */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #080818 0%, #14142e 100%);
}

/* Dark mode topbar */
[data-theme="dark"] .topbar {
    background: #0a0a1a;
    border-bottom-color: rgba(124, 77, 255, 0.15);
}

/* Dark mode form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #14142e !important;
    border-color: #2a2a55 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9090b0 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #7c4dff !important;
    box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.25) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: #1e1e44 !important;
    border-color: #2a2a55 !important;
    color: #9090b0 !important;
}

/* Dark mode tables */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #d0d0e8;
    --bs-table-border-color: #2a2a55;
    --bs-table-striped-bg: rgba(20, 20, 46, 0.5);
    --bs-table-hover-bg: rgba(124, 77, 255, 0.06);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
    background: var(--ds-table-header-bg) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    color: var(--ds-table-header-color) !important;
    font-weight: 600;
}

[data-theme="dark"] .table tbody tr {
    border-bottom-color: #2a2a55;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(20, 20, 46, 0.4);
    color: #d0d0e8;
}

/* Dark mode modals */
[data-theme="dark"] .modal-content {
    background: linear-gradient(145deg, #14142e, #1e1e44);
    border-color: #2a2a55;
}

/* Dark mode dropdown menus */
[data-theme="dark"] .dropdown-menu {
    background: #14142e;
    border-color: #2a2a55;
}

[data-theme="dark"] .dropdown-item {
    color: #d0d0e8;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(124, 77, 255, 0.1);
    color: #f5f5ff;
}

/* Dark mode gradient primary buttons */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-paseo-primary {
    background: linear-gradient(135deg, #7c4dff, #b388ff);
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(124, 77, 255, 0.3);
}

/* Dark mode outline buttons — ADA compliant contrast (4.5:1 minimum) */
[data-theme="dark"] .btn-outline-primary {
    color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}
[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-gray-500) !important;  /* #b0b0cc — 8.5:1 contrast */
    border-color: var(--color-gray-300) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--color-gray-200) !important;
    color: var(--color-gray-700) !important;
}
[data-theme="dark"] .btn-outline-light {
    color: var(--color-gray-700) !important;
    border-color: var(--color-gray-300) !important;
}
[data-theme="dark"] .btn-outline-info {
    color: var(--color-accent-light) !important;
    border-color: var(--color-accent-light) !important;
}
[data-theme="dark"] .btn-outline-success {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}
[data-theme="dark"] .btn-outline-warning {
    color: var(--ds-warning) !important;
    border-color: var(--ds-warning) !important;
}
[data-theme="dark"] .btn-outline-danger {
    color: var(--ds-danger) !important;
    border-color: var(--ds-danger) !important;
}

/* Dark mode focus rings */
[data-theme="dark"] *:focus-visible {
    outline-color: #7c4dff;
}

/* Dark mode badges with translucent backgrounds */
[data-theme="dark"] .badge.bg-primary { background-color: rgba(124, 77, 255, 0.2) !important; color: #b388ff !important; }
[data-theme="dark"] .badge.bg-success { background-color: rgba(105, 240, 174, 0.15) !important; color: #69f0ae !important; }
[data-theme="dark"] .badge.bg-danger { background-color: rgba(255, 107, 107, 0.15) !important; color: #ff9494 !important; }
[data-theme="dark"] .badge.bg-warning { background-color: rgba(255, 190, 74, 0.15) !important; color: #ffcf6e !important; }
[data-theme="dark"] .badge.bg-info { background-color: rgba(100, 216, 255, 0.15) !important; color: #80e0ff !important; }
[data-theme="dark"] .badge.bg-secondary { background-color: rgba(144, 144, 176, 0.15) !important; color: #b0b0cc !important; }
[data-theme="dark"] .badge.bg-uploaded { background-color: rgba(100, 216, 255, 0.15) !important; color: #80e0ff !important; }
[data-theme="dark"] .badge.bg-processing { background-color: rgba(124, 77, 255, 0.2) !important; color: #b388ff !important; }
[data-theme="dark"] .badge.bg-completed { background-color: rgba(105, 240, 174, 0.15) !important; color: #69f0ae !important; }
[data-theme="dark"] .badge.bg-failed { background-color: rgba(255, 107, 107, 0.15) !important; color: #ff9494 !important; }

/* Dark mode Bootstrap component overrides */
[data-theme="dark"] .card {
    background: linear-gradient(145deg, #14142e, #1e1e44) !important;
    border-color: #2a2a55 !important;
    color: #d0d0e8;
}

[data-theme="dark"] .card-header {
    background: rgba(124, 77, 255, 0.08) !important;
    border-bottom-color: #2a2a55 !important;
    color: #e0e0e0;
}

[data-theme="dark"] .card-body {
    background: transparent !important;
}

[data-theme="dark"] .list-group-item {
    background: #14142e !important;
    border-color: #2a2a55 !important;
    color: #d0d0e8;
}

[data-theme="dark"] .list-group-item:hover {
    background: rgba(124, 77, 255, 0.06) !important;
}

/* Dark mode alerts */
[data-theme="dark"] .alert {
    border-color: #2a2a55;
}

[data-theme="dark"] .alert-warning {
    background: rgba(255, 190, 74, 0.1) !important;
    border-color: rgba(255, 190, 74, 0.25) !important;
    color: #ffcf6e !important;
}

[data-theme="dark"] .alert-danger {
    background: rgba(255, 107, 107, 0.1) !important;
    border-color: rgba(255, 107, 107, 0.25) !important;
    color: #ff9494 !important;
}

[data-theme="dark"] .alert-success {
    background: rgba(105, 240, 174, 0.1) !important;
    border-color: rgba(105, 240, 174, 0.25) !important;
    color: #69f0ae !important;
}

[data-theme="dark"] .alert-info {
    background: rgba(100, 216, 255, 0.1) !important;
    border-color: rgba(100, 216, 255, 0.25) !important;
    color: #80e0ff !important;
}

[data-theme="dark"] .alert-info ul,
[data-theme="dark"] .alert-info li,
[data-theme="dark"] .alert-info strong {
    color: inherit !important;
}

[data-theme="dark"] .alert .alert-link {
    color: inherit !important;
    filter: brightness(1.2);
}

/* Dark mode text and headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #e8e8f4;
}

[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div {
    color: inherit;
}

[data-theme="dark"] .text-muted {
    color: #9090b0 !important;
}

/* text-muted inside alerts should stay readable against alert backgrounds */
[data-theme="dark"] .alert .text-muted,
[data-theme="dark"] .alert small,
[data-theme="dark"] .alert p {
    color: inherit !important;
    opacity: 0.85;
}

[data-theme="dark"] .text-secondary {
    color: #b0b0cc !important;
}

/* Dark mode links */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.sidebar-nav-link):not(.topbar-dropdown-item) {
    color: #80d8ff;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.sidebar-nav-link):not(.topbar-dropdown-item):hover {
    color: #b388ff;
}

/* Dark mode borders */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: #2a2a55 !important;
}

[data-theme="dark"] hr {
    border-color: #2a2a55;
    opacity: 0.5;
}

/* Dark mode table text */
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: #d0d0e8 !important;
}

[data-theme="dark"] td strong,
[data-theme="dark"] th strong {
    color: #f5f5ff !important;
}

/* Dark mode Bootstrap bg-light overrides */
[data-theme="dark"] .bg-light {
    background-color: rgba(124, 77, 255, 0.12) !important;
    color: #d0d0e8 !important;
}

[data-theme="dark"] .bg-white {
    background-color: #1e1e44 !important;
    color: #d0d0e8 !important;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: #1a1245 !important;
    color: #b388ff !important;
    border-color: #2a2a55 !important;
}

/* Override inline hardcoded light backgrounds in dark mode */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"] {
    background: #1e1e44 !important;
    color: #d0d0e8 !important;
}

[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"] {
    background: #14142e !important;
    color: #d0d0e8 !important;
}

[data-theme="dark"] .text-dark {
    color: #d0d0e8 !important;
}

/* Dark mode breadcrumb */
[data-theme="dark"] .breadcrumb-item {
    color: #9090b0;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #d0d0e8;
}

/* Dark mode pagination */
[data-theme="dark"] .page-link {
    background: #14142e !important;
    border-color: #2a2a55 !important;
    color: #d0d0e8 !important;
}

[data-theme="dark"] .page-link:hover {
    background: rgba(124, 77, 255, 0.15) !important;
    border-color: #7c4dff !important;
    color: #b388ff !important;
}

[data-theme="dark"] .page-item.active .page-link {
    background: linear-gradient(135deg, #7c4dff, #b388ff) !important;
    border-color: transparent !important;
    color: #fff !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background: #1e1e44 !important;
    border-color: #2a2a55 !important;
    color: #9090b0 !important;
}

/* Dark mode nav-tabs */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: #2a2a55;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #9090b0;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #2a2a55;
    color: #d0d0e8;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: #14142e;
    border-color: #2a2a55 #2a2a55 #14142e;
    color: #e0e0e0;
}

/* Dark mode page background */
[data-theme="dark"] .main-content,
[data-theme="dark"] .content-area {
    background: #0a0a1a;
}

/* Dark mode onboarding banner */
[data-theme="dark"] .alert-success.onboarding-banner,
[data-theme="dark"] [style*="background: linear-gradient"] {
    opacity: 0.85;
}

/* ================================================================
   Dark Mode — Global Catch-All Overrides
   These target common Bootstrap and platform patterns that appear
   across many templates with hardcoded light backgrounds.
   ================================================================ */

/* Progress bars */
[data-theme="dark"] .progress {
    background-color: var(--color-gray-200) !important;
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-primary) !important;
}

/* Table footer/total rows with light backgrounds */
[data-theme="dark"] tfoot tr,
[data-theme="dark"] tr.total-row,
[data-theme="dark"] .total-row {
    background: var(--color-gray-50) !important;
    color: var(--ds-text-primary) !important;
}

/* Bootstrap card variants */
[data-theme="dark"] .card-header {
    background: var(--color-gray-100) !important;
    border-bottom-color: var(--ds-border) !important;
    color: var(--ds-text-primary) !important;
}
[data-theme="dark"] .card-footer {
    background: var(--color-gray-100) !important;
    border-top-color: var(--ds-border) !important;
    color: var(--ds-text-primary) !important;
}

/* Stat cards / metric boxes with light backgrounds */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .usage-card {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-primary) !important;
}

/* Form containers and action bars */
[data-theme="dark"] .form-container,
[data-theme="dark"] .action-bar,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .sticky-bottom,
[data-theme="dark"] .fixed-bottom-bar {
    background: var(--color-gray-50) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-primary) !important;
}

/* Quick entry and task list items */
[data-theme="dark"] .task-item,
[data-theme="dark"] .quick-entry-item,
[data-theme="dark"] .entry-row {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
}

/* Day cells / calendar / workload heatmap cells */
[data-theme="dark"] .day-cell,
[data-theme="dark"] .workload-cell {
    border-color: var(--ds-border) !important;
}

/* Memo / note boxes */
[data-theme="dark"] .memo-box,
[data-theme="dark"] .note-box,
[data-theme="dark"] blockquote {
    background: var(--color-gray-50) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-primary) !important;
}

/* Toggle switches (Bootstrap form-check) */
[data-theme="dark"] .form-check-input {
    background-color: var(--color-gray-200) !important;
    border-color: var(--color-gray-300) !important;
}
[data-theme="dark"] .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .form-switch .form-check-input {
    background-color: var(--color-gray-200) !important;
}
[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--color-primary) !important;
}

/* Dark mode generic white module/card backgrounds
   Catches .module, .card, and other container elements across all pages */
[data-theme="dark"] .module {
    background: var(--ds-surface) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .module table {
    background: transparent !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
    background: var(--ds-surface) !important;
    color: var(--ds-text-primary) !important;
}

/* Dark mode Plotly/chart containers */
[data-theme="dark"] .js-plotly-plot,
[data-theme="dark"] .plotly,
[data-theme="dark"] .plot-container,
[data-theme="dark"] .svg-container {
    background: transparent !important;
}
[data-theme="dark"] .js-plotly-plot .main-svg {
    background: transparent !important;
}

/* Dark mode alert variants */
[data-theme="dark"] .alert-warning {
    background: var(--ds-warning-bg) !important;
    border-color: var(--ds-warning) !important;
    color: var(--ds-warning) !important;
}
[data-theme="dark"] .alert-info {
    background: rgba(100, 216, 255, 0.1) !important;
    border-color: rgba(100, 216, 255, 0.3) !important;
    color: #b3e5fc !important;
}

/* Dark mode inline style overrides
   Catches hardcoded background/color values in template inline styles */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] { background: var(--ds-surface) !important; }
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] { background: var(--color-gray-50) !important; }
[data-theme="dark"] [style*="background: #f5f5f5"],
[data-theme="dark"] [style*="background:#f5f5f5"] { background: var(--color-gray-50) !important; }
[data-theme="dark"] [style*="background: #f0fff0"],
[data-theme="dark"] [style*="background:#f0fff0"] { background: var(--ds-success-bg) !important; }
[data-theme="dark"] [style*="background: #fff0f0"],
[data-theme="dark"] [style*="background:#fff0f0"] { background: var(--ds-danger-bg) !important; }
[data-theme="dark"] [style*="background: #e8f4f8"],
[data-theme="dark"] [style*="background:#e8f4f8"] { background: var(--color-gray-50) !important; }
[data-theme="dark"] [style*="border-bottom: 1px solid #ddd"],
[data-theme="dark"] [style*="border-bottom: 1px solid #eee"] { border-bottom-color: var(--ds-border) !important; }

/* background-color variants (some templates use background-color instead of background) */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"] { background-color: var(--ds-surface) !important; }
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"] { background-color: var(--ds-surface) !important; }
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"] { background-color: var(--color-gray-50) !important; }
[data-theme="dark"] [style*="background-color: #f5f5f5"],
[data-theme="dark"] [style*="background-color:#f5f5f5"] { background-color: var(--color-gray-50) !important; }
[data-theme="dark"] [style*="background-color: #fff3cd"],
[data-theme="dark"] [style*="background-color:#fff3cd"] { background-color: var(--ds-warning-bg) !important; }
[data-theme="dark"] [style*="background-color: #f8d7da"],
[data-theme="dark"] [style*="background-color:#f8d7da"] { background-color: var(--ds-danger-bg) !important; }
[data-theme="dark"] [style*="background-color: #d1e7dd"],
[data-theme="dark"] [style*="background-color:#d1e7dd"] { background-color: var(--ds-success-bg) !important; }

/* border-color variants */
[data-theme="dark"] [style*="border: 1px solid #dee2e6"],
[data-theme="dark"] [style*="border: 1px solid #ddd"],
[data-theme="dark"] [style*="border: 1px solid #eee"] { border-color: var(--ds-border) !important; }
[data-theme="dark"] [style*="border-bottom: 2px solid #dee2e6"] { border-bottom-color: var(--ds-border) !important; }

/* =============================================================================
   Reduced Motion (Section 6.3)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Replace loader animation with static state */
    .paseo-loader {
        animation: none !important;
    }
}

/* =============================================================================
   Base Styles
   ============================================================================= */

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

body.ds-body {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-base);
    line-height: var(--ds-leading-normal);
    color: var(--ds-text-primary);
    background-color: var(--ds-background);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   App Layout - Sidebar + Main Content
   ============================================================================= */

.ds-app-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.ds-sidebar {
    width: var(--ds-sidebar-width);
    background: var(--ds-surface);
    border-right: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--ds-z-fixed);
    transition: width var(--ds-transition-normal), transform var(--ds-transition-normal);
}

.ds-sidebar.collapsed {
    width: var(--ds-sidebar-collapsed);
}

.ds-sidebar-header {
    padding: var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-height: var(--ds-topbar-height);
}

.ds-sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.ds-sidebar-brand {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ds-sidebar-brand-name {
    font-weight: var(--ds-font-semibold);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-sidebar-brand-sub {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-sidebar.collapsed .ds-sidebar-brand {
    display: none;
}

.ds-sidebar-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ds-text-secondary);
    cursor: pointer;
    border-radius: var(--ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
    flex-shrink: 0;
}

.ds-sidebar-toggle:hover {
    background: var(--ds-background);
    color: var(--ds-text-primary);
}

/* Sidebar Navigation */
.ds-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-space-2) 0;
}

.ds-nav-section {
    margin-bottom: var(--ds-space-2);
}

.ds-nav-section-header {
    padding: var(--ds-space-3) var(--ds-space-4);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.ds-sidebar.collapsed .ds-nav-section-header {
    justify-content: center;
    padding: var(--ds-space-3) var(--ds-space-2);
}

.ds-sidebar.collapsed .ds-nav-section-header span {
    display: none;
}

.ds-nav-section-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--ds-transition-fast);
}

.ds-nav-section.collapsed .ds-nav-section-toggle {
    transform: rotate(-90deg);
}

.ds-nav-section.collapsed .ds-nav-items {
    display: none;
}

.ds-nav-item {
    display: flex;
    align-items: center;
    padding: var(--ds-space-3) var(--ds-space-4);
    color: var(--ds-text-secondary);
    text-decoration: none;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    border-left: 3px solid transparent;
    transition: all var(--ds-transition-fast);
    gap: var(--ds-space-3);
}

.ds-nav-item:hover {
    background: var(--ds-background);
    color: var(--ds-text-primary);
}

.ds-nav-item.active {
    background: var(--ds-primary-bg);
    color: var(--ds-primary);
    border-left-color: var(--ds-primary);
}

.ds-nav-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-nav-item-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-sidebar.collapsed .ds-nav-item-text {
    display: none;
}

.ds-sidebar.collapsed .ds-nav-item {
    justify-content: center;
    padding: var(--ds-space-3) var(--ds-space-2);
}

.ds-nav-item-badge {
    background: var(--ds-danger);
    color: white;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    padding: 2px 6px;
    border-radius: var(--ds-radius-full);
    min-width: 18px;
    text-align: center;
}

.ds-sidebar.collapsed .ds-nav-item-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    padding: 1px 4px;
}

/* Sidebar Footer */
.ds-sidebar-footer {
    padding: var(--ds-space-4);
    border-top: 1px solid var(--ds-border);
}

/* Main Wrapper */
.ds-main-wrapper {
    flex: 1;
    margin-left: var(--ds-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--ds-transition-normal);
}

.ds-sidebar.collapsed ~ .ds-main-wrapper {
    margin-left: var(--ds-sidebar-collapsed);
}

/* Top Bar */
.ds-topbar {
    height: var(--ds-topbar-height);
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ds-space-6);
    position: sticky;
    top: 0;
    z-index: var(--ds-z-sticky);
}

.ds-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
}

.ds-topbar-title {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-text-primary);
}

.ds-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

/* Main Content */
.ds-main-content {
    flex: 1;
    padding: var(--ds-space-6);
    max-width: var(--ds-content-max-width);
}

/* =============================================================================
   Card Components
   ============================================================================= */

.ds-card {
    background: var(--ds-surface);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    border: 1px solid var(--ds-border-light);
    overflow: hidden;
    transition: box-shadow var(--ds-transition-fast);
}

.ds-card:hover {
    box-shadow: var(--ds-shadow-md);
}

.ds-card-header {
    padding: var(--ds-space-4) var(--ds-space-6);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ds-surface);
}

.ds-card-title {
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-card-title-icon {
    color: var(--ds-text-secondary);
}

.ds-card-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-card-body {
    padding: var(--ds-space-6);
}

.ds-card-body-compact {
    padding: var(--ds-space-4);
}

.ds-card-footer {
    padding: var(--ds-space-4) var(--ds-space-6);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-background);
}

/* Card Variants */
.ds-card-flat {
    box-shadow: none;
    border: 1px solid var(--ds-border);
}

.ds-card-flat:hover {
    box-shadow: none;
}

.ds-card-elevated {
    box-shadow: var(--ds-shadow-md);
}

.ds-card-elevated:hover {
    box-shadow: var(--ds-shadow-lg);
}

/* =============================================================================
   Button Components
   ============================================================================= */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-4);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-leading-tight);
    border-radius: var(--ds-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ds-transition-fast);
    white-space: nowrap;
}

.ds-btn:focus {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

.ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

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

/* Secondary Button */
.ds-btn-secondary {
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    border-color: var(--ds-border);
}

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

/* Ghost Button */
.ds-btn-ghost {
    background: transparent;
    color: var(--ds-text-secondary);
    border-color: transparent;
}

.ds-btn-ghost:hover:not(:disabled) {
    background: var(--ds-background);
    color: var(--ds-text-primary);
}

/* Danger Button */
.ds-btn-danger {
    background: var(--ds-danger);
    color: var(--ds-text-inverse);
    border-color: var(--ds-danger);
}

.ds-btn-danger:hover:not(:disabled) {
    background: var(--ds-danger-dark);
    border-color: var(--ds-danger-dark);
}

/* Button Sizes */
.ds-btn-sm {
    padding: var(--ds-space-1) var(--ds-space-3);
    font-size: var(--ds-text-xs);
}

.ds-btn-lg {
    padding: var(--ds-space-3) var(--ds-space-6);
    font-size: var(--ds-text-base);
}

/* Icon Button */
.ds-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.ds-btn-icon.ds-btn-sm {
    width: 28px;
    height: 28px;
}

.ds-btn-icon.ds-btn-lg {
    width: 44px;
    height: 44px;
}

/* =============================================================================
   Badge Components
   ============================================================================= */

.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
}

.ds-badge-primary {
    background: var(--ds-primary-bg);
    color: var(--ds-primary);
}

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

.ds-badge-success {
    background: var(--ds-success-bg);
    color: var(--ds-success-dark);
}

.ds-badge-warning {
    background: var(--ds-warning-bg);
    color: var(--ds-warning-dark);
}

.ds-badge-danger {
    background: var(--ds-danger-bg);
    color: var(--ds-danger-dark);
}

.ds-badge-info {
    background: var(--ds-info-bg);
    color: var(--ds-info-dark);
}

/* =============================================================================
   List Components
   ============================================================================= */

.ds-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ds-list-item {
    display: flex;
    align-items: center;
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border-light);
    transition: background-color var(--ds-transition-fast);
}

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

.ds-list-item:hover {
    background: var(--ds-surface-hover);
}

.ds-list-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-background);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--ds-space-3);
    color: var(--ds-text-secondary);
    flex-shrink: 0;
}

.ds-list-item-content {
    flex: 1;
    min-width: 0;
}

.ds-list-item-title {
    font-weight: var(--ds-font-medium);
    color: var(--ds-text-primary);
    margin-bottom: 2px;
}

.ds-list-item-subtitle {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
}

.ds-list-item-action {
    color: var(--ds-primary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
}

.ds-list-item-action:hover {
    color: var(--ds-primary-dark);
}

/* =============================================================================
   Form Components
   ============================================================================= */

.ds-form-group {
    margin-bottom: var(--ds-space-4);
}

.ds-form-label {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-text-primary);
    margin-bottom: var(--ds-space-2);
}

.ds-form-input {
    width: 100%;
    padding: var(--ds-space-2) var(--ds-space-3);
    font-size: var(--ds-text-sm);
    font-family: var(--ds-font-sans);
    color: var(--ds-text-primary);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.ds-form-input:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-bg);
}

.ds-form-input::placeholder {
    color: var(--ds-text-muted);
}

.ds-form-help {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    margin-top: var(--ds-space-1);
}

.ds-form-error {
    font-size: var(--ds-text-xs);
    color: var(--ds-danger);
    margin-top: var(--ds-space-1);
}

/* =============================================================================
   Dropdown Components
   ============================================================================= */

.ds-dropdown {
    position: relative;
    display: inline-block;
}

.ds-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-lg);
    z-index: var(--ds-z-dropdown);
    padding: var(--ds-space-2) 0;
    display: none;
}

.ds-dropdown.open .ds-dropdown-menu {
    display: block;
}

.ds-dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--ds-space-2) var(--ds-space-4);
    color: var(--ds-text-primary);
    text-decoration: none;
    font-size: var(--ds-text-sm);
    transition: background-color var(--ds-transition-fast);
    gap: var(--ds-space-2);
}

.ds-dropdown-item:hover {
    background: var(--ds-background);
}

.ds-dropdown-item.active {
    background: var(--ds-primary-bg);
    color: var(--ds-primary);
}

.ds-dropdown-divider {
    height: 1px;
    background: var(--ds-border);
    margin: var(--ds-space-2) 0;
}

.ds-dropdown-header {
    padding: var(--ds-space-2) var(--ds-space-4);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-text-muted);
    text-transform: uppercase;
}

/* =============================================================================
   Responsive Styles
   ============================================================================= */

@media (max-width: 1024px) {
    .ds-sidebar {
        transform: translateX(-100%);
    }

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

    .ds-main-wrapper {
        margin-left: 0;
    }

    .ds-sidebar.collapsed ~ .ds-main-wrapper {
        margin-left: 0;
    }

    .ds-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--ds-z-fixed) - 1);
        display: none;
    }

    .ds-sidebar.open ~ .ds-sidebar-overlay {
        display: block;
    }
}

@media (max-width: 640px) {
    .ds-main-content {
        padding: var(--ds-space-4);
    }

    .ds-card-body {
        padding: var(--ds-space-4);
    }

    .ds-topbar {
        padding: 0 var(--ds-space-4);
    }
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.ds-text-primary { color: var(--ds-text-primary); }
.ds-text-secondary { color: var(--ds-text-secondary); }
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-success { color: var(--ds-success); }
.ds-text-warning { color: var(--ds-warning); }
.ds-text-danger { color: var(--ds-danger); }

.ds-bg-surface { background: var(--ds-surface); }
.ds-bg-background { background: var(--ds-background); }
.ds-bg-primary { background: var(--ds-primary); }

.ds-flex { display: flex; }
.ds-flex-col { flex-direction: column; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-4 { gap: var(--ds-space-4); }

.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-p-4 { padding: var(--ds-space-4); }

.ds-rounded { border-radius: var(--ds-radius-md); }
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }
.ds-shadow { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }

/* =============================================================================
   App Layout - Main Container Structure
   ============================================================================= */

.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--ds-background);
}

.main-wrapper {
    flex: 1;
    margin-left: var(--ds-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--ds-transition-fast);
}

.sidebar.collapsed ~ .main-wrapper,
.app-layout.sidebar-collapsed .main-wrapper {
    margin-left: var(--ds-sidebar-collapsed);
}

.main-content {
    flex: 1;
    padding: var(--ds-space-4);
    padding-top: calc(var(--ds-topbar-height) + var(--ds-space-4));
    max-width: 100%;
    overflow-x: hidden;
}

/* Responsive main wrapper */
@media (max-width: 768px) {
    .main-wrapper {
        margin-left: 0;
    }

    .main-content {
        padding: var(--ds-space-4);
        padding-top: calc(var(--ds-topbar-height) + var(--ds-space-4));
    }

    .sidebar.collapsed ~ .main-wrapper {
        margin-left: 0;
    }
}

/* =============================================================================
   Print Styles
   ============================================================================= */

@media print {
    .sidebar,
    .topbar,
    .sidebar-backdrop {
        display: none !important;
    }

    .main-wrapper {
        margin-left: 0 !important;
    }

    .main-content {
        padding: 0 !important;
        padding-top: 0 !important;
    }
}

/* =============================================================================
   Bootstrap Enhancement - Cards
   Enhances Bootstrap .card to match design system styling
   ============================================================================= */

.card {
    background: var(--ds-surface, #ffffff);
    border: 1px solid var(--ds-border, #e5e7eb);
    border-radius: var(--ds-radius-lg, 12px);
    box-shadow: var(--ds-shadow-sm);
    transition: box-shadow var(--ds-transition-fast, 0.15s) ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--ds-shadow-md);
}

.card-header {
    background: var(--ds-surface, #ffffff);
    border-bottom: 1px solid var(--ds-border, #e5e7eb);
    padding: var(--ds-space-4, 1rem) var(--ds-space-6, 1.5rem);
    font-weight: 600;
}

.card-header:first-child {
    border-radius: calc(var(--ds-radius-lg, 12px) - 1px) calc(var(--ds-radius-lg, 12px) - 1px) 0 0;
}

.card-body {
    padding: var(--ds-space-6, 1.5rem);
}

.card-footer {
    background: var(--ds-background, #f5f7fa);
    border-top: 1px solid var(--ds-border, #e5e7eb);
    padding: var(--ds-space-4, 1rem) var(--ds-space-6, 1.5rem);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--ds-radius-lg, 12px) - 1px) calc(var(--ds-radius-lg, 12px) - 1px);
}

/* Stat cards - colored top border */
.stat-card {
    border-top-width: 3px;
}

.stat-card.danger { border-top-color: var(--ds-danger, #ef4444); }
.stat-card.warning { border-top-color: var(--ds-warning, #f59e0b); }
.stat-card.info { border-top-color: var(--ds-info, #3b82f6); }
.stat-card.success { border-top-color: var(--ds-success, #10b981); }
.stat-card.primary { border-top-color: var(--ds-primary, #0066ff); }

/* =============================================================================
   Bootstrap Enhancement - Buttons
   Updates Bootstrap buttons to use design system colors
   ============================================================================= */

.btn-primary {
    background-color: var(--ds-primary, #0066ff);
    border-color: var(--ds-primary, #0066ff);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ds-primary-dark, #0052cc);
    border-color: var(--ds-primary-dark, #0052cc);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--ds-primary-dark, #0052cc);
    border-color: var(--ds-primary-dark, #0052cc);
}

.btn-outline-primary {
    color: var(--ds-primary, #0066ff);
    border-color: var(--ds-primary, #0066ff);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ds-primary, #0066ff);
    border-color: var(--ds-primary, #0066ff);
    color: white;
}

/* Link color */
a {
    color: var(--ds-primary, #0066ff);
}

a:hover {
    color: var(--ds-primary-dark, #0052cc);
}

/* =============================================================================
   Bootstrap Enhancement - Tables
   ============================================================================= */

.table {
    --bs-table-bg: transparent;
}

.table thead th {
    font-weight: 600;
    color: var(--ds-text-secondary, #6b7280);
    border-bottom-width: 2px;
}

.table-hover tbody tr:hover {
    background-color: var(--ds-surface-hover, #f9fafb);
}

/* =============================================================================
   Bootstrap Enhancement - Alerts
   ============================================================================= */

.alert {
    border-radius: var(--ds-radius-md, 8px);
    border: none;
}

/* =============================================================================
   Bootstrap Enhancement - Badges
   ============================================================================= */

.badge {
    font-weight: 500;
    padding: 0.25em 0.6em;
}

/* =============================================================================
   Page Headers
   ============================================================================= */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ds-space-6, 1.5rem);
    flex-wrap: wrap;
    gap: var(--ds-space-4, 1rem);
}

.page-header h1,
.page-header h2 {
    margin: 0;
    font-weight: 600;
    color: var(--ds-text-primary, #1a1a2e);
}

.page-header .lead {
    color: var(--ds-text-secondary, #6b7280);
    margin: 0;
}

/* =============================================================================
   Quick Link Cards
   ============================================================================= */

.quick-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--ds-transition-fast, 0.15s) ease;
}

.quick-link:hover {
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.quick-link .card {
    transition: box-shadow var(--ds-transition-fast, 0.15s) ease,
                transform var(--ds-transition-fast, 0.15s) ease;
}

.quick-link:hover .card {
    box-shadow: var(--ds-shadow-lg);
}

/* =============================================================================
   Stat Numbers
   ============================================================================= */

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* =============================================================================
   Activity Items
   ============================================================================= */

.activity-item {
    border-left: 3px solid var(--ds-border, #e5e7eb);
    padding-left: var(--ds-space-4, 1rem);
    margin-bottom: var(--ds-space-3, 0.75rem);
}

.activity-item.completed { border-left-color: var(--ds-success, #10b981); }
.activity-item.work-order { border-left-color: var(--ds-primary, #0066ff); }
.activity-item.inspection { border-left-color: #8b5cf6; }
.activity-item.pending { border-left-color: var(--ds-warning, #f59e0b); }
.activity-item.overdue { border-left-color: var(--ds-danger, #ef4444); }