/* Shared layout for the Frissbi admin sites (admin.frissbi.com and app.frissbi.com) and the
   set-password page. Colours, type and components come from /shared/theme.css (the extension's
   design system: load it first, with <body class="fr-ui portal">); this file only lays the pages
   out. Every colour is a theme token, so contrast stays as checked there. */

.portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.portal p { margin: 0; }
.portal h1, .portal h2, .portal h3 { margin: 0; }
.portal h1 { font-size: 22px; line-height: 30px; font-weight: 650; letter-spacing: -0.02em; }
.portal h2 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.013em; }
.portal h3 { font-size: 14px; line-height: 20px; font-weight: 600; }
.portal code, .portal .portal-mono {
  font-family: var(--fr-font-mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.portal strong { font-weight: 600; }
.portal button { cursor: pointer; }
.portal a.fr-btn { text-decoration: none; }
.portal a.fr-btn:hover { color: var(--fr-text); }
/* A title and its caption, stacked (theme.css styles .fr-pair only inside the tray's rhythm scope). */
.portal .fr-pair { display: flex; flex-direction: column; gap: var(--fr-stack-tight); min-width: 0; max-width: 100%; }

.portal-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--fr-space-4);
}
@media (min-width: 720px) { .portal-inner { padding: 0 var(--fr-space-6); } }

.portal .skip-link {
  position: absolute;
  left: var(--fr-space-4);
  top: -120px;
  z-index: var(--fr-z-toast);
  padding: var(--fr-space-2) var(--fr-space-3);
  border-radius: var(--fr-radius-md);
  background: var(--fr-surface);
  box-shadow: var(--fr-shadow-md);
}
.portal .skip-link:focus { top: var(--fr-space-3); }

/* ---------- Header ---------- */

.portal-header {
  position: sticky;
  top: 0;
  z-index: var(--fr-z-sticky);
  background: var(--fr-surface);
  border-bottom: 1px solid var(--fr-border);
}
.portal-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-space-2) var(--fr-space-6);
  min-height: 56px;
  padding-top: var(--fr-space-2);
  padding-bottom: var(--fr-space-2);
}
.portal-brand { display: inline-flex; align-items: center; gap: var(--fr-space-2); text-decoration: none; color: var(--fr-text); }
.portal .portal-brand { text-decoration: none; }
.portal .portal-brand:hover { color: var(--fr-text); }
.portal-brand img { display: block; flex: none; }
.portal-brand-name { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.013em; }
.portal-brand-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--fr-space-2);
  border-radius: var(--fr-radius-pill);
  background: var(--fr-accent-tint);
  color: var(--fr-accent-ink);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portal-nav { display: flex; flex-wrap: wrap; gap: var(--fr-space-1); flex: 1 1 auto; }
.portal .portal-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-1-5);
  min-height: var(--fr-control-md);
  padding: 0 var(--fr-space-3);
  border-radius: var(--fr-radius-md);
  color: var(--fr-text-secondary);
  font-weight: 500;
  text-decoration: none;
}
.portal .portal-nav a:hover { background: var(--fr-gray-100); color: var(--fr-text); }
.portal .portal-nav a[aria-current="page"] { background: var(--fr-accent-tint); color: var(--fr-accent-ink); }
.portal-account { display: flex; align-items: center; gap: var(--fr-space-2); margin-left: auto; min-width: 0; }
.portal-account-name { color: var(--fr-text-secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* ---------- Main ---------- */

.portal-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-6);
  padding-top: var(--fr-space-6);
  padding-bottom: var(--fr-space-12);
}
.portal-main:focus { outline: none; }
.portal-footer { border-top: 1px solid var(--fr-border); background: var(--fr-surface); }
.portal-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fr-space-2) var(--fr-space-6);
  padding-top: var(--fr-space-4);
  padding-bottom: var(--fr-space-4);
  font-size: 12px;
  line-height: 16px;
  color: var(--fr-text-muted);
}

.portal-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fr-space-3);
}
.portal-page-head > div:not(.portal-actions) { display: flex; flex-direction: column; gap: var(--fr-space-1); min-width: 0; }
.portal-page-head .fr-caption { max-width: 640px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); align-items: center; }
.portal-back { display: inline-flex; align-items: center; gap: var(--fr-space-1); font-size: 13px; }

.portal-section { display: flex; flex-direction: column; gap: var(--fr-space-3); }
.portal-card { display: flex; flex-direction: column; gap: var(--fr-space-3); }
.portal-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-space-2); }

/* ---------- Centered single-card pages (sign-in, set password, not configured) ---------- */

.portal-center {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--fr-space-12) var(--fr-space-4);
}
.portal-center-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-4);
  padding: var(--fr-space-6);
  box-shadow: var(--fr-shadow-md);
}
.portal-center-card .portal-brand { align-self: flex-start; }
.portal-center-card form { display: flex; flex-direction: column; gap: var(--fr-space-3); }
.portal-center-card .fr-field { margin-bottom: 0; }

/* ---------- Stats ---------- */

.portal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fr-space-3);
}
.portal-stat { display: flex; flex-direction: column; gap: var(--fr-space-1); }
.portal-stat-value { font-size: 24px; line-height: 32px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.portal-stat-label { font-size: 12.5px; line-height: 18px; color: var(--fr-text-muted); }

/* A horizontal meter; JavaScript sets the fill's width through the CSSOM (no style attributes). */
.portal-meter {
  position: relative;
  height: 8px;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-track);
  overflow: hidden;
}
.portal-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--fr-accent-gradient-x); }
.portal-meter--full .portal-meter-fill { background: var(--fr-error-ink); }

/* ---------- Toolbar and forms ---------- */

.portal-toolbar { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); align-items: center; }
.portal-toolbar .fr-input { flex: 1 1 240px; min-width: 0; }
.portal-toolbar select.fr-input { flex: 0 1 220px; }
.portal select.fr-input { padding-right: var(--fr-space-8); }
.portal-form { display: flex; flex-direction: column; gap: var(--fr-space-3); }
.portal-form .fr-field { margin-bottom: 0; }
.portal-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--fr-space-3); }
.portal-hint { font-size: 12px; line-height: 16px; color: var(--fr-text-muted); }
.portal-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--fr-space-2); }

/* ---------- Tables (stacked rows on narrow screens) ---------- */

.portal-table-wrap { overflow-x: auto; border: 1px solid var(--fr-border); border-radius: var(--fr-radius-lg); background: var(--fr-surface); }
.portal-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.portal-table th, .portal-table td { padding: 10px var(--fr-space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--fr-border); }
.portal-table th { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fr-text-muted); background: var(--fr-surface-inset); white-space: nowrap; }
.portal-table tbody tr:last-child td { border-bottom: 0; }
.portal-table tbody tr:hover td { background: var(--fr-gray-50); }
.portal-table .portal-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-table a { font-weight: 500; }
@media (max-width: 719px) {
  .portal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .portal-table, .portal-table tbody, .portal-table tr, .portal-table td { display: block; width: 100%; }
  .portal-table tr { padding: var(--fr-space-2) 0; border-bottom: 1px solid var(--fr-border); }
  .portal-table tbody tr:last-child { border-bottom: 0; }
  .portal-table td { display: flex; justify-content: space-between; gap: var(--fr-space-3); padding: var(--fr-space-1) var(--fr-space-3); border-bottom: 0; }
  .portal-table td::before { content: attr(data-label); color: var(--fr-text-muted); font-size: 12px; }
  .portal-table .portal-num { text-align: right; }
}

/* ---------- Details lists ---------- */

.portal-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--fr-space-2) var(--fr-space-4); margin: 0; }
.portal-dl dt { color: var(--fr-text-muted); font-size: 13px; }
.portal-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- A one-time link shown once, with a copy button ---------- */

.portal-link-box { display: flex; flex-direction: column; gap: var(--fr-space-2); padding: var(--fr-space-3); border: 1px solid var(--fr-warning-border); border-radius: var(--fr-radius-md); background: var(--fr-warning-tint); }
.portal-link-box .fr-input { width: 100%; font-family: var(--fr-font-mono); font-size: 12px; }
.portal-link-row { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); }
.portal-link-row .fr-input { flex: 1 1 260px; }
.portal-link-box p { color: var(--fr-warning-ink); font-size: 12.5px; line-height: 18px; }

/* ---------- Dialogs (native <dialog>, opened with showModal) ---------- */

.portal-dialog {
  width: min(520px, calc(100% - 2 * var(--fr-gutter)));
  max-height: calc(100vh - 2 * var(--fr-space-6));
  padding: 0;
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-xl);
  background: var(--fr-surface);
  color: var(--fr-text);
  box-shadow: var(--fr-shadow-lg);
}
.portal-dialog::backdrop { background: var(--fr-scrim); }
.portal-dialog-body { display: flex; flex-direction: column; gap: var(--fr-space-3); padding: var(--fr-space-6); }
.portal-dialog-body .fr-field { margin-bottom: 0; }

/* ---------- States ---------- */

.portal-status { display: inline-flex; }
.portal-loading { display: flex; align-items: center; gap: var(--fr-space-2); color: var(--fr-text-muted); padding: var(--fr-space-4) 0; }
.portal-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--fr-gray-200);
  border-top-color: var(--fr-accent-ink);
  animation: portal-spin 800ms linear infinite;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }
.portal-empty { border: 1px dashed var(--fr-border-hover); border-radius: var(--fr-radius-lg); background: var(--fr-surface); }
.portal-notice-region:empty { display: none; }
.portal-muted { color: var(--fr-text-muted); }
.portal-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fr-space-2); }
.portal-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Small charts (analytics) ---------- */

.portal-bars { display: flex; flex-direction: column; gap: var(--fr-space-2); margin: 0; padding: 0; list-style: none; }
.portal-bars li { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; align-items: center; gap: var(--fr-space-3); font-size: 13px; }
.portal-bars-value { font-variant-numeric: tabular-nums; color: var(--fr-text-secondary); min-width: 3ch; text-align: right; }
/* Long labels (codes): the label takes its own line above the bar. */
.portal-bars--stacked li { grid-template-columns: 1fr auto; row-gap: var(--fr-space-1); }
.portal-bars--stacked li > :first-child { grid-column: 1 / -1; }
.portal-spark { display: block; width: 100%; max-width: 160px; height: 32px; }
.portal-spark-line { fill: none; stroke: var(--fr-accent-ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.portal-spark-base { stroke: var(--fr-gray-200); stroke-width: 1; }