/* portal.css — customer-portal-specific styling on top of theme.css.
   Reuses theme components (.btn, .card, table.list, .state, .flash,
   .auth-container, .container, dl.kv, form inputs). Defines only the
   portal-specific layout: tinted auth background, auth centering/brand
   lockup, license-page header, token <pre> blocks, small helpers. */

/* --- Tinted body background for portal pages --- */
body.portal {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(254, 100, 176, 0.14), transparent 60%),
    var(--surface-2, #f6f7f9);
  color: var(--text, #1a1a1a);
}

/* --- Auth screens: full-height centered card with brand lockup --- */
.auth-container {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-6, 2.5rem) var(--space-4, 1rem);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-brand {
  text-align: center;
  margin-bottom: var(--space-4, 1.25rem);
}
.auth-brand .logo {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--text, #1a1a1a);
  text-decoration: none;
}
.auth-brand .logo .dot { color: var(--brand-400, #fe64b0); }
.auth-container h1 {
  text-align: center;
  margin: 0 0 var(--space-4, 1.25rem);
  font-size: 1.5rem;
}
/* The auth form is a .card from theme — give it a touch more presence. */
.auth-container form.card {
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(17, 24, 39, 0.10));
}
.auth-aside {
  text-align: center;
  margin-top: var(--space-4, 1.25rem);
  color: var(--text-muted, #6b7280);
  font-size: 0.92rem;
}
.auth-aside a { color: var(--link, #2053c9); }

/* --- Logged-in page header (My Licenses) --- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 1rem);
  margin-bottom: var(--space-4, 1.25rem);
}
.page-head h1 { margin: 0; }
.page-head form { margin: 0; }

.back-link {
  display: inline-block;
  margin-bottom: var(--space-3, 1rem);
  color: var(--text-muted, #6b7280);
}
.back-link:hover { color: var(--link, #2053c9); }

/* --- Card variants used on detail page --- */
.card.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 1rem);
}
.card.split h2 { margin: 0 0 var(--space-1, 0.25rem); }
.card .card-actions { margin-top: var(--space-3, 0.75rem); }
.card .card-actions .hint {
  margin-left: var(--space-3, 0.75rem);
  color: var(--text-soft, #888);
}

/* --- Helpers --- */
.muted { color: var(--text-muted, #5a5a5a); }
.note-ok { color: var(--success, #15803d); }

/* --- Token <pre> blocks + copy buttons --- */
pre.token {
  background: var(--surface-inverse, #0e1217);
  color: #c6d0f5;
  border: 1px solid #303742;
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 0.85rem) var(--space-4, 1rem);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.88em;
}

/* Make license-id code links scannable in tables/headings */
.id-code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }