/*
 * HPC ERP interface legibility foundation.
 * Loaded after the legacy application styles so every interactive page shares
 * one final, predictable visual contract without requiring a frontend build.
 */

:root {
    --erp-ui-canvas: var(--app-content-bg, #f4f7fb);
    --erp-ui-surface: var(--app-panel-bg, #ffffff);
    --erp-ui-surface-soft: var(--app-panel-soft-bg, #f8fafc);
    --erp-ui-border: var(--app-border-color, #cbd5e1);
    --erp-ui-border-strong: #94a3b8;
    --erp-ui-text: var(--app-text-color, #0f172a);
    --erp-ui-muted: var(--app-muted-text, #475569);
    --erp-ui-brand: var(--app-brand-color, #1d4ed8);
    --erp-ui-brand-soft: var(--app-brand-soft-color, #dbeafe);
    --erp-ui-success: #166534;
    --erp-ui-success-soft: #dcfce7;
    --erp-ui-warning: #854d0e;
    --erp-ui-warning-soft: #fef3c7;
    --erp-ui-danger: #991b1b;
    --erp-ui-danger-soft: #fee2e2;
    --erp-ui-info: #075985;
    --erp-ui-info-soft: #e0f2fe;
    --erp-ui-radius-sm: 10px;
    --erp-ui-radius: 14px;
    --erp-ui-radius-lg: 18px;
    --erp-ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --erp-ui-shadow: 0 14px 34px rgba(15, 23, 42, .10);
    --erp-ui-focus: 0 0 0 4px color-mix(in srgb, var(--erp-ui-brand) 22%, transparent);
    --erp-ui-reading-width: 76ch;
    --erp-ui-control-height: 44px;
    --erp-ui-space-1: 6px;
    --erp-ui-space-2: 10px;
    --erp-ui-space-3: 14px;
    --erp-ui-space-4: 18px;
    --erp-ui-space-5: 24px;
    color-scheme: light;
}

html {
    background: var(--erp-ui-canvas);
    color: var(--erp-ui-text);
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html.erp-ui-booting *,
html.erp-ui-booting *::before,
html.erp-ui-booting *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
}

html.erp-ui-booting .tab-section:not(.active),
html.erp-ui-booting .erp-tab-pane.hidden,
html.erp-ui-booting [role="tabpanel"][aria-hidden="true"] {
    display: none !important;
}

body {
    color: var(--erp-ui-text);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.content-body,
.page-stack,
.page-shell,
.auth-shell {
    min-width: 0;
}

.content-body :where(p, li, dd, td, th, label, small, span, strong, a, button),
.auth-page :where(p, li, label, small, span, strong, a, button) {
    overflow-wrap: anywhere;
}

.content-body :where(p, li, dd) {
    line-height: 1.58;
}

.content-body :where(.muted, .helper-text, .field-help, small) {
    color: var(--erp-ui-muted) !important;
    line-height: 1.45;
}

.content-body :where(h1, h2, h3, h4),
.auth-page :where(h1, h2, h3) {
    color: var(--erp-ui-text);
    line-height: 1.22;
    text-wrap: balance;
}

.content-body h1 {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.content-body h2 {
    font-size: clamp(1.12rem, 1.45vw, 1.38rem);
}

.content-body h3 {
    font-size: 1.02rem;
}

.page-header,
.panel,
.compact-card,
.quick-card,
.metric-card,
.card,
.auth-card {
    border-color: var(--erp-ui-border) !important;
    border-radius: var(--erp-ui-radius-lg) !important;
    background: var(--erp-ui-surface) !important;
    color: var(--erp-ui-text);
}

.page-header,
.panel,
.auth-card {
    box-shadow: var(--erp-ui-shadow-sm) !important;
}

.page-header {
    border-left: 5px solid var(--erp-ui-brand) !important;
}

.page-header p,
.section-heading p,
.split-header p {
    max-width: var(--erp-ui-reading-width);
}

.eyebrow {
    color: var(--erp-ui-brand) !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
}

/* Forms: one recognizable interaction pattern on every page. */
.field,
.form-field,
.form-group {
    min-width: 0;
}

.field > span:first-child,
.field > label:first-child,
.form-label,
label.form-label {
    color: #1e293b !important;
    font-size: .88rem !important;
    font-weight: 850 !important;
    line-height: 1.35;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea, .form-input, .form-select) {
    min-height: var(--erp-ui-control-height) !important;
    border: 1px solid var(--erp-ui-border-strong) !important;
    border-radius: var(--erp-ui-radius-sm) !important;
    background: var(--erp-ui-surface) !important;
    color: var(--erp-ui-text) !important;
    font-size: .96rem !important;
    line-height: 1.35;
}

textarea,
textarea.form-input {
    min-height: 96px !important;
    resize: vertical;
}

:where(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
    outline: 3px solid transparent !important;
    box-shadow: var(--erp-ui-focus) !important;
}

:where(input, select, textarea, .form-input, .form-select):focus {
    border-color: var(--erp-ui-brand) !important;
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea).is-invalid,
.is-field-error :where(input, select, textarea) {
    border-color: #dc2626 !important;
    background: #fff7f7 !important;
}

.error-text,
.field-error,
[data-erp-field-error] {
    color: var(--erp-ui-danger) !important;
    font-size: .84rem !important;
    font-weight: 750;
}

.form-checkbox,
.form-radio,
input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    accent-color: var(--erp-ui-brand);
}

.check,
.field-toggle,
.permission-check,
.check-row {
    border-color: var(--erp-ui-border) !important;
    border-radius: var(--erp-ui-radius) !important;
}

/* Buttons: action hierarchy is recognizable without relying on text alone. */
.btn,
button.btn,
a.btn {
    min-height: 40px !important;
    border: 1px solid var(--erp-ui-border-strong) !important;
    border-radius: var(--erp-ui-radius-sm) !important;
    background: var(--erp-ui-surface) !important;
    color: var(--erp-ui-text) !important;
    font-size: .9rem !important;
    font-weight: 850 !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.btn:hover:not(:disabled),
button.btn:hover:not(:disabled),
a.btn:hover {
    border-color: var(--erp-ui-brand) !important;
    box-shadow: var(--erp-ui-shadow-sm) !important;
    transform: translateY(-1px);
}

.btn.primary,
.btn.is-primary,
button.btn.primary,
a.btn.primary {
    border-color: var(--erp-ui-brand) !important;
    background: var(--erp-ui-brand) !important;
    color: #ffffff !important;
}

.btn.danger,
.btn.is-danger {
    border-color: #fca5a5 !important;
    background: var(--erp-ui-danger-soft) !important;
    color: var(--erp-ui-danger) !important;
}

.btn.success,
.btn.is-success {
    border-color: #86efac !important;
    background: var(--erp-ui-success-soft) !important;
    color: var(--erp-ui-success) !important;
}

.btn:disabled,
button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .56 !important;
    transform: none !important;
}

.actions-row,
.toolbar,
.row-actions,
.erp-row-actions {
    gap: 8px !important;
}

/* Status must remain distinguishable even for users who cannot infer muted colors. */
.badge,
.pill,
.status-badge {
    min-height: 26px;
    align-items: center;
    border: 1px solid var(--erp-ui-border);
    border-radius: 999px !important;
    background: var(--erp-ui-surface-soft);
    color: #334155;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.2;
}

.badge.success,
.badge.is-success,
.status-success {
    border-color: #86efac !important;
    background: var(--erp-ui-success-soft) !important;
    color: var(--erp-ui-success) !important;
}

.badge.warning,
.warning-badge,
.badge.is-warning,
.status-warning {
    border-color: #facc15 !important;
    background: var(--erp-ui-warning-soft) !important;
    color: var(--erp-ui-warning) !important;
}

.badge.danger,
.badge.is-danger,
.status-danger,
.status-error {
    border-color: #fca5a5 !important;
    background: var(--erp-ui-danger-soft) !important;
    color: var(--erp-ui-danger) !important;
}

.alert,
.erp-guard-feedback,
.inline-status,
.notice,
.callout {
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--erp-ui-radius) !important;
    line-height: 1.5;
}

.alert.success,
.alert.is-success {
    border-color: #86efac !important;
    background: var(--erp-ui-success-soft) !important;
    color: var(--erp-ui-success) !important;
}

.alert.warning,
.alert.is-warning {
    border-color: #facc15 !important;
    background: var(--erp-ui-warning-soft) !important;
    color: var(--erp-ui-warning) !important;
}

.alert.danger,
.alert.is-danger {
    border-color: #fca5a5 !important;
    background: var(--erp-ui-danger-soft) !important;
    color: var(--erp-ui-danger) !important;
}

.alert.info,
.alert.is-info {
    border-color: #7dd3fc !important;
    background: var(--erp-ui-info-soft) !important;
    color: var(--erp-ui-info) !important;
}

/* Tables: preserve context while scrolling and make rows easier to follow. */
.table-wrap,
.erp-table-scroll {
    border-color: var(--erp-ui-border) !important;
    border-radius: var(--erp-ui-radius) !important;
    background: var(--erp-ui-surface) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    overscroll-behavior-inline: contain;
}

.data-table,
.compact-table,
.erp-clean-table {
    color: var(--erp-ui-text);
    font-size: .9rem;
}

.data-table th,
.compact-table th,
.erp-clean-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-color: var(--erp-ui-border) !important;
    background: #eaf0f8 !important;
    color: #1e293b !important;
    font-size: .77rem !important;
    font-weight: 900 !important;
    letter-spacing: .035em;
    line-height: 1.3;
    text-transform: uppercase;
}

.data-table td,
.compact-table td,
.erp-clean-table td {
    border-color: #dbe3ef !important;
    line-height: 1.45;
}

.data-table tbody tr:nth-child(even),
.compact-table tbody tr:nth-child(even),
.erp-clean-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.data-table tbody tr:hover,
.compact-table tbody tr:hover,
.erp-clean-table tbody tr:hover {
    background: #eff6ff !important;
}

.empty-state,
.operational-empty-explain {
    color: var(--erp-ui-muted) !important;
    font-size: .94rem;
    line-height: 1.55;
}

/*
 * Tabs are intentionally stronger than surrounding cards. Primary horizontal
 * navigation and secondary vertical navigation must never look identical.
 */
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation]) {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
    margin: 0 0 14px !important;
    padding: 7px !important;
    border: 1px solid #b8c6d9 !important;
    border-radius: var(--erp-ui-radius) !important;
    background: #eaf0f8 !important;
    box-shadow: var(--erp-ui-shadow-sm) !important;
}

:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation])
:where(a, button, [role="tab"]) {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    min-width: max-content;
    padding: 8px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #334155 !important;
    font-size: .88rem !important;
    font-weight: 850 !important;
    line-height: 1.25;
    text-decoration: none !important;
    white-space: nowrap;
}

:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation])
:where(a, button, [role="tab"]):hover {
    border-color: #b8c6d9 !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation])
:where(a.active, button.active, [role="tab"][aria-selected="true"]) {
    border-color: var(--erp-ui-brand) !important;
    background: var(--erp-ui-brand) !important;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--erp-ui-brand) 26%, transparent) !important;
    color: #ffffff !important;
}

:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation])
:where(a.active, button.active, [role="tab"][aria-selected="true"])::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -5px;
    left: 12px;
    height: 3px;
    border-radius: 999px;
    background: #ffffff;
    opacity: .9;
}

:where(.erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"])[data-tab-level="secondary"] {
    border-color: #c4b5fd !important;
    background: #f5f3ff !important;
}

:where(.erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"])[data-tab-level="secondary"]
:where(a.active, button.active, [role="tab"][aria-selected="true"]) {
    border-color: #6d28d9 !important;
    background: #6d28d9 !important;
}

:where(.erp-tabs-vertical, .vertical-tabs, [role="tablist"][aria-orientation="vertical"], [data-tab-orientation="vertical"]) {
    display: grid !important;
    align-content: start !important;
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
    width: min(260px, 100%);
    padding: 8px !important;
    border-left: 5px solid #6d28d9 !important;
    background: #f5f3ff !important;
}

:where(.erp-tabs-vertical, .vertical-tabs, [role="tablist"][aria-orientation="vertical"], [data-tab-orientation="vertical"])
:where(a, button, [role="tab"]) {
    justify-content: flex-start !important;
    width: 100%;
    text-align: left;
    white-space: normal;
}

:where(.erp-tabs-vertical, .vertical-tabs, [role="tablist"][aria-orientation="vertical"], [data-tab-orientation="vertical"])
:where(a.active, button.active, [role="tab"][aria-selected="true"])::after {
    inset: 9px auto 9px -5px;
    width: 4px;
    height: auto;
}

html[data-ui-debug="true"] [data-tab-conflict="true"] {
    outline: 3px dashed #f59e0b;
    outline-offset: 3px;
}

.tab-section,
.erp-tab-pane,
[role="tabpanel"] {
    min-width: 0;
    scroll-margin-top: calc(var(--erp-sticky-tabs-top, 120px) + 16px);
}

.tab-section:not([hidden]),
.erp-tab-pane:not([hidden]),
[role="tabpanel"]:not([hidden]) {
    animation: erp-ui-panel-enter .14s ease-out;
}

.tab-section[hidden],
.erp-tab-pane[hidden],
[role="tabpanel"][hidden],
.hidden {
    display: none !important;
}

@keyframes erp-ui-panel-enter {
    from { opacity: .94; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal contract: clear title/content/action separation and safe mobile sizing. */
.erp-modal-backdrop,
[role="dialog"].erp-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    background: rgba(15, 23, 42, .64) !important;
    backdrop-filter: blur(3px);
    overflow: auto !important;
}

.erp-modal-panel,
.erp-modal-surface,
dialog.erp-modal-surface {
    width: min(760px, calc(100vw - 36px)) !important;
    max-height: min(88vh, 900px) !important;
    margin: auto;
    overflow: hidden !important;
    border: 1px solid var(--erp-ui-border-strong) !important;
    border-radius: var(--erp-ui-radius-lg) !important;
    background: var(--erp-ui-surface) !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .32) !important;
    color: var(--erp-ui-text);
}

.erp-modal-panel.wide,
.erp-modal-surface.wide {
    width: min(1120px, calc(100vw - 36px)) !important;
}

.erp-modal-head {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--erp-ui-border) !important;
    background: #eef4fb !important;
}

.erp-modal-head :where(h2, h3) {
    margin: 0 !important;
}

.erp-modal-body {
    max-height: calc(88vh - 132px) !important;
    padding: 18px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.sticky-modal-actions,
.erp-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3;
    border-top: 1px solid var(--erp-ui-border) !important;
    background: #ffffff !important;
}

body.erp-modal-open {
    overflow: hidden !important;
}

/* Toasts stay readable and do not cover the main action area on small screens. */
.erp-toast-region {
    width: min(420px, calc(100vw - 24px)) !important;
}

.erp-toast {
    border-width: 1px !important;
    border-radius: var(--erp-ui-radius) !important;
    box-shadow: var(--erp-ui-shadow) !important;
}

.erp-toast__body p {
    line-height: 1.45 !important;
}

/* Authentication and welcome pages share the same legibility baseline. */
.auth-page {
    background: radial-gradient(circle at top left, #dbeafe, transparent 34rem), var(--erp-ui-canvas) !important;
}

.auth-card {
    border-top: 5px solid var(--erp-ui-brand) !important;
}

.auth-subtitle,
.auth-help {
    color: var(--erp-ui-muted) !important;
    line-height: 1.55 !important;
}

.welcome-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.welcome-card {
    width: min(720px, 100%);
}

.welcome-toolbar,
.auth-locale-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Responsive rules favor reading and touch targets over density. */
@media (max-width: 900px) {
    .content-shell {
        padding: 14px !important;
    }

    .page-header,
    .panel,
    .compact-card {
        padding: 14px !important;
    }

    :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation]):not(.erp-tabs-vertical):not([aria-orientation="vertical"]) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation]):not(.erp-tabs-vertical):not([aria-orientation="vertical"])
    :where(a, button, [role="tab"]) {
        scroll-snap-align: start;
    }

    .show-tabs,
    .sticky-tabs {
        top: var(--erp-sticky-tabs-top, 8px) !important;
    }
}

@media (max-width: 720px) {
    .toolbar,
    .actions-row:not(.row-actions),
    .split-header {
        align-items: stretch !important;
    }

    .toolbar > *,
    .actions-row:not(.row-actions) > .btn,
    .actions-row:not(.row-actions) > a.btn,
    .split-header > .actions-row {
        width: 100%;
    }

    .erp-modal-backdrop {
        place-items: stretch !important;
        padding: 8px !important;
    }

    .erp-modal-panel,
    .erp-modal-panel.wide,
    .erp-modal-surface,
    .erp-modal-surface.wide {
        width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 14px !important;
    }

    .erp-modal-body {
        max-height: calc(100vh - 128px) !important;
    }

    .erp-toast-region {
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        width: auto !important;
    }
}



/* Interaction spacing reliability: stacked content must remain visually separable. */
.page-stack {
    display: grid !important;
    align-content: start;
    gap: var(--erp-ui-space-4) !important;
}

:where(.form-stack, .card-stack, .content-stack, .stack) {
    display: grid;
    align-content: start;
    gap: var(--erp-ui-space-3) !important;
}

:where(.field, .form-field, .form-group, .money-input-wrap) {
    gap: var(--erp-ui-space-1) !important;
}

:where(.panel, .compact-card, .quick-card) > :where(.section-heading, .split-header, .toolbar, .actions-row, .alert, .notice, .note-box, .form-grid, .detail-grid, .info-grid, .table-wrap) + :where(.section-heading, .split-header, .toolbar, .actions-row, .alert, .notice, .note-box, .form-grid, .detail-grid, .info-grid, .table-wrap) {
    margin-top: var(--erp-ui-space-3) !important;
}

.actions-row,
.toolbar,
.row-actions,
.erp-row-actions {
    column-gap: var(--erp-ui-space-2) !important;
    row-gap: var(--erp-ui-space-2) !important;
    line-height: 1.35;
}

.badge,
.pill,
.status-badge {
    display: inline-flex;
    justify-content: center;
    max-width: 100%;
    padding: 4px 9px !important;
    text-align: center;
    white-space: normal;
}

:where(.actions-row, .toolbar, .tabs, .erp-tabs, .selected-chip-list, .erp-search-select__pills) > :where(.badge, .pill, .status-badge) {
    margin: 0 !important;
}

.alert,
.erp-guard-feedback,
.inline-status,
.notice,
.callout {
    padding: var(--erp-ui-space-3) var(--erp-ui-space-4) !important;
}

:where(label, .check, .check-row, .field-toggle, .permission-check):has(> input[type="checkbox"], > input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: var(--erp-ui-space-2) !important;
    min-height: 40px;
    line-height: 1.45;
}

:where(input[type="checkbox"], input[type="radio"]) {
    flex: 0 0 20px;
    margin: 2px 0 0 !important;
}

.check,
.check-row,
.field-toggle,
.permission-check {
    padding: 9px 11px;
}

/* Multiple tab rows are supported, but each level has a distinct visual identity. */
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"][data-tab-navigation]) {
    flex-wrap: wrap !important;
    column-gap: 7px !important;
    row-gap: var(--erp-ui-space-2) !important;
    margin-bottom: var(--erp-ui-space-4) !important;
}

:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"])[data-tab-level="tertiary"] {
    border-color: #99f6e4 !important;
    background: #f0fdfa !important;
}

:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"])[data-tab-level="tertiary"]
:where(a.active, button.active, [role="tab"][aria-selected="true"]) {
    border-color: #0f766e !important;
    background: #0f766e !important;
}

[role="tabpanel"][data-tab-panel-level="primary"],
.panel[data-tab-panel-level="primary"] {
    border-top: 4px solid var(--erp-ui-brand) !important;
}

[role="tabpanel"][data-tab-panel-level="secondary"],
.panel[data-tab-panel-level="secondary"] {
    border-top: 4px solid #6d28d9 !important;
}

[role="tabpanel"][data-tab-panel-level="tertiary"],
.panel[data-tab-panel-level="tertiary"] {
    border-top: 4px solid #0f766e !important;
}

.show-tabs .badge {
    margin-left: 5px !important;
}

/* PPIC links are section shortcuts, not tabs. */
.ppic-section-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--erp-ui-space-2);
    margin: 0 0 var(--erp-ui-space-4);
    padding: 10px 12px;
    border: 1px solid #bae6fd;
    border-radius: var(--erp-ui-radius);
    background: #f0f9ff;
}

.ppic-section-links__label {
    color: #0c4a6e;
    font-size: .86rem;
}

.ppic-section-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #7dd3fc;
    border-radius: 9px;
    background: #ffffff;
    color: #075985;
    font-size: .86rem;
    font-weight: 800;
}

.ppic-section-links a:hover,
.ppic-section-links a:focus-visible {
    border-color: #0284c7;
    background: #e0f2fe;
}

#planning,
#related-so,
#demand-buckets,
#flow {
    scroll-margin-top: calc(var(--erp-sticky-tabs-top, 120px) + 24px);
}

/* Runtime failures are short, dismissible, and separated from surrounding cards. */
.erp-runtime-guard-feedback {
    position: relative;
    display: grid;
    gap: var(--erp-ui-space-2);
    max-width: calc(100% - 48px);
    margin: var(--erp-ui-space-4) 24px !important;
    box-shadow: var(--erp-ui-shadow-sm);
}

.guard-feedback__head,
.guard-feedback__head-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-ui-space-2);
}

.guard-feedback__head-actions {
    justify-content: flex-end;
}

.guard-feedback__list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 20px;
}

.guard-feedback__close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: rgba(255, 255, 255, .72);
    color: inherit;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
}

/* Searchable single/multiple selects keep native state while presenting one clear control. */
.erp-search-select {
    min-width: 0;
}

.erp-search-select__control {
    min-height: var(--erp-ui-control-height) !important;
    border: 1px solid var(--erp-ui-border-strong) !important;
    border-radius: var(--erp-ui-radius-sm) !important;
    background: #ffffff !important;
}

.erp-search-select.is-open .erp-search-select__control {
    border-color: var(--erp-ui-brand) !important;
    box-shadow: var(--erp-ui-focus) !important;
}

.erp-search-select__pills {
    gap: 6px !important;
    padding-block: 4px;
}

.erp-search-select__pill {
    min-height: 30px;
    padding: 3px 5px 3px 9px !important;
    border: 1px solid #93c5fd !important;
    background: #eff6ff !important;
    color: #1e3a8a !important;
}

.erp-search-select__dropdown--portal {
    z-index: 1450 !important;
    padding: 6px !important;
    border: 1px solid var(--erp-ui-border-strong) !important;
    border-radius: var(--erp-ui-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--erp-ui-shadow) !important;
}

.erp-search-select__option {
    min-height: 42px !important;
    margin: 2px 0;
    border-radius: 9px !important;
    line-height: 1.35;
}

.erp-search-select__option.is-highlighted,
.erp-search-select__option:hover {
    background: #e0f2fe !important;
    color: #0c4a6e !important;
}

.erp-search-select__option.is-selected {
    background: #dbeafe !important;
    color: #1e3a8a !important;
    font-weight: 850 !important;
}

.erp-toast__body p {
    max-height: 9rem;
    overflow: auto;
}

@media (max-width: 720px) {
    .erp-runtime-guard-feedback {
        max-width: calc(100% - 24px);
        margin: 12px !important;
    }

    .guard-feedback__head {
        align-items: flex-start;
    }

    .ppic-section-links {
        align-items: stretch;
        flex-direction: column;
    }

    .ppic-section-links a {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .erp-toast-region,
    .erp-modal-backdrop,
    :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, [role="tablist"]) {
        display: none !important;
    }
}

/* ========================================================================
 * Low-literacy daily-user contract
 * Critical instructions remain visible. Tooltips are reserved for short
 * explanations of icons or terms and never carry blocking requirements.
 * ====================================================================== */
html[data-ui-audience="daily"] {
    --erp-ui-reading-width: 68ch;
    --erp-ui-control-height: 46px;
    --erp-ui-space-section: 22px;
}

html[data-ui-audience="daily"] .content-body {
    font-size: 1rem;
}

html[data-ui-audience="daily"] :where(.page-stack, .page-shell, .detail-page, .index-page) {
    display: flex;
    flex-direction: column;
    gap: var(--erp-ui-space-section);
}

html[data-ui-audience="daily"] :where(.page-stack, .page-shell, .detail-page, .index-page) > * {
    margin-block: 0 !important;
}

html[data-ui-audience="daily"] :where(.panel, .compact-card, .quick-card, .metric-card, .card) +
:where(.panel, .compact-card, .quick-card, .metric-card, .card) {
    margin-top: 0 !important;
}

html[data-ui-audience="daily"] :where(.panel, .compact-card, .quick-card, .metric-card, .card) {
    padding: clamp(16px, 1.8vw, 24px);
}

html[data-ui-audience="daily"] :where(.panel, .compact-card, .card) > :where(h2, h3, .split-header, .section-heading) + * {
    margin-top: 16px;
}

html[data-ui-audience="daily"] .page-header {
    padding: clamp(18px, 2vw, 26px) !important;
}

html[data-ui-audience="daily"] .page-header > div:first-child > p:last-child,
html[data-ui-audience="daily"] .page-intro {
    max-width: var(--erp-ui-reading-width);
    margin-top: 8px;
    color: var(--erp-ui-muted);
    font-size: .98rem;
    line-height: 1.55;
}

/* One visual meaning per component type. */
html[data-ui-audience="daily"] :where(.btn, button.btn, a.btn) {
    border-radius: 9px !important;
    font-weight: 800 !important;
}

html[data-ui-audience="daily"] :where(.badge, .status-badge) {
    border-radius: 7px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

html[data-ui-audience="daily"] :where(.pill, .filter-pill, .tag, .chip, .erp-search-select__pill) {
    border-radius: 999px !important;
}

html[data-ui-audience="daily"] .navbar-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #93c5fd;
    border-radius: 9px !important;
    background: #eff6ff;
    color: #1e3a8a;
}

html[data-ui-audience="daily"] .navbar-role-chip > span {
    color: #475569;
    font-size: .76rem;
    font-weight: 750;
}

html[data-ui-audience="daily"] .navbar-role-chip > strong {
    color: #1e3a8a;
    font-size: .88rem;
}

/* Tabs are navigation, not generic pills. Their content starts on a separate surface. */
html[data-ui-audience="daily"] :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"]) {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
}

html[data-ui-audience="daily"] :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:where(a, button, [role="tab"]) {
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-radius: 9px !important;
    border-width: 1px !important;
}

html[data-ui-audience="daily"] :where([role="tabpanel"], .tab-section, .erp-tab-pane) {
    margin-top: 14px;
}

html[data-ui-audience="daily"] :where([role="tabpanel"], .tab-section, .erp-tab-pane) > :first-child {
    margin-top: 0 !important;
}

/* Form groups are separated from actions and helper messages. */
html[data-ui-audience="daily"] :where(.form-grid, .form-stack, .fields-grid) {
    row-gap: 18px !important;
    column-gap: 16px !important;
}

html[data-ui-audience="daily"] :where(.field, .form-field, .form-group) {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

html[data-ui-audience="daily"] :where(.field > small, .field-help, .helper-text) {
    margin-top: 0 !important;
    font-size: .84rem !important;
}

html[data-ui-audience="daily"] :where(.check, .field-toggle, .checkbox-row, label:has(> input[type="checkbox"])) {
    align-items: flex-start !important;
    gap: 10px !important;
    min-height: 42px;
    padding-block: 7px;
}

html[data-ui-audience="daily"] input[type="checkbox"],
html[data-ui-audience="daily"] input[type="radio"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-top: 1px;
}

html[data-ui-audience="daily"] :where(.actions-row, .form-actions, .modal-actions, .sticky-modal-actions) {
    gap: 10px !important;
    padding-top: 14px;
}

html[data-ui-audience="daily"] :where(.actions-row, .form-actions) > .btn.primary:first-of-type {
    box-shadow: 0 5px 13px rgba(29, 78, 216, .16);
}

/* Tables remain for comparison. Dense technical columns should move to details. */
html[data-ui-audience="daily"] :where(.data-table, .erp-clean-table) :where(th, td) {
    padding-block: 12px !important;
    padding-inline: 12px !important;
    vertical-align: top;
}

html[data-ui-audience="daily"] :where(.data-table, .erp-clean-table) th {
    background: #eef2f7 !important;
    color: #1e293b !important;
    font-size: .82rem !important;
    text-transform: none !important;
}

html[data-ui-audience="daily"] :where(.data-table, .erp-clean-table) tbody tr + tr td {
    border-top-color: #dbe3ec !important;
}

/* Optional guidance: visible summary first, longer help on demand. */
.erp-help-disclosure {
    border: 1px solid #bae6fd;
    border-radius: 12px;
    background: #f0f9ff;
    color: #0c4a6e;
}

.erp-help-disclosure > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 10px 13px;
    cursor: pointer;
    list-style: none;
}

.erp-help-disclosure > summary::-webkit-details-marker {
    display: none;
}

.erp-help-disclosure > summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.25rem;
    font-weight: 900;
}

.erp-help-disclosure[open] > summary::after {
    content: "−";
}

.erp-help-disclosure__icon,
.erp-help-tip {
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: 1px solid #38bdf8;
    border-radius: 50%;
    background: #ffffff;
    color: #075985;
    font-weight: 900;
}

.erp-help-disclosure > summary small {
    display: block;
    margin-top: 2px;
    color: #0e7490 !important;
}

.erp-help-disclosure__content {
    padding: 14px 16px 16px 52px;
    border-top: 1px solid #bae6fd;
    background: #ffffff;
    color: var(--erp-ui-text);
}

.erp-help-disclosure__content > :first-child {
    margin-top: 0;
}

.erp-help-disclosure__content > :last-child {
    margin-bottom: 0;
}

/* Micro tooltips are for terms/icons only, never critical instructions. */
.erp-help-tip {
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    cursor: help;
    font-size: .78rem;
}

.erp-help-tip::after {
    position: absolute;
    z-index: 1800;
    left: 50%;
    bottom: calc(100% + 9px);
    width: max-content;
    max-width: min(300px, 78vw);
    padding: 9px 11px;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    content: attr(data-erp-tooltip);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .12s ease, transform .12s ease;
    white-space: normal;
}

.erp-help-tip:hover::after,
.erp-help-tip:focus-visible::after,
.erp-help-tip.is-open::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Blocking actions stay close to the blocked control and explain the next step. */
.erp-blocking-action {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid #f59e0b;
    border-left: 5px solid #d97706;
    border-radius: 14px;
    background: #fffbeb;
    color: #78350f;
}

.erp-blocking-action__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fef3c7;
    color: #92400e;
    font-size: 1.15rem;
    font-weight: 950;
}

.erp-blocking-action h3 {
    margin: 0 0 6px;
    color: #78350f !important;
}

.erp-blocking-action p {
    margin: 0;
}

.erp-blocking-action__next {
    margin: 13px 0;
    padding: 11px 13px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #ffffff;
    color: #1e293b;
}

.erp-blocking-action__next ol {
    margin: 6px 0 0;
    padding-left: 21px;
}

.erp-technical-details {
    margin-top: 10px;
    color: #475569;
    font-size: .78rem;
}

.erp-technical-details > summary {
    cursor: pointer;
    font-weight: 750;
}

.erp-technical-details code {
    display: block;
    max-width: 100%;
    margin-top: 7px;
    padding: 8px 10px;
    overflow: auto;
    border-radius: 7px;
    background: #f1f5f9;
    color: #334155;
    white-space: pre-wrap;
}

/* Operational actions are task cards, not a technical permission table. */
.operational-action-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.operational-action-panel__header h3 {
    margin: 0;
}

.operational-action-panel__header p {
    max-width: var(--erp-ui-reading-width);
    margin: 5px 0 0;
    color: var(--erp-ui-muted);
}

.operational-action-panel__counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid currentColor;
    font-size: .78rem;
}

.status-badge--ready {
    background: var(--erp-ui-success-soft);
    color: var(--erp-ui-success);
}

.status-badge--blocked {
    background: var(--erp-ui-warning-soft);
    color: var(--erp-ui-warning);
}

.operational-action-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.operational-action-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--erp-ui-border);
    border-left-width: 4px;
    border-radius: 12px;
    background: #ffffff;
}

.operational-action-item.is-ready {
    border-left-color: #16a34a;
    background: #f7fff9;
}

.operational-action-item.is-blocked {
    border-left-color: #d97706;
    background: #fffdf5;
}

.operational-action-item__state {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-weight: 950;
}

.is-ready .operational-action-item__state {
    background: var(--erp-ui-success-soft);
    color: var(--erp-ui-success);
}

.is-blocked .operational-action-item__state {
    background: var(--erp-ui-warning-soft);
    color: var(--erp-ui-warning);
}

.operational-action-item__content > strong {
    display: block;
    color: var(--erp-ui-text);
    font-size: .98rem;
}

.operational-action-item__content > p {
    margin: 4px 0 0;
    color: var(--erp-ui-muted);
}

.operational-action-item__reason {
    margin-top: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}

.operational-action-item__reason > span {
    font-size: .77rem;
    font-weight: 900;
}

.operational-action-item__reason > p {
    margin: 2px 0 0;
}

.operational-action-item__control {
    align-self: center;
}

/* Feedback blocks have a strong icon/title/body hierarchy. */
.guard-feedback {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: start;
}

.guard-feedback__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: rgba(255, 255, 255, .7);
    font-weight: 950;
}

.guard-feedback__body {
    min-width: 0;
}

.guard-feedback__head > div > small {
    display: block;
    margin-top: 3px;
}

.guard-feedback__next {
    display: grid;
    gap: 3px;
    margin-top: 11px;
    padding: 10px 12px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: rgba(255, 255, 255, .65);
}

.guard-feedback__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

@media (max-width: 760px) {
    html[data-ui-audience="daily"] :where(.page-stack, .page-shell, .detail-page, .index-page) {
        gap: 16px;
    }

    .operational-action-panel__header,
    .operational-action-item {
        grid-template-columns: 1fr;
    }

    .operational-action-panel__header {
        flex-direction: column;
    }

    .operational-action-panel__counts {
        justify-content: flex-start;
    }

    .operational-action-item__control,
    .operational-action-item__control .btn {
        width: 100%;
    }

    .erp-help-disclosure__content {
        padding-left: 16px;
    }
}

/* ========================================================================
 * Uniform spacing contract
 * This final layer is intentionally last: every daily screen uses the same
 * spacing scale for page rhythm, surfaces, controls, navigation, and tables.
 * ====================================================================== */
:root {
    --erp-ui-gap-xs: 4px;
    --erp-ui-gap-sm: 8px;
    --erp-ui-gap-md: 12px;
    --erp-ui-gap-lg: 16px;
    --erp-ui-gap-xl: 20px;
    --erp-ui-page-gutter: clamp(14px, 1.6vw, 24px);
    --erp-ui-page-gap: 16px;
    --erp-ui-panel-padding: clamp(16px, 1.45vw, 20px);
    --erp-ui-card-padding: 12px;
    --erp-ui-control-padding-block: 9px;
    --erp-ui-control-padding-inline: 12px;
    --erp-ui-table-padding-block: 11px;
    --erp-ui-table-padding-inline: 12px;
}

html[data-ui-audience="daily"] .content-body {
    padding-inline: var(--erp-ui-page-gutter);
    padding-bottom: 24px;
}

html[data-ui-audience="daily"] :where(.page-stack, .page-shell, .detail-page, .index-page) {
    gap: var(--erp-ui-page-gap) !important;
}

html[data-ui-audience="daily"] :where(.page-stack, .page-shell, .detail-page, .index-page) > * {
    margin-block: 0 !important;
}

html[data-ui-audience="daily"] :where(.page-header, .panel) {
    padding: var(--erp-ui-panel-padding) !important;
}

html[data-ui-audience="daily"] :where(.compact-card, .quick-card, .metric-card, .module-kpi-card, .ops-task-card, .card-soft) {
    padding: var(--erp-ui-card-padding) !important;
}

html[data-ui-audience="daily"] :where(.quick-card-grid, .metric-grid, .module-kpi-strip, .ops-task-grid, .detail-grid, .info-grid) {
    gap: var(--erp-ui-gap-md) !important;
}

html[data-ui-audience="daily"] :where(.toolbar, .filter-bar, .actions-row, .form-actions, .row-actions, .table-actions) {
    column-gap: var(--erp-ui-gap-md) !important;
    row-gap: var(--erp-ui-gap-sm) !important;
}

html[data-ui-audience="daily"] :where(.toolbar, .filter-bar) {
    align-items: flex-end !important;
    margin-bottom: var(--erp-ui-gap-lg) !important;
}

html[data-ui-audience="daily"] .page-header :where(.actions-row, .form-actions) {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}

html[data-ui-audience="daily"] :where(.field, .form-field, .form-group) {
    gap: var(--erp-ui-gap-sm) !important;
    margin: 0 !important;
}

html[data-ui-audience="daily"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea, .form-input, .form-select) {
    padding: var(--erp-ui-control-padding-block) var(--erp-ui-control-padding-inline) !important;
}

html[data-ui-audience="daily"] :where(.btn, button.btn, a.btn) {
    min-height: 40px;
    padding: var(--erp-ui-control-padding-block) 14px !important;
}

html[data-ui-audience="daily"] :where(.btn.xs, button.btn.xs, a.btn.xs) {
    min-height: 32px;
    padding: 6px 10px !important;
}

html[data-ui-audience="daily"] :where(.badge, .status-badge, .pill, .chip, .tag) {
    padding: 5px 8px !important;
}

html[data-ui-audience="daily"] :where(.alert, .settings-note, .product-index-help, .helper-panel, .info-banner) {
    padding: var(--erp-ui-gap-md) var(--erp-ui-gap-lg) !important;
}

html[data-ui-audience="daily"] .product-index-help {
    margin: var(--erp-ui-gap-md) 0 0 !important;
}

html[data-ui-audience="daily"] .product-index-help + .product-index-help {
    margin-top: var(--erp-ui-gap-sm) !important;
}

html[data-ui-audience="daily"] .product-index-help + :where(.table-wrap, .table-responsive) {
    margin-top: var(--erp-ui-gap-md) !important;
}

html[data-ui-audience="daily"] :where(.data-table, .erp-clean-table, .erp-table) :where(th, td) {
    padding: var(--erp-ui-table-padding-block) var(--erp-ui-table-padding-inline) !important;
}

html[data-ui-audience="daily"] :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"]) {
    gap: var(--erp-ui-gap-sm) !important;
    padding: var(--erp-ui-gap-sm) !important;
}

html[data-ui-audience="daily"] :where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"]) > :where(a, button, [role="tab"]) {
    min-height: 40px !important;
    padding: 8px 12px !important;
}

html[data-ui-audience="daily"] :where(.action-reminder-strip, .erp-breadcrumb-bar, .module-kpi-strip) {
    margin-top: 0 !important;
    margin-bottom: var(--erp-ui-page-gap) !important;
}

html[data-ui-audience="daily"] .action-reminder-strip {
    gap: var(--erp-ui-gap-md) !important;
    padding: var(--erp-ui-gap-md) !important;
}

html[data-ui-audience="daily"] .erp-breadcrumb-bar {
    gap: var(--erp-ui-gap-md) !important;
    padding: 10px var(--erp-ui-gap-md) !important;
}

html[data-ui-audience="daily"] .app-navbar[data-sticky-module-navbar] .navbar-primary-row {
    padding: 12px 18px !important;
}

html[data-ui-audience="daily"] .app-navbar[data-sticky-module-navbar] .navbar-module-row {
    padding: 8px 18px !important;
}

html[data-ui-audience="daily"] .app-navbar[data-sticky-module-navbar] :where(.navbar-actions, .module-head-menu) {
    gap: var(--erp-ui-gap-sm) !important;
}

@media (max-width: 680px) {
    html[data-ui-audience="daily"] .content-body {
        padding-inline: 10px;
    }

    html[data-ui-audience="daily"] :where(.page-header, .panel) {
        padding: 14px !important;
    }

    html[data-ui-audience="daily"] .app-navbar[data-sticky-module-navbar] :where(.navbar-primary-row, .navbar-module-row) {
        padding-inline: 14px !important;
    }
}

/* Progressive disclosure for pages or tab panes with multiple large areas. */
.erp-auto-collapsible {
    min-width: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.erp-auto-collapse-toggle {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--erp-ui-gap-sm, 8px);
    width: 100%;
    min-height: 52px;
    margin: 0 0 var(--erp-ui-gap-md);
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--erp-ui-brand, #2563eb) 24%, var(--erp-ui-border, #cbd5e1));
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    color: var(--erp-ui-text, #0f172a);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.erp-auto-collapse-toggle:hover {
    border-color: color-mix(in srgb, var(--erp-ui-brand, #2563eb) 55%, #bfdbfe);
    background: linear-gradient(135deg, #f0f7ff 0%, #e3efff 100%);
    color: #1d4ed8;
    box-shadow: 0 7px 18px rgba(37, 99, 235, .12);
}

.erp-auto-collapse-toggle:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--erp-ui-focus) !important;
}

.erp-auto-collapse-chevron {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #fff;
    color: var(--erp-ui-brand, #1d4ed8);
    box-shadow: 0 2px 5px rgba(37, 99, 235, .1);
}

.erp-auto-collapse-chevron::before {
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .16s ease;
}

.erp-auto-collapse-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.erp-auto-collapse-title {
    min-width: 0;
    font-size: .96rem;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.erp-auto-collapse-summary {
    display: none;
    color: var(--erp-ui-muted, #64748b);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
}

.erp-auto-collapse-state {
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--erp-ui-muted, #475569);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
}

.erp-auto-collapsible.is-collapsed > .erp-auto-collapse-toggle {
    margin-bottom: 0;
    border-color: var(--erp-ui-border, #d7e0ec);
    background: #f8fafc;
    box-shadow: none;
}

.erp-auto-collapsible.is-collapsed > .erp-auto-collapse-toggle .erp-auto-collapse-chevron::before {
    transform: rotate(-45deg) translate(-1px, -1px);
}

.erp-auto-collapsible.is-collapsed > .erp-auto-collapse-toggle .erp-auto-collapse-summary {
    display: block;
}

.erp-auto-collapsible.is-collapsed > .erp-auto-collapse-toggle .erp-auto-collapse-state {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.erp-auto-collapsible.is-collapsed > :not(.erp-auto-collapse-toggle) {
    display: none !important;
}

.erp-auto-collapsible .erp-auto-collapse-source-heading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 680px) {
    .erp-auto-collapse-toggle {
        grid-template-columns: 30px minmax(0, 1fr);
        padding-inline: 10px;
    }

    .erp-auto-collapse-state {
        grid-column: 2;
    }
}

/* Collapsed history keeps high-risk system pages readable without hiding current actions. */
.erp-history-disclosure {
    padding: 0 !important;
    overflow: clip;
}

.erp-history-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    background: #f8fafc;
    color: var(--erp-ui-text);
}

.erp-history-disclosure > summary::-webkit-details-marker {
    display: none;
}

.erp-history-disclosure > summary:hover {
    background: #eef4ff;
}

.erp-history-disclosure > summary:focus-visible {
    outline: 3px solid var(--erp-ui-focus);
    outline-offset: -3px;
}

.erp-history-disclosure > summary > span:first-child {
    display: grid;
    gap: 3px;
}

.erp-history-disclosure > summary small {
    color: var(--erp-ui-muted);
}

.erp-history-disclosure > summary > span:last-child {
    font-size: 1.25rem;
    font-weight: 900;
    transition: transform .16s ease;
}

.erp-history-disclosure[open] > summary > span:last-child {
    transform: rotate(180deg);
}

.erp-history-disclosure__content {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--erp-ui-border);
}

@media (prefers-reduced-motion: reduce) {
    .erp-history-disclosure > summary > span:last-child {
        transition: none;
    }
}

/* Operational readability: ordering controls, compact dates, money and long labels. */
.index-order-controls {
    display: contents;
}

.index-order-controls > .field {
    order: 90;
    min-width: 10.5rem;
}

.data-table th,
.data-table td {
    vertical-align: top;
}

.data-table td.text-right,
.data-table .money-value,
.data-table .money-cell,
.data-table .quantity-value,
.data-table .quantity-cell,
.data-table .date-cell,
.data-table time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.data-table .related-link,
.data-table .entity-name,
.data-table .entity-name-cell,
.data-table td[data-column="customer"],
.data-table td[data-column="supplier"],
.data-table td[data-column="partner"] {
    max-width: 18rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
    text-align: left;
}

.data-table .related-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    height: auto;
    padding-block: .35rem;
}

.data-table .status-pill,
.data-table .status-badge,
.data-table .badge {
    max-width: 13rem;
    min-height: 1.75rem;
    height: auto;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.25;
    text-align: left;
}

.dashboard-header-actions .action-menu-panel a,
.dashboard-decision-section-head p {
    text-wrap: pretty;
}

@media (max-width: 767px) {
    .index-order-controls > .field {
        min-width: min(100%, 12rem);
    }

    .data-table .related-link,
    .data-table .entity-name,
    .data-table .entity-name-cell {
        max-width: 14rem;
    }
}


/* 2026-07-25: global long-label and dropdown interaction contract. */
:where(.field, .form-field, .form-group, .detail-grid > *, .info-grid > *, .erp-detail-grid > *,
    .metric-grid > *, .kpi-grid > *, .summary-grid > *, .quick-card-grid > *, .card-grid > *,
    .data-table th, .data-table td, .erp-table th, .erp-table td) {
    min-width: 0;
}

:where(.field > span:first-child, .field > label:first-child, .form-label, label.form-label,
    .detail-grid strong, .detail-grid small, .info-grid strong, .info-grid small,
    .erp-detail-grid strong, .erp-detail-grid small, .metric-card strong, .metric-card small,
    .module-kpi-card strong, .module-kpi-card small, .kpi-card strong, .kpi-card small,
    .quick-card strong, .quick-card small, .entity-name, .field-value, .record-value,
    .related-link, .status-badge, .status-pill, .badge) {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: clip !important;
}

.detail-grid strong,
.info-grid strong,
.erp-detail-grid strong,
.metric-card strong,
.module-kpi-card strong,
.kpi-card strong,
.quick-card strong {
    display: block;
    overflow: visible !important;
    line-height: 1.28;
}

.related-link {
    display: inline-flex;
    min-width: 0;
    min-height: 2rem;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    padding-block: .35rem;
    text-align: left;
    line-height: 1.28;
}

:where(.data-table, .erp-table) :where(th, td):not(.actions-cell):not(.money-cell):not(.quantity-cell):not(.date-cell) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

:where(.money-value, .money-cell, .quantity-value, .quantity-cell, .date-cell, time) {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Native selects stay compact for small option sets, with one consistent accessible chevron. */
:where(select:not([multiple]):not(.erp-native-select-hidden)) {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-inline-end: 2.45rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 1rem 1rem !important;
    background-position: right .8rem center !important;
}

html[dir="rtl"] :where(select:not([multiple]):not(.erp-native-select-hidden)) {
    background-position: left .8rem center !important;
    padding-inline: 2.45rem .75rem !important;
}

:where(select:not([multiple]):disabled) {
    cursor: not-allowed;
    opacity: .74;
}

/* Searchable selects are automatic for 5+ choices, explicit searchable fields, multi-selects, or long labels. */
.erp-search-select {
    min-width: 0 !important;
    max-width: 100%;
}

.erp-search-select__control {
    height: auto !important;
    min-width: 0;
    align-items: flex-start !important;
    padding: .35rem .65rem !important;
}

.erp-search-select__value {
    min-width: 0;
    max-width: 100%;
    padding-block: .35rem;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: clip !important;
    line-height: 1.3;
}

.erp-search-select__pills,
.erp-search-select__pill,
.erp-search-select__option,
.erp-search-select__empty {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left;
}

.erp-search-select__option {
    display: block;
    width: 100%;
    height: auto;
}

.erp-search-select__arrow {
    width: .58rem;
    height: .58rem;
    flex: 0 0 .58rem;
    margin: .78rem .18rem 0 .35rem !important;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: #475569;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .16s ease;
}

.erp-search-select.is-open .erp-search-select__arrow {
    transform: rotate(225deg);
    margin-top: .95rem !important;
}

.erp-search-select__clear {
    flex: 0 0 24px;
    margin-top: .34rem;
}

.erp-search-select__search {
    min-width: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .erp-search-select__arrow {
        transition: none;
    }
}

/* Cross-module action ownership cards must remain readable with long names, emails, workflow labels, and role lists. */
.break-anywhere,
.document-action-context :where(strong, small, p, a, span) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.document-action-context-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.document-action-context-grid > div {
    min-width: 0;
}

.document-action-context-grid > div > strong,
.document-action-context-grid > div > small {
    display: block;
    max-width: 100%;
}


/* Company onboarding translation and five-step layout safety. */
.company-onboarding-page .wizard-progress-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.company-onboarding-page .wizard-progress-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 12px !important;
    text-align: left !important;
}

.company-onboarding-page .wizard-progress-badge {
    display: inline-grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

.company-onboarding-page .wizard-progress-copy {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.company-onboarding-page .wizard-progress-copy strong,
.company-onboarding-page .wizard-progress-copy small,
.company-onboarding-page .wizard-step-heading strong,
.company-onboarding-page .wizard-step-heading small,
.company-onboarding-page .field > span,
.company-onboarding-page .help-text {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
}

.company-onboarding-page .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
}

.company-onboarding-page .form-grid > .wide {
    grid-column: span 2 !important;
}

.company-onboarding-page .wizard-step-card,
.company-onboarding-page .user-create-wizard-panel,
.company-onboarding-page .sticky-user-save-bar {
    min-width: 0 !important;
}

@media (max-width: 1280px) {
    .company-onboarding-page .wizard-progress-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .company-onboarding-page .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .company-onboarding-page .wizard-progress-strip,
    .company-onboarding-page .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .company-onboarding-page .wizard-progress-strip,
    .company-onboarding-page .form-grid {
        grid-template-columns: 1fr !important;
    }

    .company-onboarding-page .form-grid > .wide {
        grid-column: auto !important;
    }
}

/*
 * Primary horizontal tabs use a folder-tab silhouette so navigation cannot be
 * mistaken for save, approve, delete, or other action buttons. Secondary and
 * vertical navigation deliberately keep their existing contrasting treatment.
 */
html[data-ui-audience="daily"]
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:not(.erp-tabs-vertical)
:not([aria-orientation="vertical"])
:not([data-tab-orientation="vertical"])
:not([data-tab-level="secondary"])
:not([data-tab-level="tertiary"]) {
    align-items: flex-end !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    padding: 8px 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #aebdd1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

html[data-ui-audience="daily"]
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:not(.erp-tabs-vertical)
:not([aria-orientation="vertical"])
:not([data-tab-orientation="vertical"])
:not([data-tab-level="secondary"])
:not([data-tab-level="tertiary"])
:where(a, button, [role="tab"]) {
    min-height: 43px !important;
    margin-bottom: -1px !important;
    padding: 9px 15px !important;
    border: 1px solid #b8c6d9 !important;
    border-bottom-color: #aebdd1 !important;
    border-radius: 12px 12px 0 0 !important;
    background: #e8eef6 !important;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .04) !important;
    color: #334155 !important;
}

html[data-ui-audience="daily"]
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:not(.erp-tabs-vertical)
:not([aria-orientation="vertical"])
:not([data-tab-orientation="vertical"])
:not([data-tab-level="secondary"])
:not([data-tab-level="tertiary"])
:where(a, button, [role="tab"]):hover {
    border-color: #8fa4be !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

html[data-ui-audience="daily"]
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:not(.erp-tabs-vertical)
:not([aria-orientation="vertical"])
:not([data-tab-orientation="vertical"])
:not([data-tab-level="secondary"])
:not([data-tab-level="tertiary"])
:where(a.active, a.is-active, button.active, button.is-active, [role="tab"][aria-selected="true"]) {
    z-index: 1;
    border-color: #8fa4be !important;
    border-top: 4px solid var(--erp-ui-brand) !important;
    border-bottom-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: 0 -2px 7px rgba(15, 23, 42, .07) !important;
    color: #0f3f77 !important;
}

html[data-ui-audience="daily"]
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:not(.erp-tabs-vertical)
:not([aria-orientation="vertical"])
:not([data-tab-orientation="vertical"])
:not([data-tab-level="secondary"])
:not([data-tab-level="tertiary"])
:where(a.active, a.is-active, button.active, button.is-active, [role="tab"][aria-selected="true"])::after {
    display: none !important;
    content: none !important;
}

html[data-ui-audience="daily"]
:where(.tabs, .erp-tabs, .tabs-nav, .settings-tabs, .show-tabs, [role="tablist"])
:where(a, button, [role="tab"]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--erp-ui-brand) 34%, transparent) !important;
    outline-offset: 2px !important;
}

/* Manufacturing gap closure: first-class, low-literacy QC workspace. */
.qc-step-grid,
.qc-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
}
.qc-step-grid { list-style: none; }
.qc-step-grid li,
.qc-entry-card {
    min-width: 0;
    border: 1px solid var(--border, #d9e0e7);
    border-radius: .9rem;
    padding: 1rem;
    background: var(--surface, #fff);
}
.qc-step-grid li { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; }
.qc-step-grid li > span,
.qc-entry-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--primary-soft, #e7f1ff);
    font-weight: 800;
}
.qc-step-grid small { grid-column: 2; line-height: 1.45; }
.qc-entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-entry-card { display: flex; align-items: flex-start; gap: .8rem; text-decoration: none; color: inherit; }
.qc-entry-card:hover,
.qc-entry-card:focus-visible { border-color: var(--primary, #2457a7); transform: translateY(-1px); }
.qc-entry-card div { min-width: 0; display: grid; gap: .3rem; }
.qc-entry-card small { line-height: 1.5; }
.qc-queue-list { display: grid; gap: .75rem; }
.qc-queue-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--border, #d9e0e7);
    border-radius: .8rem;
    padding: .9rem 1rem;
}
.qc-queue-main { min-width: 0; }
.qc-queue-title { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.qc-queue-main p,
.qc-queue-main small { overflow-wrap: anywhere; }
.qc-queue-meta { display: grid; justify-items: end; gap: .5rem; }
@media (max-width: 980px) {
    .qc-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qc-entry-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .qc-step-grid { grid-template-columns: 1fr; }
    .qc-queue-row { grid-template-columns: 1fr; }
    .qc-queue-meta { justify-items: stretch; }
    .qc-queue-meta .btn { width: 100%; justify-content: center; }
}

/* Accessible progressive enhancement for native date/time/datetime controls. */
/* Native date/time inputs use the browser picker only. No injected second button or summary. */
.erp-native-picker-input {
    min-height: 42px;
    width: 100%;
}
.erp-native-picker-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    min-width: 1.25rem;
    min-height: 1.25rem;
}

.qc-queue-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(500px, auto);
    align-items: end !important;
    gap: 1rem !important;
}
.qc-inline-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(165px, 1fr)) auto !important;
    align-items: end !important;
    gap: .7rem !important;
    min-width: min(100%, 560px);
    width: 100%;
}
.qc-inline-filters > .field { min-width: 0; }
.qc-inline-filters > .btn {
    min-height: 42px;
    white-space: nowrap;
}

.erp-owner-tools {
    border: 2px solid color-mix(in srgb, var(--warning, #b7791f) 42%, var(--border, #d8e1ef));
    background: color-mix(in srgb, var(--warning, #f59e0b) 5%, var(--surface, #fff));
}
.erp-owner-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.erp-owner-tool-card {
    border: 1px solid var(--border, #d8e1ef);
    border-radius: 16px;
    padding: 1rem;
    background: var(--surface, #fff);
    min-width: 0;
}
.erp-owner-tool-card h3,
.erp-owner-tool-card p,
.erp-owner-tool-card li,
.erp-owner-tool-card code { overflow-wrap: anywhere; }
.erp-owner-tool-card .danger-confirmation { margin-top: .85rem; }
.erp-owner-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
    margin-top: .8rem;
}
.erp-owner-preview-item {
    border: 1px solid var(--border, #d8e1ef);
    border-radius: 12px;
    padding: .7rem;
    background: var(--surface-soft, #f7f9fc);
}
.erp-owner-preview-item strong { display: block; font-size: 1.15rem; }
.erp-safety-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin: .85rem 0;
}
.erp-safety-step {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    border-radius: 12px;
    padding: .7rem;
    background: var(--surface-soft, #f7f9fc);
}
.erp-safety-step > span:first-child {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary, #2457a7) 12%, #fff);
    font-weight: 800;
    flex: 0 0 auto;
}

@media (max-width: 1100px) {
    .qc-queue-heading { grid-template-columns: minmax(0, 1fr) !important; }
    .qc-inline-filters { min-width: 0; max-width: 720px; }
}
@media (max-width: 820px) {
    .erp-owner-tools-grid { grid-template-columns: minmax(0, 1fr); }
    .erp-safety-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .qc-inline-filters { grid-template-columns: minmax(0, 1fr) !important; }
    .qc-inline-filters > .btn { width: 100%; }
}

/* Bakery quality-control usability foundation — 2026-08-04 */
.bakery-profile-card {
    display: grid;
    gap: 1rem;
    border-inline-start: .35rem solid var(--color-warning, #b7791f);
}

.bakery-profile-card.is-ready {
    border-inline-start-color: var(--color-success, #2f855a);
}

.bakery-profile-main,
.quality-control-card > header,
.decision-readiness-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bakery-profile-main > div,
.quality-control-card > header > div:nth-child(2) {
    min-width: 0;
}

.bakery-profile-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.bakery-profile-metrics > div,
.quality-control-expectation > div,
.result-readonly-field {
    display: grid;
    gap: .2rem;
    padding: .75rem;
    border: 1px solid var(--border-color, #d9dee7);
    border-radius: .75rem;
    background: var(--surface-subtle, #f7f9fc);
}

.bakery-profile-metrics span,
.quality-control-expectation span,
.result-readonly-field > span {
    color: var(--text-muted, #5b6472);
    font-size: .82rem;
    font-weight: 700;
}

.choice-card {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
    padding: .8rem;
    border: 1px solid var(--border-color, #d9dee7);
    border-radius: .75rem;
    background: var(--surface, #fff);
    cursor: pointer;
}

.choice-card > span {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.choice-card small,
.quality-control-card small {
    color: var(--text-muted, #5b6472);
}

.quality-control-card-list {
    display: grid;
    gap: 1rem;
}

.quality-control-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #d9dee7);
    border-radius: .9rem;
    background: var(--surface, #fff);
    box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.quality-control-card.is-critical {
    border-inline-start: .35rem solid var(--color-danger, #c53030);
}

.quality-control-card > header {
    align-items: center;
}

.quality-control-card > header small {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.quality-control-number {
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--surface-subtle, #eef2f7);
    font-weight: 800;
}

.quality-control-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.quality-control-expectation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.quality-control-expectation > p {
    grid-column: 1 / -1;
    margin: 0;
    padding: .75rem;
    border-radius: .65rem;
    background: var(--surface-subtle, #f7f9fc);
    overflow-wrap: anywhere;
}

.field-help {
    margin: 0;
    color: var(--text-muted, #5b6472);
    font-size: .85rem;
}

.decision-readiness-card {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: .8rem;
    border: 1px solid var(--border-color, #d9dee7);
}

.decision-readiness-card.is-ready {
    border-color: var(--color-success, #2f855a);
    background: color-mix(in srgb, var(--color-success, #2f855a) 8%, transparent);
}

.decision-readiness-card.is-blocked {
    display: grid;
    border-color: var(--color-warning, #b7791f);
    background: color-mix(in srgb, var(--color-warning, #b7791f) 8%, transparent);
}

.decision-readiness-card ul {
    margin: .25rem 0 0 1.2rem;
}

.quality-control-readonly-list .quality-control-card {
    padding: .9rem;
}

@media (max-width: 900px) {
    .bakery-profile-metrics,
    .quality-control-options,
    .quality-control-expectation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bakery-profile-main,
    .quality-control-card > header,
    .decision-readiness-card {
        flex-direction: column;
        align-items: stretch;
    }

    .bakery-profile-metrics,
    .quality-control-options,
    .quality-control-expectation {
        grid-template-columns: 1fr;
    }

    .choice-card {
        min-height: 3.25rem;
    }
}

/* Error-log clarity and low-literacy triage */
.error-log-primary-actions {
    align-items: center;
    flex-wrap: wrap;
}

.error-human-summary .section-heading h2 {
    max-width: 72rem;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.35;
}

.error-insight-grid,
.error-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.error-insight-card,
.error-copy-panel {
    min-width: 0;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .85rem;
    background: var(--surface, #fff);
    padding: 1rem;
}

.error-insight-card > span {
    display: block;
    margin-bottom: .4rem;
    color: var(--muted-color, #5d6875);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.error-insight-card > strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.55;
}

.error-insight-card-wide {
    grid-column: 1 / -1;
}

.technical-reference-card code {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}

.error-copy-panel h3 {
    margin: 0;
    font-size: 1rem;
}

.error-copy-panel .error-log-copy-box {
    width: 100%;
    margin-top: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    line-height: 1.5;
    resize: vertical;
}

.error-technical-details {
    margin-top: .85rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .75rem;
    background: var(--surface, #fff);
}

.error-technical-details > summary {
    cursor: pointer;
    padding: .85rem 1rem;
    font-weight: 700;
}

.error-technical-details > .error-log-code-block {
    margin: 0;
    border-radius: 0 0 .75rem .75rem;
}

@media (max-width: 760px) {
    .error-insight-grid,
    .error-copy-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .error-insight-card-wide {
        grid-column: auto;
    }

    .error-log-primary-actions .btn {
        flex: 1 1 11rem;
        justify-content: center;
    }
}

/* Super Admin company-data cleanup workspace */
.erp-cleanup-page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.erp-cleanup-hero,
.erp-cleanup-section {
    min-width: 0;
}

.erp-cleanup-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-inline-start: .3rem solid var(--primary-color, #2563eb);
}

.erp-cleanup-hero h1,
.erp-cleanup-section h2,
.erp-cleanup-group-card h3 {
    overflow-wrap: anywhere;
}

.erp-cleanup-company-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 2fr) minmax(12rem, 1fr);
    gap: 1rem;
    align-items: end;
}

.erp-cleanup-company-summary {
    display: grid;
    gap: .2rem;
    min-width: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .8rem;
    background: var(--surface-subtle, #f7f9fc);
}

.erp-cleanup-company-summary strong,
.erp-cleanup-company-summary span {
    overflow-wrap: anywhere;
}

.erp-cleanup-date-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 1.2fr) minmax(18rem, 1fr);
    gap: 1rem;
    align-items: end;
    margin-block: 1rem;
}

.erp-cleanup-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.erp-cleanup-mode legend {
    grid-column: 1 / -1;
    margin-bottom: .35rem;
    font-weight: 800;
}

.erp-choice-card {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .85rem;
    background: var(--surface, #fff);
    cursor: pointer;
}

.erp-choice-card:has(input:checked) {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #2563eb) 15%, transparent);
}

.erp-choice-card input {
    margin-top: .2rem;
    min-width: 1.1rem;
    min-height: 1.1rem;
}

.erp-choice-card span {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.erp-choice-card strong,
.erp-choice-card small {
    overflow-wrap: anywhere;
}

.erp-cleanup-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.erp-cleanup-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 1rem;
}

.erp-cleanup-group-card {
    display: grid;
    align-content: start;
    gap: .75rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .9rem;
    background: var(--surface, #fff);
}

.erp-cleanup-group-card > header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
}

.erp-cleanup-group-card > header p {
    margin: .25rem 0 0;
    color: var(--muted-color, #5d6875);
    line-height: 1.5;
}

.compact-actions {
    gap: .45rem;
}

.erp-cleanup-table-list {
    display: grid;
    gap: .5rem;
}

.erp-cleanup-table-option {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
    padding: .7rem .75rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .75rem;
    background: var(--surface-subtle, #f7f9fc);
    cursor: pointer;
}

.erp-cleanup-table-option:has(input:checked) {
    border-color: var(--primary-color, #2563eb);
    background: color-mix(in srgb, var(--primary-color, #2563eb) 6%, #fff);
}

.erp-cleanup-table-option input {
    margin-top: .2rem;
    min-width: 1.15rem;
    min-height: 1.15rem;
}

.erp-cleanup-table-copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.erp-cleanup-table-copy strong,
.erp-cleanup-table-copy small,
.erp-cleanup-table-copy code {
    overflow-wrap: anywhere;
    white-space: normal;
}

.erp-cleanup-preview-action {
    justify-content: flex-end;
    margin-top: 1rem;
}

.erp-cleanup-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-block: 1rem;
}

.erp-cleanup-summary-card {
    display: grid;
    gap: .3rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .85rem;
    background: var(--surface-subtle, #f7f9fc);
}

.erp-cleanup-summary-card strong {
    font-size: 1.55rem;
}

.danger-summary {
    border-color: color-mix(in srgb, #dc2626 45%, var(--border-color, #d9e0e7));
    background: color-mix(in srgb, #dc2626 5%, #fff);
}

.erp-cleanup-breakdowns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.erp-cleanup-breakdowns > div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-color, #d9e0e7);
    border-radius: .85rem;
}

.erp-cleanup-count-list {
    display: grid;
    gap: .45rem;
    max-height: 22rem;
    overflow: auto;
}

.erp-cleanup-count-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .55rem .65rem;
    border-radius: .65rem;
    background: var(--surface-subtle, #f7f9fc);
}

.erp-cleanup-count-list span,
.erp-cleanup-count-list code {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.erp-cleanup-warning-list ul {
    margin: .65rem 0 0;
    padding-inline-start: 1.2rem;
}

.erp-cleanup-warning-list li + li {
    margin-top: .35rem;
}

.erp-cleanup-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.erp-cleanup-confirm-grid .wide,
.erp-cleanup-confirm-grid .full {
    grid-column: 1 / -1;
}

.erp-cleanup-confirm-grid code {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
    margin-block: .35rem;
}

@media (max-width: 980px) {
    .erp-cleanup-groups,
    .erp-cleanup-breakdowns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .erp-cleanup-hero,
    .erp-cleanup-group-card > header {
        align-items: stretch;
        flex-direction: column;
    }

    .erp-cleanup-company-grid,
    .erp-cleanup-date-grid,
    .erp-cleanup-summary-cards,
    .erp-cleanup-confirm-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-cleanup-mode,
    .erp-cleanup-range-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-cleanup-confirm-grid .wide,
    .erp-cleanup-confirm-grid .full {
        grid-column: auto;
    }

    .erp-cleanup-preview-action .btn,
    .erp-cleanup-confirm-grid .btn,
    .erp-cleanup-hero .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Batch barcode traceability and company configuration clone wizard */
.batch-traceability-filters,
.batch-label-settings,
.document-scanner-grid,
.clone-confirmation-grid,
.clone-rollback-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.clone-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.clone-group-grid .option-card,
.package-chip,
.barcode-value-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.clone-group-grid .option-card {
    align-items: flex-start;
    min-height: 5.25rem;
    padding: .9rem;
}

.clone-group-grid small,
.clone-wizard-selection small,
.clone-preview-panel small {
    display: block;
    margin-top: .25rem;
    line-height: 1.45;
}

.clone-preview-actions,
.clone-confirmation-grid,
.clone-rollback-box {
    margin-top: 1rem;
}

.clone-confirmation-grid,
.clone-rollback-box {
    grid-template-columns: minmax(0, 2fr) minmax(12rem, .8fr);
    padding: 1rem;
    border: 1px solid var(--border, #d9e0ea);
    border-radius: .85rem;
    background: var(--surface-subtle, #f7f9fc);
}

.clone-rollback-box .btn,
.clone-confirmation-grid .btn {
    align-self: end;
    justify-self: stretch;
}

.owner-only-badge {
    align-self: flex-start;
}

.batch-traceability-layout {
    display: grid;
    grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.65fr);
    gap: 1rem;
    align-items: start;
}

.barcode-value-card {
    padding: .85rem;
    border: 1px dashed var(--border-strong, #aeb9c8);
    border-radius: .75rem;
    background: var(--surface-subtle, #f7f9fc);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.input-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: end;
}

.package-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.package-chip {
    padding: .7rem;
    border: 1px solid var(--border, #d9e0ea);
    border-radius: .7rem;
    background: var(--surface, #fff);
}

.batch-scan-feedback {
    margin-block: .75rem;
}

.batch-label-sheet {
    display: grid;
    grid-template-columns: repeat(var(--label-columns, 3), minmax(0, var(--label-width, 80mm)));
    gap: var(--label-gap, 2mm);
    padding: var(--label-margin, 6mm);
    justify-content: start;
}

.batch-label-card {
    width: var(--label-width, 80mm);
    height: var(--label-height, 50mm);
    box-sizing: border-box;
    overflow: hidden;
    break-inside: avoid;
    border: .25mm solid #111;
    padding: 2.2mm;
    display: flex;
    flex-direction: column;
    gap: 1.2mm;
    background: #fff;
    color: #111;
}

.batch-label-card svg {
    width: 100%;
    max-height: 18mm;
}

.batch-label-card * {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .clone-group-grid,
    .package-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .batch-traceability-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .batch-traceability-filters,
    .batch-label-settings,
    .document-scanner-grid,
    .clone-confirmation-grid,
    .clone-rollback-box,
    .clone-group-grid,
    .package-chip-grid,
    .input-action-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .batch-traceability-filters .btn,
    .batch-label-settings .btn,
    .document-scanner-grid .btn,
    .clone-confirmation-grid .btn,
    .clone-rollback-box .btn,
    .input-action-row .btn {
        width: 100%;
        justify-content: center;
    }
}

@media print {
    .batch-label-toolbar {
        display: none !important;
    }

    .batch-label-sheet {
        padding: var(--label-margin, 0);
    }
}

.policy-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    margin-bottom: 1rem;
}

@media (max-width: 760px) {
    .policy-toggle-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .policy-toggle-row .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Batch barcode bulk EAN-13 / QR workspace */
.batch-traceability-page .form-grid .span-2 {
    grid-column: span 2;
}

.batch-traceability-page .form-grid .span-4 {
    grid-column: 1 / -1;
}

.batch-traceability-page .checkbox-cell {
    width: 44px;
    text-align: center;
}

.batch-traceability-page .checkbox-field {
    align-content: center;
    min-height: 44px;
}

.batch-traceability-page .checkbox-field input {
    inline-size: 20px;
    block-size: 20px;
}

.batch-traceability-page .alert.compact {
    margin-block-start: 12px;
}

@media (max-width: 760px) {
    .batch-traceability-page .form-grid .span-2,
    .batch-traceability-page .form-grid .span-4 {
        grid-column: 1 / -1;
    }
}

/* ========================================================================
 * Role-wide daily-work experience layer
 * Keeps every module readable for frequent operational users without
 * flattening domain-specific information or hiding blocking actions.
 * ====================================================================== */
html[data-ui-audience="daily"] .content-body {
    padding-inline: clamp(12px, 1.6vw, 24px);
    padding-bottom: 28px;
}

html[data-ui-audience="daily"] .page-header :where(h1, h2) {
    margin: 0;
    max-width: 30ch;
    line-height: 1.15;
    text-wrap: balance;
}

html[data-ui-audience="daily"] .page-header.split-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

html[data-ui-audience="daily"] .page-header.split-header > .actions-row {
    justify-content: flex-end;
    max-width: min(44rem, 46vw);
}

html[data-ui-audience="daily"] :where(.panel, .compact-card, .card-soft) {
    border-color: color-mix(in srgb, var(--erp-ui-border, #cbd5e1) 84%, transparent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

html[data-ui-audience="daily"] :where(.panel, .compact-card, .card-soft) :where(.panel, .compact-card, .card-soft) {
    box-shadow: none;
}

html[data-ui-audience="daily"] :where(.form-grid, .filters-grid, .filter-grid, .compact-form-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

html[data-ui-audience="daily"] :where(.form-grid.three, .filters-grid.three, .filter-grid.three) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-ui-audience="daily"] :where(.form-grid, .filters-grid, .filter-grid, .compact-form-grid) > :where(.wide, .full, [data-full-width]) {
    grid-column: 1 / -1;
}

html[data-ui-audience="daily"] :where(.field, .form-field, .form-group) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-width: 0;
}

html[data-ui-audience="daily"] :where(.field, .form-field, .form-group) textarea {
    min-height: 7rem;
    resize: vertical;
}

html[data-ui-audience="daily"] :where(.field, .form-field, .form-group) > :where(small, .help-text, .field-help, .helper-text) {
    max-width: 62ch;
    line-height: 1.45;
}

html[data-ui-audience="daily"] :where(.toolbar, .actions-row, .row-actions, .table-actions) {
    align-items: center;
}

html[data-ui-audience="daily"] :where(.toolbar, .actions-row) > :where(.btn, button, a.btn) {
    min-height: 40px;
}

html[data-ui-audience="daily"] :where(.table-wrap, .table-responsive, .data-table-wrap, .responsive-table, .navigation-table-wrap)[data-erp-scrollable-table="true"] {
    position: relative;
    border-radius: 12px;
    outline: none;
    scrollbar-gutter: stable;
}

html[data-ui-audience="daily"] :where(.table-wrap, .table-responsive, .data-table-wrap, .responsive-table, .navigation-table-wrap)[data-erp-scrollable-table="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}

html[data-ui-audience="daily"] :where(.table-wrap, .table-responsive, .data-table-wrap, .responsive-table, .navigation-table-wrap) table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

html[data-ui-audience="daily"] :where(.data-table, .erp-table, table) tbody tr {
    transition: background-color .12s ease;
}

html[data-ui-audience="daily"] :where(.data-table, .erp-table, table) tbody tr:hover {
    background: color-mix(in srgb, var(--erp-ui-surface, #ffffff) 82%, #dbeafe 18%);
}

html[data-ui-audience="daily"] :where(.record-show-page, .partner-show-page, .production-stage-execution-page) > .show-tabs,
html[data-ui-audience="daily"] :where(.record-show-page, .partner-show-page, .production-stage-execution-page) > nav.show-tabs {
    margin-bottom: 0;
}

html[data-ui-audience="daily"] :where(.record-show-page, .partner-show-page, .production-stage-execution-page) :where(.detail-grid, .info-grid, .readable-detail-grid) > * {
    padding-block: 8px;
}

.erp-sidebar-filter {
    display: grid;
    gap: 6px;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--erp-ui-border, #cbd5e1) 84%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--erp-ui-surface, #ffffff) 94%, #eff6ff 6%);
}

.erp-sidebar-filter label {
    font-size: .78rem;
    font-weight: 800;
    color: var(--erp-ui-text, #0f172a);
}

.erp-sidebar-filter .form-input {
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: .88rem !important;
}

.erp-sidebar-filter small {
    color: var(--erp-ui-muted, #64748b);
    font-size: .75rem;
    line-height: 1.35;
}

.sidebar-submenu-group[hidden],
.sidebar-submenu-links a[hidden] {
    display: none !important;
}

.ppic-section-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--erp-ui-border, #cbd5e1);
    border-radius: 12px;
    background: var(--erp-ui-surface, #ffffff);
}

.ppic-section-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--erp-ui-border, #cbd5e1) 88%, transparent);
    border-radius: 9px;
    color: var(--erp-ui-text, #0f172a);
    font-size: .84rem;
    font-weight: 750;
    text-decoration: none;
}

.ppic-section-links a:hover,
.ppic-section-links a:focus-visible {
    border-color: #60a5fa;
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 980px) {
    html[data-ui-audience="daily"] .page-header.split-header {
        grid-template-columns: 1fr;
    }

    html[data-ui-audience="daily"] .page-header.split-header > .actions-row {
        justify-content: flex-start;
        max-width: none;
    }

    html[data-ui-audience="daily"] :where(.form-grid.three, .filters-grid.three, .filter-grid.three) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    html[data-ui-audience="daily"] .content-body {
        padding-inline: 10px;
    }

    html[data-ui-audience="daily"] :where(.form-grid, .filters-grid, .filter-grid, .compact-form-grid, .form-grid.three, .filters-grid.three, .filter-grid.three) {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-ui-audience="daily"] :where(.page-header, .panel, .compact-card, .quick-card, .card) {
        padding: 14px !important;
    }

    .ppic-section-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ppic-section-links a {
        flex: 0 0 auto;
    }
}

/* Role workspace refinement: keep primary actions obvious and secondary actions available without crowding headers. */
.erp-action-overflow {
    position: relative;
    display: inline-block;
}
.erp-action-overflow > summary {
    list-style: none;
}
.erp-action-overflow > summary::-webkit-details-marker {
    display: none;
}
.erp-action-overflow__trigger {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    user-select: none;
}
.erp-action-overflow__chevron {
    transition: transform .16s ease;
    font-size: .85em;
}
.erp-action-overflow[open] .erp-action-overflow__chevron {
    transform: rotate(180deg);
}
.erp-action-overflow__menu {
    position: absolute;
    z-index: 35;
    top: calc(100% + 8px);
    right: 0;
    min-width: min(360px, 86vw);
    max-width: 420px;
    padding: 10px;
    border: 1px solid var(--line, #dbe3ef);
    border-radius: 14px;
    background: var(--panel, #fff);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .16);
    display: grid;
    gap: 8px;
}
.erp-action-overflow__menu :where(.btn, button, a) {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}
.erp-action-overflow__description {
    margin: 0 0 2px;
    color: var(--muted, #64748b);
    font-size: .8rem;
    line-height: 1.45;
}
.role-workspace-primary-actions {
    align-items: center;
}
.role-workspace-primary-actions > .btn.primary,
.role-workspace-primary-actions > .btn.success,
.role-workspace-primary-actions > button.primary,
.role-workspace-primary-actions > button.success {
    font-weight: 900;
}
.role-workspace-help-collapse .info-grid,
.role-workspace-help-collapse .grid {
    margin-top: 0;
}
.approval-debug-collapsible > .erp-collapsible-section__body {
    display: grid;
    gap: 14px;
}
@media (max-width: 760px) {
    .erp-action-overflow {
        width: 100%;
    }
    .erp-action-overflow__trigger {
        width: 100%;
        justify-content: space-between;
    }
    .erp-action-overflow__menu {
        position: static;
        min-width: 0;
        max-width: none;
        margin-top: 8px;
        box-shadow: none;
    }
}


/* Focused workspace section navigation: jump links only, never tab-hiding behavior. */
.workspace-jump-nav {
    position: sticky;
    top: .5rem;
    z-index: 12;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .55rem;
    border: 1px solid var(--line, #dbe3ee);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
    backdrop-filter: blur(8px);
}
.workspace-jump-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .45rem .72rem;
    border: 1px solid var(--line, #dbe3ee);
    border-radius: 10px;
    background: var(--panel, #fff);
    color: var(--text, #172033);
    font-weight: 700;
    text-decoration: none;
}
.workspace-jump-nav a:hover,
.workspace-jump-nav a:focus-visible {
    border-color: var(--brand, #2563eb);
    outline: 3px solid color-mix(in srgb, var(--brand, #2563eb) 16%, transparent);
}
.workspace-anchor-section { scroll-margin-top: 7rem; }
@media (max-width: 720px) {
    .workspace-jump-nav { position: static; overflow-x: auto; flex-wrap: nowrap; }
    .workspace-jump-nav a { white-space: nowrap; }
}

/* Application-wide page structure: consistent reading width and hierarchy by route purpose. */
html[data-ui-audience="daily"] .content-body[data-page-kind] {
    width: 100%;
    margin-inline: auto;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="index"] {
    max-width: 1720px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="workspace"] {
    max-width: 1600px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="detail"] {
    max-width: 1540px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="form"] {
    max-width: 1240px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] > :where(.page-stack, .page-shell, .detail-page, .index-page, .pp-page) {
    width: 100%;
    margin-inline: auto;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.page-header, .pp-page-header) {
    position: relative;
    overflow: hidden;
    border-inline-start: 4px solid var(--app-brand-color, var(--brand, #2563eb));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--app-brand-color, #2563eb) 7%, #ffffff) 0%, #ffffff 48%),
        var(--panel, #ffffff);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .065);
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.page-header, .pp-page-header) :where(h1, h2) {
    max-width: 32ch;
    letter-spacing: -.025em;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.page-header, .pp-page-header) :where(p:not(.eyebrow), .muted) {
    max-width: 78ch;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] > :where(.page-stack, .page-shell, .detail-page, .index-page, .pp-page) > :where(.panel, .card, .compact-card, .erp-collapsible-section, .pp-card) {
    scroll-margin-top: 7.5rem;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="index"] :where(.compact-filter-panel, .filter-panel, .filters-panel, .go-live-index-toolbar) {
    border-color: color-mix(in srgb, var(--app-brand-color, #2563eb) 18%, var(--line, #dbe3ef));
    background: color-mix(in srgb, var(--app-brand-color, #2563eb) 2.5%, #ffffff);
}

html[data-ui-audience="daily"] .content-body[data-page-kind="index"] :where(.compact-filter-panel, .filter-panel, .filters-panel, .go-live-index-toolbar) :where(h2, h3) {
    font-size: 1rem;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="form"] :where(form, .form-stack) {
    display: grid;
    gap: 16px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="form"] :where(fieldset, .form-section, .form-panel) {
    min-width: 0;
    border-color: var(--line, #dbe3ef);
    border-radius: 16px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="form"] fieldset > legend {
    padding-inline: 8px;
    color: var(--text, #0f172a);
    font-weight: 850;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="form"] :where(.form-actions, .sticky-form-actions, .actions-row):has(> button[type="submit"]) {
    padding-top: 12px;
    border-top: 1px solid var(--line, #dbe3ef);
}

html[data-ui-audience="daily"] .content-body[data-page-kind="detail"] :where(.show-tabs, nav.show-tabs) {
    position: sticky;
    top: 74px;
    z-index: 14;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-x: auto;
    border: 1px solid var(--line, #dbe3ef);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel, #ffffff) 94%, transparent);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    backdrop-filter: blur(10px);
    scrollbar-width: thin;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="detail"] :where(.show-tabs, nav.show-tabs) > :where(a, button) {
    flex: 0 0 auto;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-color: transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="detail"] :where(.show-tabs, nav.show-tabs) > :where(a, button):where(.active, .is-active, [aria-selected="true"]) {
    border-color: color-mix(in srgb, var(--app-brand-color, #2563eb) 24%, transparent) !important;
    background: var(--app-brand-color, var(--brand, #2563eb)) !important;
    color: #ffffff !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind="detail"] :where(.tab-section, .erp-tab-pane, [role="tabpanel"]) {
    min-width: 0;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.table-wrap, .table-responsive, .pp-table-wrap) {
    border-radius: 13px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line, #dbe3ef) 88%, transparent);
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.data-table, .erp-table, .pp-table) thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--panel-soft, #f8fafc) 94%, #ffffff);
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.section-heading, .pp-section-heading, .split-header.compact) > div:first-child :where(h2, h3) {
    margin-bottom: 4px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.section-heading, .pp-section-heading, .split-header.compact) > div:first-child > p {
    max-width: 76ch;
}

@media (max-width: 760px) {
    html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.page-header, .pp-page-header) {
        border-inline-start-width: 3px;
    }

    html[data-ui-audience="daily"] .content-body[data-page-kind="detail"] :where(.show-tabs, nav.show-tabs) {
        position: static;
        margin-inline: -2px !important;
    }

    html[data-ui-audience="daily"] .content-body[data-page-kind="form"] :where(.form-actions, .sticky-form-actions, .actions-row):has(> button[type="submit"]) > :where(.btn, button, a) {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ========================================================================
 * Authoritative spacing alignment v2
 * This block intentionally stays last so legacy high-specificity rules cannot
 * reintroduce double gutters or different padding for sibling surfaces.
 * ====================================================================== */
:root {
    --erp-ui-page-gap: 20px;
    --erp-ui-surface-padding: 20px;
    --erp-ui-card-padding: 14px;
    --erp-ui-layout-gap: 12px;
    --erp-ui-control-height: 44px;
    --erp-ui-table-padding-block: 12px;
    --erp-ui-table-padding-inline: 14px;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] {
    width: 100%;
    padding: 0 0 28px !important;
}

html[data-ui-audience="daily"] :where(.action-reminder-strip, .erp-breadcrumb-bar, .module-kpi-strip) {
    margin-block: 0 var(--erp-ui-page-gap) !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] > :where(.page-stack, .page-shell, .detail-page, .index-page, .pp-page) {
    width: 100%;
    gap: var(--erp-ui-page-gap) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.page-header, .pp-page-header),
html[data-ui-audience="daily"] .content-body[data-page-kind] > :where(.page-stack, .page-shell, .detail-page, .index-page, .pp-page) > :where(.panel, .card, .compact-card, .pp-card) {
    padding: var(--erp-ui-surface-padding) !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.panel, .card, .compact-card, .pp-card) :where(.compact-card, .quick-card, .metric-card, .module-kpi-card, .ops-task-card, .card-soft) {
    padding: var(--erp-ui-card-padding) !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.toolbar, .filter-bar, .actions-row, .form-actions, .row-actions, .table-actions) {
    column-gap: var(--erp-ui-layout-gap) !important;
    row-gap: var(--erp-ui-layout-gap) !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.toolbar, .filter-bar) {
    margin: 0 0 16px !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] .page-header > .actions-row {
    margin: 0 !important;
    padding: 0 !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.form-grid, .filters-grid, .filter-grid, .compact-form-grid) {
    gap: var(--erp-ui-layout-gap) !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.field, .form-field, .form-group) {
    gap: 7px !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea, .form-input, .form-select) {
    min-height: var(--erp-ui-control-height) !important;
    padding: 9px 12px !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.table-wrap, .table-responsive, .data-table-wrap, .responsive-table, .navigation-table-wrap) {
    margin: 0 !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.data-table, .erp-table, .erp-clean-table, .pp-table) :where(th, td) {
    padding: var(--erp-ui-table-padding-block) var(--erp-ui-table-padding-inline) !important;
}

html[data-ui-audience="daily"] .content-body[data-page-kind] :where(.data-table, .erp-table, .erp-clean-table, .pp-table) th {
    line-height: 1.35;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none;
}

/* Index filters use an intentional grid instead of squeezed flex fields. */
html[data-ui-audience="daily"] .index-filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end !important;
}

html[data-ui-audience="daily"] .index-filter-toolbar > .field {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-ui-audience="daily"] .index-filter-toolbar > .field.wide {
    grid-column: span 2;
}

/* Sales Order index: readable columns and stable row actions. */
.sales-order-index-page .order-index-table {
    min-width: 1380px;
    table-layout: auto;
}

.sales-order-index-page .order-index-table .order-number-cell { min-width: 190px; }
.sales-order-index-page .order-index-table th:nth-child(2) { min-width: 96px; }
.sales-order-index-page .order-index-table th:nth-child(3) { min-width: 180px; }
.sales-order-index-page .order-index-table th:nth-child(4) { min-width: 105px; }
.sales-order-index-page .order-index-table th:nth-child(5) { min-width: 150px; }
.sales-order-index-page .order-index-table th:nth-child(6) { min-width: 125px; }
.sales-order-index-page .order-index-table th:nth-child(7) { min-width: 120px; }
.sales-order-index-page .order-index-table th:nth-child(8) { min-width: 120px; }
.sales-order-index-page .order-index-table th:nth-child(9) { min-width: 125px; }
.sales-order-index-page .order-index-table th:nth-child(10) { min-width: 130px; }
.sales-order-index-page .order-index-table .actions-cell { min-width: 190px; }

.sales-order-index-page .order-index-table .row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px !important;
}

/* Detail headers and action panels share the same internal rhythm. */
.sales-order-show-page > .page-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 680px);
    align-items: center !important;
    gap: 20px !important;
}

.sales-order-show-page > .page-header > .actions-row {
    justify-content: flex-end;
}

.sales-order-show-page .operational-action-panel {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    padding: 16px !important;
}

.sales-order-show-page .operational-action-panel__header,
.sales-order-show-page .operational-action-item {
    gap: 14px !important;
}

.sales-order-show-page .operational-action-item {
    padding: 16px !important;
}

/* Polished collapse headers remain compact, visible, and consistently inset. */
html[data-ui-audience="daily"] .erp-auto-collapse-toggle {
    margin: 0 0 16px !important;
    padding: 10px 12px !important;
}

html[data-ui-audience="daily"] .erp-auto-collapsible.is-collapsed > .erp-auto-collapse-toggle {
    margin-bottom: 0 !important;
}

@media (max-width: 1400px) {
    .sales-order-show-page > .page-header {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .sales-order-show-page > .page-header > .actions-row {
        justify-content: flex-start !important;
    }
}

@media (max-width: 680px) {
    :root {
        --erp-ui-page-gap: 14px;
        --erp-ui-surface-padding: 14px;
        --erp-ui-card-padding: 12px;
    }

    html[data-ui-audience="daily"] .index-filter-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-ui-audience="daily"] .index-filter-toolbar > .field.wide {
        grid-column: auto;
    }
}

/* Recipe/BOM editor is a wide operational form.
   Keep the application-wide readable form width for ordinary forms, but allow
   Recipe/BOM material/process editing to consume the full main-content width. */
html[data-ui-audience="daily"] body.recipe-editor-shell .content-body[data-page-kind="form"],
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .content-body[data-page-kind="form"] {
    width: 100%;
    max-width: none !important;
    margin-inline: 0;
}

html[data-ui-audience="daily"] body.recipe-editor-shell .content-body[data-page-kind="form"] > .recipe-editor,
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .content-body[data-page-kind="form"] > .recipe-editor,
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .recipe-editor {
    width: 100%;
    max-width: none !important;
    margin-inline: 0;
}

html[data-ui-audience="daily"] body:has([data-recipe-editor]) .recipe-editor__header,
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .recipe-editor__tabs,
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .recipe-editor__form,
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .recipe-editor__section,
html[data-ui-audience="daily"] body:has([data-recipe-editor]) .recipe-editor__actionbar {
    width: 100%;
    max-width: none;
}