:root {
    /* =========================================
       SOLID DARK THEME - GLOBAL COLOR CONTROL
       Alter here to change the entire site
       ========================================= */
    
    /* Backgrounds - Increased depth */
    --bg-body: #050505;       /* Slightly lighter than pure black */
    --bg-card: #0a0a0a;       /* Dark gray for cards */
    --bg-element: #141414;    /* Element background */
    --bg-input: #000000;      /* Pure black for inputs */
    --bg-hover: #1f1f1f;      /* Lighter hover */

    /* Text */
    --text-primary: #ededed;   /* Off-white for less eye strain */
    --text-secondary: #a1a1aa; /* Zinc-400 */
    --text-muted: #71717a;     /* Zinc-500 */

    /* Accents */
    --color-accent: #3b82f6;   /* Blue-500 */
    --color-success: #22c55e;  /* Green-500 */
    --color-warning: #eab308;  /* Yellow-500 */
    --color-danger: #ef4444;   /* Red-500 */
    --color-info: #06b6d4;     /* Cyan-500 */

    /* Borders - Enhanced visibility */
    --border-color: #27272a;   /* Zinc-800 - Visible border */
    --border-highlight: #3f3f46; /* Zinc-700 - Highlight border */
    --border-radius: 12px;
}

/* =========================================
   BASE STYLES
   ========================================= */

html, body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 14px;
}

body {
    padding-top: 130px;
}

@media (max-width: 979px) {
    body {
        padding-top: 110px;
        padding-bottom: 0;
    }
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity 0.2s;
}

a:hover {
    color: var(--color-accent);
    opacity: 0.8;
}

/* =========================================
   BOOTSTRAP OVERRIDES (THEMING)
   ========================================= */

/* Cards - Enhanced Visibility */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
    /* Subtle glow effect for depth */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    border-color: var(--border-highlight);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.card-header {
    background-color: var(--bg-element); /* Distinct header */
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
    color: var(--text-secondary);
}

.card-footer {
    background-color: var(--bg-element);
    border-top: 1px solid var(--border-color);
}

/* Utility Class Overrides */
.bg-dark {
    background-color: var(--bg-element) !important;
}

.bg-secondary {
    background-color: #27272a !important; /* Zinc-800 */
}

.bg-light {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.border-secondary {
    border-color: var(--border-color) !important;
}

.text-muted, .text-white-50 {
    color: var(--text-muted) !important;
}

.text-white {
    color: var(--text-primary) !important;
}

/* Navbar */
.navbar {
    background-color: rgba(10, 10, 10, 0.8) !important; /* Translucent */
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 96px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 96px;
}

.navbar-brand, .nav-link {
    color: var(--text-primary) !important;
}

.nav-link:hover {
    color: var(--color-accent) !important;
}

/* Tables */
.table {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-element) !important;
    color: var(--text-primary);
}

.table-hover > tbody > tr:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary);
}

.table th {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    background-color: var(--bg-body) !important;
}

.table td {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Forms - Enhanced Inputs */
.form-control, .form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important; /* Visible border */
    color: var(--text-primary) !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); /* Blue glow */
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Badges */
.badge {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5em 0.7em;
    border: 1px solid transparent; /* Prepare for border */
}

.bg-primary { background-color: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; border-color: rgba(59, 130, 246, 0.3) !important; }
.bg-success { background-color: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; border-color: rgba(34, 197, 94, 0.3) !important; }
.bg-danger  { background-color: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.3) !important; }
.bg-warning { background-color: rgba(234, 179, 8, 0.2) !important; color: #facc15 !important; border-color: rgba(234, 179, 8, 0.3) !important; }
.bg-info    { background-color: rgba(6, 182, 212, 0.2) !important; color: #22d3ee !important; border-color: rgba(6, 182, 212, 0.3) !important; }

/* Alerts */
.alert {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-element);
    color: var(--text-primary);
    border-left: 4px solid var(--color-accent);
}

/* Footer */
footer {
    background-color: var(--bg-body);
    color: var(--text-secondary);
    padding: 2rem 0;
}

footer a { color: var(--text-secondary); }
footer a:hover { color: var(--text-primary); text-decoration: none; }

/* Tabs */
.nav-pills .nav-link {
    color: var(--text-secondary);
    background-color: transparent;
    border-radius: var(--border-radius);
    transition: all 0.2s;
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.nav-pills .nav-link.active {
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
}

/* Mobile Tabs */
@media (max-width: 768px) {
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    .nav-pills::-webkit-scrollbar { display: none; }
    .nav-pills .nav-item { flex: 0 0 auto; }
}

/* API Categories - Adjusted for better contrast */
.filesystem { background-color: #2c1a0a !important; color: #ffe3c5 !important; border: 1px solid #634226; }
.registry { background-color: #2c0f0f !important; color: #ffc5c5 !important; border: 1px solid #632626; }
.process { background-color: #0f1c2c !important; color: #c5e0ff !important; border: 1px solid #264263; }
.threading { background-color: #1a1f33 !important; color: #d3e0ff !important; border: 1px solid #2d3b63; }
.services { background-color: #1a1533 !important; color: #ccc5ff !important; border: 1px solid #362663; }
.device { background-color: #1f1a1d !important; color: #d3c5cc !important; border: 1px solid #63264d; }
.network { background-color: #1a3315 !important; color: #d3ffc5 !important; border: 1px solid #2d6326; }
.socket { background-color: #1a3315 !important; color: #d3ffc5 !important; border: 1px solid #2d6326; }
.synchronization { background-color: #2c1533 !important; color: #f9c5ff !important; border: 1px solid #5d2663; }
.browser { background-color: #153315 !important; color: #dfffdf !important; border: 1px solid #266326; }
.crypto { background-color: #2c2f15 !important; color: #f0f2c5 !important; border: 1px solid #606326; }

/* Buttons */
.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }