/*
 * Afizzbo provider portal — brand theme on top of Tabler v1.6.
 *
 * Tabler (public/vendor/tabler.min.css) supplies the component system: cards,
 * tables, buttons, badges, alerts, nav-tabs and form controls. This file only
 * overrides the product's tokens to match the Afizzbo application theme, plus the
 * few portal-specific pieces Tabler has no class for. Theme tokens use
 * light-dark(), so the colour scheme declared here decides which
 * palette resolves: light unless the visitor chooses otherwise.
 */
:root {
  color-scheme: light;
  --tblr-primary: light-dark(#087ab8, #59b9ee);
  --tblr-primary-rgb: 8, 122, 184;
  --tblr-link-color: light-dark(#087ab8, #78c9f5);
  --tblr-body-bg: light-dark(#f6f8fb, #111827);
  --tblr-body-color: light-dark(#182433, #e5eaf2);
  --tblr-border-color: light-dark(#e3e8ed, #37465a);
  --tblr-secondary: light-dark(#667382, #b2becf);
  --tblr-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --portal-ink: light-dark(#182433, #e5eaf2);
  --portal-muted: light-dark(#667382, #b2becf);
  --portal-line: light-dark(#e3e8ed, #37465a);
  --portal-surface: light-dark(#fff, #1f2937);
  --portal-surface-2: light-dark(#f7f9fb, #263243);
  --portal-success-ink: light-dark(#1c7a35, #7fe0a0);
  --portal-success-soft: light-dark(#e5f5ec, #1c3a2a);
  --portal-warning-ink: light-dark(#8a5a00, #f0b64a);
  --portal-warning-soft: light-dark(#fff4e0, #3a2f18);
  --portal-danger-ink: light-dark(#a32222, #f0928e);
}

.pool-worker-form { margin-top:1rem; }
.pool-customers { grid-column:1/-1; min-width:0; max-height:260px; overflow:auto; padding:1rem; border:1px solid var(--portal-line); border-radius:8px; }
.pool-customers legend { font-size:1rem; }
.pool-check { display:flex !important; flex-direction:row !important; align-items:center; gap:.65rem; }
.pool-check input[type=checkbox] { flex:none; width:1rem; height:1rem; margin:0; }
.pool-customer-row { display:grid; grid-template-columns:minmax(130px,1fr) minmax(120px,1fr) minmax(140px,1fr) 130px auto; align-items:end; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--portal-line); }
.pool-customer-row > * { min-width:0; overflow-wrap:anywhere; }
.pool-customer-row > strong, .pool-customer-row > span { align-self:center; }
.pool-customer-row .pool-check { min-height:2.5rem; margin:0; }
.pool-access-policy { padding:0 0 1.25rem; border-bottom:1px solid var(--portal-line); }
.pool-access-policy details { padding:.75rem 1rem; border:1px solid var(--portal-line); border-radius:8px; background:var(--portal-surface-2); }
.pool-access-policy summary { cursor:pointer; font-weight:600; }
.pool-access-policy .pool-worker-form { align-items:start; }
.pool-status-row { display:flex; flex-wrap:wrap; align-items:start; gap:1rem 2rem; padding:1rem 0; border-bottom:1px solid var(--portal-border,#dce2e9); }
.pool-status-row strong { overflow-wrap:anywhere; }
@media(max-width:900px) { .pool-customer-row { grid-template-columns:1fr 1fr; } }
@media(max-width:500px) { .pool-customer-row { grid-template-columns:1fr; } }
/* appearance.js sets data-theme on the root element from the visitor's stored
   preference, so the portal no longer inherits the device theme silently. Every
   token above still resolves through light-dark(); only the used colour scheme
   changes, which keeps this compatible with the portal's no-inline-style CSP. */
:root[data-theme='dark'] {
  color-scheme: dark;
}
:root[data-theme='system'] {
  color-scheme: light dark;
}
body {
  /* A column shell with a flexible main keeps the footer at the bottom of the
     viewport. Without it a short page ends at the footer and the rest of the
     screen shows the page background, which reads as a broken footer. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

/* ---- Portal chrome ---------------------------------------------------------*/
.top {
  min-height: 4rem;
  padding: 1rem max(1.5rem, calc((100vw - 1392px) / 2));
  border-bottom: 1px solid var(--portal-line);
  background: var(--portal-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.employee-nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; padding:.25rem max(1.5rem, calc((100vw - 1392px) / 2)); border-bottom:1px solid var(--portal-line); background:var(--portal-surface); }
.employee-nav a { display:inline-flex; align-items:center; min-height:44px; padding:.5rem .25rem; color:var(--portal-muted); text-decoration:none; border-bottom:2px solid transparent; font-weight:500; }
.employee-nav a[aria-current] { color:var(--tblr-link-color); border-bottom-color:var(--tblr-primary); }
.employee-nav a:focus-visible { outline:2px solid var(--tblr-primary); outline-offset:2px; }
.employee-attention .section-heading { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:1rem; }
.employee-attention h2, .employee-attention h3 { margin:0; }
.employee-follow-ups { margin:0; padding:0; border:0; }
.employee-follow-ups > summary { font-size:1.125rem; font-weight:600; padding:0; }
.employee-follow-ups > summary h2 { display:inline; font:inherit; }
.employee-follow-up-count { display:block; font-size:.875rem; font-weight:400; margin-top:.25rem; }
.employee-follow-ups[open] > .section-heading { margin-top:1rem; }
.employee-attention [data-status-refresh-feedback]:empty { display:none; }
.employee-task { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:1.5rem; padding:1rem 0; border-top:1px solid var(--portal-line); }
.employee-task > *, .employee-task li > * { min-width:0; overflow-wrap:anywhere; }
.employee-task h3 { font-size:1rem; }
.employee-task-customer a { display:inline-flex; align-items:center; min-height:44px; }
.employee-task ul { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.employee-task li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:1rem; }
.employee-task p { margin:.25rem 0 0; }
@media(max-width:700px) {
  .employee-nav { padding:0 1rem; gap:0 .75rem; flex-shrink:0; flex-wrap:nowrap; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .employee-nav a { flex-shrink:0; white-space:nowrap; }
  .employee-nav a:focus-visible { outline-offset:-2px; }
  .employee-task { grid-template-columns:1fr; gap:.25rem; }
  .employee-task li { grid-template-columns:1fr; gap:.5rem; }
  .employee-task li > a { justify-self:start; }
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--portal-ink);
  text-decoration: none;
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  height: 2.5rem;
  width: auto;
}
.brand { flex-shrink: 0; }
.brand span {
  display: block;
  font-size: 0.6875rem;
  line-height: 1rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--portal-muted);
}
.top form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.top form span {
  font-size: 0.875rem;
  color: var(--portal-muted);
}
/* Signed-in header actions sit together on the right, with the theme toggle
   available to signed-out visitors too. */
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* One icon button, like the application: it shows the mode it switches to. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .theme-sun {
  display: none;
}
.theme-toggle .theme-moon {
  display: block;
}
:root[data-theme-mode='dark'] .theme-toggle .theme-sun {
  display: block;
}
:root[data-theme-mode='dark'] .theme-toggle .theme-moon {
  display: none;
}
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
/* The live connection note is empty while updates work, so it must not reserve
   space above the page heading. */
[data-live-connection]:empty {
  display: none;
}
footer {
  flex: none;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid var(--portal-line);
  background: var(--portal-surface);
  font-size: 0.8125rem;
  color: var(--portal-muted);
}

/* ---- Portal layout blocks --------------------------------------------------*/
.card {
  padding: 1.25rem;
  margin: 1.25rem 0;
}
/* Consecutive fields set directly inside a card or alert (a one-time credential,
   for example) are not inside a form, so they need their own separation. */
.card > label + label,
.notice > label + label,
.alert > label + label {
  margin-top: 0.75rem;
}
.card > :first-child {
  margin-top: 0;
}
.card > :last-child {
  margin-bottom: 0;
}
.card:has(> .card-body) { padding: 0; }
.card > .card-body { padding: 1.25rem; min-width: 0; }
.grid > .card { margin: 0; }
.portal-page-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.page-heading-copy { min-width: 0; }
.page-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; }
.page-title { font-size: 1.5rem; line-height: 1.3; font-weight: 600; }
.portal-page-heading .page-subtitle { margin: .375rem 0 0; }
.heading,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fleet-filter-panel[hidden], .fleet-controls[hidden], .fleet-pagination[hidden], [data-workspace-panel][hidden] { display: none; }
.fleet-filter-toggle { display: none; }
.fleet-filter-toggle [hidden] { display: none; }
.fleet-filter-toggle svg { margin-left: auto; }
.fleet-filter-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.fleet-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: end;
  gap: .75rem;
  padding: 0 1.25rem 1.25rem;
}
.fleet-controls label, .fleet-pagination label { display: grid; gap: .35rem; min-width: 0; }
.fleet-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.fleet-pagination select { width: 6rem; }
.empty-filter { padding: 1rem 1.25rem; }
form[aria-busy="true"] { cursor: progress; }
@media (max-width: 1000px) { .fleet-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .fleet-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1rem 1rem; }
  .fleet-controls label:has([data-fleet-sort]), .fleet-controls > button { grid-column: 1 / -1; }
  .fleet-pagination { padding: 1rem; }
  .fleet-pagination > span { flex-basis: 100%; }
}
.fleet-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.fleet-title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}
.fleet-title h2 {
  margin: 0;
}
.fleet-title [data-filter-result] {
  color: var(--portal-muted);
  font-size: 0.8125rem;
}
.fleet-search {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  color: var(--portal-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.fleet-search input {
  min-height: 2.625rem;
}
.customer-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  text-decoration: none;
}
.customer-cell strong {
  color: var(--portal-ink);
  font-weight: 600;
}
.customer-cell small {
  color: var(--portal-muted);
  font-size: 0.8125rem;
}
.instance-url {
  display: inline-block;
  max-width: 22rem;
  overflow: hidden;
  color: var(--portal-muted);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.stack {
  display: grid;
  gap: 1rem;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.profile-card {
  margin: 0;
}
.profile-grid .profile-card { display: flex; flex-direction: column; }
.profile-grid .profile-card form { display: flex; flex-direction: column; flex: 1; }
.profile-grid .profile-card form > .btn { margin-top: auto; align-self: flex-start; }
.profile-card h3 {
  margin-top: 0;
}
.profile-card .muted {
  margin-top: -0.25rem;
}
.profile-security-card {
  margin-top: 1.25rem;
}
.profile-security-card .section-heading {
  align-items: flex-start;
}
.profile-mfa-disable {
  max-width: 34rem;
  margin-top: 1rem;
}
.manage-list {
  display: grid;
  gap: 0;
  margin-top: 1rem;
  border-top: 1px solid var(--portal-line);
}
.portal-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--portal-line);
}
.portal-user-row form {
  margin: 0;
}
.danger-card {
  border-color: color-mix(in srgb, var(--portal-danger-ink) 45%, var(--portal-line));
}
.danger-card h2 {
  color: var(--portal-danger-ink);
}
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.grid .actions {
  grid-column: 1 / -1;
}
/* Keep a vertical rhythm in forms that carry no layout class, so a field and the
   control beneath it never sit flush. */
form {
  display: grid;
  gap: 1rem;
  align-content: start;
}
form > .btn { justify-self: start; }
.btn {
  min-height: 2.5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
  white-space: normal;
  gap: .5rem;
}
.btn svg { flex-shrink: 0; }
.btn.theme-toggle { padding: 0; }
.btn-primary { color: light-dark(#fff, #102a3a); }
.btn-primary:hover, .btn-primary:focus-visible { color: light-dark(#fff, #102a3a); }
.btn-outline-danger { color: light-dark(#b42318, #ffa1a1); border-color: light-dark(#b42318, #ffa1a1); }
.btn-outline-danger:hover { color: #fff; background: #b42318; border-color: #b42318; }
.section-heading h2, .section-heading h3, .section-heading p { margin-bottom: 0; }
.section-heading { margin-bottom: 1rem; }
details > summary { cursor: pointer; line-height: 1.5; }
details[open] > summary { margin-bottom: 1rem; }
[data-portal-panel][hidden] {
  display: none;
}
.table-wrap {
  overflow-x: auto;
}
.fleet-table {
  min-width: 850px;
}
.containers-table {
  min-width: 960px;
}
.container-description {
  color: var(--portal-muted);
  min-width: 16rem;
}
.request {
  border-top: 1px solid var(--portal-line);
  padding: 0.75rem 0;
}
.request:first-of-type {
  border-top: 0;
}
.request-review { margin-top: 1rem; }
[data-review-actions][hidden], [data-review-closed][hidden] { display: none; }
[data-review-closed] { margin-top: 1rem; color: var(--portal-muted); }
.security-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 701px) and (max-width: 1000px) {
  .security-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.login {
  max-width: 26rem;
  margin: 3rem auto;
  padding: 1.75rem;
}
/* A quiet, scannable sign-in card: short intro, a divider, then the fields. */
.login .eyebrow {
  margin-bottom: 0.375rem;
}
.login-intro {
  margin: 0 0 1.5rem;
  color: var(--portal-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.login form {
  border-top: 1px solid var(--portal-line);
  padding-top: 1.5rem;
}
.login .stack {
  gap: 1.25rem;
}
.field-hint {
  display: block;
  margin: -0.5rem 0 0;
  color: var(--portal-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.login .btn {
  margin-top: 0.125rem;
}
details {
  border-top: 1px solid var(--portal-line);
  margin-top: 1rem;
  padding-top: 1rem;
}
details:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* ---- Portal tabs: Tabler .nav-tabs, kept scrollable ------------------------*/
.provisioning-host, .provisioning-job {
  padding: 1rem 0;
  border-bottom: 1px solid var(--tblr-border-color);
  min-width: 0;
  overflow-wrap: anywhere;
}
.provisioning-host:last-child, .provisioning-job:last-child { border-bottom: 0; }
.provisioning-job { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.provisioning-job > p { grid-column: 1 / -1; }
@media (max-width: 700px) { .provisioning-job { grid-template-columns: 1fr; } }
.portal-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  margin-bottom: 1.25rem;
}
.portal-tabs .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--portal-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .625rem 1rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.portal-tabs .nav-link[aria-selected='true'] {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-primary);
  background: transparent;
}

/* ---- Portal stat cards -----------------------------------------------------*/
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
}
.stats article {
  padding: 1.25rem;
  border: 1px solid var(--portal-line);
  border-radius: var(--tblr-border-radius);
  background: var(--portal-surface);
  box-shadow: var(--tblr-shadow-card);
}
.stats span,
.stats small {
  display: block;
  color: var(--portal-muted);
}
.stats span {
  font-size: 0.875rem;
  font-weight: 500;
}
.stats strong {
  display: block;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  margin: 0.25rem 0;
  color: var(--portal-ink);
}
.stats .badge {
  display: inline-block;
}

/* ---- Portal empty state ----------------------------------------------------*/
.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--portal-muted);
  background: var(--portal-surface-2);
  border: 1px dashed var(--portal-line);
  border-radius: var(--tblr-border-radius);
}
.empty h3 {
  color: var(--portal-ink);
}
.empty-subtitle {
  color: var(--portal-muted);
  margin: 0;
}
.page-subtitle {
  color: var(--portal-muted);
}

/* ---- Badge ink: Tabler metrics, accessible product colours -----------------*/
.badge.good {
  color: var(--portal-success-ink);
  background: var(--portal-success-soft);
}
.badge.attention {
  color: var(--portal-warning-ink);
  background: var(--portal-warning-soft);
}
.badge.neutral {
  color: var(--portal-muted);
  background: var(--portal-surface-2);
}

/* ---- Notices: Tabler alert surfaces, readable body ink ---------------------
   Tabler paints the whole alert in the message hue, which is fine for a one-line
   message but fails contrast (and reads oddly) around the portal's labels and
   explanatory copy. Keep the tinted surface and border, use body ink, and reserve
   the hue for the error variant's text. */
.notice {
  color: var(--portal-ink);
}
.notice h2,
.notice h3 {
  color: var(--portal-ink);
}
.notice.error {
  color: var(--portal-danger-ink);
}

/* ---- Form metrics for the portal's label-wrapped controls ------------------*/
[data-ci-fixed-address][hidden] { display: none; }
label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--portal-ink);
  min-width: 0;
}
input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
select,
textarea {
  width: 100%;
  padding: 0.5625rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: var(--portal-ink);
  background-color: var(--portal-surface);
  border: 1px solid var(--portal-line);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-input);
}
select { padding-right: 2.5rem; }
label > small, .policy-field > small { color: var(--portal-muted); font-weight: 400; font-size: .8125rem; line-height: 1.5; }
input::placeholder {
  color: var(--portal-muted);
  opacity: 1;
}
input[readonly] {
  background-color: var(--portal-surface-2);
  box-shadow: none;
}
input:not([type='hidden']):not([type='checkbox']):not([type='radio']):focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--tblr-primary) 60%, var(--portal-surface));
  outline: 2px solid var(--tblr-primary);
  outline-offset: 2px;
  box-shadow: var(--tblr-shadow-input, none);
}
/* iOS zooms the page when a focused control is under 16px. Keep the desktop
   metrics above and enlarge the controls only where that bites. */
@media (max-width: 900px) {
  input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px;
  }
}
.policy-field { display: grid; align-content: start; gap: .375rem; }
.quantity-input { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .5rem; }
.quantity-input > * { min-width: 0; }
.policy-features { grid-column: 1 / -1; padding: 1rem; border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
.policy-features legend { float: none; width: auto; padding: 0 .25rem; font-size: .875rem; font-weight: 600; }
.policy-notes { grid-column: 1 / -1; font-size: .8125rem; }
.policy-notes p { margin: 0 0 .5rem; }
.grid > .check, .grid > .pool-check { align-self: end; min-height: 2.5rem; align-items: center; margin: 0; }
.check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.check input {
  margin-top: 0.125rem;
  flex: none;
}

/* ---- Misc ------------------------------------------------------------------*/
.eyebrow {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--portal-muted);
  margin: 0;
}
.authenticator-qr {
  display: block;
  width: 20rem;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--portal-line);
  border-radius: var(--tblr-border-radius);
  padding: 0.5rem;
  image-rendering: pixelated;
}
.authenticator-qr[hidden] {
  display: none;
}
.policy-diff caption {
  caption-side: top;
  text-align: left;
  font-weight: 500;
  color: var(--portal-muted);
  margin: 0.75rem 0;
}
.policy-diff { table-layout: fixed; width: 100%; }
.policy-diff th, .policy-diff td { overflow-wrap: anywhere; white-space: pre-line; vertical-align: top; }
.policy-diff th:first-child { width: 30%; }
.policy-diff tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) {
  .policy-diff, .policy-diff tbody { display: block; }
  .policy-diff caption { display: block; width: 100%; white-space: normal; }
  .policy-diff thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .policy-diff tr { display: block; border-top: 1px solid var(--portal-line); padding: .75rem 0; }
  .policy-diff tbody th:first-child { display: block; width: 100%; padding: 0 0 .5rem; border: 0; }
  .policy-diff td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; padding: .5rem 0; border: 0; }
  .policy-diff td::before { content: attr(data-label); font-weight: 500; color: var(--portal-muted); }
  .policy-diff td > span { min-width: 0; }
}

@media (max-width: 700px) {
  .top { padding: .75rem 1rem; }
  .top form {
    justify-content: space-between;
    width: 100%;
  }
  .top form span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  main {
    padding: 1rem;
  }
  .stats,
  .grid {
    grid-template-columns: 1fr;
  }
  .fleet-toolbar {
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-bottom: .75rem;
  }
  .stats {
    gap: 0.625rem;
  }
  .stats article {
    padding: 1rem;
  }
  .card {
    padding: 1rem;
  }
  .card.employee-attention { padding:.5rem 1rem; margin:.5rem 0; }
  .card:has(> .fleet-toolbar) { margin-top:.75rem; }
  .card > .card-body { padding: 1rem; }
  .portal-page-heading { align-items: flex-start; flex-wrap: wrap; margin-bottom:.75rem; }
  .page-heading-actions { flex-shrink: 1; }
  .login {
    margin: 0 auto;
  }
  .actions form,
  .actions .btn,
  form > .btn,
  .profile-grid .profile-card form > .btn {
    width: 100%;
  }
  .actions > .btn { flex: 1 1 auto; }
  .policy-features { grid-template-columns: 1fr; }
  .portal-user-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.625rem;
  }
  .portal-user-row form,
  .portal-user-row button {
    width: 100%;
  }
  .portal-tabs .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Contain content at its component boundary, without clipping the page. */
main, .top, .top-actions, .brand, .card, .grid > *, .profile-grid > *,
.portal-user-row > *, .table-wrap, .page-header .col { min-width: 0; }
.card, .page-title, .page-subtitle, .portal-user-row, .account-email { overflow-wrap: anywhere; }
.brand img { max-width: 100%; object-fit: contain; }
.top { flex-wrap: wrap; flex-shrink: 0; }
:root[data-theme-mode='dark'] .brand img { background: #fff; border-radius: .25rem; padding: .25rem; }
.top-actions { margin-left: auto; position: relative; }
.account-menu { position: static; margin: 0; padding: 0; border: 0; }
.account-menu-content {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20;
  width: min(20rem, calc(100vw - 2rem)); padding: 1rem;
  display: grid; gap: .75rem; background: var(--portal-surface);
  border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-card);
  max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain;
}
.account-menu-content form, .account-menu-content button { width: 100%; }
.remove-user { margin: 0; padding: 0; border: 0; max-width: 100%; }
.remove-user form { margin-top: 1rem; max-width: 26rem; }
.form-error { grid-column: 1 / -1; }
.form-wide { grid-column: 1 / -1; margin: 0; }
.mobile-section-nav { display: none; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.table-scroll-hint { color: var(--portal-muted); font-size: .8125rem; }
@media (max-width: 700px) {
  .brand { gap: .5rem; }
  .brand img { height: 2rem; }
  .brand span { display: none; }
  .top { flex-direction: row; align-items: center; }
  .top-actions, .top { gap: .5rem; }
  .btn, .theme-toggle { min-height: 44px; }
  .theme-toggle { min-width: 44px; }
  [data-portal-enhanced] .mobile-section-nav { display: flex; margin: .75rem 0; }
  [data-portal-enhanced] .mobile-section-nav { flex-direction:row; align-items:center; gap:.75rem; }
  .mobile-section-nav select { flex:1; min-width:0; }
  [data-portal-enhanced] .portal-tabs { display: none; }
  :is(.fleet-table, .mobile-table) { min-width: 0; display: block; }
  :is(.fleet-table, .mobile-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(.fleet-table, .mobile-table) tbody { display: grid; gap: 1rem; }
  :is(.fleet-table, .mobile-table) tr { display: block; border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); padding: .75rem; }
  :is(.fleet-table, .mobile-table) tr[hidden] { display: none; }
  :is(.fleet-table, .mobile-table) td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .75rem; padding: .5rem 0 !important; border: 0; white-space: normal; overflow-wrap: anywhere; }
  :is(.fleet-table, .mobile-table) td::before { content: attr(data-label); color: var(--portal-muted); font-weight: 500; }
  :is(.fleet-table, .mobile-table) td > * { min-width: 0; justify-self: start; }
  .mobile-table tbody th { display: block; padding: .25rem 0 .75rem; border: 0; overflow-wrap: anywhere; white-space: normal; }
  .mobile-table tbody th small { display: block; color: var(--portal-muted); font-weight: 400; }
  .mobile-table .container-description { min-width: 0; grid-template-columns: 1fr; gap: .25rem; }
  .mobile-table .badge { white-space: normal; text-align: left; }
  .fleet-table .instance-url { white-space: normal; overflow: visible; max-width: 100%; }
  .fleet-filter-toggle { display: flex; width: calc(100% - 2rem); margin: 0 1rem .5rem; }
  .stats { margin: 1rem 0; }
  .stats:not(.stats-counts) article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; padding: .75rem 1rem; }
  .stats:not(.stats-counts) strong { grid-column: 2; grid-row: 1; margin: 0; }
  .stats:not(.stats-counts) small { grid-column: 1 / -1; }
  .stats.stats-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin:.75rem 0; }
  .stats-counts article { padding: .625rem; min-width: 0; overflow-wrap: anywhere; }
  .stats-counts article { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.25rem; padding:.5rem .625rem; }
  .stats-counts span { font-size: .75rem; }
  .stats-counts strong { font-size: 1.125rem; line-height:1.2; margin:0; }
  .stats-counts a { font-size: .8125rem; }
}
@media (max-width: 900px), (pointer: coarse) {
  input:not([type='hidden']):not([type='checkbox']):not([type='radio']), select, textarea { font-size: 16px !important; line-height: 1.5 !important; min-height: 44px; }
  .btn, .theme-toggle, main summary { min-height: 44px; }
  .brand { min-height: 44px; }
  main a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
  main summary:not(.btn):not(.card-body) { padding-block: .6875rem; }
  main .employee-follow-ups > summary { padding-block:0; }
}
@media (max-width: 360px) { .brand img { max-width: 104px; height: auto; } }
.infrastructure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.ci-setup .section-heading { gap: 1rem; flex-wrap: wrap; }
.ci-setup h2,.ci-setup h4 { margin: 0 0 .375rem; }
.ci-setup-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; padding: 0; margin: 1.25rem 0; list-style: none; }
.ci-setup-steps li { padding: 1rem; background: var(--portal-surface-2); border-radius: var(--tblr-border-radius); }
.ci-setup-steps span { display: block; color: var(--portal-muted); margin-top: .375rem; }
.ci-setup-attempt { border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); padding: 1rem; margin-block: 1rem; overflow-wrap: anywhere; }
.ci-setup-form { max-width: 52rem; }
.ci-setup-events { padding: 0; list-style: none; }
.ci-setup-events li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-block: .375rem; }
.ci-setup-events time { color: var(--portal-muted); }
.ci-setup-controls { margin-block: .75rem; }
.ci-setup-controls form { max-width: 24rem; }
.ci-retirement .ci-setup-controls { border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); padding: 1rem; overflow-wrap: anywhere; scroll-margin-top: 1rem; }
.ci-retirement fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.ci-retirement fieldset:disabled { opacity: .65; }
.ci-retirement code { overflow-wrap: anywhere; }
@media (max-width: 700px) { .ci-setup-steps { grid-template-columns: 1fr; } }
.infrastructure-host { padding: 1rem; border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); min-width: 0; }
.infrastructure-host .section-heading { align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.infrastructure-host h3 { margin: .25rem 0; }
.infrastructure-host p { margin-bottom: .75rem; }
.infrastructure-host code { white-space: normal; overflow-wrap: anywhere; }
.infrastructure-report-time { font-size: .8125rem; color: var(--portal-muted); }
.infrastructure-refresh-feedback { font-size: .8125rem; margin-top: -.25rem; }
.infrastructure-guidance { padding: .875rem 1rem; margin-block: 1rem; border: 1px solid var(--portal-line); border-left-width: 3px; border-radius: var(--tblr-border-radius); background: var(--portal-surface-2); overflow-wrap: anywhere; }
.infrastructure-guidance.attention { border-left-color: var(--portal-warning-ink); background: var(--portal-warning-soft); }
.infrastructure-guidance.good { border-left-color: var(--portal-success-ink); }
.infrastructure-guidance h4 { margin: 0 0 .375rem; font-size: .9375rem; font-weight: 600; }
.infrastructure-guidance p { margin: .375rem 0 0; font-size: .8125rem; line-height: 1.6; }
.infrastructure-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem 1rem; margin: 0; }
.infrastructure-facts dt { color: var(--portal-muted); font-size: .8125rem; font-weight: 400; }
.infrastructure-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.infrastructure-wide { grid-column: 1 / -1; }
.infrastructure-shortcuts { margin-block: 0 1.25rem; }
#ci-setup-heading,#ci-retirement-heading { scroll-margin-top: 1rem; }
.infrastructure-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; border-block: 1px solid var(--portal-line); margin-block: 1rem; padding-block: 1rem; }
.infrastructure-resources dt { margin: 0; font-size: .8125rem; font-weight: 400; color: var(--portal-muted); }
.infrastructure-resources dd { margin: .25rem 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.infrastructure-history,.infrastructure-log { border-top: 1px solid var(--portal-line); margin-top: 1.25rem; padding-top: 1rem; }
.infrastructure-events { list-style: none; padding: 0; max-height: 24rem; overflow: auto; }
.infrastructure-events li { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--portal-line); }
.infrastructure-events time { font-size: .8125rem; color: var(--portal-muted); }
.infrastructure-jobs td { overflow-wrap: anywhere; }
.infrastructure-job-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .625rem; }
.infrastructure-job-list details { border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); }
.infrastructure-job-list summary { display: grid; grid-template-columns: 5.5rem minmax(7rem,.8fr) minmax(10rem,1.5fr) auto; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .875rem 1rem; cursor: pointer; list-style: none; font-size: .875rem; }
.infrastructure-job-list summary::marker { content: ''; }
.infrastructure-job-list summary::-webkit-details-marker { display: none; }
.infrastructure-job-list summary strong::before { content: '›'; display: inline-block; margin-right: .5rem; }
.infrastructure-job-list details[open] summary strong::before { transform: rotate(90deg); }
.infrastructure-job-list summary:hover { background: var(--portal-surface-2); }
.infrastructure-job-list summary code { overflow-wrap: anywhere; white-space: normal; }
.infrastructure-job-body { border-top: 1px solid var(--portal-line); padding: 0 1rem 1rem; }
.infrastructure-job-body h4 { margin-top: 1rem; font-size: .875rem; }
.infrastructure-job-body .infrastructure-facts { margin-bottom: 1rem; }
.infrastructure-job-body code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) { .infrastructure-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .infrastructure-resources { grid-template-columns: 1fr; } .infrastructure-events li { grid-template-columns: 1fr; gap: .25rem; } .infrastructure-job-list summary { grid-template-columns: minmax(0,1fr) auto; gap: .5rem; } .infrastructure-job-list summary code { grid-row: 2; } .infrastructure-job-list summary .badge { grid-column: 2; grid-row: 1; } .infrastructure-job-list summary > span:not(.badge) { grid-column: 1/-1; grid-row: 3; color: var(--portal-muted); } .infrastructure-facts { grid-template-columns: 1fr; } }
.media-filters { display: grid; grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(9rem, 1fr)); align-items: end; gap: 1rem; margin-block: 1rem; }
.workflow-filter-shortcuts { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .75rem 1rem; }
.workflow-filter-shortcuts .btn { min-height: 2.75rem; white-space: normal; }
.workflow-advanced-filters { margin-bottom: 1rem; border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); padding: .625rem .875rem; }
.workflow-advanced-filters > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 2.75rem; cursor: pointer; font-weight: 500; }
.workflow-advanced-filters > summary::before { content: '›'; font-size: 1.25rem; }
.workflow-advanced-filters[open] > summary::before { transform: rotate(90deg); }
.workflow-advanced-filters > summary:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: var(--tblr-border-radius); }
.workflow-advanced-filters .support-filters { margin-top: .75rem; margin-bottom: .25rem; }
.workflow-triage-controls { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.workflow-triage-controls label, .workflow-triage-pagination label { display: grid; gap: .4rem; min-width: 0; margin: 0; }
.workflow-triage-controls input, .workflow-triage-controls select, .workflow-triage-pagination select { min-width: 0; width: 100%; }
.workflow-triage-controls > p { grid-column: 1 / -1; margin: 0; font-size: .8125rem; }
.workflow-triage-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
.workflow-triage-pagination > p { margin: 0; }
.workflow-retained-request { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; border-left: 3px solid var(--tblr-primary); padding: .75rem; margin-top: 1rem; background: var(--portal-surface-2); }
.workflow-retained-request > p { flex: 1 1 18rem; margin: 0; }
.workflow-retained-request[hidden] { display: none; }
.workflow-triage-controls[hidden], .workflow-triage-pagination[hidden], .workspace-request[hidden] { display: none; }
@media (max-width: 750px) { .workflow-triage-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workflow-triage-controls > label:first-child { grid-column: 1 / -1; } .workflow-triage-controls > button { justify-self: start; } }
@media (max-width: 380px) { .workflow-triage-controls { grid-template-columns: 1fr; } .workflow-triage-pagination .actions { width: 100%; } }
.media-filter-actions { grid-column: 1 / -1; display: flex; gap: .75rem; flex-wrap: wrap; }
.media-library-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; margin-block: 1.5rem; }
.media-library-stats article { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; background: var(--portal-surface-2); border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); min-width: 0; overflow-wrap: anywhere; }
.media-library-stats strong { font-size: 1.5rem; }
.media-conversion-warning { color: var(--portal-danger-ink); }
.media-summary, .media-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-block: 1rem; }
.media-pagination { justify-content: space-between; }
.media-filename { display: block; font-size: .8125rem; margin-top: .25rem; overflow-wrap: anywhere; }
.media-table { table-layout: fixed; min-width: 800px; }
.media-table th:first-child { width: 27%; }
.media-table th:nth-child(4) { width: 26%; }
.media-table th:last-child { width: 9rem; }
.media-table td:last-child .btn { white-space: nowrap; }
.media-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.media-locations summary { color: var(--tblr-primary); cursor: pointer; }
.media-locations dl { margin: .5rem 0 0; }
.media-locations dt { font-size: .8125rem; margin-top: .75rem; }
.media-locations dd { margin: .25rem 0; }
.media-locations code, .media-management code { display: block; overflow-wrap: anywhere; white-space: normal; }
.media-management { border-top: 1px solid var(--portal-line); padding-top: 1.5rem; margin-top: 1.5rem; }
.media-action-grid, .media-customers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.media-action-card, .media-customer { min-width: 0; padding: 1rem; border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); }
.media-customer { display: flex !important; align-items: start !important; flex-direction: column; gap: .5rem; }
.media-pending { padding: 1rem; background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); }
@media (max-width: 800px) {
  .media-library-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-filters label:first-of-type { grid-column: 1 / -1; }
  .media-filter-actions { grid-column: 1 / -1; }
  .media-action-grid, .media-customers { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .media-table { min-width: 0; display: block; table-layout: auto; }
  .media-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .media-table tbody { display: grid; gap: 1rem; }
  .media-table tr { display: block; padding: .75rem; border: 1px solid var(--portal-line); border-radius: var(--tblr-border-radius); }
  .media-table td { display: block; padding: .5rem 0 !important; border: 0; }
  .media-table td::before { content: attr(data-label); display: block; color: var(--portal-muted); font-size: .75rem; margin-bottom: .25rem; }
}