/* Navbar / header adjustments - ensure vertical centering and balanced horizontal spacing */
header.navbar, header .navbar {
	/* increased ~5% from 64px to 68px for a taller header */
	min-height: 68px;
}

/* Use a flex container for the navbar and center items vertically */
header .navbar .container-fluid {
	display: flex;
	align-items: center; /* vertical centering */
	justify-content: space-between; /* brand centered via absolute positioning */
	position: relative;
}

/* Center the brand/logo horizontally in the navbar */
header .navbar-brand {
	/* Put the brand back to the normal flow on the left */
	position: static;
	left: auto;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	z-index: 2;
	margin-left: 0.5rem;
}

/* Brand image sizing */
header .navbar-brand img {
	/* increased image height by ~5%: 48 -> 50 */
	height: 50px;
	width: auto;
	display: block;
}

/* make sure toggler and nav links remain interactive */
header .navbar-toggler,
header .nav-item.dropdown {
	z-index: 3;
}

/* Navbar nav area - ensure vertical centering */
header .navbar-nav,
header .d-flex.align-items-center {
	display: flex;
	align-items: center;
}

/* Dropdown toggle: align contents centrally and add small gaps */
header .nav-item.dropdown .nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	line-height: 1;
}

/* Text block next to avatar: ensure right alignment and consistent line-height */
header .nav-item .d-flex.flex-column {
	text-align: right;
	line-height: 1.05;
}

/* Notification bell */
header .nav-item .btn-link {
	color: rgba(255,255,255,0.95);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

header .nav-item .bi-bell {
	font-size: 22px;
}

/* Badge: position relative to its container */
header .nav-item .badge {
	transform: translate(25%, -25%);
	font-size: 0.65rem;
	padding: 0.25em 0.4em;
}

/* Avatar and fallback icon sizing */
header .nav-item img.rounded-circle,
header .nav-item .bi-person-circle {
	width: 40px;
	height: 40px;
	object-fit: cover;
	display: inline-block;
}

/* Ensure buttons and icons in navbar are vertically centered */
/* No additional vertical-align rules needed; flexbox handles centering */

/* Dropdown menu alignment */
header .nav-item .dropdown-menu {
	right: 0;
	left: auto;
}

/* Subtle shadows for better separation: below header, above footer */
header {
	/* ensure header participates in stacking context */
	position: relative;
	z-index: 1040;
	/* a gentle downward shadow */
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

footer {
	/* footer is already fixed in template; ensure it's above page content when needed */
	z-index: 1030;
	/* a gentle upward shadow to separate footer from page content */
	box-shadow: 0 -6px 16px rgba(0,0,0,0.12);
}

/* Make the navbar hamburger (toggler) use white color for mobile drawer */
.navbar-toggler {
    color: #ffffff !important;
    border-color: transparent !important;
}

.navbar-toggler .navbar-toggler-icon {
    /* Replace Bootstrap's default background-image with an SVG that uses currentColor (white) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem 1.25rem;
}

/* Ensure the toggler remains visible in dark/light backgrounds (keyboard users) */
.navbar-toggler:focus-visible {
    /* Visible focus for keyboard users (accessible, subtle) */
    box-shadow: 0 0 0 3px rgba(15, 48, 83, 0.18);
    outline: none;
}

/* Fallback for browsers without :focus-visible: keep a very subtle outline only on focus */
.navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(15,48,83,0.10); }

/* Use focus-visible to show outlines for keyboard users only and avoid mouse-triggered outlines */
button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .navbar-toggler:focus-visible {
    outline: 3px solid rgba(15, 48, 83, 0.12);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(15, 48, 83, 0.12);
}

/* Gentle fallback for older browsers that only support :focus */
button:focus, .btn:focus, .nav-link:focus, .form-control:focus {
    outline: 2px solid rgba(15,48,83,0.08);
    outline-offset: 2px;
}

/* Fullscreen mobile menu when toggler is clicked */
@media screen and (max-width: 768px) {
    /* Keep header visible and fixed at top */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1060 !important;
        margin: 0 !important;
    }

    /* Make the collapsed navbar fullscreen when shown */
    #mainNavbar.collapse.show {
        position: fixed !important;
        top: 68px !important; /* Below header */
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 68px) !important;
        z-index: 1055 !important;
        background-color: var(--primary-500, #0F3053) !important;
        overflow-y: auto !important;
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Hide default inline behavior */
    #mainNavbar.collapse:not(.show) {
        display: none !important;
    }

    /* Ensure navbar items stack vertically and take full width */
    #mainNavbar.collapse .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Nav links styling - reduced font size */
    #mainNavbar.collapse .nav-link {
        color: var(--primary-50, #ECEEF1) !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
        border-radius: 0.5rem !important;
        transition: background-color 0.2s !important;
    }

    #mainNavbar.collapse .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* User section container */
    #mainNavbar.collapse .d-flex.align-items-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0.75rem !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* User dropdown area */
    #mainNavbar.collapse .nav-item.dropdown {
        width: 100% !important;
    }

    #mainNavbar.collapse .nav-item.dropdown > .nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border-radius: 0.5rem !important;
    }

    /* User info text - reduced font sizes */
    #mainNavbar.collapse .d-flex.flex-column {
        text-align: left !important;
        flex: 1 !important;
    }

    #mainNavbar.collapse .d-flex.flex-column strong {
        color: var(--primary-50, #ECEEF1) !important;
        font-size: 0.9rem !important;
    }

    #mainNavbar.collapse .d-flex.flex-column small {
        color: var(--primary-50, #ECEEF1) !important;
        font-size: 0.75rem !important;
    }

    /* Notification bell in fullscreen menu - adjusted size */
    #mainNavbar.collapse .btn-link {
        color: var(--primary-50, #ECEEF1) !important;
        padding: 0 !important;
        margin: 0 0.5rem !important;
    }

    #mainNavbar.collapse .bi-bell {
        color: var(--primary-50, #ECEEF1) !important;
        font-size: 1.25rem !important;
    }

    /* Badge adjustment */
    #mainNavbar.collapse .badge {
        font-size: 0.6rem !important;
    }

    /* Avatar styling - adjusted size */
    #mainNavbar.collapse .bi-person-circle {
        color: var(--primary-50, #ECEEF1) !important;
        font-size: 2rem !important;
    }

    #mainNavbar.collapse img.rounded-circle {
        width: 32px !important;
        height: 32px !important;
    }

    /* Dropdown menu inside fullscreen */
    #mainNavbar.collapse .dropdown-menu.show {
        position: static !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: none !important;
        padding: 0.5rem 0 !important;
        margin-top: 0.75rem !important;
        border-radius: 0.5rem !important;
    }

    /* Dropdown items - reduced font size */
    #mainNavbar.collapse .dropdown-item {
        color: var(--primary-50, #ECEEF1) !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.9rem !important;
        transition: background-color 0.2s !important;
    }

    #mainNavbar.collapse .dropdown-item:hover,
    #mainNavbar.collapse .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--primary-50, #ECEEF1) !important;
    }

    #mainNavbar.collapse .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.2) !important;
        margin: 0.5rem 0 !important;
    }

    /* Login button when not authenticated */
    #mainNavbar.collapse .btn-primary {
        background-color: var(--primary-50, #ECEEF1) !important;
        color: var(--primary-500, #0F3053) !important;
        border-color: var(--primary-50, #ECEEF1) !important;
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
    }

    #mainNavbar.collapse .btn-primary:hover {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }

    /* Ensure toggler stays on top */
    header .navbar-toggler {
        position: relative;
        z-index: 1061 !important;
    }

    /* Add padding to body to account for fixed header */
    body {
        padding-top: 68px !important;
    }
}

/* CSS Variables for focus ring */
:root {
    --focus-ring: rgba(15,48,83,0.14);
    --focus-ring-strong: rgba(15,48,83,0.22);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Use focus-visible and a CSS variable for consistent rings */
button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .navbar-toggler:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring-strong);
    transition: box-shadow 120ms ease, outline 120ms ease;
}

/* Subtle fallback for browsers without focus-visible */
button:focus, .btn:focus, .nav-link:focus, .form-control:focus {
    outline: 2px solid rgba(15,48,83,0.08);
    outline-offset: 2px;
}

/* Dynamic badges: ensure readable text regardless of background by providing a faint border and minimum contrast treatment */
.badge-dynamic {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    color: #fff; /* default text color */
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;
    border: 1px solid rgba(0,0,0,0.05);
}

/* If background is very light, apply dark text - JS will add .low-contrast class when needed */
.badge-dynamic.low-contrast {
    color: #111;
    text-shadow: none;
    border-color: rgba(0,0,0,0.08);
}

/* status square slight smoothing */
.status-square {
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;
    transition: background 140ms ease;
}