/* MobiCAM customer portal — layered on styles.css, which owns the brand tokens.
   Nothing here re-declares a colour: every value comes from --acc / --surface / --line / --ink,
   so the portal follows the site's light and dark themes with no second palette to keep in step.
   No inline styles anywhere → the CSP can forbid 'unsafe-inline'. */

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.portal-body { min-height: 100vh; }
.portal-main { padding-bottom: 80px; }
.view { padding-top: 40px; }
.view-center { display: flex; align-items: center; justify-content: center; min-height: 72vh; padding-top: 0; }

.portal-tag {
  font-size: var(--fs-t1); font-weight: 700; letter-spacing: var(--tr-eyebrow); color: var(--acc-ink);
  border: 1px solid var(--acc); border-radius: 4px; padding: 3px 7px; margin-left: 2px;
}

.session-box { display: flex; align-items: center; gap: 12px; }
.session-email { font-size: var(--fs-t2); color: var(--ink-soft); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- buttons the site did not need ---- */
.btn-sm { font-size: var(--fs-t2); padding: 6px 12px; border-radius: 8px; gap: 6px; }
.btn-danger { background: transparent; color: #c0392b; border-color: color-mix(in srgb, #c0392b 45%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, #c0392b 12%, transparent); }
:root[data-theme="dark"] .btn-danger { color: #e5806f; border-color: color-mix(in srgb, #e5806f 45%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-danger { color: #e5806f; border-color: color-mix(in srgb, #e5806f 45%, transparent); }
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- auth card ---- */
.auth-card {
  position: relative; width: 100%; max-width: 430px;
  background: var(--surface); border: 1px solid var(--line); padding: 30px 30px 32px;
  box-shadow: 0 40px 80px -50px rgba(23, 20, 15, .5);
}
.auth-tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 26px; }
.auth-tab {
  flex: 1; border: none; cursor: pointer; border-radius: 7px; padding: 9px 12px;
  font-family: var(--geo); font-weight: 600; font-size: var(--fs-t4);
  background: transparent; color: var(--ink-soft);
  transition: background .14s ease, color .14s ease;
}
.auth-tab.on { background: var(--acc); color: var(--on-acc); }
.auth-tab:hover:not(.on) { color: var(--ink); }

.auth-h { font-size: var(--fs-d2); font-weight: 700; letter-spacing: var(--tr-small); }
.auth-sub { font-size: var(--fs-t3); line-height: var(--lh-read); margin-top: 8px; margin-bottom: 22px; }
.auth-form { display: flex; flex-direction: column; }

/* ---- fields ---- */
.field { display: block; margin-bottom: 15px; }
.field-label { display: block; font-size: var(--fs-t2); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .org-switch select {
  width: 100%; font-family: var(--geo); font-size: var(--fs-t6); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; transition: border-color .14s ease;
}
.field input:hover, .org-switch select:hover { border-color: var(--line-strong); }
.field input:focus-visible, .org-switch select:focus-visible { border-color: var(--acc); }
.field-hint { display: block; font-size: var(--fs-t1); line-height: var(--lh-ui); margin-top: 6px; }

.form-error {
  font-size: var(--fs-t3); line-height: var(--lh-ui); color: #c0392b;
  background: color-mix(in srgb, #c0392b 9%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 30%, transparent);
  border-radius: 9px; padding: 10px 13px; margin-bottom: 14px;
}
:root[data-theme="dark"] .form-error { color: #f0a091; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-error { color: #f0a091; } }

/* The good-news counterpart: same shape, the brand accent instead of alarm. */
.form-note {
  font-size: var(--fs-t3); line-height: var(--lh-ui); color: var(--acc-ink);
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-radius: 9px; padding: 10px 13px; margin-bottom: 14px;
}

/* A button that reads as a link — for the secondary way out of a form. */
.link-btn {
  align-self: center; margin-top: 14px; border: 0; background: none; cursor: pointer;
  font-family: var(--geo); font-size: var(--fs-t3); color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; padding: 4px 6px;
}
.link-btn:hover { color: var(--acc-ink); }

.stack { display: flex; flex-direction: column; gap: 10px; }
.stack .link-btn { margin-top: 4px; }

/* ---- invitations ---- */
.invite-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.invite-form .field { margin-bottom: 0; }
.invite-form .field-grow { flex: 1 1 240px; }
.invite-form select {
  font-family: var(--geo); font-size: var(--fs-t6); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; transition: border-color .14s ease;
}
.invite-form select:hover { border-color: var(--line-strong); }
.invite-form select:focus-visible { border-color: var(--acc); }
/* Matches the inputs beside it, which are 11px of padding plus a 16px line. */
.invite-form .btn { padding-top: 11px; padding-bottom: 11px; }

/* ---- dashboard ---- */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.dash-h { font-weight: 700; font-size: var(--fs-section); line-height: var(--lh-head); letter-spacing: var(--tr-head); margin-top: 10px; }
.org-switch { min-width: 220px; }
.dash-error { max-width: 640px; }
.dash-foot { font-size: var(--fs-t2); line-height: var(--lh-read); max-width: 660px; margin-top: 26px; }

.panel { background: var(--surface); border: 1px solid var(--line); padding: 24px 24px 26px; margin-bottom: 16px; }
.panel-h { font-weight: 600; font-size: var(--fs-d1); letter-spacing: var(--tr-small); margin-bottom: 18px; }

.empty { font-size: var(--fs-t3); line-height: var(--lh-read); color: var(--ink-soft); max-width: 620px; }

/* ---- key / value list ---- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 26px; margin: 0; }
.kv dt { font-size: var(--fs-t2); color: var(--ink-soft); }
.kv dd { margin: 0; font-size: var(--fs-t4); }
.kv-inline { gap: 4px 14px; align-content: start; }

/* ---- license card ---- */
.license { border: 1px solid var(--line); background: var(--surface-2); padding: 20px 20px 8px; margin-bottom: 14px; }
.license:last-child { margin-bottom: 0; }
.license-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.license-key-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.license-key { font-size: var(--fs-t5); font-weight: 700; letter-spacing: var(--tr-label); color: var(--ink); word-break: break-all; }

.pill { font-family: var(--mono); font-size: var(--fs-t1); font-weight: 700; letter-spacing: var(--tr-eyebrow); border-radius: 999px; padding: 4px 11px; border: 1px solid; }
.pill-ok { color: var(--acc-ink); border-color: var(--acc); }
.pill-warn { color: #b7791f; border-color: color-mix(in srgb, #b7791f 55%, transparent); }
.pill-bad { color: #c0392b; border-color: color-mix(in srgb, #c0392b 45%, transparent); }
.pill-mute { color: var(--ink-soft); border-color: var(--line-strong); }
:root[data-theme="dark"] .pill-bad { color: #e5806f; }
:root[data-theme="dark"] .pill-warn { color: #d9a441; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill-bad { color: #e5806f; }
  :root:not([data-theme="light"]) .pill-warn { color: #d9a441; }
}

.license-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 20px; }
.seat-block { min-width: 220px; flex: 1; }
.seat-line { font-size: var(--fs-t3); margin-bottom: 8px; }
.seat-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; max-width: 320px; }
.seat-fill { display: block; height: 100%; background: var(--acc); border-radius: 999px; transition: width .2s ease; }

/* ---- tables ---- */
/* `position: relative` is load-bearing, not decoration: the action column's .sr-only label is
   absolutely positioned, and an absolutely positioned box is only clipped by an ancestor that is
   its containing block. Without this the label's containing block is the viewport, so it escapes
   the scroller and pushes the whole page sideways at narrow widths. */
.table-scroll { overflow-x: auto; position: relative; }
.grid-table { width: 100%; border-collapse: collapse; font-size: var(--fs-t3); }
.grid-table th {
  text-align: left; font-family: var(--mono); font-weight: 700; font-size: var(--fs-t1); letter-spacing: var(--tr-eyebrow);
  color: var(--ink-soft); padding: 0 14px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid-table tr:last-child td { border-bottom: none; }
.col-action { text-align: right; padding-right: 0 !important; white-space: nowrap; }

/* The table already scrolls, so a long hostname is better kept on one line than broken across two. */
.machine-name { display: block; font-weight: 600; white-space: nowrap; }
.machine-fp { display: block; font-size: var(--fs-t1); color: var(--ink-soft); margin-top: 2px; }

.confirm { display: inline-flex; align-items: center; gap: 8px; }
.confirm-q { font-size: var(--fs-t2); color: var(--ink-soft); }

/* ---- responsive ---- */
@media (max-width: 620px) {
  .view { padding-top: 26px; }
  .auth-card { padding: 24px 20px 26px; }
  .panel { padding: 20px 16px 22px; }
  .license { padding: 16px 14px 4px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .session-email { display: none; }
  .portal-tag { display: none; }
  .license-meta { gap: 16px; }
  /* Stacked, so the address field and the role never end up 90px wide each. */
  .invite-form { flex-direction: column; align-items: stretch; }
  .invite-form .btn { width: 100%; }
}