/* ==========================================
   DARK MODE
========================================== */

body.dark {

    --bg: #0f172a;

    --surface: #1e293b;

    --text: #f8fafc;

    --text-secondary: #94a3b8;

    --border: #334155;
}

/* ==========================================
   Buttons
========================================== */

body.dark .tab-btn,
body.dark .dark-mode-btn {

    background: #334155;

    color: white;

    border-color: #475569;
}

body.dark .button-grid button {

    background: #2563eb;
}

body.dark .button-grid button:hover {

    background: #1d4ed8;
}

/* ==========================================
   Grid
========================================== */

body.dark .grid-cell {

    border-color: #475569;
}

/* ==========================================
   Inputs
========================================== */

body.dark select,
body.dark input {

    background: #334155;

    color: white;

    border: 1px solid #475569;
}

/* ==========================================
   Scrollbars
========================================== */

body.dark::-webkit-scrollbar {

    width: 10px;
}

body.dark::-webkit-scrollbar-thumb {

    background: #475569;

    border-radius: 10px;
}