* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    --color-bg: #0b1220;
    --color-surface: #121b2d;
    --color-surface-alt: #0f1727;
    --color-surface-soft: rgba(148, 163, 184, 0.08);
    --color-sidebar: #0a1323;
    --color-border: rgba(148, 163, 184, 0.18);
    --color-border-strong: rgba(148, 163, 184, 0.12);
    --color-border-muted: rgba(148, 163, 184, 0.14);
    --color-text: #e8eef8;
    --color-text-muted: #98a7bf;
    --color-text-subtle: #7787a2;
    --color-primary: #4f8cff;
    --color-primary-strong: #3169e6;
    --color-primary-soft: rgba(79, 140, 255, 0.14);
    --color-primary-border: rgba(79, 140, 255, 0.3);
    --color-primary-text: #a8c9ff;
    --color-primary-contrast: #ffffff;
    --color-danger: #e24b4b;
    --color-input-bg: rgba(11, 18, 32, 0.78);
    --color-input-border: rgba(148, 163, 184, 0.18);
    --color-success-bg: rgba(21, 128, 61, 0.22);
    --color-success-border: rgba(34, 197, 94, 0.5);
    --color-success-text: #dcfce7;
    --color-error-bg: rgba(153, 27, 27, 0.22);
    --color-error-border: rgba(239, 68, 68, 0.5);
    --color-error-text: #fee2e2;
    --color-warning-bg: rgba(245, 158, 11, 0.16);
    --color-warning-border: rgba(245, 158, 11, 0.46);
    --color-warning-text: #fde68a;
    --color-overlay: rgba(2, 6, 23, 0.88);
    --shadow-shell: 0 18px 50px rgba(2, 6, 23, 0.28);
    --shadow-panel: 0 10px 28px rgba(2, 6, 23, 0.18);
    --shadow-raised: 0 12px 26px rgba(2, 6, 23, 0.24);
    --radius-panel: 18px;
    --radius-soft: 14px;
    --control-height: 44px;
    --control-height-small: 36px;
    --color-focus-ring: rgba(147, 197, 253, 0.78);
    --color-focus-ring-soft: rgba(79, 140, 255, 0.24);
}

:root[data-theme="light"] {
    color-scheme: light;
    --color-bg: #eef3f9;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f8fc;
    --color-surface-soft: rgba(71, 85, 105, 0.08);
    --color-sidebar: #f5f8fc;
    --color-border: rgba(71, 85, 105, 0.14);
    --color-border-strong: rgba(71, 85, 105, 0.08);
    --color-border-muted: rgba(71, 85, 105, 0.12);
    --color-text: #152033;
    --color-text-muted: #53657d;
    --color-text-subtle: #70819a;
    --color-primary: #2563eb;
    --color-primary-strong: #1e53c5;
    --color-primary-soft: rgba(37, 99, 235, 0.1);
    --color-primary-border: rgba(37, 99, 235, 0.18);
    --color-primary-text: #2050c4;
    --color-primary-contrast: #ffffff;
    --color-danger: #dc2626;
    --color-input-bg: rgba(255, 255, 255, 0.92);
    --color-input-border: rgba(71, 85, 105, 0.14);
    --color-success-bg: rgba(34, 197, 94, 0.12);
    --color-success-border: rgba(34, 197, 94, 0.35);
    --color-success-text: #166534;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-error-border: rgba(239, 68, 68, 0.28);
    --color-error-text: #991b1b;
    --color-warning-bg: rgba(245, 158, 11, 0.14);
    --color-warning-border: rgba(245, 158, 11, 0.34);
    --color-warning-text: #92400e;
    --color-overlay: rgba(15, 23, 42, 0.58);
    --shadow-shell: 0 18px 40px rgba(148, 163, 184, 0.18);
    --shadow-panel: 0 8px 24px rgba(148, 163, 184, 0.14);
    --shadow-raised: 0 10px 22px rgba(148, 163, 184, 0.18);
    --color-focus-ring: rgba(37, 99, 235, 0.58);
    --color-focus-ring-soft: rgba(37, 99, 235, 0.16);
}

body {
    margin: 0;
    font-family: "Segoe UI Variable", "Aptos", "Inter", "Helvetica Neue", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    line-height: 1.45;
    overflow-x: hidden;
}

input,
select,
textarea,
button {
    font: inherit;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(79, 140, 255, 0.14), transparent 28%),
        radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.1), transparent 24%);
    opacity: 0.9;
}

.app-shell {
    display: grid;
    grid-template-columns: 312px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 34%),
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-soft) 100%);
}

.auth-card {
    width: min(100%, 560px);
    display: grid;
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: var(--shadow-panel);
}

.auth-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.auth-card h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.05;
}

.auth-copy {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.auth-form {
    display: grid;
    gap: 14px;
}

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field input {
    width: 100%;
    padding-right: 82px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    min-width: 58px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--color-border-muted);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}

.auth-helper-panel {
    margin-top: 4px;
}

.auth-demo-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.auth-demo-user {
    width: 100%;
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--color-border-muted);
    background: var(--color-surface-soft);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.auth-demo-user:hover,
.auth-demo-user:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

.auth-demo-user strong {
    font-size: 14px;
}

.auth-demo-user span,
.auth-demo-user p {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(180deg, var(--color-sidebar) 0%, color-mix(in srgb, var(--color-sidebar) 92%, black) 100%);
    border-right: 1px solid var(--color-border-strong);
    padding: 18px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    transition: padding 300ms cubic-bezier(0.22, 1, 0.36, 1), gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-header {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: var(--radius-panel);
    background: linear-gradient(180deg, rgba(79, 140, 255, 0.08), rgba(79, 140, 255, 0.02));
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
    transition: padding 280ms cubic-bezier(0.22, 1, 0.36, 1), gap 280ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: gap 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-brand-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    max-width: 220px;
    max-height: 80px;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), max-width 260ms cubic-bezier(0.22, 1, 0.36, 1), max-height 220ms ease, filter 180ms ease;
}

.sidebar-collapse-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    flex: 0 0 auto;
}

.sidebar-collapse-btn:hover {
    border-color: var(--color-primary-border);
    transform: translateY(-1px);
}

.sidebar-collapse-btn svg,
.app-nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, white));
    color: var(--color-primary-contrast);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-raised);
}

.sidebar-brand-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.sidebar-header h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.sidebar-header p {
    margin: 0;
    color: var(--color-text-muted);
    max-width: 22ch;
}

.sidebar-header p:empty {
    display: none;
}

.mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-alt) 88%, transparent);
}

.mode-switch-btn {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mode-switch-btn:hover {
    color: var(--color-text);
}

.mode-switch-btn.active {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent) inset;
}

.theme-toggle {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    transition: margin-top 260ms cubic-bezier(0.22, 1, 0.36, 1), gap 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.theme-toggle-row {
    position: relative;
    display: grid;
    gap: 8px;
    transition: gap 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.theme-toggle-icon {
    position: absolute;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.theme-toggle-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle select {
    width: 100%;
    padding-left: 36px;
}

.theme-toggle-segmented {
    display: none;
}

.theme-segment-btn {
    border: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent);
    color: var(--color-text-muted);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.theme-segment-btn:hover {
    border-color: var(--color-primary-border);
    color: var(--color-text);
}

.theme-segment-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.theme-segment-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav {
    display: grid;
    gap: 10px;
    transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-nav-group {
    display: grid;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    transition: gap 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.app-nav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 2px;
}

.app-nav-btn {
    width: 100%;
    border: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent);
    color: var(--color-text);
    padding: 11px 13px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease, width 260ms cubic-bezier(0.22, 1, 0.36, 1), min-width 260ms cubic-bezier(0.22, 1, 0.36, 1), height 260ms cubic-bezier(0.22, 1, 0.36, 1), min-height 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms cubic-bezier(0.22, 1, 0.36, 1), gap 260ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1), grid-template-columns 260ms cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.app-nav-btn:hover {
    transform: translateY(-1px);
    border-color: var(--color-primary-border);
    background: color-mix(in srgb, var(--color-primary-soft) 62%, var(--color-surface-alt));
}

.app-nav-btn.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset, var(--shadow-panel);
    background: var(--color-primary-soft);
}

.app-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transform: translateY(1px);
    transition: color 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-nav-btn.active .app-nav-icon,
.app-nav-btn:hover .app-nav-icon {
    color: var(--color-primary-text);
}

.app-nav-copy {
    display: grid;
    gap: 0;
    min-width: 0;
    max-width: 220px;
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), max-width 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 180ms ease;
}

.app-nav-btn-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sidebar-view {
    display: block;
}

.sidebar-queue-panel,
.sidebar-filter-panel {
    margin: 0;
}

#sidebarInspections {
    display: grid;
    gap: 14px;
}

#sidebarInspections.hidden,
#sidebarInspections.inspection-sidebar-secondary,
body.inspection-list-route #sidebarInspections,
body.inspection-detail-route #sidebarInspections {
    display: none;
}

.sidebar-footer {
    margin-top: auto;
}

.sidebar-account-panel {
    background: linear-gradient(180deg, rgba(79, 140, 255, 0.06), rgba(79, 140, 255, 0.02));
}

.sidebar-account-panel h3 {
    margin-bottom: 12px;
}

.sidebar-account-summary {
    display: grid;
    gap: 10px;
}

.sidebar-account-summary strong {
    display: block;
}

.sidebar-account-summary span,
.sidebar-account-summary p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.workspace-shell {
    min-width: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    z-index: 40;
    transition: opacity 220ms ease;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 360px) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 24px;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

.topbar-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.topbar-heading-copy {
    min-width: 0;
}

.topbar-heading h1 {
    margin: 4px 0 0 0;
    font-size: 30px;
    letter-spacing: -0.03em;
}

.topbar-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.topbar-eyebrow:empty {
    display: none;
}

.topbar-subtitle {
    margin: 6px 0 0 0;
    color: var(--color-text-muted);
    max-width: 64ch;
}

.topbar-subtitle:empty {
    display: none;
}

.topbar-center {
    display: grid;
    justify-self: end;
    width: min(100%, 360px);
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 0;
    align-content: center;
}

.topbar-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.topbar-search-form input {
    min-width: 0;
}

.search-field {
    position: relative;
    min-width: 0;
}

.search-field input {
    width: 100%;
    padding-left: 40px;
}

input[type="search"]::placeholder {
    color: var(--color-text-muted);
    opacity: 0.78;
}

.search-field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.search-field-icon svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-center-meta {
    display: none;
}

.topbar-center-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.topbar-center-value {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.4;
}

.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-utility {
    display: none;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: 13px;
    white-space: nowrap;
}

.topbar-utility:empty {
    display: none;
}

.topbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-results-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.search-results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.search-summary-card {
    border: 1px solid var(--color-border-muted);
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--color-surface-soft), transparent);
}

.search-summary-card strong {
    display: block;
    margin-bottom: 6px;
}

.search-results-groups {
    display: grid;
    gap: 18px;
}

.search-result-section {
    display: grid;
    gap: 12px;
}

.search-result-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.search-result-section-header h3 {
    margin: 0;
}

.search-result-count {
    color: var(--color-text-muted);
    font-size: 13px;
}

.search-result-list {
    display: grid;
    gap: 12px;
}

.search-result-row {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-surface-soft), transparent);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.search-result-row:hover,
.search-result-row:focus-visible {
    border-color: var(--color-primary-border);
    background: color-mix(in srgb, var(--color-primary-soft) 62%, transparent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-panel);
}

.search-result-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.search-result-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.search-result-subtitle {
    color: var(--color-text-muted);
    font-size: 13px;
}

.search-result-meta {
    display: grid;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.search-empty-state {
    border: 1px dashed var(--color-border);
    border-radius: 16px;
    padding: 20px;
    background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
    color: var(--color-text-muted);
}

.topbar-nav-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-text);
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.topbar-nav-toggle:hover,
.topbar-nav-toggle:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

.topbar-nav-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-mobile-search-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-text);
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.topbar-mobile-search-toggle:hover,
.topbar-mobile-search-toggle:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

.topbar-mobile-search-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-content {
    padding: 26px;
    display: grid;
    gap: 22px;
    align-content: start;
    min-width: 0;
    overflow-x: clip;
}

.panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, white 4%), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    padding: 22px;
    box-shadow: var(--shadow-panel);
}

.panel h2,
.panel h3 {
    margin-top: 0;
    letter-spacing: -0.02em;
}

.panel h3 {
    margin-bottom: 6px;
}

.panel > .panel {
    background: var(--color-surface-alt);
    box-shadow: none;
}

.app-view,
.panel,
.management-column,
.summary-card,
.detail-card,
.settings-card,
.report-card,
.management-record-row,
.workspace-shell {
    min-width: 0;
}

.summary-card,
.detail-card,
.settings-catalog-item,
.management-record-row,
.report-card,
.asset-card,
.context-card,
.panel {
    overflow-wrap: anywhere;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 14px;
}

.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-grid textarea,
.form-grid button {
    width: 100%;
}

.form-grid textarea {
    grid-column: 1 / -1;
}

body input,
body select,
body textarea {
    padding: 12px 13px;
    border-radius: 12px;
    border: 1px solid var(--color-input-border);
    background: var(--color-input-bg);
    color: var(--color-text);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
body select {
    min-height: var(--control-height);
}

body textarea {
    min-height: 110px;
    resize: vertical;
}

body input:focus,
body select:focus,
body textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring-soft), 0 0 0 1px color-mix(in srgb, var(--color-primary) 78%, white 22%) inset;
    background: color-mix(in srgb, var(--color-input-bg) 92%, white 8%);
}

body input[type="checkbox"],
body input[type="radio"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--color-primary);
    vertical-align: middle;
    flex: 0 0 auto;
    cursor: pointer;
}

body input.field-invalid,
body select.field-invalid,
body textarea.field-invalid {
    border-color: var(--color-error-border);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-error-bg) 55%, transparent);
}

.field-control {
    min-width: 0;
}

.field-feedback {
    margin-top: 6px;
    color: var(--color-error-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

input::placeholder {
    color: var(--color-text-subtle);
}

label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--control-height);
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.15;
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease, background 140ms ease;
    box-shadow: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

.btn-small {
    width: auto;
    min-height: var(--control-height-small);
    padding: 8px 11px;
    font-size: 12px;
    border-radius: 10px;
}

.btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 88%, white 12%), var(--color-primary));
    color: var(--color-primary-contrast);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.btn-secondary {
    background: color-mix(in srgb, var(--color-surface-alt) 86%, white 14%);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 88%, white 12%), var(--color-danger));
    color: #ffffff;
}

.full-width {
    width: 100%;
    margin-bottom: 16px;
}

.sidebar-actions {
    display: grid;
    gap: 10px;
}

.sidebar-actions .full-width {
    margin-bottom: 0;
}

.sidebar-filter-panel {
    margin: 0;
    padding: 18px;
}

.app-feedback {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.modal-feedback {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.app-feedback-message {
    min-width: 0;
}

.app-feedback-dismiss {
    appearance: none;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: currentColor;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    opacity: 0.76;
}

.app-feedback-dismiss:hover,
.app-feedback-dismiss:focus-visible {
    border-color: currentColor;
    opacity: 1;
    outline: none;
}

.app-feedback.success {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.app-feedback.info {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.app-feedback.warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.app-feedback.error {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.app-view {
    display: none;
}

.app-view.active {
    display: grid;
    gap: 20px;
}

.filter-stack {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

select:disabled,
input:disabled,
textarea:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.report-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.context-card {
    background: linear-gradient(180deg, var(--color-surface-alt), color-mix(in srgb, var(--color-surface-alt) 90%, black));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
    min-height: 146px;
}

.context-card h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: var(--color-primary-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.context-card p {
    margin: 0;
}

.context-card .helper-note {
    margin-bottom: 10px;
}

.context-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.entity-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.entity-nav-btn {
    border: 1px solid var(--color-border-muted);
    background: var(--color-surface-alt);
    color: var(--color-text);
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.entity-nav-btn:hover {
    transform: translateY(-1px);
}

.entity-nav-btn.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.entity-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.entity-detail-panel {
    margin-top: 16px;
    min-height: 160px;
}

.workspace-subsection-title {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.02em;
}

#inspectionTablePanel .workspace-subsection-title,
#companiesManagementPanel .workspace-subsection-title,
#contactsManagementPanel .workspace-subsection-title,
#locationsManagementPanel .workspace-subsection-title,
#assetsManagementPanel .workspace-subsection-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.inspection-workspace-panel {
    display: grid;
    gap: 22px;
}

.inspection-workspace-stack {
    display: grid;
    gap: 22px;
}

.inspection-list-panel {
    display: grid;
    gap: 14px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}

.inspection-list-panel > .section-toolbar {
    padding: 16px 18px 0;
}

.table-toolbar .helper-note {
    margin-top: 0;
}

.inspection-table-filters {
    grid-template-columns: minmax(260px, 1.6fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(150px, 0.8fr);
    margin-top: 0;
    margin-inline: 18px;
    padding: 12px;
    border-radius: 8px;
}

.management-table-panel {
    width: 100%;
}

.management-table-filters {
    grid-template-columns: minmax(260px, 1.6fr) minmax(160px, 0.7fr);
}

.contacts-table-filters,
.locations-table-filters {
    grid-template-columns: minmax(260px, 1.6fr) minmax(180px, 1fr) minmax(160px, 0.7fr);
}

.inspection-table-shell {
    margin: 0 18px 18px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.inspection-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
}

.management-table {
    min-width: 900px;
}

.inspection-table th,
.inspection-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.inspection-table th {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--color-surface-alt);
}

.inspection-table th.table-preview-control-header,
.inspection-table td.table-preview-toggle-cell {
    width: 42px;
    min-width: 42px;
    padding-left: 10px;
    padding-right: 6px;
    text-align: center;
}

.inspection-table th.bulk-select-header,
.inspection-table td.bulk-select-cell {
    width: 42px;
    min-width: 42px;
    padding-left: 12px;
    padding-right: 6px;
    text-align: center;
}

.bulk-select-header input,
.bulk-select-cell input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.bulk-select-cell input:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 18px 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-primary-border);
    border-radius: 8px;
    background: var(--color-primary-soft);
}

.bulk-action-count {
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.bulk-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.table-preview-toggle {
    width: 30px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent);
    color: var(--color-text-muted);
    line-height: 1;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.table-preview-toggle svg,
.inspection-collapse-btn svg,
.inspection-substatus-caret svg,
.btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.table-preview-toggle:hover,
.table-preview-toggle:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    outline: none;
}

.inspection-table tbody tr:last-child td {
    border-bottom: none;
}

.inspection-table-row {
    cursor: pointer;
    transition: background 140ms ease, box-shadow 140ms ease;
}

.inspection-table-row:hover,
.inspection-table-row:focus-visible {
    background: var(--color-surface-soft);
    outline: none;
}

.inspection-table-row.selected {
    background: var(--color-primary-soft);
    box-shadow: 3px 0 0 var(--color-primary) inset;
}

.inspection-table-row.has-preview-open {
    background: color-mix(in srgb, var(--color-primary-soft) 54%, transparent);
}

.table-preview-row td {
    padding: 12px 14px 14px 52px;
    background: color-mix(in srgb, var(--color-surface-alt) 78%, var(--color-surface));
    border-bottom: 1px solid var(--color-border);
}

.table-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 16px;
    align-items: start;
}

.table-preview-item {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.table-preview-item strong {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.table-preview-item span {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.inspection-number-cell {
    font-weight: 800;
    color: var(--color-primary-text);
}

.inspection-table td.inspection-table-actions {
    width: 78px;
    min-width: 78px;
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
    white-space: nowrap;
}

.inspection-table th:last-child {
    width: 78px;
    min-width: 78px;
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
}

.row-action-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    min-width: 34px;
}

.row-action-menu summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    list-style: none;
}

.row-action-menu summary::-webkit-details-marker {
    display: none;
}

.row-action-menu summary:hover,
.row-action-menu summary:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    outline: none;
}

.row-action-menu-items {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: grid;
    min-width: 156px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.row-action-menu-backdrop,
.row-action-menu-sheet-header {
    display: none;
}

.row-action-menu-items button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.row-action-menu-items button:hover,
.row-action-menu-items button:focus-visible {
    background: var(--color-surface-alt);
    outline: none;
}

.row-action-menu-items button.danger {
    color: var(--color-error-text);
}

.row-action-menu-items button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.inspection-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--color-border-muted);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.inspection-status-badge.status-complete {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.inspection-status-badge.status-in-progress {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.inspection-status-badge.status-draft {
    border-color: var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-alt) 88%, var(--color-text-muted));
    color: var(--color-text);
}

.inspection-status-badge.status-active {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.inspection-status-badge.status-inactive {
    border-color: var(--color-border-muted);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.management-detail-panel {
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.management-detail-panel .entity-detail-panel {
    margin-top: 0;
}

.workspace-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.workspace-breadcrumb a {
    color: var(--color-primary-text);
    text-decoration: none;
}

.workspace-breadcrumb a:hover,
.workspace-breadcrumb a:focus-visible {
    text-decoration: underline;
}

.workspace-breadcrumb-bottom {
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.workspace-breadcrumb-bottom > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.workspace-breadcrumb-bottom .btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.workspace-breadcrumb-bottom .btn:hover,
.workspace-breadcrumb-bottom .btn:focus-visible {
    text-decoration: none;
}

.workspace-intro {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.workspace-intro {
    display: none;
}

.workspace-intro-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.workspace-intro-copy {
    color: var(--color-text-muted);
    max-width: 72ch;
}

.management-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 22px;
    margin-top: 18px;
    align-items: start;
}

.management-column {
    min-width: 0;
}

.management-column:first-child {
    border-right: 1px solid var(--color-border);
    padding-right: 18px;
}

.management-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
    gap: 12px;
    margin-top: 10px;
    align-items: end;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.management-filter-actions {
    display: flex;
    justify-content: flex-end;
}

.management-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    margin-bottom: 6px;
}

.assets-table-filters {
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(150px, 1fr));
}

.asset-modal-dialog .inspection-setup-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.asset-modal-dialog .inspection-setup-tab-panel.active {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

@media (max-width: 1180px) {
    .topbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .topbar-right {
        justify-content: flex-start;
    }

    .topbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border-strong);
    }

    .management-layout {
        grid-template-columns: 1fr;
    }

    .management-column:first-child {
        border-right: none;
        padding-right: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .management-filters {
        grid-template-columns: 1fr;
    }

    .assets-table-filters {
        grid-template-columns: 1fr;
    }

    .management-filter-actions {
        justify-content: flex-start;
    }
}

.management-record-list {
    display: grid;
    gap: 10px;
    max-height: 68vh;
    overflow: auto;
    padding-right: 6px;
}

.management-record-row {
    display: grid;
    gap: 10px;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-surface-alt), color-mix(in srgb, var(--color-surface-alt) 92%, black));
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: var(--color-text);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.platform-row-select {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    display: grid;
    gap: 10px;
    cursor: pointer;
    font: inherit;
}

.management-record-row:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-panel);
}

.management-record-row.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset, var(--shadow-panel);
    background: var(--color-primary-soft);
}

.management-record-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.management-record-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.management-record-meta {
    display: grid;
    gap: 7px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.35;
}

.management-record-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    border: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface) 84%, transparent);
    font-size: 12px;
    font-weight: 700;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.settings-catalog {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.settings-catalog-item {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.settings-catalog-item strong {
    display: block;
}

.settings-catalog-item span {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.settings-stack {
    display: grid;
    gap: 18px;
}

.settings-card {
    height: 100%;
    background: var(--color-surface-alt);
}

.settings-toggle-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.settings-toggle {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-alt);
}

.detail-stack {
    display: grid;
    gap: 18px;
}

.record-detail-stack {
    gap: 14px;
}

.record-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.record-detail-breadcrumb span:last-child {
    min-width: 0;
    color: var(--color-text);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.detail-summary-card {
    scroll-margin-top: 92px;
}

.detail-summary-heading {
    align-items: flex-start;
}

.detail-summary-heading .record-detail-breadcrumb {
    margin-bottom: 10px;
}

.detail-summary-badges {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.detail-summary-table {
    width: 100%;
}

.detail-section {
    scroll-margin-top: 92px;
}

.detail-section-header {
    min-height: 52px;
}

.record-bottom-breadcrumb {
    margin-top: 2px;
}

.detail-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.detail-card {
    background: linear-gradient(180deg, var(--color-surface-alt), color-mix(in srgb, var(--color-surface-alt) 94%, black));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
}

.detail-card strong {
    display: block;
    margin-bottom: 6px;
}

.detail-card p {
    margin: 0 0 6px 0;
}

.record-summary-list {
    display: grid;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    overflow: hidden;
}

.record-summary-list--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.record-summary-list--inspection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-summary-row {
    display: grid;
    grid-template-columns: minmax(118px, 0.36fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-muted);
}

.record-summary-list--compact .record-summary-row,
.record-summary-list--inspection .record-summary-row {
    border-right: 1px solid var(--color-border-muted);
}

.record-summary-row:last-child {
    border-bottom: none;
}

.record-summary-row dt {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.record-summary-row dd {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.record-summary-secondary {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.linked-record-table-shell,
.detail-related-table-shell {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.linked-record-table,
.detail-related-table {
    width: 100%;
    min-width: var(--linked-record-table-min-width, 680px);
    border-collapse: collapse;
    font-size: 13px;
}

.linked-record-table th,
.linked-record-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.linked-record-table th {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--color-surface-alt);
}

.linked-record-table tbody tr:last-child td {
    border-bottom: none;
}

.linked-record-title-cell {
    color: var(--color-primary-text);
    font-weight: 800;
}

.linked-record-actions {
    width: 1%;
    white-space: nowrap;
}

.linked-record-link-action {
    min-height: auto;
    padding: 0;
}

.platform-activity-list {
    display: grid;
    gap: 12px;
}

.platform-plan-card {
    height: 100%;
}

.platform-plan-list,
.platform-plan-limits {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.platform-plan-list span,
.platform-plan-limits span {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    font-size: 13px;
    color: var(--color-text-muted);
}

.detail-section-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.setup-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.entity-crud-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.inline-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: var(--control-height);
    margin-bottom: 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

.inline-checkbox input {
    width: 16px;
    height: 16px;
}

.reports-list,
.assets-list {
    display: grid;
    gap: 12px;
}

.report-card,
.asset-card {
    background: linear-gradient(180deg, var(--color-surface-alt), color-mix(in srgb, var(--color-surface-alt) 94%, black));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 15px;
    box-shadow: none;
}

.report-card {
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.report-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-panel);
}

.report-card.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 1px var(--color-primary) inset, var(--shadow-panel);
}

.report-meta p,
.asset-card p {
    margin: 6px 0;
    line-height: 1.42;
}

.empty-state {
    color: var(--color-text-subtle);
    padding: 20px;
    border: 1px dashed var(--color-border);
    border-radius: 16px;
    background: var(--color-surface-alt);
    text-align: center;
}

.hidden {
    display: none;
}

.scroll-to-top-btn {
    position: fixed;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    color: var(--color-primary-text);
    box-shadow: var(--shadow-raised);
    cursor: pointer;
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.scroll-to-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-to-top-btn:hover,
.scroll-to-top-btn:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    outline: none;
}

.scroll-to-top-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--control-height);
    margin-bottom: 0;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.checkbox-row input {
    width: 16px;
    height: 16px;
}

.asset-actions {
    margin-top: 12px;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 22px 0;
}

.summary-grid {
    gap: 14px;
}

.summary-card {
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    opacity: 0.7;
}

.summary-card span {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.inspection-workspace-panel > .workspace-subsection-title {
    margin-bottom: -4px;
}

.report-meta {
    display: grid;
    gap: 14px;
}

.topbar-title-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.inspection-substatus-caret {
    display: inline-grid;
    place-items: center;
    margin-left: 3px;
    width: 14px;
    height: 14px;
}

.inspection-topbar-subnav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.2;
}

.inspection-status-badge.status-secondary {
    min-width: 0;
    border-color: var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-alt) 88%, transparent);
    color: var(--color-text-muted);
}

body.detail-route .topbar {
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 340px) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 18px;
}

body.detail-route .topbar-heading {
    align-items: center;
}

body.detail-route .topbar-heading-copy {
    display: grid;
    gap: 4px;
}

body.detail-route .topbar-heading h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0;
}

body.detail-route .topbar-subtitle {
    margin: 0;
}

body.detail-route .topbar-center {
    justify-self: end;
    width: min(100%, 340px);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.detail-route .topbar-search-form {
    gap: 8px;
}

body.detail-route .topbar-search-form input {
    min-height: 34px;
}

body.detail-route .topbar-right {
    gap: 8px;
}

body.detail-route .topbar-utility {
    display: none;
}

body.detail-route .topbar-center-meta {
    display: none;
}

body.detail-route .inspection-status-badge {
    min-width: 0;
    min-height: 22px;
    padding: 4px 8px;
    font-size: 11px;
}

.topbar-actions.inspection-detail-actions {
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.inspection-topbar-primary-action {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 13px;
}

.inspection-topbar-action-menu {
    position: relative;
}

.inspection-topbar-action-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.inspection-topbar-action-menu summary::-webkit-details-marker {
    display: none;
}

.inspection-topbar-action-menu summary:hover,
.inspection-topbar-action-menu summary:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    outline: none;
}

.inspection-topbar-menu-items {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 35;
    display: grid;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.inspection-topbar-menu-items button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.inspection-topbar-menu-items button:hover,
.inspection-topbar-menu-items button:focus-visible {
    background: var(--color-surface-alt);
    outline: none;
}

.inspection-topbar-menu-items button.danger {
    color: var(--color-error-text);
}

.inspection-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 12px;
    align-items: start;
}

.inspection-detail-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

body.inspection-detail-route #selectedReportContent .workflow-view {
    display: block;
}

body.inspection-detail-route .inspection-legacy-tabs,
.inspection-detail-divider {
    display: none !important;
}

.inspection-summary-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.inspection-summary-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 14px;
}

.inspection-summary-heading h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0;
}

.inspection-summary-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inspection-summary-counts span,
.inspection-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--color-border-muted);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.inspection-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
}

.inspection-summary-grid div {
    min-width: 0;
}

.inspection-summary-grid dt {
    margin: 0 0 4px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.inspection-summary-grid dd {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
}

.inspection-summary-muted {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.inspection-summary-notes {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.inspection-summary-notes strong {
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.inspection-summary-notes p {
    margin: 0;
}

.inspection-text-link,
.inspection-text-action {
    color: var(--color-primary-text);
    font-weight: 700;
    text-decoration: none;
}

.inspection-text-link:hover,
.inspection-text-link:focus-visible,
.inspection-text-action:hover,
.inspection-text-action:focus-visible {
    text-decoration: underline;
}

.inspection-text-action {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.inspection-accordion-panel {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
}

.inspection-accordion-panel + .inspection-accordion-panel,
.inspection-accordion-panel + .inspection-linked-accordion-panel,
.inspection-linked-accordion-panel + .inspection-accordion-panel {
    margin-top: 12px;
}

.inspection-section-header {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-alt) 78%, transparent);
}

.inspection-section-title-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-align: left;
}

.inspection-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.inspection-action-helper {
    flex: 1 0 100%;
    max-width: 360px;
    margin-left: auto;
    text-align: right;
}

.inspection-text-action:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    text-decoration: none;
}

.inspection-collapse-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.inspection-collapse-btn:hover,
.inspection-collapse-btn:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    outline: none;
}

.inspection-section-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.inspection-accordion-panel.is-collapsed > :not(.inspection-section-header) {
    display: none !important;
}

.inspection-linked-accordion-panel.is-collapsed {
    display: none !important;
}

.inspection-form-heading {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.inspection-notes-summary {
    display: grid;
    gap: 10px;
}

.inspection-note-item {
    padding: 12px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface-alt);
}

.inspection-note-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.inspection-note-item p {
    margin: 0;
}

.compact-form-grid {
    padding: 14px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-alt) 62%, transparent);
}

.asset-lookup-block,
.registry-asset-linkage {
    grid-column: 1 / -1;
}

.asset-lookup-block {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface);
}

.asset-lookup-block > label,
.registry-asset-linkage summary {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
}

.asset-lookup-controls {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 190px) minmax(120px, 150px);
    gap: 10px;
    align-items: center;
}

.asset-lookup-results {
    display: grid;
    gap: 8px;
}

.asset-lookup-scope {
    align-items: center;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.asset-lookup-empty,
.asset-lookup-card,
.asset-lookup-list {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
}

.asset-lookup-card {
    gap: 8px;
}

.asset-lookup-card-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.asset-lookup-card-title strong {
    color: var(--color-text);
}

.asset-lookup-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.asset-lookup-warning {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--color-warning-border);
    border-radius: 999px;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: 12px;
    font-weight: 800;
}

.asset-lookup-location-warning {
    padding: 8px 10px;
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    background: var(--color-warning-bg);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
}

.asset-lookup-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 6px 12px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.asset-lookup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.asset-lookup-actions .btn,
.asset-lookup-actions button {
    width: auto;
}

.asset-lookup-list {
    gap: 6px;
}

.asset-lookup-match {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.asset-lookup-match:hover,
.asset-lookup-match:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    outline: none;
}

.registry-asset-linkage {
    padding: 10px 12px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
}

.registry-asset-linkage summary {
    cursor: pointer;
}

.registry-asset-browse {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 720px) {
    .asset-lookup-controls {
        grid-template-columns: 1fr;
    }

    .asset-lookup-meta {
        grid-template-columns: 1fr;
    }
}

.inspection-section-body > #inspectionAssetForm,
.inspection-section-body > #inspectionFaultForm,
.inspection-section-body > #inspectionImageForm,
.inspection-section-body > #inspectionForm,
.inspection-linked-accordion-panel > #deficiencySummaryForm,
.inspection-linked-accordion-panel > #summaryRowFormHeading,
.inspection-linked-accordion-panel > #clearSummaryRowFormBtn {
    display: none;
}

.app-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.app-modal.hidden {
    display: none;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
}

.app-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(960px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 98%, transparent);
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.42);
    overflow: hidden;
}

.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-alt) 84%, transparent);
}

.entity-crud-dialog {
    width: min(860px, 100%);
}

.entity-crud-body {
    display: grid;
    gap: 14px;
}

.app-modal-title h3,
.app-modal-title h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 17px;
    letter-spacing: 0;
}

.app-modal-close-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    font-weight: 800;
}

.app-modal-close-btn:hover,
.app-modal-close-btn:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    outline: none;
}

.app-modal-body {
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.entity-crud-body .form-grid {
    align-items: end;
}

.entity-crud-body .form-grid > textarea[name="notes"] {
    grid-column: 1 / -1;
}

.entity-crud-body .entity-crud-actions,
.signature-capture-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px -18px -18px;
    padding: 14px 18px;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

.entity-crud-body .entity-crud-actions .btn,
.signature-capture-actions .btn {
    width: auto;
}

.confirmation-dialog {
    width: min(480px, 100%);
}

.confirmation-body {
    display: grid;
    gap: 16px;
}

.confirmation-message {
    margin: 0;
    color: var(--color-text);
    line-height: 1.55;
}

.confirmation-actions {
    padding-top: 14px;
}

.record-history-dialog {
    width: min(880px, 100%);
}

.record-history-body {
    display: grid;
    gap: 14px;
}

.record-history-warning {
    margin: 0;
}

.record-history-list {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    overflow: hidden;
}

.record-history-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.3fr) minmax(0, 1fr);
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-muted);
}

.record-history-row:last-child {
    border-bottom: none;
}

.record-history-time {
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.record-history-entry {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.record-history-entry strong {
    color: var(--color-text);
    font-size: 14px;
}

.record-history-entry p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.record-history-entry span {
    color: var(--color-text-muted);
    font-size: 12px;
}

body.modal-open {
    overflow: hidden;
}

.inspection-modal-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.inspection-form-group {
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface-alt);
    overflow: hidden;
}

.inspection-form-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    color: var(--color-text);
    font-weight: 800;
    list-style: none;
}

.inspection-form-group summary::-webkit-details-marker {
    display: none;
}

.inspection-form-group summary::after {
    content: "";
    display: inline-grid;
    place-items: center;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border: 1px solid var(--color-border-muted);
    border-top: 0;
    border-left: 0;
    border-radius: 1px;
    color: var(--color-text-muted);
    font-weight: 800;
    transform: rotate(-45deg);
    transition: transform 140ms ease, color 140ms ease, border-color 140ms ease;
}

.inspection-form-group[open] summary {
    border-bottom: 1px solid var(--color-border-muted);
}

.inspection-form-group[open] summary::after {
    color: var(--color-primary-text);
    border-color: var(--color-primary-text);
    transform: rotate(45deg);
}

.inspection-form-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
    padding: 14px;
}

.inspection-form-group-grid textarea,
.inspection-form-group-grid .helper-note,
.inspection-form-group-grid .two-column-layout,
.inspection-form-group-grid .input-with-actions {
    grid-column: 1 / -1;
}

.inspection-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

.inspection-modal-footer .btn {
    width: auto;
}

.inspection-setup-dialog {
    width: min(1040px, 100%);
}

.inspection-setup-dialog .app-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.inspection-setup-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.inspection-setup-tab-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.inspection-setup-tabs {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    padding: 12px 18px 0;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-alt) 82%, transparent);
}

.inspection-setup-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0 0 -1px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.inspection-setup-tab:hover,
.inspection-setup-tab:focus-visible {
    border-color: var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface) 54%, transparent);
    color: var(--color-primary-text);
    outline: none;
}

.inspection-setup-tab.active {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.inspection-setup-tab-panels {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overflow-x: hidden;
    padding: 18px;
    background: var(--color-surface);
}

.inspection-setup-tab-panel {
    display: none;
    min-width: 0;
}

.inspection-setup-tab-panel.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
}

.inspection-setup-modal-form .inspection-modal-footer {
    flex: 0 0 auto;
    position: static;
    margin-top: 0;
    padding: 14px 18px;
}

.inspection-setup-tab-panel textarea,
.inspection-setup-tab-panel .helper-note,
.inspection-setup-tab-panel .input-with-actions,
.inspection-setup-tab-panel .signature-preview {
    grid-column: 1 / -1;
}

.inspection-dependency-action {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-primary-text);
    font: inherit;
    font-weight: 700;
    margin-left: 4px;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

.inspection-dependency-action:hover,
.inspection-dependency-action:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.inspection-setup-tab-panel .setup-panel-wide {
    grid-column: 1 / -1;
}

.signature-preview {
    display: block;
    max-width: min(360px, 100%);
    max-height: 140px;
    padding: 10px;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface);
    object-fit: contain;
}

.signature-timestamp {
    display: block;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.signature-capture-dialog {
    width: min(920px, 100%);
}

.signature-capture-body {
    display: grid;
    gap: 14px;
}

.signature-canvas {
    width: 100%;
    height: min(320px, 42vh);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.signature-capture-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.inspection-add-record-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.inspection-section-bulk-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
    padding: 0 2px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.inspection-action-rail {
    position: sticky;
    top: 78px;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: var(--shadow-panel);
}

.inspection-rail-action {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: var(--color-surface-alt);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}

.inspection-rail-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inspection-rail-action:hover,
.inspection-rail-action:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    outline: none;
}

.inspection-rail-action.danger {
    color: var(--color-error-text);
}

.inspection-rail-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sidebar .reports-list {
    max-height: calc(100vh - 430px);
    overflow: auto;
    padding-right: 6px;
}

.sidebar-collapsed .app-shell {
    grid-template-columns: 68px minmax(0, 1fr);
}

.sidebar-collapsed .sidebar {
    padding: 12px 6px 10px;
    gap: 10px;
    align-items: center;
    overflow: visible;
    z-index: 30;
}

.sidebar-collapsed .sidebar-header {
    width: 100%;
    padding: 0;
    justify-items: center;
    align-content: start;
    gap: 8px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.sidebar-collapsed .mode-switch {
    width: 36px;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
}

.sidebar-collapsed .mode-switch-btn {
    width: 36px;
    min-width: 36px;
    min-height: 24px;
    padding: 0;
    border-radius: 9px;
    font-size: 0;
    line-height: 0;
}

.sidebar-collapsed .mode-switch-btn::after {
    content: attr(data-mode-short);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    color: inherit;
}

.sidebar-collapsed .sidebar-header-top {
    display: grid;
    width: 100%;
    place-items: center;
    align-content: start;
    gap: 8px;
    padding-left: 10px;
}

.sidebar-collapsed .sidebar-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    justify-self: center;
    margin-inline: auto;
}

.sidebar-collapsed .sidebar-collapse-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    align-self: center;
    justify-self: center;
    margin-inline: auto;
}

.sidebar-collapsed .sidebar-brand-kicker,
.sidebar-collapsed .theme-toggle label,
.sidebar-collapsed .app-nav-label,
.sidebar-collapsed #sidebarInspections,
.sidebar-collapsed .sidebar-account-panel h3,
.sidebar-collapsed .sidebar-account-summary {
    display: none;
}

.sidebar-collapsed .sidebar-brand-copy,
.sidebar-collapsed .app-nav-copy {
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-8px);
    filter: blur(2px);
}

.sidebar-collapsed .theme-toggle {
    display: grid;
    width: 100%;
    justify-items: center;
    align-content: start;
    margin-top: 0;
}

.sidebar-collapsed .theme-toggle-row {
    width: 36px;
    justify-items: center;
    gap: 6px;
    position: relative;
    margin: 0 auto;
}

.sidebar-collapsed .theme-toggle-select-wrap {
    display: none;
}

.sidebar-collapsed .theme-toggle-segmented {
    width: 36px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    justify-items: center;
    position: relative;
    margin-inline: auto;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface-alt) 96%, transparent);
    border: 1px solid var(--color-border-muted);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
}

.sidebar-collapsed .theme-segment-btn {
    width: 28px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.sidebar-collapsed .theme-segment-btn.active {
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
    background: color-mix(in srgb, var(--color-primary-soft) 88%, white 12%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.sidebar-collapsed .theme-segment-btn svg {
    width: 13px;
    height: 13px;
}

.sidebar-collapsed .theme-toggle-row::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: color-mix(in srgb, var(--color-text) 94%, black);
    color: var(--color-bg);
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 24;
}

.sidebar-collapsed .app-nav {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar-collapsed .app-nav-group {
    width: 100%;
    display: grid;
    padding: 0;
    justify-items: center;
    align-content: start;
    gap: 6px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.sidebar-collapsed .app-nav-group:nth-child(3) {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
}

.sidebar-collapsed .app-nav-group + .app-nav-group {
    padding-top: 0;
    border-top: none;
}

.sidebar-collapsed .app-nav-btn,
.sidebar-collapsed .theme-toggle-row,
.sidebar-collapsed .theme-segment-btn {
    justify-self: center;
}

.sidebar-collapsed .app-nav-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    border-radius: 11px;
    overflow: visible;
    box-shadow: none;
    box-sizing: border-box;
    margin-inline: auto;
    line-height: 0;
}

.sidebar-collapsed .app-nav-icon {
    transform: none;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 0;
}

.sidebar-collapsed .app-nav-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.sidebar-collapsed .app-nav-btn::before,
.sidebar-collapsed .theme-toggle-row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 7px);
    width: 9px;
    height: 9px;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    background: color-mix(in srgb, var(--color-text) 94%, black);
    transform: translateY(-50%) rotate(-45deg) scale(0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 25;
}

.sidebar-collapsed .app-nav-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: color-mix(in srgb, var(--color-text) 94%, black);
    color: var(--color-bg);
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 24;
}

.sidebar-collapsed .app-nav-btn:hover::after,
.sidebar-collapsed .app-nav-btn:focus-visible::after,
.sidebar-collapsed .theme-toggle-row:hover::after,
.sidebar-collapsed .theme-toggle-row:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.sidebar-collapsed .app-nav-btn:hover::before,
.sidebar-collapsed .app-nav-btn:focus-visible::before,
.sidebar-collapsed .theme-toggle-row:hover::before,
.sidebar-collapsed .theme-toggle-row:focus-within::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) rotate(-45deg) scale(1);
}

.sidebar-collapsed .sidebar-footer {
    margin-top: 0;
}

.sidebar-collapsed .sidebar-account-panel {
    display: none;
}

.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.helper-note {
    line-height: 1.45;
}

.input-with-actions {
    flex-wrap: wrap;
}

.input-with-actions .btn {
    width: auto;
}

@media (max-width: 960px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .management-layout {
        grid-template-columns: 1fr;
    }

    .management-column:first-child {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 16px;
    }

    .management-filters {
        grid-template-columns: 1fr;
    }

    .management-filter-actions {
        justify-content: stretch;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 18px;
    }

    .topbar {
        padding: 16px 18px;
    }

    .sidebar {
        padding: 16px;
    }

    .sidebar-collapsed .app-shell {
        grid-template-columns: 1fr;
    }

    .management-record-list,
    .sidebar .reports-list {
        max-height: none;
    }
}

@media (max-width: 1180px) {
    .app-shell {
        grid-template-columns: 272px minmax(0, 1fr);
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .topbar-center {
        min-height: 0;
    }

    .topbar-right {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .main-content {
        padding: 22px;
    }

    .management-layout {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
        gap: 18px;
    }

    .management-filters {
        grid-template-columns: minmax(180px, 1.3fr) repeat(2, minmax(140px, 1fr));
    }

    .inspection-table-filters {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    body.detail-route .topbar {
        grid-template-columns: minmax(0, 1fr);
    }

    body.detail-route .topbar-center {
        justify-self: stretch;
        width: 100%;
    }

    .inspection-detail-layout {
        grid-template-columns: 1fr;
    }

    .inspection-action-rail {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        order: -1;
    }

    .inspection-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .management-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .sidebar .reports-list {
        max-height: calc(100vh - 460px);
    }
}

@media (max-width: 960px) {
    .sidebar-backdrop {
        display: block;
    }

    .app-shell,
    .sidebar-collapsed .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar,
    .sidebar-collapsed .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 340px);
        min-height: 100dvh;
        padding: 16px;
        gap: 16px;
        z-index: 60;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: var(--shadow-shell);
        transform: translateX(calc(-100% - 16px));
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 220ms ease, gap 220ms ease;
        align-items: stretch;
    }

    .mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .mobile-sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .workspace-shell {
        min-height: 100dvh;
    }

    .topbar {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px 16px;
    }

    .topbar-heading {
        align-items: center;
        gap: 12px;
    }

    .topbar-heading h1 {
        font-size: 24px;
    }

    .topbar-subtitle {
        max-width: none;
    }

    .topbar-center,
    .topbar-right {
        grid-column: auto;
    }

    .topbar-search-form,
    .search-results-form {
        grid-template-columns: 1fr;
    }

    .topbar-right {
        justify-content: flex-start;
    }

    .topbar-actions {
        width: 100%;
    }

    .bulk-action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .bulk-action-buttons {
        justify-content: flex-start;
    }

    .main-content {
        padding: 16px;
        gap: 16px;
    }

    .panel {
        padding: 18px;
    }

    .management-detail-panel {
        padding: 0;
    }

    .summary-grid,
    .detail-card-grid,
    .record-summary-list--compact,
    .record-summary-list--inspection,
    .report-context-grid,
    .inspection-summary-grid,
    .inspection-asset-grid,
    .asset-image-grid,
    .inspection-form-group-grid {
        grid-template-columns: 1fr;
    }

    .record-summary-list--compact .record-summary-row,
    .record-summary-list--inspection .record-summary-row {
        border-right: 0;
    }

    .management-layout,
    .settings-grid,
    .two-column-layout {
        grid-template-columns: 1fr;
    }

    .management-column:first-child {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: 16px;
    }

    .management-filters {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .inspection-table-filters {
        grid-template-columns: 1fr;
    }

    body .section-toolbar,
    body .inspection-section-header,
    body .app-modal-header,
    .management-toolbar,
    .management-record-top,
    .lightbox-header {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-utility {
        white-space: normal;
    }

    .inspection-summary-heading,
    .inspection-summary-counts {
        justify-content: flex-start;
    }

    .sidebar .reports-list {
        max-height: none;
        padding-right: 0;
    }

    .app-modal {
        padding: 12px;
    }

    .app-modal-dialog {
        max-height: calc(100vh - 24px);
    }

    .inspection-modal-footer {
        justify-content: stretch;
    }

    .inspection-modal-footer .btn,
    .entity-crud-body .entity-crud-actions .btn {
        width: 100%;
    }

    .entity-crud-body .entity-crud-actions {
        justify-content: stretch;
    }

    .inspection-setup-tab-panel.active {
        grid-template-columns: 1fr;
    }

    .inspection-setup-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inspection-setup-tab {
        min-width: 0;
    }

    .signature-capture-actions {
        justify-content: stretch;
    }

    .signature-capture-actions .btn {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .auth-screen {
        padding: 18px;
    }

    .auth-card {
        padding: 22px;
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 14px;
    }

    .topbar-heading {
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .topbar-heading h1 {
        margin: 0;
        font-size: 22px;
        line-height: 1.1;
    }

    .topbar-eyebrow,
    .topbar-subtitle,
    .topbar-utility,
    .topbar-center-meta {
        display: none;
    }

    .topbar-center {
        display: none;
        grid-column: 1 / -1;
        min-height: 0;
        gap: 0;
        padding: 8px 0 0;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        background: transparent;
    }

    .app-shell.compact-topbar-search-open .topbar-center {
        display: grid;
    }

    .topbar-search-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .topbar-search-form input {
        min-height: 42px;
    }

    .search-results-summary {
        grid-template-columns: 1fr;
    }

    .record-history-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .topbar-right {
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .topbar-actions {
        width: auto;
        justify-content: flex-end;
    }

    .topbar-actions .btn {
        width: auto;
    }

    .topbar-actions .btn:not([data-mobile-priority="true"]) {
        display: none;
    }

    .topbar-actions.has-actions .btn[data-mobile-priority="true"] {
        min-height: 40px;
        padding: 0 12px;
    }

    .topbar-nav-toggle,
    .topbar-mobile-search-toggle {
        width: 40px;
        height: 40px;
    }

    body .section-toolbar .btn,
    .meta-actions .btn,
    .setup-actions .btn,
    .entity-crud-actions .btn,
    .context-card-actions .btn,
    .management-filter-actions .btn {
        width: 100%;
    }

    .context-card-actions,
    .meta-actions,
    .setup-actions,
    .entity-crud-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btn,
    .entity-nav-btn,
    .workflow-tab {
        min-height: 44px;
    }

    .workflow-tabs,
    .entity-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inspection-action-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .report-meta,
    .detail-stack,
    .settings-stack {
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .sidebar,
    .sidebar-collapsed .sidebar {
        width: min(92vw, 320px);
        padding: 14px;
    }

    .sidebar-header {
        padding: 16px;
    }

    .sidebar-brand-mark {
        width: 38px;
        height: 38px;
    }

    .topbar-nav-toggle {
        width: 40px;
        height: 40px;
    }

    .topbar-heading h1 {
        font-size: 22px;
    }

    .main-content {
        padding: 12px;
    }

    .panel {
        padding: 16px;
        border-radius: 16px;
    }

    .auth-card h1 {
        font-size: 28px;
    }
}

@media (max-width: 960px), (pointer: coarse) and (max-width: 1279px) {
    .inspection-table-shell {
        -webkit-overflow-scrolling: touch;
        scrollbar-color: color-mix(in srgb, var(--color-text-muted) 42%, transparent) transparent;
        scrollbar-width: thin;
    }

    .inspection-table-shell::-webkit-scrollbar {
        height: 8px;
    }

    .inspection-table-shell::-webkit-scrollbar-track {
        background: transparent;
    }

    .inspection-table-shell::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-text-muted) 34%, transparent);
    }

    .inspection-table th.table-preview-control-header,
    .inspection-table td.table-preview-toggle-cell,
    .inspection-table th.bulk-select-header,
    .inspection-table td.bulk-select-cell {
        width: 52px;
        min-width: 52px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .table-preview-toggle,
    .row-action-menu summary,
    .app-modal-close-btn,
    .inspection-collapse-btn,
    .topbar-nav-toggle,
    .topbar-mobile-search-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .inspection-topbar-action-menu summary,
    .mode-switch-btn,
    .btn-small,
    .topbar-actions.has-actions .btn[data-mobile-priority="true"] {
        min-height: 44px;
    }

    .row-action-menu {
        min-width: 44px;
    }

    .bulk-select-header input,
    .bulk-select-cell input {
        box-sizing: content-box;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        margin: -10px;
        padding: 10px;
    }

    .checkbox-row {
        min-height: 44px;
    }

    .checkbox-row input {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }

    body input[type="file"] {
        min-height: var(--control-height);
    }

    .inspection-modal-footer,
    .entity-crud-body .entity-crud-actions,
    .signature-capture-actions {
        bottom: 0;
        z-index: 2;
    }
}

@media (max-width: 640px) {
    body.row-action-sheet-open {
        overflow: hidden;
    }

    body input:not([type="checkbox"]):not([type="radio"]),
    body select,
    body textarea {
        font-size: 16px;
    }

    .bulk-select-header,
    .bulk-select-cell,
    .bulk-action-bar {
        display: none !important;
    }

    #thermalImagePath,
    #visualImagePath,
    #imageFilePath,
    #coverPhoto,
    #clientSignatureImage {
        display: none !important;
    }

    #coverPhotoFile,
    #clientSignatureImageFile,
    #thermalImageFile,
    #visualImageFile,
    #imageFileUpload {
        flex: 1 1 220px;
        width: 100%;
        min-width: 0;
    }

    #uploadCoverPhotoBtn,
    #captureClientSignatureBtn,
    #uploadClientSignatureBtn,
    #uploadThermalBtn,
    #uploadVisualBtn,
    #uploadInspectionImageBtn {
        flex: 1 1 150px;
    }

    .row-action-menu[open] .row-action-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 89;
        display: block;
        width: 100vw;
        height: 100dvh;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: color-mix(in srgb, var(--color-overlay) 72%, transparent);
        cursor: pointer;
    }

    .row-action-menu[open] .row-action-menu-items {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        width: 100%;
        min-width: 0;
        max-height: min(72vh, 420px);
        padding: 12px 12px max(12px, env(safe-area-inset-bottom));
        overflow-y: auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -18px 48px rgba(2, 6, 23, 0.44);
    }

    .row-action-menu-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 2px 10px;
    }

    .row-action-menu-sheet-title {
        color: var(--color-text-muted);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .row-action-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--color-border-muted);
        border-radius: 8px;
        background: var(--color-surface-alt);
        color: var(--color-text);
        cursor: pointer;
        font: inherit;
        font-weight: 800;
    }

    .row-action-menu-items button {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 16px;
    }
}

body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}