/* ============================================================
   Sidebar & Layout — Fixed Position Fix
   ============================================================ */
.sidebar-expand-lg.layout-fixed .app-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px !important; /* Explicit width to match offsets */
    height: 100vh !important;
    max-height: 100vh !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    z-index: 1035;
}

.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
    height: calc(100vh - 3.5rem) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide sidebar scrollbar */
.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}
.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
    scrollbar-width: none !important;
}

/* Header, Main, and Footer Adjustments for Fixed Sidebar */
.sidebar-expand-lg.layout-fixed:not(.sidebar-collapse) .app-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 250px !important;
    z-index: 1034;
    transition: left 0.3s ease-in-out;
}

.sidebar-expand-lg.layout-fixed:not(.sidebar-collapse) .app-main,
.sidebar-expand-lg.layout-fixed:not(.sidebar-collapse) .app-footer {
    margin-left: 250px !important;
    transition: margin-left 0.3s ease-in-out;
}

.sidebar-expand-lg.layout-fixed .app-main {
    padding-top: 5rem !important; /* Increased padding to ensure headings are not hidden */
}

/* Sidebar collapse adjustments (when sidebar is hidden/collapsed) */
.sidebar-collapse.layout-fixed .app-sidebar {
    width: 0 !important; /* Fully hide if mini is not showing or preferred */
    transform: translateX(-100%);
}

.sidebar-collapse.layout-fixed .app-header {
    left: 0 !important;
}

.sidebar-collapse.layout-fixed .app-main,
.sidebar-collapse.layout-fixed .app-footer {
    margin-left: 0 !important;
}

/* Handle sidebar-mini specifically if needed */
.sidebar-mini.sidebar-collapse.layout-fixed .app-sidebar {
    width: 4.6rem !important;
    transform: none !important;
}
.sidebar-mini.sidebar-collapse.layout-fixed .app-header {
    left: 4.6rem !important;
}
.sidebar-mini.sidebar-collapse.layout-fixed .app-main,
.sidebar-mini.sidebar-collapse.layout-fixed .app-footer {
    margin-left: 4.6rem !important;
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    .sidebar-expand-lg.layout-fixed .app-header,
    .sidebar-expand-lg.layout-fixed .app-main,
    .sidebar-expand-lg.layout-fixed .app-footer {
        margin-left: 0 !important;
        left: 0 !important;
    }
    .sidebar-expand-lg.layout-fixed .app-sidebar {
        position: fixed !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    .sidebar-open.sidebar-expand-lg.layout-fixed .app-sidebar {
        transform: translateX(0);
    }
}


/* ============================================================
   Typography — clear, readable text throughout the UI
   ============================================================ */

body {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600 !important;
    color: #111111 !important;
}

.table th,
.table thead th {
    font-weight: 600 !important;
    color: #111111 !important;
}
.table td {
    color: #222222 !important;
    font-weight: 400 !important;
}

label,
.form-label,
.col-form-label {
    font-weight: 500 !important;
    color: #1a1a1a !important;
}

.form-control,
.form-select {
    color: #1a1a1a !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* ============================================================
   Sidebar — dark design
   ============================================================ */

/* Sidebar base background */
.app-sidebar {
    background-color: #1e2530 !important;
}

/* Border between sidebar and content */
.sidebar-expand-lg.layout-fixed .app-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Brand / Logo area */
.app-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.75rem 1rem !important;
}

.app-sidebar .brand-text {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
}

/* User panel */
.app-sidebar .user-panel {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 0.5rem !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.app-sidebar .user-panel .info a {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.app-sidebar .user-panel .info a:hover {
    color: #93c5fd !important;
}

.app-sidebar .user-panel .image i.fa-user-circle {
    font-size: 2rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Nav section headers */
.app-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 1rem 1rem 0.35rem !important;
    margin-top: 0.25rem !important;
}

/* Nav items wrapper */
.app-sidebar .sidebar-menu {
    padding: 0 0.5rem 1rem !important;
}

/* Nav links */
.app-sidebar .nav-link,
.app-sidebar .nav-link p,
.app-sidebar .sidebar-menu .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    border-radius: 8px !important;
    padding: 0.48rem 0.85rem !important;
    margin: 1px 0 !important;
    transition: background 0.18s ease, color 0.18s ease !important;
    position: relative !important;
}

/* Nav icons */
.app-sidebar .nav-icon,
.app-sidebar .nav-link .nav-icon {
    color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
    width: 1.4rem !important;
    font-size: 0.88rem !important;
    transition: color 0.18s ease !important;
}

/* Hover state */
.app-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
.app-sidebar .nav-link:hover p,
.app-sidebar .nav-link:hover .nav-icon {
    color: #ffffff !important;
}

/* Active state — blue left-border accent */
.app-sidebar .nav-link.active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    box-shadow: inset 3px 0 0 #3b82f6 !important;
    border-radius: 0 8px 8px 0 !important;
}
.app-sidebar .nav-link.active p,
.app-sidebar .nav-link.active .nav-icon {
    color: #93c5fd !important;
    font-weight: 600 !important;
}

/* Treeview arrow */
.app-sidebar .nav-arrow {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 0.7rem !important;
    transition: transform 0.2s ease !important;
}

/* ============================================================
   Navbar — readable text and icons
   ============================================================ */

.app-header .nav-link,
.app-header .navbar-brand,
.app-header .navbar-text {
    color: #333333 !important; 
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.app-header .nav-link:hover {
    color: #000000 !important;
}

/* Force Sidebar Toggle Visibility */
.app-header .nav-link[data-lte-toggle="sidebar"],
.app-header .nav-link[data-lte-toggle="sidebar"] i {
    color: #333333 !important;
    font-size: 1.25rem !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1050 !important;
}

/* Ensure the navbar itself is visible and has a background */
.app-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* ============================================================
   Page content area — clear main content text
   ============================================================ */

/* Content header title */
.app-content-header h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #111111 !important;
}

/* Breadcrumbs */
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #444444 !important;
}
.breadcrumb-item a {
    color: #1a56db !important;
}

/* Cards */
.card-title {
    font-weight: 600 !important;
    color: #111111 !important;
}
.card-text,
.card-body {
    color: #222222 !important;
}

/* Buttons — text always readable */
.btn {
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Badges */
.badge {
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* Fieldsets / inline groups */
fieldset legend,
.fieldset-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #111111 !important;
}

/* Django admin field help text */
.help {
    color: #555555 !important;
    font-size: 12px !important;
}

/* Select2 dropdown text */
.select2-results__option {
    color: #1a1a1a !important;
    font-size: 14px !important;
}

/* Alert text */
.alert {
    font-weight: 500 !important;
}

/* ============================================================
   Footer
   ============================================================ */
.app-footer {
    font-size: 13px !important;
    color: #444444 !important;
}

/* ============================================================
   Global Loader — Centered, No Blur
   ============================================================ */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Fully transparent as requested */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#global-loader.show {
    opacity: 1;
    pointer-events: all;
}

#global-loader.d-none {
    display: none !important;
}

.loader-spinner {
    position: relative;
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 193, 7, 0.1);
    border-top: 4px solid #ffc107; /* Warning Yellow - Solar Theme */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    /* No blur, just sharp shadow for visibility */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.loader-spinner::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 3px solid rgba(255, 193, 7, 0.05);
    border-bottom: 3px solid #ffc107;
    border-radius: 50%;
    animation: spin 0.8s linear reverse infinite;
}

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