/* =============================================================================
   INTER FONT - Local Installation (Professional SaaS Typography)
   ============================================================================= */

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =============================================================================
   AURAZENIX THEME - Centralized Design System
   =============================================================================
   
   This file contains all theme variables for the AuraZenix (formerly SYNOVA) 
   application. All UI components should reference these variables for consistent 
   branding across the entire application.
   
   USAGE:
   1. Include this file in your template: <link rel="stylesheet" href="{{ url_for('static', filename='css/aurazenix-theme.css') }}">
   2. Use variables like: background-color: var(--az-primary);
   
   STRUCTURE:
   - Primary Brand Colors
   - Background & Gradients
   - Typography & Text Colors
   - Surface & Card Colors
   - Border Colors
   - Shadow Colors
   - Component-specific variables
   
   NOTE: Semantic status colors (success/warning/danger/info) are NOT included here.
   Those remain functional colors that should not change with branding.
   ============================================================================= */

:root {
    /* =========================================================================
       PRIMARY BRAND COLORS - Slate Blue 2.0 (Calm Professional)
       ========================================================================= */
    --az-primary: #475569;
    --az-primary-dark: #334155;
    --az-primary-darker: #1E293B;
    --az-primary-light: #64748B;
    --az-primary-rgb: 71, 85, 105;
    
    /* =========================================================================
       ENTERPRISE GRAY SCALE
       ========================================================================= */
    --az-gray-50: #F9FAFB;
    --az-gray-100: #F3F4F6;
    --az-gray-200: #E5E7EB;
    --az-gray-300: #D1D5DB;
    --az-gray-400: #9CA3AF;
    --az-gray-500: #6B7280;
    --az-gray-600: #4B5563;
    --az-gray-700: #374151;
    --az-gray-800: #1F2937;
    --az-gray-900: #111827;
    
    /* Sidebar - Dark Charcoal (Modern Enterprise Style) */
    --az-sidebar-bg: #1F2937;
    --az-sidebar-text: #D1D5DB;
    --az-sidebar-text-hover: #FFFFFF;
    --az-sidebar-active: var(--az-primary);
    --az-sidebar-border: #374151;
    --az-sidebar-gradient: var(--az-sidebar-bg); /* Keep for compatibility, now solid */
    
    /* Accent color - Cyan (Tech Accent) */
    --az-accent: #06B6D4;
    --az-accent-dark: #0891B2;
    --az-accent-light: #22D3EE;
    
    /* =========================================================================
       BACKGROUNDS - Soft & Professional (Slate 2.0)
       ========================================================================= */
    /* Soft gray backgrounds (less eye strain) */
    --az-bg-body: #F8FAFC;
    --az-bg-primary: #FFFFFF;
    --az-bg-secondary: #F1F5F9;
    --az-bg-tertiary: #E2E8F0;
    
    /* Legacy gradient variables (keep for compatibility, but use soft colors) */
    --az-bg-gradient-start: #F8FAFC;
    --az-bg-gradient-end: #F1F5F9;
    --az-gradient-body: var(--az-bg-body);
    
    /* Modern button styling - Subtle gradient or solid */
    --az-gradient-button: linear-gradient(135deg, var(--az-primary) 0%, var(--az-primary-dark) 100%);
    --az-gradient-button-hover: linear-gradient(135deg, var(--az-primary-light) 0%, var(--az-primary) 100%);
    --az-gradient-header: linear-gradient(180deg, var(--az-primary) 0%, var(--az-primary-dark) 100%);
    
    /* =========================================================================
       TYPOGRAPHY & TEXT COLORS - Slate Hierarchy (2.0)
       ========================================================================= */
    --az-text-primary: #0F172A;      /* Slate-900 - Maximum contrast */
    --az-text-secondary: #475569;    /* Slate-600 - Matches primary! */
    --az-text-muted: #64748B;        /* Slate-500 */
    --az-text-disabled: #94A3B8;     /* Slate-400 */
    --az-text-light: #CBD5E1;        /* Slate-300 - For dark backgrounds */
    --az-text-white: #FFFFFF;
    
    /* =========================================================================
       SURFACE & CARD COLORS
       ========================================================================= */
    --az-surface: #ffffff;
    --az-surface-alt: #fafafa;
    --az-surface-light: #f8f9fa;
    --az-surface-hover: #f3f4f6;
    
    /* =========================================================================
       BORDER COLORS
       ========================================================================= */
    --az-border: #e5e7eb;
    --az-border-light: #f3f4f6;
    --az-border-focus: var(--az-primary-light);
    
    /* =========================================================================
       SHADOWS - Neutral (Professional)
       ========================================================================= */
    --az-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --az-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --az-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --az-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Primary shadows (subtle blue tint) */
    --az-shadow-primary-sm: 0 2px 8px rgba(var(--az-primary-rgb), 0.08);
    --az-shadow-primary-md: 0 5px 20px rgba(var(--az-primary-rgb), 0.1);
    --az-shadow-primary-lg: 0 10px 30px rgba(var(--az-primary-rgb), 0.12);
    --az-shadow-primary-xl: 0 20px 60px rgba(var(--az-primary-rgb), 0.12);
    --az-shadow-primary-hover: 0 10px 25px rgba(var(--az-primary-rgb), 0.25);
    
    /* Focus ring - Blue accent */
    --az-focus-ring: 0 0 0 3px rgba(var(--az-primary-rgb), 0.1);
    
    /* =========================================================================
       COMPONENT SPECIFIC
       ========================================================================= */
    /* Cards */
    --az-card-bg: var(--az-surface);
    --az-card-border: var(--az-border);
    --az-card-shadow: var(--az-shadow-primary-sm);
    --az-card-shadow-hover: var(--az-shadow-primary-md);
    
    /* Buttons */
    --az-btn-primary-bg: var(--az-gradient-button);
    --az-btn-primary-bg-hover: var(--az-gradient-button-hover);
    --az-btn-primary-text: var(--az-text-white);
    --az-btn-primary-shadow: var(--az-shadow-primary-md);
    --az-btn-primary-shadow-hover: var(--az-shadow-primary-hover);
    
    /* Inputs */
    --az-input-bg: var(--az-surface);
    --az-input-border: var(--az-border);
    --az-input-focus-border: var(--az-primary);
    --az-input-focus-shadow: var(--az-focus-ring);
    
    /* Navigation/Header */
    --az-nav-bg: var(--az-gradient-header);
    --az-nav-text: var(--az-text-white);
    --az-nav-text-muted: var(--az-text-light);
    --az-nav-hover-bg: rgba(255, 255, 255, 0.2);
    
    /* =========================================================================
       SPACING (Optional - for consistency)
       ========================================================================= */
    --az-spacing-xs: 0.25rem;
    --az-spacing-sm: 0.5rem;
    --az-spacing-md: 1rem;
    --az-spacing-lg: 1.5rem;
    --az-spacing-xl: 2rem;
    --az-spacing-2xl: 3rem;
    
    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    --az-radius-sm: 0.375rem;
    --az-radius-md: 0.5rem;
    --az-radius-lg: 0.75rem;
    --az-radius-xl: 1rem;
    --az-radius-2xl: 1.5rem;
    --az-radius-full: 9999px;
    
    /* =========================================================================
       TYPOGRAPHY - Font System
       ========================================================================= */
    --az-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --az-font-weight-normal: 400;
    --az-font-weight-medium: 500;
    --az-font-weight-semibold: 600;
    --az-font-weight-bold: 700;
    
    /* =========================================================================
       PROFESSIONAL STATUS COLORS - High Contrast for Readability
       ========================================================================= */
    /* Success (Betaald) */
    --az-status-success-bg: #86EFAC;
    --az-status-success-text: #052E16;
    --az-status-success-border: #4ADE80;
    
    /* Warning (Open) */
    --az-status-warning-bg: #FCD34D;
    --az-status-warning-text: #422006;
    --az-status-warning-border: #FBBF24;
    
    /* Info (Aanbetaling) */
    --az-status-info-bg: #7DD3FC;
    --az-status-info-text: #082F49;
    --az-status-info-border: #38BDF8;
    
    /* Danger (Geannuleerd) */
    --az-status-danger-bg: #FCA5A5;
    --az-status-danger-text: #450A0A;
    --az-status-danger-border: #F87171;
    
    /* Secondary (Niet gefactureerd) */
    --az-status-secondary-bg: #CBD5E1;
    --az-status-secondary-text: #0F172A;
    --az-status-secondary-border: #94A3B8;
    
    /* =========================================================================
       PORTAL ALIASES (for booking pages compatibility)
       These map to the main brand colors for consistency
       ========================================================================= */
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-accent: var(--az-accent);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    
    /* =========================================================================
       BOOTSTRAP VARIABLE OVERRIDES
       These ensure Bootstrap components use AuraZenix colors
       ========================================================================= */
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
    --bs-link-color: var(--az-primary);
    --bs-link-hover-color: var(--az-primary-dark);
}

/* =============================================================================
   THEME PRESETS - Data-theme Selectors for Salon Customization
   =============================================================================
   Usage: Add data-theme="theme-name" to <html> or <body> to switch themes
   Example: <html data-theme="ocean"> or document.documentElement.dataset.theme = "ocean"
   
   Available themes:
   - purple (default AuraZenix)
   - ocean (blue/teal)
   - forest (green)
   - coral (pink/coral)
   - sunset (orange/warm)
   - midnight (dark purple)
   ============================================================================= */

/* OCEAN THEME - Professional Blue/Teal */
:root[data-theme="ocean"],
[data-theme="ocean"] {
    --az-primary: #0369A1;
    --az-primary-dark: #075985;
    --az-primary-darker: #0C4A6E;
    --az-primary-light: #0EA5E9;
    --az-primary-rgb: 3, 105, 161;
    --az-accent: #06B6D4;
    --az-accent-dark: #0891B2;
    --az-accent-light: #22D3EE;
    --az-bg-gradient-start: #F0F9FF;
    --az-bg-gradient-end: #E0F2FE;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    --az-gradient-header: linear-gradient(180deg, #0369A1 0%, #075985 100%);
    --az-gradient-button: linear-gradient(135deg, #0369A1 0%, #075985 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* FOREST THEME - Natural Green */
:root[data-theme="forest"],
[data-theme="forest"] {
    --az-primary: #166534;
    --az-primary-dark: #15803D;
    --az-primary-darker: #14532D;
    --az-primary-light: #22C55E;
    --az-primary-rgb: 22, 101, 52;
    --az-accent: #10B981;
    --az-accent-dark: #059669;
    --az-accent-light: #34D399;
    --az-bg-gradient-start: #F0FDF4;
    --az-bg-gradient-end: #DCFCE7;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    --az-gradient-header: linear-gradient(180deg, #166534 0%, #15803D 100%);
    --az-gradient-button: linear-gradient(135deg, #166534 0%, #15803D 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #22C55E 0%, #166534 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* CORAL THEME - Warm Pink/Coral */
:root[data-theme="coral"],
[data-theme="coral"] {
    --az-primary: #BE123C;
    --az-primary-dark: #9F1239;
    --az-primary-darker: #881337;
    --az-primary-light: #F43F5E;
    --az-primary-rgb: 190, 18, 60;
    --az-accent: #F59E0B;
    --az-accent-dark: #D97706;
    --az-accent-light: #FBBF24;
    --az-bg-gradient-start: #FFF1F2;
    --az-bg-gradient-end: #FFE4E6;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
    --az-gradient-header: linear-gradient(180deg, #BE123C 0%, #9F1239 100%);
    --az-gradient-button: linear-gradient(135deg, #BE123C 0%, #9F1239 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #F43F5E 0%, #BE123C 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* SUNSET THEME - Warm Orange */
:root[data-theme="sunset"],
[data-theme="sunset"] {
    --az-primary: #C2410C;
    --az-primary-dark: #9A3412;
    --az-primary-darker: #7C2D12;
    --az-primary-light: #F97316;
    --az-primary-rgb: 194, 65, 12;
    --az-accent: #DC2626;
    --az-accent-dark: #B91C1C;
    --az-accent-light: #F87171;
    --az-bg-gradient-start: #FFF7ED;
    --az-bg-gradient-end: #FFEDD5;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    --az-gradient-header: linear-gradient(180deg, #C2410C 0%, #9A3412 100%);
    --az-gradient-button: linear-gradient(135deg, #C2410C 0%, #9A3412 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #F97316 0%, #C2410C 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* MIDNIGHT THEME - Dark Elegant Purple */
:root[data-theme="midnight"],
[data-theme="midnight"] {
    --az-primary: #4338CA;
    --az-primary-dark: #3730A3;
    --az-primary-darker: #312E81;
    --az-primary-light: #6366F1;
    --az-primary-rgb: 67, 56, 202;
    --az-accent: #EC4899;
    --az-accent-dark: #DB2777;
    --az-accent-light: #F472B6;
    --az-bg-gradient-start: #EEF2FF;
    --az-bg-gradient-end: #E0E7FF;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    --az-gradient-header: linear-gradient(180deg, #4338CA 0%, #3730A3 100%);
    --az-gradient-button: linear-gradient(135deg, #4338CA 0%, #3730A3 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #6366F1 0%, #4338CA 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* TEAL THEME - Modern Teal/Cyan */
:root[data-theme="teal"],
[data-theme="teal"] {
    --az-primary: #115E59;
    --az-primary-dark: #0F766E;
    --az-primary-darker: #134E4A;
    --az-primary-light: #14B8A6;
    --az-primary-rgb: 17, 94, 89;
    --az-accent: #06B6D4;
    --az-accent-dark: #0891B2;
    --az-accent-light: #22D3EE;
    --az-bg-gradient-start: #F0FDFA;
    --az-bg-gradient-end: #CCFBF1;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
    --az-gradient-header: linear-gradient(180deg, #115E59 0%, #0F766E 100%);
    --az-gradient-button: linear-gradient(135deg, #115E59 0%, #0F766E 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #14B8A6 0%, #115E59 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* ROSE THEME - Soft Rose/Blush */
:root[data-theme="rose"],
[data-theme="rose"] {
    --az-primary: #9F1239;
    --az-primary-dark: #881337;
    --az-primary-darker: #71112B;
    --az-primary-light: #E11D48;
    --az-primary-rgb: 159, 18, 57;
    --az-accent: #8B5CF6;
    --az-accent-dark: #7C3AED;
    --az-accent-light: #A78BFA;
    --az-bg-gradient-start: #FDF2F8;
    --az-bg-gradient-end: #FCE7F3;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
    --az-gradient-header: linear-gradient(180deg, #9F1239 0%, #881337 100%);
    --az-gradient-button: linear-gradient(135deg, #9F1239 0%, #881337 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #E11D48 0%, #9F1239 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* SUPERADMIN THEME - Dark Navy with Purple Accent */
:root[data-theme="superadmin"],
[data-theme="superadmin"] {
    --az-primary: #5a3d7a;
    --az-primary-dark: #1a1a2e;
    --az-primary-darker: #16213e;
    --az-primary-light: #7C5A9B;
    --az-primary-rgb: 90, 61, 122;
    --az-accent: #E8A54B;
    --az-accent-dark: #D4943A;
    --az-accent-light: #F0B86E;
    --az-bg-gradient-start: #E8E4ED;
    --az-bg-gradient-end: #D4D0E0;
    --az-sidebar-gradient: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    --az-gradient-body: linear-gradient(135deg, #E8E4ED 0%, #D4D0E0 100%);
    --az-gradient-header: linear-gradient(135deg, #5a3d7a 0%, #1a1a2e 100%);
    --az-gradient-button: linear-gradient(135deg, #5a3d7a 0%, #1a1a2e 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #7C5A9B 0%, #5a3d7a 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* CREAM THEME - Warm Cream/Taupe */
:root[data-theme="cream"],
[data-theme="cream"] {
    --az-primary: #78716C;
    --az-primary-dark: #57534E;
    --az-primary-darker: #44403C;
    --az-primary-light: #A8A29E;
    --az-primary-rgb: 120, 113, 108;
    --az-accent: #C4A574;
    --az-accent-dark: #A68B5B;
    --az-accent-light: #D4BC94;
    --az-bg-gradient-start: #FAFAF9;
    --az-bg-gradient-end: #F5F5F4;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #FAFAF9 0%, #F5F5F4 100%);
    --az-gradient-header: linear-gradient(180deg, #78716C 0%, #57534E 100%);
    --az-gradient-button: linear-gradient(135deg, #78716C 0%, #57534E 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #A8A29E 0%, #78716C 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* LIGHT THEME - Clean White/Gray */
:root[data-theme="light"],
[data-theme="light"] {
    --az-primary: #475569;
    --az-primary-dark: #334155;
    --az-primary-darker: #1E293B;
    --az-primary-light: #64748B;
    --az-primary-rgb: 71, 85, 105;
    --az-accent: #06B6D4;
    --az-accent-dark: #0891B2;
    --az-accent-light: #22D3EE;
    --az-bg-gradient-start: #FFFFFF;
    --az-bg-gradient-end: #F8FAFC;
    --az-sidebar-gradient: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    --az-gradient-body: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    --az-gradient-header: linear-gradient(180deg, #475569 0%, #334155 100%);
    --az-gradient-button: linear-gradient(135deg, #475569 0%, #334155 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #64748B 0%, #475569 100%);
    --az-text-primary: #111827;
    --az-text-secondary: #4B5563;
    --az-surface: #FFFFFF;
    --az-surface-alt: #F8FAFC;
    --az-border: #E5E7EB;
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* DARK THEME - Elegant Dark Mode */
:root[data-theme="dark"],
[data-theme="dark"] {
    --az-primary: #71717A;
    --az-primary-dark: #52525B;
    --az-primary-darker: #3F3F46;
    --az-primary-light: #A1A1AA;
    --az-primary-rgb: 113, 113, 122;
    --az-accent: #06B6D4;
    --az-accent-dark: #0891B2;
    --az-accent-light: #22D3EE;
    --az-bg-gradient-start: #18181B;
    --az-bg-gradient-end: #27272A;
    --az-sidebar-gradient: linear-gradient(180deg, #0F172A 0%, #020617 100%);
    --az-gradient-body: linear-gradient(135deg, #18181B 0%, #27272A 100%);
    --az-gradient-header: linear-gradient(180deg, #27272A 0%, #18181B 100%);
    --az-gradient-button: linear-gradient(135deg, #52525B 0%, #3F3F46 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #71717A 0%, #52525B 100%);
    --az-text-primary: #F9FAFB;
    --az-text-secondary: #D1D5DB;
    --az-text-muted: #9CA3AF;
    --az-surface: #27272A;
    --az-surface-alt: #3F3F46;
    --az-surface-light: #52525B;
    --az-surface-hover: #3F3F46;
    --az-border: #3F3F46;
    --az-border-light: #52525B;
    --az-card-bg: #1F2937;
    --az-card-border: #374151;
    --az-input-bg: #374151;
    --az-input-border: #4B5563;
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
    --bs-body-bg: #111827;
    --bs-body-color: #F9FAFB;
}

/* Dark theme specific overrides for Bootstrap and components */
[data-theme="dark"] .card {
    background-color: var(--az-surface) !important;
    border-color: var(--az-border) !important;
    color: var(--az-text-primary);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--az-surface-alt) !important;
    border-color: var(--az-border) !important;
    color: var(--az-text-primary);
}

[data-theme="dark"] .table {
    color: var(--az-text-primary);
    --bs-table-bg: var(--az-surface);
    --bs-table-striped-bg: var(--az-surface-alt);
    --bs-table-hover-bg: var(--az-surface-alt);
}

[data-theme="dark"] .table-light {
    --bs-table-bg: var(--az-surface-alt) !important;
    color: var(--az-text-primary) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--az-input-bg);
    border-color: var(--az-input-border);
    color: var(--az-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--az-input-bg);
    border-color: var(--az-accent);
    color: var(--az-text-primary);
}

[data-theme="dark"] .modal-content {
    background-color: var(--az-surface);
    border-color: var(--az-border);
    color: var(--az-text-primary);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--az-border);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--az-surface);
    border-color: var(--az-border);
}

/* Ensure dropdowns in tables are always on top */
.table .dropdown,
.table-responsive .dropdown {
    position: relative;
    z-index: 10;
}

.table .dropdown-menu,
.table-responsive .dropdown-menu {
    z-index: 1050 !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--az-text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--az-surface-alt);
}

[data-theme="dark"] .text-muted {
    color: var(--az-text-muted) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--az-surface-alt) !important;
}

[data-theme="dark"] .border {
    border-color: var(--az-border) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--az-surface);
    border-color: var(--az-border);
    color: var(--az-text-primary);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--az-accent-light);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--az-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--az-surface);
    border-color: var(--az-border);
    color: var(--az-text-primary);
}

[data-theme="dark"] .nav-pills .nav-link {
    color: var(--az-text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--az-accent);
    color: #FFFFFF;
}

[data-theme="dark"] .page-link {
    background-color: var(--az-surface);
    border-color: var(--az-border);
    color: var(--az-text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--az-accent);
    border-color: var(--az-accent);
}

[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--az-accent-light);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--az-text-muted);
}

/* DEFAULT/STANDARD THEME - Slate Blue 2.0 (formerly Purple) */
:root[data-theme="default"],
[data-theme="default"],
:root[data-theme="purple"],
[data-theme="purple"] {
    --az-primary: #475569;
    --az-primary-dark: #334155;
    --az-primary-darker: #1E293B;
    --az-primary-light: #64748B;
    --az-primary-rgb: 71, 85, 105;
    --az-accent: #06B6D4;
    --az-accent-dark: #0891B2;
    --az-accent-light: #22D3EE;
    --az-bg-gradient-start: #FFFFFF;
    --az-bg-gradient-end: #F9FAFB;
    --az-sidebar-bg: #1F2937;
    --az-sidebar-gradient: #1F2937;
    --az-gradient-body: #F8FAFC;
    --az-gradient-header: linear-gradient(180deg, #475569 0%, #334155 100%);
    --az-gradient-button: linear-gradient(135deg, #475569 0%, #334155 100%);
    --az-gradient-button-hover: linear-gradient(135deg, #64748B 0%, #475569 100%);
    --portal-primary: var(--az-primary);
    --portal-primary-dark: var(--az-primary-dark);
    --portal-primary-light: var(--az-primary-light);
    --portal-bg-start: var(--az-bg-gradient-start);
    --portal-bg-end: var(--az-bg-gradient-end);
    --bs-primary: var(--az-primary);
    --bs-primary-rgb: var(--az-primary-rgb);
}

/* =============================================================================
   BASE COMPONENT STYLES
   ============================================================================= */

/* Primary Button */
.btn-az-primary {
    background: var(--az-gradient-button);
    border: none;
    color: var(--az-text-white);
    box-shadow: var(--az-shadow-primary-md);
    transition: all 0.3s ease;
}

.btn-az-primary:hover,
.btn-az-primary:focus {
    background: var(--az-gradient-button-hover);
    color: var(--az-text-white);
    box-shadow: var(--az-shadow-primary-hover);
    transform: translateY(-2px);
}

/* Outline Button */
.btn-az-outline {
    background: transparent;
    border: 2px solid var(--az-primary);
    color: var(--az-primary);
    transition: all 0.3s ease;
}

.btn-az-outline:hover,
.btn-az-outline:focus {
    background: var(--az-primary);
    border-color: var(--az-primary);
    color: var(--az-text-white);
}

/* Outline Button Success Variant */
.btn-az-outline-success {
    background: transparent;
    border: 2px solid #059669;
    color: #059669;
    transition: all 0.3s ease;
}

.btn-az-outline-success:hover,
.btn-az-outline-success:focus {
    background: #059669;
    border-color: #059669;
    color: white;
}

/* Accent Button (solid, theme-aware) */
.btn-az-accent {
    background: var(--az-accent);
    border: none;
    color: var(--az-text-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-az-accent:hover,
.btn-az-accent:focus {
    background: var(--az-accent-dark);
    color: var(--az-text-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Card */
.card-az {
    background: var(--az-card-bg);
    border: 1px solid var(--az-card-border);
    border-radius: var(--az-radius-lg);
    box-shadow: var(--az-card-shadow);
    transition: all 0.3s ease;
}

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

/* Card Header with Gradient */
.card-az-header {
    background: var(--az-gradient-header);
    color: var(--az-text-white);
    border-radius: var(--az-radius-lg) var(--az-radius-lg) 0 0;
}

/* Form Inputs */
.form-control-az {
    border: 2px solid var(--az-border);
    border-radius: var(--az-radius-md);
    transition: all 0.3s ease;
}

.form-control-az:focus {
    border-color: var(--az-primary);
    box-shadow: var(--az-focus-ring);
    outline: none;
}

/* Links */
.link-az {
    color: var(--az-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-az:hover {
    color: var(--az-primary-dark);
    text-decoration: underline;
}

/* Page Background */
.az-page-bg {
    background: var(--az-bg-body, #FFFFFF);
    min-height: 100vh;
}

/* Header/Navigation Background */
.az-header-bg {
    background: var(--az-gradient-header);
}

/* Text utility classes */
.text-az-primary {
    color: var(--az-primary) !important;
}

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

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

/* Background utility classes */
.bg-az-primary {
    background-color: var(--az-primary) !important;
}

.bg-az-surface {
    background-color: var(--az-surface) !important;
}

.bg-az-surface-alt {
    background-color: var(--az-surface-alt) !important;
}

/* =============================================================================
   BOOTSTRAP OVERRIDES - Ensure Bootstrap components use AuraZenix colors
   ============================================================================= */

/* Primary color classes */
.text-primary {
    color: var(--az-primary) !important;
}

.bg-primary {
    background-color: var(--az-primary) !important;
}

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

/* Primary buttons */
.btn-primary {
    background: var(--az-gradient-button);
    border-color: var(--az-primary);
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--az-gradient-button-hover);
    border-color: var(--az-primary-dark);
    color: white;
    box-shadow: var(--az-shadow-primary-md);
}

.btn-primary:active {
    background: var(--az-primary-dark);
    border-color: var(--az-primary-darker);
}

/* Outline primary buttons */
.btn-outline-primary {
    color: var(--az-primary);
    border-color: var(--az-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--az-primary);
    border-color: var(--az-primary);
    color: white;
}

/* =============================================================================
   ACTION BUTTON CIRCLES - Themed circular action buttons
   ============================================================================= */
.btn-action-circle {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--az-radius-full) !important;
    border: 2px solid var(--az-primary);
    background: transparent;
    color: var(--az-primary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-action-circle:hover,
.btn-action-circle:focus {
    background: var(--az-primary);
    border-color: var(--az-primary);
    color: white;
    transform: scale(1.05);
}

.btn-action-circle.btn-action-secondary {
    border-color: var(--az-text-secondary);
    color: var(--az-text-secondary);
}

.btn-action-circle.btn-action-secondary:hover,
.btn-action-circle.btn-action-secondary:focus {
    background: var(--az-text-secondary);
    border-color: var(--az-text-secondary);
    color: white;
}

.btn-action-circle.btn-action-success {
    border-color: #059669;
    color: #059669;
}

.btn-action-circle.btn-action-success:hover,
.btn-action-circle.btn-action-success:focus {
    background: #059669;
    border-color: #059669;
    color: white;
}

.btn-action-circle.btn-action-info {
    border-color: #0891b2;
    color: #0891b2;
}

.btn-action-circle.btn-action-info:hover,
.btn-action-circle.btn-action-info:focus {
    background: #0891b2;
    border-color: #0891b2;
    color: white;
}

.btn-action-circle.btn-action-warning {
    border-color: #d97706;
    color: #d97706;
}

.btn-action-circle.btn-action-warning:hover,
.btn-action-circle.btn-action-warning:focus {
    background: #d97706;
    border-color: #d97706;
    color: white;
}

.btn-action-circle.btn-action-danger {
    border-color: #dc2626;
    color: #dc2626;
}

.btn-action-circle.btn-action-danger:hover,
.btn-action-circle.btn-action-danger:focus {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

/* Primary treatment button - purple styling (AuraZenix huisstijl) */
.btn-action-circle.btn-action-treatment {
    border-color: var(--az-primary, #7c5a9b);
    color: var(--az-primary, #7c5a9b);
    background: rgba(124, 90, 155, 0.05);
}

.btn-action-circle.btn-action-treatment:hover,
.btn-action-circle.btn-action-treatment:focus {
    background: var(--az-gradient-button);
    border-color: var(--az-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(124, 90, 155, 0.3);
    transform: scale(1.05);
}

/* Hover-state action buttons - alleen zichtbaar bij row hover */
.table-hover tbody tr .btn-action-hover {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    pointer-events: none;
    visibility: hidden;
}

.table-hover tbody tr:hover .btn-action-hover {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
}

/* Zorg dat de action buttons group genoeg ruimte houdt, ook als buttons verborgen zijn */
.action-buttons-group {
    min-height: 32px;
}

/* Compact action group */
.action-buttons-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Links */
a {
    color: var(--az-primary);
}

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

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--az-primary);
    box-shadow: 0 0 0 0.2rem rgba(124, 90, 155, 0.25);
}

/* Nav tabs active state */
.nav-tabs .nav-link.active {
    color: var(--az-primary);
    border-color: var(--az-primary);
}

/* Pagination */
.page-link {
    color: var(--az-primary);
}

.page-item.active .page-link {
    background-color: var(--az-primary);
    border-color: var(--az-primary);
}

/* Progress bar */
.progress-bar {
    background-color: var(--az-primary);
}

/* List group active */
.list-group-item.active {
    background-color: var(--az-primary);
    border-color: var(--az-primary);
}

/* Badge primary */
.badge.bg-primary {
    background-color: var(--az-primary) !important;
}

/* =============================================================================
   CARD STYLING - Unified card design across all pages
   ============================================================================= */
.card {
    background: var(--az-surface);
    border: none;
    border-radius: var(--az-radius-xl);
    box-shadow: var(--az-shadow-primary-sm);
    transition: all 0.3s ease;
    overflow: hidden;
}

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

.card-header {
    background: var(--az-gradient-header);
    color: var(--az-text-white);
    font-weight: 600;
    border: none;
    border-radius: 0;
    padding: 1rem 1.25rem;
}

.card-header:first-child {
    border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--az-text-white);
    margin: 0;
}

.card-header .btn-close {
    filter: brightness(0) invert(1);
}

.card-body {
    padding: 1.5rem;
    background: var(--az-surface);
}

.card-footer {
    background: var(--az-surface-alt);
    border-top: 1px solid var(--az-border);
    padding: 1rem 1.25rem;
}

.card-footer:last-child {
    border-radius: 0 0 var(--az-radius-xl) var(--az-radius-xl);
}

/* Card with white header (alternative style) */
.card-header.bg-white,
.card-header.bg-light {
    background: var(--az-surface) !important;
    color: var(--az-text-primary) !important;
    border-bottom: 1px solid var(--az-border);
}

.card-header.bg-white h1,
.card-header.bg-white h2,
.card-header.bg-white h3,
.card-header.bg-white h4,
.card-header.bg-white h5,
.card-header.bg-white h6,
.card-header.bg-light h1,
.card-header.bg-light h2,
.card-header.bg-light h3,
.card-header.bg-light h4,
.card-header.bg-light h5,
.card-header.bg-light h6 {
    color: var(--az-text-primary) !important;
}

/* Card title styling */
.card-title {
    color: var(--az-text-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.card-subtitle {
    color: var(--az-text-secondary);
    margin-bottom: 0.5rem;
}

.card-text {
    color: var(--az-text-secondary);
}

/* Card link styling */
.card-link {
    color: var(--az-primary);
    font-weight: 500;
}

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

/* Card image styling */
.card-img-top {
    border-radius: var(--az-radius-xl) var(--az-radius-xl) 0 0;
}

/* Compact card variant */
.card-compact .card-body {
    padding: 1rem;
}

.card-compact .card-header {
    padding: 0.75rem 1rem;
}

/* Borderless card variant */
.card-borderless {
    box-shadow: none;
    border: none;
}

.card-borderless:hover {
    box-shadow: var(--az-shadow-primary-sm);
}

/* Dashboard stats cards - Purple gradient variant */
.stats-card,
.card-stats {
    background: var(--az-gradient-button);
    color: var(--az-text-white);
    border-radius: var(--az-radius-xl);
    padding: 1.5rem;
    border: none;
}

.stats-card h3,
.card-stats h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--az-text-white) !important;
}

.stats-card p,
.card-stats p {
    margin: 0;
    opacity: 0.9;
    font-weight: 500;
    color: var(--az-text-white) !important;
}

/* Dashboard stats cards - White background variant with colored border */
.stats-card-white {
    background: var(--az-surface) !important;
    border-radius: var(--az-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--az-shadow-primary-sm);
    border-left: 4px solid var(--az-primary);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.stats-card-white:hover {
    box-shadow: var(--az-shadow-primary-md);
    transform: translateY(-2px);
}

.stats-card-white.info { border-left-color: #3b82f6; }
.stats-card-white.success { border-left-color: #10b981; }
.stats-card-white.warning { border-left-color: #f59e0b; }
.stats-card-white.secondary { border-left-color: #6b7280; }
.stats-card-white.primary { border-left-color: var(--az-primary); }

.stats-card-white h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--az-text-primary) !important;
}

.stats-card-white p {
    margin: 0;
    font-weight: 500;
    color: var(--az-text-secondary) !important;
    font-size: 0.9rem;
}

/* Primary Button */
.btn-primary {
    background-color: var(--az-primary) !important;
    border-color: var(--az-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--az-primary-dark) !important;
    border-color: var(--az-primary-dark) !important;
    color: #ffffff !important;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--az-primary-rgb), 0.25) !important;
}

/* Outline Primary Button */
.btn-outline-primary {
    color: var(--az-primary) !important;
    border-color: var(--az-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--az-primary) !important;
    border-color: var(--az-primary) !important;
    color: #ffffff !important;
}

/* Text Primary */
.text-primary {
    color: var(--az-primary) !important;
}

/* Background Primary */
.bg-primary {
    background-color: var(--az-primary) !important;
}

/* Border Primary */
.border-primary {
    border-color: var(--az-primary) !important;
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--az-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--az-primary-dark);
}

/* Form Focus States */
.form-control:focus,
.form-select:focus {
    border-color: var(--az-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--az-primary-rgb), 0.25) !important;
}

/* Custom Checkbox/Radio */
.form-check-input:checked {
    background-color: var(--az-primary) !important;
    border-color: var(--az-primary) !important;
}

/* Nav Pills Active */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--az-gradient-button) !important;
    color: #ffffff !important;
}

/* Progress Bar */
.progress-bar {
    background-color: var(--az-primary) !important;
}

/* Card Header with gradient */
.card-header.bg-gradient-primary,
.bg-gradient-primary {
    background: var(--az-gradient-button) !important;
    color: #ffffff !important;
}

/* Stats cards */
.stats-card {
    background: var(--az-gradient-button) !important;
}

.stats-card.primary {
    background: var(--az-gradient-button) !important;
}

/* Page separators */
.az-separator,
.page-separator {
    height: 2px;
    background-color: var(--az-primary);
    margin: 1rem 0;
}

/* Pagination */
.page-link {
    color: var(--az-primary);
}

.page-item.active .page-link {
    background-color: var(--az-primary);
    border-color: var(--az-primary);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--az-primary) !important;
}

/* =============================================================================
   PROFESSIONAL BADGE SYSTEM - Subtle Pastel Style (Stripe/Linear Inspired)
   ============================================================================= */

/* Base badge styling - Minimalist text-only style (Linear/Slack inspired) */
.badge-az {
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Override Bootstrap badge text color */
.badge.badge-az {
    color: inherit !important;
}

.badge-az i {
    font-size: 0.75rem !important;
    opacity: 0.9;
}

/* SUCCESS - Groen (Betaald, Voltooid, Confirmed) - TEXT ONLY */
.badge.badge-az.badge-az-success,
.badge-az.badge-az-success {
    color: #16A34A !important;  /* Green-600 - bright & readable */
    background: #F0FDF4 !important;  /* Subtle green tint */
}

/* WARNING - Oranje (Pending, Open) - TEXT ONLY */
.badge.badge-az.badge-az-warning,
.badge-az.badge-az-warning {
    color: #EA580C !important;  /* Orange-600 - bright & readable */
    background: #FFF7ED !important;  /* Subtle orange tint */
}

/* INFO - Blauw (Verzonden, Aanbetaling) - TEXT ONLY */
.badge.badge-az.badge-az-info,
.badge-az.badge-az-info {
    color: #0284C7 !important;  /* Sky-600 - bright & readable */
    background: #F0F9FF !important;  /* Subtle blue tint */
}

/* DANGER - Rood (Overdue, Geannuleerd, Refunds) - TEXT ONLY */
.badge.badge-az.badge-az-danger,
.badge-az.badge-az-danger {
    color: #DC2626 !important;  /* Red-600 - bright & readable */
    background: #FEF2F2 !important;  /* Subtle red tint */
}

/* SECONDARY - Grijs (Reversed, Draft, Neutral) - TEXT ONLY */
.badge.badge-az.badge-az-secondary,
.badge-az.badge-az-secondary {
    color: #64748B !important;  /* Slate-500 - readable grey */
    background: #F8FAFC !important;  /* Subtle grey tint */
}

/* PRIMARY - Slate Blue (Scheduled, Finalized) - TEXT ONLY */
.badge.badge-az.badge-az-primary,
.badge-az.badge-az-primary {
    color: #4F46E5 !important;  /* Indigo-600 - bright & readable */
    background: #EEF2FF !important;  /* Subtle indigo tint */
}

/* METRIC - Voor cijfers/tellingen zonder status betekenis - TEXT ONLY */
.badge.badge-az.badge-az-metric,
.badge-az.badge-az-metric {
    color: #475569 !important;  /* Slate-600 */
    background: #F8FAFC !important;  /* Subtle grey tint */
    font-weight: 600;
}

/* Hover effect voor interactieve badges */
.badge-az:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sidebar active state - ensure it uses theme colors */
.sidebar .nav-link.active {
    background-color: var(--az-primary) !important;
    color: #ffffff !important;
}

/* =============================================================================
   MAIN CONTENT AREA - Apply gradient background
   ============================================================================= */

.main-content {
    background: var(--az-bg-body, #FFFFFF) !important;
    min-height: 100vh;
}

body {
    background: var(--az-bg-body, #FFFFFF);
}

/* =============================================================================
   ANALYTICS GRADIENT CARDS - Theme-aware utility classes
   Use these classes for dashboard/analytics cards with gradient backgrounds
   ============================================================================= */

/* =============================================================================
   ANALYTICS METRIC CARDS - Theme-aware gradient cards (avoid Bootstrap .card)
   Use az-metric-card classes for dashboard/analytics metric displays
   ============================================================================= */

/* Base metric card styling */
.az-metric-card {
    color: var(--az-text-white, #ffffff);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Primary - uses theme primary gradient */
.az-metric-primary {
    background: linear-gradient(135deg, var(--az-primary) 0%, var(--az-primary-dark) 100%);
}

/* Success - green gradient */
.az-metric-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

/* Info - uses theme primary light to primary */
.az-metric-info {
    background: linear-gradient(135deg, var(--az-primary-light) 0%, var(--az-primary) 100%);
}

/* Danger - red gradient */
.az-metric-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Warning - orange/yellow gradient */
.az-metric-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Accent - uses theme accent colors */
.az-metric-accent {
    background: linear-gradient(135deg, var(--az-accent) 0%, var(--az-accent-dark) 100%);
}

/* Metric card content styling */
.az-metric-card {
    padding: 1.25rem;
    border-radius: var(--az-radius-lg, 12px);
}

.az-metric-label {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.az-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Hover effects for metric cards */
.az-metric-card:hover {
    box-shadow: var(--az-shadow-lg);
    transform: translateY(-2px);
}

/* =============================================================================
   TIPS CARD - Same style as Invoice Summary card (gradient header, white body)
   ============================================================================= */
.az-tips-card {
    border: none;
    border-radius: var(--az-radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--az-shadow-sm);
}

.az-tips-card .card-header {
    background: var(--az-gradient-header);
    color: var(--az-text-white);
    border-bottom: none;
    padding: 0.875rem 1rem;
}

.az-tips-card .card-header h5,
.az-tips-card .card-header h6 {
    color: var(--az-text-white);
    margin-bottom: 0;
    font-weight: 600;
}

.az-tips-card .card-body {
    background: var(--az-surface);
    color: var(--az-text-primary);
    padding: 1rem;
}

.az-tips-card .card-body ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.az-tips-card .card-body ul li {
    padding: 0.25rem 0;
    color: var(--az-text-secondary);
}

.az-tips-card .card-body ul li i {
    color: var(--az-primary);
    margin-right: 0.5rem;
}

.az-tips-card .card-body p {
    color: var(--az-text-secondary);
}

.az-tips-card .card-body hr {
    border-color: var(--az-border);
    opacity: 0.5;
}

/* =============================================================================
   STATUS BADGES - Consistent width and styling across the application
   ============================================================================= 
   Usage: <span class="badge az-status-badge az-status-badge--success">Text</span>
   Modifiers: --success, --warning, --danger, --info, --secondary, --primary
   ============================================================================= */
:root {
    --az-badge-min-width: 120px;
    --az-badge-padding-x: 0.75rem;
    --az-badge-padding-y: 0.35rem;
    --az-badge-font-size: 0.8125rem;
}

.az-status-badge {
    min-width: var(--az-badge-min-width);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: var(--az-badge-padding-y) var(--az-badge-padding-x);
    font-size: var(--az-badge-font-size);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.375rem;
}

.az-status-badge i {
    font-size: 0.75rem;
}

/* Semantic color modifiers */
.az-status-badge--success {
    background-color: #198754 !important;
    color: #fff !important;
}

.az-status-badge--warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.az-status-badge--danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.az-status-badge--info {
    background-color: #0dcaf0 !important;
    color: #212529 !important;
}

.az-status-badge--secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

.az-status-badge--primary {
    background-color: var(--az-primary) !important;
    color: #fff !important;
}