/* ============================================
   ESSENTIAL PHASOR - GLOBAL STYLESHEET
   ============================================
   All colors, themes, and styles defined here.
   Import this file in all HTML pages.
   ============================================ */

/* ============================================
   CSS VARIABLES - EASY TO CUSTOMIZE
   ============================================ */
:root {
    /* BRAND COLORS - Change these to rebrand the app */
    --brand-primary: #00509d;
    --brand-light: #ffdd00;
    --brand-very-light: #FFFFFF;
    
    /* BUTTON COLORS */
    /* Dark Mode Button Colors */
    --btn-dark-bg: #ffdd00;         /* Orange background */
    --btn-dark-text: #FFFFFF;       /* White text */
    --btn-dark-hover: #ffb300;      /* Darker orange on hover */
    --btn-dark-active: #ffb300;     /* Even darker on active */
    
    /* Light Mode Button Colors */
    --btn-light-bg: #fdc500;;        /* Orange background */
    --btn-light-text: #FFFFFF;      /* White text */
    --btn-light-hover: #ffb300;     /* Darker orange on hover */
    --btn-light-active: #ffb300;    /* Even darker on active */

    /* HEADING TEXT COLOURS
    
    /* PHASE COLORS - Voltage/Current phasor colors */
    --phase-a-color: #ef4444;      /* Red */
    --phase-b-color: #94a3b8;      /* Gray (was #f8fafc) */
    --phase-c-color: #3b82f6;      /* Blue */
    
    /* DARK MODE PALETTE */
    --dark-bg-primary: #03213d;
    --dark-bg-secondary: #02305c;
    --dark-bg-tertiary: #02305c;
    --dark-bg-card: #02305c;
    --dark-text-primary: #E0E0E0;
    --dark-text-secondary: #A0A0A0;
    --dark-text-tertiary: #d0d0d0;
    --dark-border: #303030;
    --dark-border-secondary: #f6f6f6;
    --dark-grid: #667a8a;
    --dark-crosshair: #334155;
    --dark-center: #94a3b8;
    --dark-svg-grid: #334155;
    --dark-svg-label: #94a3b8;
    
    /* LIGHT MODE PALETTE */
    --light-bg-primary: #F9F9F9;
    --light-bg-secondary: #FFFFFF;
    --light-bg-tertiary: #f8fafc;
    --light-bg-card: #f8fafc;
    --light-text-primary: #00509d;
    --light-text-secondary: #6E6E6E;
    --light-text-tertiary: #6b7280;
    --light-border: #e5e7eb;
    --light-border-secondary: #cbd5e1;
    --light-grid: #a1a1aa;
    --light-crosshair: #e5e7eb;
    --light-center: #94a3b8;
    --light-svg-grid: #d1d5db;
    --light-svg-label: #6b7280;
    
    /* INTERACTION COLORS */
    --color-hover-bg: #870048;      /* Orange hover */
    --color-focus-ring: #ffdd00;    /* Focus ring */
    --color-error-bg: #f87171;      /* Error red */
    --color-warning-bg: #fb923c;    /* Warning orange */
    --color-success-bg: #10b981;    /* Success green */
}

/* ============================================
   LIGHT MODE OVERRIDES
   ============================================ */
.light-mode {
    --current-bg-primary: var(--light-bg-primary);
    --current-bg-secondary: var(--light-bg-secondary);
    --current-bg-tertiary: var(--light-bg-tertiary);
    --current-bg-card: var(--light-bg-card);
    --current-text-primary: var(--light-text-primary);
    --current-text-secondary: var(--light-text-secondary);
    --current-text-tertiary: var(--light-text-tertiary);
    --current-border: var(--light-border);
    --current-border-secondary: var(--light-border-secondary);
    --current-grid: var(--light-grid);
    --current-crosshair: var(--light-crosshair);
    --current-center: var(--light-center);
    --current-svg-grid: var(--light-svg-grid);
    --current-svg-label: var(--light-svg-label);
}

/* ============================================
   DARK MODE (DEFAULT)
   ============================================ */
:root {
    --current-bg-primary: var(--dark-bg-primary);
    --current-bg-secondary: var(--dark-bg-secondary);
    --current-bg-tertiary: var(--dark-bg-tertiary);
    --current-bg-card: var(--dark-bg-card);
    --current-text-primary: var(--dark-text-primary);
    --current-text-secondary: var(--dark-text-secondary);
    --current-text-tertiary: var(--dark-text-tertiary);
    --current-border: var(--dark-border);
    --current-border-secondary: var(--dark-border-secondary);
    --current-grid: var(--dark-grid);
    --current-crosshair: var(--dark-crosshair);
    --current-center: var(--dark-center);
    --current-svg-grid: var(--dark-svg-grid);
    --current-svg-label: var(--dark-svg-label);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

/* Dark Mode (Default) */
body:not(.light-mode) {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Mode */
body.light-mode {
    background-color: var(--light-bg-primary);
    color: var(--light-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   HEADER STYLES
   ============================================ */

.header {
    width: 100%;
    margin: 0 auto;
    padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary);
    position: relative;
    z-index: 60 !important;
}

body:not(.light-mode) .header {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary);
}

.light-mode .header {
    background-color: var(--light-bg-secondary) !important;
    color: var(--light-text-primary);
    padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ============================================
   HEADER SVG LIGHTNING BOLT COLORS
   ============================================ */

/* DARK MODE - Lightning Bolt Colors */
.header svg {
    color: var(--brand-light);
}

/* Outer line of lightning bolt - White outline */
.header svg .bolt-outer {
    fill: var(--brand-very-light) !important;
}

/* Inside fill of lightning bolt - Dark navy fill */
.header svg .bolt-inside {
    fill: var(--brand-primary) !important;
}

/* Center accent of lightning bolt - Orange accent */
.header svg .bolt-center {
    fill: var(--brand-light) !important;
}

/* LIGHT MODE - Lightning Bolt Colors */
.light-mode .header svg {
    color: var(--brand-light);
}

/* Outer line of lightning bolt - Orange outline in light mode */
.light-mode .header svg .bolt-outer {
    fill: var(--brand-light) !important;
}

/* Inside fill of lightning bolt */
.light-mode .header svg .bolt-inside {
    fill: var(--brand-light) !important;
}

/* Center accent of lightning bolt - Dark navy accent in light mode */
.light-mode .header svg .bolt-center {
    fill: var(--brand-primary) !important;
}

/* ============================================
   HEADER BUTTON ICON COLORS
   ============================================ */
#theme-toggle,
#menu-toggle {
    color: var(--brand-light) !important;
    transition: color 0.3s ease;
    outline: none !important;
}

#theme-toggle:hover,
#menu-toggle:hover {
    color: var(--brand-very-light) !important;
}

#theme-toggle:focus,
#menu-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

.light-mode #theme-toggle,
.light-mode #menu-toggle {
    color: var(--brand-light) !important;
}

.light-mode #theme-toggle:hover,
.light-mode #menu-toggle:hover {
    color: var(--brand-primary) !important;
}

/* ============================================
   BUTTON FOCUS RING - Remove ring on theme/menu buttons
   ============================================ */
#theme-toggle,
#menu-toggle {
    outline: none !important;
}

#theme-toggle:focus,
#menu-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

#theme-toggle:focus-visible,
#menu-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Brand heading color classes */
.brand-essential {
    color: var(--brand-very-light);
}

.light-mode .brand-essential {
    color: var(--brand-essential-light);
}

.brand-accent {
    color: var(--brand-light);
}

.light-mode .brand-accent {
    color: var(--brand-light);
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Primary Button - Dark Mode */
.btn-primary {
    background-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
    transition: background-color 0.3s ease;
}

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

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

/* Primary Button - Light Mode */
.light-mode .btn-primary {
    background-color: var(--btn-light-bg);
    color: var(--btn-light-text);
}

.light-mode .btn-primary:hover {
    background-color: var(--btn-light-hover);
}

.light-mode .btn-primary:active {
    background-color: var(--btn-light-active);
}

/* Success/Correct Button - Dark Mode */
.btn-correct {
    background-color: #10b981;        /* Green background */
    color: #FFFFFF;                   /* White text */
    transition: background-color 0.3s ease;
}

.btn-correct:hover {
    background-color: #059669;        /* Darker green on hover */
}

.btn-correct:active {
    background-color: #047857;        /* Even darker on active */
}

/* Success/Correct Button - Light Mode */
.light-mode .btn-correct {
    background-color: #10b981;        /* Green background */
    color: #FFFFFF;                   /* White text */
}

.light-mode .btn-correct:hover {
    background-color: #059669;        /* Darker green on hover */
}

.light-mode .btn-correct:active {
    background-color: #047857;        /* Even darker on active */
}

/* ============================================
   MAIN CONTENT STYLES
   ============================================ */

main {
    padding-top: max(0.75rem, calc(1.5rem + env(safe-area-inset-top))) !important;
}

/* ============================================
   CARD & CONTAINER STYLES
   ============================================ */

.card,
.select-wrapper {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.light-mode .card,
.light-mode .select-wrapper {
    background-color: var(--light-bg-secondary);
    border-color: var(--light-border);
}

.card.bg-white {
    background-color: var(--dark-bg-tertiary) !important;
}

.light-mode .card.bg-white {
    background-color: var(--light-bg-secondary) !important;
}

/* ============================================
   SELECT WRAPPER STYLES
   ============================================ */

.select-wrapper {
    position: relative;
    background-color: transparent !important;
}

.select-wrapper svg {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.select-wrapper select {
    background-color: transparent !important;
    color: inherit;
    border: none;
    box-shadow: none;
}

.light-mode .select-wrapper select {
    background-color: transparent !important;
    color: var(--light-text-primary) !important;
    border-color: var(--light-border) !important;
}

/* ============================================
   INPUT FIELD STYLES
   ============================================ */

.input-field {
    background-color: #3c4051 !important;
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
    border: none;
    box-shadow: none;
}

.light-mode .input-field {
    background-color: #f4f3f3 !important;
    border-color: var(--light-border) !important;
    color: var(--light-text-primary);
}

.input-header {
    color: var(--dark-text-secondary);
    border-color: var(--dark-border);
}

.card.bg-slate-900 .input-header {
    color: #fff;
}

.light-mode .card.bg-slate-900 .input-header {
    color: var(--light-text-secondary);
}

.light-mode .input-header {
    color: var(--light-text-secondary);
    border-color: var(--light-border);
}

/* ============================================
   DIAGRAM CONTAINER STYLES
   ============================================ */

.diagram-container {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.light-mode .diagram-container {
    background-color: var(--light-bg-secondary);
    border-color: var(--light-border);
}

.diagram-title {
    color: var(--dark-text-primary);
}

.light-mode .diagram-title {
    color: var(--light-text-primary);
}

/* ============================================
   LEGEND & OVERLAY STYLES
   ============================================ */

.legend-overlay {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
    border-color: var(--dark-border);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.legend-overlay .font-bold {
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.legend-overlay .border-t-dashed {
    border-color: #FFFFFF;
}

.light-mode .legend-overlay {
    background-color: var(--light-bg-secondary);
    color: var (--light-text-secondary);
    border-color: var(--light-border);
}

.light-mode .legend-overlay .font-bold {
    color: var(--light-text-primary);
    border-color: var(--light-border);
}

.light-mode .legend-overlay .border-t-dashed {
    border-color: var(--light-border);
}

/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */

.text-accent {
    color: var(--brand-orange);
}

/* Background color utilities for slate-50 */
.bg-slate-50 {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-secondary) !important;
}

.light-mode .bg-slate-50 {
    background-color: var(--light-bg-card) !important;
    border-color: var(--light-border-secondary) !important;
}

/* Border color utilities for slate-200 */
.border-slate-200 {
    border-color: var(--dark-border-secondary) !important;
}

.light-mode .border-slate-200 {
    border-color: var(--light-border-secondary) !important;
}

/* Text color utilities for slate-500 */
.text-slate-500 {
    color: var(--dark-text-secondary) !important;
}

.light-mode .text-slate-500 {
    color: var(--light-text-secondary) !important;
}

/* Text color utilities for slate-600 */
.text-slate-600 {
    color: var(--dark-text-tertiary) !important;
}

.light-mode .text-slate-600 {
    color: var(--light-text-tertiary) !important;
}

/* Additional Tailwind utility overrides */
.text-orange-500 {
    color: var(--brand-orange) !important;
}

.bg-orange-500 {
    background-color: var(--brand-orange) !important;
}

.bg-orange-500:hover {
    background-color: #ffdd00 !important;
}

/* ============================================
   SVG & PHASOR DIAGRAM STYLES
   ============================================ */

.phasor-diagram {
    border-radius: 0.5rem;
}

svg text {
    font-family: ui-sans-serif, system-ui, sans-serif;
    letter-spacing: inherit;
}

svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================
   CUSTOM STYLES FOR SELECTS
   ============================================ */

.select-wrapper {
    position: relative;
    background-color: transparent !important;
}

.select-wrapper svg {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.font-sans, .font-mono {
    font-family: 'Inter', sans-serif;
}

/* ============================================
   PHASE COLORS - FOR USE IN JAVASCRIPT
   ============================================
   Reference in JS as:
   - Phase A: #ef4444 (red)
   - Phase B: #94a3b8 (gray)
   - Phase C: #3b82f6 (blue)
   
   Reference angles:
   - Phase A: 180° (at bottom)
   - Phase B: 300° (120° clockwise)
   - Phase C: 60° (120° counter-clockwise)
   ============================================ */

/* ============================================
   FOOTER STYLES
   ============================================ */

.footer-link {
    color: var(--brand-light);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-link:hover {
    opacity: 0.8;
}

.light-mode .footer-link {
    color: var(--brand-light);
}

.light-mode .footer-link:hover {
    opacity: 0.8;
}

/* ============================================
   FOCUS & INPUT OVERRIDES
   ============================================ */

/* Override hardcoded orange focus ring with yellow */
.focus\:ring-orange-500:focus {
    --tw-ring-color: var(--color-focus-ring) !important;
}

.focus\:border-orange-500:focus {
    --tw-border-opacity: 1;
    border-color: var(--color-focus-ring) !important;
}

/* ============================================
   NAVIGATION MENU STYLES
   ============================================ */

/* Mobile menu overlay - background overlay when menu is open */
#mobile-menu {
    position: fixed !important;
    z-index: 40 !important;
    top: 60px !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Navigation menu - slides in from right */
#nav-menu {
    position: fixed !important;
    top: 60px !important;
    right: 0 !important;
    height: calc(100vh - 60px) !important;
    width: 16rem !important;
    background-color: #02305c !important;
    color: white !important;
    z-index: 50 !important;
    overflow-y: auto !important;
    transform-origin: right !important;
    will-change: transform !important;
}

/* Navigation menu links - ensure they display vertically */
#nav-menu .p-6 {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

#nav-menu a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    transition: background-color 0.3s ease !important;
    text-align: left !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: white !important;
    text-decoration: none !important;
}

#nav-menu a:hover {
    background-color: #051d3d !important;
}

.light-mode #nav-menu {
    background-color: #02305c !important;
}

.light-mode #nav-menu a:hover {
    background-color: #051d3d !important;
}