html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--mud-palette-background);
}

/*
    Stable-size dialog body. Pair with DialogOptions { MaxWidth.Medium, FullWidth=true }
    from CustomerDialogDefaults so edit dialogs stop reflowing as the user types — the
    width is pinned by FullWidth, the minimum height is pinned here. Tall enough to
    accommodate a typical edit form plus inline validation errors without the dialog
    growing/shrinking between states.
*/
.customer-edit-dialog .mud-dialog-content {
    min-height: 420px;
}

.customer-edit-dialog-wide .mud-dialog-content {
    min-height: 520px;
}

/*
    Responsive dialog margins. MudBlazor's default dialog has generous fixed
    margins that don't scale well at the iPad-mini-landscape breakpoint
    (1024×768). Force a viewport-aware max-width so FullWidth dialogs never
    exceed 90vw, and center them regardless of content reflow.
*/
.customer-edit-dialog,
.customer-edit-dialog-wide {
    margin: auto;
}

.customer-edit-dialog .mud-dialog,
.customer-edit-dialog-wide .mud-dialog {
    max-width: min(600px, 92vw);
    max-height: 90vh;
}

.customer-edit-dialog .mud-dialog-content,
.customer-edit-dialog-wide .mud-dialog-content {
    overflow-y: auto;
}

/*
    Availability slot row — spacing for the dash between the From / To pickers.
    MudStack Spacing="3" gives 12px gaps between children, but the em-dash
    glyph is visually narrow and reads as "glued" to the right picker without
    a small horizontal padding of its own.
*/
.availability-slot-row .availability-slot-dash {
    padding: 0 6px;
    user-select: none;
}

/*
    Native time input sizing. The HTML5 <input type="time"> rendered via
    MudTextField InputType.Time needs a consistent height so it lines up
    with the em-dash separator and the delete button in the availability
    slot row.
*/
.availability-slot-row input[type="time"] {
    line-height: 1.4;
}

body {
    color: var(--mud-palette-text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: inherit;
}

.mud-layout,
.mud-main-content,
.app-shell-content {
    background: var(--mud-palette-background);
}

.public-shell-wrap {
    position: relative;
    padding-top: 32px;
    padding-bottom: 32px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.public-shell-hero,
.workspace-hero,
.greeting-panel,
.redirect-panel {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(23, 35, 57, 0.06);
}

.hero-chip,
.greeting-chip {
    width: fit-content;
}

.app-shell-bar {
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-shell-logout-form {
    display: inline-flex;
    margin: 0;
}

.app-shell-tenant-select {
    min-width: 11rem;
    max-width: 18rem;
}

.app-shell-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-shell-brand-mark {
    min-width: 56px;
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #2358d9 0%, #1a42b5 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(31, 79, 209, 0.2);
}

.app-shell-brand-label {
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.app-shell-drawer {
    padding: 20px 16px;
    background: var(--mud-palette-drawer-background);
}

.app-shell-drawer-top {
    padding: 16px;
}

.app-shell-section-label {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.12em;
}

.app-shell-content {
    /* Editorial layouts cap at ~1280px so information doesn't stretch thin
       across a wide monitor. 24px horizontal breathing room on tablet,
       bumps to 28 on desktop via the 1024px media query further down. */
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

@media (min-width: 1024px) {
    .app-shell-content {
        padding: 32px 28px 48px;
    }
}

.greeting-panel {
    padding: 32px;
    border-radius: 18px;
    background: var(--mud-palette-surface);
}

.typography-specimen {
    display: grid;
    gap: 8px;
}

.filter-toolbar .mud-input-control {
    margin: 0 !important;
}

.filter-search {
    width: 280px;
    flex: 0 0 auto;
}

.filter-group {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.filter-select {
    min-width: 150px;
}

.list-toolbar-panel {
    padding: 20px 24px;
}

.list-toolbar {
    width: 100%;
}

.list-toolbar-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

/* Uniform font size across search and selects so they visually match. */
.list-toolbar-row .mud-input-slot,
.list-toolbar-row .mud-input-slot input,
.list-toolbar-row .mud-input-slot input::placeholder,
.list-toolbar-row .mud-select-input,
.list-toolbar-row .mud-input-label {
    font-size: 0.85rem;
}

.list-toolbar-search-wrap {
    flex: 0 1 300px;
    min-width: 220px;
}

.list-toolbar-search {
    width: 100%;
}

.list-toolbar-separator {
    width: 1px;
    align-self: stretch;
    min-height: 32px;
    background: var(--mud-palette-lines-default);
    margin: 0 4px;
}

.list-toolbar-select-group {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.list-toolbar-select {
    flex: 0 0 220px;
    width: 220px;
}

.list-toolbar-select--wide {
    flex: 0 0 220px;
    width: 220px;
}

.list-toolbar-select .mud-input-control {
    width: 100%;
}

/*
    Selected-value text inside a MudSelect render slot — make sure the size
    matches the dropdown items so "Pending Approval" or "Public Sector" don't
    read visibly larger than what the user picks from the menu. Truncation
    falls back to ellipsis when the selected set still exceeds the field width
    (e.g. all four statuses picked at once).
*/
.list-toolbar-select .mud-select-input,
.list-toolbar-select--wide .mud-select-input {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-toolbar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.list-toolbar-divider {
    margin: 4px 0;
}

.list-toolbar-active-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.list-toolbar-active-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    margin-right: 4px;
}

.list-toolbar-active-chip {
    font-size: 0.78rem;
}

.list-toolbar-clear-all {
    font-size: 0.78rem;
}

/* User profile */
.profile-qual-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.profile-qual-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-qual-row:first-child {
    padding-top: 0;
}

/* Kanban date bar */
.kanban-range-group {
    display: flex;
    gap: 4px;
}

/* Kanban board */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.kanban-column {
    flex: 1 1 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.kanban-column-header {
    padding: 12px 14px;
    border-radius: 14px 14px 0 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: none;
}

.kanban-column-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kanban-count {
    height: 20px !important;
    font-size: 0.7rem !important;
}

.kanban-column-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 0 0 14px 14px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-top: none;
    min-height: 120px;
}

.kanban-card {
    padding: 14px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 6px rgba(23, 35, 57, 0.04);
    transition: box-shadow 0.15s ease;
    cursor: pointer;
}

.kanban-card:hover {
    box-shadow: 0 4px 14px rgba(23, 35, 57, 0.08);
}

/* Tab content spacing */
.greeting-panel .mud-tabs-panels {
    padding-top: 16px;
}

/* Nested "notify this contact about order updates" toggle inside
   LinkContactLocationsDialog — indented under the primary link
   checkbox so the relationship to the parent location is visually
   unambiguous. */
.link-contact-locations-dialog-sub {
    margin-left: 40px;
    margin-top: -4px;
    margin-bottom: 8px;
}

/* Parent-choice picker in the asset create wizard's Hierarchy step.
   Two radio rows ("Top-level" vs "Sub-asset") with the same affordance
   shape as .location-picker-row so the wizard reads consistently
   step-to-step. Active row gets the primary tint to anchor the choice. */
.parent-choice-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parent-choice-row {
    display: flex;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.parent-choice-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.parent-choice-row--active {
    background: var(--mud-palette-primary-hover);
    border-color: var(--mud-palette-primary);
}

/* Location picker (used in asset create) — a radio-selected list of
   customer locations with full address lines under each label. Hover
   + selected states match the .hierarchy-child-row affordance so the
   whole picker feels like other navigable lists in the app. */
.location-picker-group {
    padding: 4px 8px;
}

.location-picker-row {
    display: flex;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.location-picker-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.location-picker-row--active {
    background: var(--mud-palette-primary-hover);
}

.location-picker-body {
    min-width: 0;
}

/* Asset list — root vs sub-asset visual treatment.
   Root rows: subtle background tint that anchors the group; sub rows
   are flush so the tint reads as a "header" row above its descendants.
   Combined with the depth-based padding-left in the Name cell, this
   gives a tree feel without losing the dense table layout. */
.asset-list-row--root {
    background: var(--mud-palette-background-grey);
}

.asset-list-row--root td:first-child {
    border-left: 3px solid var(--mud-palette-primary);
}

.asset-list-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.asset-list-branch-icon {
    flex-shrink: 0;
    margin-right: -4px;
}

.asset-list-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-list-name--root {
    font-weight: 600;
}

.asset-list-childcount-chip {
    margin-left: 8px;
    flex-shrink: 0;
}

/* Hierarchy tree — the recursive asset tree. Each row reads like a
   navigation target (hover highlight); indentation is pushed via inline
   padding-left derived from node depth, so the "tree" feel comes from
   successive indent levels rather than drawn connector lines. */
.hierarchy-tree {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background);
}

.hierarchy-tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 44px;
}

.hierarchy-tree-node:hover {
    background: var(--mud-palette-action-default-hover);
}

.hierarchy-tree-node--root {
    background: var(--mud-palette-primary-hover);
    cursor: default;
}

.hierarchy-tree-node--root:hover {
    background: var(--mud-palette-primary-hover);
}

.hierarchy-tree-spacer {
    display: inline-block;
    width: 28px; /* match the MudIconButton footprint so the root label
                    lines up vertically with expanded children */
}

.hierarchy-tree-body {
    min-width: 0;
    flex: 1;
}

.hierarchy-breadcrumb {
    padding: 4px 0;
}

/* Sidebar breadcrumb path — vertical, depth-indented step list. The
   current-asset terminator gets a slight emphasis so users orient
   instantly: "you are here, after these ancestors". */
.hierarchy-sidebar-path {
    margin: 4px 0;
}

.hierarchy-sidebar-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    min-width: 0;
}

.hierarchy-sidebar-step--current {
    background: var(--mud-palette-primary-hover);
    border-radius: 6px;
    margin-left: -4px;
    padding-right: 8px;
}

/* Hierarchy children list inside the main Hierarchy section card —
   wrap the .hierarchy-child-row rows so they share borders/spacing
   without leaking into other surfaces. */
.hierarchy-child-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background);
}

/* Maintenance schedule row — tinted background when overdue so the
   row is scannable at a glance even before the "Overdue" chip is read. */
.schedule-row {
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.schedule-row--overdue {
    background: var(--mud-palette-error-hover);
    border-left: 3px solid var(--mud-palette-error);
}

/* StatusBanner — subtle top spacing tweak so the banner reads as part of
   the detail header rather than a floating notice. */
.status-banner {
    margin-bottom: 0;
}

/* Document viewer dialog — the inner surface reserves generous viewport
   space so images and PDFs aren't squeezed into a tiny box, and the title
   stays truncated on long filenames (DocumentBrowser names can be long
   and would otherwise blow out the header row). */
.document-viewer-dialog .mud-dialog {
    max-width: min(1100px, 95vw);
    width: 95vw;
}

.document-viewer-dialog-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prev/next navigation row — lives above the preview surface (not in
   the title) so the dialog's absolutely-positioned close (X) button
   can't overlap it. Centered so the pager feels like a real control
   rather than a floating icon. */
.document-viewer-nav-counter {
    min-width: 4em;
    text-align: center;
    font-weight: 600;
}

/* Reserves space at the right edge of the title row so the filename
   stops before sliding under the dialog's own close (X) button. */
.document-viewer-close-spacer {
    flex-shrink: 0;
    width: 40px;
}

/* Meta row below the filename — separators only appear between parts,
   never after the last one. */
.document-viewer-meta .document-viewer-meta-sep:last-of-type {
    display: none;
}

.document-viewer-meta {
    row-gap: 2px;
}

.document-viewer-surface {
    min-height: 60vh;
    max-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
}

.document-viewer-image-wrap {
    padding: 8px;
    max-width: 100%;
    max-height: 100%;
}

.document-viewer-image {
    max-width: 100%;
    max-height: 72vh;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.document-viewer-pdf {
    width: 100%;
    height: 72vh;
    border: 0;
    border-radius: 4px;
    background: #fff;
}

/* Document card / row — clickable-preview affordance. Hover states tell
   the user the whole tile is a target for the inline viewer. */
.doc-row,
.doc-card {
    cursor: default;
}

.doc-row.doc-row--clickable,
.doc-card.doc-card--clickable {
    cursor: pointer;
}

.doc-row.doc-row--clickable:hover {
    background: var(--mud-palette-action-default-hover);
}

.doc-card.doc-card--clickable:hover {
    box-shadow: 0 4px 14px rgba(23, 35, 57, 0.08);
}

/* Document browser */
.doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.doc-row:hover {
    background: var(--mud-palette-background);
}

.doc-row-info {
    min-width: 0;
    flex: 1;
}

.doc-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.doc-card:hover {
    box-shadow: 0 4px 16px rgba(23, 35, 57, 0.08);
}

.doc-card-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background: var(--mud-palette-background);
}

.doc-card-info {
    padding: 10px 12px;
}

.doc-tag {
    height: 22px !important;
    font-size: 0.7rem !important;
}

.doc-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Upload dialog / tag input */
.tag-input-field .mud-input-adornment-start .mud-icon-root {
    font-size: 1.1rem;
}

.doc-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.doc-drop-zone:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(31, 79, 209, 0.04);
}

.doc-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    /* MudBlazor children in the drop zone (MudIcon, MudText) declare
       position: relative, so they paint over the input unless we force
       the file input on top of the stacking order. z-index: 2 catches
       every click inside the dashed area and routes it to the native
       file picker. */
    z-index: 2;
}

/* Belt-and-suspenders: keep the visual children non-interactive so even
   if MudBlazor's internal styles change, the drop zone stays clickable. */
.doc-drop-zone > .mud-icon-root,
.doc-drop-zone > .mud-typography {
    pointer-events: none;
}

.doc-file-preview {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Field map */
.field-map-container {
    width: 100%;
    height: 560px;
    border-radius: 18px;
}

.field-map-marker div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
}

.field-map-marker-hq div,
.field-map-marker-origin div,
.field-map-marker-return div {
    background: linear-gradient(135deg, #2358d9 0%, #1a42b5 100%);
    border-radius: 10px;
}

.field-map-marker-hq svg,
.field-map-marker-origin svg,
.field-map-marker-return svg {
    width: 22px;
    height: 22px;
    display: block;
}

.field-map-marker-person div {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.field-map-marker-stop div {
    font-size: 13px;
    border: 2px solid #fff;
}

/* Avatar / icon badge system */
.fsm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 50%;
    background: #9fb1c9;
    user-select: none;
    text-align: center;
}

.fsm-avatar-square { border-radius: 10px; }
.fsm-avatar-rounded { border-radius: 8px; }

.fsm-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.fsm-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.fsm-avatar-md { width: 40px; height: 40px; font-size: 14px; }
.fsm-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.fsm-avatar-xl { width: 80px; height: 80px; font-size: 26px; }

.fsm-avatar svg {
    display: block;
}

.fsm-avatar-xs svg,
.fsm-avatar-xs .mud-icon-root { width: 14px !important; height: 14px !important; font-size: 14px !important; }
.fsm-avatar-sm svg,
.fsm-avatar-sm .mud-icon-root { width: 18px !important; height: 18px !important; font-size: 18px !important; }
.fsm-avatar-md svg,
.fsm-avatar-md .mud-icon-root { width: 22px !important; height: 22px !important; font-size: 22px !important; }
.fsm-avatar-lg svg,
.fsm-avatar-lg .mud-icon-root { width: 30px !important; height: 30px !important; font-size: 30px !important; }
.fsm-avatar-xl svg,
.fsm-avatar-xl .mud-icon-root { width: 44px !important; height: 44px !important; font-size: 44px !important; }

.fsm-avatar .mud-icon-root { color: #fff; }

.fsm-avatar-primary   { background: #1f4fd1; }
.fsm-avatar-info      { background: #1f6fd1; }
.fsm-avatar-success   { background: #1e7b55; }
.fsm-avatar-warning   { background: #b97a1f; }
.fsm-avatar-error     { background: #c44755; }
.fsm-avatar-secondary { background: #4b647f; }
.fsm-avatar-neutral   { background: #9fb1c9; }
.fsm-avatar-brand {
    background: linear-gradient(135deg, #2358d9 0%, #1a42b5 100%);
    box-shadow: 0 2px 8px rgba(31, 79, 209, 0.2);
}

.avatar-sample {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Data panel skeleton */
.data-panel-skeleton {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.data-panel-skeleton-row {
    display: flex;
    gap: 24px;
    align-items: center;
}

.data-panel-skeleton-row > .mud-skeleton {
    flex: 1;
    min-width: 40px;
}

/* Not found panel */
.not-found-panel {
    padding: 80px 32px 64px;
    text-align: center;
}

.not-found-code {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 700;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--mud-palette-primary);
    opacity: 0.55;
    margin-bottom: 12px;
}

.not-found-description {
    max-width: 480px;
    margin-top: -2px !important;
}

/* Error display */
.error-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 28px;
    max-width: 640px;
}

.error-display-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
}

.error-display-hint {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--mud-palette-background);
}

.error-display-hint-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: var(--mud-palette-warning) !important;
}

.error-display-validation {
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-background) 94%);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 20%, var(--mud-palette-lines-default) 80%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-display-validation-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.error-display-validation-field {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    min-width: 120px;
    padding-top: 2px;
}

.error-display-validation-msg {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.error-display-ref-code {
    flex: 1;
    font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-display-copy-btn {
    margin-left: -4px;
}

.error-display-details {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    max-height: 320px;
    overflow: auto;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.error-display-detail-row {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.error-display-detail-label {
    min-width: 80px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.error-display-details pre {
    margin: 0;
    font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Notification inbox */
.inbox-header {
    padding: 14px 16px;
}

.inbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
}

.inbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background 0.15s ease;
}

.inbox-item:hover {
    background: var(--mud-palette-background);
}

.inbox-item:last-child {
    border-bottom: none;
}

.inbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 12px;
    flex-shrink: 0;
    background: transparent;
}

.inbox-item-unread .inbox-dot {
    background: var(--mud-palette-primary);
}

.inbox-item-unread .inbox-title {
    font-weight: 600;
}

.inbox-item-read .inbox-title,
.inbox-item-read .inbox-body-text {
    color: var(--mud-palette-text-secondary);
}

.inbox-item-read .inbox-icon {
    opacity: 0.6;
}

.inbox-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.inbox-icon .mud-icon-root {
    color: #fff;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.inbox-body {
    flex: 1;
    min-width: 0;
}

.inbox-cta {
    align-self: flex-start;
}

/* Colors page */
.color-swatch-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.color-info {
    min-width: 0;
    flex: 1;
}

.state-chip {
    min-width: 110px;
}

.route-sample-stop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-sample-segment {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-segment-line-h {
    width: 56px;
    height: 3px;
    border-radius: 2px;
}

.route-segment-done .route-segment-line-h { background: #66758b; }
.route-segment-next .route-segment-line-h { background: #1f4fd1; height: 5px; }
.route-segment-upcoming .route-segment-line-h {
    background: repeating-linear-gradient(to right, #1f4fd1 0 6px, transparent 6px 14px);
    opacity: 0.55;
}

/* Route timeline */
.route-timeline {
    display: flex;
    flex-direction: column;
}

.route-stop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.route-stop-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.route-stop-done .route-stop-marker { background: #9fb1c9; }
.route-stop-current .route-stop-marker { background: #1f4fd1; }
.route-stop-upcoming .route-stop-marker { background: #4b647f; }
.route-stop-endpoint .route-stop-marker { background: linear-gradient(135deg, #2358d9 0%, #1a42b5 100%); }

.route-stop-info {
    min-width: 0;
    flex: 1;
}

.route-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    padding-left: 13px;
}

.route-segment-line {
    width: 2px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 1px;
}

.route-segment-done .route-segment-line { background: #66758b; }
.route-segment-next .route-segment-line { background: #1f4fd1; width: 3px; }
.route-segment-upcoming .route-segment-line {
    background: repeating-linear-gradient(to bottom, #1f4fd1 0 4px, transparent 4px 8px);
    opacity: 0.5;
}

.route-segment-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
}

.field-map-emp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.field-map-emp-row:hover {
    background: var(--mud-palette-background);
}

.field-map-emp-active {
    background: var(--mud-palette-background);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.field-map-emp-info {
    min-width: 0;
    flex: 1;
}

/* Address map */
.address-map-container {
    width: 100%;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Detail shell metadata — label stacked above the value. Reads like a
   specification card, not a table row. */
.detail-meta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fsm-space-1);
    padding: var(--fsm-space-2) 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.detail-meta-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-meta-row:first-child {
    padding-top: 0;
}

.detail-meta-row .mud-typography-caption {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 600;
}

.kv-row-value {
    white-space: pre-wrap;
    font-family: var(--fsm-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fsm-ink);
}

/* Opt-in inline layout for the rare case where a compact key/value pair
   should sit on one line (short numeric stats, etc.). */
.detail-meta-row--inline {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fsm-space-4);
}

.detail-meta-row--inline .mud-typography-caption {
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    font-weight: 400;
}

.detail-timeline {
    padding-top: 4px;
}

.data-table-panel {
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(23, 35, 57, 0.06);
    overflow: hidden;
}

.setup-surface-specimen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    padding: 32px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(31, 79, 209, 0.12) 0%, transparent 60%),
        linear-gradient(160deg, #0f1724 0%, #1a2744 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.setup-wizard-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    padding: 40px 48px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.login-split-hero {
    flex: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    overflow: hidden;
}

.login-split-hero .login-hero-wrap {
    min-height: 0;
    padding: 0;
}

.login-split-hero .login-hero-graphic {
    max-width: 520px;
}

.login-split-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.login-card {
    padding: 48px 56px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.setup-generated-slug-field .mud-input-slot {
    background: rgba(31, 79, 209, 0.06);
}

.setup-generated-slug-field input {
    color: rgba(15, 23, 36, 0.82);
    font-weight: 500;
    font-size: 0.95rem;
}

.setup-slug-status {
    min-height: 20px;
}

.login-brand-mark {
    min-width: 100px;
    height: 56px;
    font-size: 1.25rem;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(31, 79, 209, 0.3);
    letter-spacing: 0.1em;
}

.login-accent {
    width: 36px;
    height: 2px;
    border-radius: 1px;
    background: var(--mud-palette-primary);
    opacity: 0.3;
}

.login-action {
    min-width: 220px;
}

/* Login hero illustration */
.login-hero-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 420px;
    padding: 20px 0;
}

.login-hero-graphic {
    width: 100%;
    max-width: 560px;
    height: auto;
}

.hero-card {
    animation-name: heroFloat;
    animation-duration: var(--hero-dur, 6s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--hero-del, 0s);
}

.hero-pulse {
    animation: heroPulse 3s ease-in-out infinite;
}

.hero-accent {
    animation: heroAccentFloat 9s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes heroPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes heroAccentFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.public-login-surface {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at center, rgba(31, 79, 209, 0.12) 0%, transparent 60%),
        linear-gradient(160deg, #0f1724 0%, #1a2744 100%);
}

.redirect-panel-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redirect-panel {
    border-radius: 18px;
    background: var(--mud-palette-surface);
}

@media (max-width: 959.98px) {
    .list-toolbar-separator {
        display: none;
    }

    .list-toolbar-search-wrap,
    .list-toolbar-select-group {
        flex: 1 1 100%;
        width: 100%;
    }

    .list-toolbar-select,
    .list-toolbar-select--wide {
        flex: 1 1 140px;
        width: auto;
    }

    .list-toolbar-actions {
        width: 100%;
    }

    .list-toolbar-actions .mud-button-root {
        width: 100%;
    }

    .public-shell-wrap {
        padding-top: 20px;
        padding-bottom: 20px;
        min-height: auto;
        align-items: stretch;
    }

    .greeting-panel {
        min-height: auto;
        padding: 22px;
        border-radius: 18px;
    }

    .login-split-hero {
        display: none;
    }

    .login-card {
        padding: 40px 32px;
    }

    .app-shell-content {
        padding: 20px 12px 28px;
    }
}

/*
 * Editorial utility classes — consumed by design-system specimens and by
 * App* primitives. Driven entirely by --fsm-* tokens (see tokens.css).
 */

.fsm-eyebrow {
    font-size: var(--fsm-eyebrow-size);
    font-weight: var(--fsm-eyebrow-weight);
    letter-spacing: var(--fsm-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--fsm-ink-soft);
    font-family: var(--fsm-font-sans);
}

.fsm-field-label {
    font-size: var(--fsm-field-label-size);
    font-weight: var(--fsm-field-label-weight);
    letter-spacing: var(--fsm-field-label-tracking);
    text-transform: uppercase;
    color: var(--fsm-ink-soft);
    font-family: var(--fsm-font-sans);
    margin-bottom: var(--fsm-space-1);
}

.fsm-field-value {
    font-size: var(--fsm-field-value-size);
    color: var(--fsm-ink);
    font-family: var(--fsm-font-sans);
}

.fsm-field-value--mono,
.fsm-mono-id {
    font-family: var(--fsm-font-mono);
    font-size: var(--fsm-mono-id-size);
    letter-spacing: var(--fsm-mono-id-tracking);
    color: var(--fsm-ink);
}

/* Tone specimen rows on the design-system colors page */
.tone-specimen {
    display: grid;
    grid-template-columns: auto 120px 1fr auto;
    align-items: center;
    gap: var(--fsm-space-3);
    padding: var(--fsm-space-3) var(--fsm-space-4);
    border-radius: var(--fsm-radius-md);
    font-family: var(--fsm-font-sans);
    font-size: 13px;
}

.tone-specimen .tone-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.tone-specimen .tone-label {
    font-weight: 600;
}

.tone-specimen .tone-var {
    font-family: var(--fsm-font-mono);
    font-size: 11px;
    opacity: 0.85;
}

.tone-specimen .tone-hex {
    font-family: var(--fsm-font-mono);
    font-size: 11px;
    opacity: 0.7;
    justify-self: end;
}

/*
 * App* primitive components (M2).
 * Every value comes from --fsm-* tokens. No raw hex.
 */

/* — Card — */
.fsm-card {
    background: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-md);
}

.fsm-card:not(.fsm-card--padded) {
    overflow: hidden;
}

/* MudTable wraps its pager and container in paper elements that carry
   their own border-radius and opaque fill. Inside an AppCard those inner
   curves fight the card's rounded corners (two arcs at different radii
   meeting). Strip the inner radii and let the toolbar/paper inherit the
   card surface so the card's own rounded shell is the only curve. */
.fsm-card .mud-toolbar,
.fsm-card .mud-table-pager {
    background-color: transparent;
}

.fsm-card .mud-paper,
.fsm-card .mud-table,
.fsm-card .mud-table-container {
    border-radius: 0;
    box-shadow: none;
}

.fsm-card .mud-table,
.fsm-card .mud-table-container,
.fsm-card .mud-table-root {
    background: var(--fsm-surface);
}

.fsm-card .mud-table-head .mud-table-cell {
    background: var(--fsm-surface);
}

.fsm-card .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.fsm-card--padded {
    padding: var(--fsm-space-6);
}

/* — Status pill (with dot) — */
.app-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--fsm-space-2);
    border-radius: 999px;
    font-family: var(--fsm-font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.2;
}

.app-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.app-pill--sm {
    padding: 3px 9px;
    font-size: 11px;
}

.app-pill--lg {
    padding: 5px 11px;
    font-size: 12.5px;
}

.app-pill--lg .app-pill__dot {
    width: 7px;
    height: 7px;
}

.app-pill--good    { background: var(--fsm-tone-good-bg);    color: var(--fsm-tone-good-fg); }
.app-pill--good    .app-pill__dot { background: var(--fsm-tone-good-dot); }
.app-pill--warn    { background: var(--fsm-tone-warn-bg);    color: var(--fsm-tone-warn-fg); }
.app-pill--warn    .app-pill__dot { background: var(--fsm-tone-warn-dot); }
.app-pill--bad     { background: var(--fsm-tone-bad-bg);     color: var(--fsm-tone-bad-fg); }
.app-pill--bad     .app-pill__dot { background: var(--fsm-tone-bad-dot); }
.app-pill--info    { background: var(--fsm-tone-info-bg);    color: var(--fsm-tone-info-fg); }
.app-pill--info    .app-pill__dot { background: var(--fsm-tone-info-dot); }
.app-pill--neutral { background: var(--fsm-tone-neutral-bg); color: var(--fsm-tone-neutral-fg); }
.app-pill--neutral .app-pill__dot { background: var(--fsm-tone-neutral-dot); }

/* — Flat uppercase badge (priority, direktzahler, inline tags) — */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fsm-space-1);
    padding: 2px 8px;
    border-radius: var(--fsm-radius-sm);
    font-family: var(--fsm-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.3;
}

.app-badge--icon {
    padding: 2px 7px;
    gap: 5px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

.app-badge--icon .mud-icon-root {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.app-badge--good    { background: var(--fsm-tone-good-bg);    color: var(--fsm-tone-good-fg); }
.app-badge--warn    { background: var(--fsm-tone-warn-bg);    color: var(--fsm-tone-warn-fg); }
.app-badge--bad     { background: var(--fsm-tone-bad-bg);     color: var(--fsm-tone-bad-fg); }
.app-badge--info    { background: var(--fsm-tone-info-bg);    color: var(--fsm-tone-info-fg); }
.app-badge--neutral { background: var(--fsm-tone-neutral-bg); color: var(--fsm-tone-neutral-fg); }

/* — Button tweaks (on top of MudBlazor base styling) —
   Keep the MudButton shell; override variant chrome so each AppButton
   variant renders the editorial look regardless of how MudBlazor
   interprets the underlying Variant × Color pair. Selectors chain on
   .mud-button-root to match MudBlazor's specificity and win on order. */
.app-btn {
    letter-spacing: -0.005em;
}

/* Ghost — white surface, thin 1px editorial border. */
.mud-button-root.app-btn--ghost {
    background-color: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    color: var(--fsm-ink);
}

.mud-button-root.app-btn--ghost:hover:not(:disabled) {
    background-color: var(--fsm-surface);
    border-color: var(--fsm-ink-soft);
}

/* Subtle — text-only, becomes subtly tinted on hover. */
.mud-button-root.app-btn--subtle {
    background-color: transparent;
    border-color: transparent;
    color: var(--fsm-ink-mid);
}

.mud-button-root.app-btn--subtle:hover:not(:disabled) {
    background-color: var(--fsm-line-soft);
    color: var(--fsm-ink);
}

/* Danger — red-tinted tone background, deep red border + text. */
.mud-button-root.app-btn--danger {
    background-color: var(--fsm-tone-bad-bg);
    border: 1px solid var(--fsm-tone-bad-fg);
    color: var(--fsm-tone-bad-fg);
}

.mud-button-root.app-btn--danger:hover:not(:disabled) {
    background-color: var(--fsm-tone-bad-fg);
    color: var(--fsm-surface);
}

/* Ink — high-contrast dark. Inverted compared to Ghost. */
.mud-button-root.app-btn--ink {
    background-color: var(--fsm-ink);
    border: 1px solid var(--fsm-ink);
    color: var(--fsm-surface);
}

.mud-button-root.app-btn--ink:hover:not(:disabled) {
    background-color: var(--fsm-ink-mid);
    border-color: var(--fsm-ink-mid);
}

/* Disabled variants share a faded neutral treatment so blocked
   lifecycle actions read as "not now" rather than "error". */
.mud-button-root.app-btn--ghost:disabled,
.mud-button-root.app-btn--subtle:disabled,
.mud-button-root.app-btn--danger:disabled,
.mud-button-root.app-btn--ink:disabled,
.mud-button-root.app-btn--primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/*
 * Page shells (M3) — page header, back link, section card, empty state,
 * pagination. All values from --fsm-* tokens.
 */

/* — Back link — */
.app-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fsm-space-1);
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    color: var(--fsm-ink-mid);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.app-back-link:hover {
    color: var(--fsm-accent);
}

.app-back-link .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* — Page header — */
.app-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-2);
    margin-bottom: var(--fsm-space-4);
}

.app-page-header__back {
    margin-bottom: var(--fsm-space-1);
}

.app-page-header__eyebrow {
    /* inherits .fsm-eyebrow */
    margin-bottom: 2px;
}

.app-page-header__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fsm-space-5);
}

.app-page-header__title {
    margin: 0;
    font-family: var(--fsm-font-sans);
    font-size: 30px;
    font-weight: 600;
    color: var(--fsm-ink);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.app-page-header__actions {
    display: flex;
    gap: var(--fsm-space-2);
    flex-shrink: 0;
    align-items: center;
}

.app-page-header__chips {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-3);
    flex-wrap: wrap;
    margin-top: var(--fsm-space-2);
}

.app-page-header__subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fsm-space-4);
    margin-top: var(--fsm-space-1);
}

.app-page-header__subtitle {
    font-size: 13px;
    color: var(--fsm-ink-mid);
    line-height: 1.4;
}

.app-page-header__meta {
    font-size: 12px;
    color: var(--fsm-ink-soft);
    white-space: nowrap;
}

/* — Section card — */
.app-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fsm-space-3);
    margin-bottom: var(--fsm-space-4);
}

.app-section-card__title {
    /* inherits .fsm-eyebrow — editorial uppercase section title */
    margin: 0;
}

.app-section-card__actions {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
}

/* Section-card title-row icon buttons (edit pencils, add plus) — editorial
   reset so they read as quiet affordances, not MudBlazor chrome. */
.app-section-card__actions .mud-icon-button-root {
    width: 28px;
    height: 28px;
    padding: 4px;
    min-width: 0;
    color: var(--fsm-ink-soft);
    background-color: transparent;
    border-radius: var(--fsm-radius-sm);
    box-shadow: none;
}

.app-section-card__actions .mud-icon-button-root:hover:not(:disabled) {
    color: var(--fsm-ink);
    background-color: var(--fsm-line-soft);
}

.app-section-card__actions .mud-icon-button-root .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.app-section-card__body {
    /* Body takes the remaining space; AppCard already supplies padding. */
}

/* — Empty state — */
.app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--fsm-space-12) var(--fsm-space-5);
    text-align: center;
    color: var(--fsm-ink-soft);
}

.app-empty-state__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--fsm-radius-md);
    background: var(--fsm-accent-tint);
    color: var(--fsm-accent);
    display: grid;
    place-items: center;
    margin-bottom: var(--fsm-space-3);
}

.app-empty-state__icon .mud-icon-root {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.app-empty-state__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fsm-ink);
    margin-bottom: var(--fsm-space-1);
}

.app-empty-state__subtitle {
    font-size: 13px;
    color: var(--fsm-ink-mid);
    max-width: 360px;
    line-height: 1.5;
    margin-bottom: var(--fsm-space-3);
}

.app-empty-state__action {
    margin-top: var(--fsm-space-1);
}

/* — Pagination — */
.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fsm-space-3) var(--fsm-space-5);
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    color: var(--fsm-ink-mid);
    border-top: 1px solid var(--fsm-line-soft);
}

.app-pagination__range {
    font-family: var(--fsm-font-mono);
    font-size: 11.5px;
    color: var(--fsm-ink);
}

.app-pagination__range-total {
    color: var(--fsm-ink-soft);
}

.app-pagination__nav {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-1);
}

.app-pagination__btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--fsm-ink);
    border-radius: var(--fsm-radius-sm);
    cursor: pointer;
}

.app-pagination__btn:hover:not(:disabled) {
    background: var(--fsm-line-soft);
}

.app-pagination__btn:disabled {
    color: var(--fsm-ink-soft);
    opacity: 0.45;
    cursor: default;
}

.app-pagination__counter {
    font-family: var(--fsm-font-mono);
    font-size: 11px;
    color: var(--fsm-ink);
    padding: 0 var(--fsm-space-2);
    min-width: 56px;
    text-align: center;
}

/*
 * List patterns (M4) — filter bar, filter chip, sort header.
 * Tokens only, no raw hex.
 */

/* — Filter bar — */
.app-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-2);
    margin-bottom: var(--fsm-space-4);
}

.app-filter-bar__row {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    flex-wrap: wrap;
}

.app-filter-bar__search {
    flex: 1;
    min-width: 260px;
    /* Own the surface, border, and radius on the wrapper so the fill and
       the stroke share the same rounded shape. MudBlazor's outlined
       fieldset stays transparent and borderless (see below) so we don't
       render two stacked outlines or paint past the curve. */
    background-color: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-lg);
    overflow: hidden;
}

.app-filter-bar__search .mud-input-control {
    margin: 0;
}

.app-filter-bar__search .mud-input-control,
.app-filter-bar__search .mud-input-control-input-container,
.app-filter-bar__search .mud-input-root,
.app-filter-bar__search .mud-input-root-outlined,
.app-filter-bar__search .mud-input-slot,
.app-filter-bar__search .mud-input,
.app-filter-bar__search input {
    border-radius: inherit;
}

.app-filter-bar__search .mud-input-outlined-border {
    border: none;
    background-color: transparent;
    border-radius: inherit;
}

.app-filter-bar__search .mud-input-root,
.app-filter-bar__search .mud-input-root-outlined,
.app-filter-bar__search .mud-input-slot,
.app-filter-bar__search .mud-input,
.app-filter-bar__search .mud-input-adornment,
.app-filter-bar__search input {
    background-color: transparent !important;
    color: var(--fsm-ink);
}

.app-filter-bar__search .mud-input-root,
.app-filter-bar__search .mud-input-root-outlined,
.app-filter-bar__search .mud-input-slot,
.app-filter-bar__search .mud-input,
.app-filter-bar__search .mud-input-adornment {
    background-color: transparent !important;
}

/* MudBlazor's outlined input renders a <legend> inside the fieldset to
   hold a floating label. The filter-bar search uses a placeholder instead
   (no label), so the legend collapses to zero width — but in Chromium its
   default 2px padding leaves a tiny notch at the top-left corner of the
   rounded border. Collapse the legend entirely so the border reads as a
   single continuous stroke. */
.app-filter-bar__search .mud-input-outlined-border > legend {
    display: none;
}

.app-filter-bar__search .mud-input-adornment .mud-icon-root {
    color: var(--fsm-ink-soft);
}

.app-filter-bar__chips {
    display: flex;
    gap: var(--fsm-space-2);
    flex-wrap: wrap;
    align-items: center;
}

.app-filter-bar__actions {
    display: flex;
    gap: var(--fsm-space-2);
    align-items: center;
    margin-left: auto;
}

.app-filter-bar__reset {
    background: transparent;
    border: none;
    color: var(--fsm-accent);
    cursor: pointer;
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    font-weight: 600;
    padding: var(--fsm-space-2) var(--fsm-space-1);
}

.app-filter-bar__reset:hover {
    text-decoration: underline;
}

.app-filter-bar__summary {
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    color: var(--fsm-ink-soft);
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    flex-wrap: wrap;
}

.app-filter-bar__summary strong {
    color: var(--fsm-ink);
    font-weight: 600;
}

.app-filter-bar__summary-sep {
    color: var(--fsm-ink-soft);
    opacity: 0.6;
}

.app-filter-bar__status-message {
    color: var(--fsm-tone-warn-fg);
    font-weight: 500;
}

/* — Filter chip trigger — */
.app-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--fsm-space-2);
    padding: 7px 11px;
    border-radius: var(--fsm-radius-sm);
    border: 1px solid var(--fsm-line);
    background: var(--fsm-surface);
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    color: var(--fsm-ink);
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
}

.app-filter-chip:hover {
    border-color: var(--fsm-ink-soft);
}

.app-filter-chip--active {
    border-color: var(--fsm-accent);
    background: var(--fsm-accent-soft);
}

.app-filter-chip__label {
    color: var(--fsm-ink-soft);
    font-weight: 500;
}

.app-filter-chip--active .app-filter-chip__label {
    color: var(--fsm-accent);
}

.app-filter-chip__value {
    color: var(--fsm-ink);
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-filter-chip--active .app-filter-chip__value {
    color: var(--fsm-accent);
}

.app-filter-chip .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--fsm-ink-soft);
}

/* — Filter chip popover — */
.app-filter-chip-wrap {
    position: relative;
    display: inline-block;
}

.app-filter-chip__backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.app-filter-chip__popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 11;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--fsm-space-1);
    font-family: var(--fsm-font-sans);
    background: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-md);
    box-shadow: 0 8px 24px -8px rgba(22, 32, 51, 0.12);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-filter-chip__divider {
    height: 1px;
    background: var(--fsm-line-soft);
    margin: var(--fsm-space-1) 0;
}

.app-filter-chip__option-label {
    flex: 1;
    text-align: left;
}

.app-filter-chip__option-count {
    color: var(--fsm-ink-soft);
    font-family: var(--fsm-font-mono);
    font-size: 11px;
    font-weight: 500;
}

.app-filter-chip__check {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--fsm-ink-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--fsm-surface);
}

.app-filter-chip__check--on {
    background: var(--fsm-accent);
    border-color: var(--fsm-accent);
}

.app-filter-chip__check--on .mud-icon-root {
    width: 10px;
    height: 10px;
    font-size: 10px;
    color: var(--fsm-surface);
}

/* — Sort header — */
.app-sort-header {
    display: inline-flex;
    align-items: center;
    gap: var(--fsm-space-1);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--fsm-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fsm-ink-soft);
    cursor: pointer;
    line-height: 1.4;
}

.app-sort-header--active {
    color: var(--fsm-ink);
}

.app-sort-header:hover {
    color: var(--fsm-ink);
}

.app-sort-header .mud-icon-root {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

/* Pure Blazor popover — plain buttons + backdrop click-outside. Single
   selects close on pick; multi selects stay open until outside click. */
.app-filter-chip__menu-item {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--fsm-radius-sm);
    font-family: var(--fsm-font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fsm-ink);
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
}

.app-filter-chip__menu-item:hover {
    background: var(--fsm-line-soft);
}

.app-filter-chip__menu-item--selected {
    color: var(--fsm-accent);
    font-weight: 600;
    background: var(--fsm-accent-soft);
}

.app-filter-chip__menu-item--clear {
    color: var(--fsm-ink-soft);
    font-style: italic;
}

/*
 * Detail patterns (M5) — detail shell, lifecycle rail, lifecycle dialog.
 * Tokens only.
 */

/* — Detail shell layout — */
.app-detail-shell {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-4);
}

.app-detail-shell__header {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.app-detail-shell__header .app-page-header {
    /* header margin is absorbed by the shell gap */
    margin-bottom: var(--fsm-space-2);
}

.app-detail-shell__tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--fsm-line);
    font-family: var(--fsm-font-sans);
}

.app-detail-shell__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fsm-space-5);
    align-items: start;
}

.app-detail-shell__body--rail {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.app-detail-shell__main {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-4);
    min-width: 0;
}

.app-detail-shell__rail {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-4);
    position: sticky;
    top: var(--fsm-space-5);
}

@media (max-width: 1024px) {
    .app-detail-shell__body--rail {
        grid-template-columns: 1fr;
    }
    .app-detail-shell__rail {
        position: static;
    }
}

/* — Detail tab pill — utility class for tab buttons inside the shell — */
.app-detail-tab {
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: var(--fsm-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fsm-ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    line-height: 1.4;
}

.app-detail-tab:hover {
    color: var(--fsm-ink);
}

.app-detail-tab--active {
    color: var(--fsm-ink);
    border-bottom-color: var(--fsm-accent);
}

.app-detail-tab__count {
    color: var(--fsm-ink-soft);
    font-weight: 500;
    margin-left: 6px;
}

.app-detail-tab--active .app-detail-tab__count {
    color: var(--fsm-accent);
}

/* — Lifecycle rail — */
.app-lifecycle-rail {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-3);
}

.app-lifecycle-rail__row {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-1);
}

.app-lifecycle-rail__btn {
    width: 100%;
    justify-content: flex-start;
}

/* Blocked actions — quiet caption block below the allowed-action buttons. */
.app-lifecycle-rail__blocked {
    margin-top: var(--fsm-space-4);
    padding-top: var(--fsm-space-4);
    border-top: 1px solid var(--fsm-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-2);
}

.app-lifecycle-rail__blocked-head {
    /* .fsm-field-label applies uppercase/tracking; this just adds spacing. */
    margin-bottom: var(--fsm-space-1);
}

.app-lifecycle-rail__blocked-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--fsm-font-sans);
    line-height: 1.45;
}

.app-lifecycle-rail__blocked-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fsm-ink-mid);
}

.app-lifecycle-rail__blocked-reason {
    font-size: 11.5px;
    color: var(--fsm-ink-soft);
}

/* — Lifecycle dialog — */
.app-lifecycle-dialog .mud-dialog-title {
    padding-bottom: var(--fsm-space-2);
}

.app-lifecycle-dialog__title {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    font-family: var(--fsm-font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--fsm-ink);
    letter-spacing: -0.01em;
}

.app-lifecycle-dialog__title-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--fsm-radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.app-lifecycle-dialog__title-icon--warn {
    background: var(--fsm-tone-warn-bg);
    color: var(--fsm-tone-warn-fg);
}

.app-lifecycle-dialog__title-icon--bad {
    background: var(--fsm-tone-bad-bg);
    color: var(--fsm-tone-bad-fg);
}

.app-lifecycle-dialog__title-icon .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.app-lifecycle-dialog__description {
    font-family: var(--fsm-font-sans);
    font-size: 13.5px;
    color: var(--fsm-ink-mid);
    line-height: 1.5;
}

.app-lifecycle-dialog__panel {
    border-radius: var(--fsm-radius-sm);
    padding: var(--fsm-space-3) var(--fsm-space-4);
    font-family: var(--fsm-font-sans);
}

.app-lifecycle-dialog__panel--warn {
    background: var(--fsm-tone-warn-bg);
    color: var(--fsm-tone-warn-fg);
}

.app-lifecycle-dialog__panel--bad {
    background: var(--fsm-tone-bad-bg);
    color: var(--fsm-tone-bad-fg);
}

.app-lifecycle-dialog__panel .fsm-field-label {
    color: inherit;
    opacity: 0.85;
    margin-bottom: var(--fsm-space-2);
}

.app-lifecycle-dialog__list {
    margin: 0;
    padding: 0 0 0 var(--fsm-space-4);
    font-size: 13px;
    line-height: 1.55;
}

.app-lifecycle-dialog__list li {
    padding-left: 2px;
}

/* — Catalog detail — child rows (template / package summaries) — */
.catalog-child-row {
    padding: var(--fsm-space-2) var(--fsm-space-3);
    border-radius: var(--fsm-radius-sm);
    cursor: pointer;
    transition: background 120ms ease;
}

.catalog-child-row:hover {
    background: var(--fsm-surface-muted);
}

/* — User directory — truncate long synthesised display names / user ids
   (e.g. OIDC subject strings used as a fallback) so the table doesn't blow
   out into a horizontal scroll. Tooltip surfaces the full value on hover. */
.user-list-displayname,
.user-list-userid {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.user-list-displayname {
    font-weight: 600;
}

/* — Inquiry pickers (customer / location radio lists) — */
/* MudRadioGroup renders as
     <div class="mud-input-control inquiry-picker ...">
       <div class="mud-input-control-input-container">
         <label class="mud-radio">...</label>
         ...
       </div>
     </div>
   The input-container defaults to inline flow, so radios line up side-by-side.
   We force the container — and the outer wrapper — to flex-column so every
   row takes the full width. Covers both v9 and any future wrapper changes. */
.inquiry-picker,
.inquiry-picker > .mud-input-control-input-container,
.inquiry-picker .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* MudRadio renders as `label > span.mud-radio-button + span.mud-typography-child`.
   We want the whole row clickable and the radio dot vertically centered against
   the two-line label block. */
.inquiry-picker .mud-radio {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: var(--fsm-space-2) var(--fsm-space-2);
    border-radius: var(--fsm-radius-sm);
    transition: background 120ms ease;
}

.inquiry-picker .mud-radio + .mud-radio {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.inquiry-picker .mud-radio:hover {
    background: var(--fsm-surface-muted);
}

/* The label child fills the remaining width so title + trailing can space-between. */
.inquiry-picker .mud-radio > .mud-typography {
    flex: 1 1 auto;
    min-width: 0;
}

.inquiry-picker--scroll {
    max-height: 360px;
    overflow-y: auto;
    display: block;
}

/* Row layout — icon · body · trailing, baseline-aligned horizontally. */
.inquiry-picker-row {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-3);
    width: 100%;
    min-width: 0;
}

.inquiry-picker-row__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Silent by default — status lives in the trailing pill, not the icon
       chip. Matches the detail-row icon treatment so the same entity never
       appears with two different colours across screens. */
    color: var(--mud-palette-text-secondary);
    background: var(--fsm-surface-muted);
    border: 1px solid var(--mud-palette-lines-default);
}

.inquiry-picker-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inquiry-picker-row__title {
    font-family: var(--fsm-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fsm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inquiry-picker-row__subtitle {
    font-size: 12px;
    color: var(--fsm-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inquiry-picker-row__trailing {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
}

/* — Catalog / template / service-package edit dialogs — */
/* Ensure dialog content has enough room for labelled text fields and keeps
   a stable width regardless of how many rows are rendered. */
.catalog-dialog .mud-dialog-content,
.catalog-dialog .mud-dialog {
    min-width: 480px;
}

.catalog-dialog .mud-dialog-content {
    padding-top: var(--fsm-space-3);
}

.catalog-dialog .mud-input-control {
    min-width: 240px;
}

.catalog-dialog .mud-dialog-actions {
    padding: var(--fsm-space-3) var(--fsm-space-4);
}

/* — Service-package compose drag-and-drop picker — */
.compose-drop-container {
    display: block;
}

.compose-drop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fsm-space-4);
}

@media (max-width: 720px) {
    .compose-drop-grid { grid-template-columns: 1fr; }
}

.compose-drop-col {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-2);
    min-width: 0;
}

.compose-drop-col__title {
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fsm-ink-muted);
}

.compose-drop-zone {
    min-height: 120px;
    padding: var(--fsm-space-2);
    border: 1px dashed var(--fsm-line);
    border-radius: var(--fsm-radius-md);
    background: var(--fsm-surface-muted);
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-1);
}

.compose-drop-zone--selected {
    background: var(--fsm-surface);
}

.compose-drop-zone--hover {
    border-color: var(--fsm-accent);
    border-style: solid;
    background: var(--fsm-accent-soft);
}

/* Used inside a section card where the card already provides a frame —
   drop the outer border and minimum height so the list hugs its content. */
.compose-drop-zone--flush {
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.compose-drop-item {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    padding: var(--fsm-space-2) var(--fsm-space-3);
    background: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-sm);
    cursor: grab;
    user-select: none;
}

.compose-drop-item:active {
    cursor: grabbing;
}

.compose-drop-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.compose-drop-item__actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.compose-drop-item__name {
    font-family: var(--fsm-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fsm-ink);
}

.compose-drop-item__meta {
    font-size: 12px;
    color: var(--fsm-ink-muted);
}

.compose-drop-zone--selected .compose-drop-item {
    counter-increment: compose-order;
}

.compose-drop-zone--selected {
    counter-reset: compose-order;
}

.compose-drop-zone--selected .compose-drop-item__name::before {
    content: counter(compose-order) ". ";
    color: var(--fsm-ink-muted);
    font-weight: 400;
    margin-right: 4px;
}

/* — Conflict dialog — */
.app-conflict-dialog .mud-dialog-title {
    padding-bottom: var(--fsm-space-2);
}

.app-conflict-dialog__title {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    font-family: var(--fsm-font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--fsm-ink);
    letter-spacing: -0.01em;
}

.app-conflict-dialog__title-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--fsm-radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--fsm-tone-info-bg);
    color: var(--fsm-tone-info-fg);
}

.app-conflict-dialog__title-icon .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.app-conflict-dialog__description {
    font-family: var(--fsm-font-sans);
    font-size: 13.5px;
    color: var(--fsm-ink-mid);
    line-height: 1.5;
}

.app-conflict-dialog__panel {
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-sm);
    overflow: hidden;
    font-family: var(--fsm-font-sans);
}

.app-conflict-dialog__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
}

.app-conflict-dialog__table thead th {
    background: var(--fsm-surface-muted);
    color: var(--fsm-ink-mid);
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: var(--fsm-space-2) var(--fsm-space-3);
    border-bottom: 1px solid var(--fsm-line);
}

.app-conflict-dialog__table tbody td {
    padding: var(--fsm-space-2) var(--fsm-space-3);
    border-bottom: 1px solid var(--fsm-line);
    vertical-align: top;
    color: var(--fsm-ink);
}

.app-conflict-dialog__table tbody tr:last-child td {
    border-bottom: none;
}

.app-conflict-dialog__field-label {
    font-weight: 600;
    color: var(--fsm-ink);
    white-space: nowrap;
}

.app-conflict-dialog__warn {
    display: flex;
    align-items: flex-start;
    gap: var(--fsm-space-2);
    background: var(--fsm-tone-warn-bg);
    color: var(--fsm-tone-warn-fg);
    padding: var(--fsm-space-3) var(--fsm-space-4);
    border-radius: var(--fsm-radius-sm);
    font-size: 13px;
    line-height: 1.5;
    font-family: var(--fsm-font-sans);
}

.app-conflict-dialog__warn .mud-icon-root {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/*
 * Wizard shell (M6) — left rail + center + optional right preview.
 * Tokens only.
 */

.app-wizard-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0;
    min-height: 600px;
    background: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-md);
    overflow: hidden;
}

.app-wizard-shell--preview {
    grid-template-columns: 240px minmax(0, 1fr) 320px;
}

.app-wizard-shell__rail {
    border-right: 1px solid var(--fsm-line);
    background: var(--fsm-surface);
    padding: var(--fsm-space-8) var(--fsm-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-1);
    font-family: var(--fsm-font-sans);
}

.app-wizard-shell__rail-header {
    margin-bottom: var(--fsm-space-6);
}

.app-wizard-shell__rail-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--fsm-ink);
    letter-spacing: -0.01em;
    margin-top: 2px;
    line-height: 1.25;
}

.app-wizard-shell__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.app-wizard-shell__step {
    position: relative;
    display: flex;
    gap: var(--fsm-space-3);
    padding: var(--fsm-space-3) 0;
}

.app-wizard-shell__connector {
    position: absolute;
    left: 11px;
    top: 32px;
    bottom: -6px;
    width: 1px;
    background: var(--fsm-line-soft);
}

.app-wizard-shell__connector--done {
    background: var(--fsm-accent);
}

.app-wizard-shell__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    font-family: var(--fsm-font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--fsm-surface);
}

.app-wizard-shell__dot--done {
    background: var(--fsm-accent);
    color: var(--fsm-surface);
    border: none;
}

.app-wizard-shell__dot--done .mud-icon-root {
    width: 13px;
    height: 13px;
    font-size: 13px;
}

.app-wizard-shell__dot--current {
    background: var(--fsm-surface);
    border: 2px solid var(--fsm-accent);
    color: var(--fsm-accent);
}

.app-wizard-shell__dot--current .app-wizard-shell__dot-inner {
    width: 7px;
    height: 7px;
    background: var(--fsm-accent);
    border-radius: 50%;
}

.app-wizard-shell__dot--future {
    background: var(--fsm-surface);
    border: 1px solid var(--fsm-line);
    color: var(--fsm-ink-soft);
}

.app-wizard-shell__step-label {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.app-wizard-shell__step--current .app-wizard-shell__step-title {
    color: var(--fsm-ink);
    font-weight: 600;
}

.app-wizard-shell__step--done .app-wizard-shell__step-title {
    color: var(--fsm-ink-mid);
    font-weight: 500;
}

.app-wizard-shell__step--future .app-wizard-shell__step-title {
    color: var(--fsm-ink-soft);
    font-weight: 500;
}

.app-wizard-shell__step-title {
    font-size: 13px;
    line-height: 1.3;
}

.app-wizard-shell__step-hint {
    font-size: 11.5px;
    color: var(--fsm-ink-soft);
    margin-top: 2px;
    line-height: 1.4;
}

/* Main column */
.app-wizard-shell__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-wizard-shell__content {
    flex: 1;
    padding: var(--fsm-space-8) var(--fsm-space-12);
    overflow-y: auto;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

.app-wizard-shell__footer {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    padding: var(--fsm-space-4) var(--fsm-space-6);
    border-top: 1px solid var(--fsm-line);
    background: var(--fsm-surface);
}

.app-wizard-shell__footer-spacer {
    flex: 1;
}

/* Right preview column */
.app-wizard-shell__preview {
    border-left: 1px solid var(--fsm-line);
    background: var(--fsm-bg);
    padding: var(--fsm-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-4);
}

/* Wizard step content utilities */
.app-wizard-step {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-4);
}

.app-wizard-step__title {
    font-family: var(--fsm-font-sans);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fsm-ink);
    margin: 0;
    line-height: 1.15;
}

.app-wizard-step__lede {
    font-family: var(--fsm-font-sans);
    font-size: 14px;
    color: var(--fsm-ink-mid);
    margin: 0;
    line-height: 1.5;
}

.app-wizard-step__options {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-2);
    margin-top: var(--fsm-space-2);
}

.app-wizard-option {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: var(--fsm-space-4);
    row-gap: 2px;
    padding: var(--fsm-space-4) var(--fsm-space-5);
    border: 1px solid var(--fsm-line);
    border-radius: var(--fsm-radius-md);
    background: var(--fsm-surface);
    cursor: pointer;
    font-family: var(--fsm-font-sans);
    text-align: left;
    color: var(--fsm-ink);
    transition: border-color 0.12s, background 0.12s;
}

.app-wizard-option:hover {
    border-color: var(--fsm-ink-soft);
}

.app-wizard-option--selected {
    border-color: var(--fsm-accent);
    background: var(--fsm-accent-tint);
}

.app-wizard-option .mud-icon-root {
    grid-row: 1 / span 2;
    align-self: center;
    width: 28px;
    height: 28px;
    font-size: 28px;
    color: var(--fsm-ink-mid);
}

.app-wizard-option--selected .mud-icon-root {
    color: var(--fsm-accent);
}

.app-wizard-option__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--fsm-ink);
}

.app-wizard-option__hint {
    font-size: 12.5px;
    color: var(--fsm-ink-soft);
    line-height: 1.4;
}

.app-wizard-review {
    display: flex;
    flex-direction: column;
    gap: var(--fsm-space-4);
}

.app-wizard-review__row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: baseline;
    gap: var(--fsm-space-4);
    padding: var(--fsm-space-3) 0;
    border-bottom: 1px solid var(--fsm-line-soft);
}

.app-wizard-review__row:last-child {
    border-bottom: none;
}

.app-wizard-review__edit {
    font-size: 12px;
    font-weight: 600;
    color: var(--fsm-accent);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

@media (max-width: 1024px) {
    .app-wizard-shell {
        grid-template-columns: 1fr;
    }
    .app-wizard-shell--preview {
        grid-template-columns: 1fr;
    }
    .app-wizard-shell__rail {
        border-right: none;
        border-bottom: 1px solid var(--fsm-line);
        padding: var(--fsm-space-5);
    }
    .app-wizard-shell__preview {
        border-left: none;
        border-top: 1px solid var(--fsm-line);
    }
    .app-wizard-shell__content {
        padding: var(--fsm-space-6);
    }
}

/*
 * Avatar primitive — initials default, icon-on-tint for non-person kinds.
 * Sizes: 24 / 28 / 36 / 48. Fixed saturation/lightness on the deterministic
 * hue keeps the palette visually harmonised across a rail of avatars.
 */
.app-avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-family: var(--fsm-font-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    background: var(--fsm-ink-soft);
    user-select: none;
    overflow: hidden;
}

.app-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.app-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.app-avatar--md { width: 36px; height: 36px; font-size: 13px; }
.app-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

.app-avatar__initials {
    line-height: 1;
}

.app-avatar--location {
    background: var(--fsm-accent-soft);
    color: var(--fsm-accent);
}

.app-avatar--entity {
    background: var(--fsm-line-soft);
    color: var(--fsm-ink-mid);
}

.app-avatar--xs .mud-icon-root { width: 12px; height: 12px; font-size: 12px; }
.app-avatar--sm .mud-icon-root { width: 14px; height: 14px; font-size: 14px; }
.app-avatar--md .mud-icon-root { width: 18px; height: 18px; font-size: 18px; }
.app-avatar--lg .mud-icon-root { width: 22px; height: 22px; font-size: 22px; }

/* Contact + Location cards — row layout with leading avatar. */
.contact-card__row,
.location-card__row {
    display: flex;
    align-items: flex-start;
    gap: var(--fsm-space-3);
}

.contact-card__body,
.location-card__body {
    flex: 1;
    min-width: 0;
}

.contact-card--compact .contact-card__row,
.location-card--compact .location-card__row {
    align-items: center;
    gap: var(--fsm-space-2);
}

/* Activity timeline — toolbar above the feed with the system-messages toggle. */
.app-timeline__toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 var(--fsm-space-1);
}

.app-timeline__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--fsm-space-2);
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    color: var(--fsm-ink-mid);
    cursor: pointer;
    user-select: none;
}

.app-timeline__toggle input {
    accent-color: var(--fsm-accent);
    cursor: pointer;
}

.app-timeline__toggle:hover {
    color: var(--fsm-ink);
}

.app-timeline__toggle-count {
    color: var(--fsm-ink-soft);
    font-family: var(--fsm-font-mono);
    font-size: 11px;
}

/* Asset hierarchy — ledger-style list of child assets. */
.app-hierarchy {
    display: flex;
    flex-direction: column;
    margin-top: var(--fsm-space-3);
    border-top: 1px solid var(--fsm-line-soft);
}

.app-hierarchy__row {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-2);
    padding: var(--fsm-space-3) var(--fsm-space-1);
    border-bottom: 1px solid var(--fsm-line-soft);
    font-family: var(--fsm-font-sans);
    color: var(--fsm-ink);
}

.app-hierarchy__row:last-child {
    border-bottom: none;
}

/* Main click target = avatar + name/id + status. Renders as a flat button
   so the whole row is keyboard-focusable and screen-reader-navigable. */
.app-hierarchy__main {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fsm-space-3);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    border-radius: var(--fsm-radius-sm);
}

.app-hierarchy__main:hover {
    background: var(--fsm-line-soft);
}

/* Inline "+ add sub-asset" button — quiet by default, accent on hover. */
.app-hierarchy__add {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--fsm-radius-sm);
    color: var(--fsm-ink-soft);
    cursor: pointer;
}

.app-hierarchy__add:hover {
    color: var(--fsm-accent);
    background: var(--fsm-accent-soft);
}

.app-hierarchy__add .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.app-hierarchy__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-hierarchy__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fsm-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-hierarchy__id {
    color: var(--fsm-ink-soft);
    font-size: 11px;
}

.app-hierarchy__chevron {
    color: var(--fsm-ink-soft);
}

.app-hierarchy__main:hover + .app-hierarchy__add + .app-hierarchy__chevron,
.app-hierarchy__main:hover ~ .app-hierarchy__chevron {
    color: var(--fsm-accent);
}

/* Breadcrumb trail inside the Hierarchy card — "Compressor › Pump › Sensor"
   shows where the current asset sits in the tree. The last item is the
   current asset (not a link), earlier items link to their own detail. */
.app-hierarchy-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fsm-space-1);
    font-family: var(--fsm-font-sans);
    font-size: 12.5px;
    padding: 0 0 var(--fsm-space-3);
}

.app-hierarchy-trail__link {
    color: var(--fsm-ink-mid);
    text-decoration: none;
}

.app-hierarchy-trail__link:hover {
    color: var(--fsm-accent);
    text-decoration: underline;
}

.app-hierarchy-trail__sep {
    color: var(--fsm-ink-soft);
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.app-hierarchy-trail__current {
    color: var(--fsm-ink);
    font-weight: 600;
}

/* "N deeper · open to explore" caption — rendered at the depth where
   the card stops expanding, inheriting the same left-padding as the
   last visible row so the tree structure stays legible. */
.app-hierarchy__more {
    padding: var(--fsm-space-2) var(--fsm-space-1);
    font-family: var(--fsm-font-sans);
    font-size: 12px;
    font-style: italic;
    color: var(--fsm-ink-soft);
    border-bottom: 1px solid var(--fsm-line-soft);
}

.app-hierarchy__more:last-child {
    border-bottom: none;
}

/* — User administration tabs — a page-level section divider that sits
   flush with the page content, not a boxed-in component. The toolbar
   is a thin line under the page title; each panel renders a standard
   list layout (filter bar + AppCard table) underneath, matching the
   rest of the master-data list pages. */
.user-admin-tabs {
    margin-bottom: var(--fsm-space-5);
}

.user-admin-tabs .mud-tabs-toolbar,
.user-admin-tabs .mud-tabs-toolbar-inner {
    padding: 0;
    background: transparent;
    min-height: 44px;
    border-bottom: 1px solid var(--fsm-line);
}

.user-admin-tabs .mud-tab {
    font-family: var(--fsm-font-sans);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fsm-ink-soft);
    min-height: 44px;
    min-width: 0;
    padding: 0 var(--fsm-space-4);
}

.user-admin-tabs .mud-tab:first-child {
    padding-left: 0;
}

.user-admin-tabs .mud-tab.mud-tab-active {
    color: var(--fsm-ink);
}

.user-admin-tabs .mud-tab-slider {
    background-color: var(--fsm-accent);
    height: 2px;
}

.user-admin-tabs .mud-tabs-panels {
    padding-top: var(--fsm-space-5);
}