/* ============================================================
   Starfire Design Studio — Brand Color Tokens
   Derived from logo, banners, and brand assets in /assets/
   ============================================================

   PALETTE REFERENCE
   -----------------
   Space Black    #08080F   deep void background
   Space Dark     #10101E   secondary background / navbar
   Space Mid      #1A1A2E   card / panel surfaces
   Starfire Blue  #1B5FCC   primary blue (logo upper gradient)
   Blue Light     #4A8AEE   hover / lighter blue accent
   Nebula Teal    #0099AA   from Ultra Starfire planet glow
   Starfire Red   #C41020   primary crimson (logo lower gradient)
   Red Dark       #880010   deep maroon (banner backgrounds)
   Flame Orange   #E84400   fire accent (logo-header star)
   Star White     #FFFFFF   pure white (logo highlights)
   Star Silver    #C8D4E8   light text / secondary
   Star Gray      #6A7A90   muted / disabled text
   Gold Accent    #C49020   spacecraft markings / trim
   ============================================================ */

:root {
    --sf-space-black:   #08080F;
    --sf-space-dark:    #10101E;
    --sf-space-mid:     #1A1A2E;
    --sf-blue:          #1B5FCC;
    --sf-blue-light:    #4A8AEE;
    --sf-teal:          #0099AA;
    --sf-red:           #C41020;
    --sf-red-dark:      #880010;
    --sf-flame:         #E84400;
    --sf-white:         #FFFFFF;
    --sf-silver:        #C8D4E8;
    --sf-gray:          #6A7A90;
    --sf-gold:          #C49020;

    /* Bootstrap overrides */
    --bs-body-bg:           var(--sf-space-black);
    --bs-body-color:        var(--sf-silver);
    --bs-primary:           var(--sf-blue);
    --bs-primary-rgb:       27, 95, 204;
    --bs-secondary:         var(--sf-red);
    --bs-secondary-rgb:     196, 16, 32;
    --bs-dark:              var(--sf-space-dark);
    --bs-dark-rgb:          16, 16, 30;
    --bs-link-color:        var(--sf-blue-light);
    --bs-link-hover-color:  var(--sf-white);
    --bs-border-color:      rgba(196, 16, 32, 0.35);
    --bs-card-bg:           var(--sf-space-mid);
}

/* ============================================================
   Base
   ============================================================ */

body {
    padding-top: 7rem;
    background-color: var(--sf-space-black);
    color: var(--sf-silver);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sf-white);
}

a {
    color: var(--sf-blue-light);
}

a:hover {
    color: var(--sf-white);
}

/* ============================================================
   Navbar
   ============================================================ */

.navbar {
    background-color: var(--sf-space-dark) !important;
    border-bottom: 2px solid var(--sf-red-dark);
}

.navbar-brand, .nav-link {
    color: var(--sf-silver) !important;
}

.nav-link:hover, .nav-link:focus {
    color: var(--sf-white) !important;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
    margin: .5rem;
    border-color: var(--sf-red-dark);
}

/* ============================================================
   App Logo
   ============================================================ */

.app-logo .img-fluid {
    max-height: 90px;
    padding: 0 5px 0 5px;
}

/* ============================================================
   Sidebar Menu
   ============================================================ */

.app-menu .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    white-space: nowrap;
}

.app-menu .nav-item a {
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    padding-left: 1rem;
    color: var(--sf-silver);
}

.app-menu .nav-item a.active {
    background-color: rgba(196, 16, 32, 0.25);
    color: var(--sf-white);
    border-left: 3px solid var(--sf-red);
}

.app-menu .nav-item a:hover {
    background-color: rgba(27, 95, 204, 0.15);
    color: var(--sf-white);
}

.app-menu .nav-link .oi {
    width: 1.5rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

/* ============================================================
   Cards / Panels
   ============================================================ */

.card {
    background-color: var(--sf-space-mid);
    border: 1px solid rgba(196, 16, 32, 0.35);
    color: var(--sf-silver);
}

.card-header {
    background-color: rgba(196, 16, 32, 0.2);
    border-bottom: 1px solid var(--sf-red-dark);
    color: var(--sf-white);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn-primary {
    background-color: var(--sf-blue);
    border-color: var(--sf-blue);
    color: var(--sf-white);
}

.btn-primary:hover {
    background-color: var(--sf-blue-light);
    border-color: var(--sf-blue-light);
}

.btn-secondary {
    background-color: var(--sf-red);
    border-color: var(--sf-red);
    color: var(--sf-white);
}

.btn-secondary:hover {
    background-color: var(--sf-red-dark);
    border-color: var(--sf-red-dark);
}

/* ============================================================
   Tables
   ============================================================ */

.table {
    color: var(--sf-silver);
    border-color: rgba(196, 16, 32, 0.25);
}

.table > :not(caption) > * > * {
    box-shadow: none;
    background-color: transparent;
    color: var(--sf-silver);
}

.table > thead {
    color: var(--sf-white);
    border-bottom: 2px solid var(--sf-red-dark);
}

.table .form-control {
    background-color: var(--sf-space-mid) !important;
    border-width: 0.5px !important;
    border-bottom-color: var(--sf-red-dark) !important;
    color: var(--sf-silver);
}

.table .form-select {
    background-color: var(--sf-space-mid) !important;
    border-width: 0.5px !important;
    border-bottom-color: var(--sf-red-dark) !important;
    color: var(--sf-silver);
}

.table .btn-primary {
    background-color: var(--bs-primary);
}

.table .btn-secondary {
    background-color: var(--bs-secondary);
}

/* ============================================================
   Forms
   ============================================================ */

.form-control, .form-select {
    background-color: var(--sf-space-mid);
    border-color: rgba(27, 95, 204, 0.4);
    color: var(--sf-silver);
}

.form-control:focus, .form-select:focus {
    background-color: var(--sf-space-mid);
    border-color: var(--sf-blue);
    color: var(--sf-white);
    box-shadow: 0 0 0 0.2rem rgba(27, 95, 204, 0.25);
}

/* ============================================================
   Alerts / Badges
   ============================================================ */

.alert-dismissible .btn-close {
    z-index: 1;
}

.badge.bg-primary   { background-color: var(--sf-blue)  !important; }
.badge.bg-secondary { background-color: var(--sf-red)   !important; }
.badge.bg-warning   { background-color: var(--sf-gold)  !important; color: var(--sf-space-black) !important; }

/* ============================================================
   Module Controls
   ============================================================ */

.controls {
    z-index: 2000;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 10px;
}

div.app-moduleactions a.dropdown-toggle,
div.app-moduleactions div.dropdown-menu {
    color: var(--sf-white);
    background-color: var(--sf-space-dark);
}

.dropdown-menu span {
    mix-blend-mode: difference;
}

.dropdown-menu {
    background-color: var(--sf-space-dark);
    border: 1px solid var(--sf-red-dark);
}

.dropdown-item {
    color: var(--sf-silver);
}

.dropdown-item:hover {
    background-color: rgba(27, 95, 204, 0.2);
    color: var(--sf-white);
}

/* ============================================================
   Admin Container (module settings page)
   ============================================================ */

/* Full-viewport backdrop to dim the page behind the modal */
.app-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0, 0, 0, 0.65);
}

.app-admin-modal::-webkit-scrollbar { width: 8px; }
.app-admin-modal::-webkit-scrollbar-track { background: var(--sf-space-dark); }
.app-admin-modal::-webkit-scrollbar-thumb { background: var(--sf-space-mid); border-radius: 4px; }


/* Same surface colour as the offcanvas */
.app-admin-modal .modal-content {
    background-color: var(--sf-space-mid);
    border: 1px solid rgba(196, 16, 32, 0.35);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    color: var(--sf-silver);
}

/* Same header treatment as the offcanvas */
.app-admin-modal .modal-header {
    background-color: rgba(196, 16, 32, 0.15);
    border-bottom: 1px solid var(--sf-red-dark);
    border-radius: 6px 6px 0 0;
}

.app-admin-modal .modal-title {
    color: var(--sf-white);
    font-weight: 600;
}

/* Make the close × visible on the dark header */
.app-admin-modal .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.8;
}

.app-admin-modal .btn-close:hover {
    opacity: 1;
}

/* ============================================================
   Control Panel Offcanvas
   ============================================================ */

.offcanvas.offcanvas-end {
    background-color: var(--sf-space-mid);
    border-left: 1px solid rgba(196, 16, 32, 0.35);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
    color: var(--sf-silver);
}

.offcanvas.offcanvas-end .offcanvas-header {
    border-bottom: 1px solid var(--sf-red-dark);
    background-color: rgba(196, 16, 32, 0.15);
}

.offcanvas.offcanvas-end .offcanvas-title {
    color: var(--sf-white);
    font-weight: 600;
}

.offcanvas.offcanvas-end .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.8;
}

.offcanvas.offcanvas-end .btn-close:hover {
    opacity: 1;
}

/* ============================================================
   Scrollbar (Chromium)
   ============================================================ */

::-webkit-scrollbar              { width: 8px; }
::-webkit-scrollbar-track        { background: var(--sf-space-dark); }
::-webkit-scrollbar-thumb        { background: var(--sf-gray); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--sf-silver); }

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 767.98px) {
    .app-menu {
        width: 100%;
    }

    .navbar {
        position: fixed;
        top: 60px;
        width: 100%;
    }

    .controls {
        height: 60px;
        position: fixed;
        top: 0px;
        width: 100%;
        background-color: var(--sf-space-dark);
    }

    .controls-group {
        float: right;
        margin-right: 25px;
    }

    .content {
        position: relative;
        top: 60px;
    }
}