@charset "utf-8";

/* Lead with the rules (not a block comment): some external-stylesheet parsers
   drop the first style rule when a file opens with a comment. The overlay base
   rule is load-bearing, so it goes first; see the note block further down for
   what this file does. */
.nl-overlay{
    position:fixed;
    z-index:var(--z-overlay,9000);
    background:var(--surface-1,var(--bg,#f8fafc));
    overflow:hidden;
    display:none;   /* hidden until shown — no opacity:0 resting state */
}
.nl-overlay.nl-show{
    display:flex;   /* appears instantly at full opacity — the reveal never
                       depends on an opacity transition/animation (which can get
                       stuck fully transparent on some compositors). */
}

/* ===========================================================================
   Navigation loading indicator
   ---------------------------------------------------------------------------
   Full-page navigations to server-rendered pages (Cases list, case full view,
   Contacts, mobile lists) leave the browser sitting on the OLD page until the
   server responds — with no feedback today. nav_loading.js draws .nl-overlay
   over .app-main during that wait so the content area reads as "loading in
   place" while the sidebar + topbar stay put.

   Desktop tiers, chosen by nav_loading.js:
     .nl-ring  — a spinner ring for medium (~2-3s) waits
     .nl-skel  — a content skeleton for long waits / known-heavy destinations

   Phone / native app (nav_loading.js decides; see its header):
     .nl-shell   — the destination's screen painted at 0ms: its own header
                   (.nl-shell-hdr: back = cancel, menu, title) over a
                   destination-shaped skeleton (.nl-mskel list / tiles, or
                   the .nl-skel form)
     .nl-bar     — 0ms progress bar on the shell header's bottom edge (on the
                   page's own header when there is no shell)
     .nl-tapped  — the tapped sidebar item / row / chip while its page loads
     .nl-busy    — a submit or AJAX button while its round-trip runs

   Reuses design_tokens.css; theme-aware via the --surface-*/--text-* tokens.
   Every token carries a literal fallback because the standalone phone pages
   (cases/mobile_cases, contacts/mobile_contacts, files/mobile_view) load this
   file without design_tokens.css. The global prefers-reduced-motion guard in
   base_style.css neutralises the animations on base.html pages; the block at
   the bottom does the same for the standalone pages.
=========================================================================== */

/* ── Ring tier ──────────────────────────────────────────────────────────── */
.nl-center{
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}
.nl-ring{
    width:38px;
    height:38px;
    border-radius:50%;
    /* Longhands, not the `border` shorthand: a var() inside a shorthand trips
       some CSS parsers, whereas var() in a longhand is universally safe. */
    border-width:3px;
    border-style:solid;
    border-color:var(--surface-3,var(--border,#e2e8f0));
    border-top-color:var(--brand-500,var(--brand,#3b82f6));
    animation:nl-spin .8s linear infinite;
}
@keyframes nl-spin{ to{ transform:rotate(360deg); } }

.nl-label{
    font-family:var(--font-sans,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
    font-size:var(--fs-sm,13px);
    font-weight:var(--fw-medium,500);
    color:var(--text-tertiary,var(--t2,#64748b));
    letter-spacing:.2px;
}

/* ── Skeleton tier ──────────────────────────────────────────────────────── */
.nl-skel{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:30px 34px;
    box-sizing:border-box;
    align-self:flex-start;
}
.nl-shimmer{
    position:relative;
    overflow:hidden;
    display:block;
    /* --nl-shim: a page whose --surface-2 equals the overlay's own
       background (the phone Cases list's token shim) names a visible tone. */
    background:var(--nl-shim,var(--surface-2,var(--border,#e9edf3)));
    border-radius:var(--r-md,6px);
}
.nl-shimmer::after{
    content:'';
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(148,163,184,.18), transparent);
    animation:nl-shimmer 1.25s ease-in-out infinite;
}
[data-theme="dark"] .nl-shimmer::after{
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
@keyframes nl-shimmer{ 100%{ transform:translateX(100%); } }

.nl-skel-title{ height:26px; width:38%; margin-bottom:16px; }
.nl-skel-chips{ display:flex; gap:10px; margin-bottom:28px; }
.nl-skel-chips .nl-shimmer{ height:22px; width:88px; border-radius:var(--r-full,9999px); }
.nl-skel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 44px; }
.nl-skel-field{ display:flex; flex-direction:column; gap:9px; }
.nl-skel-field .nl-lbl{ height:11px; width:34%; }
.nl-skel-field .nl-val{ height:16px; width:78%; }

@media (max-width:768px){
    .nl-skel{ padding:20px; }
    .nl-skel-title{ width:60%; }
    .nl-skel-grid{ grid-template-columns:1fr; }
}

/* ── Phone: progress bar ────────────────────────────────────────────────── */
/* Sits on the shell header's bottom edge (on the page's own header when there
   is no shell; with neither, under the status bar). One above the shell. */
.nl-bar{
    position:fixed;
    left:0;
    top:env(safe-area-inset-top,0px);
    height:3px;
    width:0;
    opacity:0;
    background:var(--brand-500,var(--brand,#3b82f6));
    border-radius:0 2px 2px 0;
    z-index:10601;
    pointer-events:none;
    transition:width .2s ease, opacity .3s ease;
}
.nl-bar::after{
    content:'';
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:64px;
    box-shadow:0 0 10px var(--brand-500,var(--brand,#3b82f6));
}

/* ── Phone: the tapped element ──────────────────────────────────────────── */
/* Sidebar item: lit like the active item, icon swapped for a ring. */
.sidebar-item.nl-tapped{
    background:rgba(59,130,246,.28) !important;
    color:#fff !important;
}
.sidebar-item.nl-tapped .sidebar-item-icon{ position:relative; }
.sidebar-item.nl-tapped .sidebar-item-icon > i,
.sidebar-item.nl-tapped .sidebar-item-icon > img{ opacity:0; }
.sidebar-item.nl-tapped .sidebar-item-icon::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    margin:-8px 0 0 -8px;
    border-radius:50%;
    border-width:2px;
    border-style:solid;
    border-color:rgba(255,255,255,.25);
    border-top-color:#fff;
    animation:nl-spin .7s linear infinite;
}
/* Rows, chips, filter pills, header links: a quiet "taken" tint. */
a.nl-tapped:not(.sidebar-item),
[data-href].nl-tapped:not(.sidebar-item),
[data-url].nl-tapped:not(.sidebar-item){
    opacity:.72;
    cursor:progress;
}
/* A bottom-bar tab is lit instead (nav_loading.js moves .is-on to it). */
.hx-tabbar .hx-tab.nl-tapped{ opacity:1; cursor:default; }
/* While the shell is up the tabs stay live, but (+) and the sections
   picker would open their sheet underneath it. A lit one (a section was
   just picked) keeps full strength. */
html.nl-shell-on .hx-tab[data-hx-sheet]{ pointer-events:none; }
html.nl-shell-on .hx-tab[data-hx-sheet]:not(.is-on){ opacity:.45; }

/* ── Phone: busy buttons ────────────────────────────────────────────────── */
/* Keeps the button's size; label goes transparent, a ring takes the centre.
   Two-tone ring stays visible on primary (white top) and light (dark arc)
   buttons alike. */
.nl-busy{
    position:relative !important;
    color:transparent !important;
    pointer-events:none;
    cursor:progress;
}
.nl-busy > *{ visibility:hidden; }
.nl-busy::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:16px;
    height:16px;
    margin:-9px 0 0 -9px;
    border-radius:50%;
    border-width:2px;
    border-style:solid;
    border-color:rgba(0,0,0,.2);
    border-top-color:#fff;
    animation:nl-spin .7s linear infinite;
    visibility:visible;
}
/* <input type=submit> draws no ::after — dim it, keep its label. */
.nl-busy-input{
    opacity:.6;
    cursor:progress;
    pointer-events:none;
}

/* ── Phone: the destination shell ───────────────────────────────────────── */
/* Full screen (down to the bottom tab bar, which stays in view) and on top
   of everything the page has: the drawer, Mail's columns (380-430), the
   bottom bar's sheets (9050), the account menu (9100), case dialogs (up to
   10000) — the tap has left this page. Only the hx_feedback toasts (11000+)
   stay above. The drawer and sheets close underneath, unseen; the bar
   (10601) rides the shell header's bottom edge. Desktop keeps
   var(--z-overlay). */
.nl-overlay.nl-mobile{
    z-index:var(--z-overlay,9000);
    background:var(--surface-1,var(--bg,#f8fafc));
    align-items:flex-start;
}
.nl-overlay.nl-shell{
    z-index:10600;
    flex-direction:column;
    align-items:stretch;
}
.nl-shell-hdr{
    flex:none;
    height:56px;
    padding-top:env(safe-area-inset-top,0px);
    box-sizing:content-box;
    display:flex;
    align-items:center;
    gap:8px;
    padding-inline:12px;
    background:var(--surface-0,var(--surface,#fff));
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:var(--border-subtle,var(--border,#e2e8f0));
}
.nl-shell-btn{
    width:36px;
    height:36px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--text-secondary,var(--t2,var(--text,#334155)));
    font-size:15px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.nl-shell-btn:active{ background:var(--surface-2,var(--border,#eef1f6)); }
.nl-shell-title{
    flex:1;
    min-width:0;
    font-family:var(--font-sans,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
    font-size:17px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--text-primary,var(--t1,var(--text,#0f172a)));
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.nl-shell-body{
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
}
.nl-shell-body .nl-skel{ padding:16px 12px; }
.nl-mskel{
    width:100%;
    padding:12px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.nl-mskel-chips{ display:flex; gap:8px; margin-bottom:2px; }
.nl-mskel-chips .nl-shimmer{ height:26px; width:72px; border-radius:var(--r-full,9999px); }
.nl-mskel-row,
.nl-mskel-tile{
    background:var(--surface-0,var(--surface,#fff));
    border-width:1px;
    border-style:solid;
    border-color:var(--border-subtle,var(--border,#e2e8f0));
    border-radius:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.nl-mskel-row{ padding:12px 14px; }
.nl-mskel-row .nl-shimmer:nth-child(1){ height:12px; width:62%; }
.nl-mskel-row .nl-shimmer:nth-child(2){ height:10px; width:40%; }
.nl-mskel-row .nl-shimmer:nth-child(3){ height:10px; width:82%; }
.nl-mskel-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nl-mskel-tile{ padding:12px; min-height:74px; }
.nl-mskel-tile.wide{ grid-column:1 / -1; min-height:96px; }
.nl-mskel-tile .nl-shimmer:nth-child(1){ height:9px; width:45%; }
.nl-mskel-tile .nl-shimmer:nth-child(2){ height:22px; width:35%; }
.nl-mskel-tile .nl-shimmer:nth-child(3){ height:10px; width:60%; }
.nl-mskel-tile.wide .nl-shimmer:nth-child(2){ height:10px; width:90%; }
.nl-mskel-tile.wide .nl-shimmer:nth-child(3){ height:10px; width:70%; }

@media (prefers-reduced-motion:reduce){
    .nl-bar{ transition:none; }
    .nl-ring,
    .nl-shimmer::after,
    .nl-busy::after,
    .sidebar-item.nl-tapped .sidebar-item-icon::after{ animation:none; }
}

/* ── Status line while a case page loads (desktop skeleton + phone shell) ── */
.nl-status{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    margin:0 0 14px;
    border:1px solid var(--border-subtle,var(--border,#e2e8f0));
    border-radius:10px;
    background:var(--surface-0,var(--surface,#fff));
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary,var(--t2,#334155));
}
.nl-shell .nl-status{ margin:10px 12px 0; }
.nl-status-dot{
    width:14px;height:14px;flex:none;border-radius:50%;
    border:2px solid var(--border-default,var(--border,#cbd5e1));
    border-top-color:var(--brand-600,var(--brand,#2563eb));
    animation:nl-spin .8s linear infinite;
}
@keyframes nl-spin{to{transform:rotate(360deg)}}
.nl-status-text{ flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 180ms ease; }
.nl-status-text.nl-swap{ opacity:0; }
.nl-status-sec{ flex:none;font-size:12px;font-weight:500;color:var(--text-muted,var(--t3,#64748b));white-space:nowrap; }
.nl-status-sec i{ margin-right:4px;color:var(--success-text,var(--green,#15803d)); }
@media (max-width:420px){ .nl-status-sec{ display:none; } }
@media (prefers-reduced-motion:reduce){ .nl-status-dot{ animation:none; } .nl-status-text{ transition:none; } }

/* ── Still loading (nav_loading.js longWait) ─────────────────────────────── */
/* After 12 s the screen stays and says so, with Retry / Cancel: in the phone
   shell under its header, over the desktop overlay at the top, or as a
   floating note under the bar when there is no screen (bar-only loads). */
.nl-long{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 8px 8px 14px;
    margin:10px 12px 0;
    border:1px solid var(--border-subtle,var(--border,#e2e8f0));
    border-radius:12px;
    background:var(--surface-0,var(--surface,#fff));
    color:var(--text-secondary,var(--t2,#334155));
    font-family:var(--font-sans,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
    font-size:13px;
    font-weight:600;
    box-shadow:0 6px 20px rgba(15,23,42,.10);
}
.nl-long-t{ flex:1 1 auto; min-width:0; }
.nl-long-btn{
    flex:none;
    min-height:34px;
    padding:0 12px;
    border-width:1px;
    border-style:solid;
    border-color:var(--border-default,var(--border,#cbd5e1));
    border-radius:9px;
    background:var(--surface-1,var(--bg,#f8fafc));
    color:var(--text-primary,var(--t1,#0f172a));
    font:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.nl-long-btn:active{ background:var(--surface-2,var(--border,#eef1f6)); }
.nl-long-over{
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    width:max-content;
    max-width:calc(100% - 32px);
}
.nl-long-float{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    width:max-content;
    max-width:calc(100% - 24px);
    z-index:10602;
}