:root,
[data-theme="light"] {
    /* Primary brand colors - inspired by Rolling Plains logo teal */
    --color-primary: #00857c;
    --color-primary-hover: #006b63;
    --color-primary-light: #e6f4f3;
    --color-primary-rgb: 0, 133, 124;

    /* Point Bootstrap's primary utilities (bg-primary, text-primary, text-bg-primary,
       border-primary) at the brand teal; resolves per-theme via --color-primary */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-primary-text-emphasis: var(--color-primary-hover);
    --bs-primary-bg-subtle: var(--color-primary-light);
    --bs-primary-border-subtle: #99cecb;

    /* Secondary/accent */
    --color-secondary: #5c8a87;
    --color-secondary-hover: #4a726f;

    /* Background colors */
    --color-bg-body: #f8fafa;
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-muted: #f1f5f5;
    --color-bg-sidebar: #ffffff;
    --color-bg-navbar: #212529;

    /* Text colors */
    --color-text-primary: #1a2e2d;
    --color-text-secondary: #4a6463;
    --color-text-muted: #6b8382;
    --color-text-inverse: #ffffff;
    --color-text-link: #00857c;
    --color-text-link-hover: #006b63;

    /* Navbar text colors - neutral/light gray */
    --color-navbar-text: #f5f5f5;
    --color-navbar-text-muted: rgba(255, 255, 255, 0.7);

    /* Nav menu colors - neutral grays */
    --color-nav-text: #4b5563;
    --color-nav-icon: #6b7280;
    --color-nav-hover-bg: rgba(0, 0, 0, 0.04);
    --color-nav-active-bg: var(--color-primary);
    --color-nav-active-text: #ffffff;

    /* Border colors */
    --color-border: #d4e0df;
    --color-border-light: #e8eeee;
    --color-border-focus: #00857c;

    /* Status colors */
    --color-success: #22a06b;
    --color-success-bg: #dcfff1;
    --color-warning: #c27b00;
    --color-warning-bg: #fff7e6;
    --color-error: #de350b;
    --color-error-bg: #ffebe6;
    --color-info: #0065ff;
    --color-info-bg: #e6f0ff;

    /* Accent colors - navy used in schedule, datepicker, modal titles */
    --color-accent: #00126b;
    --color-accent-hover: #001a9e;
    --color-accent-text: #ffffff;

    /* Component background states */
    --color-bg-hover: #e9ecef;
    --color-bg-selected: #e7f1ff;
    --color-bg-header: #f8f9fa;

    /* Interactive states */
    --color-hover-overlay: rgba(0, 133, 124, 0.08);
    --color-active-overlay: rgba(0, 133, 124, 0.12);
    --color-focus-ring: rgba(0, 133, 124, 0.4);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-navbar: 0 1px 3px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Spacing (for reference) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Logo */
    --logo-image: url('/images/company-logo-black-no-background.png');

    /* Daily report allocator segments. Global because the budget bar, the row swatch and the hours
       slider are three separate scoped stylesheets that must name one palette, and scoped CSS
       cannot cross component boundaries. Bootstrap semantic colours so light, dark and the
       daltonized themes all resolve. Cycled by index in C# (DailyReportPalette). */
    --dr-seg-1: var(--bs-primary);
    --dr-seg-2: var(--bs-success);
    --dr-seg-3: var(--bs-info);
    --dr-seg-4: var(--bs-warning);
    --dr-seg-5: var(--bs-purple, #6f42c1);
    --dr-seg-6: var(--bs-teal, #20c997);
}

[data-theme="dark"] {
    /* Primary brand colors - slightly lighter teal for dark mode */
    --color-primary: #2dd4bf;
    --color-primary-hover: #5eead4;
    --color-primary-light: #1a3332;
    --color-primary-rgb: 45, 212, 191;

    /* Re-declare derived Bootstrap primary vars: Bootstrap resets these under
       [data-bs-theme="dark"], which the app sets alongside data-theme */
    --bs-primary-text-emphasis: var(--color-primary-hover);
    --bs-primary-bg-subtle: var(--color-primary-light);
    --bs-primary-border-subtle: #0f766e;

    /* Secondary/accent */
    --color-secondary: #6ee7d8;
    --color-secondary-hover: #99f0e4;

    /* Background colors */
    --color-bg-body: #0f1514;
    --color-bg-surface: #1a2220;
    --color-bg-elevated: #232e2c;
    --color-bg-muted: #2a3634;
    --color-bg-sidebar: #1a2220;
    --color-bg-navbar: #1a2220;

    /* Text colors */
    --color-text-primary: #f0fdf9;
    --color-text-secondary: #a7c4c1;
    --color-text-muted: #7a9996;
    --color-text-inverse: #1a2e2d;
    --color-text-link: #2dd4bf;
    --color-text-link-hover: #5eead4;

    /* Navbar text colors - neutral/light gray */
    --color-navbar-text: #f5f5f5;
    --color-navbar-text-muted: rgba(255, 255, 255, 0.7);

    /* Nav menu colors - neutral grays for dark mode */
    --color-nav-text: #d1d5db;
    --color-nav-icon: #9ca3af;
    --color-nav-hover-bg: rgba(255, 255, 255, 0.06);
    --color-nav-active-bg: var(--color-primary);
    --color-nav-active-text: #1a2e2d;

    /* Border colors */
    --color-border: #3a4846;
    --color-border-light: #2a3634;
    --color-border-focus: #2dd4bf;

    /* Status colors */
    --color-success: #4ade80;
    --color-success-bg: #14532d;
    --color-warning: #fbbf24;
    --color-warning-bg: #713f12;
    --color-error: #f87171;
    --color-error-bg: #7f1d1d;
    --color-info: #60a5fa;
    --color-info-bg: #1e3a5f;

    /* Accent colors */
    --color-accent: #6b8cff;
    --color-accent-hover: #8ca6ff;
    --color-accent-text: #ffffff;

    /* Component background states */
    --color-bg-hover: #2a3634;
    --color-bg-selected: #1a3332;
    --color-bg-header: #232e2c;

    /* Interactive states */
    --color-hover-overlay: rgba(45, 212, 191, 0.1);
    --color-active-overlay: rgba(45, 212, 191, 0.15);
    --color-focus-ring: rgba(45, 212, 191, 0.5);

    /* Shadows - more subtle in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-navbar: 0 1px 3px rgba(0, 0, 0, 0.4);

    /* Logo */
    --logo-image: url('/images/company-logo-white-no-background.png');
}

/* Base styles using theme variables */
html {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background-color: var(--color-bg-body);
    color: var(--color-text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Link styles */
a {
    color: var(--color-text-link);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-text-link-hover);
}

/* Button overrides */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Focus states */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
    border-color: var(--color-border-focus);
}

/* Form controls */
.form-control,
.form-select {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary);
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

.form-floating > label {
    color: var(--color-text-secondary);
}

/* Cards and surfaces */
.card {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Tables */
.table {
    --bs-table-bg: var(--color-bg-surface);
    --bs-table-color: var(--color-text-primary);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: var(--color-bg-muted);
    --bs-table-hover-bg: var(--color-hover-overlay);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    color: var(--color-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-hover-overlay);
    color: var(--color-text-primary);
}

.dropdown-divider {
    border-color: var(--color-border);
}

.dropdown-header {
    color: var(--color-text-secondary);
}

/* "Mark all read" / "Clear all" in the notifications dropdown. btn-link's default link colour is
   far too faint against the dropdown surface, so pin them to the primary text colour in both themes. */
.notification-action {
    color: var(--color-text-primary) !important;
}

.notification-action:hover,
.notification-action:focus {
    color: var(--color-text-primary) !important;
    text-decoration: underline !important;
}

/* Modals */
.modal-content {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
}

.modal-header {
    border-color: var(--color-border);
}

.modal-footer {
    border-color: var(--color-border);
}

/* Alerts */
.alert-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-danger {
    background-color: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info);
}

/* Breadcrumbs */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--color-text-muted);
    --bs-breadcrumb-item-active-color: var(--color-text-secondary);
}

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

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

/* Bootstrap utility dark mode overrides */
[data-theme="dark"] .bg-white {
    background-color: var(--color-bg-surface) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--color-bg-muted) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .text-dark-50 {
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .badge.bg-warning {
    color: var(--color-text-inverse) !important;
}

[data-theme="dark"] .badge.bg-info {
    color: var(--color-text-inverse) !important;
}

/* Bootstrap component dark mode overrides */
[data-theme="dark"] .list-group-item {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

[data-theme="dark"] .accordion-item {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--color-bg-muted);
    color: var(--color-text-primary);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--color-bg-surface);
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--color-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
    color: var(--color-text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--color-border-light) var(--color-border-light) var(--color-border);
}

[data-theme="dark"] .offcanvas {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

[data-theme="dark"] .modal-content {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Selection */
::selection {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Theme toggle button */
.theme-toggle {
    background: transparent;
    border: none;
    color: var(--color-navbar-text);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle i {
    font-size: 1.25rem;
    transition: transform var(--transition-normal);
}

.theme-toggle:hover i {
    transform: rotate(15deg);
}

/* Navbar text styling */
.app-navbar .text-white,
.app-navbar .btn-link {
    color: var(--color-navbar-text) !important;
}

.app-navbar .text-white-50 {
    color: var(--color-navbar-text-muted) !important;
}

.app-navbar .breadcrumb-item a {
    color: var(--color-navbar-text-muted) !important;
    text-decoration: none;
}

.app-navbar .breadcrumb-item a:hover {
    color: var(--color-navbar-text) !important;
    opacity: 0.8;
}

.app-navbar .breadcrumb-item.active {
    color: var(--color-navbar-text) !important;
}

.app-navbar .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-navbar-text) !important;
}

/* Keep app bar on a single row — breadcrumb yields, icons never wrap.
   .navbar defaults to flex-wrap: wrap, letting the right-side icon cluster drop to a
   second line on mid-width screens (~768–992px) where the breadcrumb is still shown.
   Force no-wrap and let the breadcrumb shrink/truncate instead. */
.app-navbar,
.app-navbar .container-fluid {
    flex-wrap: nowrap;
}

/* Breadcrumb is the flexible element: allow it to shrink below content width and
   truncate. min-width:0 overrides the default min-width:auto that blocks shrinking. */
.app-navbar nav[aria-label="breadcrumb"] {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.app-navbar nav[aria-label="breadcrumb"] .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
}

.app-navbar nav[aria-label="breadcrumb"] .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* The right-side icon cluster must never shrink or wrap. */
.app-navbar .ms-auto {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* ==========================================================================
   Navigation Menu Styling
   ========================================================================== */

.nav-menu {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
}

.nav-menu .nav-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--color-nav-text) !important;
    text-decoration: none !important;
    transition: background-color 150ms ease, color 150ms ease;
    white-space: nowrap;
    overflow: hidden;
    margin: 2px 0.5rem;
    border-radius: var(--radius-md);
}

.nav-menu .nav-item:link,
.nav-menu .nav-item:visited,
.nav-menu .nav-item:hover,
.nav-menu .nav-item:active {
    text-decoration: none !important;
}

.nav-menu .nav-item i {
    font-size: 1.25rem;
    min-width: 24px;
    text-align: center;
    color: var(--color-nav-icon) !important;
    transition: color 150ms ease;
    flex-shrink: 0;
}

.nav-menu .nav-item span {
    margin-left: 0.75rem;
    font-weight: 500;
}

.nav-menu .nav-item:hover {
    background-color: var(--color-nav-hover-bg);
    color: var(--color-nav-text) !important;
}

.nav-menu .nav-item:hover i {
    color: var(--color-nav-icon) !important;
}

.nav-menu .nav-item.active {
    background-color: var(--color-nav-active-bg) !important;
    color: var(--color-nav-active-text) !important;
}

.nav-menu .nav-item.active i {
    color: var(--color-nav-active-text) !important;
}

.nav-menu .nav-divider {
    margin: 0.75rem 1rem;
    border-color: var(--color-border);
}

/* A firmer rule, opted into per menu. Two things have to be beaten to set one: Bootstrap draws hr
   at opacity .25, and `.app-sidebar .nav-menu .nav-divider` below forces border-color to
   --section-nav-divider with !important — a variable nothing defines, since data-section is never
   set on the document, which leaves the line as plain currentColor. That rule has the same
   specificity as a bare `.nav-menu .nav-divider…` selector and sits later in the file, so it wins;
   carrying .app-sidebar here outweighs it instead of tying with it.

   Colour set outright with the alpha baked in, and opacity pinned to 1, so neither the Bootstrap
   fade nor the theme variable decides how this reads. Opt-in rather than changing .nav-divider
   itself: eleven other section menus use that class and keep the lighter line. */
.nav-menu .nav-divider.nav-divider-strong,
.app-sidebar .nav-menu .nav-divider.nav-divider-strong {
    border-color: color-mix(in srgb, var(--color-text-secondary) 55%, transparent) !important;
    opacity: 1;
}

/* Expanded sidebar - add left padding */
.app-sidebar.expanded .nav-menu .nav-item {
    padding-left: 1.25rem;
}

/* Collapsed sidebar - center icons */
.app-sidebar.collapsed .nav-menu .nav-item {
    justify-content: center;
    padding: 0.75rem 0;
    margin: 2px 0.375rem;
}

.app-sidebar.collapsed .nav-menu .nav-item i {
    margin: 0;
}

/* Hide labels in collapsed state (CSS replaces Razor @if conditionals) */
.app-sidebar.collapsed .nav-menu .nav-item span {
    display: none;
}

/* The close button follows the labels: hidden in the icon rail, back on hover-expand.
   Scoped to the same breakpoint as the hover-expand rule so it never shows in the
   mobile overlay, where hovering does nothing. */
.app-sidebar.collapsed .sidebar-close-layer {
    display: none;
}

@media (min-width: 769px) {
    .app-sidebar.collapsed:hover .sidebar-close-layer {
        display: block;
    }
}

.app-sidebar.collapsed .nav-menu .nav-divider {
    margin: 0.5rem 0.375rem;
}

/* Hover-expand: show labels and use expanded layout when hovering collapsed sidebar */
.app-sidebar.collapsed:hover .nav-menu .nav-item {
    justify-content: flex-start;
    padding-left: 1.25rem;
    margin: 2px 0.5rem;
}

.app-sidebar.collapsed:hover .nav-menu .nav-item span {
    display: inline;
}

.app-sidebar.collapsed:hover .nav-menu .nav-item i {
    margin-right: 0;
}

.app-sidebar.collapsed:hover .nav-menu .nav-divider {
    margin: 0.75rem 1rem;
}

/* Account pages on mobile - force collapsed sidebar appearance */
@media (max-width: 768px) {
    .app-layout.account-page .app-sidebar .nav-menu .nav-item {
        justify-content: center;
        padding: 0.75rem 0;
        margin: 2px 0.375rem;
    }

    .app-layout.account-page .app-sidebar .nav-menu .nav-item i {
        margin: 0;
    }

    .app-layout.account-page .app-sidebar .nav-menu .nav-item span {
        display: none;
    }
}

/* ==========================================================================
   Nav Flyout Submenu
   ========================================================================== */

.nav-flyout-group {
    display: flex;
    flex-direction: column;
}

.nav-flyout-trigger {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--color-nav-text);
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s;
    margin: 2px 0.5rem;
    border-radius: var(--radius-md);
    user-select: none;
}

.nav-flyout-trigger i {
    font-size: 1.25rem;
    min-width: 24px;
    text-align: center;
    color: var(--color-nav-icon);
    flex-shrink: 0;
}

.nav-flyout-trigger span {
    margin-left: 0.75rem;
    font-weight: 500;
}

.nav-flyout-trigger .bi-chevron-right {
    font-size: 0.75rem;
    margin-left: auto;
    min-width: auto;
    opacity: 0.5;
    transition: transform 0.15s ease;
}

.nav-flyout-group.open .nav-flyout-trigger .bi-chevron-right {
    transform: rotate(90deg);
}

.nav-flyout-trigger:hover {
    background-color: var(--color-nav-hover-bg);
}

.nav-flyout-trigger.has-active {
    color: var(--color-nav-active-text);
    background-color: var(--color-nav-active-bg);
}

.nav-flyout-trigger.has-active i {
    color: var(--color-nav-active-text);
}

.nav-flyout-panel {
    display: none;
    flex-direction: column;
}

.nav-flyout-group.open .nav-flyout-panel {
    display: flex;
}

.nav-flyout-panel .nav-flyout-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem 0.5rem 2.75rem;
    margin: 2px 0.5rem;
    border-radius: var(--radius-md);
    color: var(--color-nav-text) !important;
    text-decoration: none !important;
    transition: background-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-flyout-panel .nav-flyout-item i {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
    margin-right: 0.625rem;
    color: var(--color-nav-icon) !important;
    flex-shrink: 0;
}

.nav-flyout-panel .nav-flyout-item:hover {
    background-color: var(--color-nav-hover-bg);
}

.nav-flyout-panel .nav-flyout-item.active {
    background-color: var(--color-nav-active-bg) !important;
    color: var(--color-nav-active-text) !important;
}

.nav-flyout-panel .nav-flyout-item.active i {
    color: var(--color-nav-active-text) !important;
}

/* Expanded sidebar - flyout trigger padding */
.app-sidebar.expanded .nav-flyout-trigger {
    padding-left: 1.25rem;
}

/* Collapsed sidebar - center the flyout trigger icon */
.app-sidebar.collapsed .nav-flyout-trigger {
    justify-content: center;
    padding: 0.75rem 0;
    margin: 2px 0.375rem;
}

.app-sidebar.collapsed .nav-flyout-trigger span,
.app-sidebar.collapsed .nav-flyout-trigger .bi-chevron-right {
    display: none;
}

.app-sidebar.collapsed .nav-flyout-trigger i {
    margin: 0;
}

/* Collapsed (not hovered): hide expanded children so only icons show */
.app-sidebar.collapsed:not(:hover) .nav-flyout-panel {
    display: none;
}

/* A flyout group can be open from a URL match, so close the panels explicitly. */
.app-sidebar.closed .nav-flyout-panel {
    display: none;
}

/* Hover-expand: show flyout trigger labels when hovering collapsed sidebar */
.app-sidebar.collapsed:hover .nav-flyout-trigger {
    justify-content: flex-start;
    padding-left: 1.25rem;
    margin: 2px 0.5rem;
}

.app-sidebar.collapsed:hover .nav-flyout-trigger span,
.app-sidebar.collapsed:hover .nav-flyout-trigger .bi-chevron-right {
    display: inline;
}

.app-sidebar.collapsed:hover .nav-flyout-trigger i {
    margin-right: 0;
}

/* Section theme overrides for flyout */
.app-sidebar .nav-flyout-trigger {
    color: var(--section-nav-text) !important;
}

.app-sidebar .nav-flyout-trigger i {
    color: var(--section-nav-icon) !important;
}

.app-sidebar .nav-flyout-trigger:hover {
    background-color: var(--section-nav-hover-bg) !important;
}

.app-sidebar .nav-flyout-trigger.has-active {
    background-color: var(--section-nav-active-bg) !important;
    color: #ffffff !important;
}

.app-sidebar .nav-flyout-trigger.has-active i {
    color: #ffffff !important;
}

.app-sidebar .nav-flyout-panel .nav-flyout-item {
    color: var(--section-nav-text) !important;
}

.app-sidebar .nav-flyout-panel .nav-flyout-item i {
    color: var(--section-nav-icon) !important;
}

.app-sidebar .nav-flyout-panel .nav-flyout-item:hover {
    background-color: var(--section-nav-hover-bg) !important;
}

.app-sidebar .nav-flyout-panel .nav-flyout-item.active {
    background-color: var(--section-nav-active-bg) !important;
    color: #ffffff !important;
}

.app-sidebar .nav-flyout-panel .nav-flyout-item.active i {
    color: #ffffff !important;
}

/* ==========================================================================
   Back Button (App Bar)
   ========================================================================== */

.back-button-group {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
}

.back-button-group .back-btn-main,
.back-button-group .back-btn-chevron {
    line-height: 1;
    border: none;
    background: none;
}

.back-button-group .back-btn-main:disabled,
.back-button-group .back-btn-chevron:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.back-button-group .back-btn-main:not(:disabled):hover,
.back-button-group .back-btn-chevron:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.back-history-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
}

.back-history-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1061;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.back-history-dropdown .dropdown-item {
    color: var(--color-text-primary);
}

.back-history-dropdown .dropdown-item:hover {
    background-color: var(--color-hover-overlay);
}

.back-history-dropdown .dropdown-header {
    color: var(--color-text-secondary);
}

/* ==========================================================================
   App Bar Overflow Menu
   ========================================================================== */

.app-navbar .dropdown-menu {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

.app-navbar .dropdown-item {
    color: var(--color-text);
}

.app-navbar .dropdown-item:hover {
    background: var(--color-hover-bg);
}

/* ==========================================================================
   Logo Theme Switching
   ========================================================================== */

/* Light mode: show black logo, hide white logo */
:root .logo-light,
[data-theme="light"] .logo-light {
    display: inline-block;
}

:root .logo-dark,
[data-theme="light"] .logo-dark {
    display: none;
}

/* Dark mode: show white logo, hide black logo */
[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: inline-block;
}

/* ==========================================================================
   Bootstrap Text Utilities - Theme Overrides
   ========================================================================== */

/* Override Bootstrap text-secondary to use theme variable */
.text-secondary {
    color: var(--color-text-secondary) !important;
}

/* Ensure headings use proper text color */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
}

/* Card headers */
.card-header h5,
.card-body h5 {
    color: var(--color-text-primary);
}

/* List items in cards */
.card ul li,
.card p {
    color: var(--color-text-primary);
}

/* Strong text within lists */
.card ul li strong {
    color: var(--color-text-primary);
}

/* ==========================================================================
   Account Management Pages
   ========================================================================== */

.account-manage-card {
    border-radius: var(--radius-lg);
}

.account-nav-wrapper {
    border-right: 1px solid var(--color-border);
    padding-right: 1rem;
    min-height: 300px;
}

.account-nav.nav-menu {
    padding: 0;
}

.account-nav .nav-item {
    padding: 0.625rem 1rem;
    margin: 2px 0;
}

.account-nav .nav-item i {
    font-size: 1.125rem;
}

.account-nav .nav-item span {
    margin-left: 0.625rem;
    font-size: 0.9375rem;
}

.account-content {
    padding-left: 1rem;
}

.account-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.account-content .form-floating {
    margin-bottom: 1rem;
}

.account-content .btn-primary {
    margin-top: 0.5rem;
}

@media (max-width: 767.98px) {
    .account-nav-wrapper {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        min-height: auto;
    }

    .account-content {
        padding-left: 0;
    }

    .account-nav .nav-item {
        padding: 0.5rem 0.75rem;
    }
}

/* ==========================================================================
   Password Visibility Toggle
   ========================================================================== */

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 10;
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--color-text-primary);
}

.password-toggle:focus {
    outline: none;
}

.password-wrapper .form-control {
    padding-right: 2.5rem;
}

/* ==========================================================================
   Section Theming via CSS Custom Properties
   Each section sets these variables to customize navbar/sidebar appearance
   ========================================================================== */

:root,
[data-section="main"] {
    --section-navbar-gradient-start: #212529;
    --section-navbar-gradient-end: #1a1d20;
    --section-sidebar-bg: var(--color-bg-sidebar);
    --section-sidebar-border: var(--color-primary);
    --section-nav-text: var(--color-nav-text);
    --section-nav-icon: var(--color-nav-icon);
    --section-nav-hover-bg: var(--color-nav-hover-bg);
    --section-nav-active-bg: var(--color-nav-active-bg);
    --section-nav-divider: var(--color-border);
}

[data-section="estimating"] {
    --section-navbar-gradient-start: #4a5568;
    --section-navbar-gradient-end: #2d3748;
    --section-sidebar-bg: #f7fafc;
    --section-sidebar-border: #4a5568;
    --section-nav-text: #2d3748;
    --section-nav-icon: #4a5568;
    --section-nav-hover-bg: rgba(74, 85, 104, 0.1);
    --section-nav-active-bg: #4a5568;
    --section-nav-divider: rgba(74, 85, 104, 0.2);
}

[data-section="estimating"][data-theme="dark"] {
    --section-sidebar-bg: #1a202c;
    --section-nav-text: #a0aec0;
    --section-nav-icon: #718096;
    --section-nav-hover-bg: rgba(113, 128, 150, 0.15);
    --section-nav-divider: rgba(113, 128, 150, 0.3);
}

[data-section="developer"] {
    --section-navbar-gradient-start: #6b46c1;
    --section-navbar-gradient-end: #553c9a;
    --section-sidebar-bg: #faf5ff;
    --section-sidebar-border: #6b46c1;
    --section-nav-text: #44337a;
    --section-nav-icon: #6b46c1;
    --section-nav-hover-bg: rgba(107, 70, 193, 0.1);
    --section-nav-active-bg: #6b46c1;
    --section-nav-divider: rgba(107, 70, 193, 0.2);
}

[data-section="developer"][data-theme="dark"] {
    --section-sidebar-bg: #1a1625;
    --section-nav-text: #b794f4;
    --section-nav-icon: #9f7aea;
    --section-nav-hover-bg: rgba(159, 122, 234, 0.15);
    --section-nav-divider: rgba(159, 122, 234, 0.3);
}

[data-section="field"] {
    --section-navbar-gradient-start: #2563eb;
    --section-navbar-gradient-end: #1d4ed8;
    --section-sidebar-bg: #eff6ff;
    --section-sidebar-border: #2563eb;
    --section-nav-text: #1e3a5f;
    --section-nav-icon: #2563eb;
    --section-nav-hover-bg: rgba(37, 99, 235, 0.1);
    --section-nav-active-bg: #2563eb;
    --section-nav-divider: rgba(37, 99, 235, 0.2);
}

[data-section="field"][data-theme="dark"] {
    --section-sidebar-bg: #1e1b2e;
    --section-sidebar-border: #3b82f6;
    --section-nav-text: #93c5fd;
    --section-nav-icon: #60a5fa;
    --section-nav-hover-bg: rgba(96, 165, 250, 0.15);
    --section-nav-divider: rgba(96, 165, 250, 0.3);
}

[data-section="project-management"] {
    --section-navbar-gradient-start: #d97706;
    --section-navbar-gradient-end: #b45309;
    --section-sidebar-bg: #fffbeb;
    --section-sidebar-border: #d97706;
    --section-nav-text: #78350f;
    --section-nav-icon: #d97706;
    --section-nav-hover-bg: rgba(217, 119, 6, 0.1);
    --section-nav-active-bg: #d97706;
    --section-nav-divider: rgba(217, 119, 6, 0.2);
}

[data-section="project-management"][data-theme="dark"] {
    --section-sidebar-bg: #1c1917;
    --section-sidebar-border: #f59e0b;
    --section-nav-text: #fcd34d;
    --section-nav-icon: #fbbf24;
    --section-nav-hover-bg: rgba(251, 191, 36, 0.15);
    --section-nav-divider: rgba(251, 191, 36, 0.3);
}

[data-section="steel-finishing"] {
    --section-navbar-gradient-start: #dc2626;
    --section-navbar-gradient-end: #b91c1c;
    --section-sidebar-bg: #fef2f2;
    --section-sidebar-border: #dc2626;
    --section-nav-text: #7f1d1d;
    --section-nav-icon: #dc2626;
    --section-nav-hover-bg: rgba(220, 38, 38, 0.1);
    --section-nav-active-bg: #dc2626;
    --section-nav-divider: rgba(220, 38, 38, 0.2);
}

[data-section="steel-finishing"][data-theme="dark"] {
    --section-sidebar-bg: #1c1917;
    --section-sidebar-border: #ef4444;
    --section-nav-text: #fca5a5;
    --section-nav-icon: #f87171;
    --section-nav-hover-bg: rgba(248, 113, 113, 0.15);
    --section-nav-divider: rgba(248, 113, 113, 0.3);
}

[data-section="warehouse"] {
    --section-navbar-gradient-start: #059669;
    --section-navbar-gradient-end: #047857;
    --section-sidebar-bg: #ecfdf5;
    --section-sidebar-border: #059669;
    --section-nav-text: #064e3b;
    --section-nav-icon: #059669;
    --section-nav-hover-bg: rgba(5, 150, 105, 0.1);
    --section-nav-active-bg: #059669;
    --section-nav-divider: rgba(5, 150, 105, 0.2);
}

[data-section="warehouse"][data-theme="dark"] {
    --section-sidebar-bg: #14211d;
    --section-sidebar-border: #10b981;
    --section-nav-text: #6ee7b7;
    --section-nav-icon: #34d399;
    --section-nav-hover-bg: rgba(52, 211, 153, 0.15);
    --section-nav-divider: rgba(52, 211, 153, 0.3);
}

[data-section="shop"] {
    --section-navbar-gradient-start: #0891b2;
    --section-navbar-gradient-end: #0e7490;
    --section-sidebar-bg: #ecfeff;
    --section-sidebar-border: #0891b2;
    --section-nav-text: #164e63;
    --section-nav-icon: #0891b2;
    --section-nav-hover-bg: rgba(8, 145, 178, 0.1);
    --section-nav-active-bg: #0891b2;
    --section-nav-divider: rgba(8, 145, 178, 0.2);
}

[data-section="shop"][data-theme="dark"] {
    --section-sidebar-bg: #14202a;
    --section-sidebar-border: #06b6d4;
    --section-nav-text: #67e8f9;
    --section-nav-icon: #22d3ee;
    --section-nav-hover-bg: rgba(34, 211, 238, 0.15);
    --section-nav-divider: rgba(34, 211, 238, 0.3);
}

[data-section="corporate"] {
    --section-navbar-gradient-start: #4f46e5;
    --section-navbar-gradient-end: #4338ca;
    --section-sidebar-bg: #eef2ff;
    --section-sidebar-border: #4f46e5;
    --section-nav-text: #312e81;
    --section-nav-icon: #4f46e5;
    --section-nav-hover-bg: rgba(79, 70, 229, 0.1);
    --section-nav-active-bg: #4f46e5;
    --section-nav-divider: rgba(79, 70, 229, 0.2);
}

[data-section="corporate"][data-theme="dark"] {
    --section-sidebar-bg: #1a1a2e;
    --section-sidebar-border: #6366f1;
    --section-nav-text: #a5b4fc;
    --section-nav-icon: #818cf8;
    --section-nav-hover-bg: rgba(129, 140, 248, 0.15);
    --section-nav-divider: rgba(129, 140, 248, 0.3);
}

[data-section="safety"] {
    --section-navbar-gradient-start: #ca8a04;
    --section-navbar-gradient-end: #a16207;
    --section-sidebar-bg: #fefce8;
    --section-sidebar-border: #ca8a04;
    --section-nav-text: #713f12;
    --section-nav-icon: #ca8a04;
    --section-nav-hover-bg: rgba(202, 138, 4, 0.1);
    --section-nav-active-bg: #ca8a04;
    --section-nav-divider: rgba(202, 138, 4, 0.2);
}

[data-section="safety"][data-theme="dark"] {
    --section-sidebar-bg: #1c1a14;
    --section-sidebar-border: #eab308;
    --section-nav-text: #fde047;
    --section-nav-icon: #facc15;
    --section-nav-hover-bg: rgba(250, 204, 21, 0.15);
    --section-nav-divider: rgba(250, 204, 21, 0.3);
}

/* Apply section variables to layout components */
.app-navbar {
    background: linear-gradient(135deg,
        var(--section-navbar-gradient-start),
        var(--section-navbar-gradient-end)) !important;
}

.app-sidebar {
    background-color: var(--section-sidebar-bg) !important;
    border-right: 2px solid var(--section-sidebar-border) !important;
}

.app-sidebar .nav-menu .nav-item {
    color: var(--section-nav-text) !important;
}

.app-sidebar .nav-menu .nav-item i {
    color: var(--section-nav-icon) !important;
}

.app-sidebar .nav-menu .nav-item:hover {
    background-color: var(--section-nav-hover-bg) !important;
}

.app-sidebar .nav-menu .nav-item.active {
    background-color: var(--section-nav-active-bg) !important;
    color: #ffffff !important;
}

.app-sidebar .nav-menu .nav-item.active i {
    color: #ffffff !important;
}

.app-sidebar .nav-menu .nav-divider {
    border-color: var(--section-nav-divider) !important;
}