/* Optical reference standard. Opt-in on four reference pages only.
   Layout, behavior and framework accessibility states remain owned by existing components. */
.optical-design {
    --od-font: Inter, "Segoe UI", "Nirmala UI", "Noto Sans Devanagari", Arial, sans-serif;
    --od-text: var(--z-text);
    --od-muted: var(--z-text-muted);
    --od-canvas: var(--z-background);
    --od-surface: var(--z-surface);
    --od-border: var(--z-border);
    --od-accent: var(--z-primary);
    --od-radius: var(--z-radius-sm, 7px);
    --od-card-radius: var(--z-radius-md, 10px);
    --od-control: 36px;
    --od-body: 13px;
    --od-small: 12px;
    --od-heading: clamp(24px, 1.6vw, 28px);
    --od-gap: var(--z-space-3, 12px);
    --od-section: var(--z-space-4, 16px);
    --z-font: var(--od-font);
    --z-control-sm: var(--od-control);
    font-family: var(--od-font);
    font-size: var(--od-body);
    line-height: 1.45;
    color: var(--od-text);
    background: var(--od-canvas);
    min-width: 0;
    row-gap: var(--od-gap);
}
:root:not([data-z-theme="dark"]) .optical-design {
    --od-canvas: #f7f9fb;
    --od-text: #1f2937;
    --od-muted: #586577;
    --od-border: #d8e1e9;
}
.optical-design.optical-design :is(.zn-page-head, .ui-page-head) {
    gap: var(--od-gap);
    margin-bottom: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--od-border);
}
.optical-design.optical-design :is(.zn-page-head, .ui-page-head) h1 {
    font: 700 var(--od-heading)/1.2 var(--od-font);
    letter-spacing: -.025em;
    color: var(--od-text);
    margin: 2px 0 4px;
}
.optical-design.optical-design :is(.zn-page-head, .ui-page-head) p:not(.zn-eyebrow) {
    font-size: var(--od-body);
    line-height: 1.45;
    color: var(--od-muted);
}
.optical-design :is(.zn-eyebrow, .ui-eyebrow) {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--od-accent);
}
.optical-design :is(label, .zn-field, .ui-field) {
    font-family: var(--od-font);
    font-size: var(--od-small);
    line-height: 1.4;
    color: var(--od-muted);
}
.optical-design.optical-design :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
    font-family: var(--od-font);
    font-size: var(--od-body);
    height: var(--od-control);
    min-height: var(--od-control);
    border-radius: var(--od-radius);
    padding: 6px 8px;
    box-sizing: border-box;
    background-color: var(--od-surface);
    color: var(--od-text);
}
.optical-design :is(input, select):not(:focus):not([aria-invalid="true"]):not(.invalid) { border-color: var(--od-border); }
.optical-design :is(h2, h3) { font-family: var(--od-font); letter-spacing: 0; }
.optical-design textarea {
    font: inherit;
    border-radius: var(--od-radius);
}
.optical-design :is(.zn-primary, .zn-secondary, .z-btn-primary, .z-btn-secondary) {
    font-family: var(--od-font);
    font-size: var(--od-body);
    font-weight: 600;
    min-height: var(--od-control);
    padding: 6px 10px;
    border-radius: var(--od-radius);
    line-height: 1.35;
    text-decoration: none;
}
.optical-design :is(.zn-primary, .z-btn-primary):hover:not(:disabled) {
    background: var(--z-primary-hover);
}
.optical-design :is(.zn-secondary, .z-btn-secondary):hover:not(:disabled) {
    background: var(--z-primary-soft);
}
.optical-design :is(.optical-entry-card, .workshop-card, .ui-filters, .ui-table-region, .workshop-table) {
    border-color: var(--od-border);
    border-radius: var(--od-card-radius);
    background-color: var(--od-surface);
}
.optical-design :is(.ui-filters, .workshop-tracking-filters) {
    gap: var(--od-gap);
    margin-block: 0;
}
.optical-design :is(.ui-table, .zn-table) {
    font-size: var(--od-body);
    font-variant-numeric: tabular-nums;
}
.optical-design.optical-design :is(.ui-table, .zn-table) :is(th, td) {
    font-family: var(--od-font);
    font-size: var(--od-body);
    line-height: 1.4;
    padding: 9px 8px;
    border-color: var(--od-border);
}
.optical-design.optical-design :is(.ui-table, .zn-table) th {
    font-size: var(--od-small);
    font-weight: 600;
    letter-spacing: 0;
    background: var(--z-surface-alt);
    color: var(--od-muted);
}
.optical-design :is(.ui-table, .zn-table) tbody tr:hover {
    background: color-mix(in srgb, var(--od-accent) 3%, var(--od-surface));
}
.optical-design.optical-design :is(.ui-table, .zn-table) small {
    font-size: var(--od-small);
    line-height: 1.4;
}
.optical-design :is(.ui-badge, .workshop-list-status, .pos-direct-badge) {
    font-size: var(--od-small);
    line-height: 1.35;
    font-weight: 600;
    border-radius: var(--od-radius);
    padding: 4px 8px;
}
.optical-design :is(.ui-pagination, .workshop-list-paging) {
    font-size: var(--od-small);
    gap: 8px;
    padding-block: var(--od-gap);
}
.optical-design :is(.ui-loading, .ui-empty, .empty-lines, .ui-message, .validation-message, .pricing-error) {
    font-size: var(--od-body);
    line-height: 1.45;
}
.optical-design :is(.validation-message, .pricing-error) { color: var(--z-danger); }
/* Legacy control border shorthands must not mask Blazor/ARIA validation. */
.optical-design.optical-design :is(input, select, textarea):is([aria-invalid="true"], .invalid, .field-invalid):not(:disabled) {
    border-color: var(--z-danger);
}
.optical-design :is(.optical-popup-header, .optical-popup-footer) { padding: var(--od-gap) var(--od-section); }
.optical-design .optical-popup-header h2 { font-size: 18px; line-height: 1.3; }
.optical-design :is(.ui-toolbar, .workshop-quick-status) { margin-block: 0; }
.optical-design.pos-page .summary-panel { gap: 4px; }
.optical-design.pos-page .summary-panel > div { padding-bottom: 3px; font-size: var(--od-body); }
.optical-design.pos-page .pos-payment { gap: 6px; margin-top: 6px; padding-top: 6px; }
.optical-design.pos-page .pos-line-table th { white-space: normal; overflow-wrap: anywhere; }
.optical-design.pos-page .pos-line-table:not(.pos-picking-table) th:first-child { width: 29.5%; }
.optical-design.pos-page .pos-line-table:not(.pos-picking-table) th:last-child { width: 9.5%; white-space: nowrap; overflow-wrap: normal; }
/* Existing screen-specific column proportions and scrolling remain unchanged. */
.optical-design .pos-section-heading { font-size: 16px; line-height: 1.4; }
.optical-design.pos-page .summary-panel .net strong { font-size: 24px; line-height: 1.25; }
.optical-design .workshop-list-order { font-size: var(--od-body); }
.optical-design input[readonly] { background-color: var(--z-surface-alt); }
.optical-design .workshop-list-actions a { padding-inline: 5px; }
.optical-design .final-workspace { --od-workshop-control: var(--od-control); }
@media (prefers-reduced-motion: reduce) {
    .optical-design :is(button, input, select, a) { transition: none; }
}