/**
 * Theme Manager CSS
 * Handles theme switching, density controls, and font size variations
 * Part of the UI/UX Redesign - Premium & Eye-Friendly Design System
 */

/* ========================================
   THEME SYSTEM - CSS Custom Properties
   ======================================== */

:root {
    /* ============================================
       🌸 FRESH & SWEET PASTEL THEME
       สดชื่น หวาน สะอาด หรู อ่านง่าย
       ============================================ */

    /* Background Colors - Clean White & Soft Tints */
    --bg-primary: #FAFBFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F8FA;
    --bg-card: #FFFFFF;

    /* Text Colors - Deep Navy for Excellent Readability */
    --text-primary: #1A2B3C;
    --text-secondary: #3D5167;
    --text-muted: #6B7C8F;
    --text-inverse: #FFFFFF;

    /* Primary Accent - Fresh Teal */
    --accent-primary: #38B2AC;
    --accent-hover: #4FD1C5;
    --accent-active: #2C9E98;
    --accent-light: #E6FFFA;

    /* 🌈 Fresh & Sweet Functional Colors */
    --success: #48BB78;
    --success-light: #F0FFF4;
    --warning: #ECC94B;
    --warning-light: #FFFBEB;
    --danger: #F687B3;
    --danger-light: #FFF5F7;
    --info: #63B3ED;
    --info-light: #EBF8FF;

    /* Borders & Shadows */
    --border-color: #E2E8F0;
    --border-light: #EDF2F7;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Typography */
    --font-family: 'Sarabun', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme - Eye-Friendly (Not Overly Saturated) */
/* Dark Theme - High Clarity (Slate System) */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    /* Slate 900 - Deep background */
    --bg-secondary: #1e293b;
    /* Slate 800 - Sidebar/Header */
    --bg-tertiary: #334155;
    /* Slate 700 - Hover states */
    --bg-card: #1e293b;
    /* Slate 800 - Card surface */

    --text-primary: #f8fafc;
    /* Slate 50 - High contrast text */
    --text-secondary: #cbd5e1;
    /* Slate 300 - Readable secondary */
    --text-muted: #94a3b8;
    /* Slate 400 - Muted text */
    --text-inverse: #0f172a;
    /* Slate 900 */

    --accent-primary: #6366f1;
    /* Indigo 500 - Vivid accent */
    --accent-hover: #818cf8;
    /* Indigo 400 */
    --accent-active: #4f46e5;
    /* Indigo 600 */
    --accent-light: #1e293b;
    /* Slate 800 (Background for accents) */

    --success: #22c55e;
    --success-light: #14532d;
    --warning: #eab308;
    --warning-light: #713f12;
    --danger: #ef4444;
    --danger-light: #7f1d1d;
    --info: #06b6d4;
    --info-light: #164e63;

    --border-color: #334155;
    /* Slate 700 - Visible borders */
    --border-light: #475569;
    /* Slate 600 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Auto Theme - Follows System Preference */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-primary: #1A1D29;
        --bg-secondary: #242837;
        --bg-tertiary: #2D3142;
        --bg-card: #242837;

        --text-primary: #E4E6EB;
        --text-secondary: #B0B3B8;
        --text-muted: #8A8D93;
        --text-inverse: #1A1D29;

        --accent-primary: #5969F3;
        --accent-hover: #6B7AFF;
        --accent-active: #4859E2;
        --accent-light: #2D3555;

        --success: #3DD87A;
        --success-light: #1E3A2A;
        --warning: #FFD54F;
        --warning-light: #3A3320;
        --danger: #FF5C6C;
        --danger-light: #3A2428;
        --info: #4FC3F7;
        --info-light: #1E3540;

        --border-color: #3A3D4E;
        --border-light: #2D3142;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* ========================================
   DENSITY CONTROLS
   ======================================== */

/* Comfortable (Default) */
[data-density="comfortable"] {
    --table-padding-y: 1rem;
    --table-padding-x: 0.75rem;
    --card-padding: 1.5rem;
    --button-padding-y: 0.5rem;
    --button-padding-x: 1rem;
    --input-padding-y: 0.5rem;
    --input-padding-x: 0.75rem;
}

/* Compact */
[data-density="compact"] {
    --table-padding-y: 0.5rem;
    --table-padding-x: 0.5rem;
    --card-padding: 1rem;
    --button-padding-y: 0.375rem;
    --button-padding-x: 0.75rem;
    --input-padding-y: 0.375rem;
    --input-padding-x: 0.5rem;
}

/* Apply density to elements */
.table tbody td {
    padding: var(--table-padding-y) var(--table-padding-x) !important;
}

.card-body {
    padding: var(--card-padding) !important;
}

.btn {
    padding: var(--button-padding-y) var(--button-padding-x) !important;
}

.form-control:not(.form-floating > .form-control),
.form-select:not(.form-floating > .form-select) {
    padding: var(--input-padding-y) var(--input-padding-x) !important;
}

/* Floating labels adjustments - Force Bootstrap defaults to prevent overlap */
.form-floating>.form-control,
.form-floating>.form-select {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-left: var(--input-padding-x) !important;
    padding-right: var(--input-padding-x) !important;
    height: calc(3.5rem + 2px) !important;
    line-height: 1.25 !important;
}

.form-floating>label {
    padding-left: var(--input-padding-x) !important;
    padding-right: var(--input-padding-x) !important;
}

/* ========================================
   FONT SIZE CONTROLS
   ======================================== */

/* Normal (Default) */
[data-fontsize="normal"] {
    font-size: 16px;
}

[data-fontsize="normal"] .table {
    font-size: 0.95rem;
}

[data-fontsize="normal"] .sidebar-nav .nav-link {
    font-size: 14px;
}

/* Small */
[data-fontsize="small"] {
    font-size: 14px;
}

[data-fontsize="small"] .table {
    font-size: 0.875rem;
}

[data-fontsize="small"] .sidebar-nav .nav-link {
    font-size: 13px;
}

[data-fontsize="small"] .pagetitle h1 {
    font-size: 1.25rem;
}

/* Large */
[data-fontsize="large"] {
    font-size: 18px;
}

[data-fontsize="large"] .table {
    font-size: 1.05rem;
}

[data-fontsize="large"] .sidebar-nav .nav-link {
    font-size: 15px;
}

[data-fontsize="large"] .pagetitle h1 {
    font-size: 1.75rem;
}

/* ========================================
   THEME APPLICATION
   ======================================== */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.sidebar {
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

.sidebar-nav .nav-link {
    color: var(--text-primary);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:not(.collapsed) {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
}

.sidebar-nav .nav-heading {
    color: var(--text-muted);
}

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

.table thead th {
    color: var(--text-muted);
    border-bottom-color: var(--border-light);
}

.table tbody td {
    border-bottom-color: var(--border-light);
}

.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

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

.form-control,
.form-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

.dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
    z-index: 1005;
    /* Above header and sidebar */
}

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

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */

* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent transition on page load */
.preload * {
    transition: none !important;
}

/* ========================================
   BOOTSTRAP UTILITY OVERRIDES (DARK MODE)
   ======================================== */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
    /* Invert text-dark */
}

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

[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

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

/* Form Controls in Dark Mode */
[data-theme="dark"] .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Preview Panel Fixes */
.preview-panel {
    position: sticky;
    top: calc(var(--header-height) + 20px);
}

@media (max-width: 1199px) {
    .preview-panel {
        position: static;
        margin-top: 20px;
    }
}

/* Ensure cards in Light mode have enough contrast */
[data-theme="light"] .card {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .table-light {
    background-color: var(--bg-tertiary) !important;
}