/* ==========================================================================
   Global CSS - Design System & Variables
   ==========================================================================
   STYLE GUIDE - Professional Grey Color Palette
   Extracted from Ask Page and standardized for all pages.
   
   This file contains CSS variables, design tokens, and base styles
   that should be used consistently across all pages.
   
   COLOR PHILOSOPHY:
   - Light Mode: White/Light grey backgrounds, dark grey text, grey borders
   - Dark Mode: Dark grey backgrounds (#212121 scale), light grey text, subtle borders
   - Accent: Blue (#007aff) - consistent across both themes
   - NO purple/gradient colors - keep it professional
   
   USAGE GUIDE:
   - Backgrounds: --bg-page, --bg-surface, --bg-elevated, --bg-muted, --bg-hover
   - Text: --text-primary, --text-secondary, --text-muted, --text-inverse
   - Borders: --border-default, --border-light, --border-strong, --border-focus
   - Buttons: --btn-primary-*, --btn-secondary-*, --btn-ghost-*
   - Inputs: --input-bg, --input-border, --input-border-focus, --input-placeholder
   ========================================================================== */

/* ==========================================================================
   CSS Variables - Color Palette (Light Mode Default)
   ========================================================================== */
:root {
    /* ========== GREY SCALE (Professional Palette) ========== */
    --grey-50: #fafafa;
    --grey-100: #f5f5f5;
    --grey-200: #e5e5e5;
    --grey-300: #d4d4d4;
    --grey-400: #a3a3a3;
    --grey-500: #737373;
    --grey-600: #525252;
    --grey-700: #404040;
    --grey-800: #262626;
    --grey-900: #171717;
    
    /* ========== DARK MODE BACKGROUND SCALE ========== */
    /* From Ask Page: #171717 → #212121 → #2f2f2f → #3a3a3a → #4a4a4a */
    --dark-bg-100: #171717;  /* Darkest - sidebar, secondary surfaces */
    --dark-bg-200: #212121;  /* Page background */
    --dark-bg-300: #2f2f2f;  /* Elevated elements, inputs */
    --dark-bg-400: #3a3a3a;  /* Hover states */
    --dark-bg-500: #4a4a4a;  /* Active/pressed states */
    
    /* ========== PRIMARY COLORS ========== */
    --color-primary: #1a1f36;
    --color-primary-dark: #0f1219;
    --color-primary-light: #374151;
    
    /* ========== ACCENT COLOR (Blue - Same for Light/Dark) ========== */
    --accent-primary: #007aff;
    --accent-primary-hover: #006ee6;
    --accent-primary-light: rgba(0, 122, 255, 0.15);
    --accent-primary-dark: #005ecb;
    
    /* ========== BACKGROUND COLORS - 5 LEVELS (Light Mode) ========== */
    --bg-page: #f8f9fa;              /* Main page background */
    --bg-surface: #ffffff;            /* Cards, panels, sidebar */
    --bg-elevated: #ffffff;           /* Dropdowns, modals, popovers */
    --bg-muted: #f5f5f5;              /* Secondary sections, code blocks */
    --bg-hover: #f5f5f5;              /* Hover states for interactive elements */
    --bg-active: #e5e7eb;             /* Active/selected states */
    
    /* Legacy aliases */
    --color-bg-primary: var(--bg-page);
    --color-bg-secondary: var(--bg-surface);
    --color-bg-tertiary: var(--bg-muted);
    --color-bg-elevated: var(--bg-elevated);
    --color-bg-hover: var(--bg-hover);
    
    /* ========== TEXT COLORS - 4 LEVELS (Light Mode) ========== */
    --text-primary: #1a1f36;          /* Main content, headings */
    --text-secondary: #6b7280;        /* Descriptions, labels */
    --text-muted: #9ca3af;            /* Placeholders, hints, disabled */
    --text-inverse: #ffffff;          /* Text on accent/dark backgrounds */
    
    /* Legacy aliases */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-muted);
    --color-text-inverse: var(--text-inverse);
    
    /* ========== BORDER COLORS - 4 LEVELS (Light Mode) ========== */
    --border-default: #e5e7eb;        /* Standard borders */
    --border-light: #f3f4f6;          /* Subtle dividers */
    --border-strong: #d1d5db;         /* Emphasized borders */
    --border-focus: var(--accent-primary);  /* Focus rings */
    
    /* Legacy aliases */
    --color-border: var(--border-default);
    --color-border-light: var(--border-light);
    --color-border-dark: var(--border-strong);
    --color-border-focus: var(--border-focus);
    
    /* ========== BUTTON COLORS (Light Mode) ========== */
    /* Primary Button (Blue) */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-hover: var(--accent-primary-hover);
    --btn-primary-text: #ffffff;
    
    /* Secondary Button (Grey) */
    --btn-secondary-bg: var(--bg-muted);
    --btn-secondary-hover: var(--bg-active);
    --btn-secondary-text: var(--text-primary);
    
    /* Ghost Button (Transparent) */
    --btn-ghost-bg: transparent;
    --btn-ghost-hover: var(--bg-hover);
    --btn-ghost-text: var(--text-primary);
    
    /* ========== INPUT/FORM COLORS (Light Mode) ========== */
    --input-bg: #ffffff;
    --input-border: var(--border-default);
    --input-border-hover: var(--border-strong);
    --input-border-focus: var(--accent-primary);
    --input-placeholder: var(--text-muted);
    --input-text: var(--text-primary);
    --input-disabled-bg: var(--bg-muted);
    --input-focus-ring: var(--accent-primary-light);
    
    /* ========== INTERACTIVE ELEMENT COLORS (Light Mode) ========== */
    --interactive-hover: var(--bg-hover);
    --interactive-active: var(--bg-active);
    --interactive-disabled: var(--bg-muted);
    
    /* ========== CHAT MESSAGE STYLES (Light Mode) ========== */
    /* User Message (Right Side) */
    --chat-user-bg: var(--grey-100);
    --chat-user-text: var(--text-primary);
    --chat-user-border: var(--grey-200);
    
    /* Bot/AI Message (Left Side) */
    --chat-bot-bg: #ffffff;
    --chat-bot-text: var(--text-primary);
    --chat-bot-border: var(--grey-200);
    
    /* Chat Input Area */
    --chat-input-bg: var(--bg-surface);
    --chat-input-border: var(--border-default);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    
    /* Chat Header */
    --chat-header-bg: var(--bg-page);
    --chat-header-border: var(--border-default);
    --chat-header-text: var(--text-primary);
    
    /* ========== SEMANTIC COLORS ========== */
    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-success-dark: #16a34a;
    --color-success-bg: #dcfce7;
    --color-success-text: #166534;
    --color-success-border: #86efac;
    
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-dark: #dc2626;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-error-border: #fca5a5;
    
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #d97706;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-warning-border: #fcd34d;
    
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-dark: #2563eb;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e40af;
    --color-info-border: #93c5fd;
    
    /* Accent alias for components referencing --color-accent */
    --color-accent: var(--accent-primary);
    --color-accent-light: var(--accent-primary-light);
    --color-accent-dark: var(--accent-primary-dark);
    
    /* Secondary color alias (same as accent for consistency) */
    --color-secondary: var(--accent-primary);
    --color-secondary-start: var(--accent-primary);
    --color-secondary-end: var(--accent-primary-hover);
    
    /* ========== SHADOWS (Light Mode) ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* ========== SPACING SCALE ========== */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* ========== TYPOGRAPHY ========== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ========== Z-INDEX SCALE ========== */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    
    /* ========== SIDEBAR VARIABLES (Light Mode) ========== */
    --sidebar-bg: var(--bg-surface);
    --sidebar-border: var(--border-default);
    --sidebar-item-hover: var(--bg-hover);
    --sidebar-item-active: var(--bg-active);
    --sidebar-text: var(--text-primary);
    --sidebar-text-muted: var(--text-secondary);
    
    /* ========== MODAL VARIABLES (Light Mode) ========== */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-bg: var(--bg-elevated);
    --modal-border: var(--border-default);
    --modal-header-border: var(--border-default);
    --modal-footer-border: var(--border-default);
    
    /* ========== DROPDOWN VARIABLES (Light Mode) ========== */
    --dropdown-bg: var(--bg-elevated);
    --dropdown-border: var(--border-default);
    --dropdown-item-hover: var(--bg-hover);
    --dropdown-item-active: var(--bg-active);
    --dropdown-text: var(--text-primary);
    --dropdown-text-muted: var(--text-secondary);
    --dropdown-divider: var(--border-light);
    
    /* ========== LEGACY ALIASES (for backwards compatibility) ========== */
    --surface-primary: var(--bg-surface);
    --surface-hover: var(--bg-hover);
    
    /* ========== LOGIN/MFA PAGE BACKGROUND ========== */
    --login-bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --color-primary: var(--accent-primary);
    --color-primary-hover: var(--accent-primary-hover);
    --color-primary-alpha: var(--accent-primary-light);
    --color-on-primary: var(--text-inverse);
    --border-color: var(--border-default);
    --surface-secondary: var(--bg-muted);
}

/* ==========================================================================
   Dark Theme Variables - GPT Style (Soft Dark, Not Pure Black)
   Extracted from Ask Page dark mode styles.
   
   DARK MODE BACKGROUND SCALE (from ask page):
   #171717 → #212121 → #2f2f2f → #3a3a3a → #4a4a4a
   
   TEXT SCALE: #ececec → #b4b4b4 → #8e8e8e
   BORDER SCALE: rgba(255,255,255,0.05) → 0.1 → 0.15
   ========================================================================== */
[data-theme="dark"] {
    /* ========== BACKGROUND COLORS - 5 LEVELS (Dark Mode) ========== */
    --bg-page: #212121;               /* Main page background */
    --bg-surface: #171717;            /* Cards, panels, sidebar */
    --bg-elevated: #2f2f2f;           /* Dropdowns, modals, popovers */
    --bg-muted: #3a3a3a;              /* Secondary sections, code blocks */
    --bg-hover: #3a3a3a;              /* Hover states */
    --bg-active: #4a4a4a;             /* Active/selected states */
    
    /* Legacy aliases */
    --color-bg-primary: var(--bg-page);
    --color-bg-secondary: var(--bg-surface);
    --color-bg-tertiary: var(--bg-elevated);
    --color-bg-elevated: var(--bg-elevated);
    --color-bg-hover: var(--bg-hover);
    
    /* ========== TEXT COLORS - 4 LEVELS (Dark Mode) ========== */
    --text-primary: #ececec;          /* Main content, headings */
    --text-secondary: #b4b4b4;        /* Descriptions, labels */
    --text-muted: #8e8e8e;            /* Placeholders, hints, disabled */
    --text-inverse: #171717;          /* Text on light backgrounds */
    
    /* Legacy aliases */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-muted);
    --color-text-inverse: var(--text-inverse);
    
    /* ========== BORDER COLORS - 4 LEVELS (Dark Mode) ========== */
    --border-default: rgba(255, 255, 255, 0.1);   /* Standard borders */
    --border-light: rgba(255, 255, 255, 0.05);    /* Subtle dividers */
    --border-strong: rgba(255, 255, 255, 0.15);   /* Emphasized borders */
    --border-focus: var(--accent-primary);        /* Focus rings */
    
    /* Legacy aliases */
    --color-border: var(--border-default);
    --color-border-light: var(--border-light);
    --color-border-dark: var(--border-strong);
    --color-border-focus: var(--border-focus);
    
    /* ========== BUTTON COLORS (Dark Mode) ========== */
    /* Primary Button (Blue - same as light) */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-hover: var(--accent-primary-hover);
    --btn-primary-text: #ffffff;
    
    /* Secondary Button (Dark Grey) */
    --btn-secondary-bg: #3a3a3a;
    --btn-secondary-hover: #4a4a4a;
    --btn-secondary-text: #ececec;
    
    /* Ghost Button (Transparent) */
    --btn-ghost-bg: transparent;
    --btn-ghost-hover: #3a3a3a;
    --btn-ghost-text: #ececec;
    
    /* ========== INPUT/FORM COLORS (Dark Mode) ========== */
    --input-bg: #2f2f2f;
    --input-border: rgba(255, 255, 255, 0.15);
    --input-border-hover: rgba(255, 255, 255, 0.2);
    --input-border-focus: var(--accent-primary);
    --input-placeholder: #8e8e8e;
    --input-text: #ececec;
    --input-disabled-bg: #262626;
    --input-focus-ring: var(--accent-primary-light);
    
    /* ========== INTERACTIVE ELEMENT COLORS (Dark Mode) ========== */
    --interactive-hover: #3a3a3a;
    --interactive-active: #4a4a4a;
    --interactive-disabled: #262626;
    
    /* ========== CHAT MESSAGE STYLES (Dark Mode) ========== */
    /* User Message (Right Side) */
    --chat-user-bg: #3a3a3a;
    --chat-user-text: #ececec;
    --chat-user-border: rgba(255, 255, 255, 0.1);
    
    /* Bot/AI Message (Left Side) */
    --chat-bot-bg: #2f2f2f;
    --chat-bot-text: #ececec;
    --chat-bot-border: rgba(255, 255, 255, 0.1);
    
    /* Chat Input Area */
    --chat-input-bg: #2f2f2f;
    --chat-input-border: rgba(255, 255, 255, 0.15);
    --chat-input-text: #ececec;
    --chat-input-placeholder: #8e8e8e;
    
    /* Chat Header */
    --chat-header-bg: #212121;
    --chat-header-border: rgba(255, 255, 255, 0.1);
    --chat-header-text: #ececec;
    
    /* ========== SEMANTIC COLORS (Dark Mode) ========== */
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-success-text: #86efac;
    --color-success-border: rgba(34, 197, 94, 0.3);
    
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-error-text: #fca5a5;
    --color-error-border: rgba(239, 68, 68, 0.3);
    
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-text: #fcd34d;
    --color-warning-border: rgba(245, 158, 11, 0.3);
    
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-info-text: #93c5fd;
    --color-info-border: rgba(59, 130, 246, 0.3);
    
    /* ========== SHADOWS (Dark Mode) ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6);
    
    /* ========== SIDEBAR VARIABLES (Dark Mode) ========== */
    --sidebar-bg: #171717;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-item-hover: #3a3a3a;
    --sidebar-item-active: #4a4a4a;
    --sidebar-text: #ececec;
    --sidebar-text-muted: #b4b4b4;
    
    /* ========== MODAL VARIABLES (Dark Mode) ========== */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-bg: #2f2f2f;
    --modal-border: rgba(255, 255, 255, 0.15);
    --modal-header-border: rgba(255, 255, 255, 0.1);
    --modal-footer-border: rgba(255, 255, 255, 0.1);
    
    /* ========== DROPDOWN VARIABLES (Dark Mode) ========== */
    --dropdown-bg: #2f2f2f;
    --dropdown-border: rgba(255, 255, 255, 0.15);
    --dropdown-item-hover: #3a3a3a;
    --dropdown-item-active: #4a4a4a;
    --dropdown-text: #ececec;
    --dropdown-text-muted: #b4b4b4;
    --dropdown-divider: rgba(255, 255, 255, 0.1);
    
    /* ========== LEGACY ALIASES (Dark Mode) ========== */
    --surface-primary: var(--bg-surface);
    --surface-hover: var(--bg-hover);
    
    /* ========== LOGIN/MFA PAGE BACKGROUND (Dark Mode) ========== */
    --login-bg-gradient: linear-gradient(135deg, #212121 0%, #171717 100%);
    --color-primary: var(--accent-primary);
    --color-primary-hover: var(--accent-primary-hover);
    --color-primary-alpha: var(--accent-primary-light);
    --color-on-primary: var(--text-inverse);
    --border-color: var(--border-default);
    --surface-secondary: var(--bg-elevated);
}

/* Note: We don't auto-apply dark theme based on system preference
   User must manually toggle via the theme button */

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    font-size: 1.1rem;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-top: 0;
}

h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
}

h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

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

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

/* ==========================================================================
   Layout Components
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.container-narrow {
    max-width: 800px;
}

.container-wide {
    max-width: 1400px;
}

/* ==========================================================================
   Buttons - Consistent Styling
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

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

/* Primary Button */
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--border-default);
}

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

/* Ghost Button */
.btn-ghost {
    background-color: var(--btn-ghost-bg);
    color: var(--btn-ghost-text);
    border: 1px solid transparent;
}

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

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

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

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

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

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

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

/* Info Button */
.btn-info {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}

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

/* Outline Buttons */
.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--accent-primary);
    color: var(--accent-primary);
}

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

.btn-outline-secondary {
    background-color: transparent;
    border: 2px solid var(--border-strong);
    color: var(--text-primary);
}

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

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--font-size-lg);
}

/* Full Width Button */
.btn-block {
    width: 100%;
}

/* ==========================================================================
   Forms - Consistent Styling
   ========================================================================== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

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

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.8125rem 0.875rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--input-text);
    background-color: var(--input-bg);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

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

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    background-color: var(--input-bg);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--input-disabled-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

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

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

/* ==========================================================================
   Cards & Containers
   ========================================================================== */
.card {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.card-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-default);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

/* ==========================================================================
   Messages & Alerts
   ========================================================================== */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--font-size-base);
}

.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

.alert-error,
.alert-danger {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: var(--color-error-border);
}

.alert-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
}

.alert-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}

/* Legacy support for .message and .error classes */
.message {
    composes: alert alert-success;
}

.error {
    composes: alert alert-error;
}

/* ==========================================================================
   Badges & Status Indicators
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

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

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

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

.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

/* ==========================================================================
   Tables - Consistent Styling
   ========================================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.table th {
    background-color: var(--bg-muted);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 2px solid var(--border-default);
    font-size: var(--font-size-base);
    letter-spacing: 0.02em;
}

.table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    background-color: var(--bg-surface);
}

.table tbody tr:nth-child(even) {
    background-color: var(--bg-muted);
}

.table tbody tr:nth-child(even) td {
    background-color: var(--bg-muted);
}

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

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

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

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

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Spacing */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-color-primary { color: var(--text-primary); }
.text-color-secondary { color: var(--text-secondary); }
.text-color-muted { color: var(--text-muted); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-accent { color: var(--accent-primary); }
.text-bold { font-weight: var(--font-weight-bold); }
.text-semibold { font-weight: var(--font-weight-semibold); }

/* Background Utilities */
.bg-page { background-color: var(--bg-page); }
.bg-surface { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-muted { background-color: var(--bg-muted); }
.bg-accent { background-color: var(--accent-primary); }

/* Border Utilities */
.border { border: 1px solid var(--border-default); }
.border-top { border-top: 1px solid var(--border-default); }
.border-bottom { border-bottom: 1px solid var(--border-default); }
.border-light { border: 1px solid var(--border-light); }
.border-strong { border: 1px solid var(--border-strong); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.375rem;
        --font-size-xl: 1.125rem;
    }
    
    .card {
        padding: var(--spacing-lg);
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}