/* DK Portal Black & Gold Theme - OPTIMIZED FOR VISIBILITY */
@import url('checklist-enhancements.css');
@import url('widgets.css');

:root {
    --dk-primary: #0d6efd;
    --dk-secondary: #6c757d;
    --dk-success: #198754;
    --dk-danger: #dc3545;
    --dk-warning: #ffc107;
    --dk-info: #0dcaf0;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 78px;
    --sidebar-bg: linear-gradient(135deg,#0d0d0d 0%,#141414 60%,#0d0d0d 100%);
    --sidebar-border: rgba(255,215,0,0.25);
    --dk-black: #000000;
    --dk-gold: #ffd700;
    --dk-gold-hover: #ffed4e;
    --dk-dark-bg: #1a1a1a;
    --dk-darker-bg: #0d0d0d;
    /* IMPROVED TEXT COLORS FOR BETTER VISIBILITY */
    --dk-text-primary: #f8f9fa;
    --dk-text-secondary: #e8e9ea;
    --dk-text-muted: #d1d3d5;
    --dk-text-subtle: #b8babb;
    --dk-light-text: #f8f9fa;
    --dk-border: #008080;
    /* Teal theme variables */
    --dk-teal: #008080;
    --dk-teal-light: #20B2AA;
    --dk-teal-hover: #00CED1;
    --dk-teal-dark: #006666;
    --dk-teal-glow: rgba(0, 128, 128, 0.4);
    /* Light mode colors */
    --dk-light-bg: #ffffff;
    --dk-light-bg-secondary: #f8f9fa;
    --dk-light-bg-tertiary: #e9ecef;
    --dk-light-text-primary: #212529;
    --dk-light-text-secondary: #495057;
    --dk-light-text-muted: #6c757d;
    --dk-light-border: #dee2e6;
}

/* GLOBAL THEME ENFORCEMENT */
* {
    box-sizing: border-box;
}

/* GLOBAL TEXT IMPROVEMENTS */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--dk-darker-bg) !important;
    color: var(--dk-text-primary) !important;
    margin: 0;
    overflow-x: hidden;
}

html, body {
    height: 100%;
    background: var(--dk-darker-bg) !important;
}

/* Ensure all page containers maintain dark background */
.page, .page-dk-theme, #app, .layout-root, .main-dk-full, .content-dk-full {
    background: var(--dk-darker-bg) !important;
    color: var(--dk-text-primary) !important;
}

/* Login page specific background */
.login-page, .login-container-dk {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #000000 100%) !important;
    min-height: 100vh;
}

/* Default text elements with improved contrast */
p, span, div, li, td, th, label {
    color: var(--dk-text-secondary);
}

/* Headings with excellent visibility */
h1, h2, h3, h4, h5, h6 {
  color: var(--dk-text-primary) !important;
    font-weight: 600;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Small text - improved visibility */
small, .small {
    color: var(--dk-text-muted) !important;
    font-size: 0.875rem;
}

/* Text muted class - still visible */
.text-muted {
    color: var(--dk-text-muted) !important;
}

/* Text light variations */
.text-light {
    color: var(--dk-text-primary) !important;
}

.text-white {
    color: #ffffff !important;
}

/* Link improvements */
a {
    color: var(--dk-gold);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--dk-gold-hover);
    text-decoration: underline;
}

/* ==================== LAYOUT ROOT - FIXED FOR SIDEBAR ==================== */
.layout-root {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

/* Main content area with proper margin for sidebar */
.layout-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
}

/* Adjust margin when sidebar is collapsed */
.layout-root.sidebar-collapsed .layout-main {
    margin-left: var(--sidebar-width-collapsed);
}

/* Remove margin on mobile (sidebar is overlay) */
@media (max-width: 991.98px) {
    .layout-main {
margin-left: 0 !important;
    }
}

/* Main content padding */
.main-dk-full {
    flex: 1;
    width: 100%;
    padding: 0;
}

.content-dk-full {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem;
}

/* SIDEBAR */
.sidebar-dk{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-width);
    background:#0a0a0a;
    border-right:1px solid rgba(255,255,255,.06);
    z-index:1030;
    display:flex;
    flex-direction:column;
    transition:width .25s cubic-bezier(.4,0,.2,1);
}

.sidebar-dk.collapsed{
    width:var(--sidebar-width-collapsed);
}

.sidebar-dk .sidebar-inner{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    overflow:hidden;
}

.sidebar-dk:before{
    display:none;
}

/* Brand */
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:.85rem .85rem .7rem .85rem;position:relative;}
.sidebar-brand:after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:0;height:1px;background:rgba(255,255,255,.05);}
.brand-link{display:flex;align-items:center;gap:.5rem;color:var(--dk-text-primary);text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.3px;}
.brand-link i{font-size:1.15rem;color:var(--dk-gold);opacity:.8;}
.brand-link:hover{color:var(--dk-gold);}
.sidebar-collapse-toggle{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--dk-text-muted);padding:.35rem .45rem;border-radius:.4rem;cursor:pointer;transition:background .15s,color .15s;margin-left:auto;}
.sidebar-collapse-toggle:hover{background:rgba(255,255,255,.08);color:var(--dk-gold);}
.sidebar-close{background:transparent;border:none;color:var(--dk-text-muted);margin-left:auto;font-size:1rem;display:none;}
.sidebar-close:hover{color:var(--dk-gold);}

/* Sidebar Nav */
.sidebar-nav{padding:.65rem .6rem 0 .6rem;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;}
.sidebar-nav::-webkit-scrollbar{width:4px;} .sidebar-nav::-webkit-scrollbar-track{background:transparent;} .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;} .sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);}
.sidebar-link{width:100%;display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;font-size:.82rem;font-weight:500;color:rgba(248,249,250,.75);background:transparent;border:0;border-radius:.5rem;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;position:relative;}
.sidebar-link i{font-size:1rem;width:20px;text-align:center;opacity:.7;}
.sidebar-link:hover{background:rgba(255,255,255,.05);color:var(--dk-text-primary);}
.sidebar-link:hover i{opacity:1;color:var(--dk-gold);}
.sidebar-link.active{background:rgba(255,215,0,.1);color:var(--dk-gold);font-weight:600;}
.sidebar-link.active i{opacity:1;color:var(--dk-gold);}
.sidebar-link.has-children{justify-content:flex-start;}
.sidebar-link .caret{margin-left:auto;font-size:.6rem;transition:transform .2s ease;opacity:.4;}
.sidebar-group.open > .sidebar-link .caret{transform:rotate(180deg);opacity:.7;}
.sidebar-group{margin-bottom:.15rem;}
.sidebar-section-label{padding:.6rem .7rem .15rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.25);pointer-events:none;user-select:none;}
.sidebar-section-toggle{width:100%;display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;font-size:.82rem;font-weight:500;color:rgba(248,249,250,.75);background:transparent;border:0;border-radius:.5rem;cursor:pointer;transition:background .15s,color .15s;}
.sidebar-section-toggle i{font-size:1rem;width:20px;text-align:center;opacity:.7;}
.sidebar-section-toggle .caret{margin-left:auto;font-size:.6rem;transition:transform .2s ease;opacity:.4;width:auto;}
.sidebar-section-toggle:hover{background:rgba(255,255,255,.05);color:var(--dk-text-primary);}
.sidebar-section-toggle:hover i{opacity:1;color:var(--dk-gold);}
.sidebar-section-toggle.open .caret{transform:rotate(180deg);opacity:.7;}
.sidebar-modules-collapse{max-height:0;overflow:hidden;transition:max-height .3s ease-out,opacity .2s ease-out;opacity:0;}
.sidebar-modules-collapse.open{max-height:2000px;opacity:1;transition:max-height .4s ease-in,opacity .2s ease-in;}
.sidebar-sub{max-height:0;overflow:hidden;padding:0 0 0 .2rem;transition:max-height .25s ease-out,opacity .2s ease-out,padding .2s ease-out;opacity:0;}
.sidebar-group.open > .sidebar-sub{max-height:600px;opacity:1;padding:.15rem 0 .3rem .2rem;transition:max-height .3s ease-in,opacity .2s ease-in,padding .2s ease-in;}
@keyframes fadeSlide{0%{opacity:0;transform:translateY(-4px);}100%{opacity:1;transform:translateY(0);}}
.sidebar-sublink{display:flex;align-items:center;gap:.5rem;padding:.35rem .7rem .35rem 2rem;font-size:.78rem;color:rgba(248,249,250,.6);border-radius:.45rem;text-decoration:none;position:relative;transition:background .15s,color .15s;}
.sidebar-sublink i{font-size:.8rem;width:16px;text-align:center;opacity:.6;}
.sidebar-sublink:hover{background:rgba(255,255,255,.05);color:var(--dk-text-primary);}
.sidebar-sublink:hover i{opacity:1;color:var(--dk-gold);}
.sidebar-sublink.active{background:rgba(255,215,0,.08);color:var(--dk-gold);font-weight:600;}
.sidebar-sublink.active i{opacity:1;color:var(--dk-gold);}

/* Module nested sub-groups */
.sidebar-module-toggle{display:flex;align-items:center;gap:.5rem;padding:.35rem .7rem .35rem 1.6rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.5);border:0;background:transparent;border-radius:.45rem;cursor:pointer;transition:background .15s,color .15s;width:100%;position:relative;}
.sidebar-module-toggle i{font-size:.85rem;width:18px;text-align:center;opacity:.6;}
.sidebar-module-toggle:hover{background:rgba(255,255,255,.05);color:var(--dk-text-primary);}
.sidebar-module-toggle:hover i{opacity:1;color:var(--dk-gold);}
.sidebar-module-toggle .caret{margin-left:auto;font-size:.55rem;transition:transform .2s ease;opacity:.4;}
.sidebar-group.open > .sidebar-module-toggle .caret{transform:rotate(180deg);opacity:.7;}
.sidebar-module-sub{max-height:0;overflow:hidden;padding:0 0 0 .35rem;transition:max-height .25s ease,opacity .2s ease;opacity:0;}
.sidebar-group.open > .sidebar-module-sub{max-height:400px;opacity:1;padding:.1rem 0 .2rem .35rem;}
.sidebar-module-sub .sidebar-sublink{padding-left:2.5rem;font-size:.74rem;}
@keyframes fadeSlide{0%{opacity:0;transform:translateY(-4px);}100%{opacity:1;transform:translateY(0);}}

/* User Section */
.sidebar-spacer{margin-top:.5rem;}
.sidebar-user{padding:.6rem .6rem 1rem .6rem;position:relative;}
.sidebar-user:before{content:"";position:absolute;top:0;left:.8rem;right:.8rem;height:1px;background:rgba(255,255,255,.05);}
.user-summary{width:100%;display:flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:var(--dk-text-primary);padding:.6rem .7rem;border-radius:.5rem;cursor:pointer;transition:background .15s;position:relative;}
.user-summary:hover{background:rgba(255,255,255,.06);}
.user-summary i{font-size:1.2rem;opacity:.7;}
.user-summary .chevron-user{margin-left:auto;font-size:.65rem;transition:transform .2s;opacity:.4;}
.sidebar-user.open .chevron-user{transform:rotate(180deg);opacity:.7;}
.user-info{display:flex;flex-direction:column;font-size:.7rem;line-height:1.1;color:var(--dk-text-muted);}
.user-info strong{font-size:.75rem;letter-spacing:.3px;color:var(--dk-text-primary);}

.user-menu{margin-top:.4rem;background:#101010;border:1px solid rgba(255,255,255,.06);border-radius:.5rem;padding:.35rem;display:none;animation:growFade .2s ease;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.sidebar-user.open .user-menu{display:block;}
@keyframes growFade{0%{opacity:0;transform:translateY(-4px);}100%{opacity:1;transform:translateY(0);}}
.user-menu-item{width:100%;display:flex;align-items:center;gap:.6rem;padding:.45rem .65rem;font-size:.75rem;color:rgba(248,249,250,.6);border:0;background:transparent;border-radius:.45rem;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;}
.user-menu-item i{font-size:.85rem;width:18px;text-align:center;opacity:.6;}
.user-menu-item:hover{background:rgba(255,255,255,.05);color:var(--dk-text-primary);}
.user-menu-item:hover i{opacity:1;color:var(--dk-gold);}
.user-menu .divider{height:1px;background:rgba(255,255,255,.05);margin:.3rem .4rem;}

/* Collapsed behavior */
.sidebar-dk.collapsed .brand-text, .sidebar-dk.collapsed .sidebar-link span, .sidebar-dk.collapsed .sidebar-sublink span, .sidebar-dk.collapsed .user-info, .sidebar-dk.collapsed .chevron-user, .sidebar-dk.collapsed .sidebar-group.open > .sidebar-sub, .sidebar-dk.collapsed .caret, .sidebar-dk.collapsed .sidebar-section-toggle span, .sidebar-dk.collapsed .sidebar-section-toggle .caret, .sidebar-dk.collapsed .sidebar-modules-collapse {display:none;}
.sidebar-dk.collapsed .sidebar-sublink{padding-left:1.05rem;justify-content:center;}
.sidebar-dk.collapsed .sidebar-link{justify-content:center;padding:.65rem .6rem;}
.sidebar-dk.collapsed .sidebar-section-toggle{justify-content:center;padding:.65rem .6rem;}
.sidebar-dk.collapsed .user-summary{justify-content:center;}
.sidebar-dk.collapsed .user-summary i{margin:0;}
.sidebar-dk.collapsed .sidebar-group.open > .sidebar-sub{position:absolute;left:100%;top:0;max-height:none;opacity:1;overflow:visible;background:#121212;border:1px solid rgba(255,255,255,.08);padding:.4rem;border-radius:.5rem;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.55);} 

/* Floating toggle for mobile */
.sidebar-toggle-floating{position:fixed;bottom:1.25rem;left:1.25rem;background:linear-gradient(135deg,var(--dk-gold)0%,var(--dk-gold-hover)100%);border:0;color:#000;padding:.85rem .95rem;border-radius:1rem;font-size:1.15rem;z-index:1100;box-shadow:0 10px 25px -5px rgba(255,215,0,.4);display:flex;align-items:center;justify-content:center;transition:.3s;}
.sidebar-toggle-floating:hover{transform:translateY(-3px);box-shadow:0 18px 30px -8px rgba(255,215,0,.55);}

/* Sidebar search */
.sidebar-search{padding:.5rem .7rem;position:relative;flex-shrink:0;}
.sidebar-search-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:.45rem;color:var(--dk-text-primary);font-size:.75rem;padding:.4rem 1.8rem .4rem 2rem;outline:none;transition:border-color .2s,background .2s;}
.sidebar-search-input:focus{border-color:rgba(255,215,0,.4);background:rgba(255,255,255,.09);}
.sidebar-search-input::placeholder{color:rgba(255,255,255,.3);}
.sidebar-search-icon{position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.3);font-size:.78rem;pointer-events:none;}
.sidebar-search-clear{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:transparent;border:0;color:rgba(255,255,255,.35);font-size:.85rem;padding:0;line-height:1;cursor:pointer;transition:color .15s;}
.sidebar-search-clear:hover{color:var(--dk-gold);}
.sidebar-dk.collapsed .sidebar-search{display:none;}

/* Mobile - sidebar becomes overlay, no margin on content */
@media (max-width: 991.98px){
    .sidebar-dk{
transform:translateX(-100%); 
     width:var(--sidebar-width); 
        box-shadow:0 0 0 1px rgba(255,215,0,.05),0 20px 40px rgba(0,0,0,.75);
        transition: transform 0.35s ease;
    } 
    .sidebar-dk.open-mobile{
     transform:translateX(0);
    } 
    .sidebar-close{
        display:inline-flex;
    } 
    body.mobile-menu-open{
  overflow:hidden;
    } 
}

/* DASHBOARD HEADER WITH LOGO */
.dashboard-header {
    background: linear-gradient(135deg, var(--dk-black) 0%, var(--dk-dark-bg) 100%);
    border: 2px solid var(--dk-gold);
    border-radius: 1rem;
 padding: 1.5rem 2rem;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.18), 0 2px 8px rgba(0,0,0,.6);
    position: relative;
    overflow: hidden;
}

.dashboard-header::before {
    content: '';
    position: absolute; 
    inset: -50%;
    background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%);
    animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow { 
    0%,100% { opacity: .35; } 
    50% { opacity: .65; } 
}

.dashboard-logo-container {
 position: relative;
 z-index: 2;
}

/* ENHANCED LOGO VISIBILITY */
.logo-glow-wrapper {
    position: relative;
    display: inline-block;
    padding: 1rem;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    border-radius: 1rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.logo-glow-wrapper::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg, var(--dk-gold), transparent, var(--dk-gold));
    border-radius: 1.2rem;
    z-index: -1;
    opacity: 0.5;
    animation: logoBorderGlow 3s ease-in-out infinite;
}

@keyframes logoBorderGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* ==================== LOGO STYLES - UNIFIED SYSTEM ==================== */
/* Base logo styling shared across all contexts */
.dk-logo-base {
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
    transition: all 0.4s ease;
}

/* LOGIN PAGE LOGO */
.login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.dk-logo {
    max-height: 100px;
    min-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.4));
    transition: all 0.4s ease;
}

.dk-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.6));
}

/* DASHBOARD LOGO - larger with enhanced glow effects */
.dashboard-logo {
    max-height: 120px;
    min-height: 80px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.4));
    transition: .4s;
}

/* ACTIVITY ICON STYLES */
.activity-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.activity-icon-success {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.2) 0%, rgba(25, 135, 84, 0.1) 100%);
    border: 1px solid rgba(25, 135, 84, 0.4);
    color: #66bb6a;
}

.activity-icon-gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--dk-gold);
}

.activity-icon-primary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2) 0%, rgba(13, 110, 253, 0.1) 100%);
    border: 1px solid rgba(13, 110, 253, 0.4);
    color: #5b9aff;
}

.activity-icon-info {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.2) 0%, rgba(13, 202, 240, 0.1) 100%);
    border: 1px solid rgba(13, 202, 240, 0.4);
    color: #4fc3f7;
}

.activity-icon-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd54f;
}

.activity-icon-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.1) 100%);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
}

.activity-item:hover .activity-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.activity-item {
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: rgba(255, 215, 0, 0.03);
    border-radius: 0.5rem;
    margin: 0 -0.5rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.activity-description {
    font-size: 0.875rem;
    line-height: 1.4;
}

.activity-meta {
    min-width: 100px;
}

/* ALERT STYLES FOR API STATUS */
.alert-dk-success {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.15) 0%, rgba(25, 135, 84, 0.08) 100%) !important;
    border: 1px solid rgba(25, 135, 84, 0.4) !important;
    color: #66bb6a !important;
}

.alert-dk-info {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: var(--dk-text-primary) !important;
}

/* BADGE STYLES */
.badge-dk-success {
    background: rgba(25, 135, 84, 0.15) !important;
    border: 1px solid rgba(25, 135, 84, 0.3) !important;
    color: #4ade80 !important;
}

.badge-dk-info {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    color: var(--dk-gold) !important;
}

.badge-dk-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--dk-text-muted) !important;
}

/* GOLD TEXT UTILITY CLASS */
.text-dk-gold {
    color: var(--dk-gold) !important;
}

/* FEATURE CARDS - FIXED VISIBILITY */
.card-dk-feature {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    transition: all 0.3s ease;
}

.card-dk-feature:hover {
    border-color: var(--dk-gold) !important;
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.15);
    transform: translateY(-2px);
}

.card-dk-feature .card-icon-dk {
    color: var(--dk-gold) !important;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.card-dk-feature .card-icon-dk i {
    font-size: 3rem;
    color: var(--dk-gold) !important;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.card-title-feature {
    color: var(--dk-gold) !important;
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.card-text-feature {
    color: var(--dk-text-secondary) !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ==================== CARD-DK BASE STYLES ==================== */
.card-dk {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    color: var(--dk-text-primary);
}

.card-dk:hover {
    border-color: rgba(255, 215, 0, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.card-dk .card-header,
.card-header-dk {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
    color: var(--dk-gold) !important;
    padding: 1rem 1.25rem;
}

.card-dk .card-body {
    background: transparent !important;
    color: var(--dk-text-secondary);
}

.card-dk .card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 215, 0, 0.15) !important;
}

.card-dk .card-title {
    color: var(--dk-gold) !important;
}

.card-dk .card-text {
    color: var(--dk-text-secondary) !important;
}

/* Card title enhanced visibility */
.card-title-enhanced,
.section-title-enhanced {
    color: var(--dk-gold) !important;
    font-weight: 600;
}

.card-text-enhanced {
    color: var(--dk-text-secondary) !important;
}

/* ==================== BUTTON STYLES ==================== */
.btn-dk-primary {
    background: linear-gradient(135deg, var(--dk-gold) 0%, var(--dk-gold-hover) 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-dk-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    color: #000 !important;
}

.btn-dk-primary:disabled {
    background: #6c757d !important;
    box-shadow: none;
    transform: none;
}

.btn-dk-secondary {
    background: rgba(108, 117, 125, 0.2) !important;
    border: 1px solid #6c757d !important;
    color: var(--dk-text-primary) !important;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-dk-secondary:hover {
    background: #6c757d !important;
    color: #fff !important;
}

.btn-dk-danger {
    background: rgba(220, 53, 69, 0.2) !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-dk-danger:hover {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #fff !important;
}

.btn-outline-light {
    border-color: rgba(255, 215, 0, 0.4) !important;
    color: var(--dk-gold) !important;
}

.btn-outline-light:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: var(--dk-gold) !important;
    color: var(--dk-gold) !important;
}

/* Quick Action Buttons */
.quick-action-btn-enhanced {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: var(--dk-gold) !important;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.quick-action-btn-enhanced:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    border-color: var(--dk-gold) !important;
    color: var(--dk-gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

.quick-action-btn-enhanced i {
    color: var(--dk-gold) !important;
    opacity: 0.85;
}

/* ==================== WELCOME SECTION ==================== */
.welcome-section-dk {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.03) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 0.75rem;
}

.welcome-title {
    color: var(--dk-text-primary) !important;
    font-weight: 700;
    font-size: 1.75rem;
}

.welcome-text {
    color: var(--dk-text-secondary) !important;
    font-size: 1rem;
}

/* ==================== ACTIVITY STYLES ==================== */
.activity-title-enhanced {
    color: var(--dk-text-primary) !important;
}

.activity-time-enhanced {
    color: var(--dk-text-muted) !important;
    font-size: 0.85rem;
}

/* ==================== STATUS LABEL ==================== */
.status-label-enhanced {
    color: var(--dk-text-secondary) !important;
}

/* ==================== BORDER UTILITIES ==================== */
.border-dk-gold {
    border-color: rgba(255, 215, 0, 0.25) !important;
}

/* ==================== MODAL STYLES ==================== */
.modal-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: var(--dk-text-primary);
}

.modal-header {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
}

.modal-header .modal-title {
    color: var(--dk-gold) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
    color: var(--dk-text-secondary);
}

.modal-footer {
    border-top: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* ==================== DROPDOWN STYLES ==================== */
.dropdown-menu-dark {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
}

.dropdown-menu-dark .dropdown-item {
    color: var(--dk-text-secondary) !important;
}

.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    color: var(--dk-gold) !important;
}

.dropdown-menu-dark .dropdown-divider {
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* ==================== TABLE ENHANCEMENTS ==================== */

/* Health check status dots */
.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-dot-ok {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.health-dot-warn {
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

.health-dot-err {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

.health-check-row {
    transition: background 0.15s ease;
}

.health-check-row:hover {
    background: rgba(255, 215, 0, 0.04) !important;
}

.table-dark {
    --bs-table-bg: #0d0d0d !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--dk-text-secondary) !important;
}

.table-dark th,
.table-dark td {
    vertical-align: middle;
    padding: .7rem 1rem !important;
}

/* Subtle dark header with gold accents */
.table-dark thead th,
.table-dark thead.table-warning th,
.table-dark thead.table-success th,
.table-dark thead.table-primary th,
.table-dark thead.table-info th,
.table-dark thead.table-danger th,
.table-dark thead.table-secondary th,
.table-dark thead.table-light th {
    background: #141414 !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--dk-text-muted) !important;
    color: var(--dk-text-muted) !important;
    font-weight: 600;
    white-space: nowrap;
    font-size: .7rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2) !important;
}

.table-dark thead th.text-black {
    color: var(--dk-text-muted) !important;
}

.table-dark thead th i {
    color: var(--dk-gold) !important;
    opacity: 0.7;
}

.table-dark tbody td {
    font-size: .85rem;
}

.table-dark tbody tr:hover {
    background: rgba(255, 215, 0, 0.04) !important;
}

/* ==================== TABLE-DK BASE STYLES ==================== */
.table-dk {
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
    color: var(--dk-text-secondary);
}

.table-dk th,
.table-dk td {
    vertical-align: middle;
    padding: 0.65rem 1rem;
    border-color: rgba(255, 255, 255, 0.06);
}

.table-dk thead th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--dk-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
    white-space: nowrap;
}

.table-dk thead th i {
    color: var(--dk-gold);
    opacity: 0.7;
}

.table-dk tbody td {
    font-size: 0.85rem;
}

.table-dk tbody tr:hover {
    background: rgba(255, 215, 0, 0.03);
}

/* ==================== ALERT-DK-EXPORT ==================== */
.alert-dk-export {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    border-left: 4px solid var(--dk-gold) !important;
    border-radius: 0.5rem;
    color: var(--dk-text-primary);
}

.theme-light .alert-dk-export {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.07) 0%, rgba(0, 128, 128, 0.02) 100%) !important;
    border: 1px solid rgba(0, 128, 128, 0.2) !important;
    border-left: 4px solid var(--dk-teal) !important;
}

/* ==================== BOOTSTRAP OVERRIDES FOR DARK THEME ==================== */
.bg-dark {
    background: #1a1a1a !important;
}

.border-secondary {
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* Fix badge visibility */
.badge-dk-warning {
    background: rgba(253, 126, 20, 0.15) !important;
    border: 1px solid rgba(253, 126, 20, 0.3) !important;
    color: #fdba74 !important;
}

/* Dashboard logo enhanced */
.dashboard-logo-enhanced {
    max-height: 140px;
    min-height: 100px;
    filter: 
        drop-shadow(0 0 20px rgba(255, 215, 0, 0.5))
        drop-shadow(0 0 40px rgba(255, 215, 0, 0.3))
        brightness(1.1)
        contrast(1.05);
    transition: all 0.4s ease;
}

.dashboard-logo-enhanced:hover {
    transform: scale(1.08);
    filter: 
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.7))
        drop-shadow(0 0 60px rgba(255, 215, 0, 0.4))
        brightness(1.15)
        contrast(1.1);
}

.dashboard-title-container {
    position: relative;
    z-index: 2;
}

.dashboard-main-title {
    color: var(--dk-gold) !important;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.dashboard-subtitle {
    color: var(--dk-text-muted) !important;
    font-size: 1rem;
}

/* Status refresh button */
.status-refresh-btn {
    border-color: rgba(255, 215, 0, 0.4) !important;
    color: var(--dk-gold) !important;
}

.status-refresh-btn:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: var(--dk-gold) !important;
}

.status-label {
    color: var(--dk-text-primary) !important;
}

.status-text {
    color: var(--dk-text-secondary) !important;
}

/* ==================== TEAL THEME FOR DASHBOARD ==================== */

/* Dashboard container with teal + light theme */
.dashboard-teal-theme {
    background: var(--dk-light-bg) !important;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Override dark text colors for light mode dashboard */
.dashboard-teal-theme p,
.dashboard-teal-theme span,
.dashboard-teal-theme div,
.dashboard-teal-theme li,
.dashboard-teal-theme td,
.dashboard-teal-theme th,
.dashboard-teal-theme label {
    color: var(--dk-light-text-secondary);
}

.dashboard-teal-theme h1,
.dashboard-teal-theme h2,
.dashboard-teal-theme h3,
.dashboard-teal-theme h4,
.dashboard-teal-theme h5,
.dashboard-teal-theme h6 {
    color: var(--dk-light-text-primary) !important;
}

.dashboard-teal-theme .text-muted {
    color: var(--dk-light-text-muted) !important;
}

/* Dashboard Header - Light with Teal Border */
.dashboard-header-teal {
    background: linear-gradient(135deg, var(--dk-light-bg) 0%, var(--dk-light-bg-secondary) 100%);
    border: 2px solid var(--dk-teal) !important;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 128, 128, 0.15), 0 2px 8px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
}

.dashboard-header-teal::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(0, 128, 128, 0.06) 0%, transparent 70%);
    animation: headerGlowTeal 4s ease-in-out infinite;
}

@keyframes headerGlowTeal {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.65; }
}

/* Logo wrapper with teal glow - light version */
.logo-glow-teal {
    position: relative;
    display: inline-block;
    padding: 1rem;
    background: radial-gradient(circle, rgba(0, 128, 128, 0.08) 0%, transparent 70%);
    border-radius: 1rem;
    border: 1px solid rgba(0, 128, 128, 0.25);
}

.logo-glow-teal::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg, var(--dk-teal), transparent, var(--dk-teal));
    border-radius: 1.2rem;
    z-index: -1;
    opacity: 0.3;
    animation: logoBorderGlowTeal 3s ease-in-out infinite;
}

@keyframes logoBorderGlowTeal {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* Dashboard title with teal */
.dashboard-title-teal {
    color: var(--dk-teal-dark) !important;
    text-shadow: none;
}

/* Teal text utility */
.text-dk-teal {
    color: var(--dk-teal) !important;
}

/* Card with teal border - LIGHT VERSION */
.card-dk-teal {
    background: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.3) !important;
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    color: var(--dk-light-text-primary);
}

.card-dk-teal:hover {
    border-color: var(--dk-teal) !important;
    box-shadow: 0 6px 24px rgba(0, 128, 128, 0.15);
    transform: translateY(-2px);
}

.card-dk-teal .card-body {
    background: transparent !important;
    color: var(--dk-light-text-secondary);
}

.card-dk-teal .card-icon-dk i {
    font-size: 3rem;
    color: var(--dk-teal) !important;
    filter: drop-shadow(0 0 6px rgba(0, 128, 128, 0.25));
}

.card-dk-teal .card-text {
    color: var(--dk-light-text-secondary) !important;
}

/* Card header with teal gradient - LIGHT VERSION */
.card-header-teal {
    background: linear-gradient(90deg, rgba(0, 128, 128, 0.1) 0%, rgba(0, 128, 128, 0.03) 100%) !important;
    border-bottom: 1px solid rgba(0, 128, 128, 0.2) !important;
    color: var(--dk-teal-dark) !important;
    padding: 1rem 1.25rem;
}

/* Card title with teal */
.card-title-teal {
    color: var(--dk-teal-dark) !important;
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

/* Section title with teal */
.section-title-teal {
    color: var(--dk-teal-dark) !important;
    font-weight: 600;
}

/* Welcome section with teal - LIGHT VERSION */
.welcome-section-teal {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.08) 0%, rgba(0, 128, 128, 0.02) 100%);
    border: 1px solid rgba(0, 128, 128, 0.2);
    border-radius: 0.75rem;
}

.dashboard-teal-theme .welcome-title {
    color: var(--dk-light-text-primary) !important;
}

.dashboard-teal-theme .welcome-text {
    color: var(--dk-light-text-secondary) !important;
}

/* Button with teal */
.btn-dk-teal {
    background: linear-gradient(135deg, var(--dk-teal) 0%, var(--dk-teal-hover) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
}

.btn-dk-teal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 128, 128, 0.4);
    color: #fff !important;
    background: linear-gradient(135deg, var(--dk-teal-hover) 0%, var(--dk-teal-light) 100%) !important;
}

.btn-dk-teal:disabled {
    background: #adb5bd !important;
    box-shadow: none;
    transform: none;
}

/* Quick action button with teal */
.quick-action-btn-teal {
    background: linear-gradient(135deg, var(--dk-teal) 0%, var(--dk-teal-hover) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 1.25rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
}

.quick-action-btn-teal:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 128, 128, 0.4);
    background: linear-gradient(135deg, var(--dk-teal-hover) 0%, var(--dk-teal-light) 100%) !important;
}

.quick-action-btn-teal .action-text {
    font-weight: 600;
    color: #fff !important;
}

.quick-action-btn-teal .action-count {
    font-weight: 400;
    opacity: 0.9;
    color: #fff !important;
}

/* Outline button with teal - LIGHT VERSION */
.btn-outline-teal {
    border: 1px solid var(--dk-teal) !important;
    color: var(--dk-teal) !important;
    background: transparent !important;
}

.btn-outline-teal:hover {
    background: var(--dk-teal) !important;
    border-color: var(--dk-teal) !important;
    color: #fff !important;
}

/* Badge with teal */
.badge-dk-teal {
    background: linear-gradient(135deg, var(--dk-teal) 0%, var(--dk-teal-hover) 100%) !important;
    color: #fff !important;
    border: none;
}

/* Border utility for teal */
.border-teal {
    border-color: rgba(0, 128, 128, 0.25) !important;
}

/* Alert with teal border - LIGHT VERSION */
.alert-teal-border {
    border-left: 4px solid var(--dk-teal) !important;
    background: rgba(0, 128, 128, 0.05) !important;
}

.dashboard-teal-theme .alert {
    background: var(--dk-light-bg-secondary) !important;
    color: var(--dk-light-text-secondary) !important;
}

.dashboard-teal-theme .alert-dk-success {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.05) 100%) !important;
    border: 1px solid rgba(25, 135, 84, 0.3) !important;
    color: #198754 !important;
}

/* Spinner with teal */
.text-teal {
    color: var(--dk-teal) !important;
}

.spinner-border.text-teal {
    color: var(--dk-teal) !important;
}

/* Activity items in light mode */
.dashboard-teal-theme .activity-item {
    border-bottom-color: var(--dk-light-border) !important;
}

.dashboard-teal-theme .activity-item:hover {
    background: rgba(0, 128, 128, 0.04);
}

.dashboard-teal-theme .activity-title-enhanced {
    color: var(--dk-light-text-primary) !important;
}

.dashboard-teal-theme .activity-description {
    color: var(--dk-light-text-muted) !important;
}

.dashboard-teal-theme .activity-time-enhanced {
    color: var(--dk-light-text-muted) !important;
}

.dashboard-teal-theme .activity-details {
    background: rgba(0, 128, 128, 0.05) !important;
}

/* Activity icon with teal */
.activity-icon-teal {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.15) 0%, rgba(0, 128, 128, 0.08) 100%);
    border: 1px solid rgba(0, 128, 128, 0.3);
    color: var(--dk-teal);
}

/* Status labels in light mode */
.dashboard-teal-theme .status-label-enhanced {
    color: var(--dk-light-text-secondary) !important;
}

.dashboard-teal-theme .status-label {
    color: var(--dk-light-text-primary) !important;
}

.dashboard-teal-theme .status-text {
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme form controls dark background override */
.theme-light .form-control-dk,
.theme-light .form-select-dk {
    background-color: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.3) !important;
    color: var(--dk-light-text-primary) !important;
}

.theme-light .form-control-dk:focus,
.theme-light .form-select-dk:focus {
    background-color: var(--dk-light-bg) !important;
    border-color: var(--dk-teal) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25) !important;
}

.theme-light .form-control-dk::placeholder {
    color: var(--dk-light-text-muted) !important;
}

/* Theme button styling for settings page */
.theme-btn {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.theme-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

/* ==================== GLOBAL LIGHT THEME OVERRIDES ==================== */
/* Applied when theme-light class is on body/html */

/* Light theme base styles */
.theme-light .layout-main {
    background: var(--dk-light-bg) !important;
}

.theme-light .main-dk-full,
.theme-light .content-dk-full {
    background: var(--dk-light-bg) !important;
}

/* Light theme text colors */
.theme-light p,
.theme-light span,
.theme-light div,
.theme-light li,
.theme-light td,
.theme-light th,
.theme-light label {
    color: var(--dk-light-text-secondary);
}

.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5,
.theme-light h6 {
    color: var(--dk-light-text-primary) !important;
}

.theme-light .text-muted {
    color: var(--dk-light-text-muted) !important;
}

.theme-light .text-light {
    color: var(--dk-light-text-primary) !important;
}

.theme-light small {
    color: var(--dk-light-text-muted) !important;
}

/* Light theme cards */
.theme-light .card-dk {
    background: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.3) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.theme-light .card-dk:hover {
    border-color: var(--dk-teal) !important;
    box-shadow: 0 6px 24px rgba(0, 128, 128, 0.15);
}

.theme-light .card-dk .card-header,
.theme-light .card-header-dk {
    background: linear-gradient(90deg, rgba(0, 128, 128, 0.1) 0%, rgba(0, 128, 128, 0.03) 100%) !important;
    border-bottom: 1px solid rgba(0, 128, 128, 0.2) !important;
    color: var(--dk-teal-dark) !important;
}

.theme-light .card-dk .card-body {
    color: var(--dk-light-text-secondary);
}

.theme-light .card-dk .card-title,
.theme-light .card-title-enhanced,
.theme-light .section-title-enhanced {
    color: var(--dk-teal-dark) !important;
}

.theme-light .card-dk .card-text,
.theme-light .card-text-enhanced {
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme feature cards */
.theme-light .card-dk-feature {
    background: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.25) !important;
}

.theme-light .card-dk-feature:hover {
    border-color: var(--dk-teal) !important;
    box-shadow: 0 8px 24px rgba(0, 128, 128, 0.12);
}

.theme-light .card-dk-feature .card-icon-dk i,
.theme-light .text-dk-gold {
    color: var(--dk-teal) !important;
}

.theme-light .card-title-feature {
    color: var(--dk-teal-dark) !important;
}

.theme-light .card-text-feature {
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme buttons */
.theme-light .btn-dk-primary {
    background: linear-gradient(135deg, var(--dk-teal) 0%, var(--dk-teal-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
}

.theme-light .btn-dk-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 128, 128, 0.4);
    color: #fff !important;
}

.theme-light .btn-dk-secondary {
    background: transparent !important;
    border: 1px solid var(--dk-light-text-muted) !important;
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .btn-dk-secondary:hover {
    background: var(--dk-light-bg-tertiary) !important;
    color: var(--dk-light-text-primary) !important;
}

.theme-light .btn-outline-light {
    border-color: var(--dk-teal) !important;
    color: var(--dk-teal) !important;
}

.theme-light .btn-outline-light:hover {
    background: var(--dk-teal) !important;
    color: #fff !important;
}

/* Light theme pagination */
.theme-light .page-link.bg-dark {
    background: var(--dk-light-bg) !important;
    color: var(--dk-teal) !important;
}

.theme-light .page-link.bg-dark:hover {
    background: var(--dk-light-bg-tertiary) !important;
}

.theme-light .page-link.border-dk-gold {
    border-color: var(--dk-teal) !important;
}

.theme-light .page-link.text-dk-gold {
    color: var(--dk-teal) !important;
}

.theme-light .page-link.bg-dk-gold {
    background: var(--dk-teal) !important;
    color: #fff !important;
}

.theme-light .quick-action-btn-enhanced {
    background: linear-gradient(135deg, var(--dk-teal) 0%, var(--dk-teal-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
}

.theme-light .quick-action-btn-enhanced:hover {
    box-shadow: 0 8px 24px rgba(0, 128, 128, 0.4);
}

.theme-light .quick-action-btn-enhanced .action-text,
.theme-light .quick-action-btn-enhanced .action-count {
    color: #fff !important;
}

/* Light theme welcome section */
.theme-light .welcome-section-dk {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.08) 0%, rgba(0, 128, 128, 0.02) 100%);
    border: 1px solid rgba(0, 128, 128, 0.2);
}

.theme-light .welcome-title {
    color: var(--dk-light-text-primary) !important;
}

.theme-light .welcome-text {
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme badges */
.theme-light .badge-dk-info {
    background: rgba(0, 128, 128, 0.1) !important;
    border: 1px solid rgba(0, 128, 128, 0.25) !important;
    color: var(--dk-teal-dark) !important;
}

/* Light theme form controls */
.theme-light .form-control,
.theme-light .form-select {
    background-color: var(--dk-light-bg) !important;
    border-color: var(--dk-light-border) !important;
    color: var(--dk-light-text-primary) !important;
}

.theme-light .form-control:focus,
.theme-light .form-select:focus {
    border-color: var(--dk-teal) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25) !important;
}

.theme-light .form-control::placeholder {
    color: var(--dk-light-text-muted) !important;
}

.theme-light .bg-dark {
    background: var(--dk-light-bg-secondary) !important;
}

.theme-light .border-secondary {
    border-color: var(--dk-light-border) !important;
}

/* Light theme tables */
.theme-light .table-dark {
    --bs-table-bg: var(--dk-light-bg) !important;
    --bs-table-border-color: var(--dk-light-border) !important;
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .table-dark thead th,
.theme-light .table-dark thead.table-warning th,
.theme-light .table-dark thead.table-success th,
.theme-light .table-dark thead.table-primary th,
.theme-light .table-dark thead.table-info th,
.theme-light .table-dark thead.table-danger th,
.theme-light .table-dark thead.table-secondary th,
.theme-light .table-dark thead.table-light th {
    background: var(--dk-light-bg-tertiary) !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--dk-light-text-secondary) !important;
    color: var(--dk-light-text-secondary) !important;
    border-bottom: 2px solid rgba(0, 128, 128, 0.25) !important;
}

.theme-light .table-dark thead th.text-black {
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .table-dark thead th i {
    color: var(--dk-teal) !important;
}

.theme-light .table-dark tbody tr:hover {
    background: rgba(0, 128, 128, 0.04) !important;
}

/* Light theme table-dk */
.theme-light .table-dk {
    --bs-table-bg: var(--dk-light-bg) !important;
    --bs-table-border-color: var(--dk-light-border) !important;
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .table-dk thead th {
    background: var(--dk-light-bg-tertiary) !important;
    color: var(--dk-light-text-secondary) !important;
    border-bottom: 2px solid rgba(0, 128, 128, 0.25) !important;
}

.theme-light .table-dk thead th i {
    color: var(--dk-teal) !important;
}

.theme-light .table-dk td {
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .table-dk tbody tr:hover {
    background: rgba(0, 128, 128, 0.04) !important;
}

/* Light theme modals */
.theme-light .modal-content {
    background: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.3) !important;
    color: var(--dk-light-text-primary);
}

.theme-light .modal-header {
    background: linear-gradient(90deg, rgba(0, 128, 128, 0.1) 0%, rgba(0, 128, 128, 0.03) 100%) !important;
    border-bottom: 1px solid rgba(0, 128, 128, 0.2) !important;
}

.theme-light .modal-header .modal-title {
    color: var(--dk-teal-dark) !important;
}

.theme-light .modal-header .btn-close {
    filter: none;
}

/* Light theme close button � removes white filter so X is visible on light backgrounds */
.theme-light .btn-close-white {
    filter: none !important;
}

.theme-light .modal-body {
    color: var(--dk-light-text-secondary);
}

.theme-light .modal-footer {
    border-top: 1px solid rgba(0, 128, 128, 0.2) !important;
}

/* Light theme dropdowns */
.theme-light .dropdown-menu-dark {
    background: var(--dk-light-bg) !important;
    border: 1px solid var(--dk-light-border) !important;
}

.theme-light .dropdown-menu-dark .dropdown-item {
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .dropdown-menu-dark .dropdown-item:hover {
    background: rgba(0, 128, 128, 0.1) !important;
    color: var(--dk-teal-dark) !important;
}

/* Light theme alerts */
.theme-light .alert {
    background: var(--dk-light-bg-secondary) !important;
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .alert-dk-success {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.05) 100%) !important;
    border: 1px solid rgba(25, 135, 84, 0.3) !important;
    color: #198754 !important;
}

.theme-light .alert-dk-info {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.08) 0%, rgba(0, 128, 128, 0.03) 100%) !important;
    border: 1px solid rgba(0, 128, 128, 0.3) !important;
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme activity items */
.theme-light .activity-item {
    border-bottom-color: var(--dk-light-border) !important;
}

.theme-light .activity-item:hover {
    background: rgba(0, 128, 128, 0.04);
}

.theme-light .activity-title-enhanced {
    color: var(--dk-light-text-primary) !important;
}

.theme-light .activity-time-enhanced {
    color: var(--dk-light-text-muted) !important;
}

/* Light theme status labels */
.theme-light .status-label-enhanced {
    color: var(--dk-light-text-secondary) !important;
}

.theme-light .status-label {
    color: var(--dk-light-text-primary) !important;
}

.theme-light .status-text {
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme status refresh button */
.theme-light .status-refresh-btn {
    border-color: var(--dk-teal) !important;
    color: var(--dk-teal) !important;
}

.theme-light .status-refresh-btn:hover {
    background: var(--dk-teal) !important;
    color: #fff !important;
}

/* Light theme borders */
.theme-light .border-dk-gold {
    border-color: var(--dk-light-border) !important;
}

.theme-light .border-top,
.theme-light .border-bottom {
    border-color: var(--dk-light-border) !important;
}

/* Light theme form check */
.theme-light .form-check-input {
    background-color: var(--dk-light-bg) !important;
    border-color: var(--dk-light-border) !important;
}

.theme-light .form-check-input:checked {
    background-color: var(--dk-teal) !important;
    border-color: var(--dk-teal) !important;
}

.theme-light .form-check-label {
    color: var(--dk-light-text-secondary) !important;
}

/* Light theme links */
.theme-light a {
    color: var(--dk-teal);
}

.theme-light a:hover {
    color: var(--dk-teal-dark);
}

/* Light theme dashboard header */
.theme-light .dashboard-header {
    background: linear-gradient(135deg, var(--dk-light-bg) 0%, var(--dk-light-bg-secondary) 100%);
    border: 2px solid var(--dk-teal) !important;
    box-shadow: 0 4px 20px rgba(0, 128, 128, 0.15), 0 2px 8px rgba(0,0,0,.08);
}

.theme-light .dashboard-main-title {
    color: var(--dk-teal-dark) !important;
    text-shadow: none;
}

.theme-light .logo-glow-wrapper {
    background: radial-gradient(circle, rgba(0, 128, 128, 0.08) 0%, transparent 70%);
    border: 1px solid rgba(0, 128, 128, 0.25);
}

/* Light theme checklist styles */
.theme-light .checklist-card-enhanced {
    background: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.25) !important;
}

.theme-light .checklist-card-enhanced:hover {
    border-color: var(--dk-teal) !important;
}

.theme-light .checklist-stats {
    background: rgba(0, 128, 128, 0.03);
    border: 1px solid rgba(0, 128, 128, 0.1);
}

/* Light theme spinners � use teal instead of gold */
.theme-light .spinner-border.text-dk-gold,
.theme-light .spinner-border.text-warning {
    color: var(--dk-teal) !important;
}

/* Light theme input groups */
.theme-light .input-group-text.bg-dark {
    background: var(--dk-light-bg-secondary) !important;
    color: var(--dk-teal) !important;
}

/* Light theme readonly form controls */
.theme-light .form-control[readonly] {
    background: var(--dk-light-bg-tertiary) !important;
    color: var(--dk-light-text-secondary) !important;
}

/* ==================== FORM CONTROLS - DARK THEME ==================== */
.form-control-dark,
.form-select-dark {
    background-color: #141414 !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    color: var(--dk-text-primary) !important;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control-dark:focus,
.form-select-dark:focus {
    background-color: #141414 !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.15) !important;
    color: var(--dk-text-primary) !important;
    outline: none;
}

.form-control-dark::placeholder {
    color: var(--dk-text-subtle) !important;
}

.form-select-dark option {
    background-color: #1a1a1a;
    color: var(--dk-text-primary);
}

.theme-light .form-control-dark,
.theme-light .form-select-dark {
    background-color: var(--dk-light-bg) !important;
    border: 1px solid rgba(0, 128, 128, 0.25) !important;
    color: var(--dk-light-text-primary) !important;
}

.theme-light .form-control-dark:focus,
.theme-light .form-select-dark:focus {
    background-color: var(--dk-light-bg) !important;
    border-color: var(--dk-teal) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.2) !important;
    color: var(--dk-light-text-primary) !important;
}

.theme-light .form-control-dark::placeholder {
    color: var(--dk-light-text-muted) !important;
}

/* ==================== KPI ICON CIRCLES ==================== */
.kpi-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    margin: 0 auto 0.75rem;
    transition: transform 0.2s ease;
}

.card-dk:hover .kpi-icon-circle {
    transform: scale(1.08);
}

.kpi-icon-gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.08) 100%);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: var(--dk-gold);
}

.kpi-icon-success {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.2) 0%, rgba(25, 135, 84, 0.08) 100%);
    border: 1px solid rgba(25, 135, 84, 0.35);
    color: #4ade80;
}

.kpi-icon-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.08) 100%);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #f87171;
}

.kpi-icon-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.08) 100%);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #fbbf24;
}

.kpi-icon-info {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.2) 0%, rgba(13, 202, 240, 0.08) 100%);
    border: 1px solid rgba(13, 202, 240, 0.35);
    color: #38bdf8;
}

.kpi-icon-primary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2) 0%, rgba(13, 110, 253, 0.08) 100%);
    border: 1px solid rgba(13, 110, 253, 0.35);
    color: #5b9aff;
}

.kpi-icon-secondary {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.2) 0%, rgba(108, 117, 125, 0.08) 100%);
    border: 1px solid rgba(108, 117, 125, 0.35);
    color: #adb5bd;
}

/* Inline variant - no auto-centering margin or bottom margin (for flex layouts) */
.kpi-icon-inline {
    margin: 0;
}

/* Light theme KPI icons */
.theme-light .kpi-icon-gold {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.12) 0%, rgba(0, 128, 128, 0.06) 100%);
    border: 1px solid rgba(0, 128, 128, 0.25);
    color: var(--dk-teal);
}

/* ==================== HOVERABLE CARD IMPROVEMENTS ==================== */
.card-dk.hoverable {
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-dk.hoverable:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.1) !important;
}

/* ==================== PROGRESS BAR IMPROVEMENTS ==================== */
.progress {
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
}

/* Stacked progress bars get no radius override */
.progress .progress-bar:first-child:last-child {
    border-radius: 0.5rem;
}

.theme-light .progress {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* ==================== SECTION DIVIDER HEADER ==================== */
.section-divider-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.section-divider-header i {
    color: var(--dk-gold);
    opacity: 0.8;
}

.section-divider-header h5,
.section-divider-header h6 {
    margin: 0;
    color: var(--dk-text-primary) !important;
}

.theme-light .section-divider-header {
    border-bottom-color: rgba(0, 128, 128, 0.2);
}

.theme-light .section-divider-header i {
    color: var(--dk-teal);
}

/* ==================== FILTER SECTION CARD ==================== */
.filter-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
}

.theme-light .filter-card {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.04) 0%, transparent 100%) !important;
    border: 1px solid rgba(0, 128, 128, 0.15) !important;
}

/* ==================== NAV TABS DK THEME ==================== */
.nav-tabs-dk {
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-tabs-dk::-webkit-scrollbar {
    display: none;
}

.nav-tabs-dk .nav-link {
    color: var(--dk-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    background: transparent;
    margin-bottom: -2px;
}

.nav-tabs-dk .nav-link:hover {
    color: var(--dk-text-primary);
    background: rgba(255, 215, 0, 0.06);
    border-bottom-color: rgba(255, 215, 0, 0.3);
}

.nav-tabs-dk .nav-link.active {
    color: var(--dk-gold);
    background: rgba(255, 215, 0, 0.08);
    border-bottom: 2px solid var(--dk-gold);
    font-weight: 600;
}

.theme-light .nav-tabs-dk {
    border-bottom-color: rgba(0, 128, 128, 0.25);
}

.theme-light .nav-tabs-dk .nav-link {
    color: var(--dk-light-text-muted);
}

.theme-light .nav-tabs-dk .nav-link:hover {
    color: var(--dk-teal-dark);
    background: rgba(0, 128, 128, 0.05);
    border-bottom-color: rgba(0, 128, 128, 0.3);
}

.theme-light .nav-tabs-dk .nav-link.active {
    color: var(--dk-teal-dark);
    background: rgba(0, 128, 128, 0.08);
    border-bottom-color: var(--dk-teal);
}

/* ==================== NAV TABS BOOTSTRAP OVERRIDE FOR DARK THEME ==================== */
.nav-tabs {
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

.nav-tabs .nav-link {
    color: var(--dk-text-muted);
    border-color: transparent;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--dk-text-primary);
    border-color: rgba(255, 215, 0, 0.2) rgba(255, 215, 0, 0.2) transparent;
    background: rgba(255, 215, 0, 0.05);
}

.nav-tabs .nav-link.active {
    color: var(--dk-gold);
    background: #1a1a1a;
    border-color: rgba(255, 215, 0, 0.25) rgba(255, 215, 0, 0.25) #1a1a1a;
}

.theme-light .nav-tabs {
    border-bottom-color: rgba(0, 128, 128, 0.2);
}

.theme-light .nav-tabs .nav-link.active {
    color: var(--dk-teal-dark);
    background: var(--dk-light-bg);
    border-color: rgba(0, 128, 128, 0.2) rgba(0, 128, 128, 0.2) var(--dk-light-bg);
}

/* ==================== EMPTY STATE STYLING ==================== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-icon {
    font-size: 3.5rem;
    opacity: 0.35;
    margin-bottom: 1rem;
    color: var(--dk-gold);
}

.empty-state-title {
    color: var(--dk-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--dk-text-muted);
    font-size: 0.875rem;
}

.theme-light .empty-state-icon {
    color: var(--dk-teal);
}

/* ==================== BADGE UTILITY ==================== */
.badge-sm {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
}

/* ==================== SPINNER CENTERED ==================== */
.spinner-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.spinner-center .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
}

/* ==================== FUEL STORAGE GAUGE STYLES ==================== */

/* Vertical fuel gauge */
.fuel-gauge {
    display: flex;
    align-items: flex-end;
    width: 36px;
    flex-shrink: 0;
}

.fuel-gauge-track {
    position: relative;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #0a0a14 0%, #12121f 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.fuel-gauge-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 5px 5px;
    transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fuel-gauge-fill-ok {
    background: linear-gradient(0deg, #198754 0%, #20c997 60%, #4ade80 100%);
    box-shadow: 0 0 12px rgba(25, 135, 84, 0.4);
}

.fuel-gauge-fill-warning {
    background: linear-gradient(0deg, #cc8800 0%, #ffc107 60%, #ffed4e 100%);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.4);
    animation: fuel-pulse-warning 2s ease-in-out infinite;
}

.fuel-gauge-fill-danger {
    background: linear-gradient(0deg, #991b2c 0%, #dc3545 60%, #ff6b7a 100%);
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
    animation: fuel-pulse-danger 1.5s ease-in-out infinite;
}

@keyframes fuel-pulse-warning {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 193, 7, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.6); }
}

@keyframes fuel-pulse-danger {
    0%, 100% { box-shadow: 0 0 12px rgba(220, 53, 69, 0.4); }
    50% { box-shadow: 0 0 24px rgba(220, 53, 69, 0.7); }
}

/* Threshold markers on gauge */
.fuel-gauge-marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
}

.fuel-gauge-marker-warning {
    background: rgba(255, 193, 7, 0.7);
    box-shadow: 0 0 4px rgba(255, 193, 7, 0.3);
}

.fuel-gauge-marker-danger {
    background: rgba(220, 53, 69, 0.7);
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.3);
}

/* Percentage display */
.fuel-gauge-percentage {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

/* Gauge container */
.fuel-gauge-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Compact alert badges */
.fuel-alert {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 0.375rem;
    text-align: center;
}

.fuel-alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.fuel-alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

/* Detail section */
.fuel-details {
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    padding-top: 0.75rem;
}

/* Card highlight for critical/warning storages */
.fuel-card-critical {
    border-color: rgba(220, 53, 69, 0.5) !important;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15) !important;
}

.fuel-card-critical:hover {
    border-color: rgba(220, 53, 69, 0.7) !important;
    box-shadow: 0 6px 24px rgba(220, 53, 69, 0.25) !important;
}

.fuel-card-warning {
    border-color: rgba(255, 193, 7, 0.4) !important;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.1) !important;
}

.fuel-card-warning:hover {
    border-color: rgba(255, 193, 7, 0.6) !important;
    box-shadow: 0 6px 24px rgba(255, 193, 7, 0.2) !important;
}