:root {
    --bs-primary: #032f6c;
    --bs-primary-rgb: 3, 47, 108;
    --bs-link-color: #032f6c;
    --bs-link-hover-color: #022252;
}

.text-primary {
    color: #032f6c !important;
}

.bg-primary {
    background-color: #032f6c !important;
}

.btn-primary {
    background-color: #032f6c !important;
    border-color: #032f6c !important;
}

.btn-primary:hover {
    background-color: #022252 !important;
    border-color: #022252 !important;
}

.btn-outline-primary {
    color: #032f6c !important;
    border-color: #032f6c !important;
}

.btn-outline-primary:hover {
    background-color: #032f6c !important;
    border-color: #032f6c !important;
    color: #ffffff !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #032f6c !important;
}

.page-item.active .page-link {
    background-color: #032f6c !important;
    border-color: #032f6c !important;
}

/* Custom Scrollbar if needed */
::-webkit-scrollbar-thumb {
    background: #032f6c;
}

/* Brand Color for Topbar and Sidebar (replacing default dark/black) */
html[data-topbar-color="dark"] {
    --bs-topbar-bg: #032f6c !important;
    --bs-topbar-item-color: #ffffff !important;
    --bs-topbar-item-hover-color: #cfd3da !important;
}

html[data-sidebar-color="dark"] {
    --bs-sidebar-bg: #032f6c !important;
}

/* Direct overrides to ensure application */
.app-topbar {
    background-color: var(--bs-topbar-bg) !important;
}

/* Force white text in Topbar when in dark mode (Brand Blue) */
html[data-topbar-color="dark"] .app-topbar,
html[data-topbar-color="dark"] .app-topbar .nav-link,
html[data-topbar-color="dark"] .app-topbar .dropdown-toggle,
html[data-topbar-color="dark"] .app-topbar .user-name {
    color: #ffffff !important;
}

/* Exclude dropdown menu items if they have white background, usually they are not descendants of .app-topbar in DOM structure if appended to body, but sometimes they are. 
   Bootstrap 5 dropdowns are usually siblings or children. 
   Actually, `dropdown-menu` usually has its own background. 
   I should target direct children text or specific nav-link buttons */

html[data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link {
    color: #ffffff !important;
}

html[data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link i {
    color: #ffffff !important;
}

/* Ensure Search box text is readable and background blends */
/* Ensure Search box text is readable and background blends */
html[data-topbar-color="dark"] .app-search .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: none !important;
}
html[data-topbar-color="dark"] .app-search span {
    color: #ffffff !important;
}
html[data-topbar-color="dark"] .app-search input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Transparent background for TopBar buttons (Hamburger, Theme Toggle, User Profile) */
/* The template uses .topbar-button class for these interactive elements */
html[data-topbar-color="dark"] .topbar-button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 0.35rem; /* Ensure consistent rounding if needed, usually template handles it */
}

/* Hover effect for these buttons */
html[data-topbar-color="dark"] .topbar-button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.app-sidebar {
    background-color: var(--bs-sidebar-bg) !important;
}

html[data-sidebar-size=condensed] .app-sidebar {
    position: fixed !important;
    width: var(--bs-sidebar-width-sm);
    min-width: var(--bs-sidebar-width-sm);
}

/* --- Premium Card Styles --- */

/* Global Main Background - Light Mode Only */
html[data-bs-theme="light"] body {
    background-color: #f8f8fa !important;
}

/* Card Default State (At Rest) - Light Mode Only */
html[data-bs-theme="light"] .card {
    background-color: #ffffff !important;
    border: 1px solid #eaedf1 !important;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03) !important;
}

/* Card Default State (At Rest) - Dark Mode Style */
html[data-bs-theme="dark"] .card {
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Enforce 1px border as requested */
    /* We leave box-shadow alone if user likes the default "visual effects", or we can refine it. 
       User said "reduce border to 1px". */
}


.card-animate {
    transition: all 0.4s ease;
    /* Border and shadow are now handled by .card default above, 
       but we keep transition here */
}

/* Continuous Icon Animation (Floating Effect) */
@keyframes float-icon {
    0% { transform: translateY(0); }
    50% { transform: translateY(-13px); } /* Increased height */
    100% { transform: translateY(0); }
}

.card-animate .avatar-md {
    animation: float-icon 2.5s ease-in-out infinite; /* Increased speed (lower duration) */
}

.card-animate:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(3, 47, 108, 0.15) !important; /* Soft brand shadow remains on hover */
    border-color: rgba(3, 47, 108, 0.1) !important; /* Slight border tint on hover */
}

/* Refined Progress Bars */
.progress-sm {
    height: 6px !important; /* Slimmer */
    background-color: rgba(3, 47, 108, 0.1) !important; /* Lighter brand background */
}

.progress-bar {
    border-radius: 10px;
}

/* Accents for stats */
.bg-soft-primary {
    background-color: rgba(3, 47, 108, 0.1) !important;
    color: #032f6c !important;
}

.text-primary {
    color: #032f6c !important;
}

/* Dark Mode Fix for Primary Text/Icons */
html[data-bs-theme="dark"] .text-primary {
    color: #5b99ea !important; /* "Illuminated" Luminous Blue instead of Dark Brand Blue */
}

/* Specifically for the icon background in dark mode to pop */
html[data-bs-theme="dark"] .bg-soft-primary {
    background-color: rgba(91, 153, 234, 0.1) !important; /* Soft luminous blue tint */
    color: #5b99ea !important;
}

html[data-bs-theme="dark"] .avatar-title.text-primary {
     color: #5b99ea !important; /* Ensure icon is Luminous Blue */
}

/* Dark Mode Button Text Visibility - Force White Text Only */
html[data-bs-theme="dark"] .btn-outline-primary,
html[data-bs-theme="dark"] .btn-primary {
    color: #ffffff !important;
}

/* --- GridJS Dark Mode Overrides --- */
html[data-bs-theme="dark"] .gridjs-container {
    color: #e9ecef !important;
    background-color: transparent !important;
}

html[data-bs-theme="dark"] .gridjs-wrapper {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px;
}

html[data-bs-theme="dark"] .gridjs-table {
    background-color: transparent !important;
    width: 100%;
}

html[data-bs-theme="dark"] th.gridjs-th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #f8f9fa !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] td.gridjs-td {
    background-color: transparent !important;
    color: #e9ecef !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .gridjs-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button {
    background-color: transparent !important;
    color: #e9ecef !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

html[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background-color: #032f6c !important; /* Brand Blue */
    color: #fff !important;
    border-color: #032f6c !important;
}

html[data-bs-theme="dark"] .gridjs-tbody {
    background-color: transparent !important;
}

html[data-bs-theme="dark"] .gridjs-tr {
    background-color: transparent !important;
}

html[data-bs-theme="dark"] input.gridjs-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-bs-theme="dark"] input.gridjs-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html[data-bs-theme="dark"] .gridjs-message {
    background-color: transparent !important;
    color: #e9ecef !important;
}


/* ===========================
   PRELOADER (Modern + Logo)
   =========================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #f8f8fa; /* Light mode bg */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

html[data-bs-theme="dark"] #preloader {
    background-color: #1a1d21; /* Dark mode bg */
}

/* Loader Content Wrapper */
.loader-content {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logo Styling */
.loader-logo {
    width: 60px; /* Adjust based on logo aspect ratio */
    height: auto;
    z-index: 2;
    animation: breathing 2s ease-in-out infinite;
}

/* Spinning Ring */
.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #032f6c; /* Brand Blue */
    animation: spin 1.5s linear infinite;
    z-index: 1;
}

html[data-bs-theme="dark"] .spinner-ring {
    border-top-color: #5b99ea; /* Luminous Blue for Dark Mode */
}

/* Ring Secondary Layer (Optional for depth) */
.spinner-ring::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: rgba(3, 47, 108, 0.3); /* Faint Brand Blue */
    animation: spin 3s linear infinite reverse;
}

html[data-bs-theme="dark"] .spinner-ring::before {
    border-top-color: rgba(91, 153, 234, 0.3);
}

/* Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes breathing {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.8; }
}

/* Hide Class */
body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
}

/* ===========================
   SOFT TOASTS
   =========================== */
.toast-soft-success {
    background-color: rgba(3, 148, 113, 0.1) !important;
    border: 1px solid rgba(3, 148, 113, 0.2) !important;
    color: #039471 !important;
    backdrop-filter: blur(8px);
}

.toast-soft-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    color: #dc3545 !important;
    backdrop-filter: blur(8px);
}

.toast-soft-success .btn-close,
.toast-soft-danger .btn-close {
    filter: none !important;
    opacity: 0.5;
}

/* Dark Mode Overrides for Soft Toasts */
html[data-bs-theme="dark"] .toast-soft-success {
    background-color: rgba(3, 148, 113, 0.15) !important;
    color: #47d7b2 !important;
}

html[data-bs-theme="dark"] .toast-soft-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f1707a !important;
}

html[data-bs-theme="dark"] .toast-soft-success .btn-close,
html[data-bs-theme="dark"] .toast-soft-danger .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* --- Topbar Responsiveness Fix --- */
@media (max-width: 400px) {
    .navbar-header .gap-2 {
        gap: 0.25rem !important; /* Reduce horizontal gaps */
    }
    
    .topbar-button {
        padding: 0.3rem 0.4rem !important; /* Smaller buttons */
        min-width: 32px;
    }

    .app-topbar .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 340px) {
    .mobile-logo {
        width: 100px !important;
        height: auto !important;
    }
    
    .navbar-header .gap-2 {
        gap: 0.15rem !important;
    }
}