/*
 * HOMEi navigation — the approved redesign (handoff «تحسينات قائمة Homei-2»).
 *
 * Sizes, spacing, radii, colours and states below are transcribed from the
 * design files, not re-interpreted. Every directional rule uses logical
 * properties (inline-start/end, padding-inline, inset-inline) so the SAME
 * component renders correctly in Arabic RTL and English LTR with no
 * duplicated ruleset.
 *
 * Scope: topbar + sidebar + mobile chrome + the General Settings cards page.
 * Nothing here touches page content styling.
 */

:root {
    /* Brand — taken from the official logo. */
    --hn-orange: #f28126;
    /* Shared roles read from the token layer (tokens.css, HO-3104): the
       brand tints, the page and card surfaces, the primary text, the danger
       pair. --hn-faint (gray-400, 2.54:1) was painted as TEXT seven times;
       de-emphasis is --ho-ink-muted. --hn-faint-2/-3 and --hn-pin stay as
       the handoff set them: keyboard hints and pin glyphs, decorative, and
       flagged in the 2026-09-10 review rather than silently darkened. */
    --hn-orange-bg: var(--ho-accent-soft);
    --hn-orange-soft: var(--ho-accent-soft);
    --hn-orange-border: #f8d5b4;
    --hn-orange-text: var(--ho-accent-ink);
    --hn-navy: #101c3d;

    /* Surfaces & borders */
    --hn-page: var(--ho-surface-sunken);
    --hn-surface: var(--ho-surface);
    --hn-surface-2: var(--ho-surface-sunken);
    --hn-border: var(--ho-line);
    --hn-border-soft: #f0f1f3;
    --hn-border-faint: #f4f5f7;

    /* Text */
    --hn-text: var(--ho-ink);
    --hn-text-strong: #1f2937;
    --hn-text-2: #3f4654;
    --hn-text-3: #4b5563;
    --hn-muted: var(--ho-ink-muted);
    --hn-faint: var(--ho-ink-muted);
    --hn-faint-2: #a3a8b0;
    --hn-faint-3: #c3c7cd;
    --hn-pin: #dfe2e7;
    --hn-pin-on: #f0a63c;

    --hn-danger: var(--ho-danger-line);
    --hn-danger-bg: var(--ho-danger-soft);
    --hn-danger-border: #fecaca;

    --hn-shadow-dropdown: 0 14px 36px rgb(16 28 61 / 14%);
    --hn-shadow-panel: 0 16px 44px rgb(16 28 61 / 16%);
    --hn-shadow-fly: 0 12px 34px rgb(16 28 61 / 14%);
    --hn-shadow-drawer: 0 0 40px rgb(16 28 61 / 25%);
    --hn-shadow-sheet: 0 -10px 40px rgb(16 28 61 / 20%);
    --hn-scrim: rgb(16 28 61 / 35%);

    --hn-topbar-h: 56px;
    --hn-rail-w: 56px;
    --hn-drawer-w: 300px;
}

/*
 * Dark mode is not part of the handoff (it is a light-only design), but the
 * panel ships a theme switcher, so the same tokens are remapped onto
 * Filament's own greys instead of leaving the chrome unreadable.
 */
.dark {
    --hn-surface-2: var(--ho-surface-raised);
    --hn-border-soft: var(--gray-800);
    --hn-border-faint: var(--gray-800);
    --hn-orange-border: rgb(242 129 38 / 40%);
    --hn-text-strong: var(--gray-100);
    --hn-text-2: var(--gray-300);
    --hn-text-3: var(--gray-300);
    --hn-faint-2: var(--gray-500);
    --hn-faint-3: var(--gray-600);
    --hn-pin: var(--gray-700);
    --hn-danger-border: rgb(220 38 38 / 40%);
}

/* ══════════════════════════════════════════════════════════════════════
   Layout shell — 56px topbar instead of Filament's 64px
   ══════════════════════════════════════════════════════════════════════ */

.fi-body .fi-topbar-ctn,
.fi-body .fi-topbar {
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.fi-body .fi-topbar-ctn {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    /*
     * Filament clips this container horizontally. The dropdowns, the bottom
     * sheets and the full-screen search all live inside it, so the clip has
     * to go or they are cut off at the 56px bar.
     */
    overflow: visible;
}

.hn-topbar {
    background: var(--hn-surface);
    border-block-end: 1px solid var(--hn-border);
}

.hn-topbar-row {
    height: var(--hn-topbar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding-inline: 18px;
}

@media (max-width: 1023.98px) {
    .hn-topbar-row {
        min-height: 58px;
        height: auto;
        gap: 10px;
        padding-inline: 14px;
    }
}

/* Logo — text mark, Helvetica, brand orange. */
.hn-logo {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.5px;
    color: var(--hn-orange);
    flex-shrink: 0;
    line-height: 1;
    text-decoration: none;
}

.hn-logo:hover {
    color: var(--hn-orange);
}

.hn-logo sup {
    font-size: var(--ho-text-xs);
    vertical-align: top;
}

/* 32×32 outline button used by the collapse toggle and the bell. */
.hn-iconbtn {
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--hn-border);
    background: var(--hn-surface);
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hn-muted);
    padding: 0;
    flex-shrink: 0;
}

.hn-iconbtn:hover {
    background: var(--hn-surface-2);
}

.hn-iconbtn-bare {
    border-color: transparent;
    background: transparent;
    color: var(--hn-text-3);
    position: relative;
}

.hn-chev-toggle {
    transition: transform 0.2s;
}

.hn-topbar-search {
    position: relative;
    flex-shrink: 0;
}

.hn-search-box {
    inline-size: 250px;
    block-size: 34px;
    border: 1px solid var(--hn-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 11px;
    background: var(--hn-surface);
}

.hn-search-box input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--hn-text-strong);
    min-inline-size: 0;
}

.hn-kbd {
    font-size: var(--ho-text-xs);
    color: #b6bac1;
    border: 1px solid var(--hn-border);
    border-radius: 5px;
    padding: 1px 5px;
    font-family: Helvetica, Arial, sans-serif;
    flex-shrink: 0;
}

.hn-search-results {
    position: absolute;
    inset-block-start: 40px;
    inset-inline-start: 0;
    inline-size: 340px;
    max-block-size: 340px;
    overflow-y: auto;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    box-shadow: var(--hn-shadow-dropdown);
    padding: 6px;
    z-index: 60;
}

.hn-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.hn-search-result:hover {
    background: var(--hn-orange-soft);
}

.hn-search-result-label {
    flex: 1;
    min-inline-size: 0;
    font-size: 12.5px;
    color: var(--hn-text-strong);
    white-space: normal;
    overflow-wrap: anywhere;
}

.hn-search-result-dept {
    font-size: var(--ho-text-xs);
    color: var(--hn-faint);
    flex-shrink: 0;
}

.hn-empty {
    padding: 14px 10px;
    font-size: 12.5px;
    color: var(--hn-faint);
    text-align: center;
}

/* Breadcrumb */
.hn-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--hn-muted);
    min-inline-size: 0;
    overflow: hidden;
}

.hn-crumb-sep {
    color: var(--hn-faint-3);
}

.hn-crumb {
    white-space: nowrap;
    padding: 3px 4px;
    border-radius: 6px;
    color: var(--hn-muted);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
}

.hn-crumb:hover {
    background: var(--hn-border-faint);
    color: var(--hn-orange-text);
}

.hn-crumb-last {
    color: var(--hn-text-strong);
    font-weight: 600;
}

.hn-topbar-end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Bell + counter badge */
.hn-bell {
    position: relative;
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 9px;
    color: var(--hn-text-3);
    background: none;
    border: 0;
    padding: 0;
}

.hn-bell:hover {
    background: var(--hn-surface-2);
}

.hn-count {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-start: -9px;
    /* White on the bright brand orange was 2.64:1 at 11px; the badge fill
       is the readable orange (5.18:1 under white) — the bell keeps its
       brand colour, the number on it can be read. */
    background: var(--hn-orange-text);
    color: #fff;
    font-size: var(--ho-text-xs);
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    border: 2px solid var(--hn-surface);
    font-family: Helvetica, Arial, sans-serif;
}

.hn-avatar {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--hn-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
}

.hn-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ── Notifications dropdown ─────────────────────────────────────────── */

.hn-pop {
    position: absolute;
    inset-block-start: 42px;
    inset-inline-end: -8px;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 14px;
    box-shadow: var(--hn-shadow-panel);
    z-index: 70;
}

.hn-pop-notif {
    inline-size: 380px;
    max-block-size: 70vh;
    overflow-y: auto;
}

.hn-pop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--hn-border);
    position: sticky;
    inset-block-start: 0;
    background: var(--hn-surface);
}

.hn-pop-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-pill {
    background: var(--hn-orange-bg);
    color: var(--hn-orange-text);
    font-size: var(--ho-text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: Helvetica, Arial, sans-serif;
}

.hn-pop-actions {
    margin-inline-start: auto;
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.hn-link {
    color: var(--hn-orange-text);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
}

.hn-link:hover {
    text-decoration: underline;
}

.hn-link-danger {
    color: var(--hn-danger);
}

.hn-notif {
    display: flex;
    gap: 10px;
    padding: 13px 16px;
    border-block-end: 1px solid var(--hn-border-faint);
}

.hn-notif:hover {
    background: var(--hn-orange-soft);
}

.hn-notif-read {
    opacity: 0.55;
}

.hn-dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--hn-orange);
    margin-block-start: 6px;
    flex-shrink: 0;
}

.hn-notif-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--hn-text);
    line-height: 1.5;
}

.hn-notif-sub {
    font-size: 12px;
    color: var(--hn-muted);
    margin-block-start: 1px;
}

.hn-notif-time {
    font-size: var(--ho-text-xs);
    color: var(--hn-faint);
    margin-block-start: 4px;
}

.hn-notif-action {
    margin-block-start: 8px;
    background: var(--hn-surface);
    border: 1px solid var(--hn-orange-border);
    color: var(--hn-orange-text);
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.hn-notif-action:hover {
    background: var(--hn-orange-bg);
    color: var(--hn-orange-text);
}

.hn-x {
    inline-size: 20px;
    block-size: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--hn-faint-3);
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
}

.hn-x:hover {
    background: var(--hn-border-faint);
    color: var(--hn-text-3);
}

.hn-notif-empty {
    padding: 34px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--hn-faint);
}

/* ── Account dropdown ───────────────────────────────────────────────── */

.hn-pop-acct {
    inline-size: 270px;
    padding: 8px;
    inset-inline-end: 0;
    inset-block-start: 46px;
}

.hn-acct-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--hn-border);
    margin-block-end: 8px;
}

.hn-acct-avatar {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: var(--hn-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.hn-acct-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hn-acct-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-acct-role {
    font-size: var(--ho-text-xs);
    color: var(--hn-faint);
}

.hn-seg {
    display: flex;
    gap: 6px;
    padding: 2px 4px 8px;
}

.hn-seg-lang {
    padding: 0 4px 8px;
}

.hn-seg-btn {
    flex: 1;
    block-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hn-border);
    background: transparent;
    color: var(--hn-muted);
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
}

.hn-seg-lang .hn-seg-btn {
    block-size: 34px;
}

.hn-seg-btn.hn-on {
    background: var(--hn-orange-bg);
    color: var(--hn-orange-text);
    border-color: var(--hn-orange-border);
    font-weight: 600;
}

.hn-logout {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--hn-danger);
    border: 0;
    border-block-start: 1px solid var(--hn-border);
    margin-block-start: 2px;
    background: none;
    inline-size: 100%;
    font-family: inherit;
}

.hn-logout:hover {
    background: var(--hn-danger-bg);
}

/* ══════════════════════════════════════════════════════════════════════
   Sidebar
   ══════════════════════════════════════════════════════════════════════ */

/* Mobile-first: the sidebar IS the drawer, off-canvas until opened. */
.fi-body .fi-sidebar.hn-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--hn-drawer-w);
    max-inline-size: 86vw;
    block-size: 100dvh;
    z-index: 80;
    background: var(--hn-surface);
    border-inline-end: 1px solid var(--hn-border);
    box-shadow: var(--hn-shadow-drawer);
    display: flex;
    flex-direction: column;
    translate: 0;
    transform: translateX(calc(var(--hn-drawer-flip) * 100%));
    transition: transform 0.22s ease;
    padding: 0;
}

[dir='ltr'] .fi-body .fi-sidebar.hn-sidebar,
.fi-body .fi-sidebar.hn-sidebar {
    --hn-drawer-flip: -1;
}

[dir='rtl'] .fi-body .fi-sidebar.hn-sidebar {
    --hn-drawer-flip: 1;
}

.fi-body .fi-sidebar.hn-sidebar.hn-drawer-open {
    transform: translateX(0);
}

.hn-scrim {
    position: fixed;
    inset: 0;
    background: var(--hn-scrim);
    z-index: 70;
}

/* Drawer header (mobile only). */
.hn-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--hn-border);
    flex-shrink: 0;
}

.hn-drawer-close {
    margin-inline-start: auto;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--hn-muted);
    cursor: pointer;
    background: none;
    border: 0;
}

.hn-drawer-close:active {
    background: var(--hn-border-faint);
}

.hn-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Rows — a section, a page, or a nested page. */
.hn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    block-size: auto;
    padding: 11px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--hn-text-strong);
    background: transparent;
    line-height: 1.5;
    min-block-size: 44px;
    border: 0;
    inline-size: 100%;
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    margin-block-start: 5px;
}

.hn-row:active {
    background: var(--hn-orange-bg);
}

/*
 * Navigation page names are NEVER truncated. A clipped name is a name the
 * user cannot read — «استكمال عمولات الأوردرات القديمة» was rendering as
 * «استكمال عمولات الأوردرات ال...». Long names wrap onto a second line
 * instead, inside the same 196px column: no ellipsis, no clipping, and no
 * wider sidebar.
 */
.hn-row-label {
    flex: 1;
    min-inline-size: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: normal;
}

.hn-row-child {
    font-size: 13px;
    font-weight: 400;
    color: var(--hn-text-3);
    padding: 8px 12px;
    margin-block-start: 0;
}

.hn-row-grandchild {
    padding-inline-start: 26px;
    font-size: 12.5px;
}

.hn-row.hn-on {
    /* PO ruling 2026-09-11: «orange = active» stays, but the WORDS are the
       readable orange (--hn-orange-text, 4.88:1 on the tint — the bright
       brand orange was 2.5:1) and the bright orange moves to what is not a
       word: the rail bar every active row now carries, top-level and child
       alike. Same meaning, readable label. */
    color: var(--hn-orange-text);
    font-weight: 600;
    background: var(--hn-orange-bg);
    box-shadow: inset 3px 0 0 0 var(--hn-orange);
}

[dir='rtl'] .hn-row.hn-on {
    box-shadow: inset -3px 0 0 0 var(--hn-orange);
}

.hn-row-child.hn-on {
    box-shadow: inset 2px 0 0 0 var(--hn-orange);
}

[dir='rtl'] .hn-row-child.hn-on {
    box-shadow: inset -2px 0 0 0 var(--hn-orange);
}

.hn-badge {
    background: var(--hn-border-faint);
    color: var(--hn-muted);
    font-size: var(--ho-text-xs);
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.hn-chev {
    flex-shrink: 0;
    transition: transform 0.18s;
    color: var(--hn-faint-2);
}

/* Desktop ≥1024px — the design's 196px sticky sidebar, no icons, accordion. */
@media (min-width: 1024px) {
    .fi-body .fi-sidebar.hn-sidebar {
        position: sticky;
        inset-block-start: var(--hn-topbar-h);
        block-size: calc(100dvh - var(--hn-topbar-h));
        inline-size: var(--sidebar-width);
        max-inline-size: none;
        z-index: 20;
        box-shadow: none;
        transform: none;
        /*
         * `translate: 0` above only cancels Filament's off-canvas translate
         * for the drawer. It is still a value other than `none`, so it made
         * the sidebar the containing block of its `position: fixed` rail
         * flyout: a `top` measured against the viewport was applied from the
         * sidebar's own top, and every panel opened one topbar-height below
         * its icon — out of the pointer's reach. The desktop column never
         * moves, so it takes no translate at all.
         */
        translate: none;
        transition: width 0.22s ease;
    }

    .fi-body .fi-sidebar.hn-sidebar.hn-rail {
        inline-size: var(--hn-rail-w);
    }

    .hn-drawer-head,
    .hn-scrim {
        display: none;
    }

    .hn-nav {
        padding: 10px 8px 12px;
        gap: 1px;
    }

    .hn-row {
        gap: 8px;
        padding: 8px 10px;
        border-radius: 7px;
        font-size: 13.2px;
        line-height: 1.45;
        min-block-size: 0;
        margin-block-start: 7px;
    }

    .hn-row:hover {
        background: var(--hn-border-faint);
    }

    .hn-row-child {
        font-size: 12.8px;
        padding: 7px 10px;
        margin-block-start: 0;
    }

    .hn-row-grandchild {
        padding-inline-start: 24px;
        font-size: 12.4px;
    }

    .hn-row.hn-on {
        background: var(--hn-orange-bg);
    }

    .hn-row-child.hn-on {
        background: var(--hn-orange-soft);
    }

    /* The active page's own section keeps the accent rule too. */
    .hn-row-section.hn-in-active {
        box-shadow: inset 2px 0 0 0 var(--hn-orange);
    }

    [dir='rtl'] .hn-row-section.hn-in-active {
        box-shadow: inset -2px 0 0 0 var(--hn-orange);
    }

    .hn-badge {
        border-radius: 5px;
        padding: 1px 6px;
    }

    /* Rail (collapsed): 36px icon-only rows. */
    .hn-rail .hn-nav {
        gap: 4px;
        padding-inline: 8px;
    }

    .hn-rail .hn-row {
        justify-content: center;
        padding: 0;
        block-size: 36px;
        margin-block-start: 0;
    }

    .hn-rail .hn-row-label,
    .hn-rail .hn-badge,
    .hn-rail .hn-chev,
    .hn-rail .hn-row-child {
        display: none;
    }
}

.hn-rail-icon {
    display: none;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .hn-rail .hn-rail-icon {
        display: block;
    }
}

/* Rail flyout */
.hn-flyout {
    position: fixed;
    inset-inline-start: var(--hn-rail-w);
    /*
     * The panel overlaps the rail so it meets its icon's row with no
     * transparent strip between them: icon and panel are one hover zone.
     * The store places it (`flyPlace`) level with the icon, lifted by this
     * corner radius so the rounded corner never sits between the two.
     */
    margin-inline-start: -10px;
    z-index: 30;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    box-shadow: var(--hn-shadow-fly);
    padding: 10px;
    min-inline-size: 240px;
    max-block-size: 70vh;
    overflow-y: auto;
}

.hn-flyout-title {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hn-text);
    padding: 4px 8px 8px;
}

.hn-flyout a {
    display: block;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--hn-text-2);
    border-radius: 6px;
    text-decoration: none;
}

.hn-flyout a:hover,
.hn-flyout a:focus-visible {
    background: var(--hn-orange-soft);
    color: var(--hn-orange-text);
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile chrome — bottom navigation, search screen, bottom sheets
   ══════════════════════════════════════════════════════════════════════ */

.hn-bottomnav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    background: var(--hn-surface);
    border-block-start: 1px solid var(--hn-border);
    display: flex;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 14px));
    z-index: 60;
}

.hn-bottomnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    cursor: pointer;
    color: var(--hn-muted);
    border-radius: 10px;
    min-block-size: 48px;
    background: none;
    border: 0;
    font-family: inherit;
    text-decoration: none;
}

.hn-bottomnav-item:active {
    background: var(--hn-orange-bg);
}

.hn-bottomnav-item.hn-on {
    color: var(--hn-orange-text);
}

/* The active tab's icon keeps the bright brand orange — it is not a word,
   and the label beside it already says which tab is on. */
.hn-bottomnav-item.hn-on .hn-bottomnav-icon {
    color: var(--hn-orange);
}

.hn-bottomnav-label {
    font-size: var(--ho-text-xs);
    font-weight: 500;
    /* Five slots share the width; at the floor «Notifications» is 70px of a
       73px slot on a 375px phone. Narrower than that, the word is clipped
       with an ellipsis rather than spilling into its neighbour. */
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hn-bottomnav-icon {
    position: relative;
    display: flex;
}

.hn-bottomnav-icon .hn-count {
    inset-block-start: -6px;
    inset-inline-start: -10px;
    font-size: var(--ho-text-xs);
    padding: 2.5px 5px;
}

@media (min-width: 1024px) {
    .hn-bottomnav {
        display: none;
    }
}

/* Content must clear the bottom bar. */
@media (max-width: 1023.98px) {
    .fi-body.fi-body-has-navigation .fi-main {
        padding-block-end: 96px;
    }
}

.hn-fullscreen {
    position: fixed;
    inset: 0;
    background: var(--hn-surface);
    z-index: 90;
    display: flex;
    flex-direction: column;
}

.hn-fullscreen-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-block-end: 1px solid var(--hn-border);
    flex-shrink: 0;
}

.hn-msearch {
    flex: 1;
    block-size: 40px;
    border: 1px solid var(--hn-orange-border);
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    background: var(--hn-orange-soft);
}

.hn-msearch input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--hn-text-strong);
    min-inline-size: 0;
}

.hn-cancel {
    font-size: 13.5px;
    color: var(--hn-orange-text);
    cursor: pointer;
    font-weight: 500;
    background: none;
    border: 0;
    font-family: inherit;
}

.hn-fullscreen-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
}

.hn-section-label {
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--hn-faint-2);
    letter-spacing: 0.4px;
    padding: 10px 10px 4px;
}

.hn-mresult {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 9px;
    cursor: pointer;
    min-block-size: 44px;
    text-decoration: none;
}

.hn-mresult:active {
    background: var(--hn-orange-bg);
}

.hn-mresult-label {
    flex: 1;
    min-inline-size: 0;
    font-size: 13.5px;
    color: var(--hn-text-strong);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Bottom sheets */
.hn-sheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    background: var(--hn-surface);
    z-index: 80;
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    box-shadow: var(--hn-shadow-sheet);
    display: flex;
    flex-direction: column;
    max-block-size: 85dvh;
}

.hn-sheet-notif {
    max-block-size: 75%;
}

.hn-sheet-acct {
    padding: 0 14px calc(26px + env(safe-area-inset-bottom, 0px));
}

.hn-grip {
    padding: 10px 0 4px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: 0;
    inline-size: 100%;
    /* The handle zone owns the vertical drag; the browser must not turn it
       into a page scroll before the swipe-to-close can see it. */
    touch-action: none;
}

.hn-grip span {
    inline-size: 40px;
    block-size: 4.5px;
    border-radius: 999px;
    background: var(--hn-pin);
}

.hn-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 13px;
    border-block-end: 1px solid var(--hn-border);
    flex-shrink: 0;
    touch-action: none;
}

/*
 * Close button for the notifications sheet. It lives in the header row,
 * beside the title, at the row's inline END — top-left in RTL, top-right in
 * LTR — with a 44×44 hit target. The negative margins keep the header's
 * visual height unchanged; only the tappable area grows.
 */
.hn-sheet-close {
    margin-inline-start: auto;
    margin-inline-end: -8px;
    margin-block: -10px;
    inline-size: 44px;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--hn-muted);
    font-size: 24px;
    line-height: 1;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
}

.hn-sheet-close:active,
.hn-sheet-close:hover {
    background: var(--hn-border-faint);
    color: var(--hn-text-3);
}

.hn-sheet-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding-block-end: 14px;
}

.hn-sheet-acct-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 2px 14px;
    border-block-end: 1px solid var(--hn-border);
}

.hn-sheet-acct-head .hn-acct-avatar {
    inline-size: 40px;
    block-size: 40px;
    font-size: 16px;
}

.hn-sheet .hn-seg {
    padding: 14px 0 0;
    gap: 8px;
}

.hn-sheet .hn-seg-btn {
    block-size: 44px;
    border-radius: 11px;
}

.hn-sheet .hn-seg-lang {
    padding: 8px 0 0;
}

.hn-sheet .hn-seg-lang .hn-seg-btn {
    block-size: 42px;
    font-size: 13px;
}

.hn-sheet-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-block-start: 14px;
    padding: 12px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--hn-danger);
    border: 1px solid var(--hn-danger-border);
    min-block-size: 44px;
    background: none;
    inline-size: 100%;
    font-family: inherit;
}

.hn-sheet-logout:active {
    background: var(--hn-danger-bg);
}

/* Mobile header extras */
.hn-back {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hn-text-3);
    background: none;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

/*
 * The mobile header's path hint. It names a page too, so it wraps rather
 * than clipping; the header's min-height lets it grow.
 */
.hn-mpath {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--hn-faint);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: end;
    max-inline-size: 55%;
    min-inline-size: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   General Settings page — masonry cards
   ══════════════════════════════════════════════════════════════════════ */

.hn-settings-search {
    inline-size: 340px;
    max-inline-size: 100%;
    block-size: 34px;
    border: 1px solid var(--hn-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 11px;
    background: var(--hn-surface);
    margin-block-end: 20px;
}

.hn-settings-search input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--hn-text-strong);
    min-inline-size: 0;
}

.hn-settings-sub {
    font-size: 13px;
    color: var(--hn-muted);
    margin-block-end: 16px;
}

.hn-cards {
    columns: 300px;
    column-gap: 8px;
    column-fill: balance;
}

.hn-card {
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    padding: 16px 18px 12px;
    break-inside: avoid;
    margin-block-end: 8px;
}

.hn-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-card-desc {
    font-size: 12px;
    color: var(--hn-faint);
    margin-block-start: 2px;
}

.hn-card-rule {
    block-size: 1px;
    background: var(--hn-border-soft);
    margin: 11px 0 6px;
    border: 0;
}

.hn-card-page {
    display: block;
    padding: 6px;
    font-size: 12.5px;
    color: var(--hn-text-2);
    border-radius: 6px;
    text-decoration: none;
}

.hn-card-page:hover {
    background: var(--hn-orange-soft);
    color: var(--hn-orange-text);
}

.hn-card-page.hn-on {
    color: var(--hn-orange-text);
    font-weight: 600;
    background: var(--hn-orange-soft);
}

/* Mobile: one column, cards collapsed by default. */
@media (max-width: 767.98px) {
    .hn-cards {
        columns: 1;
    }

    .hn-card {
        padding: 0;
        border-radius: 13px;
        overflow: hidden;
        margin-block-end: 10px;
    }

    .hn-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        cursor: pointer;
        min-block-size: 48px;
        inline-size: 100%;
        background: none;
        border: 0;
        font-family: inherit;
        text-align: start;
    }

    .hn-card-head:active {
        background: var(--hn-orange-bg);
    }

    .hn-card-count {
        background: var(--hn-border-faint);
        color: var(--hn-muted);
        font-size: var(--ho-text-xs);
        font-weight: 600;
        padding: 2px 9px;
        border-radius: 999px;
        flex-shrink: 0;
        font-family: Helvetica, Arial, sans-serif;
    }

    .hn-card-rule {
        display: none;
    }

    .hn-card-body {
        border-block-start: 1px solid var(--hn-border);
        padding: 2px 16px 6px;
    }

    .hn-card-page {
        display: flex;
        align-items: center;
        padding: 12px 2px;
        font-size: 13.5px;
        border-block-end: 1px solid var(--hn-border-faint);
        border-radius: 0;
        min-block-size: 44px;
    }
}

@media (min-width: 768px) {
    .hn-card-count,
    .hn-card-chev {
        display: none;
    }

    .hn-card-head {
        display: block;
        inline-size: 100%;
        background: none;
        border: 0;
        padding: 0;
        font-family: inherit;
        text-align: start;
        cursor: default;
    }
}

/* No horizontal overflow anywhere, in either direction. */
.fi-body {
    overflow-x: hidden;
}


/* ── Bits appended after the first pass ─────────────────────────────── */

/*
 * Livewire wraps the <aside> in its own root node, and that node is the
 * flex item inside `.fi-layout` — so it, not the aside, must hold the
 * column's width on desktop.
 */
.hn-sidebar-root {
    flex-shrink: 0;
    display: contents;
}

@media (min-width: 1024px) {
    .hn-sidebar-root {
        display: block;
        flex-shrink: 0;
    }
}

/*
 * Chevron direction is a reading-order question, so it is resolved by
 * `dir`, not by a duplicated RTL ruleset: closed points along the text
 * direction, open points down.
 */
.hn-chev {
    transform: rotate(0deg);
}

[dir='rtl'] .hn-chev {
    transform: rotate(180deg);
}

.hn-chev.hn-open,
[dir='rtl'] .hn-chev.hn-open {
    transform: rotate(90deg);
}

.hn-card-chev {
    transition: transform 0.18s;
    color: var(--hn-faint-2);
    flex-shrink: 0;
}

.hn-card-chev.hn-open {
    transform: rotate(180deg);
}

/* The mobile drawer's own chevrons sit at 13px, the desktop ones at 12px. */
.hn-chev svg,
.hn-card-chev svg {
    display: block;
}

/* Skeleton shimmer used while a page boots (design §8). */
@keyframes hn-shimmer {
    0% { opacity: 0.45; }
    50% { opacity: 0.9; }
    100% { opacity: 0.45; }
}

.hn-skeleton-row {
    block-size: 14px;
    border-radius: 6px;
    background: #eef0f3;
    animation: hn-shimmer 1.2s infinite;
    margin-block-end: 12px;
}

/* Filament's own sidebar overlay is unused — ours is `.hn-scrim`. */
.fi-sidebar-close-overlay {
    display: none !important;
}

/* Page background matches the design's #f4f5f7 surface. */
.fi-body .fi-main-ctn {
    background: var(--hn-page);
}

/* ── Responsive visibility ───────────────────────────────────────────── */

@media (max-width: 1023.98px) {
    .hn-desktop-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hn-mobile-only,
    .hn-back {
        display: none !important;
    }
}

/* The back chevron follows the reading direction. */
[dir='rtl'] .hn-back svg {
    transform: scaleX(-1);
}

/* Cards are always open on desktop; the closed state is phone-only. */
@media (max-width: 767.98px) {
    .hn-card-body-closed {
        display: none;
    }
}

/* ── Pinned shortcuts ────────────────────────────────────────────────── */

.hn-pinned-hdr {
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--hn-faint-2);
    letter-spacing: 0.4px;
    padding: 2px 10px 4px;
}

.hn-pinned-rule {
    block-size: 1px;
    background: var(--hn-border-soft);
    margin: 6px 8px;
}

.hn-row-pinned {
    font-size: 12px;
    padding: 5px 10px;
}

.hn-pin {
    font-size: 12px;
    line-height: 1;
    color: var(--hn-pin);
    flex-shrink: 0;
    cursor: pointer;
    align-self: center;
}

.hn-pin-on {
    color: var(--hn-pin-on);
}

@media (max-width: 1023.98px) {
    /* Pinning is a pointer affordance; the drawer keeps its 44px rows clean. */
    .hn-row-section ~ div .hn-pin {
        display: none;
    }
}

.hn-rail .hn-pinned,
.hn-rail .hn-pin {
    display: none;
}

/* Settings card rows: a directional arrow on phones only. */
.hn-card-page-label {
    flex: 1;
    min-inline-size: 0;
}

.hn-card-page-arrow {
    display: none;
    flex-shrink: 0;
    color: var(--hn-faint-3);
}

[dir='rtl'] .hn-card-page-arrow {
    transform: scaleX(-1);
}

@media (max-width: 767.98px) {
    .hn-card-page-arrow {
        display: block;
    }
}


/* ── Third level: the nested group inside a section ──────────────────── */

/*
 * The chevron that opens a parent's own pages. It sits INSIDE the row's
 * anchor as a separate hit target, so the row still navigates to the
 * parent page while this only folds the group open and shut.
 */
.hn-chev-group {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    margin-inline-end: -4px;
    border-radius: 6px;
    cursor: pointer;
    align-self: center;
}

.hn-chev-group:hover {
    background: var(--hn-border-faint);
    color: var(--hn-text-3);
}

@media (max-width: 1023.98px) {
    /* Touch target on phones stays at the 44px contract. */
    .hn-chev-group {
        inline-size: 44px;
        block-size: 44px;
        margin-inline-end: -10px;
    }
}

.hn-rail .hn-chev-group {
    display: none;
}

/* Nothing in the sidebar clips a page name. */
.hn-row,
.hn-flyout a,
.hn-card-page {
    overflow-wrap: anywhere;
}


/* ── Notifications: tap-to-read + mobile header actions ─────────────── */

/* An unread row is tappable; a read one is inert, so no false affordance. */
.hn-notif-unread {
    cursor: pointer;
}

/*
 * Mark-all / Clear inside the mobile sheet header. Pushed to the inline end
 * so they sit between the count pill and the × — same links, same look as
 * the desktop dropdown, wrapping onto a second line only if a locale's
 * strings are long.
 */
.hn-sheet-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-inline-size: 0;
}

.hn-sheet-actions .hn-link {
    min-block-size: 32px;
    display: inline-flex;
    align-items: center;
    padding-inline: 2px;
}

/* With the actions owning the auto-margin, the × just trails them. */
.hn-sheet-head .hn-sheet-close {
    margin-inline-start: 4px;
}