/*
 * Menü rayı ve yana açılan paneller.
 *
 * NOT IN MainLayout.razor.css, and that is the whole point of this file existing.
 *
 * A `.razor.css` is SCOPED: Blazor stamps a `b-xxxxx` attribute onto the elements written in that
 * component's markup and rewrites every selector to match it. Plain <div>s and <button>s get the
 * stamp — but a COMPONENT does not. `NavLink` renders its own <a>, `MudDrawer` renders its own
 * container, and neither carries the stamp, so `.nova-ucan-link` and `.nova-drawer` matched
 * nothing at all while `.nova-ray` and `.nova-ucan` matched fine. The menu came out as a wall of
 * inline text: half the rules applying is worse than none, because the half that works makes it
 * look like the file was found.
 *
 * Linked from App.razor beside tables.css. Anything here that targets a component's own element —
 * every NavLink, the drawer — must stay in a global sheet.
 */
/* ══ Menü rayı ve yana açılan paneller ═══════════════════════════════════════
   Twenty links in one column did not fit: the menu scrolled, which means part of the navigation
   was always off screen. Five groups fit with room to spare, and what is inside a group opens
   beside it.

   Opening is pure CSS — :hover for the mouse, :focus-within for the keyboard. No circuit
   round-trip, so it is instant, and tabbing through the rail opens each panel in turn. */
.nova-ray {
    display: flex;
    flex-direction: column;
    padding: .5rem 0 1rem;

    /* The flyout is absolutely positioned OUTSIDE this box. A scroll container here would clip
       it — the classic way this pattern fails — so the rail must be short enough never to need
       one. It is: ten rows. */
    overflow: visible;
}

.nova-ray-grup {
    position: relative;
}

/*
 * The open group stacks above the ones below it. Without this the panel is painted in DOM order
 * and the NEXT rail item — a positioned sibling — lands on top of its first few rows. It shows up
 * as a panel that opens and is half-eaten, which reads as "did not open" just as easily.
 */
.nova-ray-grup:hover,
.nova-ray-grup:focus-within {
    z-index: 5;
}

.nova-ray-bas {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem 1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .875rem;
    color: var(--mud-palette-drawer-text);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.nova-ray-bas > span:first-of-type {
    flex: 1 1 auto;
}

.nova-ray-grup:hover > .nova-ray-bas,
.nova-ray-grup:focus-within > .nova-ray-bas {
    background-color: var(--mud-palette-action-default-hover);
}

/* The group holding the current page. A left bar rather than a fill: the fill is what hover uses,
   and a state you can reach by accident should not look like the state you are in. */
.nova-ray-grup.aktif > .nova-ray-bas {
    color: var(--mud-palette-primary);
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
    font-weight: 600;
}

.nova-ray-ok {
    opacity: .45;
}

.nova-ray-ayrac {
    height: 1px;
    margin: .5rem 1rem;
    background-color: var(--mud-palette-lines-default);
}

/* ── The flyout ──────────────────────────────────────────────────────────── */
.nova-ucan {
    position: absolute;
    inset-inline-start: 100%;
    top: -.35rem;
    z-index: 1201;              /* above the drawer, below the appbar */
    min-width: 15rem;
    padding: .4rem 0 .5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);

    /* Taller than the window is possible for Finans on a small laptop; scroll the PANEL, never
       the rail. */
    max-height: calc(100vh - 5rem);
    overflow-y: auto;

    /* visibility, not display:none — a display toggle cannot be transitioned and, more to the
       point, removes the panel from the tab order even while its group has focus. */
    visibility: hidden;
    opacity: 0;
    transform: translateX(-.25rem);
    transition: opacity .12s ease-out, transform .12s ease-out, visibility 0s linear .12s;
}

.nova-ray-grup:hover > .nova-ucan,
.nova-ray-grup:focus-within > .nova-ucan {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

/* Apsiyon's own device, and it earns its place here: Finans holds nine links and "para hareketi"
   and "tanımlar" are not the same errand. Same small capitals as everywhere else. */
.nova-ucan-baslik {
    padding: .5rem 1rem .2rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    opacity: .8;
}

.nova-ucan-baslik:not(:first-child) {
    margin-top: .35rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: .6rem;
}

.nova-ucan-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.nova-ucan-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.nova-ucan-link.active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ── Rozetler ─────────────────────────────────────────────────────────────
   On the rail AND inside the panel. A badge exists so a manager sees there is work without
   opening the screen; one hidden inside a closed panel does nothing at all, so the group's
   counts are summed onto the rail as well. */
.nova-ray-rozet,
.nova-ucan-rozet {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.nova-ray-rozet.hata,
.nova-ucan-rozet.hata {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.nova-ucan-rozet {
    margin-inline-start: auto;
}

/* ── Dokunmatik ───────────────────────────────────────────────────────────
   A flyout needs hover, and a touch screen has none — tapping a group would open a panel the
   next tap dismisses. So the test is the POINTER, not the window width: a laptop in a narrow
   window still has a mouse and should still get flyouts, while a full-screen tablet has no hover
   at any width. Asking about width was the wrong question and made the menu unfold on an ordinary
   desktop that happened to be windowed. */
@media (hover: none), (pointer: coarse) {
    /* Açılan panel artık grubun hemen altında duruyor, yani başlığı grubun adını ikinci kez
       yazıyor. Uçan haldeyken o tekrar doğru — panel nereden açıldığını söylüyor — burada
       gürültü. Yalnızca grup adını tekrar edenler gizleniyor; "Para hareketi", "Tanımlar" gibi
       gerçek alt başlıklar kalıyor. */
    .nova-ucan-baslik.yinelenen {
        display: none;
    }

    .nova-ucan {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        max-height: none;
        padding-block: 0;
    }

    .nova-ray-ok {
        display: none;
    }

    .nova-ucan-link {
        padding-inline-start: 2.6rem;
    }
}

/* The drawer must NOT clip the flyout.
   MudBlazor sets `.mud-drawer { overflow-y: auto }`, and a box that scrolls in one axis clips the
   other — so an absolutely-positioned panel reaching past the drawer's right edge would be cut
   off, or would summon a horizontal scrollbar. The rail is ten rows and never needs to scroll, so
   giving up the scroll here costs nothing.

   Below the breakpoint the panels unfold inline and the menu becomes long again, so the scroll
   comes back — that is the media query at the end of this file's nav block. */
/* ══ Drawer sütunu ═══════════════════════════════════════════════════════════
 * Marka üstte sabit, altında menü. Bu kurallar rich-editor.css'ten buraya taşındı (#213): orada
 * .nova-drawer .mud-drawer-content'e `overflow: hidden` veriyorlardı ve uçan paneli kırpıyorlardı.
 * O dosya nav.css'ten SONRA yükleniyor, yani aynı özgüllükte olan düzeltmeyi sırayla eziyordu —
 * hem de tam olarak kırpma yüzünden panelin hiç açılmamış gibi göründüğü bir hatada. Menünün
 * bütün düzeni tek dosyada durursa bu yarış bir daha kurulamaz.
 */
.nova-drawer,
.nova-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}

/* Marka kaydırılıp gitmez: sütun ikiye bölünmüş, kimlik sabit yükseklikte ve küçülemez. */
.nova-drawer .nova-brand {
    flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    /*
     * Hiçbir katman kırpmayacak — ne drawer ne de MudDrawer'ın kendi .mud-drawer-content'i.
     * İkisi de gerekiyor: dıştakini açmak, içteki kapalıysa hiçbir işe yaramıyor.
     *
     * `.nova-drawer` MudDrawer'ın Class parametresini ilettiği varsayımına dayanıyor (iletiyor,
     * bUnit ile doğrulandı); `:has(.nova-ray)` ise cevabını bizim kontrol ettiğimiz soru — rayı
     * içeren drawer — ve özgüllüğü bir sınıf daha yüksek. İkisi birden yazılı, çünkü bu kuralın
     * sessizce eşleşmemesi tam olarak dört deploy süren hataydı.
     *
     * Burada hiçbir şeyin kaydırılmasına gerek yok: ray on satır, marka da sabit.
     */
    .nova-drawer,
    .nova-drawer .mud-drawer-content,
    .mud-drawer:has(.nova-ray),
    .mud-drawer:has(.nova-ray) .mud-drawer-content {
        overflow: visible;
    }
}

@media (hover: none), (pointer: coarse) {
    /*
     * Dokunmatikte paneller satır arasına açılıyor, yani sütun yine uzuyor. Kaydırma geri geliyor
     * ama YALNIZCA menüde: marka yerinde kalsın diye. Eskiden kaydırılan .mud-navmenu idi; #209'da
     * MudNavMenu yerini .nova-ray'e bıraktı ve o kural o günden beri ölüydü.
     */
    .nova-drawer .mud-drawer-content {
        overflow: hidden;
    }

    .nova-ray {
        flex: 1 1 auto;
        overflow-y: auto;
        /* Menünün sonuna gelmek arkadaki sayfayı kaydırmaya başlamasın. */
        overscroll-behavior: contain;
    }
}