/*
 * Filament panel global nav styling.
 *
 * Matches the public-site header exactly: dark blue background ($blue =
 * #0d2ea0), white menu text, light-blue hover ($light-blue = #1861d8).
 * Renders into PanelsRenderHook::TOPBAR_END via UserPanelProvider, with
 * structure shared from `resources/views/layouts/inc/nav-items.blade.php`.
 *
 * Scoped under `.filament-global-nav` so legacy `.nav-*` rules in
 * `resources/sass/_nav.scss` don't leak in or out — except for the
 * `.fi-topbar` rules at the top, which are panel-wide on purpose
 * (we need to recolor Filament's own topbar chrome).
 */

/* ---- Panel topbar (Filament chrome) — match public-site header ---- */
.fi-topbar {
    background: #0d2ea0 !important;
    color: #ffffff;
}

.fi-topbar .fi-topbar-item,
.fi-topbar .fi-icon-btn {
    color: #ffffff;
}

.fi-topbar .fi-icon-btn:hover {
    background: #1861d8;
}

/* Sidebar collapse / mobile menu trigger needs visible chevron on blue. */
.fi-topbar .fi-icon-btn svg {
    color: inherit;
}

/* ---- Root container ---- */
/* `align-self: stretch` overrides .fi-topbar's `align-items: center` so the
   nav fills the topbar's full height — letting per-item hover backgrounds
   reach top and bottom edges like the public-site header. */
.filament-global-nav {
    display: flex;
    align-self: stretch;
    height: auto;
}

.filament-global-nav__list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filament-global-nav__list > li {
    line-height: 1rem;
    display: flex;
}

/* ---- Trigger buttons (top-level menu items) ---- */
.filament-global-nav .nav-dropdown {
    position: relative;
}

.filament-global-nav .nav-dropdown > button,
.filament-global-nav > .filament-global-nav__list > li > a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Catamaran', sans-serif;
    padding: 1rem;
    cursor: pointer;
    line-height: 1rem;
    white-space: nowrap;
    text-decoration: none;
    height: 100%;
    transition: background-color 0.15s ease-out;
}

.filament-global-nav .nav-dropdown > button:hover,
.filament-global-nav .nav-dropdown > button:focus-visible,
.filament-global-nav > .filament-global-nav__list > li > a:hover {
    background: #1861d8;
    color: #ffffff;
}

.filament-global-nav .nav-dropdown > button:focus-visible {
    outline: 2px solid #f38e29;
    outline-offset: -2px;
}

/* Caret on trigger (inline SVG with hardcoded stroke="#fff"). */
.filament-global-nav .nav-caret {
    transition: transform 0.2s ease-out;
}
.filament-global-nav .nav-caret--open {
    transform: rotate(180deg);
}

/* ---- Dropdown panels (light panels float over the blue topbar) ---- */
.filament-global-nav .nav-dropdown__panel {
    position: absolute;
    top: calc(100% - 14px);
    right: 0;
    z-index: 20;
    padding-top: 0.6rem;
}

.filament-global-nav .nav-dropdown__panel .arrow {
    display: block;
    position: absolute;
    top: 0;
    right: 0.8rem;
    width: 1.2rem;
    height: 0.6rem;
}

.filament-global-nav .nav-dropdown__panel .arrow::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    border-width: 0 0.6rem 0.6rem;
    border-color: transparent;
    border-bottom-color: #f7f7f7;
    border-style: solid;
}

.filament-global-nav .nav-dropdown__panel ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    background: #f7f7f7;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.filament-global-nav .nav-dropdown__panel ul li a {
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: center;
    column-gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    color: #333333;
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}

.filament-global-nav .nav-dropdown__panel ul li a:hover {
    background: #eaeaea;
    color: #333333;
}

.filament-global-nav .nav-dropdown__panel ul li a:focus-visible {
    outline: 2px solid #f38e29;
    outline-offset: -2px;
}

/* Icon-column wrapper inside dropdown items (legacy `.icon` class). */
.filament-global-nav .nav-dropdown__panel ul li a .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 0;
}

/* Inline SVG sizing for the user-icon family. */
.filament-global-nav .icon-user {
    width: 30px;
    height: 30px;
}

/* ---- User menu specifics ---- */
.filament-global-nav #nav-user {
    margin-left: 1rem;
}

/* "New" chip on the account-menu trigger (mirrors `.nav-new-chip` in _nav.scss).
   The trigger spans the full topbar height, so the offsets hug the icon's
   corner (same values as the `.global-header` override). */
.filament-global-nav .nav-new-chip {
    position: absolute;
    top: 0.35rem;
    right: 0.15rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #f38e29;
    color: #020920;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.filament-global-nav .nav-user-menu {
    right: 8px;
}

.filament-global-nav .nav-user-menu__greeting {
    padding: 0.5rem 1.2rem 0.75rem;
    font-size: 0.75rem;
    color: #666666;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.25rem;
}

.filament-global-nav .nav-user-menu__greeting strong {
    display: block;
    color: #333333;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ---- Alpine transitions ---- */
.filament-global-nav .nav-dropdown-enter {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.filament-global-nav .nav-dropdown-enter-start {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top right;
}
.filament-global-nav .nav-dropdown-enter-end {
    opacity: 1;
    transform: scale(1);
}
.filament-global-nav .nav-dropdown-leave {
    transition: opacity 0.1s ease-in, transform 0.1s ease-in;
}
.filament-global-nav .nav-dropdown-leave-start {
    opacity: 1;
    transform: scale(1);
}
.filament-global-nav .nav-dropdown-leave-end {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top right;
}

/* Hide `x-cloak`'d elements until Alpine initializes. */
.filament-global-nav [x-cloak] {
    display: none !important;
}