/* be lucky i made this, tailwind fucking sucks. */
:root {
    --mainbgcolor: #000000;
    --surface-hover: #0a0a0a;
    --surface-raised: #0d0d0d;
    --accent: #00b4d8;
    --accent-bright: #00d4ff;
    --accent-glow: rgba(0,180,216,0.35);
    --accent-rgb: 0 180 216; /* you do need to manually match this to your hexcode accent, the sidebar thing inside of settings requires an rgb value rather than a hex one */
    --border-subtle: rgba(0,180,216,0.20);
    --border-normal: rgba(0,180,216,0.45);
    --border-strong: #00b4d8;
    --text-primary: #e0e8f0;
    --text-accent: #00d4ff;
    --text-muted: #90a0b8;
    --icon-maincolor: var(--accent);
    --icon-overlord: #00d4ff;
    --icon-danger: #ef4444;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --radius-full: 999px;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    color-scheme: dark;
    background: var(--mainbgcolor);
    color: var(--text-primary);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    background: var(--mainbgcolor);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--mainbgcolor);
    background-attachment: fixed;
}

a {
    color: inherit;
    text-decoration: none;
}
 /* fuck you tailwind, seriously, so goddmamn annoying. */
[class*="bg-slate-"],
[class*="bg-sky-"],
[class*="bg-blue-"],
[class*="bg-indigo-"],
[class*="bg-violet-"],
[class*="bg-purple-"],
[class*="bg-fuchsia-"],
[class*="bg-rose-"],
[class*="bg-amber-"],
[class*="bg-yellow-"],
[class*="bg-lime-"],
[class*="bg-green-"],
[class*="bg-emerald-"],
[class*="bg-teal-"],
[class*="bg-cyan-"],
[class*="bg-orange-"],
.bg-slate-950\/80,
.bg-slate-950, .bg-slate-900, .bg-slate-800, .bg-slate-700,
.bg-sky-900, .bg-sky-800, .bg-sky-700,
.bg-blue-900, .bg-blue-800, .bg-blue-700,
.bg-indigo-900, .bg-indigo-800, .bg-indigo-700,
.bg-violet-900, .bg-violet-800, .bg-violet-700,
.bg-purple-900, .bg-purple-800, .bg-purple-700,
.bg-fuchsia-900, .bg-fuchsia-800, .bg-fuchsia-700,
.bg-rose-900, .bg-rose-800, .bg-rose-700,
.bg-amber-900, .bg-amber-800, .bg-amber-700,
.bg-yellow-900, .bg-yellow-800, .bg-yellow-700,
.bg-lime-900, .bg-lime-800, .bg-lime-700,
.bg-green-900, .bg-green-800, .bg-green-700,
.bg-emerald-900, .bg-emerald-800, .bg-emerald-700,
.bg-teal-900, .bg-teal-800, .bg-teal-700,
.bg-orange-900, .bg-orange-800, .bg-orange-700 {
    background-color: var(--mainbgcolor) !important;
}
 /* keep our warning text and shit */
[class*="text-"]:not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-green"]):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="fa-"]) {
    color: var(--text-primary) !important;
}

/* everything else needs to go */
.text-slate-200,
.text-slate-300,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700,
.text-slate-800,
.text-slate-900,
.text-gray-200,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-sky-200,
.text-sky-300,
.text-sky-400,
.text-blue-300,
.text-blue-400,
.text-blue-500,
.text-indigo-300,
.text-indigo-400,
.text-violet-300,
.text-violet-400,
.text-purple-300,
.text-purple-400,
.text-fuchsia-300,
.text-fuchsia-400,
.text-cyan-300,
.text-cyan-400,
.text-teal-300,
.text-teal-400 {
    color: var(--text-primary) !important;
}

/* leave our warnings alone again*/
[class*="border-"]:not([class*="border-red"]):not([class*="border-rose"]) {
    border-color: var(--border-normal) !important;
}

/* annoying ass opacity variants, euthanize me and mafia cementblock tailwind please*/
.border-amber-500\/40,
.border-amber-500\/35,
.border-emerald-500\/40,
.border-emerald-500\/35,
.border-red-500\/40,
.border-red-500\/35,
.border-slate-600,
.border-slate-700,
.border-slate-800,
.border-sky-600,
.border-blue-600,
.border-indigo-600,
.border-violet-600,
.border-purple-600,
.border-fuchsia-600,
.border-rose-600,
.border-orange-600,
.border-yellow-600,
.border-lime-600,
.border-green-600,
.border-teal-600,
.border-cyan-600 {
    border-color: var(--border-normal) !important;
}

body, .page, .container, .console-main, .graph-workspace {
    background: var(--mainbgcolor) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--mainbgcolor);
}

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: var(--mainbgcolor);
        border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--accent), var(--accent-bright));
        border-radius: 999px;
        border: 2px solid var(--mainbgcolor);
    }

        *::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, var(--accent-bright), var(--accent));
        }

button,
.button,
.nav-dd-group-btn,
.dashboard-icon-btn,
.dashboard-toggle,
.cv-icon-btn,
.user-actions-trigger,
#account-settings-btn,
#notify-toggle,
#logout-btn,
#nav-hide-btn,
.sb-link,
.nav a,
.context-menu button,
.dashboard-menu > summary,
.sb-group-btn,
.sb-collapse-btn,
#topbar-nav-toggle {
    background-color: var(--mainbgcolor) !important;
    border: 1px solid var(--border-normal) !important;
    color: var(--text-primary) !important;
}

    button:hover,
    .button:hover,
    .nav-dd-group-btn:hover,
    .dashboard-icon-btn:hover,
    .dashboard-toggle:hover,
    .cv-icon-btn:hover,
    .user-actions-trigger:hover,
    #account-settings-btn:hover,
    #notify-toggle:hover,
    #logout-btn:hover,
    #nav-hide-btn:hover,
    .sb-link:hover,
    .nav a:hover,
    .context-menu button:hover,
    .dashboard-menu > summary:hover,
    .sb-group-btn:hover {
        background-color: var(--surface-hover) !important;
        border-color: var(--border-strong) !important;
        color: #ffffff !important;
    }

    .nav a.active,
    .sb-link.nav-active,
    .nav-dd-item.nav-active,
    .nav-dd-group-btn[aria-expanded="true"],
    .dashboard-menu[open] > summary {
        background-color: var(--mainbgcolor) !important;
        border-left: 3px solid var(--border-strong) !important;
        color: var(--text-accent) !important;
    }

    .button.primary,
    .button.primary:hover {
        background: var(--mainbgcolor) !important;
        border-color: var(--border-strong) !important;
        color: var(--text-accent) !important;
        box-shadow: 0 0 12px var(--accent-glow) !important;
    }

.card,
.login-card,
.console-card,
.modal,
.toast,
.dashboard-stat-card,
.dashboard-chart-card,
.dashboard-health-card {
    background: var(--mainbgcolor) !important;
    border: 1px solid var(--border-subtle) !important;
}

.nav-dd-menu,
.user-actions-menu,
.dashboard-menu-panel,
.dashboard-card-menu-panel,
#command-menu,
#command-menu .menu-group {
    background-color: var(--mainbgcolor) !important;
    border: 1px solid var(--border-subtle) !important;
}

.dashboard-stats-resizer {
    margin-top: 12px;
    height: 14px;
}

.dashboard-stats-content {
    margin-bottom: 8px;
}

.dashboard-stats-shell {
    --dashboard-stats-height: 180px;
}

table {
    background: var(--mainbgcolor);
    border: 1px solid var(--border-subtle);
}

thead th {
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border-subtle);
}

tbody tr:nth-child(even) {
    background: #050505;
}

tbody tr:hover {
    background: rgba(0,180,216,0.08);
}

.cv-row, .cv-card, .cv-card-header, .clients-table {
    background: var(--mainbgcolor);
    border-color: var(--border-subtle);
}

.overlord-tabulator.tabulator {
    background: var(--mainbgcolor);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.overlord-tabulator .tabulator-header,
.overlord-tabulator .tabulator-header .tabulator-col {
    background: var(--surface-hover);
    border-color: var(--border-subtle);
}

.overlord-tabulator .tabulator-row {
    background: var(--mainbgcolor);
    border-bottom-color: rgba(0,180,216,0.1);
}

    .overlord-tabulator .tabulator-row.tabulator-row-even {
        background: #050505;
    }

    .overlord-tabulator .tabulator-row:hover {
        background: var(--surface-hover);
    }

.console-body, .console-topbar, .console-card, .console-output {
    background: var(--mainbgcolor);
    border-color: var(--border-subtle);
}

.console-input-row {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

#console-input {
    background: var(--mainbgcolor);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.graph-toolbar, .graph-canvas, .graph-inspector {
    background: var(--mainbgcolor);
    border-color: var(--border-subtle);
}

.monaco-editor,
.monaco-editor .margin,
.monaco-editor-background {
    --vscode-editor-background: var(--mainbgcolor);
}

i[class*="fa-"]:not([class*="text-red"]):not([class*="text-rose"]) {
    color: var(--icon-maincolor) !important;
}

/* keep red ones red for obvious reasons */
i.text-red-400,
i.text-red-500,
i.text-rose-400,
i.text-rose-500,
#logout-btn i,
.sb-link--danger i,
.user-actions-item--danger i,
.button.danger i,
.context-menu button.danger i {
    color: var(--icon-danger) !important;
}

/* we like our logos slayyy */
.header-crown,
.login-crown {
    color: var(--icon-overlord) !important;
    -webkit-text-fill-color: var(--icon-overlord) !important;
    background: none !important;
}

.login-brand {
    background: none !important;
    -webkit-text-fill-color: var(--icon-overlord) !important;
    color: var(--icon-overlord) !important;
}
 /* for the settings nav bar, requires rgb so we need an extra variable </3 */
.settings-nav-link.active {
    --accent: var(--accent-rgb) !important;
}