/* Partners Portal rules. The shared kit (sanrad-ui.css) is never edited here. Colours come
   only from kit tokens so light/dark both work. */

/* Glass accent (house rule: glass on the sign-in card and dialogs only), over a soft wash of
   the brand tint -- the SLA portal's treatment, theme-aware. */
.auth-shell {
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 20%, var(--brand-tint) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 10%, var(--info-tint) 0%, transparent 55%);
}
.auth-card .card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-lg);
}
.auth-alt { margin-top: var(--space-4); text-align: center; }
.inline-form { display: inline; margin: 0; }
.section-label {
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin: var(--space-5) 0 var(--space-2);
}
.agreement {
  max-height: 220px; overflow-y: auto; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--text-sm); margin-bottom: var(--space-2);
}
.agreement h3 { font-size: 1rem; margin-top: 0; }
.inline-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.inline-fields .field { flex: 1 1 200px; margin-bottom: 0; }
.setting-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }


/* A long consent label must not squeeze its checkbox smaller than the others. */
.check-row input[type=checkbox] { flex: 0 0 auto; }

/* Theme switch on signed-out pages: top-right of the sign-in shell. */
.auth-theme { position: absolute; top: var(--space-4); right: var(--space-4); }
.auth-shell { position: relative; }

/* Rendered legal text (headings/paragraphs/lists from the document editor). */
.legal-text h3 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.legal-text h3:first-child { margin-top: 0; }
.legal-text p, .legal-text ul { margin: 0 0 var(--space-3); }
.agreement.legal-text { max-height: 200px; }

/* Admin: settings tiles, document editor, log tables */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.settings-tile { display: block; color: inherit; text-decoration: none; margin: 0; }
.settings-tile:hover { border-color: var(--brand); }
.doc-editor { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; min-height: 320px; }
.filters .field { flex: 1 1 150px; }
.log-table td { vertical-align: top; font-size: var(--text-sm); }
.log-table .nowrap { white-space: nowrap; }
.log-table .details { max-width: 320px; }
.kv-inline { display: inline-block; margin: 0 var(--space-2) 2px 0; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--canvas); font-size: var(--text-xs); color: var(--ink-soft); word-break: break-all; }
.filter-row th { padding-top: 0; font-weight: normal; text-transform: none; letter-spacing: 0; }
.filter-row input, .filter-row select { min-height: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--text-sm); padding: 4px 8px; width: 100%; }
.filter-row input[type=date] { margin-bottom: 4px; }
.text-danger { color: var(--danger); }
.raw-log { width: 100%; font-family: var(--font-mono); font-size: var(--text-xs); border-collapse: collapse; }
.raw-log td, .raw-log th { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; word-break: break-word; }
.raw-log .nowrap { white-space: nowrap; color: var(--ink-soft); }
.raw-log tr.lv-warning td:last-child { color: var(--warn); }
.raw-log tr.lv-error td:last-child { color: var(--danger); font-weight: 600; }

/* Log pages use the whole screen width. */
.page.page-full { max-width: none; padding-left: var(--space-5); padding-right: var(--space-5); }
.log-table .details { max-width: 420px; }

/* ---- Page switcher: glass dropdown right after the brand -------------------------------- */
.page-switch { position: relative; margin-left: var(--space-2); }
.page-switch > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--control-h-sm); padding: 0 14px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--ink); font-weight: 600; font-size: var(--text-sm); white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.page-switch > summary::-webkit-details-marker { display: none; }
.page-switch > summary:hover { border-color: var(--brand); }
.page-switch > summary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); border-color: var(--brand); }
.page-switch[open] > summary { border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); }
.page-switch-chevron { transition: transform .22s ease; color: var(--ink-soft); }
.page-switch[open] .page-switch-chevron { transform: rotate(180deg); }
.page-switch-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 220px;
  display: flex; flex-direction: column; padding: 6px;
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-lg);
  transform-origin: top left;
  animation: page-switch-in .18s cubic-bezier(.2, .8, .2, 1);
}
.page-switch-panel a {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.page-switch-panel a:hover, .page-switch-panel a:focus-visible { background: var(--brand-tint); color: var(--brand-dark); outline: none; }
.page-switch-panel a.current { background: var(--brand); color: var(--brand-ink); }
@keyframes page-switch-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-switch-panel { animation: none; }
  .page-switch > summary, .page-switch-chevron { transition: none; }
}
/* Phone: two header rows -- logo + sign-out on top, page switcher + theme below. The
   ::after is a zero-height, full-width flex item that forces the line break. */
@media (max-width: 640px) {
  .app-header { flex-wrap: wrap; row-gap: var(--space-2); }
  .app-header > .brand { order: 0; }
  .app-header > .spacer { order: 1; }
  .app-header > .inline-form { order: 2; }
  .app-header::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .app-header > .page-switch { order: 4; margin-left: 0; }
  .app-header > .theme-switch { order: 5; margin-left: auto; }
  .page-switch-panel { min-width: 200px; }
}
/* Page headings with several actions (audit log) wrap instead of overflowing on phones. */
.page-head { flex-wrap: wrap; }
.page-head .card-actions { flex-wrap: wrap; }

/* ---- Profile button (reuses the glass dropdown) ----------------------------------------- */
.profile-switch { margin-left: 0; margin-right: var(--space-2); }
.profile-switch > summary { padding: 0 16px 0 12px; }
.profile-icon { flex: 0 0 auto; color: var(--brand); }
.profile-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.profile-panel { left: auto; right: 0; transform-origin: top right; min-width: 240px; }
.profile-meta { display: block; padding: 8px 12px 10px; font-size: var(--text-xs); color: var(--ink-soft); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
@media (max-width: 640px) {
  .profile-name { display: none; }            /* icon only on phones */
  .profile-switch > summary { padding: 0 12px; }
  .app-header > .profile-switch { order: 5; margin-left: auto; margin-right: 0; }
  .app-header > .theme-switch { order: 6; margin-left: var(--space-2); }
}

/* ---- Visibility toggle ------------------------------------------------------------------ */
.toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 4px 0; color: var(--ink-soft); font: inherit; font-size: var(--text-sm); }
.toggle-knob { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line); transition: background .18s ease; }
.toggle-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform .18s ease; }
.toggle.on .toggle-knob { background: var(--ok); }
.toggle.on .toggle-knob::after { transform: translateX(16px); }
.toggle.on { color: var(--ink); }
.toggle:focus-visible { outline: none; }
.toggle:focus-visible .toggle-knob { box-shadow: 0 0 0 4px var(--focus-ring); }

/* ---- TOTP enrolment --------------------------------------------------------------------- */
/* Deliberate exception to the tokens-only rule: a QR code must stay dark-on-light in every
   theme -- many scanners cannot read an inverted code. */
.qr { display: inline-block; padding: var(--space-3); border-radius: var(--radius); background: #fff; color: #000; margin: var(--space-2) 0 var(--space-3); }
.qr svg { display: block; width: 220px; height: 220px; }
.secret { font-size: var(--text-sm); letter-spacing: .08em; word-break: break-all; }
.steps { padding-left: 1.2em; margin: 0 0 var(--space-2); }
.grow { flex: 1 1 auto; }
.item-picks { max-height: 260px; overflow-y: auto; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }

/* Slim copyright strip (the kit's 16px padding plus <p> margins made it ~60px tall). */
.app-footer { padding: 6px var(--space-4) calc(6px + env(safe-area-inset-bottom, 0px)); line-height: 1.4; }
.app-footer p { margin: 0; }
.inline-fields + .item-picks { margin-top: var(--space-3); }