/* =================================================
   UI POLISH LAYER — modern depth & interaction refinement
   Loads AFTER theme.css in user/institute/admin/home/static layouts.
   Token-driven refinement of the banana-leaf design system:
   glass navbar, softer card chrome, layered elevation scale,
   focus-visible rings, refined popovers/modals/scrollbars.
   Brand palette untouched — this file only upgrades execution.
   ================================================= */

:root {
    /* Elevation scale — green-tinted ambient + neutral key shadows */
    --elev-1: 0 1px 2px rgba(22, 69, 16, 0.05), 0 2px 8px rgba(22, 69, 16, 0.06);
    --elev-2: 0 2px 4px rgba(22, 69, 16, 0.05), 0 10px 24px rgba(22, 69, 16, 0.10);
    --elev-3: 0 4px 8px rgba(0, 0, 0, 0.06), 0 20px 48px rgba(22, 69, 16, 0.16);
    --nav-glass: rgba(52, 144, 36, 0.86);
    --nav-glass-scrolled: rgba(45, 126, 31, 0.94);
    --focus-ring: rgba(58, 158, 40, 0.45);
}
[data-theme="dark"] {
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.30);
    --elev-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.45);
    --elev-3: 0 4px 8px rgba(0, 0, 0, 0.40), 0 24px 56px rgba(0, 0, 0, 0.55);
    --nav-glass: rgba(30, 45, 34, 0.82);
    --nav-glass-scrolled: rgba(26, 39, 30, 0.92);
    --focus-ring: rgba(82, 181, 62, 0.50);
}

/* =================================================
   GLASS NAVBAR — the signature move.
   Solid green stays as the no-blur fallback; browsers with
   backdrop-filter get a translucent, saturated glass bar that
   deepens once the page scrolls (navbar-scroll.js adds .scrolled).
   ================================================= */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navbar.sticky-top {
        background-color: var(--nav-glass) !important;
        -webkit-backdrop-filter: blur(14px) saturate(170%);
        backdrop-filter: blur(14px) saturate(170%);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .navbar.sticky-top.scrolled {
        background-color: var(--nav-glass-scrolled) !important;
    }
}
.navbar.sticky-top.scrolled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(22, 69, 16, 0.14);
}
[data-theme="dark"] .navbar.sticky-top.scrolled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* =================================================
   CARDS — keep the olive left accent (brand signature),
   drop the boxy 2px frame for a 1px hairline + layered depth.
   ================================================= */
.card {
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-radius: 14px !important;
    box-shadow: var(--elev-1);
}
@media (hover: hover) {
    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--elev-2) !important;
    }
}
[data-theme="dark"] .card {
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    box-shadow: var(--elev-1);
}
[data-theme="dark"] .card:hover {
    box-shadow: var(--elev-2) !important;
}

/* =================================================
   FOCUS — keyboard users get a clear ring; mouse clicks don't
   leave a lingering glow. Applies everywhere, both themes.
   ================================================= */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Buttons: tactile press */
.btn:active {
    transform: translateY(1px) scale(0.995);
}

/* =================================================
   FORM FIELDS — rounded, calm at rest, a soft double ring on focus
   ================================================= */
.form-control,
.form-select {
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--olive-primary);
    box-shadow: 0 0 0 3px var(--olive-alpha-15);
}

/* =================================================
   DROPDOWNS — floating panels with real elevation
   ================================================= */
.dropdown-menu {
    border: 1px solid var(--border-color, var(--beige-dark));
    border-radius: 14px;
    box-shadow: var(--elev-3);
    padding: 0.4rem;
    overflow: hidden;
}
.dropdown-menu .dropdown-item {
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-menu .dropdown-divider {
    opacity: 0.6;
    margin: 0.35rem 0.25rem;
}

/* =================================================
   MODALS — deeper elevation, blurred veil behind
   ================================================= */
.modal-content {
    border: 1px solid var(--border-color, var(--beige-dark));
    border-radius: 18px;
    box-shadow: var(--elev-3);
    overflow: hidden;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .modal-backdrop.show {
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        background-color: rgba(12, 20, 10, 0.45);
        opacity: 1;
    }
}

/* =================================================
   SCROLLBARS — thin, rounded, brand-tinted on hover
   ================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--beige-dark) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--beige-dark);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--olive-tint-50, #A5D29E);
    background-clip: content-box;
}
[data-theme="dark"] * {
    scrollbar-color: #324438 transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #324438;
    background-clip: content-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #45A635;
    background-clip: content-box;
}

/* =================================================
   TEXT SELECTION — on-brand instead of browser default blue
   ================================================= */
::selection {
    background: var(--olive-tint-30, #C9E4C4);
    color: var(--olive-deepest, #164510);
}
[data-theme="dark"] ::selection {
    background: rgba(82, 181, 62, 0.35);
    color: #E8F5EC;
}