/* ============================
   Base Theme Variables
============================ */
:root {
    --color-primary: #1E3A8A; /* Indigo */
    --color-secondary: #F97316; /* Orange */
    --color-accent: #10B981; /* Emerald */

    --toggle-button-background: var(--color-primary);
    --tab-background-color: var(--color-primary);
    --tab-active-color: var(--color-secondary);
}

/* ============================
   Light Theme
============================ */
body.light-theme {
    --color-primary: #1E3A8A; /* Deep Indigo */
    --color-secondary: #F97316; /* Bright Orange */
    --color-accent: #10B981; /* Emerald */

    --background-color: #F9FAFB;
    --text-color: #111827;
    --border-color: #DDD;
    --header-background-color: var(--color-primary);
    --header-text-color: white;
    --row-even-background-color: #E2E8F0;
    --row-hover-background-color: #DBEAFE;
    --button-background-color: var(--color-primary);
    --button-text-color: white;
    --button-hover-background-color: #EA580C;
    --button-disabled-background-color: #D1D5DB;
    --toggle-button-background: var(--color-primary);
    --tab-background-color: var(--color-primary);
    --tab-active-color: var(--color-secondary);
}

/* ============================
   Dark Theme
============================ */
body.dark-theme {
    --color-primary: #60A5FA; /* Bright Blue - high contrast on dark */
    --color-secondary: #FB923C; /* Bright Orange - high contrast on dark */
    --color-accent: #34D399; /* Bright Emerald */

    --background-color: #1E1E1E;
    --text-color: #F0F0F0;
    --border-color: #555;
    --header-background-color: #1E3A8A; /* Keep header dark for consistency */
    --header-text-color: #F0F0F0;
    --row-even-background-color: #2E2E2E;
    --row-hover-background-color: #3A3A3A;
    --button-background-color: var(--color-primary);
    --button-text-color: #1E1E1E;
    --button-hover-background-color: #3B82F6;
    --button-disabled-background-color: #444;
    --toggle-button-background: var(--color-primary);
    --tab-background-color: #1E3A8A;
    --tab-active-color: var(--color-secondary);
}

/* ============================
   Global Styles
============================ */
body {
    font-family: 'Arial', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--background-color);
    color: var(--text-color);
}

input,
select,
button {
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Inputs & Selects */
body.light-theme input,
body.light-theme select,
body.dark-theme input,
body.dark-theme select {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

/* Buttons */
body.light-theme button,
body.dark-theme button {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: none;
}

/* Top Row */
.light-theme .top-row,
.dark-theme .top-row {
    background-color: var(--header-background-color);
    color: var(--header-text-color);
}

/* ============================
   Theme Toggle Button
============================ */
.light-theme .theme-toggle-button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: color 0.3s ease, transform 0.2s ease;
}

.dark-theme .theme-toggle-button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    transition: color 0.3s ease, transform 0.2s ease;
}

    .theme-toggle-button:hover,
    .theme-toggle-button:focus,
    .theme-toggle-button:active {
        color: var(--color-secondary);
        transform: scale(1.1);
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .theme-toggle-button img {
        width: 24px;
        height: 24px;
        display: block;
    }

/* ============================
   Tab Styling (example usage)
============================ */
.tab {
    background-color: var(--tab-background-color);
    color: var(--header-text-color);
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.tab-active {
    background-color: var(--tab-active-color);
    color: white;
    border-bottom: 2px solid var(--tab-active-color);
}