/*:root {
    --bg-main: #0f172a;
    --bg-surface: #1e293b;
    --border-color: #2a3242;
    --text-main: #f3f6fb;
}*/

/* ===== DARK THEME ===== */

/*.form-control,
.form-select {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
    border-radius: 6px;
}

.btn {
    border-radius: 6px;
}

.btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

.table {
    background: #1e293b;
    color: #f1f5f9;
}

    .table th {
        background: #334155;
    }

.card {
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.sidebar {
    background: #0f172a;
}

.topbar {
    background: #1e293b;
}*/

/* =====================================================
   🌙 DARK PRO THEME
   ===================================================== */

:root {
    --bg-main: #0f172a;
    --bg-surface: #1e293b;
    --bg-surface-2: #273449;
    --border-color: #2f3b52;
    --text-main: #f3f6fb;
    --text-muted: #9ca8ba;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --hover-bg: #2a3447;
    --active-bg: #334155;
    --focus-bg: #1d4ed8;
    --radius: 8px;
    --transition: 0.15s ease;
}

/* ===== GLOBAL ===== */

body {
    background: var(--bg-main);
    color: var(--text-main);
}

/* ===== PAGE ===== */

.section {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.page-title {
    color: var(--text-main);
}

/* ===== FORM ===== */

.form-control,
.form-select {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: var(--radius);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
        background: var(--bg-surface-2);
    }

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

.btn {
    border-radius: var(--radius);
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

    .btn-primary:hover {
        background: var(--primary-hover);
    }

.btn-light {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

/* ===== TABLE ===== */

.table-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

/* Toolbar */
.table-toolbar {
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-color);
}

/* Table */
/*.table {
    background: transparent;
    color: var(--text-main);
}*/

.table-container,
.table {
    background: var(--bg-surface);
}

    .table th {
        background: #334155;
        border-bottom: 1px solid var(--border-color);
    }

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

.table-hover tbody tr:hover {
    background: var(--hover-bg);
}

/* ===== CARD ===== */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.card-header {
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-color);
}

.card-body {
    color: var(--text-main);
}

/* ===== STAT CARD ===== */

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.stat-title {
    color: var(--text-muted);
}

.stat-value {
    color: var(--text-main);
}

/* ===== BADGES ===== */

.badge-success {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.badge-danger {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

/* ===== ALERTS ===== */

.alert {
    border-radius: var(--radius);
}

.alert-success {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.alert-danger {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

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

.sidebar {
    background: #0b1220;
    border-right: 1px solid var(--border-color);
}

    .sidebar a {
        color: var(--text-main);
    }

        .sidebar a:hover {
            background: var(--hover-bg);
        }

        .sidebar a.active {
            background: var(--active-bg);
        }

/* ===== TOPBAR ===== */

.topbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}

/* ===== STATES ===== */

.loading,
.empty-state {
    color: var(--text-muted);
}

/* ===== PAGINATION ===== */

.page-link {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-main);
}

.page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
}

/* ===== SCROLLBAR (BONUS - DARK UX) ===== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: #3b4a63;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #4c5d78;
    }

/* ===== FORCE TABLE TEXT COLOR (FIX BOOTSTRAP OVERRIDE) ===== */
.table {
    background: transparent;
    color: var(--text-main);
}

    .table th {
        background: var(--bg-surface-2);
    }

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

.table-hover tbody tr:hover {
    background: var(--hover-bg);
}


.table > :not(caption) > * > * {
    color: var(--text-main) !important;
}