/* 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: var(--z-background);
    --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; }
}
.customer-master-toolbar{display:flex;gap:12px;align-items:end;padding:16px;flex-wrap:wrap}.customer-master-toolbar label:first-child{flex:1;min-width:240px}.customer-master-toolbar label{display:grid;gap:5px}.customer-master-page input:not([type=checkbox]),.customer-master-page select{height:36px;min-width:0;width:100%}.customer-master-page small{display:block;color:var(--zn-muted,#586b80);margin-top:3px}.customer-master-list td{vertical-align:top}.customer-master-address{max-width:300px;white-space:normal;overflow-wrap:break-word}.customer-master-actions{display:flex;gap:6px;flex-wrap:wrap}.customer-master-status{background:var(--optical-theme-success-soft, #e5f5ef);color:var(--optical-theme-accent, #0f766e);border-radius:6px;padding:4px 8px;white-space:nowrap}.customer-master-pagination{display:flex;justify-content:space-between;padding:14px;gap:12px}.customer-master-pagination>div{display:flex;gap:8px}.customer-master-editor{width:min(820px,92vw);max-height:92vh;display:flex;flex-direction:column}.customer-master-editor fieldset{border:0;padding:0;margin:0;min-width:0}.customer-master-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.customer-master-fields label{display:grid;gap:5px}.customer-master-fields label:has(input[type=checkbox]){display:flex;align-items:center}.customer-master-wide{grid-column:1/-1}.customer-master-fields textarea{width:100%;min-height:72px}.customer-master-gstin{display:flex;gap:6px}.customer-master-gstin input{flex:1;min-width:0}.customer-master-editor .optical-popup-body{overflow-y:auto}.customer-master-editor .optical-popup-header,.customer-master-editor .optical-popup-footer{flex-shrink:0}.customer-master-audit{margin-top:16px}.customer-master-audit>div{padding:10px 0;border-bottom:1px solid var(--optical-theme-border, #dde5ee);overflow-wrap:break-word}.customer-master-history{width:min(1150px,94vw);max-height:90vh;display:flex;flex-direction:column}.customer-master-history .optical-popup-body{overflow:auto}.customer-master-history h3{margin:16px 0 10px}.customer-master-editor input:not([type=checkbox]),.customer-master-editor select{height:36px;width:100%}@media(max-width:650px){.customer-master-fields{grid-template-columns:minmax(0,1fr)}.customer-master-list .zn-table-wrap{overflow-x:auto}.customer-master-pagination{flex-wrap:wrap}}
.customer-master-fields label:has(input[type=checkbox]){flex-direction:row;justify-content:flex-start;gap:8px}.customer-master-fields input[type=checkbox]{width:16px;height:16px;min-height:16px;flex:0 0 16px;margin:0}.customer-master-editor select,.customer-master-toolbar input,.customer-master-toolbar select,.customer-master-history select{border:1px solid var(--z-border,#ccdbe5);border-radius:var(--z-radius-sm,6px);background:var(--z-surface,#fff);color:inherit;padding:6px 10px;box-sizing:border-box}