/* ====================================================================
   UI.Mobile shell CSS - minimal scaffold. All colors reference theme
   tokens; tenant-specific overrides come from dbo.Tenant.CSS injected
   inline by MainLayout. Mobile-first: assume touch + narrow viewport.
   ==================================================================== */

:root {
    --theme-primary: #0d6efd;
    --theme-primary-rgb: 13, 110, 253;
    --theme-on-primary: #ffffff;
    --theme-success: #198754;
    --theme-danger: #dc3545;
    --theme-warning: #ffc107;
    --theme-background: #ffffff;
    --theme-background-subtle: #f8f9fa;
    --theme-surface: #ffffff;
    --theme-text: #212529;
    --theme-text-muted: #6c757d;
    --theme-border: #dee2e6;

    /* Bridge Bootstrap CSS variables to the theme system so .btn-primary,
       .text-primary, .bg-primary, .alert-success / .alert-danger, focus
       outlines, etc. respect the tenant theme automatically. TenantTheme.razor
       overrides --theme-* at runtime; Bootstrap follows because its vars
       inherit from these. */
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-success: var(--theme-success);
    --bs-danger: var(--theme-danger);
    --bs-warning: var(--theme-warning);
    --bs-body-bg: var(--theme-background);
    --bs-body-color: var(--theme-text);
    --bs-border-color: var(--theme-border);
    --bs-secondary-bg: var(--theme-background-subtle);

    /* Bootstrap 5.3 .btn-primary reads these for background + text color.
       Without the override, .btn-primary stays Bootstrap-blue regardless
       of tenant palette. */
    --bs-btn-bg: var(--theme-primary);
    --bs-btn-color: var(--theme-on-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-link-color: var(--theme-primary);
    --bs-link-hover-color: var(--theme-primary);
}

/* Explicit overrides for Bootstrap .btn-primary - the variable-bridge above
   covers most cases but .btn-primary has specific per-class variables that
   need to point at the theme tokens, not at Bootstrap defaults. */
.btn-primary {
    --bs-btn-bg: var(--theme-primary);
    --bs-btn-color: var(--theme-on-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--theme-primary), white 12%);
    --bs-btn-hover-color: var(--theme-on-primary);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-primary), white 12%);
    --bs-btn-active-bg: color-mix(in srgb, var(--theme-primary), black 8%);
    --bs-btn-active-color: var(--theme-on-primary);
    --bs-btn-active-border-color: color-mix(in srgb, var(--theme-primary), black 8%);
    --bs-btn-disabled-bg: var(--theme-primary);
    --bs-btn-disabled-color: var(--theme-on-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
}

/* Blazor infrastructure */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--theme-border);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--theme-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.mobile-loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: mobile-spin 0.8s linear infinite;
}

/* Mobile table view (ViewPage / ReportPage table-mode toggle).
   Horizontal-scroll for wide reports; sticky header row so column labels
   stay visible while the user swipes. Theme tokens only - no hardcoded
   hex per platform doctrine. */
.mobile-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
}
.mobile-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.mobile-table th,
.mobile-table td {
    padding: 0.55rem 0.85rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--theme-border);
    text-align: left;
    color: var(--theme-text);
}
.mobile-table th {
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 1;
}
.mobile-table tbody tr:nth-child(even) {
    background: color-mix(in oklch, var(--theme-surface) 96%, var(--theme-text) 4%);
}
.mobile-table tbody tr:active {
    background: var(--theme-background-subtle);
}

@keyframes mobile-spin {
    to { transform: rotate(360deg); }
}

/* Shell layout */

html, body {
    height: 100%;
    margin: 0;
    background-color: var(--theme-background-subtle);
    color: var(--theme-text);
    -webkit-tap-highlight-color: transparent;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.mobile-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--theme-primary);
}

.mobile-brand i {
    font-size: 1.4rem;
}

.mobile-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mobile-user-name {
    font-size: 0.9rem;
    color: var(--theme-text-muted);
}

/* Connectivity / outbox status pills */

.mobile-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    justify-content: center;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.status-online {
    background: rgba(25, 135, 84, 0.12);
    color: var(--theme-success);
}

.status-offline {
    background: rgba(220, 53, 69, 0.12);
    color: var(--theme-danger);
}

.status-outbox {
    background: rgba(13, 110, 253, 0.12);
    color: var(--theme-primary);
}

/* When the pill is tappable (outbox count > 0), give it a tiny press
   feedback and remove the default browser button chrome. */
.status-outbox-btn {
    border: none;
    cursor: pointer;
    font: inherit;
    transition: transform 0.08s ease-out, background 0.15s ease;
}

.status-outbox-btn:active {
    transform: scale(0.96);
    background: rgba(13, 110, 253, 0.22);
}

/* Build-stamp pill. Muted/discreet so it doesn't compete with the
   online + outbox indicators visually, but always visible so we can
   confirm which bundle the browser actually loaded. Hover/long-press
   shows the full timestamp via the title attribute. */
.status-build {
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.7rem;
}

/* Outbox drawer styles (reuses menu-drawer skeleton) */

.outbox-drawer {
    /* Same width / slide pattern as MenuDrawer - inherits everything
       except the body styling below. */
}

.outbox-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-background-subtle);
}

.outbox-summary-count {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    flex: 1;
}

.outbox-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem 0.5rem 1rem;
}

.outbox-item {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    margin: 0.4rem 0;
}

.outbox-item-stuck {
    border-color: rgba(220, 53, 69, 0.35);
    background: rgba(220, 53, 69, 0.04);
}

.outbox-item-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.outbox-item-icon {
    color: var(--theme-primary);
    font-size: 1.2rem;
    margin-top: 0.1rem;
}

.outbox-item-text {
    flex: 1;
    min-width: 0;
}

.outbox-item-tag {
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outbox-item-meta {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.outbox-item-attempts {
    color: var(--theme-danger);
}

.outbox-item-error {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: rgba(220, 53, 69, 0.08);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--theme-danger);
    word-break: break-word;
}

.mobile-main {
    flex: 1;
    padding: 1rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--theme-text-muted);
}

/* Login */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--theme-background-subtle);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--theme-primary);
    font-weight: 600;
    font-size: 1.25rem;
}

.login-brand-icon i {
    font-size: 2rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--theme-surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.login-header {
    padding: 1.25rem 1.5rem 0.5rem;
    text-align: center;
}

.login-title {
    margin: 0;
    font-weight: 600;
}

.login-subtitle {
    margin: 0.25rem 0 0;
    color: var(--theme-text-muted);
    font-size: 0.9rem;
}

.login-body {
    padding: 1rem 1.5rem 1.5rem;
}

.login-btn {
    min-height: 48px;
    font-weight: 500;
}

.login-back-link {
    color: var(--theme-text-muted);
}

.login-check-badge {
    background-color: var(--theme-primary);
}

/* Forms touch sizing */

.form-control, .btn {
    min-height: 44px;
}

.list-group-item {
    padding: 0.875rem 1rem;
}

/* Jobs page */

.jobs-page {
    padding-bottom: 2rem;
}

.jobs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.jobs-sync-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.mobile-loading-spinner-sm {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: mobile-spin 0.8s linear infinite;
}

.jobs-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--theme-background-subtle);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.jobs-tab {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--theme-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.jobs-tab.active {
    background: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.jobs-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.jobs-tab.active .jobs-tab-count {
    background: rgba(13, 110, 253, 0.12);
    color: var(--theme-primary);
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.job-card {
    display: block;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    text-decoration: none;
    color: var(--theme-text);
    transition: transform 0.08s, border-color 0.15s;
}

.job-card:active {
    transform: scale(0.985);
    border-color: var(--theme-primary);
}

.job-card-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.job-card-header-row {
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.job-card-footer-row {
    justify-content: space-between;
    margin-top: 0.4rem;
}

.job-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.job-card-number {
    font-weight: 600;
    font-size: 1rem;
}

.job-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.job-chip-done {
    background: rgba(25, 135, 84, 0.12);
    color: var(--theme-success);
}

.job-chip-visit-done {
    background: rgba(108, 117, 125, 0.15);
    color: var(--theme-text-muted);
}

.job-card-customer {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--theme-text);
    margin-top: 0.15rem;
}

.job-card-location {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-bottom: 0.15rem;
}

.job-card-visit {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: middle;
}

.equipment-card-install {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-top: 0.15rem;
}

.job-date {
    font-size: 0.78rem;
    color: var(--theme-text-muted);
}

.job-priority {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.job-priority-critical {
    background: rgba(220, 53, 69, 0.15);
    color: var(--theme-danger);
}

.job-priority-high {
    background: rgba(255, 193, 7, 0.18);
    color: #b88200;
}

.job-priority-normal {
    background: rgba(13, 110, 253, 0.12);
    color: var(--theme-primary);
}

.job-priority-low {
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
}

/* Job detail */

.job-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
}

.job-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-link {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.job-section {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 1rem;
}

.job-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.job-section-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.job-subsection-title {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text);
    display: flex;
    align-items: center;
}

.job-section-count {
    margin-left: auto;
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.job-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
}

.job-meta-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.job-meta-grid .full-width {
    grid-column: 1 / -1;
}

.meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}

.meta-value {
    font-size: 0.95rem;
    color: var(--theme-text);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.tel-link {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
}

.gate-code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    background: var(--theme-background-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.job-description {
    margin: 0.75rem 0 0 0;
    color: var(--theme-text);
    line-height: 1.4;
}

.location-address {
    margin: 0;
    font-size: 0.9rem;
    color: var(--theme-text-muted);
    text-align: center;
}

.equipment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipment-card {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-background-subtle);
}

.equipment-card-name {
    font-weight: 500;
    font-size: 0.95rem;
}

.equipment-card-serial {
    font-size: 0.78rem;
    color: var(--theme-text-muted);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin-top: 0.15rem;
}

/* ===================================================================
   Mobile home page - Metro/Windows-Phone live tiles aesthetic.
   Flat solid colors, sharp corners, big icons, bold labels. The
   palette deliberately echoes WP7/8 "accent colors" - the user
   pointed and we obliged.
   =================================================================== */

.home-page {
    padding: 0.4rem 0.6rem 1.5rem;
}

.home-greeting {
    margin: 0.5rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--theme-text);
}

.home-greeting-name {
    font-weight: 600;
}

.home-hint {
    padding: 0 0.5rem;
}

.metro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

@media (min-width: 480px) {
    .metro-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 720px) {
    .metro-grid { grid-template-columns: repeat(4, 1fr); }
}

.metro-tile {
    position: relative;
    border: none;
    color: white;
    padding: 0.85rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0; /* Metro = sharp corners, deliberate */
    transition: transform 0.08s ease-out, filter 0.15s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
}

.metro-tile-sq {
    aspect-ratio: 1 / 1;
}

.metro-tile-wide {
    aspect-ratio: 2 / 1;
    grid-column: span 2;
}

.metro-tile-hero {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 1;
    min-height: 110px;
    padding: 1.1rem;
}

.metro-tile:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

.metro-tile-icon {
    font-size: 1.7rem;
    line-height: 1;
}

.metro-tile-hero .metro-tile-icon {
    font-size: 2.4rem;
}

.metro-tile-label {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.1;
    word-break: break-word;
}

.metro-tile-hero .metro-tile-label {
    font-size: 1.45rem;
    font-weight: 300;
}

.metro-tile-live {
    position: absolute;
    bottom: 0.7rem;
    right: 0.85rem;
    font-size: 0.85rem;
    font-weight: 300;
    opacity: 0.92;
    letter-spacing: 0.02em;
}

.metro-tile-hero .metro-tile-live {
    font-size: 1.1rem;
    bottom: 1.1rem;
    right: 1.1rem;
}

/* Metro palette - eight WP-era accent colors. Pick is deterministic
   via hash of InternalName so tile and drawer entry share their hue.
   Sat / lightness tweaked to read on white backgrounds. */
/* The base 8-color Metro palette is intentionally hardcoded - the
   Windows-Phone-style multicolor home grid is a design choice independent
   of tenant branding. Tile colors stay stable across reloads via the
   ColorSeed hash so a user's tiled "Customer List" always shows up the
   same color. */
.tile-blue    { background: #0078D7; }
.tile-cyan    { background: #00BCF2; }
.tile-teal    { background: #00B294; }
.tile-green   { background: #009E49; }
.tile-orange  { background: #FF8C00; }
.tile-red     { background: #E81123; }
.tile-magenta { background: #B4009E; }
.tile-purple  { background: #5C2D91; }

/* Tenant-themed tile color - reserved for hero / brand-anchor tiles
   that should always reflect the current tenant's primary brand. The
   "My Jobs" hero on the home page is the canonical user. */
.tile-primary { background: var(--theme-primary); color: var(--theme-on-primary); }

.stripe-blue    { background: #0078D7; }
.stripe-cyan    { background: #00BCF2; }
.stripe-teal    { background: #00B294; }
.stripe-green   { background: #009E49; }
.stripe-orange  { background: #FF8C00; }
.stripe-red     { background: #E81123; }
.stripe-magenta { background: #B4009E; }
.stripe-purple  { background: #5C2D91; }

/* ===================================================================
   Hamburger button in the header
   =================================================================== */

.mobile-hamburger {
    background: transparent;
    border: none;
    color: var(--theme-text);
    font-size: 1.5rem;
    padding: 0.3rem 0.5rem;
    margin-right: 0.4rem;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-hamburger:active {
    background: var(--theme-background-subtle);
}

/* ===================================================================
   Slide-in drawer menu (off-canvas, right side)
   =================================================================== */

.menu-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
    z-index: 100;
}

.menu-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 84vw;
    max-width: 360px;
    background: var(--theme-surface);
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    z-index: 101;
    overflow-y: auto;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.menu-drawer.open {
    transform: translateX(0);
}

.menu-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--theme-border);
}

.menu-drawer-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.menu-drawer-close {
    background: transparent;
    border: none;
    color: var(--theme-text);
    font-size: 1.1rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
}

.menu-drawer-close:active {
    background: var(--theme-background-subtle);
}

.menu-drawer-list {
    flex: 1;
    overflow-y: auto;
}

.menu-drawer-divider {
    padding: 0.85rem 1rem 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-text-muted);
    border-bottom: 1px solid var(--theme-border);
}

.menu-drawer-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.85rem 0.85rem;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
    text-decoration: none;
    cursor: pointer;
    min-height: 52px;
}

.menu-drawer-item:active {
    background: var(--theme-background-subtle);
}

.menu-drawer-item-child {
    padding-left: 2.5rem;
}

.menu-drawer-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.menu-drawer-icon {
    font-size: 1.15rem;
    color: var(--theme-text-muted);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.menu-drawer-label {
    flex: 1;
    font-size: 0.95rem;
}

.menu-drawer-chevron {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

/* ===================================================================
   Form / View / Report stub pages
   =================================================================== */

.stub-page {
    padding: 0.75rem 1rem;
}

/* Arrival banner - sticky stack at top of screen, beneath the header */

.arrival-stack {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    pointer-events: none;
}

.arrival-banner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: var(--theme-primary);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    animation: arrival-slide-in 0.25s ease-out;
}

.arrival-banner > i {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.arrival-text {
    flex: 1;
    min-width: 0;
}

.arrival-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
    font-weight: 600;
}

.arrival-where {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arrival-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.arrival-dismiss {
    background: transparent;
    border: none;
    color: white;
    opacity: 0.8;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
}

.arrival-dismiss:hover {
    opacity: 1;
    background: rgba(255,255,255,0.15);
}

@keyframes arrival-slide-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ===================================================================
   Form runner - mobile-portrait, single column, big touch targets.
   List view: stack of tappable rows. Detail view: stacked labeled
   fields with sticky save bar at bottom.
   =================================================================== */

.form-runner {
    padding-bottom: 5rem; /* room for the sticky save bar */
}

/* List view header + new button */

.form-list-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
}

.form-list-title {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-new-btn {
    background: var(--theme-primary);
    color: white;
    border: none;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
}

.form-new-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.form-locked-banner {
    margin: 0.4rem 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: rgba(13, 110, 253, 0.08);
    color: var(--theme-primary);
    border-left: 3px solid var(--theme-primary);
    font-size: 0.78rem;
    border-radius: 4px;
}

.form-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
}

.form-list-row {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    padding-right: 2.25rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
    position: relative;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.form-list-row:active {
    transform: scale(0.99);
}

.form-list-row:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border-color: color-mix(in oklch, var(--theme-primary) 25%, var(--theme-border));
}

/* Arc C - thumbnail slot for image-binary fields. Leading 52px square
   so the row scans like an iOS contact card. */
.form-list-row-thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--theme-background-subtle);
    align-self: center;
}

.form-list-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.form-list-row-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-list-row-primary {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.25;
}

/* Arc C - rich secondary lines. Each carries an optional leading icon
   and a value. Truncates with ellipsis on narrow phones so the row
   stays single-line per content line. */
.form-list-row-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-list-row-line-icon {
    color: color-mix(in oklch, var(--theme-text-muted) 70%, var(--theme-primary));
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.form-list-row-line-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-section count chips on hierarchical list cards. Shown beneath the
   secondary lines: e.g. "3 service locations - 7 equipment" so the
   tech sees the drill-into hint at a glance. */
.form-list-row-chips {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.form-list-row-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--theme-text-muted);
    background: var(--theme-background-subtle);
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    white-space: nowrap;
}

.form-list-row-chip i {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Legacy single-secondary class (pending / queued rows still use it). */
.form-list-row-secondary {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

/* Pending optimistic-UI row - shown while the save is in the outbox */
.form-list-row-pending {
    background: var(--theme-background-subtle);
    cursor: default;
    opacity: 0.85;
}

.form-list-row-pending:active {
    transform: none;
}

.form-list-row-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: var(--theme-primary);
    color: var(--theme-on-primary, #fff);
    line-height: 1.2;
}

.form-list-row-chevron {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

/* ============================================================
   Arc C - data-first additions
   ============================================================ */

/* Search bar on list views. Subtle, sits between header + list. */
.form-search {
    position: relative;
    margin: 0.5rem 0.75rem 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--theme-text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.form-search-input {
    flex: 1 1 auto;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 0.55rem 0.85rem 0.55rem 2.1rem;
    font-size: 0.95rem;
    color: var(--theme-text);
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.form-search-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--theme-primary) 20%, transparent);
}

.form-search-clear {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--theme-text-muted);
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.75rem;
}

.form-search-clear:hover {
    background: var(--theme-background-subtle);
    color: var(--theme-text);
}

.form-search-summary {
    padding: 0.15rem 1rem 0.35rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Edit (pencil) button shown in view-mode header. Mirrors form-new-btn
   visually so users learn one chrome pattern. */
.form-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--theme-primary);
    color: var(--theme-on-primary, #fff);
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.1s ease-out, transform 0.08s ease-out;
}

.form-edit-btn:hover {
    background: color-mix(in oklch, var(--theme-primary) 90%, black);
}

.form-edit-btn:active {
    transform: scale(0.97);
}

/* Read-mode field display - spec list style. Label above value, both
   left-aligned, no input chrome. Empty values render as a muted dash. */
.form-display {
    padding: 0.5rem 0.75rem 6rem;  /* room above the home indicator */
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.form-display-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--theme-border);
}

.form-display-field:last-child {
    border-bottom: none;
}

.form-display-field--empty .form-display-field__value {
    color: var(--theme-text-muted);
}

.form-display-field__label {
    font-size: 0.72rem;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.form-display-field__value {
    font-size: 1rem;
    color: var(--theme-text);
    word-break: break-word;
}

.form-display-field__text {
    display: inline-block;
    white-space: pre-wrap;
}

/* Tappable tel: / mailto: link rendered inside a form field's value when
   the property looks like a phone or email. Polish #4 - matches the
   primary theme color + subtle underline so the user sees it's tappable.
   stop-propagation in the .razor keeps the row-tap from racing the dial. */
.form-display-field__contact-link {
    display: inline-block;
    color: var(--theme-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}
.form-display-field__contact-link:hover,
.form-display-field__contact-link:active {
    color: color-mix(in oklch, var(--theme-primary) 80%, var(--theme-on-primary) 20%);
}

.form-display-field__empty {
    color: var(--theme-text-muted);
    font-style: italic;
}

.form-display-field__image-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.form-display-field__image {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    display: block;
}

.form-display-field__image-caption {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin-top: 0.25rem;
}

.form-display-field__file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--theme-background-subtle);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.1s ease-out;
}

.form-display-field__file-chip:hover {
    background: color-mix(in oklch, var(--theme-primary) 8%, var(--theme-background-subtle));
}

/* Drill view's read-only banner - shown when the user drilled while
   viewing the parent record (so they know rows aren't tappable). */
.form-drill-readonly-banner {
    margin: 0.5rem 0.75rem;
    padding: 0.5rem 0.85rem;
    background: color-mix(in oklch, var(--theme-primary) 8%, var(--theme-surface));
    border: 1px solid color-mix(in oklch, var(--theme-primary) 18%, var(--theme-border));
    border-radius: 8px;
    color: var(--theme-text);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Detail view */

.form-detail-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
}

.form-detail-tag {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.12);
    color: var(--theme-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-validation {
    margin: 0.5rem 0.75rem 0;
}

.form-fields {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.form-section-title {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted);
    font-weight: 600;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-field-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text);
}

.form-required {
    color: var(--theme-danger);
    margin-left: 0.15rem;
}

.form-field-input {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--theme-surface);
    color: var(--theme-text);
}

.form-field-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.form-field-input:disabled {
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
}

.form-field-textarea {
    min-height: 90px;
    resize: vertical;
}

.form-field-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236c757d' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2rem;
}

.form-field-currency {
    position: relative;
    display: flex;
    align-items: stretch;
}

.form-field-currency-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    background: var(--theme-background-subtle);
    border: 1px solid var(--theme-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--theme-text-muted);
    font-size: 1rem;
}

.form-field-currency .form-field-input {
    border-radius: 0 8px 8px 0;
    flex: 1;
}

.binary-image-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.binary-image {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-background-subtle);
    cursor: zoom-in;
}

.binary-caption {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.binary-audio audio,
.binary-video video {
    width: 100%;
    border-radius: 8px;
}

.binary-launch-pdf,
.binary-launch-generic {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--theme-text);
    background: var(--theme-surface);
}

.binary-launch-pdf > i:first-child {
    color: var(--theme-danger);
    font-size: 1.6rem;
}

.binary-launch-generic > i:first-child {
    color: var(--theme-text-muted);
    font-size: 1.6rem;
}

.binary-launch-name {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binary-launch-icon {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

.form-field-placeholder {
    padding: 0.8rem 0.9rem;
    background: var(--theme-background-subtle);
    border: 1px dashed var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

/* Binary file picker (empty slot) - two side-by-side buttons:
   Take photo (camera capture) AND Choose file (library / browser). */

.binary-picker-group {
    display: flex;
    gap: 0.5rem;
}

.binary-picker {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 0.7rem;
    background: var(--theme-primary);
    color: var(--theme-on-primary, #fff);
    border: 1px solid var(--theme-primary);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: transform 0.08s ease-out, filter 0.15s ease;
    min-width: 0; /* allow flex shrink */
}

.binary-picker:active {
    transform: scale(0.98);
    filter: brightness(0.92);
}

.binary-picker-secondary {
    background: var(--theme-background-subtle);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.binary-picker-secondary:active {
    filter: brightness(0.95);
}

.binary-picker-busy {
    pointer-events: none;
    opacity: 0.7;
}

/* Hide the native file input - the parent <label> is the visual target */
.binary-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Binary pending - file picked but not yet uploaded */

.binary-pending {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    background: var(--theme-background-subtle);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.binary-image-pending {
    cursor: default;
}

.binary-pending-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.binary-pending-icon {
    color: var(--theme-primary);
    font-size: 1.4rem;
    flex: 0 0 auto;
}

.binary-pending-text {
    flex: 1;
    min-width: 0;
}

.binary-pending-name {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binary-pending-hint {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.binary-pending-remove {
    background: transparent;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.binary-pending-remove:active {
    color: var(--theme-danger);
    border-color: var(--theme-danger);
}

/* Binary existing - replace + remove actions live below the preview */

.binary-existing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.binary-existing-actions {
    display: flex;
    gap: 0.5rem;
}

.binary-replace {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}

.binary-replace:active {
    background: var(--theme-background-subtle);
    border-color: var(--theme-primary);
}

.binary-existing-remove {
    background: transparent;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text-muted);
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.binary-existing-remove:active {
    color: var(--theme-danger);
    border-color: var(--theme-danger);
}

/* Share button - sits alongside Replace / Remove on existing-binary
   previews. Visible only when the device supports the Web Share API
   (feature-detected by IShareService). */

.binary-share {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    border-radius: 6px;
    color: var(--theme-on-primary, #fff);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.binary-share:active {
    filter: brightness(0.92);
}

.binary-share:disabled {
    opacity: 0.6;
    cursor: default;
}

.binary-share-error {
    padding: 0.4rem 0.6rem;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 6px;
    color: var(--theme-danger);
    margin-bottom: 0.4rem;
    word-break: break-word;
}

/* "This form is not built for mobile" soft-block screen.
   Triggered by Form.Compatibility excluding "mobile". */

.form-wrong-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.25rem;
    min-height: 60vh;
    gap: 0.75rem;
}

.form-wrong-channel-icon {
    font-size: 3.5rem;
    color: var(--theme-text-muted);
    opacity: 0.7;
}

.form-wrong-channel-title {
    font-size: 1.25rem;
    margin: 0.5rem 0 0.25rem;
    color: var(--theme-text);
}

.form-wrong-channel-message {
    font-size: 0.95rem;
    color: var(--theme-text-muted);
    max-width: 24rem;
    line-height: 1.4;
}

.form-wrong-channel-message em {
    color: var(--theme-text);
    font-style: normal;
    font-weight: 500;
}

/* Tenant switcher block at the top of MenuDrawer.
   Hidden entirely when user has only one accessible tenant. */

.menu-drawer-tenant {
    padding: 0.6rem 0.85rem 0.7rem;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-background-subtle);
}

.menu-drawer-tenant-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    margin-bottom: 0.4rem;
}

.menu-drawer-tenant-name {
    font-weight: 500;
    color: var(--theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-drawer-tenant-switcher {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.menu-drawer-tenant-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted);
    margin-top: 0.2rem;
}

.menu-drawer-tenant-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: transform 0.08s ease-out, background-color 0.15s ease;
}

.menu-drawer-tenant-option:active {
    transform: scale(0.99);
    background: var(--theme-background-subtle);
}

.menu-drawer-tenant-option:disabled {
    opacity: 0.6;
    cursor: default;
}

.menu-drawer-tenant-error {
    margin-top: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 6px;
    color: var(--theme-danger);
    font-size: 0.8rem;
    word-break: break-word;
}

/* Dropdown / combo loading shimmer while the resolver populates items */
.form-field-loading {
    display: flex;
    align-items: center;
    color: var(--theme-text-muted);
    font-size: 0.9rem;
    padding: 0.75rem 0.9rem;
    background: var(--theme-background-subtle);
    border: 1px dashed var(--theme-border);
}

/* Hierarchical form - section cards on the primary detail view that
   drill into the child entity list (Customer.Locations, etc.) */

.form-section-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 4.5rem 0; /* leaves room for the sticky save bar */
}

.form-section-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.85rem 0.95rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.08s ease-out, background-color 0.15s ease;
}

.form-section-card:active {
    transform: scale(0.99);
    background: var(--theme-background-subtle);
}

.form-section-card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--theme-primary);
    color: var(--theme-on-primary, #fff);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.form-section-card-text {
    flex: 1;
    min-width: 0;
}

.form-section-card-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--theme-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Numeric count badge on a hierarchical section card title - shown
   when the form has listSections AND the user is viewing an existing
   primary record. Reads "(3)" beside "Service Locations" so the drill
   target's leaf count is visible before tapping in. */
.form-section-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-on-primary);
    background: var(--theme-primary);
    border-radius: 999px;
}

.form-section-card-hint {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.form-section-card-chevron {
    color: var(--theme-text-muted);
    flex: 0 0 auto;
}

/* Drilled-section view - breadcrumb at top + tappable child rows */

.form-drill-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.85rem 0.8rem;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-surface);
    position: sticky;
    top: 0;
    z-index: 5;
}

.form-drill-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--theme-text);
}

.form-drill-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem 4.5rem;
}

.form-drill-row {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    transition: transform 0.08s ease-out;
}

.form-drill-row:active {
    transform: scale(0.99);
}

.form-drill-row-primary {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--theme-text);
}

.form-drill-row-secondary {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

.form-drill-row-chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-muted);
}

/* Sticky save bar at bottom of detail view */

.form-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    /* Save button bigger than cancel - field-tech-fat-finger optimization */
}

.form-save-bar .btn {
    min-height: 48px;
    font-weight: 500;
    flex: 1;
}

.form-save-bar .btn-primary {
    flex: 2; /* primary action gets 2/3 of the row */
}

/* Map embed */

.map-embed {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.map-embed-img {
    display: block;
    width: 100%;
    height: auto;
}

.map-embed-cta {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: var(--theme-primary);
    color: white;
    font-size: 0.8rem;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.map-embed-fallback {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-primary);
    text-decoration: none;
    background: var(--theme-background-subtle);
}

/* ─────────────────────────────────────────────────────────────────
   ChildRowEditor - bottom-sheet modal for editing one child row of
   a list section. z-index above MenuDrawer/OutboxDrawer because the
   row-editor is ALWAYS the top concern when open. Translates the
   menu-drawer's slide-from-right pattern into a slide-from-bottom
   sheet that fits portrait phones better than a side drawer.
   ───────────────────────────────────────────────────────────────── */

.row-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
    z-index: 200;
}

.row-editor-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.row-editor {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92vh;
    background: var(--theme-surface);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    transition: transform 0.22s ease-out;
    z-index: 201;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
}

.row-editor.open {
    transform: translateY(0);
}

.row-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--theme-border);
    flex-shrink: 0;
}

.row-editor-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--theme-text);
}

.row-editor-close {
    background: transparent;
    border: none;
    color: var(--theme-text);
    font-size: 1.1rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
}

.row-editor-close:active {
    background: var(--theme-background-subtle);
}

.row-editor-error {
    margin: 0.75rem 1rem 0;
    font-size: 0.9rem;
}

.row-editor-scope {
    padding: 0.5rem 1rem;
    background: var(--theme-background-subtle);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

.row-editor-scope-sep {
    margin: 0 0.4rem;
    color: var(--theme-text-muted);
    opacity: 0.6;
}

.row-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    /* iOS safe-area inset for the home indicator. */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

.row-editor-empty {
    padding: 2rem 1rem;
    text-align: center;
}

.row-editor-field-error {
    margin: -0.4rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--theme-danger, #c0392b);
}

/* Per-field upload-in-flight indicator shown below the field while a
   PendingBinary is being POSTed to /api/v1/assets. The editor's Save
   button is disabled until every uploading field clears. */
.row-editor-field-uploading {
    display: flex;
    align-items: center;
    margin: -0.4rem 0 0.6rem;
    font-size: 0.85rem;
    color: var(--theme-text-muted);
}

/* Recursive drill section between the editor body and footer. One
   button per child section whose ParentSectionKey matches THIS
   editor's section. Tapping a button auto-saves the row + pushes a
   new drill frame, so the user can dive into Equipment-under-this-
   Location (or whatever child the form designer wired up). */
.row-editor-drill {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--theme-background-subtle);
    border-top: 1px solid var(--theme-border);
}

.row-editor-drill-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-text-muted);
}

.row-editor-drill-btn {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: var(--theme-surface);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    cursor: pointer;
}

.row-editor-drill-btn:active {
    background: var(--theme-background-subtle);
}

/* Inline error below a primary-form FormFieldRenderer. Matches the
   editor's row-editor-field-error styling so both surfaces feel
   uniform. */
.form-field-error {
    margin: -0.55rem 0 0.7rem;
    font-size: 0.8rem;
    color: var(--theme-danger, #c0392b);
    line-height: 1.2;
}

/* Radio variant for Choice fields. Pill-style buttons wrap onto
   multiple lines on narrow screens. Active option gets the theme's
   primary color treatment; touch-friendly minimum hit area. */
.form-field-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.form-field-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    background: var(--theme-surface);
    color: var(--theme-text);
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    min-height: 38px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.form-field-radio input[type="radio"] {
    /* Hide the native radio - the label IS the visual control. The
       :checked + class-toggle drives the active style below. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-field-radio.checked {
    background: var(--theme-primary);
    color: var(--theme-on-primary);
    border-color: var(--theme-primary);
}

.form-field-radio:active {
    transform: scale(0.97);
}

.row-editor-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border);
    background: var(--theme-surface);
    flex-shrink: 0;
    /* iOS safe-area inset so the buttons clear the home indicator. */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
}

.row-editor-footer .btn {
    flex: 1;
}

/* ─────────────────────────────────────────────────────────────────
   Drilled section affordances - + Add at top, per-row trash + edit
   chevron, in-place "queued" badge for buffered deletes.
   ───────────────────────────────────────────────────────────────── */

.form-drill-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--theme-background-subtle);
    border-bottom: 1px solid var(--theme-border);
}

.form-drill-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--theme-primary);
    color: var(--theme-on-primary);
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.form-drill-add-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-drill-row {
    position: relative;
}

.form-drill-row-dirty {
    background: rgba(255, 230, 110, 0.12);
}

.form-drill-row-new {
    background: rgba(120, 220, 140, 0.12);
}

.form-drill-row-deleted {
    opacity: 0.55;
    text-decoration: line-through;
    background: rgba(220, 80, 80, 0.08);
}

/* Row with pending validation errors from a failed multi-save. Red
   left-border accent + light pink wash + error chip + error message
   line below the primary text. Tapping the row re-opens the editor
   with the field-level errors pre-populated. */
.form-drill-row-error {
    background: rgba(220, 80, 80, 0.06);
    border-left: 3px solid var(--theme-danger, #c0392b);
}

.form-drill-row-badge-error {
    background: var(--theme-danger, #c0392b);
    color: #fff;
    border-color: transparent;
    font-weight: 500;
}

.form-drill-row-error-msg {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--theme-danger, #c0392b);
    line-height: 1.25;
}

/* Restructure drill row to a horizontal flex container so the optional
   thumbnail can sit at the leading edge alongside the body text. The
   body button keeps its own padding; the row container's padding goes
   to zero. Action icons (trash) stay absolute-positioned per existing
   rules and don't affect this layout. */
.form-drill-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
}

.form-drill-row-body {
    flex: 1;
    min-width: 0;
}

/* Thumbnail container at the leading edge. Square image, rounded
   corners, lazy-loaded. Falls back gracefully when the source 404s
   (browser broken-image icon - rare given the proxy URL is auth-aware
   and stable). */
.form-drill-row-thumb {
    flex: 0 0 auto;
    padding: 0.5rem 0 0.5rem 0.85rem;
    display: flex;
    align-items: center;
}

.form-drill-row-thumb img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--theme-background-subtle);
    border: 1px solid var(--theme-border);
    display: block;
}

.form-drill-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
}

.form-drill-row-action {
    background: transparent;
    border: none;
    color: var(--theme-text-muted);
    padding: 0.35rem 0.4rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.95rem;
}

.form-drill-row-action:active {
    background: var(--theme-background-subtle);
}

.form-drill-row-action.danger {
    color: var(--theme-danger, #c0392b);
}

.form-drill-row-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 999px;
    background: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border);
}

.form-save-bar-count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}