/**
 * Theme Overrides
 * These styles override the base theme (app.min.css / app-dark.min.css)
 * This file MUST load after the theme stylesheet to take effect.
 */

/* ============================================
   PRICING CARD STRIKETHROUGH FIX
   The .card-pricing-price span rule sets font-size: 40%,
   which causes a huge size mismatch when a <span> is inside
   an <s> tag — the browser draws line-through based on
   mixed content heights, placing it ~20px too low.
   Fix: disable native line-through and draw a custom line
   at exactly 50% of the element height via ::after.
   ============================================ */
.card-pricing .card-pricing-price s {
    text-decoration: none !important;
    position: relative;
    display: inline-block;
}

.card-pricing .card-pricing-price s::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid currentColor;
    pointer-events: none;
}

/* ============================================
   DARK THEME: CUSTOM SCROLLBARS
   Ensures all scrollbars match dark theme
   ============================================ */

/* WebKit browsers (Chrome, Edge, Safari) */
html.dark-theme ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark-theme ::-webkit-scrollbar-track {
    background: #2a2e3d;
    border-radius: 6px;
}

html.dark-theme ::-webkit-scrollbar-thumb {
    background: #4a5073;
    border-radius: 6px;
    border: 2px solid #2a2e3d;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #5a6183;
}

html.dark-theme ::-webkit-scrollbar-corner {
    background: #2a2e3d;
}

/* Firefox */
html.dark-theme * {
    scrollbar-color: #4a5073 #2a2e3d;
    scrollbar-width: auto;
}

/* ============================================
   DARK THEME TRANSITIONS
   ============================================ */
html.dark-theme,
html.dark-theme body {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* ============================================
   DARK THEME: MAIN BACKGROUND WITH BLUE-PURPLE TINT
   Matches the auth pages aesthetic
   ============================================ */
html.dark-theme body {
    background-color: #2a2e3d !important;
}

html.dark-theme .left-side-menu {
    background: #262a38 !important;
}

html.dark-theme .content-page {
    background-color: #2a2e3d;
}

html.dark-theme .navbar-custom {
    background-color: #262a38 !important;
}

html.dark-theme .footer {
    background-color: #262a38 !important;
}

/* User account block in top-right navbar */
html.dark-theme .nav-user {
    background-color: #313548 !important;
    border-color: #3d4259 !important;
}

/* Cards - blue-purple tinted backgrounds */
html.dark-theme .card {
    background-color: #313548 !important;
    border-color: #3d4259 !important;
}

html.dark-theme .card-header {
    background-color: #2d3145 !important;
    border-color: #3d4259 !important;
}

html.dark-theme .card-footer {
    background-color: #2d3145 !important;
    border-color: #3d4259 !important;
}

/* Selectable cards (game titles, regions, pricing) - selection state */
/* Both light and dark mode: selected cards get blue tinted background */
.card.border-primary {
    background-color: rgba(114, 125, 245, 0.08) !important;
}

.card.border-primary .card-body {
    background-color: transparent !important;
}

/* Dark mode: ensure border is visible */
html.dark-theme .card.border-primary {
    border-color: #727df5 !important;
    background-color: rgba(114, 125, 245, 0.15) !important;
}

/* Tables within cards */
html.dark-theme .table {
    background-color: transparent;
}

html.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(114, 125, 245, 0.05);
}

html.dark-theme .table-hover tbody tr:hover {
    background-color: rgba(114, 125, 245, 0.08);
}

/* Dedicated Server card divider */
.ds-card-divider {
    float: left;
    border-left: solid 2px #dee2e6;
}

html.dark-theme .ds-card-divider {
    border-left-color: #3d4259;
}

/* Dropdowns */
html.dark-theme .dropdown-menu {
    background-color: #313548 !important;
    border-color: #3d4259 !important;
}

html.dark-theme .dropdown-item:hover,
html.dark-theme .dropdown-item:focus {
    background-color: rgba(114, 125, 245, 0.15) !important;
}

/* ============================================
   GAME VERSION DROPDOWN CHECKMARKS
   Position checkmarks at right edge of dropdown
   ============================================ */
.dropdown-item[id^="game-server-version-"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-item[id^="game-server-version-"] i.mdi-check {
    float: none !important;
    margin-left: 1rem; /* Space between text and checkmark */
    margin-right: -0.75rem; /* Pull into the padding area */
}

html.dark-theme .dropdown-item[id^="game-server-version-"] i.mdi-check {
    color: #9297f3; /* Match card border blue for visibility */
}

/* ============================================
   DARK THEME: MODAL OVERRIDE
   ============================================ */
html.dark-theme .modal-content {
    background-color: #313548 !important;
    border-color: #3d4259 !important;
}

html.dark-theme .modal-header {
    border-color: #3d4259 !important;
}

html.dark-theme .modal-footer {
    border-color: #3d4259 !important;
}

html.dark-theme .modal-backdrop {
    background-color: #000 !important;
}

html.dark-theme .modal-backdrop.show {
    opacity: 0.7 !important;
}

/* ============================================
   DARK THEME: ALERT OVERRIDES
   Deep, muted colors that fit the dark theme
   ============================================ */

/* Info alerts - deep blue-teal */
html.dark-theme .alert-info {
    background-color: rgba(58, 175, 218, 0.15) !important;
    border-color: rgba(58, 175, 218, 0.3) !important;
    color: #7dd3e8 !important;
}

html.dark-theme .alert-info hr {
    border-top-color: rgba(58, 175, 218, 0.3) !important;
}

html.dark-theme .alert-info .alert-link {
    color: #a0e4f3 !important;
}

/* Success alerts - deep green */
html.dark-theme .alert-success {
    background-color: rgba(10, 207, 151, 0.15) !important;
    border-color: rgba(10, 207, 151, 0.3) !important;
    color: #5ee5b5 !important;
}

html.dark-theme .alert-success hr {
    border-top-color: rgba(10, 207, 151, 0.3) !important;
}

html.dark-theme .alert-success .alert-link {
    color: #8aedcd !important;
}

/* Warning alerts - deep amber */
html.dark-theme .alert-warning {
    background-color: rgba(255, 188, 0, 0.15) !important;
    border-color: rgba(255, 188, 0, 0.3) !important;
    color: #ffd966 !important;
}

html.dark-theme .alert-warning hr {
    border-top-color: rgba(255, 188, 0, 0.3) !important;
}

html.dark-theme .alert-warning .alert-link {
    color: #ffe699 !important;
}

/* Danger alerts - deep red */
html.dark-theme .alert-danger {
    background-color: rgba(250, 92, 124, 0.15) !important;
    border-color: rgba(250, 92, 124, 0.3) !important;
    color: #fc8fa8 !important;
}

html.dark-theme .alert-danger hr {
    border-top-color: rgba(250, 92, 124, 0.3) !important;
}

html.dark-theme .alert-danger .alert-link {
    color: #fdb4c4 !important;
}

/* Primary alerts - deep purple */
html.dark-theme .alert-primary {
    background-color: rgba(114, 125, 245, 0.15) !important;
    border-color: rgba(114, 125, 245, 0.3) !important;
    color: #a3abf8 !important;
}

html.dark-theme .alert-primary hr {
    border-top-color: rgba(114, 125, 245, 0.3) !important;
}

html.dark-theme .alert-primary .alert-link {
    color: #c5c9fb !important;
}

/* Secondary alerts - deep gray */
html.dark-theme .alert-secondary {
    background-color: rgba(170, 184, 197, 0.12) !important;
    border-color: rgba(170, 184, 197, 0.25) !important;
    color: #c5cdd5 !important;
}

html.dark-theme .alert-secondary hr {
    border-top-color: rgba(170, 184, 197, 0.25) !important;
}

html.dark-theme .alert-secondary .alert-link {
    color: #dde2e7 !important;
}

/* Light alerts - subtle dark background */
html.dark-theme .alert-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #c5cdd5 !important;
}

html.dark-theme .alert-light hr {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-theme .alert-light .alert-link {
    color: #dde2e7 !important;
}

/* Dark alerts */
html.dark-theme .alert-dark {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
    color: #aab8c5 !important;
}

/* ============================================
   DARK THEME: CODE ELEMENT OVERRIDES
   ============================================ */

/* Inline code elements - softer appearance */
html.dark-theme code {
    background-color: rgba(114, 125, 245, 0.12);
    color: #a3abf8;
    padding: 0.15em 0.4em;
    border-radius: 0.2em;
}

/* ============================================
   DARK THEME: BUTTON OVERRIDES
   ============================================ */

/* .btn-light - softer transparent white appearance */
html.dark-theme .btn-light {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0 0 0.15rem 0.15rem rgba(197, 202, 207, 0.2);
              box-shadow: 0 0 0.15rem 0.15rem rgba(197, 202, 207, 0.2);
}

html.dark-theme .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    -webkit-box-shadow: 0 0 0.15rem 0.15rem rgba(197, 202, 207, 0.3);
              box-shadow: 0 0 0.15rem 0.15rem rgba(197, 202, 207, 0.3);
}

html.dark-theme .btn-light:focus,
html.dark-theme .btn-light:active,
html.dark-theme .btn-light.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    box-shadow: 0 0 0.20rem 0.20rem rgba(255, 255, 255, 0.5);
}

/* .btn-outline-light overrides */
html.dark-theme .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

html.dark-theme .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* .btn-outline-secondary - visible border and text in dark mode */
html.dark-theme .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.85);
}

html.dark-theme .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* .btn-dark - needs darker background in dark mode to contrast with lighter cards */
html.dark-theme .btn-dark {
    background-color: #1a1d24 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    box-shadow: 0 0 0.15rem 0.15rem rgba(30, 30, 30, 0.4) !important;
}

html.dark-theme .btn-dark:hover {
    background-color: #0d0f12 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    box-shadow: 0 0 0.2rem 0.2rem rgba(25, 25, 25, 0.5) !important;
}

/* ============================================
   DARK THEME: BADGE OVERRIDES
   Covers both Bootstrap 4 (badge-*) and Bootstrap 5 (bg-*) patterns
   ============================================ */

/* .badge-light / .badge.bg-light - softer transparent appearance */
html.dark-theme .badge-light,
html.dark-theme .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9) !important;
}

/* .badge-secondary / .badge.bg-secondary */
html.dark-theme .badge-secondary,
html.dark-theme .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* .badge-secondary-lighten - brighter text for soft secondary badges in dark mode */
html.dark-theme .badge-secondary-lighten {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: rgba(170, 184, 197, 0.2) !important;
}

/* Nested badges: when a badge is inside a warning badge, inherit warning colors */
html.dark-theme .badge-warning .badge,
html.dark-theme .badge.bg-warning .badge {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #000 !important;
}

/* .badge-warning / .badge.bg-warning - ensure black text for readability on yellow background */
html.dark-theme .badge-warning,
html.dark-theme .badge.bg-warning {
    color: #000 !important;
}

/* .badge-primary / .badge.bg-primary - brighter blue for dark theme visibility */
html.dark-theme .badge-primary,
html.dark-theme .badge.bg-primary {
    background-color: #727df5 !important;
    color: #fff !important;
}

/* .badge-success / .badge.bg-success - brighter green for dark theme visibility */
html.dark-theme .badge-success,
html.dark-theme .badge.bg-success {
    background-color: #0acf97 !important;
    color: #fff !important;
}

/* Sidebar badges in dark mode */
html.dark-theme .side-nav .badge {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   LIGHT THEME: BADGE OVERRIDES
   Covers both Bootstrap 4 (badge-*) and Bootstrap 5 (bg-*) patterns
   Forces proper text colors for all badge types
   ============================================ */

/* .badge-primary / .badge.bg-primary - white text on blue background */
.badge-primary,
.badge.bg-primary {
    color: #fff !important;
}

/* .badge-secondary / .badge.bg-secondary - white text on gray background */
.badge-secondary,
.badge.bg-secondary {
    background-color: #5a6268 !important;
    color: #fff !important;
}

/* .badge-success / .badge.bg-success - white text on green background */
.badge-success,
.badge.bg-success {
    color: #fff !important;
}

/* .badge-danger / .badge.bg-danger - white text on red background */
.badge-danger,
.badge.bg-danger {
    color: #fff !important;
}

/* .badge-warning / .badge.bg-warning - dark text on yellow background for contrast */
.badge-warning,
.badge.bg-warning {
    color: #000 !important;
}

/* .badge-info / .badge.bg-info - white text on cyan background */
.badge-info,
.badge.bg-info {
    color: #fff !important;
}

/* .badge-light / .badge.bg-light - dark text on light background */
.badge-light,
.badge.bg-light {
    color: #212529 !important;
}

/* .badge-dark / .badge.bg-dark - white text on dark background */
.badge-dark,
.badge.bg-dark {
    color: #fff !important;
}

/* Dark theme: .badge-dark needs darker background to stand out */
html.dark-theme .badge-dark,
html.dark-theme .badge.bg-dark {
    background-color: #1a1d24 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   DARK THEME: TEXT UTILITY OVERRIDES
   ============================================ */

/* .text-secondary - visible gray text in dark mode */
html.dark-theme .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* .text-light - ensure visibility on dark backgrounds */
html.dark-theme .text-light {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* .text-white - already white but ensure no override conflicts */
html.dark-theme .text-white {
    color: #fff !important;
}

/* .text-muted - slightly brighter for dark theme readability */
html.dark-theme .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   DARK THEME: BACKGROUND UTILITY OVERRIDES
   ============================================ */

/* .bg-light - used for total rows, highlighted sections, etc. 
   Using a darker, more faded purple for subtle highlight while keeping text readable */
html.dark-theme .bg-light {
    background-color: rgba(114, 125, 245, 0.069) !important;
    color: #e3eaef !important;
}

html.dark-theme tr.bg-light,
html.dark-theme tr.bg-light td,
html.dark-theme tr.bg-light th {
    background-color: rgba(114, 125, 245, 0.069)  !important;
    color: #e3eaef !important;
}

/* .bg-secondary override */
html.dark-theme .bg-secondary {
    background-color: rgba(170, 184, 197, 0.15) !important;
}

/* .bg-dark - keep dark background in dark mode (used for text-light/text-white demos) */
html.dark-theme .bg-dark {
    background-color: #1a1d24 !important;
}

/* ============================================
   THEME TOGGLE STYLES
   ============================================ */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px;
}

.theme-switch input {
    display: none;
}

.theme-switch .slider {
    background-color: rgba(255, 255, 255, 0.2);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.3s;
    border-radius: 24px;
}

.theme-switch .slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 18px;
    left: 3px;
    position: absolute;
    transition: 0.3s;
    width: 18px;
    border-radius: 50%;
}

.theme-switch input:checked + .slider {
    background-color: rgba(114, 124, 245, 0.6);
}

.theme-switch input:checked + .slider:before {
    transform: translateX(26px);
}

.theme-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0 6px;
    transition: color 0.3s;
}

.theme-icon.active {
    color: #ffbc00;
}

.theme-icon.moon.active {
    color: #727cf5;
}

#theme-save-indicator {
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
}

/* ============================================
   DARK THEME: TABLE ROW HIGHLIGHT OVERRIDES
   More vibrant colors for highlighted rows
   Using !important to override app-dark.min.css
   ============================================ */

/* Primary (blue) row highlighting */
html.dark-theme .table-primary,
html.dark-theme .table-primary > th,
html.dark-theme .table-primary > td,
html.dark-theme tr.table-primary,
html.dark-theme tr.table-primary > th,
html.dark-theme tr.table-primary > td {
    background-color: rgba(114, 124, 245, 0.25) !important;
    color: #e3eaef !important;
    border-color: rgba(114, 124, 245, 0.4) !important;
}

html.dark-theme .table-hover .table-primary:hover,
html.dark-theme .table-hover .table-primary:hover > td,
html.dark-theme .table-hover .table-primary:hover > th {
    background-color: rgba(114, 124, 245, 0.4) !important;
}

/* Secondary (gray) row highlighting */
html.dark-theme .table-secondary,
html.dark-theme .table-secondary > th,
html.dark-theme .table-secondary > td,
html.dark-theme tr.table-secondary,
html.dark-theme tr.table-secondary > th,
html.dark-theme tr.table-secondary > td {
    background-color: rgba(170, 184, 197, 0.2) !important;
    color: #e3eaef !important;
    border-color: rgba(170, 184, 197, 0.35) !important;
}

html.dark-theme .table-hover .table-secondary:hover,
html.dark-theme .table-hover .table-secondary:hover > td,
html.dark-theme .table-hover .table-secondary:hover > th {
    background-color: rgba(170, 184, 197, 0.35) !important;
}

/* Success (green) row highlighting */
html.dark-theme .table-success,
html.dark-theme .table-success > th,
html.dark-theme .table-success > td,
html.dark-theme tr.table-success,
html.dark-theme tr.table-success > th,
html.dark-theme tr.table-success > td {
    background-color: rgba(10, 207, 151, 0.25) !important;
    color: #e3eaef !important;
    border-color: rgba(10, 207, 151, 0.4) !important;
}

html.dark-theme .table-hover .table-success:hover,
html.dark-theme .table-hover .table-success:hover > td,
html.dark-theme .table-hover .table-success:hover > th {
    background-color: rgba(10, 207, 151, 0.4) !important;
}

/* Info (cyan) row highlighting */
html.dark-theme .table-info,
html.dark-theme .table-info > th,
html.dark-theme .table-info > td,
html.dark-theme tr.table-info,
html.dark-theme tr.table-info > th,
html.dark-theme tr.table-info > td {
    background-color: rgba(57, 175, 209, 0.25) !important;
    color: #e3eaef !important;
    border-color: rgba(57, 175, 209, 0.4) !important;
}

html.dark-theme .table-hover .table-info:hover,
html.dark-theme .table-hover .table-info:hover > td,
html.dark-theme .table-hover .table-info:hover > th {
    background-color: rgba(57, 175, 209, 0.4) !important;
}

/* Warning (yellow/amber) row highlighting */
html.dark-theme .table-warning,
html.dark-theme .table-warning > th,
html.dark-theme .table-warning > td,
html.dark-theme tr.table-warning,
html.dark-theme tr.table-warning > th,
html.dark-theme tr.table-warning > td {
    background-color: rgba(255, 188, 0, 0.2) !important;
    color: #e3eaef !important;
    border-color: rgba(255, 188, 0, 0.35) !important;
}

html.dark-theme .table-hover .table-warning:hover,
html.dark-theme .table-hover .table-warning:hover > td,
html.dark-theme .table-hover .table-warning:hover > th {
    background-color: rgba(255, 188, 0, 0.35) !important;
}

/* Danger (red/pink) row highlighting */
html.dark-theme .table-danger,
html.dark-theme .table-danger > th,
html.dark-theme .table-danger > td,
html.dark-theme tr.table-danger,
html.dark-theme tr.table-danger > th,
html.dark-theme tr.table-danger > td {
    background-color: rgba(250, 92, 124, 0.25) !important;
    color: #e3eaef !important;
    border-color: rgba(250, 92, 124, 0.4) !important;
}

html.dark-theme .table-hover .table-danger:hover,
html.dark-theme .table-hover .table-danger:hover > td,
html.dark-theme .table-hover .table-danger:hover > th {
    background-color: rgba(250, 92, 124, 0.4) !important;
}

/* Light row highlighting - make it actually visible */
html.dark-theme .table-light,
html.dark-theme .table-light > th,
html.dark-theme .table-light > td,
html.dark-theme tr.table-light,
html.dark-theme tr.table-light > th,
html.dark-theme tr.table-light > td {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #e3eaef !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-theme .table-hover .table-light:hover,
html.dark-theme .table-hover .table-light:hover > td,
html.dark-theme .table-hover .table-light:hover > th {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dark row highlighting */
html.dark-theme .table-dark,
html.dark-theme .table-dark > th,
html.dark-theme .table-dark > td {
    background-color: rgba(55, 64, 74, 0.8) !important;
    color: #e3eaef !important;
}

/* Active row highlighting */
html.dark-theme .table-active,
html.dark-theme .table-active > th,
html.dark-theme .table-active > td {
    background-color: rgba(114, 124, 245, 0.2) !important;
    color: #e3eaef !important;
}

/* Table striped rows in dark mode - subtle alternation */
html.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Table hover effect in dark mode */
html.dark-theme .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* Ensure highlighted rows keep their color on hover */
html.dark-theme .table-hover tbody tr.table-primary:hover,
html.dark-theme .table-hover tbody tr.table-secondary:hover,
html.dark-theme .table-hover tbody tr.table-success:hover,
html.dark-theme .table-hover tbody tr.table-info:hover,
html.dark-theme .table-hover tbody tr.table-warning:hover,
html.dark-theme .table-hover tbody tr.table-danger:hover {
    color: #fff;
}

/* ============================================
   DARK THEME: LOG VIEWER / CODE DISPLAY
   Styles for the log file viewer using highlight.js
   ============================================ */

/* Log viewer container */
html.dark-theme #log-display-container pre {
    background-color: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

html.dark-theme #log-display-container pre code {
    color: #cdd6f4;
    background-color: transparent;
}

/* Override highlight.js stackoverflow-light with dark theme colors
   Using Catppuccin Mocha-inspired colors for readability */
html.dark-theme .hljs {
    background: #1e1e2e !important;
    color: #cdd6f4 !important;
}

/* Comments */
html.dark-theme .hljs-comment,
html.dark-theme .hljs-quote {
    color: #6c7086 !important;
    font-style: italic;
}

/* Keywords, tags */
html.dark-theme .hljs-keyword,
html.dark-theme .hljs-selector-tag,
html.dark-theme .hljs-addition {
    color: #cba6f7 !important;
}

/* Strings, values */
html.dark-theme .hljs-string,
html.dark-theme .hljs-meta .hljs-string,
html.dark-theme .hljs-regexp,
html.dark-theme .hljs-doctag {
    color: #a6e3a1 !important;
}

/* Numbers */
html.dark-theme .hljs-number,
html.dark-theme .hljs-literal {
    color: #fab387 !important;
}

/* Built-in, type */
html.dark-theme .hljs-built_in,
html.dark-theme .hljs-type,
html.dark-theme .hljs-class .hljs-title {
    color: #f9e2af !important;
}

/* Variables, attributes */
html.dark-theme .hljs-variable,
html.dark-theme .hljs-template-variable,
html.dark-theme .hljs-attr,
html.dark-theme .hljs-attribute {
    color: #89b4fa !important;
}

/* Functions */
html.dark-theme .hljs-function,
html.dark-theme .hljs-title {
    color: #89b4fa !important;
}

/* Section headers - useful for INI files */
html.dark-theme .hljs-section {
    color: #89dceb !important;
    font-weight: bold;
}

/* INI property names */
html.dark-theme .hljs-name {
    color: #f5c2e7 !important;
}

/* Symbols, bullets */
html.dark-theme .hljs-symbol,
html.dark-theme .hljs-bullet,
html.dark-theme .hljs-link {
    color: #f38ba8 !important;
}

/* Deletion/removal */
html.dark-theme .hljs-deletion {
    color: #f38ba8 !important;
    background-color: rgba(243, 139, 168, 0.15);
}

/* Emphasis */
html.dark-theme .hljs-emphasis {
    font-style: italic;
}

/* Strong */
html.dark-theme .hljs-strong {
    font-weight: bold;
}

/* Log-specific styling: Errors - make them stand out */
html.dark-theme #log-display-container .hljs-keyword:contains("ERROR"),
html.dark-theme #log-display-container pre code:contains("ERROR") {
    color: #f38ba8;
}

/* Log-specific styling: Warnings */
html.dark-theme #log-display-container pre code:contains("WARNING"),
html.dark-theme #log-display-container pre code:contains("WARN") {
    color: #f9e2af;
}

/* Scrollbar styling for log viewer */
html.dark-theme #log-display-container pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark-theme #log-display-container pre::-webkit-scrollbar-track {
    background: #11111b;
    border-radius: 6px;
}

html.dark-theme #log-display-container pre::-webkit-scrollbar-thumb {
    background: #45475a;
    border-radius: 6px;
}

html.dark-theme #log-display-container pre::-webkit-scrollbar-thumb:hover {
    background: #585b70;
}

/* Line numbers if present */
html.dark-theme .hljs-ln-numbers {
    color: #585b70 !important;
    border-right: 1px solid #313244 !important;
    padding-right: 10px !important;
}

/* Selection color in code blocks */
html.dark-theme #log-display-container pre ::selection,
html.dark-theme #log-display-container code ::selection {
    background-color: rgba(137, 180, 250, 0.3);
}

/* ============================================
   DARK THEME: AUTHENTICATION PAGES
   Login, Register, Password Reset, etc.
   ============================================ */

/* Authentication page background */
html.dark-theme .authentication-bg {
    background-color: #2a2e3a !important;
}

/* Auth page cards - dark background */
html.dark-theme .authentication-bg .card {
    background-color: #36394a !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Card header (purple logo area) - keep as is, it already looks good */
html.dark-theme .authentication-bg .card-header.bg-primary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card body */
html.dark-theme .authentication-bg .card-body {
    background-color: #36394a !important;
}

/* Text colors */
html.dark-theme .authentication-bg .text-dark-50,
html.dark-theme .authentication-bg h4.text-dark-50 {
    color: #e3eaef !important;
}

html.dark-theme .authentication-bg .text-black-50-muted,
html.dark-theme .authentication-bg p.text-black-50-muted {
    color: #aab8c5 !important;
}

/* Form labels */
html.dark-theme .authentication-bg .form-label,
html.dark-theme .authentication-bg label {
    color: #e3eaef !important;
}

/* Form inputs */
html.dark-theme .authentication-bg .form-control {
    background-color: #464a5c !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

html.dark-theme .authentication-bg .form-control::placeholder {
    color: #8b95a5 !important;
}

html.dark-theme .authentication-bg .form-control:focus {
    background-color: #505467 !important;
    border-color: #727cf5 !important;
    box-shadow: 0 0 0 0.15rem rgba(114, 124, 245, 0.25) !important;
    color: #fff !important;
}

/* Checkbox styling */
html.dark-theme .authentication-bg .custom-control-label {
    color: #e3eaef !important;
}

html.dark-theme .authentication-bg .custom-control-label::before {
    background-color: #464a5c !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-theme .authentication-bg .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #727cf5 !important;
    border-color: #727cf5 !important;
}

/* Links */
html.dark-theme .authentication-bg a.text-muted {
    color: #aab8c5 !important;
}

html.dark-theme .authentication-bg a.text-muted:hover {
    color: #727cf5 !important;
}

/* Bottom text section (Don't have an account, etc.) */
html.dark-theme .authentication-bg .row.mt-3 p.text-muted {
    color: #aab8c5 !important;
}

/* Footer text */
html.dark-theme .footer-alt {
    color: #8b95a5 !important;
}

html.dark-theme .footer-alt a {
    color: #aab8c5 !important;
}

html.dark-theme .footer-alt a:hover {
    color: #727cf5 !important;
}

/* Validation messages */
html.dark-theme .authentication-bg .text-danger {
    color: #f38ba8 !important;
}

/* Input group addons (if any) */
html.dark-theme .authentication-bg .input-group-text {
    background-color: #464a5c !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

/* ============================================
   DARK THEME: FORM CONTROLS (Dashboard-wide)
   For Configuration Editor, Mods tab, etc.
   ============================================ */

/* Text inputs, textareas, selects */
html.dark-theme .form-control {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

html.dark-theme .form-control::placeholder {
    color: #8b95a5 !important;
}

html.dark-theme .form-control:focus {
    background-color: #3a3f54 !important;
    border-color: rgba(114, 125, 245, 0.5) !important;
    box-shadow: 0 0 0 0.15rem rgba(114, 125, 245, 0.25) !important;
    color: #e3eaef !important;
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
    background-color: #2d3145 !important;
    color: #8b95a5 !important;
}

/* Input groups (prepend/append buttons) */
html.dark-theme .input-group-text {
    background-color: #464a5c !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

/* Select dropdowns */
html.dark-theme select.form-control,
html.dark-theme .form-select {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

html.dark-theme select.form-control option,
html.dark-theme .form-select option {
    background-color: #313548;
    color: #e3eaef;
}

/* Custom selects */
html.dark-theme .custom-select {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

/* ============================================
   DARK THEME: DATATABLES
   Table search, pagination, length selector, etc.
   ============================================ */

/* DataTables wrapper elements */
html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_processing,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: #aab8c5 !important;
}

/* DataTables length selector (Show X entries) */
html.dark-theme .dataTables_wrapper .dataTables_length select {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

/* DataTables search input */
html.dark-theme .dataTables_wrapper .dataTables_filter input {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

html.dark-theme .dataTables_wrapper .dataTables_filter input::placeholder {
    color: #8b95a5 !important;
}

html.dark-theme .dataTables_wrapper .dataTables_filter input:focus {
    background-color: #3a3f54 !important;
    border-color: rgba(114, 125, 245, 0.5) !important;
    box-shadow: 0 0 0 0.15rem rgba(114, 125, 245, 0.25) !important;
}

/* DataTables pagination buttons */
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: transparent !important;
    border-color: rgba(114, 125, 245, 0.4) !important;
    color: #c5c9fb !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(114, 125, 245, 0.25) !important;
    border-color: rgba(114, 125, 245, 0.6) !important;
    color: #fff !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #727cf5 0%, #6c5dd3 100%) !important;
    border-color: #727cf5 !important;
    color: #fff !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background-color: transparent !important;
    border-color: rgba(114, 125, 245, 0.2) !important;
    color: #5c6577 !important;
    cursor: not-allowed;
}

/* Bootstrap pagination (First/Previous/Next/Last and page numbers) */
html.dark-theme .pagination {
    background-color: transparent !important;
}

html.dark-theme .pagination-rounded {
    background-color: transparent !important;
}

html.dark-theme .pagination .page-item {
    background-color: transparent !important;
}

html.dark-theme .pagination .page-link {
    background-color: transparent !important;
    border-color: rgba(114, 125, 245, 0.4) !important;
    color: #c5c9fb !important;
}

html.dark-theme .pagination .page-link:hover {
    background-color: rgba(114, 125, 245, 0.25) !important;
    border-color: rgba(114, 125, 245, 0.6) !important;
    color: #fff !important;
}

html.dark-theme .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #727cf5 0%, #6c5dd3 100%) !important;
    border-color: #727cf5 !important;
    color: #fff !important;
}

html.dark-theme .pagination .page-item.disabled .page-link {
    background-color: rgba(114, 125, 245, 0.1) !important;
    border-color: rgba(114, 125, 245, 0.2) !important;
    color: #5c6577 !important;
    cursor: not-allowed;
}

/* DataTables table header sorting */
html.dark-theme table.dataTable thead th {
    border-bottom-color: #3d4259 !important;
}

html.dark-theme table.dataTable tbody tr {
    background-color: transparent;
}

html.dark-theme table.dataTable tbody td {
    border-top-color: #3d4259 !important;
}

/* "No data available" message */
html.dark-theme .dataTables_wrapper .dataTables_empty,
html.dark-theme table.dataTable td.dataTables_empty {
    color: #8b95a5 !important;
}

/* ============================================
   DARK THEME: DROPZONE
   File upload drop areas
   ============================================ */

html.dark-theme .dropzone {
    background-color: #2d3145 !important;
    border: 2px dashed rgba(114, 125, 245, 0.4) !important;
    color: #aab8c5 !important;
}

html.dark-theme .dropzone:hover {
    background-color: rgba(114, 125, 245, 0.08) !important;
    border-color: rgba(114, 125, 245, 0.6) !important;
}

html.dark-theme .dropzone .dz-message {
    color: #aab8c5 !important;
}

html.dark-theme .dropzone .dz-message span {
    color: #aab8c5 !important;
}

/* Custom dropzone styling for mod importer */
html.dark-theme .dropzone-area,
html.dark-theme [class*="drop-zone"],
html.dark-theme [class*="dropArea"],
html.dark-theme .file-drop-zone {
    background-color: #2d3145 !important;
    border: 2px dashed rgba(114, 125, 245, 0.4) !important;
    color: #aab8c5 !important;
}

html.dark-theme .dropzone-area:hover,
html.dark-theme [class*="drop-zone"]:hover,
html.dark-theme [class*="dropArea"]:hover,
html.dark-theme .file-drop-zone:hover {
    background-color: rgba(114, 125, 245, 0.08) !important;
    border-color: rgba(114, 125, 245, 0.6) !important;
}

/* Ensure upload text is visible */
html.dark-theme .dropzone h4,
html.dark-theme .dropzone h5,
html.dark-theme .dropzone p,
html.dark-theme .dropzone-area h4,
html.dark-theme .dropzone-area h5,
html.dark-theme .dropzone-area p {
    color: #aab8c5 !important;
}

/* Link text in dropzone */
html.dark-theme .dropzone a,
html.dark-theme .dropzone-area a {
    color: #f38ba8 !important;
}

/* ============================================
   DARK THEME: NUMBER SPINNER INPUTS
   For inputs with +/- buttons (touchspin, etc.)
   ============================================ */

html.dark-theme .bootstrap-touchspin .form-control {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

html.dark-theme .bootstrap-touchspin .input-group-btn .btn,
html.dark-theme .bootstrap-touchspin-up,
html.dark-theme .bootstrap-touchspin-down {
    background-color: rgba(114, 125, 245, 0.25) !important;
    border-color: rgba(114, 125, 245, 0.4) !important;
    color: #c5c9fb !important;
}

html.dark-theme .bootstrap-touchspin .input-group-btn .btn:hover,
html.dark-theme .bootstrap-touchspin-up:hover,
html.dark-theme .bootstrap-touchspin-down:hover {
    background-color: rgba(114, 125, 245, 0.45) !important;
    border-color: rgba(114, 125, 245, 0.6) !important;
    color: #fff !important;
}

/* Generic input-group buttons (the +/- buttons shown in screenshots) */
html.dark-theme .input-group .btn-primary,
html.dark-theme .input-group .btn-secondary {
    /* These already have proper colors from Bootstrap, just ensure they work */
}

/* Ensure input-group form controls match */
html.dark-theme .input-group .form-control {
    background-color: #3a3f54 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e3eaef !important;
}

/* Configuration editor +/- buttons - blue tinted by default */
html.dark-theme .input-group-prepend .btn,
html.dark-theme .input-group-append .btn {
    background-color: rgba(114, 125, 245, 0.25) !important;
    border-color: rgba(114, 125, 245, 0.4) !important;
    color: #c5c9fb !important;
}

html.dark-theme .input-group-prepend .btn:hover,
html.dark-theme .input-group-append .btn:hover {
    background-color: rgba(114, 125, 245, 0.45) !important;
    border-color: rgba(114, 125, 245, 0.6) !important;
    color: #fff !important;
}

/* Override for specific button variants that should keep their colors */
html.dark-theme .input-group-prepend .btn-primary,
html.dark-theme .input-group-append .btn-primary,
html.dark-theme .input-group-prepend .btn-success,
html.dark-theme .input-group-append .btn-success,
html.dark-theme .input-group-prepend .btn-danger,
html.dark-theme .input-group-append .btn-danger,
html.dark-theme .input-group-prepend .btn-warning,
html.dark-theme .input-group-append .btn-warning,
html.dark-theme .input-group-prepend .btn-info,
html.dark-theme .input-group-append .btn-info {
    /* Let these keep their Bootstrap colors */
    background-color: unset !important;
    border-color: unset !important;
    color: unset !important;
}

/* ============================================
   NAV-BORDERED TABS: ALIGNMENT FIX
   Ensures underline aligns correctly when tabs have multi-line text
   This applies to both light and dark themes
   ============================================ */

/* Make nav-items stretch to equal height */
.nav-tabs.nav-bordered {
    display: flex !important;
    align-items: stretch !important;
}

.nav-tabs.nav-bordered .nav-item {
    display: flex !important;
}

/* Make nav-links fill full height and use flexbox for content alignment */
.nav-tabs.nav-bordered .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    text-align: center !important;
}

/* ============================================
   DARK THEME: NAV TABS & PILLS
   For Configuration Editor tabs
   ============================================ */

html.dark-theme .nav-tabs {
    border-bottom-color: #3d4259 !important;
}

html.dark-theme .nav-tabs .nav-link {
    background-color: transparent;
    border-color: transparent;
    color: #aab8c5 !important;
}

html.dark-theme .nav-tabs .nav-link:hover {
    border-color: #3d4259 !important;
    color: #e3eaef !important;
}

html.dark-theme .nav-tabs .nav-link.active {
    background-color: #313548 !important;
    border-color: #3d4259 #3d4259 #313548 !important;
    color: #ffffff !important;
}

/* Nav-bordered tabs use an underline style instead of box borders */
html.dark-theme .nav-tabs.nav-bordered {
    border-bottom-color: #3d4259 !important;
}

html.dark-theme .nav-tabs.nav-bordered .nav-link {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: #aab8c5 !important;
}

html.dark-theme .nav-tabs.nav-bordered .nav-link:hover {
    color: #e3eaef !important;
}

html.dark-theme .nav-tabs.nav-bordered .nav-link.active,
html.dark-theme .nav-tabs.nav-bordered li a.active {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid #727cf5 !important;
    color: #ffffff !important;
}

html.dark-theme .nav-pills .nav-link {
    background-color: #3a3f54;
    color: #aab8c5;
}

html.dark-theme .nav-pills .nav-link:hover {
    background-color: rgba(114, 125, 245, 0.15);
    color: #e3eaef;
}

html.dark-theme .nav-pills .nav-link.active {
    background-color: #727cf5;
    color: #fff;
}

/* Tab content area */
html.dark-theme .tab-content {
    background-color: transparent;
}

html.dark-theme .tab-pane {
    background-color: transparent;
}

/* ============================================
   DARK THEME: SERVICE CARD DIVIDERS
   Dedicated server card divider (between header
   and game server table) and game server card
   button dividers (between Start, Restart, Modify)
   use #464f5b to match data-table borders.
   ============================================ */
html.dark-theme .ds-card-divider {
    border-color: #464f5b !important;
}

html.dark-theme [id^="server-action-container"] .col-4 {
    border-color: #464f5b !important;
}