/* ==========================================================================
   FinMinion navigation — one floating "island" that morphs into the menu.
   Header and navigation share a single surface, so they read as one object
   floating over the dashboard rather than a bar + a sidebar.
   Loaded after brand.css.
   ========================================================================== */

:root {
    --fm-navy-950: #001226;
    --fm-navy-900: #001c38;
    --fm-navy-800: #003a70;
    --fm-navy-600: #1c63ab;
    --fm-gold: #e69a00;
    /* space the fixed island occupies at the top; keeps the existing .content offset */
    --fm-header-h: 4rem;
    --fm-island-h: 3.35rem;
    --fm-ease: cubic-bezier(.65, 0, .25, 1);
    --fm-ease-out: cubic-bezier(.16, 1, .3, 1);

    --fm-glass: color-mix(in srgb, var(--phoenix-body-bg, #fff) 80%, transparent);
    --fm-glass-solid: color-mix(in srgb, var(--phoenix-body-bg, #fff) 94%, transparent);
    --fm-line: var(--phoenix-border-color-translucent, rgba(0, 28, 56, .09));
    --fm-ink: var(--phoenix-emphasis-color, #16283b);
    --fm-muted: var(--phoenix-secondary-color, #5c7186);
    --fm-soft: var(--phoenix-tertiary-color, #8697a8);
    --fm-tint: var(--phoenix-primary-bg-subtle, #e8f0fa);
    --fm-accent: var(--phoenix-primary, #003a70);
}

/* No sidebar any more — page content uses the full width */
.content,
.content.kanban-content {
    margin-left: 0 !important;
}

/* Lock page scroll while the panel is open */
body:has(.fm-island.is-open) { overflow: hidden; }

kbd.fm-k,
.fm-island kbd {
    display: inline-block;
    min-width: 1.35rem;
    padding: .08rem .38rem;
    border-radius: .35rem;
    border: 1px solid var(--fm-line);
    background: var(--fm-tint);
    color: var(--fm-muted);
    font: 700 .64rem/1.4 "Nunito Sans", system-ui, sans-serif;
    text-align: center;
}


/* ==========================================================================
   Scrim — the page recedes while the island is open
   ========================================================================== */
.fm-scrim {
    position: fixed;
    inset: 0;
    z-index: 1059;
    background: radial-gradient(120% 90% at 50% 0%, rgba(0, 28, 56, .30), rgba(0, 18, 38, .55));
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.fm-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }


/* ==========================================================================
   The island
   ========================================================================== */
.fm-island {
    position: fixed;
    top: .65rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 1035;
    width: min(46rem, calc(100vw - 1.5rem));
    border-radius: 999px;
    background: var(--fm-glass);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    backdrop-filter: saturate(170%) blur(18px);
    border: 1px solid var(--fm-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 30px -12px rgba(0, 28, 56, .28), 0 2px 6px rgba(0, 28, 56, .06);
    transition: width .6s var(--fm-ease), border-radius .6s var(--fm-ease), background .4s, box-shadow .5s;
}
.fm-island.is-open {
    z-index: 1060;
    width: min(66rem, calc(100vw - 1.5rem));
    border-radius: 1.75rem;
    background: var(--fm-glass-solid);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 90px -28px rgba(0, 18, 38, .55), 0 6px 18px rgba(0, 28, 56, .12);
}

/* ---- the bar row ---- */
.fm-bar {
    height: var(--fm-island-h);
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .35rem 0 .35rem;
}

.fm-mark {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px var(--fm-line);
    transition: transform .4s var(--fm-ease-out), box-shadow .3s;
}
.fm-mark img { width: 1.55rem; height: 1.55rem; object-fit: contain; border-radius: 4px; }
.fm-mark:hover { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 0 2px var(--fm-gold); }

/* the "where am I / open menu" control */
.fm-trigger {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.6rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .55rem 0 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fm-ink);
    text-align: left;
    cursor: pointer;
    transition: background .2s;
}
.fm-trigger:hover { background: var(--fm-tint); }
.fm-trigger:focus-visible,
.fm-icon-btn:focus-visible,
.fm-user:focus-visible,
.fm-mark:focus-visible { outline: 2px solid var(--fm-gold); outline-offset: 2px; }

.fm-trigger__where { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: .5rem; overflow: hidden; white-space: nowrap; }
.fm-trigger__parent { font-size: .78rem; font-weight: 600; color: var(--fm-soft); }
.fm-trigger__parent::after { content: "/"; margin-left: .5rem; opacity: .6; }
.fm-trigger__title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.fm-trigger__hint { display: inline-flex; gap: .2rem; opacity: .75; transition: opacity .3s; }
.fm-island.is-open .fm-trigger__hint { opacity: 0; }

/* caret that folds into a close cross */
.fm-caret {
    position: relative;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--fm-accent);
    color: #fff;
    transition: background .3s, transform .5s var(--fm-ease);
}
.fm-caret i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .62rem;
    height: 2px;
    margin: -1px 0 0 -.31rem;
    border-radius: 2px;
    background: currentColor;
    transition: transform .5s var(--fm-ease);
}
.fm-caret i:nth-child(1) { transform: translate(-.2rem, .08rem) rotate(45deg); }
.fm-caret i:nth-child(2) { transform: translate(.2rem, .08rem) rotate(-45deg); }
.fm-trigger:hover .fm-caret { background: var(--fm-navy-600); }
.fm-island.is-open .fm-caret { background: var(--fm-gold); color: var(--fm-navy-900); transform: rotate(180deg); }
.fm-island.is-open .fm-caret i:nth-child(1) { transform: translate(0, 0) rotate(45deg); }
.fm-island.is-open .fm-caret i:nth-child(2) { transform: translate(0, 0) rotate(-45deg); }

/* right-hand tools */
.fm-tools { flex-shrink: 0; display: flex; align-items: center; gap: .1rem; }
.fm-icon-btn {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fm-muted);
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.fm-icon-btn:hover { background: var(--fm-tint); color: var(--fm-accent); }
.fm-icon-btn__badge {
    position: absolute;
    top: .1rem;
    right: 0;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    border-radius: 1rem;
    background: var(--phoenix-danger, #d6455f);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--phoenix-body-bg, #fff);
}

.fm-user { display: inline-flex; margin-left: .15rem; border-radius: 50%; text-decoration: none; }
.fm-user__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--phoenix-body-bg, #fff), 0 0 0 3px var(--fm-line);
    transition: box-shadow .25s;
}
.fm-user:hover .fm-user__avatar { box-shadow: 0 0 0 2px var(--phoenix-body-bg, #fff), 0 0 0 4px var(--fm-gold); }
.fm-user-menu { min-width: 16rem; border-radius: 1rem; margin-top: .8rem !important; overflow: hidden; }


/* ==========================================================================
   The panel — same surface, unfolds downward from the bar
   ========================================================================== */
.fm-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .6s var(--fm-ease), visibility 0s linear .6s;
}
.fm-island.is-open .fm-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .6s var(--fm-ease), visibility 0s; }
.fm-panel__clip { min-height: 0; overflow: hidden; }
.fm-panel__inner {
    max-height: calc(100vh - var(--fm-island-h) - 2.6rem);
    overflow-y: auto;
    padding: .25rem 1rem 1rem;
    opacity: 0;
    transform: translateY(-.6rem);
    transition: opacity .25s ease, transform .3s ease;
}
.fm-island.is-open .fm-panel__inner { opacity: 1; transform: none; transition: opacity .5s ease .18s, transform .6s var(--fm-ease-out) .15s; }

/* filter */
.fm-find {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem;
    padding: 0 .9rem;
    height: 2.9rem;
    border-radius: 1rem;
    background: var(--fm-tint);
    border: 1px solid transparent;
    color: var(--fm-muted);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.fm-find:focus-within { border-color: var(--fm-accent); background: var(--phoenix-body-bg, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fm-accent) 12%, transparent); }
.fm-find input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fm-ink);
    font-size: .95rem;
    font-weight: 600;
}
.fm-find input::placeholder { color: var(--fm-soft); font-weight: 500; }
.fm-find__clear { border: 0; background: none; color: var(--fm-soft); padding: .25rem; cursor: pointer; }
.fm-find__clear:hover { color: var(--fm-ink); }

/* browse: groups on the left, that group's pages on the right */
.fm-browse { position: relative; }
.fm-groups {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 15.5rem;
    min-height: 19rem;
    display: grid;
    align-content: start;
    gap: .2rem;
}

.fm-group { opacity: 0; transform: translateY(.6rem); transition: opacity .2s, transform .2s; }
.fm-island.is-open .fm-group {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--fm-ease-out) calc(.3s + var(--i) * .035s), transform .6s var(--fm-ease-out) calc(.3s + var(--i) * .035s);
}

.fm-group__btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border: 0;
    border-radius: .9rem;
    background: transparent;
    color: var(--fm-muted);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.fm-group__btn:hover { background: var(--fm-tint); color: var(--fm-ink); }
.fm-group__btn:focus-visible { outline: 2px solid var(--fm-gold); outline-offset: -2px; }
.fm-group.is-active > .fm-group__btn { background: var(--fm-accent); color: #fff; box-shadow: 0 8px 20px -10px var(--fm-accent); }
.fm-group__ico { flex-shrink: 0; width: 1.35rem; display: inline-flex; justify-content: center; font-size: 1rem; opacity: .85; }
.fm-group__ico svg { width: 1.1rem; height: 1.1rem; }
.fm-group__name { flex: 1; min-width: 0; font-size: .92rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-group__count {
    min-width: 1.3rem;
    padding: .02rem .38rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: .66rem;
    font-weight: 800;
    text-align: center;
}
/* where you currently are */
.fm-group.is-current:not(.is-active) > .fm-group__btn::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: 50%;
    width: .32rem;
    height: .32rem;
    margin-top: -.16rem;
    border-radius: 50%;
    background: var(--fm-gold);
}

/* pages of the active group */
.fm-links { display: none; }
@media (min-width: 768px) {
    .fm-links {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 16.5rem;
        right: 0;
        display: block;
        overflow-y: auto;
        padding: .2rem .2rem .2rem 1.5rem;
        border-left: 1px solid var(--fm-line);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-.8rem);
        transition: opacity .2s ease, transform .3s var(--fm-ease-out), visibility 0s linear .2s;
    }
    .fm-group.is-active > .fm-links {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .35s ease .05s, transform .45s var(--fm-ease-out) .05s, visibility 0s;
    }
    .fm-links__title {
        margin: .35rem 0 .9rem .1rem;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--fm-soft);
    }
    .fm-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .55rem; }
}

/* page cards */
.fm-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1px solid var(--fm-line);
    border-radius: 1rem;
    background: var(--phoenix-body-bg, #fff);
    color: var(--fm-ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform .3s var(--fm-ease-out), border-color .2s, box-shadow .3s, background .2s;
}
.fm-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8rem;
    bottom: .8rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fm-gold);
    transform: scaleY(0);
    transition: transform .3s var(--fm-ease-out);
}
.fm-card__name { flex: 1; min-width: 0; font-size: .92rem; font-weight: 700; }
.fm-card__group { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fm-soft); }
.fm-card i { font-size: .72rem; color: var(--fm-accent); opacity: 0; transform: translateX(-.4rem); transition: opacity .2s, transform .3s var(--fm-ease-out); }
.fm-card:hover,
.fm-card:focus-visible,
.fm-card.is-first { border-color: color-mix(in srgb, var(--fm-accent) 35%, transparent); box-shadow: 0 12px 24px -16px rgba(0, 28, 56, .5); }
.fm-card:hover,
.fm-card:focus-visible { transform: translateY(-2px); color: var(--fm-ink); }
.fm-card:hover i,
.fm-card:focus-visible i,
.fm-card.is-first i { opacity: 1; transform: none; }
.fm-card:hover::before,
.fm-card.is-current::before { transform: scaleY(1); }
.fm-card:focus-visible { outline: 2px solid var(--fm-gold); outline-offset: 1px; }
.fm-card.is-current { background: var(--fm-tint); }

/* filter results */
.fm-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .55rem; min-height: 8rem; align-content: start; }
.fm-results .fm-card { animation: fm-rise .4s var(--fm-ease-out) both; animation-delay: calc(var(--i) * 25ms); }
.fm-empty { grid-column: 1 / -1; margin: 2rem 0; text-align: center; color: var(--fm-soft); font-weight: 600; }
@keyframes fm-rise { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   Small screens — island spans the width, groups become an accordion
   ========================================================================== */
@media (max-width: 767.98px) {
    .fm-island { width: calc(100vw - 1rem); top: .5rem; }
    .fm-island.is-open { width: calc(100vw - 1rem); border-radius: 1.4rem; }
    .fm-trigger__parent { display: none; }
    .fm-groups { width: 100%; min-height: 0; }
    .fm-group.is-active > .fm-links { display: block; padding: .3rem 0 .6rem .4rem; animation: fm-rise .35s var(--fm-ease-out); }
    .fm-links__title { display: none; }
    .fm-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
    .fm-card { padding: .7rem .9rem; }
    .fm-panel__inner { padding: .2rem .6rem .8rem; }
}
@media (max-width: 400px) {
    .fm-icon-btn { width: 2.1rem; height: 2.1rem; }
    .fm-user__avatar { width: 2.1rem; height: 2.1rem; }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .fm-mark { background: #e8eef6; }
}
[data-bs-theme="dark"] .fm-mark { background: #e8eef6; }
[data-bs-theme="dark"] .fm-island { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset; }

@media (prefers-reduced-motion: reduce) {
    .fm-island, .fm-panel, .fm-panel__inner, .fm-scrim, .fm-group, .fm-links, .fm-caret, .fm-caret i { transition: none !important; }
    .fm-group, .fm-island.is-open .fm-group { opacity: 1; transform: none; }
    .fm-results .fm-card { animation: none; }
}