:root {
    /* Default Dark Theme */
    --bg-main: #1a1a1a;
    --bg-card: #222222;
    --bg-menu: #121212;
    --bg-input: #1e293b;
    --bg-table-header: #1a1a1a;
    --bg-filter-container: #2a2a2a;

    --text-main: #ffffff;
    --text-muted: #aaaaaa;

    --border-color: #333333;

    --hover-menu: #2185d0;
    --hover-card: #333333;
}

body.theme-light {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-menu: #ffffff;
    --bg-input: #ffffff;
    --bg-table-header: #f1f5f9;
    --bg-filter-container: #e2e8f0;

    --text-main: #1e293b;
    --text-muted: #64748b;

    --border-color: #cbd5e1;

    --hover-menu: #2185d0;
    --hover-card: #f1f5f9;
}

/* Global Application Rules */
body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s, color 0.3s;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6, .ui.header {
    color: var(--text-main) !important;
}
p, span, div {
    color: inherit;
}

/* Menu Overrides */
.ui.menu.top-menu {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    margin: 0 !important;
    border-radius: 0 !important;
    background-color: var(--bg-menu) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background-color 0.3s;
}
.ui.menu.top-menu .item {
    color: var(--text-muted) !important;
}
.ui.menu.top-menu .item:hover {
    color: var(--hover-menu) !important;
}
.ui.menu.top-menu .item.active {
    color: var(--text-main) !important;
    font-weight: bold;
}

/* Cards & Segments */
.stat-card, .profile-card, .credit-option, .ui.segment.themed-form, pre {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s, border-color 0.3s;
}

.stat-card h3 {
    color: var(--text-muted) !important;
}
.stat-card .value {
    color: var(--text-main) !important;
}

/* Tables */
.ui.table.history-table {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
.ui.table.history-table thead th {
    background: var(--bg-table-header) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.ui.table.history-table td {
    border-top: 1px solid var(--border-color) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    cursor: pointer;
}

/* ===========================================================
   Main Application Sidebar
   =========================================================== */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: var(--bg-menu) !important;
    border-right: 1px solid var(--border-color);
    z-index: 1001;
    overflow-y: auto;
    padding-bottom: 20px;
    transition: transform 0.3s ease, background-color 0.3s;
}
.app-sidebar-brand {
    display: block;
    padding: 20px;
    font-size: 1.4em;
    font-weight: bold;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color);
}
.app-sidebar-section-title {
    padding: 16px 20px 6px;
    font-size: 0.72em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}
.app-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    color: var(--text-muted) !important;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s, color 0.2s;
}
.app-sidebar-item:hover {
    color: var(--hover-menu) !important;
    background-color: var(--hover-card) !important;
}
.app-sidebar-item.active {
    color: var(--text-main) !important;
    font-weight: bold;
    border-left-color: var(--hover-menu);
    background-color: var(--hover-card) !important;
}
.app-sidebar-item i.icon { margin: 0; }

/* Push page content to the right of the fixed sidebar on desktop */
body.has-sidebar { padding-left: 250px !important; }

/* Fomantic modals attach a full-viewport page dimmer that centres the modal.
   With the fixed sidebar this would place the modal partly behind it, so on
   desktop we reserve the sidebar's width inside the dimmer to keep the modal
   centred within the content area. */
@media only screen and (min-width: 769px) {
    body.has-sidebar .ui.dimmer.modals.page { padding-left: 250px; }
}

/* Mobile top bar + overlay (hidden on desktop) */
.app-topbar { display: none; }
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.sidebar-overlay.open { display: block; }

@media only screen and (max-width: 768px) {
    body.has-sidebar { padding-left: 0 !important; padding-top: 50px !important; }
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.open { transform: translateX(0); box-shadow: 2px 0 12px rgba(0,0,0,0.4); }
    .app-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        padding: 0 16px;
        background-color: var(--bg-menu) !important;
        border-bottom: 1px solid var(--border-color);
        z-index: 999;
    }
    .app-topbar-brand { font-weight: bold; color: var(--text-main) !important; }
    .app-hamburger { cursor: pointer; font-size: 1.3em; color: var(--text-main) !important; }
}

/* Quick Filters */
.time-filter {
    background-color: var(--bg-filter-container) !important;
    border-radius: 20px;
    padding: 5px;
    display: flex;
    gap: 10px;
    transition: background-color 0.3s;
}
.time-filter span {
    padding: 5px 15px;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    color: var(--text-muted) !important;
}
.time-filter span:hover {
    background-color: var(--hover-card) !important;
}
.time-filter span.active {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
}

/* API Key Badge */
.ui.label.api-key-badge {
    background-color: var(--bg-filter-container) !important;
    color: var(--text-muted) !important;
    font-family: monospace;
    border: 1px solid var(--border-color);
}

/* General Form Label Text */
.ui.form .field > label {
    color: var(--text-main) !important;
}

/* Structural Styles (previously in dashboard.php inline style) */
.dashboard-container { max-width: 1200px; margin: 20px auto; padding: 0 20px; padding-bottom: 2em; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dashboard-header h1 { margin: 0; }

.stat-card { border-radius: 8px; padding: 20px; height: 100%; }
.stat-card h3 { font-size: 0.9em; font-weight: normal; margin-top: 0; margin-bottom: 10px; }
.stat-card .value { font-size: 2em; font-weight: bold; margin-bottom: 20px; }

.progress-bar-container { background-color: var(--border-color); height: 8px; border-radius: 4px; margin-bottom: 10px; position: relative; }
.progress-bar-fill { background-color: #10b981; height: 100%; border-radius: 4px; width: 15%; }
.progress-bar-marker { position: absolute; top: -2px; bottom: -2px; width: 2px; background-color: var(--text-main); left: 75%; }
a.manage-link { color: var(--text-muted); text-decoration: underline; font-size: 0.9em; }

.sort-icon { font-size: 0.8em; margin-left: 5px; color: var(--text-muted); }
.sort-active { color: var(--text-main); }

/* Additional overrides for add_credits and profile */
.credit-option {
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s, background-color 0.2s;
}
.credit-option.selected {
    border-color: #3b82f6 !important;
    background-color: var(--hover-card) !important;
}
.credit-amount {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-main);
}
.profile-card {
    text-align: center;
    padding: 40px;
    border-radius: 12px;
}
.profile-card i.user.circle.icon {
    font-size: 5em;
    color: var(--text-muted);
    margin-bottom: 20px;
}