:root {
  --itm8-purple: #5F259F;
  --itm8-purple-dark: #4A1D7D;
  --itm8-purple-tint: #F3EEFA;
  --bs-primary: #5F259F;
  --border: #E5E7EB;
  --text: #1F2937;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #FFFFFF;
}

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-bar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--itm8-purple); color: #fff; padding: 0.6rem 1rem;
}
.app-logo { height: 24px; }
.app-title { font-weight: 600; }
.app-user { margin-left: auto; opacity: 0.9; font-size: 0.9rem; }
.app-body { display: flex; flex: 1; }
.app-nav {
  display: flex; flex-direction: column; width: 200px;
  border-right: 1px solid var(--border); padding: 0.5rem 0;
}
.nav-item {
  padding: 0.5rem 1rem; color: var(--text); text-decoration: none;
}
.nav-item:hover { background: var(--itm8-purple-tint); }
.nav-item.active {
  background: var(--itm8-purple-tint);
  border-left: 3px solid var(--itm8-purple); font-weight: 600;
}
.app-content { flex: 1; padding: 1.25rem 1.5rem; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
tr:hover td { background: var(--itm8-purple-tint); }

.btn { display: inline-block; border: 1px solid var(--border); background: #fff; padding: 0.35rem 0.75rem; border-radius: 4px; cursor: pointer; text-decoration: none; color: var(--text); font: inherit; line-height: 1.2; }
.btn-primary { background: var(--itm8-purple); border-color: var(--itm8-purple); color: #fff; }
.btn-primary:hover { background: var(--itm8-purple-dark); }
.btn-danger { background: #B00020; border-color: #B00020; color: #fff; }
.btn-danger:hover { background: #8E001A; }
/* The three status colours match the badges (.badge-ok / .badge-info / .badge-warn) so a
   button reads as "move to the state that looks like this". */
.btn-success { background: #1E7B3C; border-color: #1E7B3C; color: #fff; }
.btn-success:hover { background: #166030; }
.btn-info { background: #1A4E8A; border-color: #1A4E8A; color: #fff; }
.btn-info:hover { background: #143C6B; }
.btn-warning { background: #B36B00; border-color: #B36B00; color: #fff; }
.btn-warning:hover { background: #8A5300; }
.btn:disabled { background: #F3F4F6; border-color: var(--border); color: #9CA3AF; cursor: default; }
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
/* Row actions: fixed slots so the buttons line up down the whole table. */
.action-row { display: inline-flex; gap: 0.4rem; white-space: nowrap; align-items: center; }
.action-row .btn { width: 6rem; text-align: center; margin: 0; }
input, select { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; }
input:focus, select:focus, .btn:focus { outline: 2px solid var(--itm8-purple); outline-offset: 1px; }

.alert { padding: 0.6rem 0.9rem; border-radius: 4px; margin: 0.6rem 0; }
.alert-danger { background: #FDE7EA; color: #B00020; }
.alert-info { background: var(--itm8-purple-tint); color: var(--itm8-purple-dark); }
.alert-warning { background: #FFF4E5; color: #8A5300; }
.ms-2 { margin-left: 0.5rem; } .mb-0 { margin-bottom: 0; }
.p-4 { padding: 1.5rem; } .me-2 { margin-right: 0.5rem; }
.field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; max-width: 420px; }
.row-inline { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.muted { color: #6B7280; font-size: 0.85rem; }
/* The count is only half the answer - the tooltip names the profiles, so signal it is hoverable. */
.usage { cursor: help; text-align: center; }
/* Same idea as .usage, but on an inline badge rather than a whole cell: the result text is
   only half the answer - LastError lives in the title tooltip. */
.badge[title] { cursor: help; }
.mt-2 { margin-top: 0.5rem; }
.confirm-inline { display: inline-flex; gap: 0.35rem; align-items: center; }

.login-shell {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  min-height: 100vh; justify-content: center; background: var(--itm8-purple-tint);
}
.login-shell .app-logo { height: 32px; filter: invert(19%) sepia(59%) saturate(2792%) hue-rotate(258deg); }
.login-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 2rem 2.25rem; width: 320px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.login-card h1 { font-size: 1.15rem; margin: 0 0 1rem; }
.login-card label { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.8rem; font-size: 0.9rem; }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: 0.4rem; }
.login-card .error { color: #B00020; font-size: 0.9rem; }
/* Enrollment shows a QR + two long strings; give it a roomier card than the plain login. */
.login-card.enroll-card { width: 400px; max-width: calc(100vw - 2rem); }
.login-card .qr { display: flex; justify-content: center; margin: 1rem 0; }
/* height:auto + max-width lets the viewBox'd QR scale to fit and never clip. */
.login-card .qr svg { width: 240px; height: auto; max-width: 100%; }
.login-card .manual-entry { margin: 0.75rem 0 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
/* Fully stacked: label, then the code as a full-width block, then the Copy button on its own
   row. Sharing a flex row squeezed the long setup key/link into a sliver (one char per line). */
.secret-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; margin: 0.6rem 0; }
.secret-row .secret-label { font-size: 0.8rem; color: #6B7280; }
.secret-row code { display: block; width: 100%; box-sizing: border-box; font-size: 0.8rem; background: var(--itm8-purple-tint); padding: 0.35rem 0.45rem; border-radius: 4px; word-break: break-all; line-height: 1.5; }
.secret-row .copy-btn { align-self: flex-start; }

/* ── Shared visual system (2026-07 admin polish) ───────────────── */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.card > h3:first-child, .card > h1:first-child { margin-top: 0; }

.form-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 0.9rem;
  align-items: center; max-width: 640px;
}
.form-grid > label { font-weight: 500; }
.form-grid input:not([type=checkbox]), .form-grid select { width: 100%; }
.form-grid .full { grid-column: 1 / -1; }

.badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.8rem; line-height: 1.4; white-space: nowrap;
}
.badge-ok { background: #E7F6EC; color: #1E7B3C; }
.badge-warn { background: #FFF4E5; color: #8A5300; }
.badge-info { background: #E8F0FE; color: #1A4E8A; }

.table-clickable tbody tr { cursor: pointer; }
.table-clickable tbody tr:hover td { background: var(--itm8-purple-tint); }

.toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }

.row-disabled td:not(.action-cell) { opacity: 0.55; }

/* SyncFusion grids: Fluent 2 recoloured to the itm8 palette. The variables are the theme's
   own (see fluent2.css in the Syncfusion.Blazor.Themes package); the stylesheet is linked
   before theme.css so these win by order as well as specificity. The cell rules have to
   name .e-rowcell / .e-headercelldiv directly: Fluent 2 sets font-size and font-weight on
   those elements, and a rule on an ancestor can only be inherited, so it always loses. Row
   hover goes through the theme's own variable for the same reason - its hover chain sits at
   specificity 0,14,0 and no page-level selector beats it. */
:root {
  --color-sf-primary: var(--itm8-purple);
  --color-sf-primary-darker: var(--itm8-purple-dark);
  --color-sf-primary-lighter: var(--itm8-purple-tint);
  --color-sf-table-bg-color-hover: var(--itm8-purple-tint);
}
.admin-grid .e-grid { font-family: inherit; }
.admin-grid .e-grid .e-rowcell,
.admin-grid .e-grid .e-headercelldiv { font-size: 0.95rem; }
.admin-grid .e-grid .e-headercelldiv { font-weight: 600; }
.admin-grid .e-grid .e-row:hover .e-rowcell { cursor: pointer; }
/* Opacity dims the whole subtree, and ConfirmButton renders its modal inside the action cell -
   so the cell AdminGrid tags .action-cell is left alone: the buttons and their confirmation
   look the same on a disabled row as on any other. */
.admin-grid .e-grid .row-disabled .e-rowcell:not(.action-cell) { opacity: 0.55; }

.os-arch-card > h3:first-child { margin-top: 0; text-transform: uppercase; letter-spacing: 0.03em; color: var(--itm8-purple); }
.os-arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.os-arch-grid label { font-weight: 500; display: block; margin-bottom: 0.2rem; }
.os-arch-grid select { width: 100%; }
.mt-1 { margin-top: 0.25rem; }

/* Task-sequence / WIM-selector table text inputs fill their cell. */
td input[type=text], td input:not([type]) { width: 100%; }

/* A cell whose title tooltip carries the detail; the underline is the only cue it has one. */
td.hint { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Audit detail is one change per line; pre-line keeps the "\n" the service joined with. */
.audit-detail { white-space: pre-line; line-height: 1.35; }


/* The slowest step of a deployment, so the eye lands on it. */
tr.row-emphasis td { font-weight: 600; }

/* ConfirmButton's armed state. Fixed-position so it escapes the grid cell that clipped the old
   inline strip; the .action-row width rule is undone inside the dialog so Yes/No size to their text. */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(31, 41, 55, 0.45);
  display: flex; align-items: center; justify-content: center;
}
/* The dialog renders inside the row's .action-row, whose white-space: nowrap it would inherit -
   a long question then ran out past the box on one line. It resets to normal wrapping here. */
.confirm-dialog {
  background: #fff; border-radius: 6px; padding: 1.25rem 1.5rem;
  min-width: 320px; max-width: min(520px, calc(100vw - 2rem));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 1rem; line-height: 1.4; color: var(--text);
  white-space: normal; overflow-wrap: anywhere; text-align: left;
}
.confirm-text { margin: 0 0 1rem; }
.confirm-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.action-row .confirm-dialog .btn { width: auto; }

/* Editors wrap their form in a fieldset so one disabled attribute makes every control read-only;
   the element's own chrome is removed so nothing about the layout changes. */
fieldset.edit-scope { border: 0; padding: 0; margin: 0; min-width: 0; }