/* SpanOPS portal: only what the Sanrad kit (sanrad-ui.css 1.5.0) doesn't define.
   No component of the kit is redefined here; colours come from its tokens. */

/* [hidden] must win over our display: grid/flex helpers (e.g. the quantity row on non-raw-material). */
[hidden] { display: none !important; }

/* The SpanOPS logo follows the theme: light artwork on light, #5B9BD5 artwork on dark.
   Auto (no data-theme) follows the device. The artwork is never recoloured. */
.logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .logo-light { display: none; }
  html:not([data-theme]) .logo-dark { display: inline; }
}
.brand-logo { height: 30px; width: auto; }
.auth-logo-img { height: 64px; width: auto; max-width: 100%; }

.who { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .who { display: none; } }

/* The scan box: the one big input of the portal (USB scanners type the QR and press Enter). */
.scan-input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .06em; }
.code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .05em; }

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

.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.scope-site { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }

#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; }

/* Form dialogs: the kit's .modal-glass is sized for short confirmations (380px). SpanOPS forms
   (enrol, permissions) need more width, and scroll inside the dialog instead of off the screen. */
.modal-form { max-width: 560px; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Using the screen: phones one column; tablets/laptops two panes; wide screens full width ---------- */
.page-full { width: 100%; max-width: 1920px; margin: 0 auto; padding: 20px clamp(16px, 2.5vw, 40px) 32px; }
.split { display: grid; gap: 20px; align-items: start; }
.split > * { min-width: 0; }
.split > .pane-side > * + *, .split > .pane-main > * + * { margin-top: 16px; }
.cards-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.cards-grid > .card { margin: 0; }
.recent .list-item { cursor: pointer; }
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
  .split > .pane-side { position: sticky; top: 84px; max-height: calc(100dvh - 104px); overflow-y: auto; }
  .split.wide-side { grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); }
}
@media (min-width: 1700px) {
  .split.three { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) minmax(360px, 520px); }
}
/* the asset card + history side by side inside the main pane on very wide screens */
.asset-view { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.asset-view > * { min-width: 0; }  /* a wide history table scrolls inside its card instead of widening the page */
@media (min-width: 1500px) { .asset-view { grid-template-columns: minmax(380px, 560px) minmax(0, 1fr); } }
.asset-view > .card { margin: 0; }
/* dense tables on big screens */
@media (min-width: 1100px) { .page-full .table-wrap td, .page-full .table-wrap th { white-space: nowrap; } .page-full .table-wrap td.wrap { white-space: normal; } }
/* big forms (permissions per site and category) get the room on wide screens */
.modal-form.modal-wide { max-width: min(1040px, calc(100vw - 40px)); }

/* site location picker (OpenStreetMap via the bundled Leaflet) */
.map-pick { height: 300px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; z-index: 0; }
@media (min-width: 1100px) { .modal-form .map-pick { height: 360px; } }
.map-coords { margin-top: 4px; }
/* bulk add review: rows and products the server marked */
tr.row-bad > td { background: color-mix(in srgb, var(--color-danger, #c0392b) 10%, transparent); }
tr.row-bad + tr.row-bad > td { color: var(--color-danger, #c0392b); font-size: .9em; padding-top: 0; }
.card-bad { outline: 2px solid var(--color-danger, #c0392b); outline-offset: -2px; }
.stack > * + * { margin-top: 10px; }

/* ---------- spanops.app: sign-in, landing, account, billing ---------- */
.auth-shell .auth-card { max-width: 440px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.landing { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }
.landing-hero { display: grid; gap: 24px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .landing-hero { grid-template-columns: minmax(0, 1.2fr) minmax(360px, 440px); } }
.landing h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; margin: 12px 0 8px; }
.landing .lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; }
.landing-logo { height: 56px; width: auto; }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 28px; }
.features .card { margin: 0; }
.features h3 { margin: 0 0 6px; font-size: 1rem; }
.features p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.pricing { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 16px; }
.pricing .card { margin: 0; display: flex; flex-direction: column; }
.pricing .price { font-size: 1.7rem; font-weight: 700; margin: 6px 0; }
.pricing .price small { font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.pricing .card.current { outline: 2px solid var(--brand); outline-offset: -2px; }
.pricing .btn { margin-top: auto; }
.state-banner { margin: 0 0 16px; }
.secret-box { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .08em; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--canvas); user-select: all; word-break: break-all; }
.codes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.qr-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr-wrap svg { width: 180px; height: 180px; background: #fff; border-radius: 8px; padding: 6px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chips .pill { text-transform: none; }
.legal { max-width: 820px; }
.legal h2 { margin-top: 24px; }
.app-footer a { margin-left: 14px; color: inherit; }