/* ERKAL operational surfaces. Native controls, no remote fonts or framework. */
body.ops-ui {
    --navy: var(--erkal-primary, #14233b);
    --red: var(--erkal-brand, #c6283d);
    --red-dark: var(--erkal-brand, #c6283d);
    --muted: var(--erkal-muted, #5c6470);
    --line: var(--erkal-border, #dde1e8);
    --ops-header-height: 64px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--erkal-text, #1d1d1f);
    background: var(--erkal-bg, #f5f5f7);
    font-size: 15px;
    line-height: 1.5;
}
.ops-ui .workspace main {max-width:1560px}
.ops-ui h1 {font-size:clamp(26px,2.7vw,36px);font-weight:750;letter-spacing:-.025em;line-height:1.2}
.ops-ui h2 {font-size:20px;line-height:1.35;letter-spacing:-.015em}
.ops-ui h3 {font-size:17px;line-height:1.4}
.ops-ui .eyebrow {font-size:11px;letter-spacing:.07em;font-weight:750}
.ops-ui :is(.panel,.filter-bar,.work-card,.line-card,.ready-order-card,.allocation-card,.crate-card) {border-color:var(--erkal-border, #dde1e8);border-radius:12px;box-shadow:var(--erkal-shadow-sm, 0 2px 8px rgb(20 35 59 / 4%))}
.ops-ui :is(.section-head,.page-head) {gap:12px}
.ops-ui :is(.button,.primary) {min-height:44px;max-width:100%;border-radius:9px;padding:10px 14px;white-space:normal;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35;box-shadow:none}
.ops-ui :is(.button,.primary):hover {transform:none}
.ops-ui .button.ghost {background:var(--erkal-surface, #ffffff);border-color:var(--erkal-control-border, #7e8899);box-shadow:none}
.ops-ui :is(.button,.primary):focus-visible,.ops-ui :is(a,summary,button,input,select,textarea):focus-visible {outline:3px solid var(--erkal-focus, #275bb5);outline-offset:3px}
.ops-ui main :is(input,select,textarea):not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    min-height:44px;max-width:100%;min-width:0;padding:10px 11px;border:1px solid var(--erkal-control-border, #7e8899);border-radius:8px;
    background-color:var(--erkal-surface, #ffffff);color:var(--erkal-text, #1d1d1f);font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;
}
.ops-ui main textarea {min-height:88px;resize:vertical}
.ops-ui main input[readonly] {background-color:var(--erkal-surface-muted, #eef1f5);color:var(--erkal-muted, #5c6470)}
.ops-ui main :is(input,select,textarea):disabled {background-color:var(--erkal-surface-muted, #eef1f5);color:var(--erkal-muted, #5c6470);cursor:not-allowed}
.ops-ui main input::placeholder,.ops-ui main textarea::placeholder {color:var(--erkal-muted, #5c6470);opacity:1;font-weight:400}
.ops-ui .app-shell main label {font-size:14px;font-weight:700;line-height:1.45;min-width:0}
.ops-ui main :is(input[type=checkbox],input[type=radio]) {width:20px;height:20px;flex:0 0 20px;accent-color:var(--erkal-brand, #c6283d)}
.ops-ui main label:has(>input[type=checkbox]),.ops-ui main label:has(>input[type=radio]) {min-height:44px;padding-block:6px}
.ops-ui main :is(small,.help,.system-estimate,.muted,.form-help) {font-size:13px;line-height:1.5}
.ops-ui .app-shell :is(.badge,.status-chip,.health-status-badge) {font-size:12px;font-weight:700;min-height:28px;line-height:1.3;box-shadow:none}
.ops-ui .app-shell .term-badge {border-radius:8px}
.ops-ui .app-shell .term-badge time {font-size:13px}
.ops-ui .app-shell .term-badge small {font-size:12px}
.ops-ui main summary {min-height:44px;align-content:center;padding-block:9px;font-size:14px;font-weight:700;line-height:1.5;cursor:pointer}
.ops-ui main details[open]>summary {margin-bottom:10px}
.ops-ui main :is(.alert,.allocation-next,.work-next-action,.remainder-result,.calculation-approval) {border-radius:10px;box-shadow:none;font-size:14px;line-height:1.5}
.ops-ui .app-shell .customer-name {font-size:16px;line-height:1.45;font-weight:750}
.ops-ui .app-shell .customer-name--prominent {font-size:19px}
.ops-ui .data-table {font-size:14px}
.ops-ui .data-table th {font-size:11px;font-weight:750;letter-spacing:.035em;background:var(--erkal-surface-muted, #eef1f5);color:var(--erkal-text, #1d1d1f)}
.ops-ui .data-table td {padding:13px 12px;line-height:1.45;vertical-align:middle}
.ops-ui :is(.metric-card,.operator-summary article) {border-radius:10px;box-shadow:none}
.ops-ui .metric-card {border-top-width:3px}
.ops-ui .metric-card span {font-size:12px}
.ops-ui .metric-card strong {font-size:28px}
.ops-ui .metric-card small {font-size:12px}
.ops-ui .operator-summary strong {font-variant-numeric:tabular-nums}
.ops-ui :is(.operator-summary article,.calculation-readout,.next-work-action,.operator-now-card) {background-image:none;box-shadow:none}
.ops-ui .operator-now-card {min-width:0;white-space:normal}
.ops-ui .operator-now-card>div {min-width:0}
.ops-ui .operator-now-card :is(p,small,h2) {white-space:normal;overflow-wrap:anywhere;max-width:100%;text-transform:none;letter-spacing:normal}
.ops-ui .operator-now-card p {font-size:15px;line-height:1.5;font-weight:500}
.ops-ui .operator-now-card small {font-size:13px;font-weight:400}
.ops-ui .operator-now-card .ops-work-reference {display:block;color:var(--erkal-nav-text, #f5f5f7);font-size:13px;margin:5px 0}
.ops-ui .operator-now-card .ops-work-product {display:block;color:var(--erkal-nav-text, #f5f5f7);font-size:16px}
.ops-ui .work-card :is(.work-code,.work-customer>span) {font-size:13px;line-height:1.45}
.ops-ui .work-card footer {gap:8px;font-size:13px}
.ops-ui .work-card .work-next-action strong {font-size:16px}
.ops-ui .work-next-action>span {font-size:11px;letter-spacing:.025em}
.ops-ui .operator-queue-grid a {border-left-width:3px;border-radius:9px}
.ops-ui .operator-queue-grid a>span {font-size:12px}
.ops-ui .operator-queue-grid a>small {font-size:12px}
.ops-ui .operator-queue-grid a>strong {font-size:25px}
.ops-ui .operator-steps span {min-width:0}
.ops-ui .operator-steps .ops-step-link {display:flex;align-items:center;justify-content:center;align-self:stretch;color:inherit;min-height:44px;font-size:14px;text-underline-offset:3px}
.ops-ui main [id] {scroll-margin-top:140px}
.ops-ui .ops-step-target {outline:3px solid var(--erkal-focus, #275bb5);outline-offset:5px}
.ops-ui .ops-error-summary {scroll-margin-top:90px}
.ops-ui .ops-error-summary a {color:inherit;text-decoration:underline;text-underline-offset:3px}
.ops-ui .ops-error-summary:focus {outline:3px solid var(--erkal-focus, #275bb5);outline-offset:3px}
.ops-ui .ops-field-error {display:block;margin:5px 0;color:var(--erkal-danger, #b42318);font-size:13px;font-weight:600;line-height:1.4}
.ops-ui main [aria-invalid=true] {border-color:var(--erkal-danger, #b42318)!important;box-shadow:var(--erkal-shadow-md, 0 8px 28px rgb(20 35 59 / 9%))}
.ops-ui main label:has(>[aria-invalid=true]) {color:var(--erkal-danger, #b42318)}
.ops-ui .quick-action-card {padding:0}
.ops-ui .quick-action-card>a,.ops-ui .quick-action-card>div {padding-right:50px}
.ops-ui .quick-action-card strong {white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.4}
.ops-ui .quick-action-card form button {width:44px;height:44px;min-height:44px;right:3px;top:3px;font-size:19px}
.ops-ui .quick-action-sort-handle {width:44px;min-height:44px}
.ops-ui .quick-action-grid.is-sortable .quick-action-card>a,.ops-ui .quick-action-grid.is-sortable .quick-action-card>div {padding-left:48px}
.ops-ui :is(.notification-actions-toggle,.notification-menu-toggle) {min-width:44px;min-height:44px}
.ops-ui .ops-nav-header {display:none}
.ops-ui .sidebar {background:var(--erkal-nav-bg, #14233b)}
.ops-ui .side-nav a {min-height:44px;border-radius:8px;font-size:14px;font-weight:650}
.ops-ui .nav-group {font-size:11px;letter-spacing:.08em;color:var(--erkal-nav-text, #f5f5f7)}
.ops-ui .sidebar-user button {min-height:44px}
.ops-ui .manual-banner--operator {padding:14px 18px;gap:12px}
.ops-ui .manual-banner--operator h2 {font-size:17px;margin:0 0 4px}
.ops-ui .manual-banner--operator p {font-size:13px;margin:0}
.ops-ui .manual-banner--operator .eyebrow {display:none}
.ops-ui .manual-banner--operator .manual-banner-actions {flex-basis:250px}
.ops-ui .manual-banner--operator .manual-banner-actions span {font-size:12px}
.ops-ui .operator-home-center {border-top-width:3px}
.ops-ui .fason-wrap .fason-next {min-height:44px;font-size:14px}
.ops-ui .fason-wrap summary {font-size:15px}
.ops-ui .notification-actions__toggle {width:44px;height:44px;min-height:44px}
@media(max-width:920px) {
    .ops-ui {font-size:16px}
    .ops-ui .mobile-topbar {min-height:var(--ops-header-height);padding:8px 12px;border-bottom-width:3px;z-index:42}
    .ops-ui .menu-toggle {min-height:44px;padding:9px 12px;font-size:14px}
    .ops-ui .sidebar {z-index:60;top:0;height:100dvh;width:min(320px,calc(100vw - 48px));left:-340px;padding-top:0!important;overscroll-behavior:contain}
    .ops-ui.menu-open .sidebar {left:0}
    .ops-ui.menu-open::after {z-index:55;background:color-mix(in srgb, var(--erkal-text, #1d1d1f) 53%, transparent)}
    .ops-ui.menu-open {overflow:hidden}
    .ops-ui .ops-nav-header {display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid color-mix(in srgb, var(--erkal-nav-text, #f5f5f7) 15%, transparent);color:var(--erkal-nav-text, #f5f5f7);flex-shrink:0}
    .ops-ui .ops-nav-close {width:44px;height:44px;border:1px solid color-mix(in srgb, var(--erkal-nav-text, #f5f5f7) 31%, transparent);border-radius:8px;background:transparent;color:var(--erkal-nav-text, #f5f5f7);font-size:25px;cursor:pointer}
    .ops-ui .side-nav {padding-top:8px}
    .ops-ui .side-nav a {min-height:48px;font-size:15px}
    .ops-ui .operator-mobile-nav {min-height:64px;padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--erkal-shadow-md, 0 8px 28px rgb(20 35 59 / 9%));border-top-width:2px;z-index:45}
    .ops-ui .operator-mobile-nav a {min-height:62px;gap:4px}
    .ops-ui .operator-mobile-nav a span {font-size:18px}
    .ops-ui .operator-mobile-nav a small {font-size:11px;line-height:1.2}
    .ops-ui.operator-role .workspace main {padding-bottom:calc(92px + env(safe-area-inset-bottom))}
    .ops-ui .operator-steps {position:sticky;top:var(--ops-header-height);z-index:14;background:var(--erkal-surface-muted, #eef1f5);padding:5px 0;gap:5px}
    .ops-ui .operator-steps span {padding:4px;font-size:13px;gap:4px;min-height:52px}
    .ops-ui .operator-steps b {flex:0 0 22px;width:22px;height:22px;font-size:12px}
    .ops-ui .manual-banner--operator {padding:12px 14px;gap:8px}
    .ops-ui .manual-banner--operator .manual-banner-actions {flex:auto;gap:5px}
    .ops-ui .manual-banner--operator .manual-banner-actions .button {min-height:44px;padding:9px 12px}
    .ops-ui.operator-role .welcome {margin:10px 0 14px}
    .ops-ui.operator-role .welcome h1 {font-size:23px}
    .ops-ui.operator-role .welcome p {display:none}
    .ops-ui.operator-role .welcome .today {font-size:12px;box-shadow:none;padding:5px 8px}
}
@media(max-width:700px) {
    .ops-ui .workspace main {padding:12px}
    .ops-ui .page-head {display:flex;align-items:stretch;flex-direction:column;gap:8px}
    .ops-ui .page-head h1 {font-size:26px}
    .ops-ui .page-head>div:first-child {width:100%}
    .ops-ui .page-head>.button {align-self:flex-start;margin-bottom:4px}
    .ops-ui .page-head p {font-size:14px;line-height:1.5}
    .ops-ui :is(.button-row,.form-actions) {gap:8px;flex-wrap:wrap}
    .ops-ui :is(.button,.primary) {min-height:48px;font-size:14px;padding:11px 13px}
    .ops-ui main :is(input,select,textarea):not([type=hidden]):not([type=checkbox]):not([type=radio]) {min-height:48px}
    .ops-ui .app-shell main label {font-size:14px}
    .ops-ui .filter-bar {gap:10px;padding:12px}
    .ops-ui .filter-bar label {min-width:0}
    .ops-ui :is(.form-grid,.line-fields,.compact-form,.remainder-form) {gap:12px 10px}
    .ops-ui :is(.panel,.line-card,.allocation-card) {padding:14px 12px}
    .ops-ui .panel.table-wrap {padding:0}
    .ops-ui .section-head {align-items:flex-start}
    .ops-ui .section-head h2 {font-size:18px}
    .ops-ui .data-table tr {padding:9px 8px;margin-bottom:9px;border-left-width:3px}
    .ops-ui .data-table td {padding:6px 4px;gap:8px;line-height:1.45}
    .ops-ui .data-table td::before {font-size:11px;line-height:1.5;letter-spacing:0}
    .ops-ui .data-table td.actions {gap:8px;padding-top:10px}
    .ops-ui .data-table td.actions .button {width:100%}
    .ops-ui .metric-card {padding:8px 10px}
    .ops-ui .metric-card strong {font-size:24px;line-height:1.1;margin:0}
    .ops-ui main .metric-card :is(span,small) {font-size:12px;line-height:1.25}
    .ops-ui .work-card {gap:12px;padding:14px}
    .ops-ui .work-card header strong {font-size:17px;line-height:1.4}
    .ops-ui .operator-now-card {display:block;padding:14px}
    .ops-ui .operator-now-card h2 {font-size:20px;line-height:1.3}
    .ops-ui .operator-now-card>strong {display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:12px;font-size:15px}
    .ops-ui .operator-now-card>i {display:block;margin-top:12px}
    .ops-ui .operator-home-center .section-head {display:flex;align-items:center;gap:8px}
    .ops-ui .operator-home-center .section-head h2 {font-size:17px}
    .ops-ui .operator-home-center .section-head .button {font-size:12px;padding:8px;min-height:44px;max-width:125px}
    .ops-ui .operator-summary {gap:8px}
    .ops-ui .operator-summary article {padding:12px}
    .ops-ui .operator-summary strong {font-size:19px}
    .ops-ui .operator-summary small {font-size:12px}
    .ops-ui .next-work-action h2 {font-size:20px}
    .ops-ui .next-work-action p {font-size:14px}
    .ops-ui .next-work-action .button {min-height:48px}
    .ops-ui .quick-action-card {min-height:88px}
    .ops-ui .quick-action-card strong {font-size:14px}
    .ops-ui .shipping-preparation-strip li :is(em,a) {font-size:12px}
    .ops-ui .shipping-preparation-strip li strong {font-size:14px}
    .ops-ui .shipping-preparation-strip li small {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
    .ops-ui * {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print {
    .ops-ui .ops-nav-header {display:none}
    .ops-ui .operator-steps {position:static}
}

.ops-ui .ops-error-link{border:0;background:transparent;color:inherit;padding:7px 0;min-height:44px;font:inherit;text-align:left;text-decoration:underline;cursor:pointer}

.ops-ui main [data-notification-toggle],.ops-ui main .remove-line {min-width:44px;min-height:44px;width:44px;height:44px}
@media(max-width:700px) {
    .ops-ui .operator-home-center .section-head {flex-direction:row;justify-content:space-between;text-align:left}
    .ops-ui .operator-home-center .section-head>div:first-child {flex:1;min-width:0}
    .ops-ui .operator-steps {grid-template-columns:repeat(4,minmax(0,1fr))}
    .ops-ui .operator-steps span {display:flex;flex-direction:column;justify-content:center;min-height:60px;gap:2px}
    .ops-ui .operator-steps .ops-step-link {flex-direction:column;gap:2px;min-height:52px;width:100%;font-size:12px}
    .ops-ui main label:has(>input[type=datetime-local]) {grid-column:1/-1}
    .ops-ui .lot-piece-row {grid-template-columns:2rem minmax(0,1fr) 44px}
}

/* Keep native calendar controls readable and campaign choices independently tappable. */
.ops-ui .campaign-delivery-options {min-width:0;margin:16px 0 12px;padding:0;border:0}
.ops-ui .campaign-delivery-options legend {padding:0;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--erkal-text, #1d1d1f)}
.ops-ui .campaign-delivery-options__choices {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:8px 16px}
.ops-ui .campaign-delivery-options__choices .check {min-width:0;margin:0;gap:8px;align-items:flex-start}
.ops-ui .campaign-delivery-options__choices .check span {min-width:0;overflow-wrap:anywhere}
@media(max-width:700px) {
    .ops-ui main label:has(>input[type=date]),
    .ops-ui main label:has(>input[type=time]),
    .ops-ui main label:has(>input[type=datetime-local]) {grid-column:1/-1}
}

/* Mobile vertical density 2026-09-27: spacing only; typography, controls and print stay unchanged. */
@media screen and (max-width: 850px) {
    body.ops-ui.erkal-typography .workspace main { padding-top: 12px; }
    body.ops-ui.erkal-typography :is(.page-head, .welcome, .section-head:not(.ready-order-card > .section-head)) { row-gap: 6px; margin-bottom: 10px; }
    body.ops-ui.erkal-typography :is(.page-head, .welcome) h1 { margin-block: 0 4px; }
    body.ops-ui.erkal-typography :is(.page-head, .welcome) p { margin-block: 4px; }
    body.ops-ui.erkal-typography :is(.panel, .line-card, .allocation-card, .work-card, .ready-order-card, .crate-card):not(.table-wrap) { padding-block: 10px; }
    body.ops-ui.erkal-typography .panel.table-wrap { padding-block: 0; }
    body.ops-ui.erkal-typography :is(.filter-bar, .form-card) { row-gap: 8px; }
    body.ops-ui.erkal-typography .filter-bar { padding-block: 10px; }
    body.ops-ui.erkal-typography :is(.form-grid, .line-fields, .compact-form, .remainder-form, .import-line-fields, .order-line-plan-form, .order-mini-form, .lot-piece-register-form) { row-gap: 8px; }
    body.ops-ui.erkal-typography :is(.form-grid, .line-fields, .compact-form) > label { row-gap: 4px; }
    body.ops-ui.erkal-typography :is(.button-row, .form-actions) { row-gap: 6px; }
    body.ops-ui.erkal-typography .form-actions { padding-top: 10px; }
    body.ops-ui.erkal-typography .details { row-gap: 4px; }
    body.ops-ui.erkal-typography .details > div { padding-block: 4px; }
    body.ops-ui.erkal-typography main details[open] > summary { margin-bottom: 6px; }
    body.ops-ui.erkal-typography .notification-center__links { row-gap: 6px; }
    body.ops-ui.erkal-typography .notification-center__list-head { margin-top: 10px; }
    body.ops-ui.erkal-typography .operator-workspace .operator-head { margin-bottom: 8px; }
    body.ops-ui.erkal-typography .operator-workspace .next-work-action { padding-block: 10px; margin-bottom: 8px; row-gap: 6px; }
    body.ops-ui.erkal-typography .operator-workspace .pilot-flow { margin-block: 8px; }
    body.ops-ui.erkal-typography .operator-workspace .pilot-execution { margin-block: 10px; padding-block: 10px; }
    body.ops-ui.erkal-typography .operator-workspace :is(.allocation-list, .operator-result-form, .operator-weighing-form, .calculation-confirmation-form) { row-gap: 8px; }
    body.ops-ui.erkal-typography .operator-workspace :is(.operator-primary-step, .operator-tools, .operation-timer, .weight-mode-switch) { padding-block: 10px; }
}
@media screen and (max-width: 700px) {
    body.ops-ui.erkal-typography .data-table > tbody > tr { padding-block: 6px; margin-bottom: 6px; }
    body.ops-ui.erkal-typography .data-table > tbody > tr > td { padding-block: 4px; }
    body.ops-ui.erkal-typography .data-table > tbody > tr > td.actions { padding-top: 8px; row-gap: 6px; }
}

/* Mobile pass 2: header actions use their labels' natural width, never a zero flex basis. */
@media screen and (max-width: 850px) {
    body.ops-ui.erkal-typography .page-head > .button-row { display: flex; flex-wrap: wrap; align-items: stretch; }
    body.ops-ui.erkal-typography .page-head > .button-row > :is(.button, form) { flex: 0 1 max-content; width: auto; min-width: 44px; max-width: 100%; }
    body.ops-ui.erkal-typography .page-head > .button-row > form { display: flex; }
    body.ops-ui.erkal-typography .page-head > .button-row > .button,
    body.ops-ui.erkal-typography .page-head > .button-row > form > .button { min-height: 48px; height: auto; white-space: normal; word-break: normal; overflow-wrap: break-word; }
    body.ops-ui.erkal-typography .page-head > .button-row > form > .button { width: 100%; }
}