/*
    * Site specific CSS
*/

/* Brand Variables (Issue #372) - RED no-theme defaults, overridden by server-side injection */
:root {
    --brand-primary: #dc3545;
    --brand-accent: #c82333;
    --brand-sidebar: #8B0000;
    --brand-text: #ffffff;
    --brand-primary-contrast: #ffffff;
}

/* ==========================================================================
   Bootstrap Primary Color Overrides (Issue #372)
   Map SB Admin 2 hardcoded #4e73df to --brand-primary CSS variable
   ========================================================================== */

.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    filter: brightness(0.85);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    opacity: 0.65;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--brand-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--brand-primary) !important;
    filter: brightness(0.8);
}

.border-left-primary {
    border-left-color: var(--brand-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

.badge-primary {
    background-color: var(--brand-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.page-link {
    color: var(--brand-primary) !important;
}

.page-link:hover {
    color: var(--brand-primary) !important;
    filter: brightness(0.8);
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--brand-primary) !important;
}

.list-group-item.active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;  /* polish theme scopes #content .list-group-item to a dark text color; force white on .active so the row is readable on the brand bg */
}

/* Active list-group rows get a brand-primary bg from the rule above + a
   white body color from Bootstrap, but the row's interior FA icons,
   muted captions, and badges are still keyed off Bootstrap utility
   classes (`text-primary`, `text-muted`, `badge-primary`, ...). Those
   utilities render the icon brand-on-brand, the description low-contrast
   grey-on-navy, and the count chip completely invisible. Override them
   when nested inside an active row so the row's contents stay readable
   regardless of how dark the brand color is (e.g. natimark navy
   #1B365D). Theme-agnostic; sits in site.css next to the bg rule so the
   active-row contract is in one place. */
.list-group-item.active strong,
.list-group-item.active b {
    color: #fff;
}

.list-group-item.active .text-muted,
.list-group-item.active small.text-muted,
.list-group-item.active .text-secondary,
.list-group-item.active .text-gray-300,
.list-group-item.active .text-gray-400,
.list-group-item.active .text-gray-500,
.list-group-item.active .text-gray-600,
.list-group-item.active .text-gray-700,
.list-group-item.active .text-gray-800,
.list-group-item.active .text-gray-900 {
    color: rgba(255, 255, 255, 0.85) !important;
}

.list-group-item.active .text-primary,
.list-group-item.active .text-info,
.list-group-item.active .text-success,
.list-group-item.active .text-warning,
.list-group-item.active .text-danger {
    color: rgba(255, 255, 255, 0.95) !important;
}

.list-group-item.active .badge-primary {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: var(--brand-primary, #4e73df) !important;
}

/* Content area links - scoped to #content-wrapper to avoid sidebar/topbar */
#content-wrapper a:not(.btn):not(.text-white):not(.text-light):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
    color: var(--brand-primary);
}

#content-wrapper a:not(.btn):not(.text-white):not(.text-light):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover,
#content-wrapper a:not(.btn):not(.text-white):not(.text-light):not(.nav-link):not(.dropdown-item):not(.list-group-item):focus {
    color: var(--brand-primary);
    filter: brightness(0.75);
}

/* Nav tabs and pills */
.nav-tabs .nav-link {
    color: var(--brand-primary);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--brand-primary);
    filter: brightness(0.75);
}

.nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
}

.nav-pills .nav-link {
    color: var(--brand-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Custom switches and checkboxes */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

/* ==========================================================================
   End Bootstrap Primary Color Overrides
   ========================================================================== */

.logo { /* makes sure the logo stays visible, but not intrusively wide*/
    min-width: 10rem !important;
    max-width: 14rem !important;
}

/* Fixed Logo at top-left (always visible) */
.fixed-logo {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 14rem !important;
    height: var(--brand-logo-height, 4.375rem) !important;
    z-index: 1040 !important; /* Above everything */
    background-color: var(--brand-logo-bg, var(--brand-sidebar, #8B0000)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: var(--brand-sidebar-logo-justify, center) !important;
    padding: var(--brand-logo-padding, 0.5rem) !important;
    border-radius: var(--brand-logo-border-radius, 0) !important;
    border: var(--brand-logo-border-width, 0) solid var(--brand-logo-border-color, transparent) !important;
}

.fixed-logo img {
    max-width: var(--brand-sidebar-logo-max-width, 100%) !important;
    max-height: var(--brand-sidebar-logo-max-height, 100%) !important;
    width: auto !important;
    height: auto !important;
    object-fit: var(--brand-sidebar-logo-object-fit, contain) !important;
}

.sidebar-dark {
    background-color: var(--brand-sidebar, #8B0000);
}

/* Topbar dark styling with increased specificity */
.topbar.topbar-dark {
    background-color: var(--brand-sidebar, #8B0000) !important;
}

.topbar-dark .topbar-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.topbar-dark .text-gray-600 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Sticky Navigation Layout (Issue #102) */

/* Sticky Topbar - remains at top when scrolling */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important; /* Mobile: full width */
    right: 0 !important;
    height: var(--brand-logo-height, 4.375rem);
    z-index: 1030 !important; /* Above content (1000), below fixed logo (1040) */
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.1); /* Subtle depth shadow */
    padding-left: 14rem !important; /* Offset for fixed logo so hamburger is accessible */
}

/* Desktop: Topbar starts after logo area */
@media (min-width: 768px) {
    .topbar {
        left: 14rem !important; /* Start after logo/sidebar area */
    }

    /* When sidebar is collapsed, topbar still starts after logo */
    body.sidebar-toggled .topbar {
        left: 14rem !important; /* Logo is always 14rem wide */
    }
}

/* Sticky Sidebar - remains on left when scrolling, positioned below logo */
.sidebar {
    position: sticky !important;
    top: var(--brand-logo-height, 4.375rem) !important;
    height: calc(100vh - var(--brand-logo-height, 4.375rem)) !important;
    max-height: calc(100vh - var(--brand-logo-height, 4.375rem)) !important;
    overflow-y: auto !important; /* Enable vertical scrolling within sidebar */
    overflow-x: hidden !important; /* Hide horizontal scrollbar */
    z-index: 1020 !important; /* Below topbar and logo, above content */
    padding-top: 0.5rem; /* Small padding at top */
}

/* Wrapper - push content below fixed topbar */
#wrapper {
    background-color: var(--brand-sidebar, #8B0000); /* Match topbar-dark and sidebar-dark */
    padding-top: calc(var(--brand-logo-height, 4.375rem) + 0.625rem);
    height: 100vh; /* Constrain to viewport height */
    box-sizing: border-box; /* Include padding in height calculation */
    overflow: hidden; /* Prevent wrapper from causing page scroll */
}

/* Prevent body scroll - all scrolling happens within content-wrapper */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Fix submenus to appear below parent when sidebar is EXPANDED (not collapsed/toggled) (Issue #313)
   When sidebar is .toggled (collapsed), sb-admin-2.css flyout positioning takes over */
.sidebar:not(.toggled) .collapse,
.sidebar:not(.toggled) .collapsing {
    position: static !important;
    left: auto !important;
    width: 100% !important;
}

.sidebar:not(.toggled) .collapse .collapse-inner {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Nested submenu groups (3-level menus) */
.sidebar .collapse-inner .collapse-group-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.65rem;
    color: #858796;
    text-decoration: none;
    border: none;
    background: none;
}
.sidebar .collapse-inner .collapse-group-toggle:hover {
    color: var(--brand-primary, #4e73df);
    text-decoration: none;
}
.collapse-group-arrow {
    transition: transform 0.2s ease;
    font-size: 0.6rem;
}
.collapse-group-toggle[aria-expanded="true"] .collapse-group-arrow {
    transform: rotate(180deg);
}
.collapse-item-nested {
    padding-left: 1.5rem !important;
}

/* Collapsed sidebar overflow fix (Issue #313)
   Override the base .sidebar overflow rules so sb-admin-2's flyout positioning works.
   Flyouts are position:absolute and need overflow:visible to render outside the 6.5rem sidebar. */
@media (min-width: 768px) {
    .sidebar.toggled {
        overflow: visible !important;
    }

    /* Flyout z-index: above sidebar (1020), below topbar (1030) */
    .sidebar.toggled .nav-item .collapse {
        z-index: 1025 !important;
    }
}

/* Sidebar nav link layout - DESKTOP ONLY (768px+)
   Uniform flexbox layout for ALL nav links (with and without submenus) */
@media (min-width: 768px) {
    /* Flexbox layout for ALL nav links when sidebar is EXPANDED */
    .sidebar:not(.toggled) .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Uniform icon width for ALL nav links when sidebar is EXPANDED */
    .sidebar:not(.toggled) .nav-item .nav-link i {
        flex-shrink: 0 !important;
        width: 2rem !important;
        text-align: center !important;
    }

    /* Text overflow for ALL nav links when sidebar is EXPANDED */
    .sidebar:not(.toggled) .nav-item .nav-link span {
        flex: 1 1 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    /* Collapsible links: extra padding for arrow, constrain text width */
    .sidebar:not(.toggled) .nav-link[data-toggle="collapse"],
    .sidebar:not(.toggled) .nav-item .nav-link[data-toggle="collapse"] {
        padding-right: 1rem !important;
    }

    .sidebar:not(.toggled) .nav-link[data-toggle="collapse"] span,
    .sidebar:not(.toggled) .nav-item .nav-link[data-toggle="collapse"] span {
        max-width: calc(100% - 3rem) !important; /* Leave room for icon (2rem) + arrow (1rem) */
    }

    /* Submenu arrows - only on collapsible links */
    .sidebar:not(.toggled) .nav-link[data-toggle="collapse"]::after,
    .sidebar:not(.toggled) .nav-item .nav-link[data-toggle="collapse"]::after {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        float: none !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        width: 1rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        content: '\f107' !important;
        font-family: 'Font Awesome 5 Free' !important;
    }

    .sidebar:not(.toggled) .nav-link[data-toggle="collapse"].collapsed::after,
    .sidebar:not(.toggled) .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '\f105' !important; /* Right arrow when collapsed menu */
    }
}

/* Custom scrollbar styling for sidebar (webkit browsers) */
.sidebar::-webkit-scrollbar {
    width: 0.5rem;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Content wrapper - ensure proper layout with fixed elements */
#content-wrapper {
    min-height: 0; /* Let flexbox handle height */
    height: 100%; /* Fill available space in wrapper */
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow content scrolling */
    margin-top: 0 !important; /* Reset - wrapper padding handles topbar clearance */
    margin-left: 0 !important; /* Reset margin - sidebar width handled by template */
}

/* Main content area - scrolls independently */
#content {
    flex: 1 0 auto; /* Grow to fill space, push footer down */
    padding-top: 0 !important; /* Remove default padding since topbar is fixed */
}

/* Page heading - used on all page titles instead of text-gray-800 */
.page-heading {
    color: #5a5c69;
}

/* Step Navigation Styling */
.step-tabs .nav-item .nav-link {
    color: #858796;
    position: relative;
    padding: 1rem;
}

.step-tabs .nav-item .nav-link.active {
    color: var(--brand-primary, #4e73df);
    font-weight: bold;
    background-color: #fff;
    border-color: #dddfeb #dddfeb #fff;
}

.step-tabs .nav-item .nav-link.completed {
    color: #1cc88a;
}

.step-tabs .nav-item .nav-link.completed:after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.5rem;
}

/* ==========================================================================
   Sidebar Skeleton Loading (Issue #372)
   Subtle shimmer placeholders that blend with brand sidebar color
   ========================================================================== */

@keyframes sidebar-shimmer {
    0%   { opacity: 0.08; }
    50%  { opacity: 0.18; }
    100% { opacity: 0.08; }
}

.sidebar-skeleton-bar {
    display: block;
    height: 0.65rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.12);
    animation: sidebar-shimmer 1.6s ease-in-out infinite;
}

.sidebar-skeleton-heading {
    width: 55%;
    height: 0.5rem;
    margin: 0.15rem 0;
}