/* Theme System with CSS Variables */
/* This file contains ONLY CSS variables - no element selectors */
/* All component styles are in components.css */

/* Base font sizing - Fluid Typography */
html {
    font-size: clamp(12px, 1.4vw, 14px);
}

@media (min-width: 768px) {
    html {
        font-size: 1rem;
    }
}

/* Light Theme (Default) */
:root {
    /* Typography - Fluid Font Sizes */
    --font-family-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Fluid font size scale */
    --font-size-xs: clamp(0.625rem, 1.5vw, 0.75rem);      /* 10-12px */
    --font-size-sm: clamp(0.75rem, 1.8vw, 0.875rem);      /* 12-14px */
    --font-size-base: clamp(0.875rem, 2vw, 1rem);         /* 14-16px */
    --font-size-md: clamp(1rem, 2.2vw, 1.125rem);         /* 16-18px */
    --font-size-lg: clamp(1.125rem, 2.5vw, 1.25rem);      /* 18-20px */
    --font-size-xl: clamp(1.25rem, 3vw, 1.5rem);          /* 20-24px */
    --font-size-2xl: clamp(1.5rem, 3.5vw, 2rem);          /* 24-32px */
    --font-size-3xl: clamp(1.875rem, 4vw, 2.5rem);        /* 30-40px */
    
    /* Button Sizing */
    --btn-min-width: 96px;
    --btn-min-height: 32px;
    --btn-min-width-sm: 72px;
    --btn-min-height-sm: 28px;
    --btn-min-width-lg: 120px;
    --btn-min-height-lg: 40px;
    
    /* Brand Colors - Green Palette from Design System */
    --brand-main-green: #00843D;        /* Main Green - Pantone 348c */
    --brand-darker-green: #046A38;      /* Darker Green - Pantone 349c */
    --brand-mid-green: #43B02A;         /* Mid Green - Pantone 361c */
    --brand-light-green: #D0DEBB;       /* Light Green - Pantone 7485c */
    
    --brand-dark-grey: #404041;         /* Dark Grey - Pantone Process Black 90% */
    --brand-mid-grey: #6D6E70;          /* Mid Grey - Pantone Process Black 70% */
    --brand-light-grey: #D1D2D4;        /* Light Grey - Pantone Process Black 20% */
    
    /* Primary Brand Usage */
    --brand-primary: var(--brand-main-green);
    --brand-secondary: var(--brand-mid-green);
    --brand-gradient-start: var(--brand-darker-green);
    --brand-gradient-end: var(--brand-mid-green);
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e5e7eb;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-disabled: #f3f4f6;
    --bg-thead: #f9fafb;
    --bg-muted: #f3f4f6;
    
    /* Text Colors */
    --text-primary: var(--brand-dark-grey);
    --text-secondary: var(--brand-mid-grey);
    --text-tertiary: #6b7280;
    --text-inverse: #ffffff;
    --text-heading: var(--brand-dark-grey);
    --text-label: var(--brand-mid-grey);
    --text-input: var(--brand-dark-grey);
    --text-disabled: #9ca3af;
    --text-muted: #9ca3af;
    
    /* Accent Colors */
    --accent-success: var(--brand-mid-green);
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --accent-info: var(--brand-main-green);
    
    /* Border Colors */
    --border-primary: var(--brand-light-grey);
    --border-secondary: #e5e7eb;
    --border-subtle: #f3f4f6;
    --border-input: var(--brand-light-grey);
    
    /* Interactive States */
    --hover-bg: #f3f4f6;
    --active-bg: rgba(0, 132, 61, 0.1);
    --focus-ring: var(--brand-main-green);
    --focus-outline: rgba(0, 132, 61, 0.15);
    --shadow-focus: 0 0 0 3px rgba(0, 132, 61, 0.2);
    --brand-primary-dark: var(--brand-darker-green);
    
    /* Alert/Status Backgrounds */
    --bg-success: rgba(67, 176, 42, 0.1);
    --bg-danger: rgba(239, 68, 68, 0.1);
    --bg-warning: rgba(245, 158, 11, 0.1);
    --bg-info: rgba(0, 132, 61, 0.1);
    
    /* Alert/Status Text */
    --text-success: #166534;
    --text-danger: #991b1b;
    --text-warning: #92400e;
    --text-info: var(--brand-darker-green);
    
    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    
    /* Overlay */
    --overlay-light: rgba(255,255,255,0.1);
    --overlay-medium: rgba(255,255,255,0.2);
    --overlay-heavy: rgba(0,0,0,0.4);
    
    /* Color Palette - for buttons and specific use */
    --green-500: var(--brand-mid-green);
    --green-600: var(--brand-main-green);
    --red-500: #ef4444;
    --red-600: #dc2626;
    --yellow-500: #f59e0b;
    --yellow-600: #d97706;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --gray-300: var(--brand-light-grey);
    --gray-500: var(--brand-mid-grey);
    --gray-600: var(--brand-dark-grey);
    
    /* Select/Date Input Icons (encoded SVG) */
    --icon-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2300843D' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
    --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2300843D' d='M11 2h1a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h1V1h1v1h4V1h1v1zM4 3a1 1 0 00-1 1v9a1 1 0 001 1h8a1 1 0 001-1V4a1 1 0 00-1-1H4zm0 2h8v1H4V5zm0 2h2v2H4V7zm3 0h2v2H7V7zm3 0h2v2h-2V7zM4 10h2v2H4v-2zm3 0h2v2H7v-2zm3 0h2v2h-2v-2z'/%3E%3C/svg%3E");
    
    /* Bootstrap compatibility */
    --bs-body-bg: #ffffff;
    --bs-body-color: var(--brand-dark-grey);
    --bs-border-color: var(--brand-light-grey);
    --bs-link-color: var(--brand-main-green);
    --bs-link-hover-color: var(--brand-darker-green);
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background Colors - Dark theme with green tints */
    --bg-primary: #0a1a15;
    --bg-secondary: #0f2419;
    --bg-tertiary: #152e23;
    --bg-elevated: #1a3328;
    --bg-input: #1a3328;
    --bg-disabled: #152e23;
    --bg-thead: #1a3328;
    --bg-muted: #152e23;
    
    /* Text Colors */
    --text-primary: #e5e7eb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;
    --text-heading: #e5e7eb;
    --text-label: #d1d5db;
    --text-input: #e5e7eb;
    --text-disabled: #6b7280;
    --text-muted: #9ca3af;
    
    /* Brand Colors remain consistent */
    --brand-primary: var(--brand-mid-green);
    --brand-secondary: var(--brand-main-green);
    --brand-gradient-start: var(--brand-darker-green);
    --brand-gradient-end: var(--brand-mid-green);
    
    /* Accent Colors */
    --accent-success: var(--brand-mid-green);
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --accent-info: #34d399;
    
    /* Border Colors */
    --border-primary: #2d4a3e;
    --border-secondary: #243a30;
    --border-subtle: #1a3328;
    --border-input: rgba(45, 74, 62, 0.6);
    
    /* Interactive States */
    --hover-bg: #1a3328;
    --active-bg: rgba(45, 74, 62, 0.4);
    --focus-ring: var(--brand-mid-green);
    --focus-outline: rgba(67, 176, 42, 0.25);
    --shadow-focus: 0 0 0 3px rgba(67, 176, 42, 0.3);
    --brand-primary-dark: var(--brand-main-green);
    
    /* Alert/Status Backgrounds */
    --bg-success: rgba(67,176,42,0.15);
    --bg-danger: rgba(239, 68, 68, 0.15);
    --bg-warning: rgba(245, 158, 11, 0.15);
    --bg-info: rgba(52, 211, 153, 0.15);
    
    /* Alert/Status Text */
    --text-success: #86efac;
    --text-danger: #fca5a5;
    --text-warning: #fcd34d;
    --text-info: #86efac;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    
    /* Overlay */
    --overlay-light: rgba(67,176,42,0.1);
    --overlay-medium: rgba(67,176,42,0.2);
    --overlay-heavy: rgba(0,0,0,0.6);
    
    /* Select/Date Input Icons (encoded SVG) - Dark theme uses mid-green */
    --icon-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2343B02A' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
    --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2343B02A' d='M11 2h1a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h1V1h1v1h4V1h1v1zM4 3a1 1 0 00-1 1v9a1 1 0 001 1h8a1 1 0 001-1V4a1 1 0 00-1-1H4zm0 2h8v1H4V5zm0 2h2v2H4V7zm3 0h2v2H7V7zm3 0h2v2h-2V7zM4 10h2v2H4v-2zm3 0h2v2H7v-2zm3 0h2v2h-2v-2z'/%3E%3C/svg%3E");
    
    /* Bootstrap compatibility */
    --bs-body-bg: #0a1a15;
    --bs-body-color: #f3f4f6;
    --bs-border-color: #2d4a3e;
    --bs-link-color: var(--brand-mid-green);
    --bs-link-hover-color: #86efac;
}

/* ===========================================
   THEME TOGGLE COMPONENT
   (This stays here as it's theme-specific)
   =========================================== */

.theme-toggle {
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    color: var(--text-inverse);
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    margin-left: 8px;
}

.theme-toggle:hover {
    background: var(--overlay-medium);
}

.theme-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
}

.theme-icon-img {
    display: none;
    width: 24px;
    height: 24px;
}

.theme-icon-dark {
    display: block;
}

.theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: block;
}

.moon-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: currentColor;
    position: relative;
    transform: rotate(-25deg);
}

.moon-icon::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--overlay-light);
    box-shadow: inset 0 0 0 2px var(--brand-gradient-start);
}

.sun-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    position: relative;
    box-shadow: 
        0 0 0 2px currentColor,
        0 -6px 0 0 currentColor,
        4px -4px 0 0 currentColor,
        6px 0 0 0 currentColor,
        4px 4px 0 0 currentColor,
        0 6px 0 0 currentColor,
        -4px 4px 0 0 currentColor,
        -6px 0 0 0 currentColor,
        -4px -4px 0 0 currentColor;
}

.sun-icon::before,
.sun-icon::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: currentColor;
}

/* Note icon styling */
.note-with-icon {
    position: relative;
    padding-left: 32px; /* accommodate 24px icon + offset */
    display: block; /* ensure multi-line text wraps under same indent */
    white-space: pre-wrap; /* preserve newlines */
    overflow-wrap: anywhere; /* allow long words to break */
    word-break: break-word;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.note-with-icon.expanded {
    max-height: none;
}

.note-with-icon .note-info-icon {
    position: absolute;
    left: 4px; /* small inset from edge */
    top: 4px; /* inset from top */
    width: 24px;
    height: 24px;
    cursor: pointer;
}