/* ERKAL operational surfaces. Native controls, no remote fonts or framework. */
body.ops-ui {
    --navy: #12264d;
    --red: #c92032;
    --red-dark: #a71929;
    --muted: #526176;
    --line: #d8e0eb;
    --ops-header-height: 64px;
    font-family: Arial, Helvetica, sans-serif;
    color: #1c2c41;
    background: #f3f6fa;
    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(--line);border-radius:12px;box-shadow:0 2px 8px #12264d06}
.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:#fff;border-color:#b6c3d4;box-shadow:none}
.ops-ui :is(.button,.primary):focus-visible,.ops-ui :is(a,summary,button,input,select,textarea):focus-visible {outline:3px solid #2865a5;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 #aab9cd;border-radius:8px;
    background-color:#fff;color:#182e4e;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:#eef2f7;color:#425670}
.ops-ui main :is(input,select,textarea):disabled {background-color:#edf1f5;color:#627187;cursor:not-allowed}
.ops-ui main input::placeholder,.ops-ui main textarea::placeholder {color:#64748b;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(--red)}
.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:#eaf0f7;color:#263e60}
.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:#d8e5fa;font-size:13px;margin:5px 0}
.ops-ui .operator-now-card .ops-work-product {display:block;color:#fff;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 #aac4e4;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 #b42332;outline-offset:3px}
.ops-ui .ops-field-error {display:block;margin:5px 0;color:#991b2a;font-size:13px;font-weight:600;line-height:1.4}
.ops-ui main [aria-invalid=true] {border-color:#b42332!important;box-shadow:0 0 0 1px #b42332}
.ops-ui main label:has(>[aria-invalid=true]) {color:#991b2a}
.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:#12264d}
.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:#bed0e9}
.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:#07142c88}
    .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 #ffffff26;color:#fff;flex-shrink:0}
    .ops-ui .ops-nav-close {width:44px;height:44px;border:1px solid #ffffff50;border-radius:8px;background:transparent;color:#fff;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:0 -2px 8px #12264d10;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:#f3f6fa;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}
}