/* ============================================================================
   Admin module stylesheet
   ----------------------------------------------------------------------------
   PactaHealth.Wasm.Admin is a lazy-loaded RCL (BlazorWebAssemblyLazyLoad in
   PactaHealth.Wasm.Carbon.csproj). Before this file existed the module owned no
   wwwroot at all, so every global class it used had to be hand-added to the
   host's app.css — a project Admin does not own. That is exactly why ~15 class
   families (crud-form*, carbon-table-wrapper, carbon-admin-page, the KPI and
   chip vocabularies) were referenced by markup and defined nowhere in the repo.

   Ownership rule: classes used by more than one Admin component belong here.
   Single-component styling stays in that component's scoped .razor.css.

   Served from _content/PactaHealth.Wasm.Admin/admin-module.css and linked from
   the host index.html alongside erp-module.css. The link is eager even though
   the assembly is lazy; the sheet is a few KB, same trade-off erp-module.css
   already makes.

   Tokens follow app.css (--cds-* Carbon tokens with literal fallbacks, --radius-*
   scale). FossilClassDriftTests enumerates every .css under Frontend/, so
   definitions added here satisfy the guardrail automatically.

   ── Shadow DOM caveat ──────────────────────────────────────────────────────
   Several classes below are applied to Carbon wrapper components
   (<CarbonTextInput class="carbon-input">, <CarbonSelect class="carbon-select">).
   Those land on the <cds-*> custom element; the real <input> lives inside its
   shadow root and is unreachable from here. Rules for those classes are
   therefore restricted to HOST-BOX properties — inline-size, flex, display,
   margin. Never put font, color, border or padding on them: it will silently
   do nothing. See reference_carbon_wrapper_attr_mapping.
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────────
   The admin counterpart to .carbon-page (app.css). Admin pages render inside
   the same shell as clinical pages, so the measure and padding rhythm match
   .carbon-page exactly rather than inventing a second page scale. */
.carbon-admin-page {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 100rem;
  padding: 0.75rem 2rem 3rem;
}

/* Vertical rhythm between an admin page's top-level blocks. Sibling-margin
   only (no flex/grid) so existing page flow is untouched — same approach as
   .carbon-admin-content in app.css. */
.carbon-admin-page > * + * {
  margin-block-start: var(--cds-spacing-06, 1.5rem);
}

/* Supporting copy under a page or section heading. */
.carbon-page__description {
  color: var(--cds-text-secondary, #525252);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-block: 0 var(--cds-spacing-05, 1rem);
  max-inline-size: 60ch;
}

/* ── CRUD forms ─────────────────────────────────────────────────────────────
   The shared anatomy of every admin editor dialog: an EditForm root
   (.crud-form) wrapping a responsive field grid (.crud-form__grid) of stacked
   field cells (.crud-form__field), each holding a Carbon input plus its
   <ValidationMessage>. Roughly 125 markup sites; previously undefined, which
   collapsed every editor into an unstyled vertical run. */
.crud-form {
  display: block;
  inline-size: 100%;
}

.crud-form__grid {
  display: grid;
  gap: var(--cds-spacing-05, 1rem);
  /* auto-fit rather than a fixed column count: dialogs range from narrow
     (two short fields) to wide (accounting panels), and the grid has to work
     inside CrudDialogShell at every dialog size without per-dialog overrides. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.crud-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02, 0.25rem);
  min-inline-size: 0;
}

/* Full-bleed field (textareas, pickers, anything that needs the whole row). */
.crud-form__field--full {
  grid-column: 1 / -1;
}

/* Validation text emitted by <ValidationMessage>, which renders
   .validation-message inside the field cell. */
.crud-form__field .validation-message,
.crud-form__field .field-note--error {
  color: var(--cds-text-error, #da1e28);
  font-size: 0.75rem;
  line-height: 1.34;
}

/* Standing explanation of what a field means or why it is required. Distinct from
   .validation-message: that appears only after a failed submit and is red; this is always
   visible and secondary. Matches Carbon's helper-text scale so the two read as one system. */
.crud-form__help {
  margin: 0;
  color: var(--cds-text-secondary, #525252);
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
  line-height: var(--cds-helper-text-01-line-height, 1.34);
}

/* Settings pages use the same anatomy under a different root name. */
.settings-form,
.user-carbon-admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-05, 1rem);
  inline-size: 100%;
}

.user-carbon-admin-layout {
  display: grid;
  gap: var(--cds-spacing-06, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.user-carbon-admin-footer {
  border-block-start: 1px solid var(--cds-border-subtle-01, #e0e0e0);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03, 0.5rem);
  justify-content: flex-end;
  margin-block-start: var(--cds-spacing-05, 1rem);
  padding-block-start: var(--cds-spacing-05, 1rem);
}

/* Helper/hint text under a control. Mirrors Carbon's own label-description,
   which admin markup also references directly by its cds-- name. */
.field-note,
.cds--label-description {
  color: var(--cds-text-secondary, #525252);
  display: block;
  font-size: 0.75rem;
  line-height: 1.34;
}

/* Filter bar row — inline controls that wrap on narrow viewports. */
.filters-row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-04, 0.75rem);
}

/* Host-box sizing for Carbon wrapper components. See the shadow DOM caveat at
   the top of this file — layout only, never typography or borders. */
.carbon-input,
.carbon-select,
.field-control,
.f-input {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}

/* Inside a wrapping filter row these should size to content, not stretch. */
.filters-row .carbon-input,
.filters-row .carbon-select,
.filters-row .field-control,
.filters-row .f-input,
.carbon-filter-bar .carbon-select,
.carbon-filter-bar .field-control {
  flex: 0 1 14rem;
  inline-size: auto;
}

/* Native checkbox rows (AdminImportsPage and friends use a plain <label>
   rather than <CarbonCheckbox>). */
.carbon-checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  gap: var(--cds-spacing-03, 0.5rem);
  line-height: 1.4;
}

/* ── Tables ─────────────────────────────────────────────────────────────────
   Admin governance pages render native <table class="carbon-table"> inside a
   .carbon-table-wrapper scroll container. app.css only styles .carbon-table
   when nested under .carbon-data-table, so these tables had no cell padding or
   header treatment at all. Rules below intentionally mirror the
   .carbon-data-table .carbon-table block in app.css so the two paths look
   identical; keep them in sync if that block changes.

   Distinct from .carbon-table-scroll (app.css), which exists to defeat the
   phantom second scrollbar on Carbon's <cds-table> shadow ::part(content).
   Native tables have no shadow root, so this wrapper stays simple. */
.carbon-table-wrapper {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: clip;
}

.carbon-table-wrapper .carbon-table {
  border-collapse: collapse;
  inline-size: 100%;
  table-layout: auto;
}

.carbon-table-wrapper .carbon-table th,
.carbon-table-wrapper .carbon-table td {
  border-block-end: 1px solid var(--cds-border-subtle-01, #e0e0e0);
  line-height: 1.4;
  padding: 0.75rem 1rem;
  text-align: start;
  vertical-align: top;
}

.carbon-table-wrapper .carbon-table thead th {
  background: var(--cds-layer-accent-01, #e0e0e0);
  color: var(--cds-text-secondary, #525252);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.carbon-table-wrapper .carbon-table tbody td {
  font-size: 0.875rem;
}

/* ── Row actions & action bars ──────────────────────────────────────────────
   Flat icon buttons per the row-actions convention (CarbonIconAction inside
   CarbonRowActions) — no overflow menus. */
.row-actions {
  align-items: center;
  display: flex;
  gap: var(--cds-spacing-02, 0.25rem);
}

.row-actions-end {
  justify-content: flex-end;
}

/* Toolbar strip above a table or panel body. */
.carbon-action-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03, 0.5rem);
  justify-content: flex-end;
}

.carbon-icon-btn {
  flex: 0 0 auto;
}

/* ── Status & metric primitives ─────────────────────────────────────────────
   Tone modifiers layered onto .carbon-stat-chip (app.css). That base defines
   the pill geometry; these supply only the tone, matching the existing
   .carbon-stat-chip--success colour-mix recipe. chip-success is included
   because markup selects it from Razor expressions, which the class-attribute
   scan does not see. */
.chip-info {
  background: color-mix(in srgb, var(--cds-support-info, #0043ce) 14%, var(--cds-layer-01, #ffffff));
  color: var(--cds-text-primary, #161616);
}

.chip-warn {
  background: color-mix(in srgb, var(--cds-support-warning, #f1c21b) 30%, var(--cds-layer-01, #ffffff));
  color: var(--cds-text-primary, #161616);
}

.chip-primary {
  background: color-mix(in srgb, var(--cds-interactive, #0f62fe) 14%, var(--cds-layer-01, #ffffff));
  color: var(--cds-text-primary, #161616);
}

.chip-success {
  background: color-mix(in srgb, var(--cds-support-success, #198038) 16%, var(--cds-layer-01, #ffffff));
  color: var(--cds-text-primary, #161616);
}

/* KPI figure inside a CarbonTile. */
.carbon-metric {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02, 0.25rem);
}

.carbon-metric__label {
  color: var(--cds-text-secondary, #525252);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carbon-metric__value {
  color: var(--cds-text-primary, #161616);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.2;
}

/* Determinate progress track. Import pages set the fill inline. */
.carbon-progress {
  border-radius: var(--radius-full);
  inline-size: 100%;
  overflow: hidden;
}

/* Lightweight inline message. Not <CarbonAlert> — these are single-line
   failure strings rendered in place inside a panel. */
.carbon-inline-notification {
  border-inline-start: 3px solid var(--cds-border-subtle-01, #e0e0e0);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-block: var(--cds-spacing-03, 0.5rem);
  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
}

.carbon-inline-notification--error {
  background: color-mix(in srgb, var(--cds-support-error, #da1e28) 8%, var(--cds-layer-01, #ffffff));
  border-inline-start-color: var(--cds-support-error, #da1e28);
  color: var(--cds-text-error, #da1e28);
}

.text-danger {
  color: var(--cds-text-error, #da1e28);
}

.carbon-link {
  color: var(--cds-link-primary, #0f62fe);
  text-decoration: underline;
  text-underline-offset: 0.125em;
}

.carbon-link:hover {
  color: var(--cds-link-primary-hover, #0043ce);
}

/* Accessible-only heading text (AdminHubGrid group labels). */
.carbon-sr-only {
  block-size: 1px;
  border: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/* ── Import run log ─────────────────────────────────────────────────────────
   AdminImportsPage streams run output; monospace + scroll cap so a long run
   cannot push the page height without bound. */
.carbon-admin-log {
  background: var(--cds-layer-02, #f4f4f4);
  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
  border-radius: var(--radius-md);
  max-block-size: 20rem;
  overflow-y: auto;
  padding: var(--cds-spacing-03, 0.5rem);
}

.carbon-admin-log-row {
  font-family: var(--cds-code-01-font-family, "IBM Plex Mono", monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  padding-block: 0.125rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Table cell utilities ───────────────────────────────────────────────────
   Passed as CellClass/HeaderClass into the templated data-table components, so
   they reach the DOM without ever appearing in a class="" attribute — which is
   why they went undefined. Money and quantity columns across the pricing,
   catalog and inventory pages were left start-aligned. */
.text-end {
  text-align: end;
}

.text-nowrap {
  white-space: nowrap;
}

/* ── Toggle switch ──────────────────────────────────────────────────────────
   A <label> wrapping a native checkbox plus a .sw-thumb track. Used by the form
   builder, notification preferences and billing hold policies. */
.sw-wrap {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: var(--cds-spacing-03, 0.5rem);
}

.sw-thumb {
  background: var(--cds-toggle-off, #8d8d8d);
  block-size: 1rem;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
  inline-size: 2rem;
  position: relative;
  transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.sw-thumb::after {
  background: var(--cds-icon-on-color, #ffffff);
  block-size: 0.75rem;
  border-radius: var(--radius-full);
  content: "";
  inline-size: 0.75rem;
  inset-block-start: 0.125rem;
  inset-inline-start: 0.125rem;
  position: absolute;
  transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.sw-wrap input:checked + .sw-thumb {
  background: var(--cds-support-success, #198038);
}

.sw-wrap input:checked + .sw-thumb::after {
  transform: translateX(1rem);
}

.sw-wrap input:focus-visible + .sw-thumb {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: 1px;
}

/* ── Patient identity strip ─────────────────────────────────────────────────
   Compact patient header shown above notification preferences and service
   detail. Not the clinical chart banner — this is the admin-side summary. */
.pt-strip {
  background: var(--cds-layer-02, #f4f4f4);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02, 0.25rem);
  padding: var(--cds-spacing-04, 0.75rem);
}

.pt-strip-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-04, 0.75rem);
}

.pt-avatar {
  align-items: center;
  background: var(--cds-layer-accent-01, #e0e0e0);
  block-size: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--cds-text-secondary, #525252);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  inline-size: 2.5rem;
  justify-content: center;
  overflow: hidden;
}

.pt-name {
  color: var(--cds-text-primary, #161616);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.pt-mrn,
.pt-meta-item {
  color: var(--cds-text-secondary, #525252);
  font-size: 0.75rem;
  line-height: 1.34;
}

/* ── Inline status line ─────────────────────────────────────────────────────
   Person-lookup feedback in the staff onboarding and user pages. The tone class
   is appended at runtime (@personLookupClass), so tone lives with those
   components; this rule supplies only the shared geometry. */
.carbon-notification {
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  line-height: 1.34;
  padding: var(--cds-spacing-02, 0.25rem) var(--cds-spacing-03, 0.5rem);
}

/* ── Settings panels ────────────────────────────────────────────────────────
   Authored by SettingsForm plus DisplaySettingEditor, LocaleSettingEditor,
   SystemInfoSection and ThemeSettingEditor. The rules used to live in
   SettingsForm.razor.css, where the scope attribute confined them to that one
   component and left the other four unstyled. Moved here verbatim. */
.settings-panel {
  background: var(--cds-layer-accent);
  border: 1px solid var(--cds-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-06);
  padding: var(--cds-spacing-05);
}

.settings-panel-header h3 {
  font-size: var(--text-base);
  margin: 0;
}

/* .settings-edit-form sits on <EditForm>, so the <form> it renders never carried
   SettingsForm's scope attribute — the original rule needed ::deep for that
   reason. As a global rule no scoping workaround is required. */
.settings-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-05);
}

.settings-grid {
  display: grid;
  gap: var(--cds-spacing-05);
  grid-template-columns: repeat(auto-fit, minmax(var(--ph-control-medium-inline-size), 1fr));
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
}

.settings-actions {
  display: flex;
  justify-content: flex-start;
}

/* ── Staff onboarding wizard ────────────────────────────────────────────────
   Every step component declared these identically in its own scoped stylesheet
   (five copies of each). Single definition here; the per-step sheets keep only
   what is genuinely step-specific. */
.staff-step-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-05);
}

.staff-form-grid {
  display: grid;
  gap: var(--cds-spacing-04);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 40rem) {
  .staff-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Person-rooted Workforce registry. Logical properties preserve RTL flow. */
.workforce-page { min-inline-size: 0; }
.workforce-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
  gap: var(--cds-spacing-05);
  align-items: end;
  margin-block-end: var(--cds-spacing-06);
}
.workforce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 1fr);
  gap: var(--cds-spacing-06);
  align-items: start;
}
.workforce-registry, .workforce-detail { min-inline-size: 0; }
.workforce-detail {
  border: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
  padding: var(--cds-spacing-06);
}
.workforce-detail-header h2 { margin-block: var(--cds-spacing-02) var(--cds-spacing-05); }
.workforce-state { padding: var(--cds-spacing-08); color: var(--cds-text-secondary); text-align: center; }
/* Wizard container in the detail pane: holds the stepper plus the active step's fields.
   min-inline-size:0 keeps the long review tags from widening the grid column that holds it. */
.workforce-onboarding { min-inline-size: 0; }
.workforce-stepper { display: flex; gap: var(--cds-spacing-04); margin-block-end: var(--cds-spacing-06); }
.workforce-stepper span { color: var(--cds-text-secondary); border-block-end: 2px solid var(--cds-border-subtle-01); padding-block-end: var(--cds-spacing-03); white-space: nowrap; }
.workforce-stepper span.active { color: var(--cds-text-primary); border-color: var(--cds-interactive); }
.workforce-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cds-spacing-05); margin-block: var(--cds-spacing-05); }
.workforce-inline { display: grid; grid-template-columns: 1fr auto; gap: var(--cds-spacing-04); align-items: end; margin-block: var(--cds-spacing-05); }
.workforce-review-tags { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); margin-block: var(--cds-spacing-05); }

@media (max-width: 82rem) {
  .workforce-layout { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .workforce-toolbar, .workforce-form-grid { grid-template-columns: 1fr; }
  .workforce-detail { padding: var(--cds-spacing-05); }
  .workforce-stepper { overflow-x: auto; }
}