/**
 * WAV Luxury Watch - Centralized Color Palette
 * 
 * This file contains all color variables for the WAV platform.
 * Colors are synchronized with Flutter app ColorScheme.
 * 
 * Usage: var(--wav-primary), var(--wav-accent), etc.
 * 
 * Light theme is active by default. Dark theme variables are defined
 * but will be activated in a future phase.
 */

:root {
    /* ============================================
       TYPOGRAPHY - Luxury Fonts
       ============================================ */
    --wav-font-heading: 'Playfair Display', serif;
    --wav-font-body: 'Work Sans', sans-serif;
    
    /* ============================================
       LIGHT THEME - Primary Colors (from Flutter lightColorScheme)
       ============================================ */
    
    /* Primary - Buttons, highlights */
    --wav-primary: #071e4f;
    --wav-on-primary: #ffffff;
    --wav-primary-container: #d0d5de;
    --wav-on-primary-container: #0a1f42;
    
    /* Secondary - Secondary buttons, chips */
    --wav-secondary: #bc9b6a;
    --wav-on-secondary: #231604;
    --wav-secondary-container: #e4c78b;
    --wav-on-secondary-container: #201304;
    
    /* Tertiary - Accent color */
    --wav-tertiary: #d9b671;
    --wav-on-tertiary: #291905;
    --wav-tertiary-container: #ffe9c6;
    --wav-on-tertiary-container: #2e1c06;
    
    /* Error */
    --wav-error: #de0730;
    --wav-on-error: #ffffff;
    --wav-error-container: #ffdad4;
    --wav-on-error-container: #410001;
    
    /* Surfaces and backgrounds */
    --wav-surface: #f2f4fa;
    --wav-on-surface: #1a2233;
    --wav-on-surface-variant: #5c6786;
    --wav-surface-tint: #142b5f;
    
    /* Outlines (dividers, strokes) */
    --wav-outline: #c6ccd9;
    --wav-outline-variant: #e2e6f1;
    
    /* Shadows */
    --wav-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    --wav-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    --wav-shadow-lg: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
    --wav-scrim: rgba(0, 0, 0, 0.2);
    
    /* Inverse */
    --wav-inverse-surface: #1b2538;
    --wav-inverse-primary: #9ab1e8;
    
    /* Material 3 Fixed Colors */
    --wav-primary-fixed: #d6e0ff;
    --wav-on-primary-fixed: #0f224a;
    --wav-primary-fixed-dim: #afc1f0;
    --wav-on-primary-fixed-variant: #142b5f;
    
    --wav-secondary-fixed: #f5e5c6;
    --wav-on-secondary-fixed: #2b1905;
    --wav-secondary-fixed-dim: #e4c78b;
    --wav-on-secondary-fixed-variant: #4a2f08;
    
    --wav-tertiary-fixed: #ffe9c6;
    --wav-on-tertiary-fixed: #341f07;
    --wav-tertiary-fixed-dim: #d9b671;
    --wav-on-tertiary-fixed-variant: #4d2d0c;
    
    /* Elevation layering */
    --wav-surface-dim: #e8eaf2;
    --wav-surface-bright: #ffffff;
    --wav-surface-container-lowest: #ffffff;
    --wav-surface-container-low: #f7f8fd;
    --wav-surface-container: #f1f3fa;
    --wav-surface-container-high: #eaeff9;
    --wav-surface-container-highest: #ffffff;
    
    /* ============================================
       LEGACY COMPATIBILITY - Map to existing variable names
       ============================================ */
    
    /* Primary colors - backward compatible */
    --wav-primary-dark: #0a1f42;
    --wav-primary-light: #142b5f;
    
    /* Accent colors - backward compatible */
    --wav-accent: #bc9b6a;
    --wav-accent-light: #e4c78b;
    --wav-accent-dark: #4a2f08;
    
    /* Text colors - mapped from on-surface */
    --wav-text-primary: #1a2233;
    --wav-text-secondary: #5c6786;
    --wav-text-muted: #9ab1e8;
    --wav-text-white: #ffffff;
    
    /* Background colors - mapped from surface */
    --wav-bg: #ffffff;
    --wav-bg-soft: #f2f4fa;
    --wav-bg-light: #f7f8fd;
    --wav-bg-tertiary: #f1f3fa;
    
    /* Border colors - mapped from outline */
    --wav-border: #c6ccd9;
    --wav-border-light: #e2e6f1;
    --wav-border-subtle: #e2e6f1;
    
    /* ============================================
       SYSTEM STATES - Error, Success, Warning, Info
       ============================================ */
    
    /* Error - from ColorScheme */
    --wav-error: #de0730;
    --wav-error-bg: #ffdad4;
    --wav-error-text: #410001;
    --wav-error-light: #ffdad4;
    
    /* Success - keep existing for status indicators */
    --wav-success: #039156;
    --wav-success-bg: #d4f8e8;
    --wav-success-text: #118c4f;
    --wav-success-light: #e8faf1;
    
    /* Warning - keep existing for status indicators */
    --wav-warning: #ffab00;
    --wav-warning-bg: #fff3cd;
    --wav-warning-text: #a17d00;
    --wav-warning-light: #fff9e6;
    
    /* Info - keep existing for status indicators */
    --wav-info: #0097dc;
    --wav-info-bg: #d1ecf1;
    --wav-info-text: #0c5460;
    --wav-info-light: #e8f4f8;
    
    /* ============================================
       SUBMISSION STATUS COLORS
       ============================================ */
    
    /* Pending - Awaiting initial review */
    --wav-status-pending: #ffab00;
    --wav-status-pending-bg: #fff3cd;
    --wav-status-pending-text: #a17d00;
    
    /* Under Review - Currently being reviewed */
    --wav-status-under-review: #0097dc;
    --wav-status-under-review-bg: #d1ecf1;
    --wav-status-under-review-text: #0c5460;
    
    /* Authentic - Verified as authentic */
    --wav-status-authentic: #039156;
    --wav-status-authentic-bg: #d4f8e8;
    --wav-status-authentic-text: #118c4f;
    
    /* Not Authentic - Verified as not authentic */
    --wav-status-not-authentic: #6c757d;
    --wav-status-not-authentic-bg: #e9ecef;
    --wav-status-not-authentic-text: #495057;
    
    /* Rejected - Submission rejected */
    --wav-status-rejected: #de0730;
    --wav-status-rejected-bg: #ffdad4;
    --wav-status-rejected-text: #410001;
    
    /* ============================================
       TRANSACTION STATUS COLORS
       ============================================ */
    
    /* Succeeded */
    --wav-tx-succeeded: #039156;
    --wav-tx-succeeded-bg: #d4f8e8;
    --wav-tx-succeeded-text: #118c4f;
    
    /* Failed */
    --wav-tx-failed: #de0730;
    --wav-tx-failed-bg: #ffdad4;
    --wav-tx-failed-text: #410001;
    
    /* Pending */
    --wav-tx-pending: #ffab00;
    --wav-tx-pending-bg: #fff3cd;
    --wav-tx-pending-text: #a17d00;
    
    /* Canceled */
    --wav-tx-canceled: #6c757d;
    --wav-tx-canceled-bg: #e9ecef;
    --wav-tx-canceled-text: #495057;
}

/* ============================================
   DARK THEME - Prepared for future implementation
   ============================================ */

[data-theme="dark"],
.dark-theme {
    /* Primary colors */
    --wav-primary: #9ab1e8;
    --wav-on-primary: #0b183a;
    --wav-primary-container: #1a2a4a;
    --wav-on-primary-container: #c5d4f0;
    
    /* Secondary */
    --wav-secondary: #d9b671;
    --wav-on-secondary: #2b1c05;
    --wav-secondary-container: #8c6c2c;
    --wav-on-secondary-container: #fcefd7;
    
    /* Tertiary */
    --wav-tertiary: #e6c480;
    --wav-on-tertiary: #2e1c06;
    --wav-tertiary-container: #5b4014;
    --wav-on-tertiary-container: #fff0d6;
    
    /* Error */
    --wav-error: #de0730;
    --wav-on-error: #ffffff;
    --wav-error-container: #410001;
    --wav-on-error-container: #ffdad4;
    
    /* Surfaces */
    --wav-surface: #101320;
    --wav-on-surface: #e1e6ff;
    --wav-on-surface-variant: #c2c9df;
    --wav-surface-tint: #9ab1e8;
    
    /* Outlines */
    --wav-outline: #49506a;
    --wav-outline-variant: #30364e;
    
    /* Shadows - darker for dark theme */
    --wav-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
    --wav-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --wav-shadow-lg: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
    --wav-scrim: rgba(0, 0, 0, 0.4);
    
    /* Inverse */
    --wav-inverse-surface: #f1f3fa;
    --wav-inverse-primary: #1f3d7a;
    
    /* Material 3 Fixed Colors */
    --wav-primary-fixed: #d6e0ff;
    --wav-on-primary-fixed: #071533;
    --wav-primary-fixed-dim: #afc1f0;
    --wav-on-primary-fixed-variant: #1f3d7a;
    
    --wav-secondary-fixed: #f5e5c6;
    --wav-on-secondary-fixed: #221403;
    --wav-secondary-fixed-dim: #e4c78b;
    --wav-on-secondary-fixed-variant: #4c310a;
    
    --wav-tertiary-fixed: #ffe9c6;
    --wav-on-tertiary-fixed: #261704;
    --wav-tertiary-fixed-dim: #d9b671;
    --wav-on-tertiary-fixed-variant: #4d2d0c;
    
    /* Elevation layering */
    --wav-surface-dim: #0c0f1a;
    --wav-surface-bright: #1a2030;
    --wav-surface-container-lowest: #05060c;
    --wav-surface-container-low: #111728;
    --wav-surface-container: #161e31;
    --wav-surface-container-high: #1f273b;
    --wav-surface-container-highest: #293247;
    
    /* Legacy compatibility for dark theme */
    --wav-primary-dark: #1f3d7a;
    --wav-primary-light: #9ab1e8;
    --wav-accent: #d9b671;
    --wav-accent-light: #e6c480;
    --wav-accent-dark: #8c6c2c;
    --wav-text-primary: #e1e6ff;
    --wav-text-secondary: #c2c9df;
    --wav-text-muted: #9ab1e8;
    --wav-bg: #101320;
    --wav-bg-soft: #161e31;
    --wav-bg-light: #111728;
    --wav-bg-tertiary: #0c0f1a;
    --wav-border: #49506a;
    --wav-border-light: #30364e;
    --wav-border-subtle: #30364e;
}

/* ============================================
   COMPONENT OVERRIDES
   ============================================ */

/* Sidebar/Menu background override - high specificity */
.wav-sidebar-bg,
.layout-menu.wav-sidebar-bg,
aside.layout-menu.wav-sidebar-bg,
#layout-menu.wav-sidebar-bg {
    background: var(--wav-bg) !important;
    background-color: var(--wav-bg) !important;
}

/* Menu inner and content backgrounds */
.bg-menu-theme {
    background-color: var(--wav-bg) !important;
}

/* Page wrapper background */
.layout-page,
.layout-wrapper,
.content-wrapper {
    background-color: var(--wav-surface) !important;
}

/* Card backgrounds */
.card {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

/* Dropdown menu backgrounds */
.dropdown-menu {
    --bs-dropdown-bg: var(--wav-bg);
    --bs-dropdown-border-color: var(--wav-border);
    --bs-dropdown-link-color: var(--wav-text-primary);
    --bs-dropdown-link-hover-color: var(--wav-text-primary);
    --bs-dropdown-link-hover-bg: var(--wav-surface-container-high);
    --bs-dropdown-divider-bg: var(--wav-border);
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
    box-shadow: var(--wav-shadow) !important;
}

.dropdown-item {
    color: var(--wav-text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--wav-surface-container-high) !important;
    color: var(--wav-text-primary) !important;
}

/* Dropdown divider */
.dropdown-divider {
    border-color: var(--wav-border) !important;
}

/* Table backgrounds */
.table {
    --bs-table-bg: var(--wav-bg);
    --bs-table-striped-bg: var(--wav-surface);
    color: var(--wav-text-primary);
}

/* Form controls */
.form-control,
.form-select {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
    color: var(--wav-text-primary) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-primary) !important;
    color: var(--wav-text-primary) !important;
}

/* Modal backgrounds */
.modal-content {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

/* Text colors */
body {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-surface) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--wav-text-primary) !important;
}

/* Override Bootstrap body background */
:root {
    --bs-body-bg: var(--wav-surface);
    --bs-body-color: var(--wav-text-primary);
}

[data-theme="dark"],
.dark-theme,
html.dark-style {
    --bs-body-bg: var(--wav-surface);
    --bs-body-color: var(--wav-text-primary);
}

/* ============================================
   THEME TRANSITION EFFECTS
   ============================================ */

/* Smooth theme transitions - applied to all elements */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.25s ease, 
                border-color 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease !important;
}

/* Theme toggle button styles */
.theme-toggle-wrapper .dropdown-menu {
    min-width: 100%;
}

.theme-toggle-wrapper .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.theme-toggle-wrapper .dropdown-item.active {
    background-color: var(--wav-primary);
    color: var(--wav-on-primary);
}

.theme-toggle-wrapper .dropdown-item:hover:not(.active) {
    background-color: var(--wav-surface-container-high);
}

.theme-toggle-wrapper .btn-outline-secondary {
    border-color: var(--wav-border);
    color: var(--wav-text-primary);
    background-color: var(--wav-bg);
}

/* ============================================
   COMPACT THEME SELECTOR (in user menu)
   ============================================ */

.theme-selector-container {
    cursor: default;
}

.theme-selector-container:hover {
    background-color: transparent !important;
}

.theme-selector-group {
    display: flex;
    gap: 6px;
    width: 100%;
}

.theme-selector-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid var(--wav-border);
    background-color: transparent;
    color: var(--wav-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

.theme-selector-btn:hover {
    background-color: var(--wav-surface-container-high);
    color: var(--wav-text-primary);
    border-color: var(--wav-primary);
}

.theme-selector-btn.active {
    background-color: var(--wav-primary);
    color: var(--wav-on-primary);
    border-color: var(--wav-primary);
}

.theme-selector-btn.active:hover {
    background-color: var(--wav-primary);
    opacity: 0.9;
}

/* ============================================
   PAGINATION STYLES
   ============================================ */

.pagination {
    --bs-pagination-color: var(--wav-text-primary);
    --bs-pagination-bg: var(--wav-bg);
    --bs-pagination-border-color: var(--wav-border);
    --bs-pagination-hover-color: var(--wav-primary);
    --bs-pagination-hover-bg: var(--wav-surface-container-high);
    --bs-pagination-hover-border-color: var(--wav-border);
    --bs-pagination-focus-color: var(--wav-primary);
    --bs-pagination-focus-bg: var(--wav-surface-container-high);
    --bs-pagination-active-color: var(--wav-on-primary);
    --bs-pagination-active-bg: var(--wav-primary);
    --bs-pagination-active-border-color: var(--wav-primary);
    --bs-pagination-disabled-color: var(--wav-text-secondary);
    --bs-pagination-disabled-bg: var(--wav-surface);
    --bs-pagination-disabled-border-color: var(--wav-border);
}

.page-link {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

.page-link:hover {
    color: var(--wav-primary) !important;
    background-color: var(--wav-surface-container-high) !important;
    border-color: var(--wav-border) !important;
}

.page-item.active .page-link {
    color: var(--wav-on-primary) !important;
    background-color: var(--wav-primary) !important;
    border-color: var(--wav-primary) !important;
}

.page-item.disabled .page-link {
    color: var(--wav-text-secondary) !important;
    background-color: var(--wav-surface) !important;
    border-color: var(--wav-border) !important;
}

/* ============================================
   DATATABLE STYLES
   ============================================ */

.dataTables_wrapper {
    color: var(--wav-text-primary);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--wav-text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--wav-primary) !important;
    background-color: var(--wav-surface-container-high) !important;
    border-color: var(--wav-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: var(--wav-on-primary) !important;
    background-color: var(--wav-primary) !important;
    border-color: var(--wav-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--wav-text-secondary) !important;
    background-color: var(--wav-surface) !important;
}

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

.btn-outline-secondary {
    color: var(--wav-text-primary) !important;
    border-color: var(--wav-border) !important;
}

.btn-outline-secondary:hover {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-surface-container-high) !important;
    border-color: var(--wav-border) !important;
}

.btn-label-secondary {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-surface) !important;
    border-color: transparent !important;
}

.btn-label-secondary:hover {
    background-color: var(--wav-surface-container-high) !important;
}

/* ============================================
   ALERT AND BADGE STYLES
   ============================================ */

.alert {
    color: var(--wav-text-primary);
    background-color: var(--wav-surface);
    border-color: var(--wav-border);
}

/* ============================================
   LIST GROUP STYLES
   ============================================ */

.list-group-item {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

.list-group-item:hover {
    background-color: var(--wav-surface-container-high) !important;
}

/* ============================================
   BREADCRUMB STYLES
   ============================================ */

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--wav-text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--wav-text-primary) !important;
}

/* ============================================
   NAV AND TAB STYLES
   ============================================ */

.nav-link {
    color: var(--wav-text-secondary) !important;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--wav-primary) !important;
}

.nav-link.active {
    color: var(--wav-primary) !important;
}

.nav-tabs .nav-link {
    background-color: transparent !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) var(--wav-border) var(--wav-bg) !important;
}

/* ============================================
   INPUT GROUP STYLES
   ============================================ */

.input-group-text {
    color: var(--wav-text-primary) !important;
    background-color: var(--wav-surface) !important;
    border-color: var(--wav-border) !important;
}

/* ============================================
   POPOVER AND TOOLTIP STYLES
   ============================================ */

.popover {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

.popover-header {
    background-color: var(--wav-surface) !important;
    border-color: var(--wav-border) !important;
    color: var(--wav-text-primary) !important;
}

.popover-body {
    color: var(--wav-text-primary) !important;
}

.tooltip-inner {
    background-color: var(--wav-inverse-surface) !important;
    color: var(--wav-surface) !important;
}

/* ============================================
   OFFCANVAS STYLES
   ============================================ */

.offcanvas {
    background-color: var(--wav-bg) !important;
    color: var(--wav-text-primary) !important;
}

.offcanvas-header {
    border-color: var(--wav-border) !important;
}

/* ============================================
   ACCORDION STYLES
   ============================================ */

.accordion-item {
    background-color: var(--wav-bg) !important;
    border-color: var(--wav-border) !important;
}

.accordion-button {
    background-color: var(--wav-bg) !important;
    color: var(--wav-text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--wav-surface-container-high) !important;
    color: var(--wav-primary) !important;
}

.accordion-body {
    background-color: var(--wav-bg) !important;
    color: var(--wav-text-primary) !important;
}