/**
 * Dark Theme
 * 
 * Complete dark theme with all variables matching light theme structure.
 * Applied when body has class "theme-dark"
 */

.theme-dark {
    /* -----------------------------------------------------------------------------
       CORE COLORS
       ----------------------------------------------------------------------------- */
    --color-primary: #0E9BFF;
    --color-primary-hover: #3bb2ff;
    --color-primary-rgb: 14, 155, 255;

    --color-secondary: #6c757d;
    --color-secondary-hover: #5c636a;

    --color-success: #28a745;
    --color-success-hover: #218838;

    --color-danger: #dc3545;
    --color-danger-hover: #c82333;

    --color-warning: #ffc107;
    --color-warning-hover: #e0a800;

    --color-info: #17a2b8;
    --color-info-hover: #138496;

    /* -----------------------------------------------------------------------------
       BACKGROUNDS
       ----------------------------------------------------------------------------- */
    --bg-body: #0b1220;
    --bg-surface: #141c2f;
    --bg-elevated: #1a2340;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* Card backgrounds */
    --bg-card: #141c2f;
    --bg-card-hover: #1a2340;
    --bg-card-header: #1a2340;
    --bg-card-soft: #1a2340;

    /* Form backgrounds */
    --bg-input: #1a2340;
    --bg-input-disabled: #141c2f;
    --bg-input-focus: #1f2a47;

    /* -----------------------------------------------------------------------------
       TEXT COLORS
       ----------------------------------------------------------------------------- */
    --text-primary: #e5e9f5;
    --text-main: #e5e9f5;
    --text-secondary: #aab1c7;
    --text-muted: #aab1c7;
    --text-inverse: #ffffff;

    /* Link colors */
    --link-color: #0E9BFF;
    --link-hover: #3bb2ff;
    --link-visited: #8b5cf6;
    --accent: #0E9BFF;
    --accent-hover: #3bb2ff;
    --accent-soft: rgba(14, 155, 255, 0.25);

    /* -----------------------------------------------------------------------------
       BORDERS
       ----------------------------------------------------------------------------- */
    --border-color: #273155;
    --border-color-light: #1f2a47;
    --border-color-dark: #2d3a5f;
    --border-subtle: #273155;

    --border-width: 1px;
    --border-style: solid;

    /* -----------------------------------------------------------------------------
       BUTTONS
       ----------------------------------------------------------------------------- */
    /* Primary button */
    --btn-primary-bg: #0E9BFF;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #0E9BFF;
    --btn-primary-hover-bg: #3bb2ff;
    --btn-primary-hover-border: #3bb2ff;

    /* Secondary button */
    --btn-secondary-bg: #6c757d;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #6c757d;
    --btn-secondary-hover-bg: #5c636a;
    --btn-secondary-hover-border: #565e64;

    /* Outline button */
    --btn-outline-border: #0E9BFF;
    --btn-outline-text: #0E9BFF;
    --btn-outline-hover-bg: #0E9BFF;
    --btn-outline-hover-text: #ffffff;

    /* -----------------------------------------------------------------------------
       FORMS
       ----------------------------------------------------------------------------- */
    --input-bg: #1a2340;
    --input-text: #e5e9f5;
    --input-border: #273155;
    --input-placeholder: #aab1c7;

    --input-focus-border: #0E9BFF;
    --input-focus-shadow: 0 0 0 0.25rem rgba(14, 155, 255, 0.25);

    --input-disabled-bg: #141c2f;
    --input-disabled-text: #6c757d;

    /* -----------------------------------------------------------------------------
       TABLES
       ----------------------------------------------------------------------------- */
    --table-bg: transparent;
    --table-border: #273155;
    --table-stripe-bg: rgba(255, 255, 255, 0.03);
    --table-hover-bg: rgba(14, 155, 255, 0.15);
    --table-active-bg: rgba(14, 155, 255, 0.25);

    /* -----------------------------------------------------------------------------
       NAVIGATION
       ----------------------------------------------------------------------------- */
    --nav-bg: #070d1a;
    --nav-border: #273155;
    --nav-link: #aab1c7;
    --nav-link-hover: #0E9BFF;
    --nav-link-active: #0E9BFF;
    --nav-active-color: #0E9BFF;
    --nav-active-bg: rgba(14, 155, 255, 0.2);

    /* Header */
    --header-bg: #070d1a;
    --header-text: #e5e9f5;
    --header-border: #273155;
    --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --bg-navbar: #070d1a;

    /* Footer */
    --footer-bg: #141c2f;
    --footer-text: #aab1c7;
    --footer-border: #273155;

    /* -----------------------------------------------------------------------------
       ALERTS
       ----------------------------------------------------------------------------- */
    --alert-success-bg: rgba(40, 167, 69, 0.2);
    --alert-success-text: #6fcf97;
    --alert-success-border: rgba(40, 167, 69, 0.4);

    --alert-danger-bg: rgba(220, 53, 69, 0.2);
    --alert-danger-text: #ff6b7a;
    --alert-danger-border: rgba(220, 53, 69, 0.4);

    --alert-warning-bg: rgba(255, 193, 7, 0.2);
    --alert-warning-text: #ffd54f;
    --alert-warning-border: rgba(255, 193, 7, 0.4);

    --alert-info-bg: rgba(23, 162, 184, 0.2);
    --alert-info-text: #4dd0e1;
    --alert-info-border: rgba(23, 162, 184, 0.4);

    /* -----------------------------------------------------------------------------
       BADGES
       ----------------------------------------------------------------------------- */
    --badge-bg: #6c757d;
    --badge-text: #ffffff;

    /* -----------------------------------------------------------------------------
       MODALS
       ----------------------------------------------------------------------------- */
    --modal-bg: #141c2f;
    --modal-border: #273155;
    --modal-header-bg: #1a2340;
    --modal-header-border: #273155;
    --modal-footer-bg: #1a2340;
    --modal-footer-border: #273155;
    --modal-backdrop: rgba(0, 0, 0, 0.7);

    /* -----------------------------------------------------------------------------
       PAGINATION
       ----------------------------------------------------------------------------- */
    --pagination-bg: #141c2f;
    --pagination-text: #0E9BFF;
    --pagination-border: #273155;
    --pagination-hover-bg: #1a2340;
    --pagination-hover-text: #3bb2ff;
    --pagination-active-bg: #0E9BFF;
    --pagination-active-text: #ffffff;
    --pagination-disabled-bg: #141c2f;
    --pagination-disabled-text: #6c757d;

    /* -----------------------------------------------------------------------------
       TOOLTIPS & POPOVERS
       ----------------------------------------------------------------------------- */
    --tooltip-bg: #1a2340;
    --tooltip-text: #e5e9f5;
    --popover-bg: #141c2f;
    --popover-border: #273155;

    /* -----------------------------------------------------------------------------
       CODE & SYNTAX
       ----------------------------------------------------------------------------- */
    --code-bg: #1a2340;
    --code-text: #ff6b9d;
    --code-border: #273155;

    --pre-bg: #1a2340;
    --pre-text: #e5e9f5;
    --pre-border: #273155;

    /* -----------------------------------------------------------------------------
       SCROLLBAR (Webkit browsers)
       ----------------------------------------------------------------------------- */
    --scrollbar-track: #141c2f;
    --scrollbar-thumb: #273155;
    --scrollbar-thumb-hover: #2d3a5f;

    /* -----------------------------------------------------------------------------
       MISCELLANEOUS
       ----------------------------------------------------------------------------- */
    --divider: #273155;
    --focus-ring: 0 0 0 0.25rem rgba(14, 155, 255, 0.25);
    --disabled-opacity: 0.65;
}

/* Background gradient */
.theme-dark {
    background:
        radial-gradient(circle at top, #18234a 0%, #0b1220 55%, #050812 100%);
    background-attachment: fixed;
}

/* =========================================================
   READABILITY FIXES
========================================================= */

.theme-dark .text-muted,
.theme-dark .small {
    color: var(--text-muted) !important;
}

/* =========================================================
   TABLES
========================================================= */

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

.theme-dark table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
    border: none !important;
}

.theme-dark table.dataTable thead th,
.theme-dark table.dataTable thead td {
    background-color: var(--bg-card-soft) !important;
    color: var(--text-inverse) !important;
    border-bottom: 2px solid var(--border-subtle) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.theme-dark table.dataTable thead th:first-child,
.theme-dark table.dataTable thead td:first-child {
    border-top-left-radius: 0.5rem;
}

.theme-dark table.dataTable thead th:last-child,
.theme-dark table.dataTable thead td:last-child {
    border-top-right-radius: 0.5rem;
}

.theme-dark table.dataTable tbody tr {
    background-color: var(--bg-card) !important;
    color: var(--text-main);
    border: 1px solid var(--border-subtle) !important;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-dark table.dataTable tbody tr td:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-right: 1px solid var(--border-subtle) !important;
}

.theme-dark table.dataTable tbody tr td:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-right: none !important;
}

.theme-dark table.dataTable tbody tr td {
    border-bottom: none !important;
    border-right: 1px solid var(--border-subtle) !important;
}

.theme-dark table.dataTable tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
    transform: translateX(2px) translateY(-1px);
    box-shadow: -2px 0 0 var(--accent), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-dark table.dataTable tbody tr.odd {
    background-color: var(--bg-card) !important;
}

.theme-dark table.dataTable tbody tr.even {
    background-color: var(--table-stripe-bg) !important;
}

.theme-dark table.dataTable tbody td {
    border-color: var(--border-subtle) !important;
    color: var(--text-main) !important;
}

/* DataTables controls */
.theme-dark .dataTables_length,
.theme-dark .dataTables_filter,
.theme-dark .dataTables_info,
.theme-dark .dataTables_paginate {
    color: var(--text-main) !important;
}

.theme-dark .dataTables_length select,
.theme-dark .dataTables_filter input {
    background-color: var(--bg-card-soft) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-main) !important;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.theme-dark .dataTables_length select:focus,
.theme-dark .dataTables_filter input:focus {
    background-color: var(--bg-card) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
    outline: none;
}

.theme-dark .dataTables_paginate .paginate_button {
    background-color: var(--bg-card-soft) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-main) !important;
    border-radius: 0.375rem;
    margin: 0 0.25rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.theme-dark .dataTables_paginate .paginate_button:hover {
    background-color: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-dark .dataTables_paginate .paginate_button.current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-inverse) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--accent-soft);
}

.theme-dark .dataTables_paginate .paginate_button.disabled {
    color: var(--text-muted) !important;
    opacity: 0.4;
    cursor: not-allowed;
}

.theme-dark .dataTables_paginate .paginate_button.disabled:hover {
    background-color: var(--bg-card-soft) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-muted) !important;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   CARDS
========================================================= */

.theme-dark .card {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-subtle);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 10px 30px rgba(0, 0, 0, 0.6);
}

.theme-dark .card-header {
    background-color: var(--bg-card-header);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

.theme-dark .card-footer {
    background-color: var(--bg-card-header);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

/* Card text readability */
.theme-dark .card h1,
.theme-dark .card h2,
.theme-dark .card h3,
.theme-dark .card h4,
.theme-dark .card h5,
.theme-dark .card h6 {
    color: var(--text-inverse);
}

.theme-dark .card .text-muted,
.theme-dark .card .small,
.theme-dark .card small {
    color: var(--text-muted) !important;
}

/* =========================================================
   BG-LIGHT OVERRIDE FOR DARK THEME
========================================================= */

.theme-dark .bg-light {
    background-color: var(--bg-card-soft) !important;
    color: var(--text-main);
}

.theme-dark .card.bg-light {
    background-color: var(--bg-card-soft) !important;
    border: 1px solid var(--border-subtle) !important;
}

.theme-dark .card.bg-light .text-muted,
.theme-dark .card.bg-light small {
    color: var(--text-muted) !important;
}

.theme-dark .card.bg-light .h4,
.theme-dark .card.bg-light h4 {
    color: var(--text-inverse) !important;
}

/* =========================================================
   BG-WHITE OVERRIDE FOR DARK THEME
========================================================= */

.theme-dark .bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.theme-dark .card-header.bg-white,
.theme-dark .card-footer.bg-white {
    background-color: var(--bg-card-soft) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-main) !important;
}

.theme-dark .card-header.bg-white h1,
.theme-dark .card-header.bg-white h2,
.theme-dark .card-header.bg-white h3,
.theme-dark .card-header.bg-white h4,
.theme-dark .card-header.bg-white h5,
.theme-dark .card-header.bg-white h6 {
    color: var(--text-inverse) !important;
}

.theme-dark div.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}

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

.theme-dark .form-control,
.theme-dark .form-select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    background-color: var(--input-focus);
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
    color: var(--input-text);
}

.theme-dark .form-control::placeholder {
    color: var(--input-placeholder);
}

.theme-dark .form-control:disabled,
.theme-dark .form-select:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-text);
}

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

.theme-dark .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

.theme-dark .btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
}

.theme-dark .btn-outline-primary {
    border-color: var(--btn-outline-border);
    color: var(--btn-outline-text);
}

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

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

.theme-dark .alert-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-color: var(--alert-success-border);
}

.theme-dark .alert-danger {
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-color: var(--alert-danger-border);
}

.theme-dark .alert-warning {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-border);
}

.theme-dark .alert-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-color: var(--alert-info-border);
}

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

.theme-dark .badge {
    background-color: var(--badge-bg);
    color: var(--badge-text);
}

/* =========================================================
   MODALS
========================================================= */

.theme-dark .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--text-main);
}

.theme-dark .modal-header {
    background-color: var(--modal-header-bg);
    border-color: var(--modal-header-border);
    color: var(--text-main);
}

.theme-dark .modal-footer {
    background-color: var(--modal-footer-bg);
    border-color: var(--modal-footer-border);
    color: var(--text-main);
}

.theme-dark .modal-backdrop {
    background-color: var(--modal-backdrop);
}

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

.theme-dark .pagination .page-link {
    background-color: var(--pagination-bg);
    color: var(--pagination-text);
    border-color: var(--pagination-border);
}

.theme-dark .pagination .page-link:hover {
    background-color: var(--pagination-hover-bg);
    color: var(--pagination-hover-text);
}

.theme-dark .pagination .page-item.active .page-link {
    background-color: var(--pagination-active-bg);
    color: var(--pagination-active-text);
    border-color: var(--pagination-active-bg);
}

.theme-dark .pagination .page-item.disabled .page-link {
    background-color: var(--pagination-disabled-bg);
    color: var(--pagination-disabled-text);
}