/* --- Native Cross-Document View Transitions (Chromium) --- */
@view-transition {
    navigation: auto;
}

/* --- Premium Modern Typography & Color Tokens --- */
:root {
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    --tblr-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    
    /* Light Mode Tokens */
    --slh-bg-main: #f8fafc;
    --slh-card-bg: #ffffff;
    --slh-border-color: rgba(226, 232, 240, 0.8);
    --slh-text-primary: #1e293b;
    --slh-text-secondary: #64748b;
    --slh-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --slh-shadow-md: 0 4px 12px -2px rgba(0,0,0,0.05), 0 2px 6px -1px rgba(0,0,0,0.03);
    --slh-shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.06), 0 4px 12px -2px rgba(0,0,0,0.04);
    --slh-glass-bg: rgba(255, 255, 255, 0.7);
    --slh-glass-border: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] {
    /* Dark Mode OLED Tokens */
    --slh-bg-main: #060a12;
    --slh-card-bg: #0b111e;
    --slh-border-color: rgba(255, 255, 255, 0.05);
    --slh-text-primary: #f1f5f9;
    --slh-text-secondary: #94a3b8;
    --slh-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --slh-shadow-md: 0 4px 12px -2px rgba(0,0,0,0.25), 0 2px 6px -1px rgba(0,0,0,0.15);
    --slh-shadow-lg: 0 16px 32px -4px rgba(0,0,0,0.35), 0 6px 16px -2px rgba(0,0,0,0.25);
    --slh-glass-bg: rgba(11, 17, 30, 0.6);
    --slh-glass-border: rgba(255, 255, 255, 0.04);
    --slh-skeleton-base: #1a2234;
    --slh-skeleton-highlight: #243050;
}

/* =========================================================
   TOP PAGE-PROGRESS BAR (3px, sits below title bar)
   ========================================================= */
#global-page-progress {
    position: fixed;
    top: var(--window-bar-height, 32px);
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #206bc4, #4dabf7, #206bc4);
    background-size: 200% 100%;
    animation: progress-shimmer 1.2s linear infinite;
    z-index: 1065;
    opacity: 0;
    transition: width 0.15s ease, opacity 0.3s ease;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    will-change: width, opacity;
    transform: translateZ(0);
}

@keyframes progress-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================================================
   SKELETON SHIMMER LOADER
   Strategy: add .skeleton-block class to placeholder divs
   injected via JS into #skeleton-content-layer.
   The layer sits INSIDE .page-wrapper, AFTER the title bar,
   but is only visible while body has .page-loading class.
   ========================================================= */
:root {
    --slh-skeleton-base: #e2e8f0;
    --slh-skeleton-highlight: #f8fafc;
}

@keyframes skeleton-wave {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-block {
    display: block;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--slh-skeleton-base) 25%,
        var(--slh-skeleton-highlight) 50%,
        var(--slh-skeleton-base) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-wave 1.4s ease-in-out infinite;
    will-change: background-position;
    transform: translateZ(0);
}

/* Skeleton content layer — sits in flow, NOT fixed/absolute */
#skeleton-content-layer {
    display: none;
    padding: 1rem 1.5rem;
    pointer-events: none;
    contain: layout style;
}

/* Keep real content visible and interactive during page transitions while top progress bar indicates loading */
#skeleton-content-layer {
    display: none !important;
}

body.page-loading {
    cursor: progress;
}

/* =========================================================
   APP WINDOW TITLE BAR
   ========================================================= */
#app-window-bar {
    min-height: 42px;
    background: var(--tblr-bg-surface, var(--slh-glass-bg));
    -webkit-app-region: drag;
    app-region: drag;
    user-select: none;
    transition: background-color 0.3s ease, border-color 0.3s ease,
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}

#app-window-bar button,
#app-window-bar a,
#app-window-bar input,
#app-window-bar .theme-toggle-btn,
#app-window-bar .app-region-nodrag,
#app-window-bar .badge {
    -webkit-app-region: no-drag !important;
    app-region: no-drag !important;
    cursor: pointer;
}

/* Reload spin animation */
@keyframes spin-once {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#nav-btn-reload.spinning svg {
    animation: spin-once 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html {
    font-size: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    background-color: var(--slh-bg-main) !important;
    color: var(--slh-text-primary) !important;
    font-family: var(--tblr-font-sans-serif) !important;
    overflow-x: hidden;
    max-width: 100vw;
}

.page {
    overflow-x: hidden;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6, .card-title, .navbar-brand, .page-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Premium Card Upgrades & Shadows */
.card {
    background-color: var(--slh-card-bg) !important;
    border: 1px solid var(--slh-border-color) !important;
    box-shadow: var(--slh-shadow-sm) !important;
    border-radius: 12px !important;
    /* Use only compositor-friendly properties to avoid layout recalculation on hover */
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.card:hover {
    box-shadow: var(--slh-shadow-md) !important;
}

/* Hover-Lift micro-interaction */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--slh-shadow-lg) !important;
}

/* Glassmorphism Card Style */
.glass-card {
    background: var(--slh-glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--slh-glass-border) !important;
    box-shadow: var(--slh-shadow-md) !important;
}

/* Thin Custom Scrollbars for horizontal lists and responsive tables */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}



/* --- Sticky Headers Implementation --- */

/* 1. Card Headers (Section Headers) */
.sticky-header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: var(--navbar-height, 56px); /* Matches navbar height dynamically */
    z-index: 1020; /* Below navbar (1030) */
    background-color: var(--slh-card-bg) !important; /* Premium adaptive background */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-top: 0.5rem; /* Add padding for better spacing */
    padding-bottom: 0.5rem;
}

/* 2. Table Headers (General) */
.sticky-table-header th {
    position: -webkit-sticky;
    position: sticky;
    top: var(--navbar-height, 56px); /* Default for window-based sticky (Desktop fallback) */
    z-index: 1010;
    background-color: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
    background-clip: padding-box;
}

/* Ensure sticky tables do not clip the first row when scrolled */
.table:has(.sticky-table-header),
.table-responsive-sticky table {
    border-collapse: separate;
    border-spacing: 0;
}

/* 3. Table Headers Offset (for tables inside sticky cards) */
.sticky-table-header-offset th {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--navbar-height, 56px) + 50px);
    z-index: 1010;
    background-color: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
    background-clip: padding-box;
}

/* Ensure table headers have opaque backgrounds when sticky */
.table-dark .sticky-table-header th,
.table-dark .sticky-table-header-offset th {
    background-color: #212529;
    box-shadow: inset 0 -1px 0 #373b3e;
}

/* --- Mobile Optimization (Default) --- */
/* Use container-based scrolling for tables on mobile to support sticky headers + horizontal scroll */
.table-responsive-sticky {
    max-height: 75vh;       /* Limit height to force vertical scroll within container */
    overflow-y: auto;       /* Enable vertical scroll */
    overflow-x: auto;       /* Enable horizontal scroll */
    position: relative;     /* Context for sticky positioning */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Inside the mobile container, header sticks to TOP (0), not Navbar (56px) */
.table-responsive-sticky .sticky-table-header th,
.table-responsive-sticky .sticky-table-header-offset th {
    top: 0;
    z-index: 1020; /* Ensure it stays above rows */
}

/* Stacked Header Support (Second Row) - Mobile */
.table-responsive-sticky .sticky-table-header tr:nth-child(2) th {
    top: 35px; /* Offset below first row (approx 35px height) */
    z-index: 1020;
}

/* --- Desktop Override (Large Screens) --- */
@media (min-width: 642px) {
    /* Revert to Window-based sticky behavior */
    .table-responsive-sticky {
        overflow: visible; /* Disable container clipping so sticky works against window */
        max-height: none;  /* Remove height restriction */
    }

    /* Revert header top position to match Navbar height */
    .table-responsive-sticky .sticky-table-header th {
        top: var(--navbar-height, 56px);
    }
    /* Second row offset for desktop */
    .table-responsive-sticky .sticky-table-header tr:nth-child(2) th {
        top: calc(var(--navbar-height, 56px) + 35px);
    }

    .table-responsive-sticky .sticky-table-header-offset th {
        top: calc(var(--navbar-height, 56px) + 50px);
    }
}

/* Fix for flatpickr calendar z-index to float above modals (1055) */
.flatpickr-calendar {
    z-index: 1060 !important;
}

/* Modal Stacking Context Fix to ensure modals don't clip under backdrops */
.modal {
    z-index: 1055 !important;
}
.modal-backdrop {
    z-index: 1050 !important;
}

/* --- Back to Top Button --- */
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
    display: none; /* Hidden by default */
    z-index: 1090; /* Above most elements (navbar is 1030) */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* --- Contrast Fixes --- */
/* Darken muted and secondary text for better WCAG AA readability on white backgrounds (Light Theme only) */
[data-bs-theme="light"] .text-muted,
[data-bs-theme="light"] .text-secondary,
:root:not([data-bs-theme="dark"]) .text-muted,
:root:not([data-bs-theme="dark"]) .text-secondary {
    color: #495057 !important;
}

/* Ensure warning badges have high contrast text (dark charcoal instead of white) */
.badge.bg-warning,
.badge.bg-warning:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-yellow,
.badge-warning {
    color: #1e293b !important;
    --tblr-badge-color: #1e293b !important;
    background-color: #f59f00 !important;
}

.badge.bg-light,
.badge.bg-white,
.badge:not([class*="bg-"]) {
    color: #334155 !important;
    --tblr-badge-color: #334155 !important;
}

/* Standardize warning headers and tables to match others */
table th.bg-warning, table td.bg-warning {
    color: #1e293b !important;
}
.bg-warning.text-white {
    color: #1e293b !important;
}

/* Ensure disabled buttons have legible contrast in light theme */
:root:not([data-bs-theme="dark"]) .btn:disabled,
:root:not([data-bs-theme="dark"]) .btn.disabled {
    color: #495057 !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
}

/* --- Global Skeleton Loader Utility --- */
@keyframes skeleton-pulse {
    0% {
        background-color: #e2e5e8;
    }
    50% {
        background-color: #f1f3f5;
    }
    100% {
        background-color: #e2e5e8;
    }
}

.skeleton-loader {
    display: block;
    width: 100%;
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-row {
    height: 1.25rem;
    margin-bottom: 0.5rem;
}

.skeleton-row:last-child {
    margin-bottom: 0;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Only enforce pure white text on solid dark badges */
.badge.bg-primary:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-dark:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-danger:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-success:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-purple:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-indigo:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-pink:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-teal:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-cyan:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-blue:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-green:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-red:not([class*="-lt"]):not([class*="-subtle"]),
.badge.bg-black {
    color: #ffffff !important;
    --tblr-badge-color: #ffffff !important;
}

/* Protect explicit text color utility classes on badges */
.badge[class*="text-"] {
    color: inherit !important;
}

/* Single Source of Truth Exception for subtle background badges */
.badge[class*="-subtle"] {
    --tblr-badge-color: inherit;
}

/* ---------------------------------------------------
   Global Text & Badge Readability Standards for Dark Mode
   --------------------------------------------------- */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
    color: #94a3b8 !important; /* Crisp light slate */
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: #f1f5f9 !important; /* Pure crisp light off-white */
}

[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning:not([class*="-lt"]):not([class*="-subtle"]),
[data-bs-theme="dark"] .badge-warning {
    color: #0f172a !important;
    --tblr-badge-color: #0f172a !important;
    background-color: #f59f00 !important;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light-subtle,
[data-bs-theme="dark"] .badge.bg-white {
    color: #ffffff !important;
    --tblr-badge-color: #ffffff !important;
    background-color: var(--slh-card-bg, #0b111e) !important;
}

[data-bs-theme="dark"] .badge:not([class*="bg-"]) {
    color: #e2e8f0 !important;
    --tblr-badge-color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .btn:disabled,
[data-bs-theme="dark"] .btn.disabled {
    color: #64748b !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------------------------------------------------
   Global Brand Override for Dark Mode
--------------------------------------------------- */

/* 1. Force the blue chicken graphic to pure white for contrast */
[data-bs-theme="dark"] .slh-logo-graphic {
    fill: #ffffff !important;
    stroke: #ffffff !important; /* Just in case the graphic uses strokes instead of fills */
}

[data-bs-theme="dark"] .custom-logo-path,
[data-bs-theme="dark"] .slh-logo g[fill="none"] .slh-logo-graphic {
    fill: none !important;
    stroke: #ffffff !important;
}

/* 2. Remove the glaring white background circle so it blends seamlessly */
[data-bs-theme="dark"] .slh-logo-circle {
    fill: transparent !important;
}

/* 3. Ensure the 'Processing...' text in the loader is also white */
[data-bs-theme="dark"] .loader-overlay text,
[data-bs-theme="dark"] .loader-overlay .text-body {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Modern Wizard Stepper, Glassmorphism Cards, & Validation Glow Styles
   ========================================================================== */

/* 1. Guided Stepper Layout */
.wizard-stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 1.5rem 0.5rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scrollbar-width: none; /* Hide scrollbar for clean UI */
}
.wizard-stepper-container::-webkit-scrollbar {
    display: none;
}

.wizard-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
    min-width: 75px;
    flex-grow: 1;
    transition: all 0.3s ease;
}

.wizard-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--tblr-bg-surface, #ffffff);
    border: 2px solid var(--slh-border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--slh-text-secondary, #64748b);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--slh-shadow-sm);
    position: relative;
}

.wizard-step-title {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600 !important;
    color: var(--slh-text-secondary);
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Connective Line */
.wizard-step-progress-line {
    position: absolute;
    top: 36px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: var(--slh-border-color);
    z-index: 1;
    pointer-events: none;
}

.wizard-step-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #206bc4 0%, #4299e1 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stepper States */
.wizard-step-item.active .wizard-step-circle {
    border-color: #206bc4;
    color: #206bc4;
    box-shadow: 0 0 0 4px rgba(32, 107, 196, 0.15);
    transform: scale(1.1);
}
.wizard-step-item.active .wizard-step-title {
    color: #206bc4;
    font-weight: 700 !important;
}

.wizard-step-item.completed .wizard-step-circle {
    background-color: #2fb344;
    border-color: #2fb344;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(47, 179, 68, 0.2);
}
.wizard-step-item.completed .wizard-step-title {
    color: #2fb344;
}

/* 2. Glassmorphism Card Headers & Modern Icons */
.glass-card-header {
    background: var(--slh-glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid var(--slh-glass-border) !important;
    padding: 1rem 1.25rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.3s ease;
}

.glass-card-header .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: rgba(32, 107, 196, 0.08);
    color: #206bc4;
    margin-right: 0.75rem;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .glass-card-header .icon-wrapper {
    background-color: rgba(32, 107, 196, 0.15);
    color: #4299e1;
}

/* 3. Glowing Validation & Validation States */
@keyframes pulse-glow-warning {
    0% { box-shadow: 0 0 0 0 rgba(214, 57, 57, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(214, 57, 57, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 57, 57, 0); }
}

@keyframes pulse-glow-success {
    0% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0.25); }
    70% { box-shadow: 0 0 0 6px rgba(47, 179, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0); }
}

.glow-warning-card {
    border-color: #d63939 !important;
    box-shadow: 0 0 12px rgba(214, 57, 57, 0.15) !important;
    animation: pulse-glow-warning 2s infinite;
}

.glow-warning-input {
    border-color: #d63939 !important;
    background-color: rgba(214, 57, 57, 0.02) !important;
}
.glow-warning-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25) !important;
}

.glow-success-card {
    border-color: rgba(47, 179, 68, 0.4) !important;
    box-shadow: 0 0 8px rgba(47, 179, 68, 0.08) !important;
}

/* 4. Smooth Content Fading Transitions */
.wizard-step-section {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.wizard-step-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.wizard-step-section.all-visible {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 2rem;
}

/* 5. Navigation Buttons & Micro-interactions */
.wizard-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.wizard-nav-btn svg {
    transition: transform 0.2s ease;
}
.wizard-nav-btn-prev:hover svg {
    transform: translateX(-4px);
}
.wizard-nav-btn-next:hover svg {
    transform: translateX(4px);
}

/* Real-time Indicator Badges */
.badge-interactive {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
    color: var(--slh-text-secondary);
    border: 1px solid var(--slh-border-color);
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .badge-interactive {
    background-color: rgba(255, 255, 255, 0.03);
}

.badge-interactive.active-glow {
    background-color: rgba(32, 107, 196, 0.1);
    color: #206bc4;
    border-color: rgba(32, 107, 196, 0.2);
}

.badge-interactive.success-glow {
    background-color: rgba(47, 179, 68, 0.1);
    color: #2fb344;
    border-color: rgba(47, 179, 68, 0.2);
}

.badge-interactive.warning-glow {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.2);
}

.badge-interactive.danger-glow {
    background-color: rgba(214, 57, 57, 0.1);
    color: #d63939;
    border-color: rgba(214, 57, 57, 0.2);
    animation: pulse-glow-warning 2s infinite;
}

.water-pulse-drop {
    display: inline-block;
    animation: pulse-glow-success 2.5s infinite;
    border-radius: 50%;
}

/* Prefill Skeleton Mask Animations */
@keyframes skeleton-mask-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1.0; }
    100% { opacity: 0.6; }
}

.input-skeleton-mask {
    position: relative;
    pointer-events: none !important;
}

.input-skeleton-mask::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #e2e8f0 25%, #edf2f7 50%, #e2e8f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-mask-pulse 1.5s infinite ease-in-out !important;
    border-radius: 6px !important;
    z-index: 10 !important;
}

[data-bs-theme="dark"] .input-skeleton-mask::after {
    background: linear-gradient(90deg, #1a202c 25%, #2d3748 50%, #1a202c 75%) !important;
}

/* Collapsible Mini Performance Graph */
.mini-graph-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-graph-canvas-wrapper {
    position: relative;
    height: 180px;
    width: 100%;
}

/* Gestures Touch Visual Clues */
.touch-swipe-cue {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(32, 107, 196, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #206bc4;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.touch-swipe-cue-left {
    left: 10px;
}

.touch-swipe-cue-right {
    right: 10px;
}

/* Typography: Tabular Numerals Alignment for stats, tables, and weights */
.font-tabular-nums {
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* --- Executive Mock Dashboard Dark Theme Fixes --- */
[data-bs-theme="dark"] .card-header.bg-light,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
    background-color: var(--slh-card-bg) !important;
    color: var(--slh-text-primary) !important;
}

[data-bs-theme="dark"] .alert.bg-white {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--slh-text-primary) !important;
    border-color: var(--slh-border-color) !important;
}

[data-bs-theme="dark"] .nav-tabs.bg-light {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* --- Mobile PWA Floating Install Banner --- */
#mobile-pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    z-index: 1050;
    background: var(--slh-glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--slh-glass-border) !important;
    box-shadow: var(--slh-shadow-lg) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
    transform: translateY(150%);
    opacity: 0;
}

#mobile-pwa-banner.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

#mobile-pwa-banner .banner-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #206bc4 0%, #06b6d4 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.25);
    flex-shrink: 0;
}

#mobile-pwa-banner h4 {
    color: var(--slh-text-primary) !important;
}

#mobile-pwa-banner p {
    color: var(--slh-text-secondary) !important;
}

#mobile-pwa-banner .btn-ghost-secondary {
    color: var(--slh-text-secondary) !important;
    border: none !important;
    background: transparent !important;
}

#mobile-pwa-banner .btn-ghost-secondary:hover {
    background: rgba(148, 163, 184, 0.1) !important;
}

/* Hide desktop install button on mobile completely */
@media (max-width: 641.98px) {
    #pwa-install-btn {
        display: none !important;
    }
}

/* --- Climate Analysis Module Dark Theme Adjustments --- */
[data-bs-theme="dark"] #climate-module .text-slate-900,
[data-bs-theme="dark"] #climate-module .text-slate-800,
[data-bs-theme="dark"] #climate-module .text-slate-700 {
    color: var(--slh-text-primary) !important;
}

[data-bs-theme="dark"] #climate-module .text-slate-600,
[data-bs-theme="dark"] #climate-module .text-slate-500 {
    color: var(--slh-text-secondary) !important;
}

[data-bs-theme="dark"] #climate-module .border-slate-200,
[data-bs-theme="dark"] #climate-module .border-slate-100 {
    border-color: var(--slh-border-color) !important;
}

[data-bs-theme="dark"] #climate-module .bg-slate-50,
[data-bs-theme="dark"] #climate-module .bg-slate-100,
[data-bs-theme="dark"] #climate-module .bg-slate-50\/50 {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-bs-theme="dark"] #climate-module .hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] #climate-module .bg-white.text-slate-800 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--slh-text-primary) !important;
}

[data-bs-theme="dark"] #climate-module input,
[data-bs-theme="dark"] #climate-module textarea,
[data-bs-theme="dark"] #climate-module select {
    background-color: #151f32 !important;
    color: var(--slh-text-primary) !important;
    border-color: var(--slh-border-color) !important;
}

[data-bs-theme="dark"] #climate-module input::placeholder,
[data-bs-theme="dark"] #climate-module textarea::placeholder {
    color: #475569 !important;
}

[data-bs-theme="dark"] #climate-module #dropzone {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] #climate-module .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-bs-theme="dark"] #climate-module .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-bs-theme="dark"] #climate-module .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-bs-theme="dark"] #climate-module .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fdbb2d !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

[data-bs-theme="dark"] #climate-module .bg-sky-50 {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

[data-bs-theme="dark"] #climate-module .bg-red-50\/50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

[data-bs-theme="dark"] #climate-module .bg-yellow-50\/50 {
    background-color: rgba(234, 179, 8, 0.1) !important;
    border-color: rgba(234, 179, 8, 0.2) !important;
}

[data-bs-theme="dark"] #climate-module .bg-green-50\/50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

[data-bs-theme="dark"] #climate-module #canvas-render-box {
    background-color: #060a12 !important;
    border-color: var(--slh-border-color) !important;
    color: var(--slh-text-primary) !important;
}

[data-bs-theme="dark"] #climate-module #canvas-render-box .bg-slate-200 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--slh-text-secondary) !important;
}

/* --- PWA View Transitions --- */
@view-transition {
  navigation: auto;
}

/* --- Mobile Ergonomic Bottom Navigation Bar --- */
/* Hidden on desktop, shown only on mobile as a floating rounded bar */
#mobile-bottom-nav {
    display: none !important; /* Hide on desktop by default */
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);
    z-index: 1030;
    padding: 2px 8px;
    border: 1px solid var(--slh-border-color);
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
 
/* Show on mobile screens only */
@media (max-width: 641.98px) {
    #mobile-bottom-nav {
        display: block !important;
    }
    
    /* Adjust page content padding so content isn't hidden behind the bar */
    body, .page-wrapper, .page-body {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
 
    /* Raise floating buttons, toasts, and PWA banners above the bottom navigation bar */
    #btn-back-to-top,
    .ai-chat-btn {
        left: 20px !important;
        right: auto !important;
        bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .ai-chat-box {
        bottom: calc(155px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #dynamic-toast-container {
        bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #mobile-pwa-banner {
        bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hide bottom navbar and floating controls when a modal is active to prevent overlapping with modal footers */
    body.modal-open #mobile-bottom-nav {
        display: none !important;
    }
    body.modal-open #btn-back-to-top,
    body.modal-open .ai-chat-btn,
    body.modal-open .ai-chat-box {
        display: none !important;
    }
}

[data-bs-theme="dark"] #mobile-bottom-nav {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(27, 36, 48, 0.85); /* tabler dark card background with opacity */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}

#mobile-bottom-nav .nav-link {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: all 0.2s ease-in-out;
    color: #626976 !important;
    padding: 6px 0;
}

[data-bs-theme="dark"] #mobile-bottom-nav .nav-link {
    color: #94a3b8 !important;
}

#mobile-bottom-nav .nav-link:hover,
#mobile-bottom-nav .nav-link:focus {
    color: #1e293b !important;
    background: rgba(148, 163, 184, 0.08);
}

[data-bs-theme="dark"] #mobile-bottom-nav .nav-link:hover,
[data-bs-theme="dark"] #mobile-bottom-nav .nav-link:focus {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.06);
}

#mobile-bottom-nav .nav-link.active {
    color: #005eb8 !important;
    font-weight: 600;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] #mobile-bottom-nav .nav-link.active {
    color: #38bdf8 !important;
}

/* --- Bento Grid Layout System --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
}

@media (min-width: 642px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bento-card-large {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .bento-card-wide {
        grid-column: span 2;
    }
    
    .bento-card-tall {
        grid-row: span 2;
    }
}

/* --- Scroll-Driven Page Progress Indicator --- */
#scroll-progress {
    position: fixed;
    top: var(--window-bar-height, 32px);
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 1060;
    pointer-events: none;
    transition: transform 0.08s ease-out;
    box-shadow: 0 1px 3px rgba(6, 182, 212, 0.3);
}

@supports (animation-timeline: scroll()) {
    @keyframes grow-progress {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

    #scroll-progress {
        animation: grow-progress auto linear;
        animation-timeline: scroll();
    }

    @keyframes shrink-header {
        from {
            padding-top: 12px;
            padding-bottom: 12px;
            background-color: rgba(15, 30, 44, 1);
        }
        to {
            padding-top: 6px;
            padding-bottom: 6px;
            background-color: rgba(15, 30, 44, 0.85);
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
    }

    .main-header {
        animation: shrink-header auto linear;
        animation-timeline: scroll();
        animation-range: 0 100px;
    }
}

/* --- Hide Top Headers on Mobile for Space Optimization --- */
@media (max-width: 641.98px) {
    .main-header,
    .secondary-header {
        display: none !important;
    }
}

/* Remove dropdown arrow indicator for cleaner mobile apps buttons */
.dropdown-toggle-nocaret::after {
    display: none !important;
}

/* Utility: button that visually looks like a nav-link (no browser button chrome) */
.btn-reset {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: center;
    /* Do NOT set width:100% — it expands and breaks flex alignment in bottom nav */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Mobile Dropup Menu (Profile / Modules) --- */
.mobile-dropup-menu {
    position: absolute !important;
    bottom: 100% !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    border: 1px solid var(--slh-border-color) !important;
    background-color: var(--slh-card-bg) !important;
    min-width: 220px;
    padding: 6px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12) !important;
}

.mobile-dropup-menu .dropdown-item {
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--slh-text-primary);
    transition: background 0.15s ease;
}

.mobile-dropup-menu .dropdown-item:hover,
.mobile-dropup-menu .dropdown-item:focus {
    background-color: rgba(148,163,184,0.08);
    color: var(--slh-text-primary);
}

/* --- Mobile Slide-Up Navigation Drawer --- */
#mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#mobile-nav-overlay.show {
    display: block;
    opacity: 1;
}

#mobile-nav-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    background-color: var(--slh-card-bg);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--slh-border-color);
    z-index: 10001;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
}

#mobile-nav-drawer.show {
    transform: translateY(0);
}

.drawer-handle {
    width: 40px;
    height: 4px;
    background-color: var(--slh-border-color);
    border-radius: 2px;
    margin: 12px auto 0;
    cursor: pointer;
    flex-shrink: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--slh-border-color);
    flex-shrink: 0;
}

.drawer-body {
    overflow-y: auto;
    padding: 12px 12px 24px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.drawer-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slh-text-secondary);
    padding: 10px 12px 4px;
}

.drawer-divider {
    height: 1px;
    background-color: var(--slh-border-color);
    margin: 10px 12px;
}

.drawer-item {
    display: flex;
    align-items: center;
    padding: 13px 14px;
    border-radius: 10px;
    color: var(--slh-text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s ease;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.drawer-item:hover,
.drawer-item:focus {
    background-color: rgba(148, 163, 184, 0.08);
    color: var(--slh-text-primary);
    text-decoration: none;
}

.drawer-item.text-danger {
    color: #d63939 !important;
}

.drawer-item.text-danger:hover {
    background-color: rgba(214, 57, 57, 0.08);
}

[data-bs-theme="dark"] .drawer-item.text-danger {
    color: #f87171 !important;
}

/* Sub-items inside Health Log section — slightly indented and smaller */
.drawer-item-sub {
    padding-left: 28px !important;
    font-size: 0.9rem !important;
    opacity: 0.9;
}

.drawer-item-sub .icon {
    color: var(--slh-text-secondary);
}

/* Only show drawer on mobile */
@media (min-width: 768px) {
    #mobile-nav-overlay,
    #mobile-nav-drawer {
        display: none !important;
    }
}

/* Ensure the page layout is always vertical (stacked), never side-by-side flex layout on desktop */
.page {
    flex-direction: column !important;
}

/* Ensure navbar background and sticky wrapper span exactly 100% of the screen width */
.sticky-top,
.main-header,
.secondary-header {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* --- Window Controls Overlay (WCO) API Styles for Installed PWA --- */
/* NOTE: Legacy .main-header WCO block removed — #app-window-bar is now the sole title bar. */

/* --- Broiler Module Responsive Mobile Optimizations --- */

/* Prevent iOS forced auto-zoom on input focus */
@media (max-width: 641.98px) {
    input, select, textarea, .form-control, .form-select {
        font-size: 16px !important;
    }
}

/* Responsive border utility for mobile grid columns */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid var(--tblr-border-color) !important;
    }
}

/* Responsive chart containers for mobile */
.chart-container-responsive {
    position: relative;
    height: 300px;
    width: 100%;
}
@media (min-width: 768px) {
    .chart-container-responsive {
        height: 500px;
    }
}

/* Override Tabler core scrollbar layout shift compensation which causes page misalignment (white gap on the left) on desktop */
@media (min-width: 642px) {
    :host, :root {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Base horizontal containment rules: ensure root viewport / page wrapper never overflows horizontally */
#main-page-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    overflow-x: clip;
}

.page-body,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-fluid,
.card {
    min-width: 0;
}

/* Ensure wide tables or content stay within scrollable containers instead of leaking horizontal overflow to the page */
.table-responsive,
.recipe-table-scrollable,
.scrollable-horizontal-container,
.batch-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar,
.recipe-table-scrollable::-webkit-scrollbar,
.scrollable-horizontal-container::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.recipe-table-scrollable::-webkit-scrollbar-thumb,
.scrollable-horizontal-container::-webkit-scrollbar-thumb {
    background-color: var(--tblr-border-color, #cbd5e1);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-track,
.recipe-table-scrollable::-webkit-scrollbar-track,
.scrollable-horizontal-container::-webkit-scrollbar-track {
    background-color: transparent;
}

[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .recipe-table-scrollable::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .scrollable-horizontal-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Feedmill Domain: Remove increment/decrement spinner buttons on numeric fields (direct input only) */
.domain-feedmill input[type="number"]::-webkit-outer-spin-button,
.domain-feedmill input[type="number"]::-webkit-inner-spin-button,
[data-domain="feedmill"] input[type="number"]::-webkit-outer-spin-button,
[data-domain="feedmill"] input[type="number"]::-webkit-inner-spin-button,
.feedmill-domain input[type="number"]::-webkit-outer-spin-button,
.feedmill-domain input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.domain-feedmill input[type="number"],
[data-domain="feedmill"] input[type="number"],
.feedmill-domain input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* --- Collapsible Left Vertical Sidebar for Desktop --- */
@media (min-width: 642px) {
    :root {
        --sidebar-width: 250px;
        --navbar-height: 0px !important;
    }

    body.sidebar-collapsed {
        --sidebar-width: 56px;
    }

    #desktop-sidebar {
        display: flex !important;
        width: var(--sidebar-width);
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1070 !important;
        background: linear-gradient(185deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-right: none !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
        overflow: visible;
        flex-direction: column;
    }

    /* Page row wrapper adjustments */
    .page {
        flex-direction: row !important;
    }
    
    #main-page-wrapper {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        min-width: 0 !important;
        max-width: calc(100% - var(--sidebar-width)) !important;
        overflow-x: clip;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
/* Hide top sticky headers/navbars on desktop except app-window-bar when in standalone/PWA or explicitly enabled */
    header.sticky-top,
    nav.sticky-top,
    .navbar.sticky-top,
    .main-header.sticky-top,
    .secondary-header.sticky-top {
        display: none !important;
    }

    #btn-back-to-top {
        left: calc(var(--sidebar-width) + 20px) !important;
        right: auto !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

@media (max-width: 641.98px) {
    #desktop-sidebar {
        display: none !important;
    }
}

/* Sidebar nav groups & department spacing */
#desktop-sidebar .sidebar-nav-group {
    margin-bottom: 1.25rem !important;
}

#desktop-sidebar .sidebar-nav-group:not(:last-child) {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="light"] #desktop-sidebar .sidebar-nav-group:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#desktop-sidebar .sidebar-heading {
    padding: 0.5rem 1rem 0.35rem 1rem !important;
    letter-spacing: 0.06em;
}

/* Sidebar inner elements styling */
#desktop-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px;
    margin: 3px 12px;
    padding: 7px 12px !important;
    transition: all 0.2s ease-in-out;
    font-size: 0.825rem;
}

#desktop-sidebar .nav-link:hover,
#desktop-sidebar .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08);
}

#desktop-sidebar .nav-link.active {
    font-weight: 600;
}

/* Sub-items in collapsed sections (inside ul.nav) */
#desktop-sidebar ul.nav .nav-item {
    margin: 2px 0;
}

#desktop-sidebar ul.nav .nav-link {
    padding: 5px 10px !important;
    margin: 2px 4px;
}

/* Collapse state overrides */
body.sidebar-collapsed #desktop-sidebar .brand-text,
body.sidebar-collapsed #desktop-sidebar .user-info,
body.sidebar-collapsed #desktop-sidebar .collapse-btn-text,
body.sidebar-collapsed #desktop-sidebar .nav-link-title,
body.sidebar-collapsed #desktop-sidebar .sidebar-heading,
body.sidebar-collapsed #desktop-sidebar .chevron-icon {
    display: none !important;
}

body.sidebar-collapsed #desktop-sidebar .sidebar-controls {
    flex-direction: column;
    padding: 8px 4px !important;
}

body.sidebar-collapsed #desktop-sidebar .sidebar-brand-wrapper {
    justify-content: center !important;
}

body.sidebar-collapsed #desktop-sidebar .sidebar-nav-group {
    margin-bottom: 1rem !important;
    padding-bottom: 0.65rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="light"] body.sidebar-collapsed #desktop-sidebar .sidebar-nav-group {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.sidebar-collapsed #desktop-sidebar .nav-link {
    justify-content: center !important;
    padding: 9px 0 !important;
    margin: 5px 6px !important;
    border-radius: 8px;
}

body.sidebar-collapsed #desktop-sidebar .collapse-icon {
    transform: rotate(180deg);
}

body.sidebar-collapsed #desktop-sidebar .collapse {
    display: none !important;
}

#desktop-sidebar .sidebar-nav-wrapper {
    scrollbar-width: none;
}

#desktop-sidebar .sidebar-nav-wrapper::-webkit-scrollbar {
    display: none;
}


/* Show brand-expanded, hide brand-collapsed by default */
#desktop-sidebar .brand-expanded {
    display: flex !important;
}
#desktop-sidebar .brand-collapsed {
    display: none !important;
}

/* Toggle visibility when body has sidebar-collapsed class */
body.sidebar-collapsed #desktop-sidebar .brand-expanded {
    display: none !important;
}
body.sidebar-collapsed #desktop-sidebar .brand-collapsed {
    display: flex !important;
}

/* Sticky headers mobile optimization (no gap at top of screen) */
@media (max-width: 641.98px) {
    .sticky-header {
        top: 0 !important;
    }
}

/* Sidebar dark mode glassmorphism */
[data-bs-theme="dark"] #desktop-sidebar {
    background: linear-gradient(185deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: none !important;
}

/* Sidebar collapsed theme background matching */
body.sidebar-collapsed #desktop-sidebar {
    background: var(--slh-bg-main) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hide top sticky headers/navbars globally, unless running as an installed PWA (standalone or Window Controls Overlay mode) */
header.sticky-top,
nav.sticky-top,
.navbar.sticky-top,
.main-header,
.secondary-header,
#app-window-bar.sticky-top {
    display: none !important;
}

@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    #app-window-bar.sticky-top {
        display: flex !important;
    }
}

/* Ensure table headers and inner table elements with sticky-top are NEVER hidden */
table thead,
table thead.sticky-top,
thead.sticky-top,
.table thead.sticky-top {
    display: table-header-group !important;
}

table thead th,
table thead.sticky-top th,
th.sticky-top {
    display: table-cell !important;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Remove all borders inside the sidebar and between components to make it completely seamless */
#desktop-sidebar,
#desktop-sidebar *,
#desktop-sidebar .sidebar-brand-wrapper,
#desktop-sidebar .sidebar-controls,
#desktop-sidebar .sidebar-footer,
#desktop-sidebar .border-start,
#desktop-sidebar .border-bottom,
#desktop-sidebar .border-top,
#desktop-sidebar .border-secondary-subtle {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Centering and formatting overrides for collapsed sidebar footer elements */
body.sidebar-collapsed #desktop-sidebar .sidebar-footer {
    padding: 12px 0 !important;
    display: flex;
    justify-content: center;
}
body.sidebar-collapsed #desktop-sidebar .sidebar-footer .dropup {
    width: 100%;
    display: flex;
    justify-content: center;
}
body.sidebar-collapsed #desktop-sidebar .sidebar-footer .dropup > a {
    padding: 0 !important;
    justify-content: center !important;
    width: 100%;
}

/* Position the profile dropdown to stay anchored above footer and pop out on collapse */
#desktop-sidebar .sidebar-footer .dropup .dropdown-menu {
    position: absolute !important;
    bottom: 100% !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-bottom: 8px !important;
}

body.sidebar-collapsed #desktop-sidebar .sidebar-footer .dropup .dropdown-menu {
    position: fixed !important;
    left: 70px !important;
    bottom: 10px !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1050;
}

/* Sidebar text/button colors for Light Mode */
#desktop-sidebar {
    color: var(--slh-text-primary) !important;
}
#desktop-sidebar .nav-link {
    color: var(--slh-text-secondary) !important;
}
#desktop-sidebar .nav-link:hover,
#desktop-sidebar .nav-link.active {
    color: var(--slh-text-primary) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}
#desktop-sidebar .sidebar-brand-wrapper a,
#desktop-sidebar .sidebar-footer .user-info .fw-bold,
#desktop-sidebar .sidebar-nav-group > a,
#desktop-sidebar .btn-ghost-light,
#desktop-sidebar .sidebar-controls button {
    color: var(--slh-text-primary) !important;
}
#desktop-sidebar .sidebar-controls button {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--slh-text-secondary) !important;
}
#desktop-sidebar .sidebar-controls button:hover {
    color: var(--slh-text-primary) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}
#desktop-sidebar .sidebar-nav-group > a {
    font-weight: bold;
}
#desktop-sidebar .small.text-muted,
#desktop-sidebar .sidebar-footer .user-info .text-muted {
    color: var(--slh-text-secondary) !important;
}

/* Sidebar overrides for Dark Mode */
[data-bs-theme="dark"] #desktop-sidebar {
    color: var(--slh-text-primary) !important;
}
[data-bs-theme="dark"] #desktop-sidebar .nav-link {
    color: var(--slh-text-secondary) !important;
}
[data-bs-theme="dark"] #desktop-sidebar .nav-link:hover,
[data-bs-theme="dark"] #desktop-sidebar .nav-link.active {
    color: var(--slh-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] #desktop-sidebar .sidebar-brand-wrapper a,
[data-bs-theme="dark"] #desktop-sidebar .sidebar-footer .user-info .fw-bold,
[data-bs-theme="dark"] #desktop-sidebar .sidebar-nav-group > a,
[data-bs-theme="dark"] #desktop-sidebar .btn-ghost-light,
[data-bs-theme="dark"] #desktop-sidebar .sidebar-controls button {
    color: var(--slh-text-primary) !important;
}
[data-bs-theme="dark"] #desktop-sidebar .sidebar-controls button {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--slh-text-secondary) !important;
}
[data-bs-theme="dark"] #desktop-sidebar .sidebar-controls button:hover {
    color: var(--slh-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] #desktop-sidebar .small.text-muted,
[data-bs-theme="dark"] #desktop-sidebar .sidebar-footer .user-info .text-muted {
    color: var(--slh-text-secondary) !important;
}

/* --- YouTube Music Style App Control Title Bar --- */
#app-window-bar {
    background-color: rgba(248, 250, 252, 0.85) !important;
    border-bottom: 1px solid var(--slh-border-color, rgba(226, 232, 240, 0.8)) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-bs-theme="dark"] #app-window-bar {
    background-color: rgba(11, 17, 30, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#app-window-bar .btn-ghost-secondary {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slh-text-secondary);
    transition: all 0.2s ease;
}

#app-window-bar .btn-ghost-secondary svg {
    width: 15px;
    height: 15px;
}

#app-window-bar .btn-ghost-secondary:hover {
    color: var(--slh-text-primary);
    background-color: rgba(0, 0, 0, 0.06);
    transform: scale(1.05);
}

[data-bs-theme="dark"] #app-window-bar .btn-ghost-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#app-window-bar .btn-ghost-secondary:active {
    transform: scale(0.95);
}

#app-window-bar .theme-toggle-btn {
    width: auto !important;
    flex-shrink: 0 !important;
}

/* --- Window Controls Overlay & Standalone In-App Title Bar Layout --- */
:root {
    --window-bar-height: 32px;
}

#app-window-bar {
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--window-bar-height, 32px) !important;
    min-height: var(--window-bar-height, 32px) !important;
    max-height: var(--window-bar-height, 32px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

#app-window-bar .wco-left-zone {
    flex-shrink: 0;
}

/*
 * In PWA standalone / WCO mode, #app-window-bar covers the full window width,
 * sitting exactly inside the native OS titlebar area (32-33px).
 * It has z-index: 1050 (below #desktop-sidebar's z-index: 1070) so the sidebar
 * and its brand logo are rendered in front at all times.
 */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    #app-window-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        z-index: 1050 !important;
        /* Height matches native OS titlebar area (32-33px) */
        height: var(--wco-bar-height, env(titlebar-area-height, 32px)) !important;
        min-height: var(--wco-bar-height, env(titlebar-area-height, 32px)) !important;
        max-height: var(--wco-bar-height, env(titlebar-area-height, 32px)) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* Right padding: dynamically set by JS or fallback to avoid native WCO window buttons */
        padding-right: var(--wco-right-inset, max(0.75rem, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)))) !important;
        padding-left: 0.5rem;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        transition: padding-right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #app-window-bar.wco-active {
        /* Safe fallback right inset when WCO is active if JS has not run yet */
        padding-right: var(--wco-right-inset, 185px) !important;
    }

    /*
     * On desktop (>=642px), the left nodrag zone (nav buttons) starts
     * AFTER the sidebar so the back/forward/reload buttons sit to the right of it.
     * Keep margin-left strictly aligned with var(--sidebar-width) so it is NEVER
     * tucked behind the sidebar, whether the title bar is shown or hidden.
     */
    #app-window-bar .wco-left-zone {
        margin-left: max(var(--sidebar-width, 250px), var(--wco-left-inset, 0px)) !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Compensate #main-page-wrapper for the fixed title bar */
    #main-page-wrapper {
        padding-top: var(--wco-bar-height, env(titlebar-area-height, 32px)) !important;
    }

    /* Position scrolling indicator and loading line below the native/built-in WCO title bar */
    #scroll-progress,
    #global-page-progress {
        top: var(--wco-bar-height, env(titlebar-area-height, 32px)) !important;
    }
}

/* Mobile standalone (no sidebar, <642px) — no sidebar offset on left zone */
@media (max-width: 641.98px) and ((display-mode: standalone) or (display-mode: window-controls-overlay)) {
    #app-window-bar {
        padding-left: max(0.5rem, var(--wco-left-inset, env(titlebar-area-x, 0px))) !important;
    }
    #app-window-bar .wco-left-zone {
        margin-left: 0 !important;
    }
}

/* Simulation Mode Fixed Banner — sticks just below the window bar */
#simulation-banner {
    position: sticky !important;
    top: var(--window-bar-height, 32px) !important;
    z-index: 1030;
    min-height: 34px;
    background: #0f172a;
    color: #f1f5f9;
    border-bottom: 2px solid #06b6d4 !important;
    width: 100%;
    overflow: visible;
}

@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    #simulation-banner {
        position: fixed !important;
        top: env(titlebar-area-height, 32px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 1045 !important;
        overflow-x: hidden !important;
    }

    body.is-simulating #main-page-wrapper {
        padding-top: calc(
            env(titlebar-area-height, 32px) + 34px
        ) !important;
    }

    body.is-simulating #scroll-progress,
    body.is-simulating #global-page-progress {
        top: calc(env(titlebar-area-height, 32px) + 34px) !important;
    }
}

/* On desktop (>=642px) in standalone/WCO, simulation banner starts after the sidebar */
@media (min-width: 642px) and ((display-mode: standalone) or (display-mode: window-controls-overlay)) {
    #simulation-banner {
        left: var(--sidebar-width, 250px) !important;
        right: 0 !important;
        width: calc(100vw - var(--sidebar-width, 250px)) !important;
        max-width: calc(100vw - var(--sidebar-width, 250px)) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* On desktop (>=642px), progress bars also start after the sidebar */
@media (min-width: 642px) {
    #scroll-progress,
    #global-page-progress {
        left: var(--sidebar-width, 250px) !important;
        width: calc(100vw - var(--sidebar-width, 250px)) !important;
        max-width: calc(100vw - var(--sidebar-width, 250px)) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}


/* --- Global Page Header Layout (Title & Subtitle Full Width End-to-End) --- */
.page-header .row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

.page-header .col-12.col-xl,
.page-header .col-12.col-lg,
.page-header .col-12.col-md,
.page-header .page-title-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.page-header .page-title {
    width: 100% !important;
    white-space: normal !important;
    word-break: break-word;
}

.page-header .col-12.col-xl-auto,
.page-header .col-12.col-lg-auto,
.page-header .col-12.col-md-auto,
.page-header .page-actions-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0.5rem !important;
}