/* =============================================================================
   THEME STYLESHEET — KELECTRON TECHNOLOGIES
   ============================================================================= */

/* ===== THEME VARIABLES ===== */
:root {
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Common constants */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Theme colors — Dark (Default) */
    --bg-primary: #07060b;
    --bg-secondary: #0f0e17;
    --bg-tertiary: #161522;
    --nav-bg: rgba(15, 14, 23, 0.75);
    --nav-border: rgba(255, 255, 255, 0.06);
    --card-bg: rgba(255, 255, 255, 0.025);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(255, 255, 255, 0.12);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-focus-bg: rgba(255, 255, 255, 0.06);
    --input-focus-border: rgba(120, 60, 255, 0.5);
    
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    
    --logo-primary: #3b629b;
    --logo-secondary: #ffffff; /* Adapt navy to white for contrast */
    --logo-bg: rgba(255, 255, 255, 0.05);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.4);

    --glass-bg: rgba(15, 14, 23, 0.85);
    --glass-border: rgba(255, 255, 255, 0.06);

    /* Gradients and accents */
    --accent-purple: #783cff;
    --accent-blue: #00d2ff;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-pink: #ec4899;
}

/* Light Theme overrides */
html[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --nav-bg: rgba(255, 255, 255, 0.8);
    --nav-border: rgba(15, 23, 42, 0.06);
    --card-bg: #ffffff;
    --card-border: rgba(15, 23, 42, 0.08);
    --card-border-hover: rgba(15, 23, 42, 0.16);
    --input-bg: #f1f5f9;
    --input-border: rgba(15, 23, 42, 0.08);
    --input-focus-bg: #ffffff;
    --input-focus-border: #6366f1;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;

    --logo-primary: #3b629b;
    --logo-secondary: #050530; /* Native navy color */
    --logo-bg: rgba(15, 23, 42, 0.04);

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 10px 25px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(15, 23, 42, 0.06);

    --accent-purple: #6366f1;
    --accent-blue: #0284c7;
}

/* ===== GLOBAL RESETS & THEME SWITCH TRANSITIONS ===== */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

*, *::before, *::after {
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* ===== NAV BAR STYLING ===== */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.nav-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--logo-bg);
    border: 1px solid var(--nav-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: transform var(--transition-normal);
}

.nav-logo svg {
    width: 100%;
    height: 100%;
}

.nav-brand:hover .nav-logo {
    transform: scale(1.05);
}

.nav-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-product-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-email {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== ACCENT BUTTONS ===== */
.btn-logout, .btn-history, .btn-back {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}

.btn-back {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-secondary);
}

.btn-back:hover {
    background: var(--input-focus-bg);
    color: var(--text-primary);
    border-color: var(--card-border-hover);
}

.btn-history {
    background: rgba(120, 60, 255, 0.08);
    border-color: rgba(120, 60, 255, 0.15);
    color: var(--accent-purple);
}

.btn-history:hover {
    background: rgba(120, 60, 255, 0.16);
    border-color: rgba(120, 60, 255, 0.3);
}

.btn-logout {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== THEME TOGGLE BUTTON ===== */
.btn-theme-toggle {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-secondary);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-theme-toggle:hover {
    background: var(--input-focus-bg);
    border-color: var(--card-border-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Sun/Moon visibility depending on data-theme */
html[data-theme="light"] .btn-theme-toggle .sun-icon {
    display: none;
}
html[data-theme="light"] .btn-theme-toggle .moon-icon {
    display: block;
}
html:not([data-theme="light"]) .btn-theme-toggle .sun-icon {
    display: block;
}
html:not([data-theme="light"]) .btn-theme-toggle .moon-icon {
    display: none;
}

/* ===== CARD ELEMENT THEME COMPATIBILITY ===== */
.product-card, .upload-card, .job-info-card, .result-card, .data-section, .mode-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.product-card:hover, .mode-card:hover {
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Typography variables */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
}

/* Form controls */
.form-input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-input:focus {
    background: var(--input-focus-bg) !important;
    border-color: var(--input-focus-border) !important;
}

/* Table styles */
.data-table thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

.data-table tbody td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

/* JSON raw block output styling */
.result-json {
    background: var(--bg-tertiary) !important;
}

.result-json pre {
    color: var(--text-secondary) !important;
}

/* Ambient backgrounds opacity adjustments in light theme */
html[data-theme="light"] .ambient-bg,
html[data-theme="light"] .dm-ambient,
html[data-theme="light"] .results-ambient {
    opacity: 0.3;
}

/* ===== MOBILE & RESPONSIVE LAYOUT OVERRIDES ===== */
@media (max-width: 768px) {
    .top-nav {
        padding: 12px 18px;
    }
    
    .nav-email {
        display: none;
    }
    
    .nav-user {
        gap: 8px;
    }

    .btn-logout, .btn-history, .btn-back {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .btn-theme-toggle {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
    
    .btn-theme-toggle svg {
        width: 16px;
        height: 16px;
    }

    /* Wrap actions on smaller mobiles if needed */
    .nav-actions {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .nav-brand {
        gap: 8px;
    }
    
    .nav-title {
        font-size: 14px;
    }

    .nav-product-name {
        font-size: 13px;
    }
    
    .btn-logout {
        padding: 6px 10px;
    }

    .btn-history {
        display: none; /* Hide history button in nav on extremely small screens to fit toggle and back buttons */
    }
}

/* ===== LIGHT THEME CONTRAST & SPECIFICITY OVERRIDES ===== */
html[data-theme="light"] {
    /* Set custom text and card colors */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
}

/* Force overrides on specific elements in light mode */
html[data-theme="light"] .results-header h1,
html[data-theme="light"] .history-header h1,
html[data-theme="light"] .dm-hero h1,
html[data-theme="light"] .job-info-value,
html[data-theme="light"] .result-card-title,
html[data-theme="light"] .data-section-header h3,
html[data-theme="light"] .data-kv-value,
html[data-theme="light"] .data-table tbody td.amount,
html[data-theme="light"] .stat-value,
html[data-theme="light"] .table-file-name,
html[data-theme="light"] .empty-title,
html[data-theme="light"] .recent-item-name,
html[data-theme="light"] .mode-title,
html[data-theme="light"] .coming-soon-title,
html[data-theme="light"] .product-title,
html[data-theme="light"] .filename {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .results-header p,
html[data-theme="light"] .result-header p,
html[data-theme="light"] .history-header p,
html[data-theme="light"] .dm-hero p,
html[data-theme="light"] .mode-desc,
html[data-theme="light"] .upload-dropzone p,
html[data-theme="light"] .file-preview-size,
html[data-theme="light"] .recent-item-meta,
html[data-theme="light"] .empty-desc,
html[data-theme="light"] .coming-soon-desc,
html[data-theme="light"] .coming-soon-desc strong,
html[data-theme="light"] .product-description p,
html[data-theme="light"] .product-tagline,
html[data-theme="light"] .stat-row,
html[data-theme="light"] .badge:not(.angry):not(.happy):not(.neutral),
html[data-theme="light"] .kw-tag,
html[data-theme="light"] .stat-lbl,
html[data-theme="light"] .job-info-label,
html[data-theme="light"] .data-kv-label,
html[data-theme="light"] .data-table thead th,
html[data-theme="light"] .history-table thead th,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .upload-dropzone h3,
html[data-theme="light"] .file-preview-name,
html[data-theme="light"] .recent-header h3,
html[data-theme="light"] .dm-section-title,
html[data-theme="light"] .product-description h4 {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .history-table-card,
html[data-theme="light"] .coming-soon-card,
html[data-theme="light"] .coming-soon-icon,
html[data-theme="light"] .empty-icon,
html[data-theme="light"] .product-description {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="light"] .text-content,
html[data-theme="light"] .text-box {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="light"] .kw-tag,
html[data-theme="light"] .badge:not(.angry):not(.happy):not(.neutral),
html[data-theme="light"] .mode-format-tag {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--card-border) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .error-card {
    background-color: #fef2f2 !important;
    border-color: #fee2e2 !important;
    color: #991b1b !important;
}
html[data-theme="light"] .error-msg,
html[data-theme="light"] .error-card .card-title {
    color: #991b1b !important;
}

html[data-theme="light"] .error-message {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}
html[data-theme="light"] .error-message p {
    color: #991b1b !important;
}
html[data-theme="light"] .error-message svg {
    color: #dc2626 !important;
}

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

/* Steps overrides */
html[data-theme="light"] .dm-step:not(.active) .dm-step-num {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
}
html[data-theme="light"] .dm-step-label {
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .dm-step:not(.active) {
    opacity: 0.65 !important;
}
html[data-theme="light"] .dm-step-connector {
    background: var(--card-border) !important;
}

/* JSON raw block output syntax highlighting adjustments for light theme */
html[data-theme="light"] .result-json {
    background: var(--bg-tertiary) !important;
}
html[data-theme="light"] .result-json pre {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .result-json .key {
    color: #4f46e5 !important; /* Indigo */
}
html[data-theme="light"] .result-json .string {
    color: #059669 !important; /* Emerald green */
}
html[data-theme="light"] .result-json .number {
    color: #d97706 !important; /* Amber */
}

/* Secondary actions and borders */
html[data-theme="light"] .btn-action.secondary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--card-border) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .btn-action.secondary:hover {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--card-border-hover) !important;
}
html[data-theme="light"] .data-table tfoot td {
    border-top-color: var(--card-border) !important;
}

html[data-theme="light"] a.btn-history[href*="compare"] {
    background: rgba(219, 39, 119, 0.08) !important;
    border-color: rgba(219, 39, 119, 0.15) !important;
    color: #db2777 !important; /* Darker pink for light mode */
}

html[data-theme="light"] a.btn-history[href*="voiceiq"]:not([href*="compare"]) {
    background: rgba(5, 150, 105, 0.08) !important;
    border-color: rgba(5, 150, 105, 0.15) !important;
    color: #059669 !important; /* Darker emerald for light mode */
}

/* Card titles and borders in Light Mode */
html[data-theme="light"] .card-title {
    color: var(--text-primary) !important;
    border-bottom-color: var(--card-border) !important;
}

/* Temperament / Sentiment badge contrast overrides */
html[data-theme="light"] .badge.happy {
    color: #059669 !important;
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}
html[data-theme="light"] .badge.neutral {
    color: #2563eb !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
}
html[data-theme="light"] .badge.angry {
    color: #dc2626 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Comparative Model Headers in Light Mode */
html[data-theme="light"] .gemini-hdr {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.15)) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #065f46 !important;
}
html[data-theme="light"] .openai-hdr {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.15)) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #1e40af !important;
}
html[data-theme="light"] .claude-hdr {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.15)) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #92400e !important;
}