/* Global Design System - Light Mode (Default) */
:root {
    /* Primary Colors - Green (for main UI elements, buttons, highlights) */
    --primary-color: #56ab2f;
    --primary-dark: #3d7a20;
    --primary-light: #6fc142;
    --primary-gradient-start: #56ab2f;
    --primary-gradient-end: #3d7a20;

    /* Secondary Colors - Sky Blue (for header, FAB button, accents) */
    --secondary-color: #4fc3f7;
    --secondary-dark: #29b6f6;
    --secondary-light: #81d4fa;
    --secondary-gradient-start: #4fc3f7;
    --secondary-gradient-end: #29b6f6;

    /* Accent Colors */
    --accent-orange: #ff9800;
    --accent-red: #f44336;
    --accent-green-success: #4caf50;

    /* Text Colors - Light Mode */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #767676; /* Updated for WCAG AA compliance (4.54:1) */
    --text-inverse: #ffffff;

    /* Background Colors - Light Mode */
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #f7f7f7;
    --background-elevated: #ffffff;

    /* Surface Colors */
    --surface-card: #ffffff;
    --surface-header: #8dbb28;
    --surface-nav: #2b4b6f;

    /* Border Colors */
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --border-dark: #999999; /* Improved for better visibility */

    /* Input Colors */
    --input-background: #ffffff;
    --input-border: #999999; /* Updated for WCAG AA compliance (2.85:1 - acceptable for UI components) */
    --input-focus-border: #2b4b6f;
    --input-text: #333333;

    /* Shadows - Light Mode */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.2);
    --shadow-primary: 0 6px 20px rgba(86, 171, 47, 0.4);
    --shadow-secondary: 0 6px 20px rgba(79, 195, 247, 0.4);

    /* Status Colors */
    --status-success: #4caf50;
    --status-success-bg: #f0f9f3;
    --status-warning: #d39e00; /* Updated for WCAG AA compliance (4.52:1) - was #ffc107 */
    --status-warning-bg: #fff9f0;
    --status-error: #dc3545;
    --status-error-bg: #fff0f0;
    --status-info: #2196F3;
    --status-info-bg: #e8f4fd;

    /* Dashboard Status Colors */
    --pdi-ready: #28a745;
    --pdi-ready-bg: linear-gradient(135deg, #ffffff 0%, #f0f9f3 100%);
    --pdi-developing: #ffc107;
    --pdi-developing-bg: linear-gradient(135deg, #ffffff 0%, #fff9f0 100%);
    --pdi-needs-work: #dc3545;
    --pdi-needs-work-bg: linear-gradient(135deg, #ffffff 0%, #fff0f0 100%);
    --pdi-no-data: #6c757d;
    --pdi-no-data-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

    /* Typography */
    --font-family-base: Arial, sans-serif;
    --font-family-heading: "Helvetica Neue", Arial, sans-serif;

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-circle: 50%;

    /* Focus Indicators - WCAG 2.2 Compliant */
    --focus-outline-color: #4fc3f7;
    --focus-outline-width: 3px;
    --focus-outline-style: solid;
    --focus-outline-offset: 2px;
}

/* ========================================
   WCAG 2.2 Accessibility Enhancements
   ======================================== */

/* Visible Focus Indicators for Keyboard Navigation */
*:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Enhanced focus for interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
}

/* Skip to main content link (for screen readers and keyboard users) */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999999;
    padding: 1em;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.skip-to-main:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

/* Ensure sufficient color contrast for links */
a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:focus {
    text-decoration-thickness: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible (hide outline for mouse users, show for keyboard) */
.focus-visible:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Reduced motion support for users with vestibular disorders */
@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;
    }
}

/* Dark Mode - Automatically applies when system preference is dark OR manually enabled */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Text Colors - Dark Mode (lighter for better visibility) */
        --text-primary: #e8e8e8;
        --text-secondary: #c8c8c8;
        --text-muted: #a8a8a8;
        --text-inverse: #1a1a1a;

        /* Background Colors - Dark Mode (slightly lighter for better comfort) */
        --background-primary: #1e1e1e;
        --background-secondary: #2a2a2a;
        --background-tertiary: #242424;
        --background-elevated: #2a2a2a;

        /* Surface Colors - Dark Mode */
        --surface-card: #2a2a2a;
        --surface-header: #6d9820; /* Slightly darker green for dark mode */
        --surface-nav: #1e3449;

        /* Border Colors - Dark Mode */
        --border-color: #404040;
        --border-light: #333333;
        --border-dark: #555555;

        /* Input Colors - Dark Mode */
        --input-background: #2a2a2a;
        --input-border: #404040;
        --input-focus-border: #4fc3f7;
        --input-text: #d1d1d1;

        /* Shadows - Dark Mode (more subtle) */
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
        --shadow-lg: 0 6px 20px rgba(0,0,0,0.5);
        --shadow-primary: 0 6px 20px rgba(86, 171, 47, 0.3);
        --shadow-secondary: 0 6px 20px rgba(79, 195, 247, 0.3);

        /* Status Colors - Dark Mode (slightly adjusted for better contrast) */
        --status-success-bg: #1a3a1c;
        --status-warning-bg: #3a3010;
        --status-error-bg: #3a1a1a;
        --status-info-bg: #1a2a3a;

        /* Dashboard Status Colors - Dark Mode */
        --pdi-ready-bg: linear-gradient(135deg, #2a2a2a 0%, #1a3a1c 100%);
        --pdi-developing-bg: linear-gradient(135deg, #2a2a2a 0%, #3a3010 100%);
        --pdi-needs-work-bg: linear-gradient(135deg, #2a2a2a 0%, #3a1a1a 100%);
        --pdi-no-data-bg: linear-gradient(135deg, #2a2a2a 0%, #242424 100%);
    }

    /* Body background in dark mode */
    body {
        background-color: var(--background-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Cards and elevated surfaces */
    .card,
    .metric-card,
    .pdi-card,
    .login-container,
    .dropdown-menu {
        background-color: var(--surface-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Input fields */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        background-color: var(--input-background) !important;
        color: var(--input-text) !important;
        border-color: var(--input-border) !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--input-focus-border) !important;
    }

    /* Tables */
    table {
        color: var(--text-primary) !important;
    }

    table thead {
        background-color: var(--background-tertiary) !important;
    }

    table tbody tr {
        border-bottom: 1px solid var(--border-color) !important;
    }

    table tbody tr:hover {
        background-color: var(--background-secondary) !important;
    }

    /* Dropdown menus */
    .dropdown-menu a {
        color: var(--text-primary) !important;
    }

    .dropdown-menu a:hover {
        background-color: var(--background-secondary) !important;
    }

    /* Mobile bottom nav - Dark mode */
    .mobile-bottom-nav {
        background: var(--surface-nav) !important;
    }

    /* Alerts */
    .alert {
        color: var(--text-primary) !important;
    }
    /* Fix btn-close position and colour in dark alerts */
    .alert-dismissible {
        position: relative !important;
        padding-right: 3rem !important;
    }
    .alert-dismissible .btn-close {
        position: absolute !important;
        top: 50% !important;
        right: 0.75rem !important;
        transform: translateY(-50%) !important;
        filter: invert(1) grayscale(100%) brightness(200%) !important;
        opacity: 0.75 !important;
    }
    .alert-success {
        background-color: var(--status-success-bg) !important;
        border-color: #2d5a30 !important;
        color: #a3d9a5 !important;
    }
    .alert-danger {
        background-color: var(--status-error-bg) !important;
        border-color: #6b2c2c !important;
        color: #f0a0a0 !important;
    }
    .alert-warning {
        background-color: var(--status-warning-bg) !important;
        border-color: #5a4a10 !important;
        color: #f0d080 !important;
    }
    .alert-info {
        background-color: var(--status-info-bg) !important;
        border-color: #1e3a5a !important;
        color: #90c8f0 !important;
    }

    /* Footer */
    footer {
        background-color: var(--background-secondary) !important;
        color: var(--text-secondary) !important;
    }

    /* Chart.js - Improve visibility in dark mode */
    canvas {
        filter: brightness(0.9) contrast(1.1);
    }
}

/* Manual Dark Mode - When user explicitly sets dark mode */
:root[data-theme="dark"] {
    /* Text Colors - Dark Mode (lighter for better visibility) */
    --text-primary: #e8e8e8;
    --text-secondary: #c8c8c8;
    --text-muted: #a8a8a8;
    --text-inverse: #1a1a1a;

    /* Background Colors - Dark Mode (slightly lighter for better comfort) */
    --background-primary: #1e1e1e;
    --background-secondary: #2a2a2a;
    --background-tertiary: #242424;
    --background-elevated: #2a2a2a;

    /* Surface Colors - Dark Mode */
    --surface-card: #2a2a2a;
    --surface-header: #6d9820;
    --surface-nav: #1e3449;

    /* Border Colors - Dark Mode */
    --border-color: #404040;
    --border-light: #333333;
    --border-dark: #555555;

    /* Input Colors - Dark Mode */
    --input-background: #2a2a2a;
    --input-border: #404040;
    --input-focus-border: #4fc3f7;
    --input-text: #d1d1d1;

    /* Shadows - Dark Mode (more subtle) */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.5);
    --shadow-primary: 0 6px 20px rgba(86, 171, 47, 0.3);
    --shadow-secondary: 0 6px 20px rgba(79, 195, 247, 0.3);

    /* Status Colors - Dark Mode */
    --status-success-bg: #1a3a1c;
    --status-warning-bg: #3a3010;
    --status-error-bg: #3a1a1a;
    --status-info-bg: #1a2a3a;

    /* Dashboard Status Colors - Dark Mode */
    --pdi-ready-bg: linear-gradient(135deg, #2a2a2a 0%, #1a3a1c 100%);
    --pdi-developing-bg: linear-gradient(135deg, #2a2a2a 0%, #3a3010 100%);
    --pdi-needs-work-bg: linear-gradient(135deg, #2a2a2a 0%, #3a1a1a 100%);
    --pdi-no-data-bg: linear-gradient(135deg, #2a2a2a 0%, #242424 100%);
}

:root[data-theme="dark"] body {
    background-color: var(--background-primary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .pdi-card,
:root[data-theme="dark"] .login-container,
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background-color: var(--input-background) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

:root[data-theme="dark"] table {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] table thead {
    background-color: var(--background-tertiary) !important;
}

:root[data-theme="dark"] table tbody tr {
    border-bottom: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] table tbody tr:hover {
    background-color: var(--background-secondary) !important;
}

:root[data-theme="dark"] .dropdown-menu a {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .dropdown-menu a:hover {
    background-color: var(--background-secondary) !important;
}

:root[data-theme="dark"] .mobile-bottom-nav {
    background: var(--surface-nav) !important;
}

:root[data-theme="dark"] footer {
    background-color: var(--background-secondary) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .alert-dismissible {
    position: relative !important;
    padding-right: 3rem !important;
}
:root[data-theme="dark"] .alert-dismissible .btn-close {
    position: absolute !important;
    top: 50% !important;
    right: 0.75rem !important;
    transform: translateY(-50%) !important;
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.75 !important;
}
:root[data-theme="dark"] .alert-success {
    background-color: var(--status-success-bg) !important;
    border-color: #2d5a30 !important;
    color: #a3d9a5 !important;
}
:root[data-theme="dark"] .alert-danger {
    background-color: var(--status-error-bg) !important;
    border-color: #6b2c2c !important;
    color: #f0a0a0 !important;
}
:root[data-theme="dark"] .alert-warning {
    background-color: var(--status-warning-bg) !important;
    border-color: #5a4a10 !important;
    color: #f0d080 !important;
}
:root[data-theme="dark"] .alert-info {
    background-color: var(--status-info-bg) !important;
    border-color: #1e3a5a !important;
    color: #90c8f0 !important;
}

:root[data-theme="dark"] canvas {
    filter: brightness(0.9) contrast(1.1);
}

/* Apply primary solid color to elements */
.btn-primary,
.hero-btn,
.primary-gradient {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Apply secondary solid color to elements */
.secondary-gradient {
    background: var(--secondary-color) !important;
}

/* Primary color for text and borders */
.text-primary,
.primary-color {
    color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Secondary color for text and borders */
.text-secondary-color {
    color: var(--secondary-color) !important;
}

.border-secondary-color {
    border-color: var(--secondary-color) !important;
}

/* Override removed - was causing unwanted backgrounds on icons */