/* ==========================================================================
   SpeedLand Admin Panel — Navy & Blue theme override
   Loaded after app.css on every admin page (via each role's extra-admin/head.php)
   to re-skin the shared teal theme without touching the vendor app.css file.
   ========================================================================== */

:root {
    --sl-navy-900: #0b1d3a;
    --sl-navy-800: #0f2c59;
    --sl-blue-700: #1450a3;
    --sl-blue-600: #1a63c4;
    --sl-blue-500: #2f7de1;
}

/* ---------------- Font ---------------- */

body, .btn, .form-control, table, h1, h2, h3, h4, h5, h6,
.side-nav, .header, .card, .dropdown-menu, .modal-content {
    font-family: 'Poppins', 'Barlow', 'Segoe UI', Arial, sans-serif;
}

body {
    font-family: 'Poppins', 'Barlow', 'Segoe UI', Arial, sans-serif;
}

/* ---------------- Sidebar ---------------- */

.side-nav {
    background: linear-gradient(180deg, var(--sl-navy-900) 0%, var(--sl-navy-800) 100%);
    background-color: var(--sl-navy-900);
}

.side-nav-dark .side-nav {
    background: linear-gradient(180deg, var(--sl-navy-900) 0%, var(--sl-navy-800) 100%);
    background-color: var(--sl-navy-900);
}

/* Active sidebar item highlight (set via .act / .activecl in myFunction() on each page) */
.act {
    background: var(--sl-blue-500) !important;
    color: #ffffff !important;
}

.activecl {
    color: #ffffff !important;
}

/* ---------------- Header ---------------- */

.header-success-gradient .header {
    background: linear-gradient(120deg, var(--sl-navy-800) 0%, var(--sl-blue-600) 100%);
}

.header-success-gradient .side-nav .side-nav-inner .side-nav-menu li.dropdown > a:hover .icon-holder,
.header-success-gradient .side-nav .side-nav-inner .side-nav-menu li.dropdown > a:focus .icon-holder {
    color: var(--sl-blue-500);
}

.header-success-gradient .side-nav .side-nav-inner .side-nav-menu li.dropdown > a:hover .icon-holder i:before,
.header-success-gradient .side-nav .side-nav-inner .side-nav-menu li.dropdown > a:focus .icon-holder i:before {
    background: linear-gradient(120deg, var(--sl-blue-600) 0%, var(--sl-blue-500) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-success-gradient .side-nav .side-nav-inner .side-nav-menu li.dropdown.open > a .icon-holder {
    color: var(--sl-blue-500);
}

.header-success-gradient .side-nav .side-nav-inner .side-nav-menu li.dropdown.open > a .icon-holder i:before {
    background: linear-gradient(120deg, var(--sl-blue-600) 0%, var(--sl-blue-500) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------- Links / text / badges ---------------- */

a { color: var(--sl-blue-600); }
a:hover, a:focus { color: var(--sl-navy-800); }

.text-primary { color: var(--sl-blue-600) !important; }
.bg-primary { background-color: var(--sl-blue-600) !important; }
.badge-primary { background-color: var(--sl-blue-600); }
.badge-primary[href]:focus, .badge-primary[href]:hover { background-color: var(--sl-blue-500); }

/* ---------------- Buttons ---------------- */

.btn-primary {
    background-color: var(--sl-blue-600);
    border-color: var(--sl-blue-600);
    color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--sl-navy-800);
    border-color: var(--sl-navy-800);
}

.show > .dropdown-toggle.btn-primary {
    background-color: var(--sl-navy-800);
    border-color: var(--sl-navy-800);
}

.btn-gradient-success,
.btn-gradient-success:not([disabled]):not(.disabled):active,
.btn-gradient-success.active,
.btn-gradient-success:active {
    background: linear-gradient(120deg, var(--sl-blue-600) 0%, var(--sl-navy-800) 100%);
    color: #ffffff;
}

.btn-gradient-success:hover, .btn-gradient-success:focus {
    background: linear-gradient(120deg, var(--sl-blue-600) 0%, var(--sl-navy-800) 100%);
    opacity: 0.85;
    color: #ffffff;
}

/* ---------------- Sidebar hover / submenu readability ----------------
   app.css was built for a lighter teal sidebar, so it deliberately turns
   nav text/icons BLACK on hover (and submenu text is black by default,
   via the generic .dropdown-menu > li > a rule) — invisible on our dark
   navy sidebar. Force these back to white/light and add a subtle blue
   hover highlight so hover state is still visible without relying on
   text color alone. */

.side-nav .side-nav-inner .side-nav-menu li a:hover,
.side-nav .side-nav-inner .side-nav-menu li a:focus {
    color: #ffffff !important;
    background-color: rgba(47, 125, 225, 0.25);
}

.side-nav .side-nav-inner .side-nav-menu li a:hover .icon-holder,
.side-nav .side-nav-inner .side-nav-menu li a:focus .icon-holder,
.side-nav .side-nav-inner .side-nav-menu li a:hover .title,
.side-nav .side-nav-inner .side-nav-menu li a:focus .title,
.side-nav .side-nav-inner .side-nav-menu li a:hover .arrow,
.side-nav .side-nav-inner .side-nav-menu li a:focus .arrow {
    color: #ffffff !important;
}

.side-nav .side-nav-inner .side-nav-menu li.dropdown.open > a .icon-holder,
.side-nav .side-nav-inner .side-nav-menu li.dropdown.open > a .title,
.side-nav .side-nav-inner .side-nav-menu li.dropdown.open > a .arrow {
    color: #ffffff !important;
}

/* Nested submenu items (e.g. under Bungalow / Projects / Staff) */
.side-nav .side-nav-inner .side-nav-menu > li.dropdown ul.dropdown-menu > li > a {
    color: #d7e3f7 !important;
}

.side-nav .side-nav-inner .side-nav-menu > li.dropdown ul.dropdown-menu > li > a:hover,
.side-nav .side-nav-inner .side-nav-menu > li.dropdown ul.dropdown-menu > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(47, 125, 225, 0.25) !important;
}