/* ===========================================================================
   app-shell.css — the frame every signed-in page sits in.
   ---------------------------------------------------------------------------
   Replaces the nav markup that was copy-pasted into 8 client pages and 12
   admin pages, each with its own slightly different styling.

   Structure (rendered once by src/View/layout.php):

     <a class="skip-link">…</a>
     <header class="app-header">  brand · primary nav · account menu
     <main class="app-main">
       <div class="page">
         <div class="page__head"> title · actions
         …content…
     <nav class="bottom-nav">     phones only
     <div class="toast-region">

   Desktop = horizontal header. Phone = header (brand + account only) plus a
   bottom tab bar, because the primary destinations must be thumb-reachable.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.app-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-height);
    padding-inline: var(--space-5);
    background: var(--canvas-alt);
    border-block-end: 1px solid var(--border);
    /* Opaque, not translucent: a blurred header over a ticking price table
       is visually noisy and costs a repaint on every tick. */
}

.app-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    flex-shrink: 0;
}

.app-header__brand:hover {
    color: var(--text);
}

.app-header__mark {
    display: grid;
    place-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-black);
    /* The mark is a Latin monogram and never mirrors. */
    direction: ltr;
}

/* The platform logo uploaded in Admin -> Settings, in place of the mark. Same
   height as the mark; a wide logo keeps its shape up to 140px. */
.app-header__logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.auth__brand .app-header__logo {
    height: 40px;
    max-width: 200px;
}

/* Environment ribbon. Shown when the app is not running against production
   config, so a staging screenshot can never be mistaken for the live desk. */
.app-header__env {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Primary navigation (desktop)
   --------------------------------------------------------------------------- */
.app-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    /* Scrolls rather than wraps if an admin has many sections. */
    overflow-x: auto;
    scrollbar-width: none;
}

.app-nav::-webkit-scrollbar {
    display: none;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    white-space: nowrap;
    transition:
        color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.app-nav__link:hover {
    color: var(--text);
    background: var(--surface-hover);
}

/* The current page. aria-current="page" is the source of truth — the styling
   hangs off the attribute so it can never drift from what screen readers
   announce. */
.app-nav__link[aria-current="page"] {
    color: var(--accent-text);
    background: var(--accent-dim);
    font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------------------
   Header end cluster — theme, language, account
   --------------------------------------------------------------------------- */
.app-header__end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Account menu. Uses <details> so it opens without JS and closes on Esc via
   the browser; core/dom.js only adds click-outside dismissal.
   --------------------------------------------------------------------------- */
.menu {
    position: relative;
}

.menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-raised);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;   /* hides the default <summary> triangle */
    min-height: 36px;
}

.menu__trigger::-webkit-details-marker {
    display: none;
}

.menu__trigger:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.menu__avatar {
    display: grid;
    place-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    flex-shrink: 0;
}

.menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    /* Anchored to the inline end so it opens leftwards in LTR and rightwards
       in RTL, always staying on screen. */
    inset-inline-end: 0;
    z-index: var(--z-dropdown);
    min-width: 220px;
    padding: var(--space-2);
    background: var(--surface-overlay);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-px);
}

.menu__header {
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--border-subtle);
    margin-block-end: var(--space-1);
}

.menu__email {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow-wrap: anywhere;
    /* An email address is a Latin identifier. */
    direction: ltr;
    unicode-bidi: isolate;
}

.menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: start;
    width: 100%;
    cursor: pointer;
}

.menu__item:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.menu__item--danger {
    color: var(--danger);
}

.menu__item--danger:hover {
    background: var(--danger-dim);
    color: var(--danger);
}

.menu__sep {
    height: 1px;
    background: var(--border-subtle);
    margin-block: var(--space-1);
    border: 0;
}

/* ---------------------------------------------------------------------------
   MAIN / PAGE
   --------------------------------------------------------------------------- */
.app-main {
    /* Reserves room for the phone tab bar so the last row of a table is never
       hidden behind it. env() covers the iOS home indicator. */
    padding-block-end: var(--space-10);
}

.page {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Narrow variants for auth cards and legal prose. */
.page--narrow { max-width: var(--container-sm); }
.page--prose { max-width: var(--container-md); }
.page--wide { max-width: var(--container-lg); }

/* The trade terminal needs the whole viewport. */
.page--full {
    max-width: var(--container-full);
    padding: var(--space-4);
}

.page__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page__titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.page__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
}

.page__subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 68ch;
}

.page__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Breadcrumb — admin detail pages.
   --------------------------------------------------------------------------- */
.crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    list-style: none;
    flex-wrap: wrap;
}

.crumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: none;
}

/* The separator is a logical chevron: it must point along the reading
   direction, so it mirrors in RTL. */
.crumbs li:not(:last-child)::after {
    content: "›";
    color: var(--text-faint);
}

[dir="rtl"] .crumbs li:not(:last-child)::after {
    content: "‹";
}

/* ---------------------------------------------------------------------------
   Tabs — in-page sections (Open / Closed positions, Deposits / Withdrawals).
   --------------------------------------------------------------------------- */
.tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-block-end: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    /* The active indicator is a bottom border that is always present but
       transparent, so switching tabs does not shift the row by 2px. */
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.tab:hover {
    color: var(--text);
}

.tab[aria-selected="true"] {
    color: var(--accent-text);
    border-block-end-color: var(--accent);
    font-weight: var(--weight-semibold);
}

.tab__count {
    margin-inline-start: var(--space-2);
    padding-inline: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.tab[aria-selected="true"] .tab__count {
    background: var(--accent-dim);
    color: var(--accent-text);
}

/* ---------------------------------------------------------------------------
   BOTTOM NAV — phones only.
   ---------------------------------------------------------------------------
   The five destinations a trader needs in one thumb reach. Anything else
   lives behind the account menu.
   --------------------------------------------------------------------------- */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .bottom-nav {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: var(--z-nav);
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: var(--canvas-alt);
        border-block-start: 1px solid var(--border);
        /* Respects the iOS home indicator. */
        padding-block-end: env(safe-area-inset-bottom, 0);
    }

    .bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--bottom-nav-height);
        padding-block: var(--space-2);
        font-size: var(--text-2xs);
        font-weight: var(--weight-medium);
        color: var(--text-muted);
        text-align: center;
    }

    .bottom-nav__link[aria-current="page"] {
        color: var(--accent-text);
    }

    /* The active tab gets a top bar as a second, non-colour cue. */
    .bottom-nav__link[aria-current="page"]::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        width: 28px;
        height: 2px;
        border-radius: var(--radius-pill);
        background: var(--accent);
    }

    .bottom-nav__link {
        position: relative;
    }

    /* "More" on the admin bar: a tab that opens a sheet of the remaining
       sections above the bar. */
    .bottom-nav__more {
        display: contents;
    }

    .bottom-nav__more > summary {
        list-style: none;
        cursor: pointer;
    }

    .bottom-nav__more > summary::-webkit-details-marker {
        display: none;
    }

    .bottom-nav__more > summary[data-current="true"],
    .bottom-nav__more[open] > summary {
        color: var(--accent-text);
    }

    .bottom-nav__sheet {
        position: fixed;
        inset-inline: var(--space-3);
        inset-block-end: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-2));
        z-index: var(--z-dropdown);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-1);
        padding: var(--space-2);
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .bottom-nav__sheet a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-inline: var(--space-3);
        border-radius: var(--radius-md);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
    }

    .bottom-nav__sheet a:hover,
    .bottom-nav__sheet a:focus-visible {
        background: var(--surface-hover);
    }

    .bottom-nav__sheet a[aria-current="page"] {
        background: var(--accent-dim);
        color: var(--accent-text);
    }

    .bottom-nav__icon {
        font-size: var(--text-md);
        line-height: 1;
    }

    /* Header sheds its nav; the tab bar owns navigation on phones. */
    .app-nav {
        display: none;
    }

    .app-header {
        padding-inline: var(--space-4);
        gap: var(--space-3);
    }

    .app-main {
        padding-block-end: calc(var(--bottom-nav-height) + var(--space-6));
    }

    .page {
        padding: var(--space-4) var(--space-4);
        gap: var(--space-5);
    }

    .page__title {
        font-size: var(--text-xl);
    }

    /* Page actions move below the title instead of squeezing beside it. */
    .page__actions {
        margin-inline-start: 0;
        width: 100%;
    }
}

/* Tablet: keep the header nav but tighten it. */
@media (min-width: 769px) and (max-width: 1024px) {
    .app-header {
        padding-inline: var(--space-4);
    }

    .app-nav__link {
        padding-inline: var(--space-2);
        font-size: var(--text-xs);
    }

    .page {
        padding-inline: var(--space-4);
    }
}

/* Very large screens: cap the reading width but let tables use the room. */
@media (min-width: 1800px) {
    .page--full {
        padding-inline: var(--space-8);
    }
}

/* ---------------------------------------------------------------------------
   AUTH LAYOUT — login, register, password reset, email verification.
   Centred card, no app chrome (the user is not signed in yet).
   --------------------------------------------------------------------------- */
.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--space-4);
    /* A single subtle wash so the card has somewhere to sit without competing
       with it. */
    background:
        radial-gradient(90% 60% at 50% 0%, var(--accent-dim), transparent 70%),
        var(--canvas);
}

.auth__inner {
    width: 100%;
    max-width: var(--container-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.auth__card {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.auth__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
}

.auth__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.auth__text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-inline: auto;
    max-width: 44ch;
}

.auth__footer {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Legal links under the auth card. */
.auth__legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-faint);
}

@media (max-width: 480px) {
    .auth__card {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-lg);
    }
}

/* ---------------------------------------------------------------------------
   PROSE — legal pages. Readable measure, clear hierarchy, printable.
   --------------------------------------------------------------------------- */
.prose {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.prose h2 {
    margin-block-start: var(--space-6);
    font-size: var(--text-lg);
    color: var(--text);
}

.prose h3 {
    margin-block-start: var(--space-4);
    font-size: var(--text-md);
    color: var(--text);
}

.prose ul,
.prose ol {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline-start: var(--space-6);
}

.prose li::marker {
    color: var(--text-faint);
}

.prose__updated {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    /* A date, not a hint: muted rather than faint, which also clears AA on the
       prose surface where faint reached only 4.28:1. */
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   FLUSH MAIN — a full-bleed screen inside the app shell.

   Used by the trading terminal, where the chart has to reach the viewport
   edges. It keeps the header and the bottom navigation, and drops only the
   padding and the centred column that .page adds.
   --------------------------------------------------------------------------- */
.app-main--flush {
    padding: 0;
    max-inline-size: none;
    /* Fills what is left under the header so a chart can size itself against
       a real height instead of collapsing to its content. */
    min-block-size: calc(100dvh - var(--header-height, 56px));
    display: flex;
    flex-direction: column;
}

@media (max-width: 720px) {
    /* The bottom nav overlays the viewport on a phone; without this the last
       row of the terminal sits underneath it. */
    .app-main--flush {
        padding-block-end: var(--bottom-nav-height, 56px);
    }
}

/* Environment line (local / staging, mail in log mode). Compact on purpose:
   it is on every page, so it informs without taking the first screen. */
.env-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--warning-dim);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.env-strip__icon {
    color: var(--warning);
}

.env-strip__sep {
    color: var(--text-faint);
}

/* Touch targets under 40px on a phone, found in the review: the legal links
   under the sign-in card (21px), the header logo (28px) and the account
   names in the admin user list (23px). Padding grows the hit area without
   moving the text. */
@media (max-width: 768px) {
    .auth__legal a,
    .auth__brand,
    .app-header__brand,
    .record-card__title {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .auth__legal a {
        padding-inline: var(--space-2);
    }

    .app-header__brand {
        min-width: 40px;
    }
}