/* ========================================
   DEWATO CUSTOM STYLES FOR TABLER
   ======================================== */

/* Tabler CSS-Variablen überschreiben */
/* ================================ */
:root {
    /* Primary Farben anpassen */

    --tblr-primary-fg: #4299e1;

    /* Beispiel: Weitere Tabler-Variablen
    --tblr-primary: #25699b;

    

    --tblr-secondary: #6c757d;
    --tblr-success: #28a745;
    --tblr-danger: #dc3545;
    --tblr-warning: #ffc107;
    --tblr-info: #17a2b8;
    --tblr-light: #f8f9fa;
    --tblr-dark: #343a40;
    */
}

/* GEÄNDERT: Tab Styles für Dark Mode und Light Mode */
/* ================================================= */

/* Light Mode Tab Styles - subtil dunklere Ränder */
:root:not([data-bs-theme="dark"]) .nav-tabs {
    border-bottom: 2px solid var(--tblr-nav-tabs-border-color);
}

:root:not([data-bs-theme="dark"]) .nav-tabs .nav-link {
    border-color: rgba(0, 0, 0, 0.10);
}

:root:not([data-bs-theme="dark"]) .nav-tabs .nav-link:hover,
:root:not([data-bs-theme="dark"]) .nav-tabs .nav-link:focus {
    border-color: rgba(0, 0, 0, 0.18);
}

:root:not([data-bs-theme="dark"]) .nav-tabs .nav-link.active {
    border-color: rgba(0, 0, 0, 0.18);
    border-bottom-color: #ffffff;
    color: var(--tblr-primary, #206bc4);
}

/* Dark Mode Tab Styles */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom: 2px solid var(--tblr-nav-tabs-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.125);
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--tblr-dark-mode-bg, #1e293b);
    border-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: var(--tblr-dark-mode-bg, #1e293b);
    color: #ffffff;
}

/* Dark Mode spezifische Tab-Content Hintergründe */
[data-bs-theme="dark"] .tab-content {
    background-color: transparent;
}

[data-bs-theme="dark"] .tab-pane {
    background-color: transparent;
}

.content-section {
    background: #FFFFFF;
}

/* GEÄNDERT: Dark Mode Content Section */
[data-bs-theme="dark"] .content-section {
    background: transparent;
}

/* Theme-spezifische Navbar Styles */
/* ================================ */

/* Light Theme - Navbar Styling (nur wenn KEIN data-bs-theme="dark" gesetzt ist) */
:root:not([data-bs-theme="dark"]) .navbar {
    background-color: #25699b;
    color: #ffffff;
}

/* Weiße Links in der Navbar für Light Theme (aber NICHT in Dropdowns) */
:root:not([data-bs-theme="dark"]) .navbar a:not(.dropdown-menu a) {
    color: #ffffff !important;
}


/* DataTables  */
/* ================================ */
.dataTables_length {
    margin-left: 1rem !important;
    padding-bottom: .5em;
}

/* Auch für das Suchfeld rechts */
.dataTables_filter {
    margin-right: 1rem !important;
}

/*  Abstand Zeige 1 bis 10 von 422 Einträgen   */
div.dataTables_wrapper div.dataTables_info {
    padding-top: .65em;
    padding-bottom: .65em;
    padding-left: 1em;
}

/*  Abstand Pagination */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    padding-top: .2em;
    padding-bottom: .5em;
    padding-left: 1em;
    padding-right: 1em;
}

/* Control Spalte für ausklappbare Zeilen */
.details-control {
    text-align: center !important;
}


.card-header-bg {
    color: rgba(77, 125, 161, 0.97);
    background-color: var(--tblr-blue-lt);
}


.bg-table-card-header {
    color: rgba(77, 125, 161, 0.97);
    background-color: var(--tblr-blue-lt);
}

/* Für die Cards in der extendes Row einer Tabelle */
.bg-table-inner-card-header {
    padding: 0.5rem;
    color: rgba(77, 125, 161, 0.97);
    background-color: var(--tblr-blue-lt);
}


.card-title-table {
    display: block;
    margin: 0 0 0rem;
    font-size: 0.7rem;
    font-weight: var(--tblr-font-weight-medium);
    color: inherit;
    line-height: 0.7rem;
}


/* Symbol-Liste ohne Bullet-Points */
/* ================================ */
.symbol-list,
.symbol-list ul,
ul.symbol-list {
    list-style: none !important;
    padding-left: 0 !important;
}

.symbol-list li {
    list-style: none !important;
    padding-left: 0 !important;
}


.bg-success {
    opacity: 0.6;
    color: #ffffff !important;
}

.bg-danger {
    opacity: 0.6;
    color: #ffffff !important;
}

.bg-warning {
    opacity: 0.6;
    color: #ffffff !important;
}

.bg-secondary {
    opacity: 0.6;
    color: #ffffff !important;
}

.bg-primary {
    opacity: 0.6;
    color: #ffffff !important;
}


/* Queue Badge Colors  */
/* =================== */
.bg-q-high {
    background-color: #fee2e2 !important; /* Light Red */
    color: #dc2626 !important;
}

.bg-q-higher {
    background-color: #fed7aa !important; /* Light Orange */
    color: #ea580c !important;
}

.bg-q-default {
    background-color: #dbeafe !important; /* Light Blue */
    color: #2563eb !important;
}

.bg-q-long {
    background-color: #cffafe !important; /* Light Cyan */
    color: #0891b2 !important;
}

.bg-q-lower {
    background-color: #e9d5ff !important; /* Light Purple */
    color: #9333ea !important;
}

.bg-q-low {
    background-color: #f3f4f6 !important; /* Light Gray */
    color: #6b7280 !important;
}

.bg-q-backtest {
    background-color: #dcfce7 !important; /* Light Green */
    color: #16a34a !important;
}


/* Queue Distribution Table Styling (kompakte Tabelle) */
/* ==================================================== */
#queueDistributionTable {
    margin-bottom: 0 !important;
}

#queueDistributionTable th {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

#queueDistributionTable td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

#queueDistributionTable .progress {
    height: 4px;
}

#queueDistributionTable .progress-bar {
    transition: width 0.3s ease;
}

#queueDistributionTable .badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Button Größe  */
/* ================================ */

.btn-sm, .btn-group-sm > .btn {
    --tblr-btn-line-height: 1.2rem;
}

.btn-list .form-check {
    margin-bottom: 0;
}

.btn-primary {


    --tblr-btn-color: #ffffff;
    --tblr-btn-bg: #638bb1;

}


/* navbar-toggler */
/* ================================ */
.navbar-toggler-icon {
    background: rgb(242 244 247);
}


/* Alert Styling - Transparenter Hintergrund mit weißer Schrift */
/* ================================ */
.alert {
    --tblr-alert-bg: color-mix(in srgb, var(--tblr-alert-color) 100%, transparent);
    color: #ffffff !important;
}


/* UTC Clock Styling */
/* ================================ */
.utc-clock {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* UTC Clock für Dark Theme */
[data-bs-theme="dark"] .utc-clock {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Chart Trades (VectorBT Trades mit Indikatoren) */
/* ================================ */
.modebar {
    top: -10px !important;
    right: 80px !important;
    left: auto !important;
}



/* Mobile Menü - Größere Schrift für bessere Lesbarkeit */
/* ===================================================== */

/* Mobile Geräte (bis 767px) - Smartphone Portrait/Landscape */
@media (max-width: 767.98px) {
    .navbar-nav .nav-link {
        --tblr-nav-link-font-size: 1.1rem; /* GEÄNDERT: Von 0.875rem auf 1.1rem erhöht */
        font-size: var(--tblr-nav-link-font-size) !important;
        padding: 0.75rem 1rem; /* GEÄNDERT: Mehr Padding für bessere Touch-Targets */
        line-height: 1.3; /* GEÄNDERT: Bessere Zeilenhöhe für Lesbarkeit */
    }

    /* Menütitel (z.B. "Dashboard", "Exchanges") */
    .navbar-nav .nav-link-title {
        font-size: 1.1rem !important; /* GEÄNDERT: Konsistente Schriftgröße */
        font-weight: 500 !important; /* GEÄNDERT: Etwas fetter für bessere Sichtbarkeit */
    }

    /* Icons im mobilen Menü etwas größer */
    .navbar-nav .nav-link-icon {
        width: 20px !important; /* GEÄNDERT: Von 16px auf 20px */
        height: 20px !important;
        margin-right: 0.75rem !important; /* GEÄNDERT: Mehr Abstand zum Text */
    }

    /* Dropdown-Menüs im mobilen Bereich */
    .navbar-nav .dropdown-menu .dropdown-item {
        font-size: 1rem !important; /* GEÄNDERT: Etwas größer für Dropdown-Items */
        padding: 0.75rem 1.5rem !important; /* GEÄNDERT: Mehr Padding für Touch-Freundlichkeit */
    }
}


/* Sehr kleine Geräte (bis 575px) - Smartphone Portrait */
@media (max-width: 575.98px) {
    .navbar-nav .nav-link {
        --tblr-nav-link-font-size: 1.15rem; /* GEÄNDERT: Noch größer für sehr kleine Bildschirme */
        font-size: var(--tblr-nav-link-font-size) !important;
        padding: 0.875rem 1rem; /* GEÄNDERT: Noch mehr Padding */
    }

    .navbar-nav .nav-link-title {
        font-size: 1.15rem !important; /* GEÄNDERT: Konsistente größere Schrift */
    }
}


@media (min-width: 992px) {
    :root, :host {
        margin-left: 0;
    }
}

@media (max-width: 449px) {
    /* mobile styles hier */
    /* Symbol-Liste ohne Bullet-Points */
    /* ================================ */
    .symbol-list,
    .symbol-list ul,
    ul.symbol-list {
        list-style: none !important;
        padding-left: 0 !important;
    }

    .symbol-list li {
        list-style: none !important;
        padding-left: 0px !important;
        padding-top: 10px
    }


    .card-body {
        --tblr-card-spacer-x: 0.4em;

    }
}


/* ===================================================================
   FLASH ALERT AUTO-DISMISS SYSTEM (VEREINFACHT)
   =================================================================== */

/* Flash Alert Auto-Dismiss Verbesserungen */
.alert.alert-dismissible {
    /* Einfache Transition nur für notwendige Eigenschaften */
    transition: opacity 0.25s ease-out;
}

/* Accessibility: Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .alert.alert-dismissible {
        transition: opacity 0.1s ease-out;
    }
}