/* ============================================================
   Decathlon brand theme override
   Logo blue: #3644BA (rgb 54, 68, 186)
   Loaded AFTER build/css/styles.css so these rules win.
   ============================================================ */

:root,
[data-color-theme="Blue_Theme"] {
    --bs-primary: #3644BA;
    --bs-primary-rgb: 54, 68, 186;
    --bs-link-color: #3644BA;
    --bs-link-hover-color: #2a36a0;
    --bs-link-color-rgb: 54, 68, 186;
}

/* Bootstrap utility classes that hard-code primary */
.bg-primary,
.bg-primary-subtle .bg-primary { background-color: #3644BA !important; }
.text-primary { color: #3644BA !important; }
.border-primary { border-color: #3644BA !important; }

/* Buttons — use direct properties with !important to beat Modernize's
   high-specificity primary rule. CSS variables alone aren't enough. */
.btn-primary,
.btn.btn-primary,
.btn-sm.btn-primary,
.btn-lg.btn-primary {
    background-color: #3644BA !important;
    border-color: #3644BA !important;
    color: #ffffff !important;
    --bs-btn-bg: #3644BA;
    --bs-btn-border-color: #3644BA;
    --bs-btn-hover-bg: #2a36a0;
    --bs-btn-hover-border-color: #25318f;
    --bs-btn-active-bg: #25318f;
    --bs-btn-active-border-color: #1f297a;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-sm.btn-primary:hover,
.btn-lg.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #2a36a0 !important;
    border-color: #25318f !important;
    color: #ffffff !important;
}
.btn-outline-primary,
.btn.btn-outline-primary,
.btn-sm.btn-outline-primary {
    color: #3644BA !important;
    border-color: #3644BA !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #3644BA !important;
    border-color: #3644BA !important;
    color: #ffffff !important;
}

/* Modernize sidebar — active link background */
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link.active,
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link.active:hover,
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link[aria-expanded="true"]:not(.collapsed) {
    background-color: #3644BA !important;
    color: #ffffff !important;
}
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link:hover {
    color: #3644BA;
}

/* Header active nav link */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.text-primary { color: #3644BA !important; }

/* Forms — focus ring + active checkbox */
.form-check-input {
    border-color: #9aa3c2;
}
.form-check-input:checked {
    background-color: #3644BA;
    border-color: #3644BA;
}
.form-control:focus,
.form-select:focus {
    border-color: #3644BA;
    box-shadow: 0 0 0 0.25rem rgba(54, 68, 186, 0.25);
}

/* Dropdown menus — always on card surface, not page background */
.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e3e7ee;
}
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #202936;
    border: 1px solid #2a3447;
}

/* =============================================================
   SweetAlert2 — brand override
   Buttons use Bootstrap classes via DecaSwal mixin (buttonsStyling:false).
   Only icons, progress bar, and dark mode need explicit overrides here.
   ============================================================= */

/* Remove SweetAlert's filter:brightness on hover — Bootstrap handles it */
.swal2-styled:hover { filter: none !important; }

/* Question icon — brand blue (used for confirmations) */
.swal2-icon.swal2-question {
    border-color: #3644BA !important;
    color: #3644BA !important;
}

/* Info icon — brand blue (used for logout toast) */
.swal2-icon.swal2-info {
    border-color: #3644BA !important;
    color: #3644BA !important;
}

/* Timer progress bar — brand blue */
.swal2-timer-progress-bar {
    background-color: #3644BA !important;
}

/* Dark mode — popup surface matches card background */
[data-bs-theme="dark"] .swal2-popup {
    background-color: #202936 !important;
    color: rgba(255,255,255,0.9) !important;
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
    color: rgba(255,255,255,0.9) !important;
}

/* Collapse chevron rotation */
[aria-expanded="true"] .collapse-chevron  { transform: rotate(180deg); }
[aria-expanded="false"] .collapse-chevron { transform: rotate(0deg); }
.collapse-chevron { transition: transform 0.2s ease; }

/* Nav tabs — active tab matches brand primary */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
    color: #ffffff !important;
    background-color: #3644BA !important;
    border-color: #3644BA #3644BA transparent !important;
}
.nav-tabs .nav-link {
    color: #3644BA;
}
.nav-tabs .nav-link:hover:not(.active) {
    color: #2a36a0;
    border-color: transparent;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-link.active:hover {
    color: #ffffff !important;
    background-color: #3644BA !important;
    border-color: #3644BA #3644BA transparent !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active) {
    color: #8b95ee;
}

/* Auth pages background (login / register / forgot / reset) */
.auth-bg {
    background:
        linear-gradient(135deg, rgba(54, 68, 186, 0.78) 0%, rgba(15, 23, 42, 0.82) 100%),
        url('/image/deca-bilda.avif') center center / cover no-repeat;
    background-attachment: fixed;
}

/* Badges + alerts that use primary */
.badge.bg-primary { background-color: #3644BA !important; }
.alert-primary {
    --bs-alert-bg: #e2e5f5;
    --bs-alert-border-color: #b3baee;
    --bs-alert-color: #21297a;
}

/* Links inside text */
a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item) {
    color: #3644BA;
}
a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item):hover {
    color: #2a36a0;
}

/* ============================================================
   Dark mode overrides
   Brand blue #3644BA is too dark on dark backgrounds.
   Use a lighter tint #8b95ee for text/links/headers.
   Solid backgrounds (buttons, badges, sidebar active) stay
   on the brand blue since they have white text on top.
   ============================================================ */
[data-bs-theme="dark"] {
    --bs-link-color: #8b95ee;
    --bs-link-hover-color: #a5acef;
    --bs-link-color-rgb: 139, 149, 238;
}

[data-bs-theme="dark"] .text-primary { color: #8b95ee !important; }
[data-bs-theme="dark"] .border-primary { border-color: #8b95ee !important; }

[data-bs-theme="dark"] .alert-primary {
    --bs-alert-bg: #1e2348;
    --bs-alert-border-color: #3644BA;
    --bs-alert-color: #c9cdf3;
}
[data-bs-theme="dark"] .alert-success {
    --bs-alert-bg: #0e2f1d;
    --bs-alert-border-color: #1f6f43;
    --bs-alert-color: #a6e6c1;
}
[data-bs-theme="dark"] .alert-warning {
    --bs-alert-bg: #3a2a05;
    --bs-alert-border-color: #8a6510;
    --bs-alert-color: #f6d77a;
}
[data-bs-theme="dark"] .alert-danger {
    --bs-alert-bg: #3a0f12;
    --bs-alert-border-color: #8a2129;
    --bs-alert-color: #f1a0a6;
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-nav .nav-link.text-primary { color: #8b95ee !important; }

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn.btn-outline-primary,
[data-bs-theme="dark"] .btn-sm.btn-outline-primary {
    color: #8b95ee !important;
    border-color: #8b95ee !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus,
[data-bs-theme="dark"] .btn-outline-primary:active {
    background-color: #8b95ee !important;
    border-color: #8b95ee !important;
    color: #1a1f3a !important;
}

[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item) {
    color: #8b95ee;
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item):hover {
    color: #a5acef;
}

/* Inactive nav links — Bootstrap defaults to muted/dark in dark mode.
   Force a readable light-grey so the topbar nav stays legible. */
[data-bs-theme="dark"] .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}
[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
    color: #ffffff;
}

/* Table column headers — inherit from --bs-body-color in dark mode */
[data-bs-theme="dark"] .table > thead {
    color: rgba(255, 255, 255, 0.9);
}

/* Card title + body text */
[data-bs-theme="dark"] .card-title { color: rgba(255, 255, 255, 0.95); }

/* Page background contrast — both themes default to having body and card
   the same color, so cards disappear. Tone the body down so cards pop. */

/* Light mode: soft grey page, white cards */
:root {
    --bs-body-bg: #dde3ec;
    --bs-body-bg-rgb: 221, 227, 236;
}
body,
.body-wrapper,
.page-wrapper {
    background-color: #dde3ec;
}
.card,
.page-wrapper .card,
.body-wrapper .card {
    --bs-card-bg: #ffffff;
    background-color: #ffffff;
    border: 1px solid #e3e7ee;
}
/* Table rows default to body-bg in Modernize — reset to transparent */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #e3e7ee;
}
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #2a3447;
}

/* Standalone surface — avoids Bootstrap card variable conflicts */
.deca-surface {
    background-color: #ffffff;
    border: 1px solid #e3e7ee;
    border-radius: 7px;
}
.deca-surface.deca-table {
    overflow: hidden;
}
[data-bs-theme="dark"] .deca-surface {
    background-color: #202936;
    border-color: #2a3447;
}

/* Header + sidebar stay white in light mode regardless of body bg */
.topbar,
.left-sidebar {
    background-color: #ffffff;
}

/* Dark mode: deeper navy page, lifted card surface */
[data-bs-theme="dark"] {
    --bs-body-bg: #0a0d15;
    --bs-body-bg-rgb: 10, 13, 21;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .body-wrapper,
[data-bs-theme="dark"] .page-wrapper {
    background-color: #0a0d15;
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .page-wrapper .card,
[data-bs-theme="dark"] .body-wrapper .card {
    --bs-card-bg: #202936;
    background-color: #202936;
    border: 1px solid #2a3447;
}
/* Header + sidebar dark surface in dark mode */
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .left-sidebar {
    background-color: #202936;
}

/* Default profile avatar — two image variants (light/dark) rendered
   together; CSS shows the right one based on the active theme. */
.dp-light, .dp-dark { object-fit: cover; }
.dp-dark { display: none; }
[data-bs-theme="dark"] .dp-light { display: none; }
[data-bs-theme="dark"] .dp-dark { display: inline-block; }

/* Preloader fade-out — JS adds .preloader-fade-out, CSS animates opacity */
.preloader {
    transition: opacity 0.5s ease;
    opacity: 1;
    /* center the loader image both axes */
    display: flex;
    align-items: center;
    justify-content: center;
}
.preloader.preloader-fade-out {
    opacity: 0;
    pointer-events: none;
}
/* Bigger Decathlon loader — Modernize default is 40px which feels lost on screen */
.preloader .lds-ripple {
    width: 96px !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Dashboard section headers — matches sidebar nav-small-cap style
   ============================================================ */
.dash-section {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8f9bb3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dash-section:first-child,
.dash-section.dash-section-first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
[data-bs-theme="dark"] .dash-section {
    border-top-color: rgba(255, 255, 255, 0.07);
    color: #6c7a96;
}

/* Disable Modernize's hover-open behavior on the profile dropdown.
   Modernize ships:
     .topbar .navbar .navbar-nav .nav-item.dropdown:hover .dropdown-menu { display: block }
   We need at least matching specificity (0,0,7,0). Using the same
   ancestor chain plus our marker class .profile-dropdown-click. */
.topbar .navbar .navbar-nav .nav-item.dropdown.profile-dropdown-click:hover .dropdown-menu:not(.show) {
    display: none;
}
/* Also unset the hover-color flip on the nav-link so it doesn't blink */
.topbar .navbar .navbar-nav .nav-item.dropdown.profile-dropdown-click:hover .nav-link {
    color: inherit;
}