/* AtlasPortal's own rules. Layout carried over from the React portal lives in
   portal.css; platform paint in the shared atlas-*.css files. */

/* A tile is a link wrapping the card button, so the link takes no paint of its own. */
.application-card-link { display: block; color: inherit; text-decoration: none; }
.application-card-link > .application-card { width: 100%; }

/* ── Manage Users (ACT-102) — layout only; table, card, field and button paint are
   the platform's (atlas-theme.css, atlas-fluent.css). Zebra comes with table.picker. ── */
.users-page { width: 100%; max-width: var(--content-max-w-narrow); margin: 0 auto; padding: 8px 20px; text-align: left; align-self: flex-start; }
.users-page--narrow { max-width: 900px; }
.users-title { margin: 0; font-size: 1rem; font-weight: 600; }
.users-subtitle { color: var(--color-text-muted); font-size: 12px; margin-top: 1px; }
.users-table { width: 100%; margin-top: 8px; }
.users-empty { color: var(--color-text-muted); margin: 4px 0; }
.users-ok { margin: 8px 0 0; padding: var(--space-3); font-size: 0.9rem; color: var(--color-success); background: var(--color-success-bg); border-radius: var(--radius); }
.users-page p.error { margin: 8px 0 0; }
.users-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 8px 12px; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius); }
.users-confirm > span { margin-right: auto; }
.col-icon { width: 1%; white-space: nowrap; text-align: right; }

/* Impersonating (ACT-114): the row button's glyph in the bar, in the bar's ink, at twice the row
   button's size so it is seen, with the large-icon stroke (.icon-btn--lg svg). It sits against
   the caret as the name does. */
.impersonating-icon { display: inline-flex; align-items: center; color: var(--color-shell-fg); }
.impersonating-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.header-actions > .impersonating-icon + .user-dropdown { margin-left: var(--space-2); }

/* Title and New User left, the gauge centred on the page's centre line (classic ACT-99). */
.users-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; }
.users-header__actions { display: flex; align-items: center; gap: 1em; margin-top: 6px; }
@media (max-width: 1100px) { .users-header { grid-template-columns: 1fr; } }

.seat-gauge { display: flex; align-items: flex-end; justify-content: center; }
.seat-gauge__summary { font-size: 14px; color: var(--color-text); }
.seat-gauge__count { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seat-gauge--ok .seat-gauge__count { color: var(--color-success); }
.seat-gauge--near .seat-gauge__count { color: var(--color-warning); }
.seat-gauge--over .seat-gauge__count { color: var(--color-danger); }
.seat-gauge__muted { color: var(--color-text-muted); }
.seat-gauge__meter { width: 460px; max-width: 100%; padding-top: 26px; }
.seat-gauge__track { position: relative; display: flex; height: 14px; border-radius: var(--radius); }
.seat-gauge__band { height: 100%; }
.seat-gauge__band:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seat-gauge__band:nth-child(3) { border-radius: 0 var(--radius) var(--radius) 0; }
.seat-gauge__band--ok { background: var(--color-success); }
.seat-gauge__band--near { background: var(--color-warning); }
.seat-gauge__band--over { background: var(--color-danger); }
.seat-gauge__pointer { position: absolute; top: -9px; width: 0; height: 0; transform: translateX(-7px); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--color-text); }
.seat-gauge__value { position: absolute; bottom: 10px; left: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seat-gauge__scale { position: relative; height: 18px; margin-top: 4px; }
.seat-gauge__tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.seat-gauge__tick:first-child { transform: none; }
.seat-gauge__tick:last-child { transform: translateX(-100%); }

/* One user: the band header, as the platform's settings cards draw it. */
.user-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.user-card { margin-top: 8px; }
.user-card__head { padding: 6px 16px; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--font-size-micro); font-weight: 700; color: var(--color-text-muted); }
.user-card__foot { display: flex; gap: 8px; padding: 6px 12px; }
.user-card table.picker { width: 100%; }
.user-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
@media (max-width: 700px) { .user-form { grid-template-columns: 1fr; } }
.user-field { display: flex; flex-direction: column; gap: 2px; }
.user-field--wide { grid-column: 1 / -1; }
.user-field--check { justify-content: flex-end; }
.user-readonly { padding: 4px 0; }
.user-inline { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.user-scroll { max-height: 320px; overflow: auto; }
.user-pw { border-top: 1px solid var(--color-border); }

.cust-panel { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.cust-filters { display: flex; align-items: flex-end; gap: 12px; }
.cust-filter { display: flex; flex-direction: column; gap: 2px; }
.cust-filter--grow { flex: 1 1 auto; }
.cust-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.cust-bar > span:first-child { margin-right: auto; }
.cust-results { max-height: 360px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2px 8px; }
.cust-row { padding: 2px 0; }

/* THE SHELL, as the Blazor tools draw it (WarrantyAnalysis app.css): a full-height
   column — bar, the band that scrolls (atlas-appbar.css .page-shell > .main-layout),
   footer on the bottom edge. The portal's main fills the band so the sign-in
   card can centre in it, as it did in the React portal. */
.page-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.page-shell > .main-layout { display: flex; }
.page-shell > .main-layout > .app-main { flex: 1 0 auto; }