/* =========================================================
   BrioCom Solutions — Modular CSS
   theme.css

   Central theme system for:
   - Dark mode
   - Light mode
   - Navbar
   - Sidebar
   - Workspace
   - Timer
   - History
   - Quick Tools
   - Forms
   - Cards
   - Dropdowns
   - Footer

   The goal is to keep every component visually balanced
   when switching between themes.
   ========================================================= */


/* =========================================================
   35. GLOBAL THEME VARIABLES
   ========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND
       ----------------------------------------------------- */

    --red:
        #dc2626;

    --red-dark:
        #b91c1c;

    --red-light:
        #ef4444;


    /* -----------------------------------------------------
       DARK BACKGROUNDS
       ----------------------------------------------------- */

    --black:
        #000000;

    --dark:
        #050505;

    --card:
        #0d0d0d;

    --card-2:
        #121212;

    --surface:
        #161616;

    --surface-hover:
        #1c1c1c;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border:
        #242424;

    --border-light:
        #303030;


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --white:
        #ffffff;

    --text:
        #e7e7e7;

    --text-secondary:
        #b8b8b8;

    --muted:
        #888888;

    --muted-dark:
        #666666;


    /* -----------------------------------------------------
       STATUS
       ----------------------------------------------------- */

    --green:
        #22c55e;

    --yellow:
        #eab308;


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, .22);

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, .28);

    --shadow-lg:
        0 18px 45px rgba(0, 0, 0, .38);


    /* -----------------------------------------------------
       GLOW
       ----------------------------------------------------- */

    --red-glow:
        0 0 20px rgba(220, 38, 38, .15);

    --red-glow-strong:
        0 0 28px rgba(220, 38, 38, .22);


    /* -----------------------------------------------------
       COMPONENT EFFECTS
       ----------------------------------------------------- */

    --overlay:
        rgba(0, 0, 0, .55);

    --input-bg:
        #101010;

    --table-header:
        #101010;

    --hover-bg:
        rgba(255, 255, 255, .025);


    /* -----------------------------------------------------
       COMMON
       ----------------------------------------------------- */

    --radius:
        14px;

    --radius-sm:
        9px;

    --transition:
        .2s ease;
}


/* =========================================================
   35.1 LIGHT THEME VARIABLES
   ========================================================= */

body.light-mode,
body.light-theme {

    /* -----------------------------------------------------
       BACKGROUNDS
       ----------------------------------------------------- */

    --black:
        #ffffff;

    --dark:
        #f4f5f7;

    --card:
        #ffffff;

    --card-2:
        #f8f9fb;

    --surface:
        #f0f1f3;

    --surface-hover:
        #e7e9ec;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border:
        #dcdfe4;

    --border-light:
        #e9ebee;


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --white:
        #111111;

    --text:
        #202124;

    --text-secondary:
        #4b4f56;

    --muted:
        #6f747c;

    --muted-dark:
        #9297a0;


    /* -----------------------------------------------------
       INPUTS / TABLES
       ----------------------------------------------------- */

    --input-bg:
        #ffffff;

    --table-header:
        #f5f6f8;

    --hover-bg:
        rgba(0, 0, 0, .025);


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, .06);

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, .08);

    --shadow-lg:
        0 18px 45px rgba(0, 0, 0, .12);


    /* -----------------------------------------------------
       OVERLAY
       ----------------------------------------------------- */

    --overlay:
        rgba(0, 0, 0, .30);
}


/* =========================================================
   35.2 BODY
   ========================================================= */

body.light-mode,
body.light-theme {

    background:
        var(--dark);

    color:
        var(--text);

    transition:
        background-color .25s ease,
        color .25s ease;
}


/* =========================================================
   35.3 NAVIGATION
   ========================================================= */

body.light-mode .navbar,
body.light-theme .navbar {

    background:
        rgba(255, 255, 255, .94);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}


body.light-mode .navbar nav > a,
body.light-mode .dropdown-title,
body.light-theme .navbar nav > a,
body.light-theme .dropdown-title {

    color:
        var(--text-secondary);
}


body.light-mode .navbar nav > a:hover,
body.light-theme .navbar nav > a:hover {

    color:
        var(--red);
}


/* =========================================================
   35.4 DROPDOWNS
   ========================================================= */

body.light-mode .dropdown-menu,
body.light-theme .dropdown-menu {

    background:
        var(--card);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-lg);
}


body.light-mode .dropdown-menu > a,
body.light-mode .dropdown-group a,
body.light-theme .dropdown-menu > a,
body.light-theme .dropdown-group a {

    color:
        var(--text-secondary);
}


body.light-mode .dropdown-menu > a:hover,
body.light-mode .dropdown-group a:hover,
body.light-theme .dropdown-menu > a:hover,
body.light-theme .dropdown-group a:hover {

    color:
        var(--text);

    background:
        rgba(220, 38, 38, .07);
}


/* =========================================================
   35.5 SIDEBAR
   ========================================================= */

body.light-mode .freelancer-sidebar,
body.light-theme .freelancer-sidebar {

    background:
        var(--card);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}


body.light-mode .freelancer-sidebar a,
body.light-theme .freelancer-sidebar a {

    color:
        var(--text-secondary);
}


body.light-mode .freelancer-sidebar a:hover,
body.light-theme .freelancer-sidebar a:hover {

    color:
        var(--text);

    background:
        var(--surface);
}


/* =========================================================
   35.6 MAIN WORKSPACE
   ========================================================= */

body.light-mode .workspace-main,
body.light-theme .workspace-main {

    background:
        var(--dark);
}


body.light-mode .workspace-topbar,
body.light-theme .workspace-topbar {

    background:
        rgba(255, 255, 255, .94);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}


body.light-mode .workspace-page-title strong,
body.light-theme .workspace-page-title strong {

    color:
        var(--text);
}


/* =========================================================
   35.7 MAIN CARDS
   ========================================================= */

body.light-mode .time-tracker-app,
body.light-mode .time-history,
body.light-mode .tracking-info,
body.light-mode .time-export-section,
body.light-mode .feature-card,

body.light-theme .time-tracker-app,
body.light-theme .time-history,
body.light-theme .tracking-info,
body.light-theme .time-export-section,
body.light-theme .feature-card {

    background:
        var(--card);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   35.8 PAGE HEADERS
   ========================================================= */

body.light-mode .time-header h1,
body.light-mode .history-header h2,
body.light-mode .tracking-info h2,
body.light-mode .feature-card h3,

body.light-theme .time-header h1,
body.light-theme .history-header h2,
body.light-theme .tracking-info h2,
body.light-theme .feature-card h3 {

    color:
        var(--text);
}


body.light-mode .time-header p,
body.light-mode .tracking-info p,
body.light-mode .feature-card p,

body.light-theme .time-header p,
body.light-theme .tracking-info p,
body.light-theme .feature-card p {

    color:
        var(--muted);
}


/* =========================================================
   35.9 FORMS / INPUTS
   ========================================================= */

body.light-mode .tracker-field input,
body.light-mode .tracker-field textarea,
body.light-mode .tracker-field select,

body.light-mode .currency-input-wrap input,
body.light-mode .currency-field select,
body.light-mode .city-search-box input,
body.light-mode .converter-time-input input,
body.light-mode .searchable-select-input input,

body.light-theme .tracker-field input,
body.light-theme .tracker-field textarea,
body.light-theme .tracker-field select,

body.light-theme .currency-input-wrap input,
body.light-theme .currency-field select,
body.light-theme .city-search-box input,
body.light-theme .converter-time-input input,
body.light-theme .searchable-select-input input {

    background:
        var(--input-bg);

    color:
        var(--text);

    border-color:
        var(--border);
}


body.light-mode input::placeholder,
body.light-mode textarea::placeholder,
body.light-theme input::placeholder,
body.light-theme textarea::placeholder {

    color:
        var(--muted-dark);
}


body.light-mode .tracker-field input:focus,
body.light-mode .tracker-field textarea:focus,
body.light-mode .tracker-field select:focus,

body.light-theme .tracker-field input:focus,
body.light-theme .tracker-field textarea:focus,
body.light-theme .tracker-field select:focus {

    border-color:
        var(--red);

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, .08);
}


/* =========================================================
   35.10 SUMMARY CARDS
   ========================================================= */

body.light-mode .summary-card,
body.light-theme .summary-card {

    background:
        var(--card);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}


body.light-mode .summary-card h3,
body.light-theme .summary-card h3 {

    color:
        var(--muted);
}


body.light-mode .summary-card strong,
body.light-theme .summary-card strong {

    color:
        var(--text);
}


/* =========================================================
   35.11 HISTORY TABLE
   ========================================================= */

body.light-mode .history-table-wrapper,
body.light-theme .history-table-wrapper {

    background:
        var(--card);

    border-color:
        var(--border);
}


body.light-mode .history-table th,
body.light-theme .history-table th {

    background:
        var(--table-header);

    color:
        var(--muted);

    border-color:
        var(--border);
}


body.light-mode .history-table td,
body.light-theme .history-table td {

    color:
        var(--text-secondary);

    border-color:
        var(--border-light);
}


body.light-mode .history-table tbody tr:hover,
body.light-theme .history-table tbody tr:hover {

    background:
        var(--hover-bg);
}


/* =========================================================
   35.12 DELETE BUTTON
   ========================================================= */

body.light-mode .history-delete-btn,
body.light-theme .history-delete-btn {

    background:
        rgba(220, 38, 38, .06);

    border-color:
        rgba(220, 38, 38, .28);

    color:
        var(--red);
}


body.light-mode .history-delete-btn:hover,
body.light-theme .history-delete-btn:hover {

    background:
        var(--red);

    border-color:
        var(--red);

    color:
        #ffffff;
}


/* =========================================================
   35.13 QUICK TOOLS PANEL
   ========================================================= */

body.light-mode .quick-tools-panel,
body.light-theme .quick-tools-panel {

    background:
        var(--surface);

    border-color:
        var(--border);
}


body.light-mode .quick-tasks-section,
body.light-mode .city-time-search-section,
body.light-mode .world-clocks-section,
body.light-mode .time-converter-section,
body.light-mode .sidebar-currency-converter,

body.light-theme .quick-tasks-section,
body.light-theme .city-time-search-section,
body.light-theme .world-clocks-section,
body.light-theme .time-converter-section,
body.light-theme .sidebar-currency-converter {

    background:
        var(--card);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   35.14 QUICK TOOL TEXT
   ========================================================= */

body.light-mode .quick-tools-panel h3,
body.light-mode .quick-tools-panel h4,
body.light-mode .quick-tasks-section h3,
body.light-mode .city-time-search-section h3,
body.light-mode .world-clocks-section h3,
body.light-mode .time-converter-section h3,

body.light-theme .quick-tools-panel h3,
body.light-theme .quick-tools-panel h4,
body.light-theme .quick-tasks-section h3,
body.light-theme .city-time-search-section h3,
body.light-theme .world-clocks-section h3,
body.light-theme .time-converter-section h3 {

    color:
        var(--text);
}


body.light-mode .quick-tools-panel p,
body.light-mode .quick-tools-panel label,
body.light-mode .quick-tools-panel span,

body.light-theme .quick-tools-panel p,
body.light-theme .quick-tools-panel label,
body.light-theme .quick-tools-panel span {

    color:
        var(--muted);
}


/* =========================================================
   35.15 QUICK TOOL INPUTS
   ========================================================= */

body.light-mode .currency-input-wrap input,
body.light-mode .currency-field select,
body.light-mode .city-search-box input,
body.light-mode .converter-time-input input,
body.light-mode .searchable-select-input input,

body.light-theme .currency-input-wrap input,
body.light-theme .currency-field select,
body.light-theme .city-search-box input,
body.light-theme .converter-time-input input,
body.light-theme .searchable-select-input input {

    background:
        var(--input-bg);

    color:
        var(--text);

    border-color:
        var(--border);
}


/* =========================================================
   35.16 BUTTONS
   ========================================================= */

body.light-mode .history-view-btn:not(.active),
body.light-theme .history-view-btn:not(.active) {

    background:
        var(--card-2);

    color:
        var(--text-secondary);

    border-color:
        var(--border);
}


body.light-mode .history-view-btn:not(.active):hover,
body.light-theme .history-view-btn:not(.active):hover {

    background:
        var(--surface-hover);

    color:
        var(--text);

    border-color:
        rgba(220, 38, 38, .45);
}


/* =========================================================
   35.17 FOOTER
   ========================================================= */

body.light-mode .footer,
body.light-theme .footer {

    background:
        #eceef1;

    border-color:
        var(--border);
}


body.light-mode .footer,
body.light-theme .footer {

    color:
        var(--text-secondary);
}


body.light-mode .footer a,
body.light-theme .footer a {

    color:
        var(--muted);
}


body.light-mode .footer a:hover,
body.light-theme .footer a:hover {

    color:
        var(--red);
}


/* =========================================================
   35.18 OVERLAY
   ========================================================= */

body.light-mode .sidebar-overlay,
body.light-theme .sidebar-overlay {

    background:
        var(--overlay);
}


/* =========================================================
   35.19 SCROLLBARS
   ========================================================= */

body.light-mode ::-webkit-scrollbar-track,
body.light-theme ::-webkit-scrollbar-track {

    background:
        var(--surface);
}


body.light-mode ::-webkit-scrollbar-thumb,
body.light-theme ::-webkit-scrollbar-thumb {

    background:
        #b8bbc0;
}


body.light-mode ::-webkit-scrollbar-thumb:hover,
body.light-theme ::-webkit-scrollbar-thumb:hover {

    background:
        var(--red);
}


/* =========================================================
   35.20 THEME TRANSITIONS
   ========================================================= */

body,
.navbar,
.freelancer-sidebar,
.workspace-main,
.workspace-topbar,
.quick-tools-panel,
.time-tracker-app,
.time-history,
.tracking-info,
.time-export-section,
.feature-card,
.summary-card,
.quick-tasks-section,
.city-time-search-section,
.world-clocks-section,
.time-converter-section,
.sidebar-currency-converter,
.history-table-wrapper {

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   BRIOCOM SOLUTIONS — RIGHT RAIL LIGHT THEME FIX
   Append this block to the END of theme.css
   ========================================================= */

/* 1. RIGHT RAIL BACKGROUND */

body.light-mode .right-rail,
body.light-theme .right-rail {
    background: var(--dark);
    color: var(--text);
    border-color: var(--border);
}

/* 2. MAIN RIGHT-RAIL PANELS */

body.light-mode .right-rail .quick-tools-panel,
body.light-mode .right-rail .pulse-card,
body.light-mode .right-rail .priorities-card,
body.light-mode .right-rail .world-clock-card,
body.light-mode .right-rail .quick-tasks-section,
body.light-mode .right-rail .city-time-search-section,
body.light-mode .right-rail .world-clocks-section,
body.light-mode .right-rail .time-converter-section,
body.light-mode .right-rail .sidebar-currency-converter,

body.light-theme .right-rail .quick-tools-panel,
body.light-theme .right-rail .pulse-card,
body.light-theme .right-rail .priorities-card,
body.light-theme .right-rail .world-clock-card,
body.light-theme .right-rail .quick-tasks-section,
body.light-theme .right-rail .city-time-search-section,
body.light-theme .right-rail .world-clocks-section,
body.light-theme .right-rail .time-converter-section,
body.light-theme .right-rail .sidebar-currency-converter {
    background: #ffffff;
    color: #202124;
    border: 1px solid #e0e0e4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.045);
}

/* 3. HEADINGS */

body.light-mode .right-rail h2,
body.light-mode .right-rail h3,
body.light-mode .right-rail h4,
body.light-theme .right-rail h2,
body.light-theme .right-rail h3,
body.light-theme .right-rail h4 {
    color: #151515;
}

/* 4. GENERAL TEXT */

body.light-mode .right-rail p,
body.light-mode .right-rail label,
body.light-mode .right-rail .description,
body.light-theme .right-rail p,
body.light-theme .right-rail label,
body.light-theme .right-rail .description {
    color: #55565b;
}

/* Keep brand accents red */

body.light-mode .right-rail .accent,
body.light-mode .right-rail .red-text,
body.light-mode .right-rail .pulse-card .highlight,
body.light-theme .right-rail .accent,
body.light-theme .right-rail .red-text,
body.light-theme .right-rail .pulse-card .highlight {
    color: #dc2626;
}

/* 5. CLOCK DISPLAY CARDS */

body.light-mode .right-rail .world-clock,
body.light-mode .right-rail .clock-item,
body.light-mode .right-rail .clock-card,
body.light-mode .right-rail .city-clock,
body.light-theme .right-rail .world-clock,
body.light-theme .right-rail .clock-item,
body.light-theme .right-rail .clock-card,
body.light-theme .right-rail .city-clock {
    background: #f7f7f9;
    color: #202124;
    border-color: #e1e1e5;
}

body.light-mode .right-rail .clock-time,
body.light-mode .right-rail .digital-clock,
body.light-mode .right-rail [data-live-clock],
body.light-theme .right-rail .clock-time,
body.light-theme .right-rail .digital-clock,
body.light-theme .right-rail [data-live-clock] {
    color: #dc2626;
    font-variant-numeric: tabular-nums;
}

/* 6. INPUTS, SELECTS AND SEARCH */

body.light-mode .right-rail input,
body.light-mode .right-rail select,
body.light-mode .right-rail textarea,
body.light-theme .right-rail input,
body.light-theme .right-rail select,
body.light-theme .right-rail textarea {
    background: #ffffff;
    color: #202124;
    border: 1px solid #d5d5da;
}

body.light-mode .right-rail input::placeholder,
body.light-mode .right-rail textarea::placeholder,
body.light-theme .right-rail input::placeholder,
body.light-theme .right-rail textarea::placeholder {
    color: #85858c;
}

body.light-mode .right-rail input:focus,
body.light-mode .right-rail select:focus,
body.light-mode .right-rail textarea:focus,
body.light-theme .right-rail input:focus,
body.light-theme .right-rail select:focus,
body.light-theme .right-rail textarea:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
    outline: none;
}

/* 7. TASK ITEMS AND SMALL STATISTICS */

body.light-mode .right-rail .task-item,
body.light-mode .right-rail .quick-task,
body.light-mode .right-rail .pulse-mini-stats,
body.light-mode .right-rail .stat-item,
body.light-theme .right-rail .task-item,
body.light-theme .right-rail .quick-task,
body.light-theme .right-rail .pulse-mini-stats,
body.light-theme .right-rail .stat-item {
    background: #f5f5f7;
    color: #292929;
    border-color: #e1e1e5;
}

/* 8. TABLES */

body.light-mode .right-rail .priority-table-wrapper,
body.light-mode .right-rail .priority-table-wrapper table,
body.light-theme .right-rail .priority-table-wrapper,
body.light-theme .right-rail .priority-table-wrapper table {
    background: #ffffff;
    color: #202124;
    border-color: #e0e0e4;
}

body.light-mode .right-rail .priority-table th,
body.light-theme .right-rail .priority-table th {
    background: #f0f0f2;
    color: #252525;
    border-color: #dedee2;
}

body.light-mode .right-rail .priority-table td,
body.light-theme .right-rail .priority-table td {
    background: #ffffff;
    color: #44444a;
    border-color: #e6e6e9;
}

body.light-mode .right-rail .priority-table tbody tr:hover td,
body.light-theme .right-rail .priority-table tbody tr:hover td {
    background: #fff3f3;
}

/* 9. BUTTONS */

body.light-mode .right-rail button,
body.light-theme .right-rail button {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body.light-mode .right-rail .pulse-btn,
body.light-mode .right-rail .primary-btn,
body.light-theme .right-rail .pulse-btn,
body.light-theme .right-rail .primary-btn {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

body.light-mode .right-rail .pulse-btn:hover,
body.light-mode .right-rail .primary-btn:hover,
body.light-theme .right-rail .pulse-btn:hover,
body.light-theme .right-rail .primary-btn:hover {
    background: #b91c1c;
    color: #ffffff;
    border-color: #b91c1c;
}

body.light-mode .right-rail .pulse-clear-btn,
body.light-mode .right-rail .secondary-btn,
body.light-theme .right-rail .pulse-clear-btn,
body.light-theme .right-rail .secondary-btn {
    background: #ffffff;
    color: #292929;
    border-color: #d5d5da;
}

/* 10. DIVIDERS */

body.light-mode .right-rail hr,
body.light-mode .right-rail .divider,
body.light-theme .right-rail hr,
body.light-theme .right-rail .divider {
    border-color: #e3e3e7;
}

/* 11. LINKS AND ICONS */

body.light-mode .right-rail a,
body.light-theme .right-rail a {
    color: #c91e28;
}

body.light-mode .right-rail a:hover,
body.light-theme .right-rail a:hover {
    color: #991b1b;
}

/* 12. KEEP RED STATUS INDICATORS VISIBLE */

body.light-mode .right-rail .status-dot,
body.light-mode .right-rail .active-indicator,
body.light-theme .right-rail .status-dot,
body.light-theme .right-rail .active-indicator {
    accent-color: #dc2626;
}

/* =========================================================
   END RIGHT RAIL LIGHT THEME FIX
   ========================================================= */

/* =========================================================
   END OF THEME
   ========================================================= */