/* EZ Inventory app theme — brand v3 "Plasma × Dometrain".
   Dometrain's structural language (floating top nav, generous rounding,
   gradient-as-accent, soft surface hierarchy, Poppins/JetBrains Mono)
   mapped onto the Plasma palette. Structural rules live in
   docs/cymansys-style-guide.md — change tokens, not structure.
   Fonts are bundled locally (MAUI runs offline; no third-party requests). */

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-var.woff2") format("woff2-variations");
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("fonts/SpaceGrotesk.ttf") format("truetype-variations");
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --void: #0A0F16;
    --panel: #10161F;
    --panel-2: #151D28;
    --edge: #1D2A38;
    --edge-2: #2C3D4F;
    --slab-3: #3C5268;
    --paper: #EDF2F7;
    --steel: #8FA6BB;
    --steel-dim: #5F7284;
    --plasma-a: #FF5A1F;
    --plasma-b: #FF2E7E;
    --plasma-grad: linear-gradient(135deg, #FF5A1F, #FF2E7E);
    --good: #35C77B;
    --warn: #F5B32B;
    --critical: #FF4D4D;
    --font-display: "Poppins", "Space Grotesk", system-ui, sans-serif;
    --font-body: "Poppins", "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-lg: 16px;
    --measure: 1600px;
    --search-min: 280px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--void);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Soft plasma glow behind the page, Dometrain-hero style — decorative only. */
body {
    background-image:
        radial-gradient(52rem 26rem at 85% -8%, color-mix(in srgb, var(--plasma-b) 7%, transparent), transparent 70%),
        radial-gradient(40rem 22rem at -10% 4%, color-mix(in srgb, var(--plasma-a) 5%, transparent), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }

a { color: inherit; text-decoration: none; }

/* ---------- Shell: floating rounded top bar ---------- */

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 20px 6px;
    background: linear-gradient(to bottom, var(--void) 60%, transparent);
}

.topbar-inner {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 30px; width: auto; }

.top-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    /* Overflow stays visible here so the Settings popover isn't clipped; the
       compact breakpoint turns it into a horizontal scroller. */
    scrollbar-width: none;
}
.top-links::-webkit-scrollbar { display: none; }

.top-link {
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--steel);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease;
}

.top-link:hover { color: var(--paper); background: var(--panel-2); }

.top-link.active {
    color: #FFF;
    background: var(--panel-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent);
}

.topbar-foot { display: flex; gap: 6px; flex-shrink: 0; }

/* Hamburger + drawer backdrop only exist on the compact breakpoint. */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

/* Settings dropdown: a top-link that opens a menu-pop of the "add things" screens. */
.nav-group { position: relative; display: flex; align-items: center; flex-shrink: 0; }

.top-link-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: var(--font-body);
    cursor: pointer;
}

.top-link-group:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 2px; }

.top-link-group[aria-expanded="true"] { color: var(--paper); background: var(--panel-2); }

.caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
    transition: transform 120ms ease;
}

.top-link-group[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-pop { left: 0; right: auto; min-width: 180px; }

.nav-pop .menu-item.active {
    color: #FFF;
    background: var(--panel-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent);
}

.tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--steel-dim);
    padding: 4px 10px;
    border: 1px solid var(--edge);
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-dev { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ---------- User menu (topbar avatar + session dropdown) ---------- */

.user-menu { position: relative; display: flex; align-items: center; }

.avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--edge-2);
    color: var(--paper);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.avatar-btn:hover .avatar,
.avatar-btn[aria-expanded="true"] .avatar {
    border-color: color-mix(in srgb, var(--plasma-a) 55%, transparent);
}

.avatar-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 2px; }

.menu-backdrop { position: fixed; inset: 0; z-index: 60; }

.menu-pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 61;
    min-width: 220px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--edge);
    margin-bottom: 6px;
}

.menu-name { font-weight: 600; color: #FFF; font-size: 13.5px; }
.menu-email { color: var(--steel-dim); font-size: 12px; word-break: break-all; }

.menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--steel);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.menu-item:hover { color: var(--paper); background: var(--panel-2); }
.menu-item-exit { color: var(--critical); }
.menu-item-exit:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }

/* ---------- Info hints (tap-to-toggle metric definitions) ---------- */

.info-hint { position: relative; display: inline-flex; align-items: center; }

.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--steel-dim);
    cursor: pointer;
    transition: color 120ms ease;
}

.info-btn:hover,
.info-btn[aria-expanded="true"] { color: color-mix(in srgb, var(--plasma-a) 70%, var(--paper)); }

.info-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 1px; }

.info-pop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 61;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    cursor: auto;
}

.info-pop-title { font-size: 12px; font-weight: 600; color: #FFF; }
.info-pop-text { font-size: 12.5px; font-weight: 400; color: var(--steel); line-height: 1.5; }

/* Edge tiles: anchor the popover so it stays inside the viewport. */
.grid-kpis .panel:first-child .info-pop,
.panel-title .info-pop { left: 0; transform: none; }
.grid-kpis .panel:last-child .info-pop { left: auto; right: 0; transform: none; }

/* ---------- Profile page claim rows ---------- */

.profile-rows {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px 18px;
    margin: 0;
    align-items: baseline;
}

.profile-rows dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
}

.profile-rows dd { margin: 0; font-size: 13.5px; word-break: break-word; }

.content {
    width: 100%;
    /* Side padding sits outside the measure so panel edges line up exactly
       with the topbar pill (which is --measure wide inside the same gutters). */
    max-width: calc(var(--measure) + 40px);
    margin: 0 auto;
    padding: 26px 20px 56px;
    min-width: 0;
}

/* ---------- Page chrome ---------- */

.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.page-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; color: #FFF; }
.page-sub { color: var(--steel); font-size: 13.5px; margin-top: 5px; }

/* ---------- Panels / cards ---------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 22px;
}

.panel-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 16px;
}

.grid { display: grid; gap: 16px; }
.grid-kpis { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- KPI tiles ---------- */

.kpi { display: flex; flex-direction: column; gap: 7px; }
.kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.kpi-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: #FFF;
}
.kpi-value.hot {
    background: var(--plasma-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kpi-value.bad { color: var(--critical); }
.kpi-note { font-size: 12px; color: var(--steel-dim); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius); }
.panel .table-wrap { border: none; border-radius: 0; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

table.data th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-dim);
    padding: 10px 14px;
    border-bottom: 1px solid var(--edge-2);
    background: var(--panel);
    white-space: nowrap;
}

table.data td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--edge);
    vertical-align: middle;
}

table.data tr:last-child td { border-bottom: none; }
@media (hover: hover) { table.data tr:hover td { background: var(--panel-2); } }
/* Master-detail selection (Warehouses page): mirrors the active nav pill. */
table.data tr.row-selected td {
    background: var(--panel-2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--plasma-a) 45%, transparent),
                inset 0 -1px 0 color-mix(in srgb, var(--plasma-a) 45%, transparent);
}

/* Disclosure rows (Warehouses page): a warehouse expands in place so its
   locations appear directly under the row that was clicked. The chevron and the
   count column are the two signals that there is something nested to open. */
.disclose {
    display: inline-block;
    color: var(--steel-dim);
    font-size: 15px;
    line-height: 1;
    transition: transform 140ms ease, color 140ms ease;
}
table.data tr:hover .disclose { color: var(--steel); }
.disclose.open { transform: rotate(90deg); color: var(--plasma-a); }
td.disclose-cell, th.disclose-cell { width: 30px; padding-right: 0; }

.disclose-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    margin: -4px -6px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

table.data tr.row-detail:hover td { background: var(--panel); }
table.data tr.row-detail > td {
    padding: 4px 14px 18px 44px;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--plasma-a) 45%, transparent);
}

/* Header for the nested block inside a disclosure row. */
.detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0;
}
.detail-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.detail-sub { font-size: 12px; color: var(--steel-dim); }

/* The nested table sits on --void so it reads as contained by its parent row
   rather than as a continuation of the outer table. */
.detail-body {
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    background: var(--void);
    overflow-x: auto;
}
.detail-body table.data th { background: var(--void); }
.detail-body .empty { padding: 26px 16px; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* table.data th out-specifies th.num, so numeric headers need their own rule
   to sit right-aligned over their data. */
table.data th.num { text-align: right; }
/* Codes (SKUs, lots) never break mid-value; the table-wrap scrolls instead. */
.mono { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.dim { color: var(--steel); }
.neg { color: var(--critical); font-weight: 600; }

/* ---------- Badges: Dometrain dot-pill ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--edge-2);
    color: var(--steel);
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-receipt { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.badge-shipment { color: var(--steel); border-color: var(--edge-2); }
.badge-transfer { color: #6FB3FF; border-color: color-mix(in srgb, #6FB3FF 40%, transparent); }
.badge-adjustment { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-count { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-scrap { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.badge-inactive { color: var(--steel-dim); }
.badge-active { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }

/* Chip rows: several dot-pills in one table cell (e.g. warehouses per product). */
.chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
}

input.in, select.in, textarea.in {
    background: var(--void);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-sm);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    width: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input.in:focus, select.in:focus, textarea.in:focus {
    border-color: var(--plasma-a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--plasma-a) 18%, transparent);
}

input.in::placeholder { color: var(--steel-dim); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--edge-2);
    background: var(--panel-2);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; }

.btn-hot {
    background: var(--plasma-grad);
    border: none;
    color: #FFF;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--plasma-b) 30%, transparent);
}
.btn-hot:hover { filter: brightness(1.08); box-shadow: 0 8px 26px color-mix(in srgb, var(--plasma-b) 40%, transparent); }

/* Dometrain secondary = outline in the accent color. */
.btn-ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--plasma-a) 50%, transparent);
    color: color-mix(in srgb, var(--plasma-a) 70%, var(--paper));
}
.btn-ghost:hover { background: color-mix(in srgb, var(--plasma-a) 10%, transparent); filter: none; }

.btn-sm { padding: 5px 13px; font-size: 12px; font-weight: 500; }

.btn-danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Toolbar / filters ---------- */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .in { width: auto; min-width: 200px; border-radius: 999px; }
.toolbar .in-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim, #9aa3b2); }
.toolbar .in-label .in { min-width: 150px; }
.toolbar .tz-note { font-size: 12px; margin-left: auto; }

/* Standard search input: full pill, one width everywhere (style guide §2 forms). */
.in-search { min-width: var(--search-min, 280px); }

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13.5px;
    margin-bottom: 15px;
    border: 1px solid;
}
.alert-error { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); background: color-mix(in srgb, var(--critical) 8%, transparent); }
.alert-ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }

/* ---------- Modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 11, 0.72);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8dvh 16px 16px;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.modal {
    width: 100%;
    max-width: 560px;
    max-height: 84dvh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.modal-title { font-size: 18px; font-weight: 700; color: #FFF; }

.modal-close {
    background: none;
    border: none;
    color: var(--steel);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 999px;
}
.modal-close:hover { color: var(--paper); background: var(--panel-2); }

.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- Tenant bootstrap gate ---------- */

/* A brand-new user's first token has no tenant claim, so every page behind this
   would render its "403" error state for the length of the bootstrap round-trip.
   Above the tour layer: nothing should paint before the workspace exists. */
.setup-gate {
    position: fixed;
    inset: 0;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    z-index: 300;
}

.setup-gate-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 380px;
}

.setup-gate-card h3 { font-size: 18px; font-weight: 700; color: #FFF; }

/* ---------- First-login tour ---------- */

/* Sits above the modal layer: the tour can open over any page, including one
   that already has a modal on screen. */
.tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 11, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    z-index: 200;
    backdrop-filter: blur(4px);
}

.tour-card {
    width: 100%;
    max-width: 480px;
    max-height: 88dvh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.tour-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.tour-count {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-dim);
}

.tour-title { font-size: 19px; font-weight: 700; color: #FFF; line-height: 1.25; }

.tour-body { display: flex; flex-direction: column; gap: 10px; }
.tour-body p { font-size: 14px; color: var(--steel); line-height: 1.6; }
.tour-body a { color: color-mix(in srgb, var(--plasma-a) 70%, var(--paper)); font-weight: 600; }

.tour-dots { display: flex; gap: 6px; margin: 20px 0 18px; }

.tour-dot {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--edge-2);
}
.tour-dot.on { background: var(--plasma-grad); }

.tour-foot { display: flex; align-items: center; gap: 10px; }
/* Skip stays quiet and pinned left; Back/Next own the right edge. */
.tour-skip { margin-right: auto; background: none; border-color: transparent; color: var(--steel-dim); }
.tour-skip:hover { color: var(--steel); background: var(--panel-2); filter: none; }

/* ---------- Charts ---------- */

.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-bar { cursor: pointer; }
.chart-bar:hover { filter: brightness(1.25); }

.chart-axis-label {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--steel-dim);
}

.chart-value-label {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--steel);
}

.chart-tip {
    position: absolute;
    transform: translate(-50%, -120%);
    background: var(--void);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--paper);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.chart-tip .tip-label { color: var(--steel); }

/* ---------- Usage meters ---------- */

.meter { margin-bottom: 14px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.meter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
}
.meter-count { font-size: 12.5px; color: var(--paper); }

.meter-track {
    height: 8px;
    border-radius: 999px;
    background: var(--void);
    border: 1px solid var(--edge);
    overflow: hidden;
}
.meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--slab-3);
    transition: width 300ms ease;
}
.meter-fill.meter-warn { background: var(--warn); }
.meter-fill.meter-critical { background: var(--plasma-grad); }

/* ---------- Pricing cards ---------- */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 16px;
}

.plan-card { display: flex; flex-direction: column; gap: 11px; }
.plan-card .btn { margin-top: auto; }

.plan-current {
    border-color: transparent;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        var(--plasma-grad) border-box;
    border: 1px solid transparent;
}

.plan-name {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}

.plan-amount {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: #FFF;
}

.plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    color: var(--steel);
}
.plan-features b { color: var(--paper); font-weight: 600; }

/* ---------- Misc ---------- */

.empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--steel-dim);
    font-size: 13.5px;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--edge-2);
    border-top-color: var(--plasma-a);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pager (shared Pager.razor) ---------- */

.pager {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
    color: var(--steel);
    font-size: 12.5px;
}
.pager-sum { white-space: nowrap; }
.pager-pages { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pager-btn {
    min-width: 34px;
    padding: 5px 10px;
    border-radius: 999px;
    background: transparent;
    font-weight: 500;
}
.pager-btn:hover:not(:disabled) { background: var(--panel-2); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-num { font-family: var(--font-mono); }
/* Active page mirrors the active nav pill: panel fill + inset accent ring. */
.pager-num.active {
    color: #FFF;
    background: var(--panel-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent);
}
.pager-size { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.pager-size .in { width: auto; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--critical);
    color: #FFF;
    padding: 10px 16px;
    z-index: 1000;
}

/* ---------- Compact / touch (iPad, phone) ---------- */

/* iPad Pro 11" portrait (834px) is past the hamburger breakpoint but not wide
   enough for brand + five links + two env tags + avatar in one pill. */
@media (max-width: 960px) {
    .topbar-foot { display: none; }
}

/* Phones and portrait tablets: brand + avatar + round hamburger on one row; the
   links drop down inside the pill as full-width rows when the menu is open, and
   Settings expands inline instead of opening a popover. Mirrors the site header. */
@media (max-width: 820px) {
    .topbar { padding: 10px 10px 4px; }
    .topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 6px 10px;
        padding: 6px 8px 6px 14px;
        border-radius: var(--radius);
        z-index: 1;
    }
    .brand { grid-row: 1; grid-column: 1; }
    .brand img { height: 26px; }
    .user-menu { grid-row: 1; grid-column: 2; }

    .nav-toggle {
        grid-row: 1;
        grid-column: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--edge);
        border-radius: 999px;
        background: transparent;
        color: var(--paper);
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }
    .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--panel-2); border-color: var(--edge-2); }
    .nav-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 2px; }
    .nav-toggle .bars {
        position: relative;
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: background 120ms ease;
    }
    .nav-toggle .bars::before, .nav-toggle .bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 160ms ease, top 160ms ease;
    }
    .nav-toggle .bars::before { top: -6px; }
    .nav-toggle .bars::after { top: 6px; }
    .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
    .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

    /* Drawer: hidden until the toggle opens it. Sits under the pill (z 1) inside
       the header's stacking context, above the fixed backdrop (z 0). */
    .top-links {
        display: none;
        grid-row: 2;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 4px -8px 0 -14px;
        padding: 8px 6px 2px;
        border-top: 1px solid var(--edge);
    }
    .topbar.is-open .top-links { display: flex; }
    .topbar.is-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 0; }

    .top-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
        border-radius: var(--radius-sm);
    }
    .nav-group { flex-direction: column; align-items: stretch; }
    .top-link-group { width: 100%; justify-content: space-between; }
    /* Settings expands in place: no popover, no backdrop, indented rows. */
    .nav-group .menu-backdrop { display: none; }
    .nav-pop {
        position: static;
        min-width: 0;
        padding: 2px 0 4px 14px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .nav-pop .menu-item { display: flex; align-items: center; min-height: 44px; font-size: 15px; }

    /* Avatar keeps its size; the button around it grows to a 44px target. */
    .avatar-btn { min-width: 44px; min-height: 44px; }
    .avatar { width: 30px; height: 30px; }
    .user-menu .menu-pop { top: calc(100% + 6px); }
    .user-menu .menu-item { min-height: 44px; display: flex; align-items: center; }

    .content { padding: 18px 10px 40px; }

    /* Touch targets: 44px controls; 16px inputs so iOS doesn't zoom on focus. */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    input.in, select.in, textarea.in { min-height: 44px; font-size: 16px; }
    .pager-btn { min-width: 40px; min-height: 40px; }
    .pager-size .in { min-height: 40px; }
    .disclose-btn { min-width: 40px; min-height: 40px; }
    table.data td { padding: 12px 12px; }
    table.data th { padding: 10px 12px; }
    /* The nested locations block can't afford a 44px indent at 390px. */
    table.data tr.row-detail > td { padding: 4px 10px 14px 16px; }
    /* Tour: card takes the width it can get, buttons reach 44px touch targets. */
    .tour-card { padding: 20px 16px; max-height: 92dvh; }
    .tour-title { font-size: 17px; }
    .tour-foot .btn { min-height: 44px; }
}

/* Phones: filters stack full-width, modals go edge to edge, titles step down. */
@media (max-width: 640px) {
    .page-title { font-size: 23px; }
    .page-head { margin-bottom: 18px; }
    .toolbar .in, .toolbar .in-label .in, .in-search { width: 100%; min-width: 0; }
    .toolbar .in-label { width: 100%; }
    .toolbar .tz-note { margin-left: 0; }
    .modal-backdrop { padding: 4dvh 8px 8px; }
    .modal { padding: 20px 16px; max-height: 92dvh; }
    .modal-foot { flex-wrap: wrap; }
    .modal-foot .btn { flex: 1 1 auto; }
    .panel { padding: 16px 14px; }
}