/* ???????????????????????????????????????????????????????????
   ZAD ? Modern form controls (all themes, all pages)
   ??????????????????????????????????????????????????????????? */

.app-shell {
    --field-height: 44px;
    --field-radius: 12px;
    --field-pad-x: 0.9rem;
    --label-color: var(--magenta);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ??? Text inputs, selects, textareas ??? */
.app-shell .field-input,
.app-shell input.field-input:not([type="checkbox"]):not([type="radio"]),
.app-shell select.field-input,
.app-shell textarea.field-input,
.app-shell .touch-num,
.app-shell .scan-input,
.app-shell .label-qty-input {
    width: 100%;
    min-height: var(--field-height);
    padding: 0.62rem var(--field-pad-x);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--input-text, var(--text));
    background: var(--input-bg, var(--card));
    border: 1.5px solid var(--input-border, var(--bg-alt));
    border-radius: var(--field-radius);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}

/* Number fields: hide spinner arrows and keep digits LTR so values are not clipped in RTL. */
.app-shell input.field-input[type="number"],
.app-shell input.touch-num[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.app-shell input.field-input[type="number"]::-webkit-outer-spin-button,
.app-shell input.field-input[type="number"]::-webkit-inner-spin-button,
.app-shell input.touch-num[type="number"]::-webkit-outer-spin-button,
.app-shell input.touch-num[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    display: none;
}

.app-shell textarea.field-input {
    min-height: 88px;
    resize: vertical;
}

.app-shell .field-input:hover:not(:disabled):not(:focus),
.app-shell .scan-input:hover:not(:focus),
.app-shell .touch-num:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--input-border, var(--bg-alt)));
}

.app-shell .field-input:focus,
.app-shell .scan-input:focus,
.app-shell .touch-num:focus {
    border-color: var(--input-focus, var(--accent));
    box-shadow: var(--focus-ring);
}

.app-shell .field-input::placeholder,
.app-shell .scan-input::placeholder {
    color: var(--input-placeholder, var(--text-muted));
    opacity: 1;
}
.app-shell.rtl select.field-input {
    direction: rtl;
    text-align: right;
    text-align-last: right;
}
.app-shell.ltr select.field-input {
    direction: ltr;
    text-align: left;
    text-align-last: left;
}

/* RTL UI: text fields without explicit dir follow reading direction */
html[dir="rtl"] .app-shell input.field-input:not([dir]):not([type="checkbox"]):not([type="radio"]):not([type="number"]):not([type="date"]):not([type="datetime-local"]),
html[dir="rtl"] .app-shell textarea.field-input:not([dir]),
html[dir="rtl"] .app-shell select.field-input:not([dir]) {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .app-shell input.field-input:not([dir])::placeholder,
html[dir="rtl"] .app-shell textarea.field-input:not([dir])::placeholder {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .app-shell input.field-input[dir="rtl"],
html[dir="rtl"] .app-shell textarea.field-input[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.app-shell .field-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: color-mix(in srgb, var(--input-bg, var(--card)) 70%, var(--bg-alt));
}

.app-shell .field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.auto-code-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.code-toast {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 4px);
    z-index: 20;
    max-width: min(100%, 22rem);
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    animation: code-toast-in 0.22s ease-out;
    pointer-events: none;
}

.code-toast.is-info {
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, #fff);
    color: color-mix(in srgb, var(--accent, #2563eb) 70%, #0f172a);
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 28%, transparent);
}

.code-toast.is-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

@keyframes code-toast-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Select dropdown */
.app-shell select,
.app-shell select.field-input,
.app-shell select.purchase-mini-field {
    appearance: none;
    cursor: pointer;
    color-scheme: light dark;
    background-color: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
}

.app-shell select.field-input {
    padding-inline-end: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px;
}

.app-shell select.purchase-mini-field {
    min-height: 24px;
    padding: 0.16rem 1.6rem 0.16rem 0.3rem;
    font-size: 0.7rem;
    border: 1px solid var(--bg-alt);
    border-radius: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 10px;
}

.app-shell select option,
.app-shell select optgroup {
    background-color: #ffffff;
    color: #0f172a;
}

.theme-obsidian.app-shell select,
body.theme-obsidian .app-shell select,
.theme-midnight.app-shell select,
body.theme-midnight .app-shell select {
    color-scheme: dark;
}

.theme-obsidian.app-shell select option,
.theme-obsidian.app-shell select optgroup,
body.theme-obsidian .app-shell select option,
body.theme-obsidian .app-shell select optgroup,
.theme-midnight.app-shell select option,
.theme-midnight.app-shell select optgroup,
body.theme-midnight .app-shell select option,
body.theme-midnight .app-shell select optgroup {
    background-color: #1a1a28;
    color: #f1f5f9;
}

.theme-zad-light.app-shell select option,
.theme-zad-light.app-shell select optgroup,
body.theme-zad-light .app-shell select option,
body.theme-zad-light .app-shell select optgroup {
    background-color: #ffffff;
    color: #0f172a;
}

.app-shell .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.app-shell .field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--label-color, var(--text-muted));
    letter-spacing: 0.01em;
}

.app-shell .search-field-wrap {
    flex: 1;
    min-width: min(280px, 100%);
}

.app-shell .table-actions,
.app-shell td.inv-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    vertical-align: middle;
}

.app-shell .btn-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.app-shell .btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    min-width: 1.55rem;
    padding: 0;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--accent, #0ea5e9) 18%, transparent);
    background: color-mix(in srgb, var(--accent, #0ea5e9) 10%, var(--card, #fff));
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.15s ease;
    flex-shrink: 0;
}
.app-shell .btn-icon-action.is-primary {
    background: color-mix(in srgb, var(--accent, #0ea5e9) 22%, var(--card, #fff));
    border-color: color-mix(in srgb, var(--accent, #0ea5e9) 38%, transparent);
}
/* Encoding-safe icons (CSS escapes — never depend on emoji bytes in .razor) */
.btn-icon-action[data-ico]::before,
.app-shell .btn-icon-action[data-ico]::before {
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    speak: never;
}
.btn-icon-action[data-ico="view"]::before,
.app-shell .btn-icon-action[data-ico="view"]::before { content: "\1F441"; }
.btn-icon-action[data-ico="return"]::before,
.app-shell .btn-icon-action[data-ico="return"]::before { content: "\21A9"; }
.btn-icon-action[data-ico="exchange"]::before,
.app-shell .btn-icon-action[data-ico="exchange"]::before { content: "\1F501"; }
.btn-icon-action[data-ico="resume"]::before,
.btn-icon-action[data-ico="refresh"]::before,
.app-shell .btn-icon-action[data-ico="resume"]::before,
.app-shell .btn-icon-action[data-ico="refresh"]::before { content: "\1F504"; }
.btn-icon-action[data-ico="edit"]::before,
.app-shell .btn-icon-action[data-ico="edit"]::before { content: "\270F"; }
.btn-icon-action[data-ico="play"]::before,
.app-shell .btn-icon-action[data-ico="play"]::before { content: "\25B6"; }
.btn-icon-action[data-ico="check"]::before,
.app-shell .btn-icon-action[data-ico="check"]::before { content: "\2705"; }
.btn-icon-action[data-ico="cancel"]::before,
.app-shell .btn-icon-action[data-ico="cancel"]::before { content: "\274C"; }
.btn-icon-action[data-ico="delete"]::before,
.btn-icon-action[data-ico="trash"]::before,
.app-shell .btn-icon-action[data-ico="delete"]::before,
.app-shell .btn-icon-action[data-ico="trash"]::before { content: "\1F5D1"; }
.btn-icon-action[data-ico="plan"]::before,
.btn-icon-action[data-ico="clipboard"]::before,
.app-shell .btn-icon-action[data-ico="plan"]::before,
.app-shell .btn-icon-action[data-ico="clipboard"]::before { content: "\1F4CB"; }
.btn-icon-action[data-ico="claim"]::before,
.app-shell .btn-icon-action[data-ico="claim"]::before { content: "\1F91D"; }
.btn-icon-action[data-ico="postpone"]::before,
.app-shell .btn-icon-action[data-ico="postpone"]::before { content: "\23F0"; }
.btn-icon-action[data-ico="call"]::before,
.btn-icon-action[data-ico="phone"]::before,
.app-shell .btn-icon-action[data-ico="call"]::before,
.app-shell .btn-icon-action[data-ico="phone"]::before { content: "\1F4DE"; }
.btn-icon-action[data-ico="display"]::before,
.app-shell .btn-icon-action[data-ico="display"]::before { content: "\1F5A5"; }
.btn-icon-action[data-ico="invoice"]::before,
.app-shell .btn-icon-action[data-ico="invoice"]::before { content: "\1F9FE"; }
.btn-icon-action[data-ico="charge"]::before,
.app-shell .btn-icon-action[data-ico="charge"]::before { content: "\1F4B5"; }
.btn-icon-action[data-ico="warn"]::before,
.app-shell .btn-icon-action[data-ico="warn"]::before { content: "\26A0"; }
.btn-icon-action[data-ico="clock"]::before,
.app-shell .btn-icon-action[data-ico="clock"]::before { content: "\23F1"; }
.btn-icon-action[data-ico="menu"]::before,
.app-shell .btn-icon-action[data-ico="menu"]::before { content: "\1F4CB"; }
.btn-icon-action[data-ico="print"]::before,
.app-shell .btn-icon-action[data-ico="print"]::before { content: "\1F5A8"; }
.btn-icon-action[data-ico="search"]::before,
.btn-icon-action[data-ico="find"]::before,
.app-shell .btn-icon-action[data-ico="search"]::before,
.app-shell .btn-icon-action[data-ico="find"]::before { content: "\1F50D"; }
.btn-icon-action[data-ico="chart"]::before,
.app-shell .btn-icon-action[data-ico="chart"]::before { content: "\1F4CA"; }
.btn-icon-action[data-ico="link"]::before,
.app-shell .btn-icon-action[data-ico="link"]::before { content: "\1F517"; }
.btn-icon-action[data-ico="add"]::before,
.app-shell .btn-icon-action[data-ico="add"]::before { content: "\2795"; }
.btn-icon-action[data-ico="back"]::before,
.app-shell .btn-icon-action[data-ico="back"]::before { content: "\2B05"; }
.btn-icon-action[data-ico="open"]::before,
.app-shell .btn-icon-action[data-ico="open"]::before { content: "\2197"; }
.btn-icon-action[data-ico="box"]::before,
.app-shell .btn-icon-action[data-ico="box"]::before { content: "\1F4E6"; }
.btn-icon-action[data-ico="key"]::before,
.btn-icon-action[data-ico="assign"]::before,
.app-shell .btn-icon-action[data-ico="key"]::before,
.app-shell .btn-icon-action[data-ico="assign"]::before { content: "\1F511"; }
.btn-icon-action[data-ico="heartbeat"]::before,
.app-shell .btn-icon-action[data-ico="heartbeat"]::before { content: "\1F493"; }
.btn-icon-action[data-ico="freeze"]::before,
.app-shell .btn-icon-action[data-ico="freeze"]::before { content: "\2744"; }
.btn-icon-action[data-ico="unfreeze"]::before,
.app-shell .btn-icon-action[data-ico="unfreeze"]::before { content: "\2600"; }
.btn-icon-action[data-ico="people"]::before,
.btn-icon-action[data-ico="customers"]::before,
.app-shell .btn-icon-action[data-ico="people"]::before,
.app-shell .btn-icon-action[data-ico="customers"]::before { content: "\1F465"; }
.btn-icon-action[data-ico="cheque"]::before,
.app-shell .btn-icon-action[data-ico="cheque"]::before { content: "\1F4B3"; }
.btn-icon-action[data-ico] {
    font-size: 0 !important;
    color: inherit;
    border-color: color-mix(in srgb, var(--accent, #0ea5e9) 18%, transparent);
    background: color-mix(in srgb, var(--accent, #0ea5e9) 10%, var(--card, #fff));
}
.btn-icon-action[data-ico]::before,
.app-shell .btn-icon-action[data-ico]::before {
    font-size: 0.82rem !important;
    color: inherit;
}
/* Chip / inline encoding-safe glyphs */
.kds-chip-ico[data-ico]::before,
.kds-chip > i[data-ico]::before {
    font-style: normal;
    font-weight: 700;
    margin-inline-end: 0.25rem;
}
.kds-chip-ico[data-ico="clock"]::before,
.kds-chip > i[data-ico="clock"]::before { content: "\23F1"; }
.kds-chip > i[data-ico="call"]::before { content: "\260E"; }
.kds-chip > i[data-ico="warn"]::before { content: "\26A0"; }
/* Dark / obsidian: keep icon buttons readable */
html.theme-obsidian .app-shell .btn-icon-action,
html[data-theme="obsidian"] .app-shell .btn-icon-action,
.app-shell.theme-obsidian .btn-icon-action,
body.theme-obsidian .btn-icon-action,
html.theme-obsidian .btn-icon-action,
[data-theme="dark"] .btn-icon-action,
.theme-dark .btn-icon-action {
    color: #f4f4f5 !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
    background: rgba(24, 22, 36, 0.95) !important;
}
html.theme-obsidian .app-shell .btn-icon-action:hover,
html[data-theme="obsidian"] .app-shell .btn-icon-action:hover,
.app-shell.theme-obsidian .btn-icon-action:hover,
body.theme-obsidian .btn-icon-action:hover,
html.theme-obsidian .btn-icon-action:hover,
[data-theme="dark"] .btn-icon-action:hover,
.theme-dark .btn-icon-action:hover {
    color: #fff !important;
    border-color: #a78bfa !important;
    background: rgba(109, 40, 217, 0.4) !important;
}
.app-shell .btn-icon-action:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.app-shell .btn-icon-action.is-primary {
    background: var(--accent, #0d9488);
    border-color: transparent;
    color: #fff;
}
.app-shell .btn-icon-action.is-primary:hover:not(:disabled) {
    filter: brightness(1.06);
    color: #fff;
    background: var(--accent, #0d9488);
}
.app-shell .btn-icon-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.app-shell a.btn-icon-action {
    text-decoration: none;
}
.app-shell .report-toolbar,
.app-shell .invoice-detail-tabs {
    align-items: center;
}
.app-shell .report-toolbar .btn-icon-action,
.app-shell .invoice-detail-tabs .btn-icon-action,
.app-shell .acc-detail-actions .btn-icon-action {
    width: 1.55rem;
    height: 1.55rem;
    min-width: 1.55rem;
}
.app-shell .toolbar-icon-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-inline-start: auto;
    max-width: none;
    white-space: nowrap;
}
.app-shell .data-table td.table-actions,
.app-shell .data-table td.col-actions,
.app-shell .data-table td.inv-row-actions,
.app-shell .data-table td.toolbar-icon-group,
.app-shell .report-table td.col-actions,
.app-shell .report-table td.table-actions {
    display: table-cell !important;
    width: 8.75rem;
    min-width: 8.75rem;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: end;
    vertical-align: middle;
}
.app-shell .data-table td.table-actions .btn-icon-action,
.app-shell .data-table td.toolbar-icon-group .btn-icon-action,
.app-shell .data-table td.col-actions .btn-icon-action {
    display: inline-flex;
    vertical-align: middle;
    margin-inline: 0.28rem;
}
.app-shell .sc-page-shell,
.app-shell .panel-card,
.app-shell .content,
.app-shell .page-body {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Compact date fields ? avoid full-width stretch in toolbars */
.app-shell input[type="date"].field-input,
.app-shell .report-toolbar input[type="date"],
.app-shell .compact-filter-bar input[type="date"],
.app-shell .stock-count-filters input[type="date"],
.app-shell .stock-count-ops-bar input[type="date"],
.app-shell .field-group input[type="date"].field-input {
    width: auto !important;
    max-width: 10.25rem;
    min-width: 9rem;
    flex: 0 0 auto;
}

.app-shell .field-input--date {
    width: auto !important;
    max-width: 10.25rem;
    min-width: 9rem;
    font-size: 0.82rem;
}

.app-shell .report-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.45rem 0.65rem;
    overflow: visible;
}

.app-shell .report-toolbar > .field-group {
    flex: 0 1 auto;
    min-width: 0;
}

.app-shell .report-toolbar > .toolbar-date-field {
    max-width: 10.5rem;
    flex: 0 0 auto;
}

.app-shell .report-toolbar > .toolbar-account-field {
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 10rem;
}

.app-shell .report-toolbar > .toolbar-icon-group,
.app-shell .labels-toolbar > .toolbar-icon-group,
.app-shell .compact-filter-bar + .toolbar-icon-group {
    margin-inline-start: auto;
}
.app-shell .btn-icon-action.btn-doc-return {
    color: #b91c1c;
    border-color: color-mix(in srgb, #dc2626 40%, var(--bg-alt));
}
.app-shell .btn-icon-action.btn-doc-return:hover {
    background: color-mix(in srgb, #dc2626 10%, var(--card));
    color: #991b1b;
}
.app-shell .btn-icon-action.btn-doc-exchange {
    color: #1d4ed8;
    border-color: color-mix(in srgb, #2563eb 40%, var(--bg-alt));
}
.app-shell .btn-icon-action.btn-doc-exchange:hover {
    background: color-mix(in srgb, #2563eb 10%, var(--card));
    color: #1e40af;
}

.app-shell .data-table tr.notification-highlight {
    background: color-mix(in srgb, var(--accent) 16%, var(--card)) !important;
    box-shadow: inset 3px 0 0 var(--accent);
    animation: notification-row-pulse 1.4s ease-in-out 3;
}

@keyframes notification-row-pulse {
    0%, 100% { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
    50% { background: color-mix(in srgb, var(--accent) 28%, var(--card)); }
}

.invoice-action-banner {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
}
.invoice-action-banner.banner-return {
    border-inline-start: 4px solid #dc2626;
    background: color-mix(in srgb, #dc2626 10%, var(--card));
}
.invoice-action-banner.banner-exchange {
    border-inline-start: 4px solid #2563eb;
    background: color-mix(in srgb, #2563eb 10%, var(--card));
}
.btn-doc-return { color: #b91c1c !important; }
.btn-doc-exchange { color: #1d4ed8 !important; }
.notification-item.type-low-stock.unread { border-inline-start: 3px solid #ea580c; }
.notification-item.type-expired-item.unread { border-inline-start: 3px solid #dc2626; }
.notification-item.type-expiry-critical.unread { border-inline-start: 3px solid #b91c1c; }
.notification-item.type-expiring-soon.unread { border-inline-start: 3px solid #f59e0b; }
html[dir="rtl"] .app-shell select.field-input {
    background-position: left 0.85rem center;
    padding-inline-end: 2.4rem;
    padding-inline-start: var(--field-pad-x);
}

/* ??? Searchable select (same closed look as select.field-input) ??? */
.app-shell .searchable-select-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}
.app-shell .searchable-select-wrap.is-open { z-index: 9000; }
.app-shell .country-city-fields {
    display: contents;
}
.app-shell .country-city-fields--compact {
    display: contents;
}
.app-shell .cf-pair .searchable-select-wrap {
    flex: 1 1 auto;
    min-width: 9rem;
}
.app-shell .cf-pair .searchable-select-trigger.cf-pair-ctrl {
    width: 100%;
}

.app-shell .form-grid .searchable-select-wrap.is-open { z-index: 9100; }

.app-shell button.searchable-select-trigger.field-input,
.app-shell .searchable-select-trigger.field-input {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: start;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px;
}

html[dir="rtl"] .app-shell button.searchable-select-trigger.field-input,
html[dir="rtl"] .app-shell .searchable-select-trigger.field-input {
    background-position: left 0.85rem center;
    /* Keep chevron gutter on inline-end (start of reading in RTL = left physically via background) */
    padding-inline-end: 2.4rem;
    padding-inline-start: var(--field-pad-x);
}

.app-shell .searchable-select-trigger.is-open {
    border-color: var(--input-focus, var(--accent));
    box-shadow: var(--focus-ring);
}

.app-shell .searchable-select-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.app-shell .searchable-select-panel {
    position: absolute;
    z-index: 400;
    inset-inline: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    max-height: 280px;
    background: var(--input-bg, var(--card));
    border: 1.5px solid var(--input-focus, var(--accent));
    border-radius: var(--field-radius);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 18%, transparent);
    overflow: hidden;
}
.app-shell .searchable-select-panel.is-anchored {
    /* LEGACY: do not use fixed — absolute under wrap is the permanent strategy */
    position: absolute !important;
    inset-inline: 0 !important;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 100%;
    max-height: min(280px, 50vh);
    box-sizing: border-box;
}
.app-shell .searchable-select-wrap.is-open-up .searchable-select-panel,
.app-shell .searchable-select-wrap.is-open-up .searchable-select-panel.is-anchored {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
}
/* Portaled to body — escapes POS overflow:hidden AND .app-shell overflow:hidden */
.app-shell > .searchable-select-panel.is-portal,
.app-shell .searchable-select-panel.is-portal,
body > .searchable-select-panel.is-portal {
    position: absolute !important;
    z-index: 12000 !important;
    margin: 0;
}
/* Visual styles must not depend on .app-shell ancestor once portaled to body */
body > .searchable-select-panel.is-portal {
    display: flex;
    flex-direction: column;
    max-height: min(320px, calc(100vh - 16px));
    background: var(--input-bg, var(--card, #fff));
    border: 1.5px solid var(--input-focus, var(--accent, #7c3aed));
    border-radius: var(--field-radius, 10px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    box-sizing: border-box;
    color: var(--text, #0f172a);
}
body > .searchable-select-panel.is-portal .searchable-select-filter {
    width: 100%;
    min-height: 40px;
    border: none;
    border-bottom: 1px solid var(--bg-alt, #e2e8f0);
    border-radius: 0;
    padding: 0.55rem 0.85rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--input-text, var(--text, #0f172a));
    background: color-mix(in srgb, var(--input-bg, var(--card, #fff)) 92%, var(--accent, #7c3aed));
    outline: none;
}
body > .searchable-select-panel.is-portal .searchable-select-options {
    overflow-y: auto;
    max-height: 210px;
    padding: 0.25rem;
}
body > .searchable-select-panel.is-portal .searchable-select-option {
    display: block;
    width: 100%;
    text-align: start;
    border: none;
    background: transparent;
    color: var(--text, #0f172a);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.35;
    min-height: 2.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
}
body > .searchable-select-panel.is-portal .searchable-select-option:hover {
    background: color-mix(in srgb, var(--accent, #7c3aed) 12%, transparent);
}
body > .searchable-select-panel.is-portal .searchable-select-option.is-selected {
    background: color-mix(in srgb, var(--accent, #7c3aed) 18%, transparent);
    font-weight: 600;
}
body > .searchable-select-panel.is-portal .searchable-select-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.app-shell .searchable-select-filter {
    width: 100%;
    min-height: 40px;
    border: none;
    border-bottom: 1px solid var(--bg-alt);
    border-radius: 0;
    padding: 0.55rem 0.85rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--input-text, var(--text));
    background: color-mix(in srgb, var(--input-bg, var(--card)) 92%, var(--accent));
    outline: none;
}

.app-shell .searchable-select-options {
    overflow-y: auto;
    max-height: 210px;
    padding: 0.25rem;
}

.app-shell .searchable-select-option {
    display: block;
    width: 100%;
    text-align: start;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    min-height: 2.5rem !important;
    height: auto !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .searchable-select-option:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.app-shell .searchable-select-option.is-selected {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font-weight: 600;
}

.app-shell .searchable-select-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Mini variant (purchase lines / cart unit) */
.app-shell .searchable-select-trigger.cart-unit-select,
.app-shell .searchable-select-trigger.purchase-mini-field {
    min-height: 36px;
    height: 36px;
    padding-block: 0.2rem;
    padding-inline-start: 0.35rem;
    padding-inline-end: 1.6rem;
    font-size: 0.75rem;
    border-radius: 8px;
    background-position: right 0.45rem center;
    background-size: 10px;
}

html[dir="rtl"] .app-shell .searchable-select-trigger.cart-unit-select,
html[dir="rtl"] .app-shell .searchable-select-trigger.purchase-mini-field {
    background-position: left 0.45rem center;
    padding-inline-start: 0.35rem;
    padding-inline-end: 1.6rem;
}

/* Search fields */
.app-shell .search-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.85rem center;
    background-size: 18px;
    padding-inline-start: 2.65rem;
}
html[dir="rtl"] .app-shell .search-field {
    background-position: right 0.85rem center;
    padding-inline-start: var(--field-pad-x);
    padding-inline-end: 2.65rem;
}

/* POS scan bar */
.app-shell .scan-input {
    border-style: solid;
    border-width: 1.5px;
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

.app-shell .touch-num {
    width: auto;
    min-width: 96px;
    text-align: center;
}

/* Date / time ? native picker colors follow theme */
.theme-obsidian.app-shell input[type="date"],
.theme-obsidian.app-shell input[type="datetime-local"],
.theme-obsidian.app-shell input[type="time"],
body.theme-obsidian .app-shell input[type="date"],
body.theme-obsidian .app-shell input[type="datetime-local"],
body.theme-obsidian .app-shell input[type="time"] {
    color-scheme: dark;
}

/* ??? Labels & form layout ??? */
.app-shell .form-row label,
.app-shell .form-grid > label:not(.perm-check) {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    color: var(--label-color, var(--magenta));
    letter-spacing: 0.01em;
}

.app-shell .form-grid > label:not(.perm-check) {
    grid-column: 1 / -1;
    margin-bottom: -0.35rem;
}

.app-shell .form-row.full-width {
    grid-column: 1 / -1;
}

.app-shell .form-grid .field-group.full-width {
    grid-column: 1 / -1;
}

.app-shell .form-grid > p.full-width,
.app-shell .form-grid > .muted.full-width {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: 0;
    line-height: 1.45;
}

.inventory-settings-panel .form-grid > p.muted {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
}

/* ??? Checkboxes & permissions ??? */
.app-shell .perm-section-title {
    margin: 1.1rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--label-color, var(--magenta));
}

.app-shell .perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.85rem;
    border-radius: var(--field-radius);
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--input-border, var(--bg-alt));
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}


.app-shell .perm-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.app-shell .perm-group strong {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent);
    margin-bottom: 0.15rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--input-border, var(--bg-alt));
}

.app-shell .audit-intro { margin: 0.5rem 0 0; max-width: 52rem; line-height: 1.5; }
.app-shell .audit-screen-card { margin-top: 0.75rem; }
.app-shell .audit-screen-head { margin-bottom: 0.55rem; }
.app-shell .audit-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.35rem 0.75rem;
    padding-inline-start: 1.4rem;
}
.app-shell .audit-json {
    background: var(--bg-alt);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.78rem;
    overflow: auto;
    max-height: 14rem;
    direction: ltr;
    text-align: left;
}
.app-shell .badge-ok { color: #15803d; font-weight: 700; }
.app-shell .badge-err { color: #b91c1c; font-weight: 700; }
.app-shell .tiny { font-size: 0.72rem; }
.app-shell tr.clickable-row:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.app-shell tr.detail-row > td {
    padding: 0.75rem 1rem;
    background: var(--bg-alt, #f6f8fb);
}
.app-shell .nested-ticket-table {
    margin: 0;
}
.app-shell .doc-lines-readonly {
    max-width: 100%;
}
.app-shell .doc-lines-readonly .nested-ticket-table th.num,
.app-shell .doc-lines-readonly .nested-ticket-table td.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.app-shell .doc-lines-readonly-total {
    margin: 0.45rem 0 0;
    font-weight: 600;
}
.app-shell .doc-lines-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.app-shell .doc-line-cost {
    display: block;
    min-width: 0;
    align-self: stretch;
}

/* Unit cost suggest ? single column so hint never sits beside the input */
.unit-cost-suggest-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.unit-cost-suggest {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    position: relative;
    min-width: 0;
    width: 100%;
}
.unit-cost-suggest-input {
    flex: 1 1 auto;
    min-width: 4.5rem;
    width: 100%;
}
.unit-cost-suggest-actions {
    position: relative;
    flex: 0 0 auto;
}
.unit-cost-suggest-btn {
    width: 2rem;
    height: 100%;
    min-height: 2.1rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--card, #fff));
    color: var(--accent, #2563eb);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.unit-cost-suggest-btn:hover {
    background: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}
.unit-cost-suggest-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 4px);
    z-index: 60;
    min-width: 15rem;
    max-width: min(22rem, 90vw);
    max-height: 14rem;
    overflow: auto;
    padding: 0.35rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text, #111) 12%, transparent);
    background: var(--card, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.unit-cost-suggest-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    width: 100%;
    text-align: start;
    border: none;
    background: transparent;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
}
.unit-cost-suggest-option:hover {
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
}
.unit-cost-suggest-option .ucs-label {
    font-size: 0.78rem;
    font-weight: 700;
}
.unit-cost-suggest-option .ucs-meta {
    font-size: 0.72rem;
    opacity: 0.75;
}
.unit-cost-suggest-empty {
    padding: 0.55rem;
    font-size: 0.78rem;
    opacity: 0.7;
}
.unit-cost-suggest-hint {
    margin: 0;
    padding: 0;
    font-size: 0.65rem;
    line-height: 1.2;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.unit-cost-suggest--compact {
    min-width: 0;
    max-width: 9.5rem;
}
.unit-cost-suggest--purchase {
    max-width: 8.25rem;
    min-width: 5.25rem;
    flex: 1 1 5.25rem;
}
.unit-cost-suggest--purchase .unit-cost-suggest {
    min-height: var(--purchase-ctrl-h, 2.15rem);
    height: var(--purchase-ctrl-h, 2.15rem);
}
.unit-cost-suggest--purchase .unit-cost-suggest-input {
    width: auto;
    min-height: var(--purchase-ctrl-h, 2.15rem);
    height: var(--purchase-ctrl-h, 2.15rem);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.82rem;
}
.unit-cost-suggest--purchase .unit-cost-suggest-btn {
    min-height: var(--purchase-ctrl-h, 2.15rem);
    height: var(--purchase-ctrl-h, 2.15rem);
}
.doc-line-cost .unit-cost-suggest-wrap {
    max-width: 11rem;
}
td.num .unit-cost-suggest-wrap {
    margin-inline-start: auto;
    max-width: 9.5rem;
}

.sc-pr-lines .sc-pr-sale {
    display: inline-block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sc-pr-lines .sc-pr-margin {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: #15803d;
}
.sc-pr-lines .sc-pr-margin.is-neg {
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #b91c1c;
}

.app-shell .perm-check,
.app-shell .form-grid > label.perm-check,
.app-shell label:has(input[type="checkbox"]:not(.perm-check input)) {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    margin: 0;
    transition: background 0.15s;
}

.app-shell .perm-check:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.app-shell .perm-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.app-shell .perm-check .perm-hint {
    flex-shrink: 0;
}

.app-shell .perm-check .hint-tip-btn {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.65rem;
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ??? Modals ??? */
/* Flex + margin:auto keeps short dialogs centered and tall ones scrollable
   without “safe” alignment sticking the card under the header. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9000;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}
/* Lightweight overlay — avoids GPU blur lag while dragging the mouse over large pages */
.modal-overlay-lite {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 22, 38, 0.62);
}

.modal-card {
    background: var(--card);
    color: var(--text);
    padding: 1.5rem 1.65rem;
    border-radius: var(--radius-lg);
    width: min(540px, 100%);
    max-height: min(92vh, 900px);
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    border: 1px solid var(--panel-border, rgba(0, 0, 0, 0.08));
    margin: auto;
    flex-shrink: 0;
}
.modal-card.modal-card--wide {
    width: min(1120px, 97vw);
    max-height: min(94vh, 980px);
}
.modal-card.modal-card--fs-note {
    width: min(1100px, 96vw);
    max-height: min(94vh, 1040px);
    padding: 1.35rem 1.75rem 1.35rem;
    overflow-x: hidden;
}
.modal-card.modal-card--fs-note > h3 {
    margin: 0 0 .85rem;
    font-size: 1.12rem;
    letter-spacing: .01em;
    line-height: 1.35;
}
.modal-card.modal-card--fs-note .fs-note-lead {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(15, 76, 129, .08), rgba(196, 149, 74, .1));
    border: 1px solid rgba(15, 76, 129, .12);
    color: var(--text);
    font-size: .92rem;
    line-height: 1.55;
}
.modal-card.modal-card--fs-note .fs-notes-label {
    white-space: normal !important;
    min-width: 10rem;
    max-width: none;
    width: 36%;
    line-height: 1.45;
    vertical-align: middle;
}
.modal-card.modal-card--fs-note .table-wrap {
    overflow-x: hidden !important;
    overflow-y: visible;
    max-width: 100%;
    width: 100%;
}
.modal-card.modal-card--fs-note .fs-notes-table,
.modal-card.modal-card--fs-note .report-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: auto;
}
.modal-card.modal-card--fs-note .fs-notes-table th.num,
.modal-card.modal-card--fs-note .fs-notes-table td.num,
.modal-card.modal-card--fs-note .report-table th.num,
.modal-card.modal-card--fs-note .report-table td.num {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: .86rem;
    padding-inline: .55rem;
    width: 1%;
}
.modal-card.modal-card--fs-note .report-table th:first-child,
.modal-card.modal-card--fs-note .report-table td:first-child {
    white-space: nowrap !important;
    width: 1%;
    min-width: 6.5rem;
    overflow: visible;
    vertical-align: middle;
}
.fs-code-plain {
    display: inline-flex;
    align-items: center;
    white-space: nowrap !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--text);
    padding: .15rem .35rem;
}
.modal-card.modal-card--fs-note .fs-note-label-line,
.report-document .fs-note-label-line,
.report-print-sheet .fs-note-label-line,
.acc-stmt-block .fs-note-label-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.modal-card.modal-card--fs-note .fs-note-label-txt,
.report-document .fs-note-label-txt,
.acc-stmt-block .fs-note-label-txt {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
}
.modal-card.modal-card--fs-note .fs-note-row-actions,
.report-document .fs-note-row-actions,
.acc-stmt-block .fs-note-row-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    margin: 0;
    white-space: nowrap;
}
.modal-card.modal-card--fs-note .fs-note-footnotes {
    margin: 1rem 0 0;
    padding: .75rem .9rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, .03);
    border-inline-start: 3px solid #c4954a;
}
.modal-card.modal-card--fs-note .fs-note-footnotes li {
    margin: .35rem 0;
    line-height: 1.5;
    font-size: .9rem;
}
.btn-fs-note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: .45rem;
    padding: .22rem .65rem;
    border: 1px solid #8a6a2e;
    border-radius: 999px;
    background: #123a5c;
    color: #f3e6c8 !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 2px 6px rgba(18, 58, 92, .25);
    cursor: pointer;
    vertical-align: middle;
    transition: filter .15s ease, transform .15s ease;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.btn-fs-note:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.btn-fs-note:active { transform: translateY(0); }
.btn-fs-note__mark {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #d4a84b;
    color: #12283f;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.btn-fs-note__txt { white-space: nowrap; }

/* Account / cost-center code chips — same luxury language, print-safe solid colors */
.btn-fs-code {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid #8a6a2e;
    border-radius: 8px;
    background: #123a5c;
    color: #f3e6c8 !important;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap !important;
    max-width: none;
    transition: filter .15s ease, transform .15s ease;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.btn-fs-code:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn-fs-code--static {
    cursor: default;
    pointer-events: none;
    opacity: .92;
    box-shadow: none;
}
.btn-fs-code--static:hover {
    filter: none;
    transform: none;
}
.btn-fs-code__mark {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: .95rem;
    height: .95rem;
    border-radius: 4px;
    background: #d4a84b;
    color: #12283f;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.btn-fs-code__txt {
    white-space: nowrap !important;
    flex-shrink: 0;
}
@media print {
    .btn-fs-note,
    .btn-fs-code {
        box-shadow: none !important;
        background: #123a5c !important;
        color: #fff !important;
        border-color: #8a6a2e !important;
    }
    .btn-fs-note__mark,
    .btn-fs-code__mark {
        background: #d4a84b !important;
        color: #000 !important;
    }
    .btn-fs-code--static {
        opacity: 1 !important;
    }
}

.modal-card--fs-note .fs-note-footnote {
    margin: 1rem 0 0;
}

/* Expense editor: keep SearchableSelect panels inside the dialog (no browser datalist spill). */
.modal-card.expense-editor-modal {
    width: min(760px, 96vw);
    padding: 1.15rem 1.3rem 1.1rem;
    overflow: visible;
    max-height: none;
}
.modal-card.expense-editor-modal > h3 {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .75rem;
    font-size: 1.05rem;
}
.modal-card.expense-editor-modal .expense-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem .85rem;
    align-items: start;
}
.modal-card.expense-editor-modal .expense-editor-grid .full-width,
.modal-card.expense-editor-modal .expense-editor-grid .pay-method-select {
    grid-column: 1 / -1;
}
.modal-card.expense-editor-modal .pay-method-extras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem .7rem;
}
.modal-card.expense-editor-modal .expense-editor-grid .field-input,
.modal-card.expense-editor-modal .expense-editor-grid .searchable-select-trigger {
    max-width: 100%;
    min-height: 2.05rem;
}
.modal-card.expense-editor-modal .searchable-select-wrap {
    position: relative;
    z-index: 1;
}
.modal-card.expense-editor-modal .searchable-select-wrap.is-open {
    z-index: 50;
}
.modal-card.expense-editor-modal .searchable-select-panel {
    max-height: min(220px, 42vh);
    z-index: 60;
}
.modal-card.expense-editor-modal .modal-actions {
    margin-top: .85rem;
}
.modal-card.expense-editor-modal .expense-link-hint {
    grid-column: 1 / -1;
    margin: -.15rem 0 .1rem;
    font-size: .72rem;
}
@media (max-width: 640px) {
    .modal-card.expense-editor-modal {
        width: min(96vw, 760px);
    }
    .modal-card.expense-editor-modal .expense-editor-grid,
    .modal-card.expense-editor-modal .pay-method-extras {
        grid-template-columns: 1fr;
    }
}
.modal-card.job-work-contract-modal {
    width: min(1180px, 98vw);
}
.modal-card.job-work-contract-modal > h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
}
.modal-card.job-work-contract-modal .jw-create-one-liner {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.35;
}
.job-work-contract-modal .jw-contract-meta {
    gap: 0.45rem 0.75rem;
    margin-bottom: 0.15rem;
}
.job-work-contract-modal .jw-contract-meta .field-group {
    margin: 0;
    min-width: 0;
}
.job-work-contract-modal .jw-contract-meta .field-label-row {
    margin-bottom: 0.15rem;
    gap: 0.2rem;
}
.job-work-contract-modal .jw-contract-meta .field-label {
    font-size: 0.74rem;
    margin: 0;
}
.job-work-contract-modal .jw-contract-meta .field-input {
    min-height: 2rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.86rem;
}
.job-work-contract-modal .jw-contract-meta .field-with-add {
    gap: 0.35rem;
    flex-wrap: nowrap;
}
.job-work-contract-modal .jw-contract-meta .field-with-add .btn-sm {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.28rem 0.55rem;
}
.job-work-contract-modal .jw-formula-field .jw-basis-formula {
    display: flex;
    align-items: center;
    min-height: 2rem;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--panel-border, #ddd) 80%, transparent);
    background: color-mix(in srgb, #111 3.5%, var(--card, #fff));
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 700px) {
    .job-work-contract-modal .jw-contract-meta {
        grid-template-columns: 1fr;
    }
}
.jw-create-guide {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #0ea5e9) 9%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #0ea5e9) 22%, transparent);
}
.jw-create-guide-title {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}
.jw-create-guide-what,
.jw-create-note,
.jw-fee-callout p {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text);
}
.jw-howto--create {
    margin: 0.65rem 0 0;
    background: transparent;
    padding-inline-start: 1.2rem;
}
.jw-fee-callout {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, #b54708 10%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, #b54708 28%, transparent);
}
.jw-fee-callout strong {
    font-size: 0.88rem;
}
.jw-create-note {
    font-weight: 600;
}
.jw-create-note--muted {
    font-weight: 500;
    opacity: 0.88;
}
.jw-basis-panel {
    margin: 0.15rem 0 0.35rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #0ea5e9) 8%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #0ea5e9) 20%, transparent);
}
.jw-basis-panel-title {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}
.jw-basis-panel p {
    margin: 0.3rem 0 0;
    font-size: 0.84rem;
    line-height: 1.55;
}
.jw-basis-formula {
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: color-mix(in srgb, #111 4%, var(--card, #fff));
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem !important;
}
.jw-basis-formula span {
    font-family: inherit;
    font-weight: 700;
    margin-inline-end: 0.35rem;
}
.jw-basis-impact {
    font-weight: 600;
}
.form-grid > .jw-basis-panel.full-width {
    grid-column: 1 / -1;
}
.jw-lines-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem 0.85rem;
    margin: 0.55rem 0 0.4rem;
}
.jw-lines-bar-text { min-width: 0; flex: 1 1 14rem; }
.jw-lines-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}
.jw-lines-hint {
    margin: 0.2rem 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    opacity: 0.9;
}
.jw-lines-add-product { flex-shrink: 0; }
.jw-product-groups {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}
.jw-product-card {
    padding: 0.35rem 0.45rem 0.4rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent, #0ea5e9) 28%, var(--panel-border, #ddd));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--accent, #0ea5e9) 8%, var(--card, #fff)) 0%,
            var(--card, #fff) 55%);
    box-shadow: 0 1px 0 color-mix(in srgb, #000 3.5%, transparent);
}
.jw-prod-grid {
    display: grid;
    grid-template-columns:
        minmax(11rem, 2.6fr)
        minmax(4.75rem, 0.85fr)
        minmax(4.1rem, 0.7fr)
        minmax(4.75rem, 0.8fr)
        2rem;
    gap: 0.28rem 0.4rem;
    align-items: center;
}
.jw-prod-grid--yield {
    grid-template-columns:
        minmax(10rem, 2.35fr)
        minmax(4.5rem, 0.8fr)
        minmax(3.9rem, 0.65fr)
        minmax(4.5rem, 0.75fr)
        minmax(3.4rem, 0.5fr)
        2rem;
}
.jw-prod-head {
    margin-bottom: 0.12rem;
    padding: 0 0.05rem;
}
.jw-col-h {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    color: color-mix(in srgb, var(--text, #111) 72%, transparent);
    white-space: nowrap;
    overflow: hidden;
}
.jw-col-h > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
.jw-prod-row .field-input {
    width: 100%;
    min-width: 0;
    min-height: 1.85rem;
    height: 1.85rem;
    padding: 0.2rem 0.38rem;
    font-size: 0.82rem;
    border-radius: 7px;
}
.jw-cf-act {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
}
.jw-icon-btn {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 7px;
}
.jw-mat-block {
    margin-top: 0.32rem;
    padding-top: 0.32rem;
    border-top: 1px dashed color-mix(in srgb, var(--accent, #0ea5e9) 30%, transparent);
}
.jw-mat-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--text, #111) 76%, transparent);
}
.jw-mat-add {
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    min-height: 1.55rem;
}
.jw-mat-grid {
    display: grid;
    grid-template-columns: minmax(11rem, 1.7fr) 2rem;
    gap: 0.28rem 0.4rem;
    align-items: center;
}
.jw-mat-grid--recipe {
    grid-template-columns: minmax(10rem, 1.5fr) minmax(9rem, 1.1fr) 2rem;
}
.jw-mat-head {
    padding: 0 0.05rem 0.08rem;
    font-size: 0.66rem;
    font-weight: 700;
    opacity: 0.7;
}
.jw-mat-row {
    padding: 0.12rem 0.12rem;
    border-radius: 7px;
    background: color-mix(in srgb, #111 3.2%, var(--card, #fff));
}
.jw-mat-row + .jw-mat-row { margin-top: 0.2rem; }
.jw-mat-select,
.jw-mat-row .field-input {
    min-height: 1.8rem;
    height: 1.8rem;
    padding: 0.18rem 0.36rem;
    font-size: 0.82rem;
    border-radius: 7px;
}
.jw-qty-unit-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    align-items: center;
    min-width: 0;
}
.jw-mat-qty {
    flex: 0 1 4rem;
    min-width: 3.25rem;
    max-width: 5rem;
}
.jw-unit-select {
    flex: 1 1 5rem;
    min-width: 4.5rem;
}
.jw-mat-row-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 860px) {
    .jw-prod-grid,
    .jw-prod-grid--yield {
        grid-template-columns: 1fr 1fr;
    }
    .jw-prod-grid .jw-cf-fg,
    .jw-prod-grid--yield .jw-cf-fg { grid-column: 1 / -1; }
    .jw-prod-head .jw-cf-act { display: none; }
    .jw-prod-row .jw-cf-act { grid-column: 1 / -1; justify-content: flex-start; }
    .jw-mat-grid,
    .jw-mat-grid--recipe {
        grid-template-columns: 1fr auto;
    }
    .jw-mat-grid--recipe .jw-qty-unit-row { grid-column: 1 / -1; }
    .jw-mat-head { display: none; }
}
.jw-scenario-card {
    margin: 0.55rem 0 0.85rem;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #0f766e 28%, var(--bg-alt, #e8ecef));
    background: linear-gradient(135deg, color-mix(in srgb, #0f766e 9%, var(--card, #fff)), var(--card, #fff));
    font-size: 0.88rem;
    line-height: 1.55;
}
.jw-scenario-card strong { display: block; margin-bottom: 0.3rem; font-size: 0.92rem; }
.jw-scenario-card p { margin: 0.25rem 0 0.45rem; }
.jw-scenario-card ul {
    margin: 0;
    padding-inline-start: 1.15rem;
}
.jw-scenario-card li { margin: 0.2rem 0; }
.jw-agreed-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #b45309 30%, var(--bg-alt, #e8ecef));
    background: color-mix(in srgb, #b45309 8%, var(--card, #fff));
    font-size: 0.86rem;
}
.jw-agreed-banner strong { font-variant-numeric: tabular-nums; }
.jw-howto {
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem 0.65rem 1.25rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--card, #fff));
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
}
[dir="rtl"] .jw-howto { padding: 0.65rem 1.25rem 0.65rem 0.9rem; }
.jw-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.92rem;
}
.jw-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.jw-step-btn {
    flex: 1 1 9rem;
    min-height: 2.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    line-height: 1.2;
}
.jw-step-num {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.65;
}
.jw-tab-panel {
    margin: 0.35rem 0 0.75rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--input-border, var(--bg-alt));
    border-radius: 12px;
    background: var(--card);
}
.job-work-detail.jw-page { margin-top: 1.1rem; }
.jw-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}
.jw-hero-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.jw-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.45rem 0 0;
}
.jw-hero-no { font-size: 0.82rem; color: var(--muted, #667); }
.jw-hero-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.jw-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
}
.jw-badge-in { background: color-mix(in srgb, #4361ee 16%, var(--card)); }
.jw-badge-out { background: color-mix(in srgb, #2d6a4f 16%, var(--card)); }
.jw-badge-open { background: color-mix(in srgb, #16a34a 16%, var(--card)); }
.jw-badge-closed { background: color-mix(in srgb, #64748b 18%, var(--card)); }
.jw-practice {
    margin: 0 0 0.9rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    font-size: 0.88rem;
}
.jw-practice summary { cursor: pointer; font-weight: 650; }
.jw-practice p { margin: 0.45rem 0 0; line-height: 1.55; }
.jw-practice-card {
    margin: 0 0 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #4361ee 28%, var(--bg-alt));
    background: linear-gradient(135deg, color-mix(in srgb, #4361ee 10%, var(--card)), var(--card));
}
.jw-practice-title { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; }
.jw-practice-card p { margin: 0.35rem 0 0; line-height: 1.55; font-size: 0.9rem; }
.jw-practice-fee { color: var(--muted, #556); font-size: 0.85rem !important; }
.jw-practice-steps { font-weight: 600; color: var(--text, #1e293b); }
.jw-practice-scope { color: var(--muted, #556); font-size: 0.84rem !important; }
.jw-ledger-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.1rem;
}
.jw-ledger-head .section-title { margin: 0; }
.jw-ledger-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0.65rem;
}
.jw-filter-chip {
    border: 1px solid var(--border, #d0d7de);
    background: var(--panel, #fff);
    color: var(--text, #1e293b);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.jw-filter-chip.active {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #fff;
    font-weight: 600;
}
.jw-print-meta {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}
.jw-print-meta-always {
    display: flex !important;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.65rem;
    border-radius: 10px;
    background: color-mix(in srgb, #0f766e 8%, var(--card));
    border: 1px solid color-mix(in srgb, #0f766e 20%, transparent);
    font-size: 0.86rem;
}
@media print {
    .jw-print-meta { display: flex; }
}
.jw-text-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.jw-bill-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #16a34a 35%, var(--bg-alt));
    background: color-mix(in srgb, #16a34a 12%, var(--card));
}
.jw-bill-banner p { margin: 0.25rem 0 0; font-size: 0.88rem; }
.jw-bill-box {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: color-mix(in srgb, #f59e0b 12%, var(--card));
    border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--bg-alt));
}
.jw-bill-box p { margin: 0.35rem 0 0; font-size: 0.88rem; line-height: 1.5; }
.jw-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.85rem;
}
.jw-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card.jw-kpi { padding: 0.85rem 1rem; }
.stat-card.jw-kpi:hover { transform: none; }
.stat-card.jw-kpi strong { font-size: 1.12rem; display: block; margin-top: 0.15rem; }
.jw-kpi-posted {
    background: color-mix(in srgb, #0f766e 10%, var(--card));
    border-color: color-mix(in srgb, #0f766e 22%, var(--bg-alt));
}
.jw-tab-panel--fee {
    padding: 0;
    border: none;
    background: transparent;
}
.jw-fee-desk {
    border: 1px solid color-mix(in srgb, #0f766e 22%, var(--input-border, #ddd));
    border-radius: 16px;
    background:
        linear-gradient(165deg, color-mix(in srgb, #0f766e 8%, var(--card)) 0%, var(--card) 42%),
        var(--card);
    padding: 1rem 1.1rem 1.15rem;
    box-shadow: 0 10px 28px color-mix(in srgb, #0f172a 6%, transparent);
}
.jw-fee-desk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.jw-fee-desk-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.jw-fee-desk-sub {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--muted, #64748b);
    max-width: 38rem;
}
.jw-fee-doc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    background: color-mix(in srgb, #0f766e 16%, var(--card));
    border: 1px solid color-mix(in srgb, #0f766e 28%, transparent);
}
.jw-fee-finance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.jw-fee-fin-card {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 88%, #fff);
    border: 1px solid color-mix(in srgb, #94a3b8 22%, transparent);
}
.jw-fee-fin-card span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted, #64748b);
    margin-bottom: 0.25rem;
}
.jw-fee-fin-card strong {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
.jw-fee-fin-card.due {
    border-color: color-mix(in srgb, #ca8a04 40%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, var(--card));
}
.jw-fee-fin-card.settled {
    border-color: color-mix(in srgb, #16a34a 35%, transparent);
    background: color-mix(in srgb, #16a34a 10%, var(--card));
}
.jw-fee-section-label {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}
.jw-fee-line-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
.jw-fee-line-card {
    appearance: none;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
    background: var(--card);
    color: inherit;
    cursor: pointer;
}
.jw-fee-line-card.open:hover,
.jw-fee-line-card.open.active {
    border-color: color-mix(in srgb, #0f766e 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, #0f766e 25%, transparent);
}
.jw-fee-line-card.open.active {
    background: color-mix(in srgb, #0f766e 10%, var(--card));
}
.jw-fee-line-card.settled {
    cursor: default;
    opacity: 0.88;
    background: color-mix(in srgb, #64748b 6%, var(--card));
}
.jw-fee-line-name { font-weight: 700; font-size: 0.92rem; }
.jw-fee-line-mat { font-size: 0.75rem; color: var(--muted, #64748b); }
.jw-fee-line-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
    margin-top: 0.2rem;
}
.jw-fee-line-meta em { font-style: normal; font-size: 0.78rem; color: var(--muted, #64748b); }
.jw-fee-line-rate { font-size: 0.74rem; color: var(--muted, #64748b); }
.jw-fee-badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 16%, var(--card));
    color: #166534;
}
.jw-fee-compose { margin-top: 0.25rem; }
.jw-fee-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, #0f766e 9%, var(--card));
    border: 1px dashed color-mix(in srgb, #0f766e 35%, transparent);
}
.jw-fee-preview span { font-size: 0.82rem; color: var(--muted, #64748b); }
.jw-fee-preview strong { font-size: 1.2rem; letter-spacing: -0.02em; }
.jw-fee-preview em { font-style: normal; font-size: 0.8rem; color: var(--muted, #64748b); }
.jw-fee-actions { margin-top: 0.75rem; }
.jw-fee-settled {
    padding: 1rem 1.05rem;
    border-radius: 12px;
    background: color-mix(in srgb, #16a34a 10%, var(--card));
    border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
    margin-bottom: 0.85rem;
}
.jw-fee-settled-title { margin: 0; font-weight: 700; font-size: 0.98rem; }
.jw-fee-settled-body { margin: 0.4rem 0 0.75rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted, #556); }
.jw-table-wrap { margin-bottom: 1rem; }
.jw-table tbody tr { cursor: pointer; }
.jw-cell-main { font-weight: 600; }
.jw-cell-sub { font-size: 0.75rem; color: var(--muted, #667); margin-top: 0.12rem; }
.jw-stepper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr));
    gap: 0.45rem;
    margin: 0.35rem 0 0.65rem;
}
.jw-stepper .jw-step-btn {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--input-border, #ddd));
    background: var(--card);
    border-radius: 12px;
    cursor: pointer;
    color: inherit;
    padding: 0.55rem 0.4rem;
}
.jw-stepper .jw-step-btn.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.jw-step-lead { margin: 0 0 0.65rem; line-height: 1.5; font-size: 0.9rem; }
.jw-impact { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.85rem; }
.jw-pill {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
}
.jw-pill-stock { background: color-mix(in srgb, #2d6a4f 12%, var(--card)); }
.jw-pill-gl { background: color-mix(in srgb, #4361ee 12%, var(--card)); }
.jw-contract-report-panel {
    max-width: min(1100px, 96vw);
    max-height: 92vh;
    overflow: auto;
}
.jw-report-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.jw-report-toolbar h3 { margin: 0; font-size: 1.05rem; }
.jw-report-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
}
.jw-report-title { font-size: 1.15rem; }
.jw-report-sub { margin: 0.35rem 0 0; color: var(--muted, #64748b); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.jw-report-sep { opacity: 0.45; }
.jw-report-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: flex-start; }
.jw-report-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.jw-report-kpis > div {
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #94a3b8 22%, transparent);
    background: color-mix(in srgb, #0f766e 6%, var(--card));
}
.jw-report-kpis span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted, #64748b);
    margin-bottom: 0.2rem;
}
.jw-report-kpis strong { font-size: 0.98rem; }
.jw-report-section {
    margin: 0.85rem 0 0.45rem;
    font-size: 0.92rem;
}
.jw-report-fee-ref {
    margin: 0.85rem 0 0;
    font-size: 0.86rem;
    color: var(--muted, #556);
}
@media (max-width: 900px) {
    .jw-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .jw-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jw-fee-finance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .jw-kpis { grid-template-columns: 1fr; }
    .jw-hero { flex-direction: column; }
}
.app-shell .alert-box.ok {
    border-color: color-mix(in srgb, #16a34a 30%, transparent);
    background: color-mix(in srgb, #16a34a 8%, var(--card));
}

.modal-card h3 {
    margin: 0 0 1.1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--input-border, var(--bg-alt));
}

.modal-card h4 {
    color: var(--text);
}

.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--input-border, var(--bg-alt));
}

html[dir="rtl"] .modal-actions {
    justify-content: flex-start;
}

.portal-modal-section {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px dashed color-mix(in srgb, var(--accent, #0ea5e9) 22%, transparent);
}

.portal-modal-section h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.portal-modal-grid {
    margin-top: 0.5rem;
}

.portal-wholesale-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.wide-modal {
    width: min(720px, 96vw) !important;
}

/* Secondary button ? theme-aware (explicit color beats browser button default) */
.app-shell button.btn-secondary,
.app-shell .btn-secondary,
.settings-drawer button.btn-secondary,
.settings-drawer .btn-secondary {
    background: var(--input-bg, var(--card));
    color: var(--text) !important;
    border: 1.5px solid var(--input-border, var(--magenta-soft));
}

.app-shell button.btn-secondary:hover,
.app-shell .btn-secondary:hover,
.settings-drawer button.btn-secondary:hover,
.settings-drawer .btn-secondary:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--input-bg, var(--card)));
    border-color: var(--accent);
    color: var(--accent) !important;
}

/* Inactive tabs & preset chips ? explicit text for dark mode */
.app-shell button.tab-btn,
.app-shell button.preset-chip,
.settings-drawer button.preset-chip,
.settings-drawer button.tab-btn {
    color: var(--text);
}

.app-shell button.tab-btn.active,
.app-shell button.preset-chip.active,
.settings-drawer button.preset-chip.active {
    color: #fff;
}

/* ??? Toolbar & report filters ??? */
.app-shell .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    overflow: visible;
}
.app-shell .report-toolbar,
.app-shell .labels-toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    align-items: center;
    overflow: visible;
}

/* Filter bar with searchable selects ? must not clip dropdown panels */
.app-shell .report-filter-bar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    align-items: end;
    gap: 0.85rem 1.1rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-alt));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
    overflow: visible;
    position: relative;
    z-index: 20;
}
.app-shell .report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
}
.app-shell .report-filter-field--grow {
    flex: unset;
    max-width: none;
}
.app-shell .report-filter-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--label-color, var(--magenta));
    line-height: 1.2;
}
.app-shell .report-filter-control,
.app-shell .report-filter-field .searchable-select-wrap {
    width: 100%;
    min-width: 0;
}
.app-shell .report-filter-field .searchable-select-trigger.field-input {
    min-height: 2.65rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.app-shell .report-filter-field .searchable-select-panel {
    width: 100%;
    min-width: 100%;
    max-width: none;
    z-index: 500;
}
.app-shell .report-filter-field .searchable-select-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
    padding: 0.65rem 0.85rem;
}
.app-shell .report-filter-field .searchable-select-filter {
    min-height: 2.5rem;
    font-size: 0.92rem;
}
.app-shell .report-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}
.app-shell .report-filter-btn {
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.15rem;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    box-sizing: border-box;
}
.app-shell .supplier-items-report {
    overflow: visible;
}
.app-shell .supplier-items-report .compact-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.app-shell .supplier-items-report .summary-card {
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--bg-alt));
    background: var(--card);
    min-height: 4.5rem;
}
.app-shell .supplier-items-report .summary-card.accent {
    border-color: color-mix(in srgb, var(--accent) 16%, var(--bg-alt));
    background: var(--card);
}
.app-shell .supplier-items-report .summary-label {
    font-size: 0.84rem;
    font-weight: 600;
}
.app-shell .supplier-items-report .summary-card strong {
    font-size: 1.15rem;
}
.app-shell .supplier-items-table thead th {
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 700;
    vertical-align: middle;
    padding: 0.7rem 0.85rem;
}
@media (max-width: 720px) {
    .app-shell .report-filter-bar {
        grid-template-columns: 1fr;
    }
    .app-shell .supplier-items-report .compact-summary {
        grid-template-columns: 1fr;
    }
}

.app-shell .report-toolbar label,
.app-shell .labels-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.app-shell .report-toolbar .date-input,
.app-shell .labels-toolbar .date-input {
    width: auto;
    min-width: 148px;
}

/* ??? Product tiles (POS / Purchases) ??? */
.app-shell .product-tile {
    border: 1.5px solid var(--tile-border, color-mix(in srgb, var(--accent) 12%, transparent));
    background: var(--tile-bg, linear-gradient(145deg, var(--card), color-mix(in srgb, var(--bg-alt) 50%, var(--card))));
    border-radius: var(--field-radius);
    padding: 0.9rem 1rem;
    text-align: start;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    font-family: inherit;
    color: var(--text);
}

.app-shell .product-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.app-shell .product-tile.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, var(--tile-bg, var(--card)));
}

.app-shell .product-tile .p-code {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.app-shell .product-tile .p-name {
    color: var(--text);
}

.app-shell .product-tile .p-price {
    color: var(--accent);
}

.app-shell .pick-row {
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--input-border, var(--bg-alt));
    border-radius: var(--field-radius);
    color: var(--text);
}

.app-shell .picker-title {
    color: var(--text-muted);
}

/* ??? Range slider ??? */
.app-shell input[type="range"] {
    accent-color: var(--accent);
    width: 100%;
}

/* ??? Status & hints inside forms ??? */
.app-shell .status-msg {
    color: var(--accent);
    font-size: 0.88rem;
}

.app-shell .muted,
.app-shell small.muted {
    color: var(--text-muted) !important;
}

/* ??? Factory module ??? */
.app-shell .factory-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.app-shell .factory-toolbar .date-range {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.app-shell .factory-toolbar .date-range label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.app-shell .unit-conv-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.app-shell .unit-conv-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: end;
}

.app-shell .unit-conv-head .field-label {
    margin: 0;
}

.app-shell .unit-conv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

.app-shell .unit-factor-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.app-shell .unit-conv-example {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.app-shell .unit-conv-note {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.92;
    line-height: 1.3;
}

.app-shell .summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.app-shell .summary-cards.summary-cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-shell .summary-cards.summary-cards-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .app-shell .summary-cards.summary-cards-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .app-shell .summary-cards.summary-cards-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.theme-obsidian .app-shell .summary-card,
body.theme-obsidian .app-shell .summary-card {
    background: color-mix(in srgb, var(--card) 92%, #fff);
    border-color: var(--panel-border, rgba(255,255,255,0.12));
    color: var(--text);
}
.theme-obsidian .app-shell .summary-card.accent {
    background: color-mix(in srgb, var(--accent) 16%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.theme-obsidian .app-shell .summary-card strong {
    color: #f8fafc;
}
.theme-obsidian .app-shell .summary-label {
    color: #cbd5e1;
}
.app-shell .summary-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Legacy unstyled kpi-* aliases ? same look as summary cards */
.app-shell .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.app-shell .kpi-card {
    background: var(--bg-alt, var(--card));
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: var(--field-radius, 10px);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.app-shell .kpi-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.app-shell .kpi-card strong {
    font-size: 1.2rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.theme-obsidian .app-shell .summary-card,
.theme-obsidian .app-shell .kpi-card {
    background: color-mix(in srgb, var(--card) 92%, #fff);
    border-color: rgba(255,255,255,0.12);
}

@media (max-width: 1000px) {
    .app-shell .summary-cards.summary-cards-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .app-shell .summary-cards.summary-cards-4,
    .app-shell .summary-cards.summary-cards-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.app-shell .summary-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, var(--card) 0%, color-mix(in srgb, var(--accent) 4%, var(--card)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-alt, rgba(0,0,0,.08)));
    border-radius: 16px;
    padding: 1rem 1.1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset, 0 8px 22px color-mix(in srgb, var(--accent) 8%, transparent);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.app-shell .summary-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
    border-radius: 3px;
}
.app-shell .summary-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 14%, transparent);
}
.app-shell .summary-card.accent {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
}
.app-shell .summary-card.accent::before {
    width: 4px;
    background: var(--accent);
}
.app-shell .summary-card.warn {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--bg-alt));
    background: linear-gradient(155deg, color-mix(in srgb, #f59e0b 12%, var(--card)), var(--card));
}
.app-shell .summary-card.warn::before {
    background: linear-gradient(180deg, #f59e0b, #fbbf24);
}
.app-shell .summary-card.warn strong { color: #b45309; }
.theme-obsidian .app-shell .summary-card.warn strong { color: #fbbf24; }

.app-shell .summary-card strong {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
}

.app-shell .section-title {
    margin: 1.25rem 0 0.75rem;
    color: var(--text);
    font-size: 1rem;
}

.app-shell .hint-text {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
}

.app-shell .text-ok { color: var(--success, #16a34a); }
.app-shell .text-warn { color: var(--warning, #d97706); font-weight: 600; }

.app-shell .tab-row {
    /* styled with .tab-bar family in pos-theme.css */
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.app-shell .compact-tabs { margin-bottom: 0.75rem; }

.app-shell .wizard-steps {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}

.app-shell .wizard-step {
    flex: 1;
    min-width: 120px;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--input-border, var(--bg-alt));
    background: var(--input-bg, var(--bg));
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, var(--text));
    text-align: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.app-shell .wizard-step.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.app-shell .wizard-step.done {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--text);
}

.app-shell .employee-section {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--input-border, var(--bg-alt));
}

.app-shell .employee-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.app-shell .workflow-hint {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    line-height: 1.5;
}

.app-shell .staff-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.app-shell .staff-filter-bar {
    /* styled with .tab-bar family in pos-theme.css */
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.app-shell .staff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-shell .staff-kind-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.app-shell .staff-kind-badge.system {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

.app-shell .staff-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.22rem 0.72rem 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.2;
}
.app-shell .staff-status-pill i {
    width: 0.52rem;
    height: 0.52rem;
    flex-shrink: 0;
    background: currentColor;
}
.app-shell .staff-status-pill.is-active {
    color: #047857;
    background: color-mix(in srgb, #10b981 16%, var(--card, #fff));
    border-color: color-mix(in srgb, #10b981 28%, transparent);
}
.app-shell .staff-status-pill.is-active i {
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 22%, transparent);
}
.app-shell .staff-status-pill.is-cleared {
    color: #9f1239;
    background: color-mix(in srgb, #fb7185 18%, var(--card, #fff));
    border-color: color-mix(in srgb, #e11d48 26%, transparent);
}
.app-shell .staff-status-pill.is-cleared i {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 0.12rem;
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px color-mix(in srgb, #e11d48 18%, transparent);
}
.app-shell .staff-status-pill.is-off {
    color: #475569;
    background: color-mix(in srgb, #94a3b8 16%, var(--card, #fff));
    border-color: color-mix(in srgb, #64748b 22%, transparent);
}
.app-shell .staff-status-pill.is-off i {
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
}
.app-shell tr.staff-row-cleared td { opacity: 0.88; }
.app-shell tr.staff-row-off td { opacity: 0.78; }

.app-shell .staff-table-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 0.9rem;
}

.app-shell .staff-table-photo.placeholder {
    width: 36px;
    height: 36px;
}

.app-shell .staff-caps-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.app-shell .staff-cap-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.app-shell .staff-cap-pill.login { color: var(--accent); }
.app-shell .staff-cap-pill.payroll { color: #d97706; }
.app-shell .staff-cap-pill.shifts { color: #059669; }
.app-shell .staff-cap-pill.docs { color: #64748b; }

.app-shell .modal-card.staff-editor-modal {
    width: min(920px, 96vw) !important;
    max-height: min(92dvh, 920px);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem 1rem;
    gap: 0.75rem;
}

.app-shell .staff-editor-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.app-shell .staff-editor-head h3 {
    margin: 0.35rem 0 0;
    font-size: 1.2rem;
    line-height: 1.35;
}

.app-shell .staff-editor-guide {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}

.app-shell .staff-editor-loading { margin: 1rem 0; }

.app-shell .staff-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.35rem;
    margin: 0 -0.15rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text) 4%, var(--card, #fff));
    border: 1px solid var(--input-border, var(--bg-alt));
    scrollbar-width: thin;
}

.app-shell .staff-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, var(--text));
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.app-shell .staff-nav-item:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
}

.app-shell .staff-nav-item.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.app-shell .staff-nav-num {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.app-shell .staff-nav-item.active .staff-nav-num {
    background: rgba(255, 255, 255, 0.22);
}

.app-shell .staff-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.15rem 0.1rem 0.35rem;
}

.app-shell .staff-pane {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.app-shell .staff-pane-intro h4 {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
}

.app-shell .staff-pane-intro p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}

.app-shell .staff-profile-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 720px) {
    .app-shell .staff-profile-grid { grid-template-columns: 1fr; }
}

.app-shell .staff-photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 0.7rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--input-border, var(--bg-alt));
    text-align: center;
}

.app-shell .staff-photo-frame {
    width: 112px;
    height: 112px;
    border-radius: 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-shell .staff-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-shell .staff-photo-placeholder { font-size: 2.4rem; opacity: 0.4; }

.app-shell .staff-photo-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
}

.app-shell .staff-photo-input-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.app-shell .staff-form-grid {
    gap: 0.85rem 1rem;
}

.app-shell .staff-form-grid .field-input,
.app-shell .staff-form-grid select.field-input {
    min-height: 2.55rem;
}

.app-shell .staff-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.app-shell .staff-capability-bar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.15rem 0 0;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.app-shell .staff-cap-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.app-shell .staff-cap-head small {
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.app-shell .staff-cap-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.55rem;
}

.app-shell .staff-cap-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.55rem;
    row-gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1.5px solid var(--input-border, var(--bg-alt));
    background: var(--card, #fff);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.app-shell .staff-cap-card input {
    grid-row: 1 / span 2;
    align-self: center;
    width: 1.05rem;
    height: 1.05rem;
}

.app-shell .staff-cap-card-title {
    font-weight: 700;
    font-size: 0.9rem;
}

.app-shell .staff-cap-card-desc {
    grid-column: 2;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
}

.app-shell .staff-cap-card.on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.app-shell .staff-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.3rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.app-shell .staff-segment-btn {
    border: none;
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
}

.app-shell .staff-segment-btn.active {
    background: var(--accent);
    color: #fff;
}

.app-shell .staff-perm-block {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--input-border, var(--bg-alt));
}

.app-shell .staff-preview-input {
    font-weight: 700;
    color: var(--accent);
}

.app-shell .staff-tab-hint {
    margin: 0 0 0.65rem;
    font-size: 0.86rem;
    line-height: 1.45;
}

.app-shell .staff-info-callout {
    margin-top: 0.25rem;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.app-shell .staff-info-callout.warn {
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}

.app-shell .staff-info-callout p {
    margin: 0.35rem 0 0.65rem;
    font-size: 0.88rem;
    line-height: 1.45;
}

.app-shell .status-msg.ok { color: #059669; }

.app-shell .staff-editor-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--input-border, var(--bg-alt));
}

.app-shell .staff-foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-inline-start: auto;
}

.app-shell .btn-link-danger {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
}

.app-shell .staff-attach-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.app-shell .staff-attach-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

.app-shell .staff-attach-kind {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
}

.app-shell .staff-category-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 1rem;
}

.app-shell .category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--input-border, var(--bg-alt));
    background: var(--input-bg, var(--bg));
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.app-shell .category-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-1px);
}

.app-shell .category-card strong {
    font-size: 0.95rem;
    color: var(--text);
}

.app-shell .category-card span {
    font-size: 0.82rem;
    color: var(--text-muted, var(--text));
    line-height: 1.45;
}

.app-shell .compact-summary {
    margin-bottom: 0.75rem;
}

.app-shell .payroll-panel .section-title {
    margin: 0;
}

.app-shell .org-map-section {
    margin: 0.5rem 0 1rem;
}

.app-shell .org-hours-panel {
    margin: 0.35rem 0 1.1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--card, #fff) 92%, var(--accent, #b42318) 8%);
}
.app-shell .org-hours-note {
    margin: 0.55rem 0 0.85rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px dashed color-mix(in srgb, var(--accent, #b42318) 35%, var(--border, #e2e8f0));
    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
}
.app-shell .org-hours-note-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    padding: 0.4rem 0.25rem;
}
.app-shell .org-hours-note-chevron {
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #b42318) 12%, transparent);
    color: var(--accent, #b42318);
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 0.18s ease;
}
.app-shell .org-hours-note.is-open .org-hours-note-chevron {
    transform: rotate(180deg);
}
.app-shell .org-hours-note-body {
    padding: 0.15rem 0.2rem 0.55rem;
}
.app-shell .org-hours-note-list {
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}
.app-shell .org-hours-note-list li {
    position: relative;
    margin: 0;
    padding: 0.65rem 0.85rem;
    padding-inline-start: 1.7rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--card, #fff) 92%, var(--accent, #b42318) 8%);
    border: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink, #1e293b);
}
.app-shell .org-hours-note-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.65rem;
    top: 0.85rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--accent, #b42318);
}
.app-shell .org-hours-note-foot {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.4;
}
.app-shell .org-hours-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.55rem 0 0.75rem;
}
.app-shell .org-hours-tabs button {
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card, #fff);
    color: inherit;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
}
.app-shell .org-hours-tabs button.is-on {
    background: var(--ink, #111);
    color: #fff;
    border-color: transparent;
}
.app-shell .org-hours-grid {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.app-shell .org-hours-head,
.app-shell .org-hours-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 1.1fr) 3.2rem minmax(6.5rem, 1fr) minmax(6.5rem, 1fr);
    gap: 0.45rem;
    align-items: center;
}
.app-shell .org-hours-head {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted, #64748b);
    padding: 0 0.15rem 0.2rem;
}
.app-shell .org-hours-row {
    padding: 0.35rem 0.4rem;
    border-radius: 0.45rem;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
}
.app-shell .org-hours-row.is-closed {
    opacity: 0.72;
    background: color-mix(in srgb, var(--border, #e2e8f0) 35%, var(--card, #fff));
}
.app-shell .org-hours-day { font-weight: 650; font-size: 0.9rem; }
.app-shell .org-hours-closed {
    display: grid;
    place-items: center;
    margin: 0;
}

.app-shell .org-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.app-shell .org-map-hint {
    font-size: 0.84rem;
}

.app-shell .org-map-coords {
    margin-inline-start: auto;
    font-size: 0.8rem;
    font-family: ui-monospace, monospace;
    color: var(--accent);
    font-weight: 600;
}

.app-shell .org-map {
    width: 100%;
    height: 320px;
    border-radius: var(--field-radius, 12px);
    border: 1px solid var(--input-border, var(--bg-alt));
    overflow: hidden;
    z-index: 1;
}

.app-shell .org-coords-grid {
    margin-top: 0.75rem;
}

.app-shell .leaflet-container {
    font-family: inherit;
    background: var(--input-bg, #e8eef4);
}

.app-shell .org-map-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.app-shell .org-map-search .field-input {
    flex: 1;
    min-width: 200px;
}

.app-shell .geo-error {
    margin: 0 0 0.5rem;
    color: #f87171;
    font-size: 0.86rem;
}

.app-shell .geo-info {
    margin: 0 0 0.5rem;
    color: var(--accent);
    font-size: 0.86rem;
}

.app-shell .user-link-badge {
    font-weight: 600;
    color: var(--accent);
}

.app-shell .multi-select-search .multi-select-list {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1.5px solid var(--input-border, var(--bg-alt));
    border-radius: var(--field-radius, 12px);
    background: var(--card);
    padding: 0.5rem;
}

.app-shell .multi-select-group-title {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0.25rem;
}

.app-shell .multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.app-shell .selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.app-shell .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-size: 0.82rem;
}

.app-shell .chip-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.app-shell .data-table tr.muted-row,
.app-shell .data-table tr.row-stopped {
  opacity: 0.72;
}
.app-shell .data-table tr.ledger-row-accrual td:nth-child(2) {
  color: #8a5a10;
  font-weight: 750;
}
.app-shell .data-table tr.ledger-row-receipt td:nth-child(2) {
  color: #1f6b3a;
  font-weight: 750;
}
.app-shell .re-tenant-ledger-explain {
  margin: 0.65rem 0 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  background: #eef5fa;
  color: #1f4f6a;
  font-size: 0.84rem;
  line-height: 1.5;
  border: 1px solid rgba(39,96,129,.16);
}
.app-shell .re-tenant-ledger-explain p {
  margin: 0 0 0.45rem;
}
.app-shell .re-tenant-ledger-explain p:last-child {
  margin-bottom: 0;
}
.app-shell .re-tenant-ledger-explain ul {
  margin: 0.2rem 0 0.55rem;
  padding-inline-start: 1.2rem;
}
.app-shell .re-tenant-ledger-explain li {
  margin: 0.15rem 0;
}
.app-shell .data-table tr.row-stopped td:nth-child(4) {
    text-decoration: line-through;
}

/* ?? Compact filter bar (single row) ?? */
.compact-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
    border: 1px solid var(--bg-alt);
    border-radius: 12px;
    /* visible so SearchableSelect panels are not clipped (overflow-x:auto forces y clipping) */
    overflow: visible;
    position: relative;
    z-index: 20;
}
.compact-filter-fields { display: contents; }
.compact-filter-bar.chrome-filter-bar .compact-filter-fields {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--cf-h, 2.35rem);
    flex: 1 1 auto;
    min-width: 0;
}
.compact-filter-trail { margin-inline-start: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.compact-filter-bar.chrome-filter-bar .compact-filter-fields {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.compact-filter-bar.chrome-filter-bar .cf-trail-row,
.compact-filter-bar.chrome-filter-bar .compact-filter-trail.cf-trail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.4rem;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    min-width: 0;
    overflow: visible;
}
.compact-filter-bar.chrome-filter-bar .cf-trail-row .toolbar-icon-group,
.compact-filter-bar.chrome-filter-bar .cf-trail-row .wa-share-chrome {
    flex: 0 0 auto;
}
.compact-filter-bar.chrome-filter-bar .cf-end-cluster {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
    margin-inline-start: 0;
}
.cf-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; margin: 0; }
.cf-input {
    width: auto;
    min-width: 8.5rem;
    max-width: 11rem;
    height: var(--cf-h, 2.35rem);
    min-height: var(--cf-h, 2.35rem);
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
    box-sizing: border-box;
}
.cf-input.cf-wide {
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 22rem;
    width: auto;
}
.cf-btn { white-space: nowrap; }

/* Labeled control chip (seller / cashier / etc.) */
.cf-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    height: var(--cf-h, 2.35rem);
    min-height: var(--cf-h, 2.35rem);
    padding: 0.12rem 0.3rem 0.12rem 0.55rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 18%, transparent);
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--accent, #0078d4) 7%, var(--card, #fff)) 0%,
        var(--card, #fff) 70%
    );
    box-sizing: border-box;
    flex: 0 1 auto;
}
.cf-pair-lab {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--accent, #0078d4) 75%, var(--text, #1f2937));
    white-space: nowrap;
    flex-shrink: 0;
}
.cf-pair-ctrl {
    appearance: none;
    border: 0;
    background: color-mix(in srgb, var(--accent, #0078d4) 6%, transparent);
    color: var(--text, #1f2937);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    min-width: 6.75rem;
    max-width: 10rem;
    height: calc(var(--cf-h, 2.35rem) - 0.4rem);
    padding: 0 0.55rem;
    border-radius: 9px;
    box-sizing: border-box;
    cursor: pointer;
}
.cf-pair-ctrl:focus { outline: 2px solid color-mix(in srgb, var(--accent, #0078d4) 35%, transparent); outline-offset: 1px; }
.cf-pair.cf-pair--wide {
    flex: 1 1 12rem;
    min-width: 11rem;
    max-width: min(100%, 22rem);
}
.cf-pair.cf-pair--wide .searchable-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.cf-pair.cf-pair--wide .searchable-select-trigger.field-input,
.cf-pair.cf-pair--wide .cf-pair-ctrl,
.cf-pair.cf-pair--wide input.cf-pair-ctrl {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.cf-pair .searchable-select-wrap { flex: 1 1 auto; min-width: 0; }
.cf-pair .searchable-select-trigger.field-input {
    height: calc(var(--cf-h, 2.35rem) - 0.4rem);
    min-height: calc(var(--cf-h, 2.35rem) - 0.4rem);
    border: 0;
    background: color-mix(in srgb, var(--accent, #0078d4) 6%, transparent);
    border-radius: 9px;
    box-shadow: none;
    padding: 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 650;
}
.cf-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    height: var(--cf-h, 2.35rem);
    padding: 0 0.65rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 16%, transparent);
    background: var(--card, #fff);
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}
.cf-check input { margin: 0; accent-color: var(--accent, #0078d4); }

/* Wide search chip for report filters */
.cf-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    flex: 1 1 12rem;
    min-width: 11rem;
    max-width: 20rem;
    flex-shrink: 0;
    height: var(--cf-h, 2.35rem);
    min-height: var(--cf-h, 2.35rem);
    padding: 0.12rem 0.7rem 0.12rem 0.55rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 22%, transparent);
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--accent, #0078d4) 10%, var(--card, #fff)) 0%,
        var(--card, #fff) 55%
    );
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 65%, transparent) inset;
    box-sizing: border-box;
}
.compact-filter-bar.chrome-filter-bar.shift-report-filters {
    flex-wrap: wrap;
}
.compact-filter-bar.chrome-filter-bar.shift-report-filters .compact-filter-fields {
    flex-wrap: wrap;
    flex: 1 1 18rem;
}
.compact-filter-bar.chrome-filter-bar.shift-report-filters .cf-search {
    flex: 1 1 12rem;
    min-width: 11rem;
    max-width: 18rem;
}
.compact-filter-bar.chrome-filter-bar.shift-report-filters .cf-pair--wide {
    flex: 1 1 12rem;
    min-width: 11rem;
    max-width: 18rem;
}
.cf-search-ico {
    display: inline-flex;
    color: var(--accent, #0078d4);
    opacity: 0.9;
    flex-shrink: 0;
}
.cf-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text, #1f2937);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0;
    height: 1.4rem;
    line-height: 1.4rem;
}
.cf-search-input:focus { outline: none; }
.cf-search-input::placeholder {
    color: color-mix(in srgb, var(--text, #1f2937) 42%, transparent);
    font-weight: 500;
}

.compact-filter-bar.pos-staff-filters,
.compact-filter-bar.audit-filters {
    --cf-h: 2.4rem;
}
.compact-filter-bar.staff-clearance-filters .cf-search {
    flex: 1 1 8.5rem;
    min-width: 8rem;
    max-width: 13.5rem;
    flex-shrink: 1;
}
.compact-filter-bar.staff-clearance-filters .cf-pair {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.compact-filter-bar.staff-clearance-filters .cf-pair-ctrl {
    min-width: 5.1rem;
    max-width: 7.8rem;
}

/* Invoices أ¢â‚¬â€‌ 2 rows: (search + dates) / (totals + invoice expanded at end) */
.invoice-filter-chrome {
    --cf-h: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.55rem 0 0.85rem;
    padding: 0.55rem 0.65rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 16%, transparent);
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--accent, #0078d4) 6%, var(--card, #fff)) 0%,
        var(--card, #fff) 55%
    );
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset;
    box-sizing: border-box;
}
.invoice-filter-chrome .inv-f-row--main {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.55rem;
    width: 100%;
    min-width: 0;
}
.invoice-filter-chrome .cf-search--invoice {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
}
.invoice-filter-chrome .inv-f-dates {
    justify-self: end;
    flex-shrink: 0;
}
.invoice-filter-chrome .inv-f-row--amt {
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr);
    align-items: center;
    gap: 0.45rem 0.65rem;
    width: 100%;
    min-width: 0;
}
.invoice-amount-range {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-height: var(--cf-h, 2.4rem);
    padding: 0.15rem 0.5rem 0.15rem 0.55rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 16%, transparent);
    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    justify-self: start;
}
.invoice-amount-lab {
    font-size: 0.72rem;
    font-weight: 750;
    color: color-mix(in srgb, var(--text, #1f2937) 68%, transparent);
    white-space: nowrap;
}
.invoice-amount-sep {
    color: color-mix(in srgb, var(--accent, #0078d4) 70%, transparent);
    font-weight: 700;
    opacity: 0.85;
}
.invoice-filter-chrome .cf-pair--amt {
    flex: 0 0 auto;
    min-width: 0;
}
.invoice-filter-chrome .cf-pair--amt .cf-pair-ctrl {
    width: 6.25rem;
    min-width: 5rem;
    max-width: 8rem;
}
.invoice-filter-chrome .inv-f-row--amt .cf-pair--invoice {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
}
.invoice-filter-chrome .inv-f-row--amt .cf-pair--invoice .cf-pair-ctrl {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.invoice-filter-chrome .cdf-accent {
    width: 0.22rem;
    min-height: 1.35rem;
    align-self: center;
    height: 1.45rem;
}
@media (max-width: 900px) {
    .invoice-filter-chrome .inv-f-row--main {
        grid-template-columns: 1fr;
    }
    .invoice-filter-chrome .inv-f-dates {
        justify-self: stretch;
        width: 100%;
    }
    .invoice-filter-chrome .inv-f-row--amt {
        grid-template-columns: 1fr;
    }
    .invoice-amount-range {
        width: 100%;
        flex-wrap: wrap;
    }
}
.compact-filter-bar.chrome-filter-bar.pos-staff-filters,
.compact-filter-bar.chrome-filter-bar.audit-filters {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

/* SearchableSelect inside compact filters ? size the WRAP, not a 100% stretch */
.compact-filter-bar .searchable-select-wrap {
    width: auto;
    flex: 0 1 18rem;
    min-width: 14rem;
    max-width: 22rem;
    position: relative;
    z-index: 30;
}
.compact-filter-bar .searchable-select-trigger.field-input,
.compact-filter-bar button.searchable-select-trigger.field-input {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 2.35rem;
    padding-block: 0.35rem;
    font-size: 0.86rem;
}
.compact-filter-bar .searchable-select-panel {
    inset-inline: auto;
    inset-inline-start: 0;
    width: max(100%, 18rem);
    min-width: 18rem;
    max-width: min(92vw, 28rem);
    z-index: 700;
}

.app-shell .item-cost-toolbar {
    flex-wrap: wrap;
    overflow: visible;
    margin-bottom: 0.85rem;
    gap: 0.55rem 0.85rem;
}
.app-shell .item-cost-toolbar .toolbar-icon-group {
    margin-inline-start: 0;
}
.app-shell .item-cost-toolbar .related-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-inline-start: auto;
}

/* Hint icon — bubble is body #zad-hint-tip (JS), never in-flow (sidebar stacking). */
.hint-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    z-index: 5;
    vertical-align: middle;
    overflow: visible !important;
}
.hint-tip-label { font-weight: 600; font-size: 0.82rem; color: var(--text-muted); }
.hint-tip-btn {
    position: relative;
    overflow: visible;
    border: 1px solid #93c5fd;
    background: #dbeafe;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; cursor: help; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    z-index: 6; pointer-events: auto;
}
.hint-tip-btn:hover,
.hint-tip-btn:focus-visible,
.hint-tip-btn.is-open {
    background: #bfdbfe;
    border-color: #3b82f6;
    outline: none;
}
.hint-tip-icon { font-size: 0.7rem; font-weight: 800; color: #2563eb; font-style: italic; line-height: 1; }
.hint-tip-pop { display: none !important; } /* legacy — do not use in-flow tips */

.data-table thead th .hint-tip,
.report-table thead th .hint-tip {
    white-space: normal;
    max-width: 100%;
}

/* Prevent scroll/overflow parents from clipping hint bubbles */
.page-body .hint-tip,
.panel-card .hint-tip,
.settings-check-row .hint-tip,
.field-label .hint-tip,
.audit-screen-card .hint-tip,
.settings-drawer .hint-tip {
    overflow: visible !important;
    z-index: 50;
}
/* Hint parents can overflow أ¢â‚¬â€‌ POS panes / picker keep scroll containment */
.page-body .panel-card:not(.stock-count-picker):not(.pos-left):not(.pos-right),
.page-body .audit-screen-card,
.page-body .settings-check-row,
.page-body .audit-actions-grid,
.page-body .field-group,
.page-body .field-label {
    overflow: visible !important;
}
.page-body .pos-left.panel-card {
    overflow: visible !important;
}
.page-body .pos-right.panel-card {
    overflow: visible !important;
}
.page-body .stock-count-picker.panel-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 9rem);
    overflow: hidden !important;
}

/* Body-mounted floating tip — above sidebar (z=100) and top-bar.
   Do NOT use inset:!important — it overrides JS left/top and parks the tip off-screen. */
.hint-tip-floating,
#zad-hint-tip {
    position: fixed !important;
    right: auto;
    bottom: auto;
    /* Above RE/app modals (re-modal-backdrop uses 100000) */
    z-index: 200000 !important;
    min-width: 11rem;
    max-width: min(20rem, calc(100vw - 2rem));
    width: max-content;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #0b1220 !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    text-align: start;
    white-space: normal;
    pointer-events: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: none !important;
    animation: none !important;
    -webkit-font-smoothing: antialiased;
}
.hint-tip-floating.is-visible,
#zad-hint-tip.is-visible {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.hint-tip-floating.is-leaving,
#zad-hint-tip.is-leaving {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.smart-table-tooltip {
    position: fixed !important;
    right: auto;
    bottom: auto;
    z-index: 200000 !important;
    min-width: 0;
    max-width: min(26rem, calc(100vw - 2rem));
    width: max-content;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 500;
    color: #fff !important;
    background: #1e3a8a !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.32);
    text-align: start;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
.smart-table-tooltip.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}
.smart-table-tooltip.is-leaving {
    opacity: 0;
    visibility: hidden;
}
.smart-table-tooltip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow-x, 50%);
    top: 100%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    transform: translateX(-50%) rotate(45deg);
    background: #1e3a8a;
}
.smart-table-tooltip.tip-below::after {
    top: 0;
    margin-top: -5px;
}

/* Payroll confirm: never show floating smart tip — it covers the numbers. */
body:has(.payroll-preview-lux) .smart-table-tooltip,
body:has(.payroll-preview-lux) .hint-tip-floating,
body:has(.payroll-preview-lux) #zad-hint-tip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Collapsed sidebar nav tip ? hug text, animated */
.nav-rail-tooltip {
    position: fixed;
    z-index: 10090;
    left: 0;
    top: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 6rem));
    min-width: 0;
    pointer-events: none;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #2563eb) 92%, #0f172a),
        color-mix(in srgb, var(--accent, #2563eb) 70%, #1e293b));
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.28),
        0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px) scale(0.94);
    transition:
        opacity 0.16s ease,
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.16s ease;
}
.nav-rail-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: navTipPop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nav-rail-tooltip::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: color-mix(in srgb, var(--accent, #2563eb) 88%, #0f172a);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    transform: translateY(-50%) rotate(45deg);
    z-index: -1;
}
/* LTR: tip to the right of rail ? arrow on left */
html:not([dir="rtl"]) .nav-rail-tooltip::before {
    left: -4px;
    border-right: none;
    border-top: none;
}
/* RTL: tip to the left of rail ? arrow on right */
html[dir="rtl"] .nav-rail-tooltip::before {
    right: -4px;
    border-left: none;
    border-bottom: none;
}
@keyframes navTipPop {
    from { opacity: 0; transform: translateY(4px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.report-intro { margin: 0 0 0.75rem; max-width: 52rem; line-height: 1.55; }
.report-intro.tiny { font-size: 0.86rem; margin-top: -0.35rem; opacity: 0.92; }

/* Report KPI rows ? full available width, equal cards (original report look) */
.app-shell .summary-cards,
.app-shell .summary-cards.compact-summary {
    width: 100%;
}
.app-shell .summary-cards.summary-cards-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.app-shell .summary-cards.summary-cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Supply-chain report pages */
.sc-report-page,
.sc-page-shell {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
}
.sc-kpi-grid,
.app-shell .summary-cards.sc-kpi-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .sc-kpi-grid,
    .app-shell .summary-cards.sc-kpi-grid,
    .app-shell .summary-cards.summary-cards-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .sc-kpi-grid,
    .app-shell .summary-cards.sc-kpi-grid,
    .app-shell .summary-cards.summary-cards-5,
    .app-shell .summary-cards.summary-cards-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Accounting mappings ? journal examples guide */
.app-shell .code-gen-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.app-shell .code-gen-row .field-input {
    flex: 1;
    min-width: 0;
}
.app-shell .code-gen-btn {
    flex: 0 0 auto;
    min-width: 2.25rem;
    font-size: 1rem;
    line-height: 1;
    padding: 0.45rem 0.55rem;
}
.app-shell .map-guide-head {
    margin-bottom: 1.1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.app-shell .map-guide-head h3 {
    margin: 0 0 0.45rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
}
.app-shell .map-guide-intro {
    margin: 0 0 0.75rem;
    max-width: 54rem;
    line-height: 1.6;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.app-shell .map-guide-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.65rem;
}
.app-shell .map-leg-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    background: var(--bg-alt, var(--card));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.app-shell .map-leg-item.dr {
    border-color: color-mix(in srgb, #0d9488 40%, var(--border, #ccc));
    background: color-mix(in srgb, #0d9488 9%, var(--card));
}
.app-shell .map-leg-item.cr {
    border-color: color-mix(in srgb, #2563eb 40%, var(--border, #ccc));
    background: color-mix(in srgb, #2563eb 9%, var(--card));
}
.app-shell .map-leg-item strong { color: var(--text); }
.app-shell .map-guide-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.app-shell .map-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 980px) {
    .app-shell .map-guide-grid {
        grid-template-columns: 1fr;
    }
}
.app-shell .map-ex-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    background: color-mix(in srgb, var(--bg-alt, var(--card)) 70%, var(--card));
    min-width: 0;
}
.app-shell .map-ex-top {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.app-shell .map-ex-icon {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.app-shell .map-ex-copy {
    min-width: 0;
    flex: 1;
}
.app-shell .map-ex-copy h4 {
    margin: 0 0 0.3rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
}
.app-shell .map-ex-copy p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.app-shell .map-ex-phase {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.app-shell .map-ex-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    background: var(--card, #fff);
}
.app-shell .map-ex-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.84rem;
}
.app-shell .map-ex-table th,
.app-shell .map-ex-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
    vertical-align: middle;
}
.app-shell .map-ex-table tr:last-child td {
    border-bottom: none;
}
.app-shell .map-ex-table thead th {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt, var(--card)));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    text-align: start;
}
.app-shell .map-ex-table .col-account {
    width: auto;
}
.app-shell .map-ex-table .col-dr,
.app-shell .map-ex-table .col-cr {
    width: 5.75rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}
.app-shell .map-ex-table thead .col-dr,
.app-shell .map-ex-table thead .col-cr {
    text-align: end;
}
.app-shell .map-ex-acct {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.app-shell .map-ex-table td.has-amt.dr {
    color: #0f766e;
    background: color-mix(in srgb, #0d9488 7%, transparent);
}
.app-shell .map-ex-table td.has-amt.cr {
    color: #1d4ed8;
    background: color-mix(in srgb, #2563eb 7%, transparent);
}
.app-shell .map-ex-table td.empty {
    color: transparent;
}
.theme-obsidian .app-shell .map-ex-card {
    background: color-mix(in srgb, var(--card) 88%, #fff);
    border-color: rgba(255, 255, 255, 0.1);
}
.theme-obsidian .app-shell .map-ex-table-wrap {
    background: color-mix(in srgb, var(--card) 94%, #000);
    border-color: rgba(255, 255, 255, 0.1);
}
.theme-obsidian .app-shell .map-ex-table td.has-amt.dr { color: #5eead4; }
.theme-obsidian .app-shell .map-ex-table td.has-amt.cr { color: #93c5fd; }

/* Journal voucher detail ? same language as accounting mapping examples */
.app-shell .je-voucher {
    margin-top: 1.15rem;
    padding: 1.1rem 1.2rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    background: color-mix(in srgb, var(--bg-alt, var(--card)) 55%, var(--card));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 6%, transparent);
}
.app-shell .je-voucher-head {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.app-shell .je-voucher-top {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.app-shell .je-voucher-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.2rem;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.app-shell .je-voucher-copy {
    flex: 1;
    min-width: 0;
}
.app-shell .je-voucher-copy h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.01em;
}
.app-shell .je-voucher-copy > p {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.app-shell .je-voucher-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.app-shell .je-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--card);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.app-shell .je-close {
    flex: 0 0 auto;
    min-width: 2.1rem;
    padding: 0.35rem 0.5rem;
}
.app-shell .je-lines-wrap {
    overflow-x: auto;
}
.app-shell .je-lines-table {
    table-layout: auto;
}
.app-shell .je-lines-table .col-line {
    width: 2.5rem;
    text-align: center;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.app-shell .je-lines-table .col-dr,
.app-shell .je-lines-table .col-cr {
    width: 8.75rem;
    min-width: 8.25rem;
}
.app-shell .je-cc,
.app-shell .je-memo {
    display: block;
    font-size: 0.84rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}
.app-shell .je-lines-table tfoot .je-total-row td {
    border-top: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border, #ccc));
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    padding-block: 0.7rem;
}
.app-shell .je-lines-table tfoot .je-total-row td.empty {
    color: transparent;
}
.theme-obsidian .app-shell .je-voucher {
    background: color-mix(in srgb, var(--card) 90%, #fff);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Journal workstation — header / attachments / line narrative / CC % */
.app-shell .je-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 0.85fr);
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
    align-items: start;
}
@media (max-width: 960px) {
    .app-shell .je-head-split { grid-template-columns: 1fr; }
}
.app-shell .je-field-hint {
    margin: 0 0 0.65rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.app-shell .je-head-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem 0.85rem;
    margin-bottom: 0.65rem;
}
.app-shell .je-narr-full {
    display: block;
    width: 100%;
    margin-bottom: 0.65rem;
}
.app-shell .je-narr-area {
    width: 100%;
    min-height: 2.6rem;
    resize: vertical;
    line-height: 1.45;
}
.app-shell .je-line-narr-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}
.app-shell .je-line-narr-stack .form-field,
.app-shell .je-narr-full.form-field {
    width: 100%;
}
.app-shell .je-cc-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: inherit;
    color: inherit;
    font: inherit;
}
.app-shell .je-cc-toggle:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 8px;
}
.app-shell .je-cc-chevron {
    font-size: 0.85rem;
    opacity: 0.7;
    width: 1rem;
}
.app-shell .je-cc-toggle-hint {
    margin-inline-start: auto;
}
.app-shell .je-cc-body {
    padding: 0 0.55rem 0.55rem;
}
.app-shell .je-cc-help { margin: 0 0 0.45rem; }
.app-shell .je-cc-box-actions { margin-bottom: 0.4rem; }
.app-shell .je-cc-box.is-collapsed {
    padding: 0.15rem 0.25rem;
}
.app-shell .je-attach-panel {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border, #ccc));
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.app-shell .je-attach-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.55rem;
}
.app-shell .je-attach-head strong { font-size: 0.92rem; }
.app-shell .je-attach-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.85rem 0.5rem;
    text-align: center;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
}
.app-shell .je-attach-drop.is-disabled { opacity: 0.65; }
.app-shell .je-attach-ico { font-size: 1.35rem; }
.app-shell .je-attach-drop p { margin: 0; font-size: 0.84rem; }
.app-shell .je-attach-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.app-shell .je-attach-list {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.app-shell .je-attach-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: center;
    font-size: 0.84rem;
}
.app-shell .je-line-narrative td {
    border-top: none;
    padding-top: 0.15rem;
    background: transparent;
}
.app-shell .je-line-narr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
}
@media (max-width: 720px) {
    .app-shell .je-line-narr-grid { grid-template-columns: 1fr; }
}
.app-shell .je-fold-box,
.app-shell .je-cc-box {
    margin: 0.15rem 0 0.45rem;
    padding: 0.15rem 0.25rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-alt, var(--card)) 70%, var(--card));
    border: 1px solid var(--border, rgba(0,0,0,0.07));
}
.app-shell .je-fold-box.is-open,
.app-shell .je-cc-box.is-open {
    padding: 0.15rem 0.25rem 0.45rem;
}
.app-shell .je-fold-toggle,
.app-shell .je-cc-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: inherit;
    color: inherit;
    font: inherit;
}
.app-shell .je-fold-toggle:hover,
.app-shell .je-cc-toggle:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 8px;
}
.app-shell .je-fold-toggle strong,
.app-shell .je-cc-toggle strong {
    font-size: 0.88rem;
}
.app-shell .je-fold-preview {
    flex: 1 1 10rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-shell .je-fold-toggle .je-cc-sum {
    flex: 0 0 auto;
    white-space: nowrap;
}
.app-shell .je-cc-chevron {
    font-size: 0.85rem;
    opacity: 0.75;
    width: 1rem;
    flex: 0 0 auto;
}
.app-shell .je-fold-body,
.app-shell .je-cc-body {
    padding: 0 0.55rem 0.35rem;
}
.app-shell .je-cc-help { margin: 0 0 0.45rem; }
.app-shell .je-cc-box-actions { margin-bottom: 0.4rem; }
.app-shell .je-cc-sum {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.app-shell .je-cc-sum.ok { color: #0a7a4d; }
.app-shell .je-cc-sum.bad { color: #b42318; }
.app-shell .je-cc-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.app-shell .je-cc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem auto;
    gap: 0.45rem 0.55rem;
    align-items: center;
}
.app-shell .je-cc-pct {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.app-shell .je-cc-pct-input {
    width: 6.75rem;
    min-width: 6.75rem;
    max-width: 6.75rem;
    flex: 0 0 6.75rem;
    padding-inline: 0.5rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.app-shell .je-cc-pct-sign {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}
.app-shell .je-cc-section {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border, rgba(0,0,0,0.1));
}
.app-shell .je-cc-section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.app-shell .je-cc-section-head strong { font-size: 0.88rem; }
.app-shell .je-alloc-key {
    min-width: 12.5rem;
    max-width: 18rem;
    flex: 1 1 12rem;
}
.app-shell .je-cc-empty { margin: 0.15rem 0 0; }
.app-shell .je-line-details td,
.app-shell .je-line-narrative td,
.app-shell .je-line-cc td {
    border-top: none;
    padding-top: 0;
    background: transparent;
}
.explain-box { margin-bottom: 1rem; }
.explain-box h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.explain-box p { margin: 0; line-height: 1.55; color: var(--text-muted); }
.workflow-strip {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center;
    margin: 0 0 0.85rem; padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border-radius: 10px; font-size: 0.82rem; color: var(--text-muted);
}
.workflow-strip span { color: var(--text); font-weight: 600; }
.workflow-strip .wf-step { opacity: 0.55; }
.workflow-strip .wf-active { opacity: 1; color: var(--accent, #0d6e4f); font-weight: 700; }
.workflow-strip .wf-arrow { opacity: 0.4; font-weight: 400; }
.section-title { margin: 1.1rem 0 0.5rem; font-size: 0.95rem; }
.cell-tip-wrap {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.cell-tip-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}
.cell-tip-wrap.empty .cell-tip-text { min-height: 0; }
.cell-tip-bubble { display: none !important; }
.smart-tip-target { cursor: help; }
.data-table td:has(.cell-tip-wrap),
.report-table td:has(.cell-tip-wrap),
.data-table td.col-name,
.report-table td.col-name {
    max-width: 14rem;
    min-width: 0;
    overflow: hidden;
}

/* overflow visible for tooltip parents (picker / POS panels keep their own scroll containment) */
.fin-kpi, .summary-card, .insight-card,
.panel-card:not(.stock-count-picker):not(.pos-left):not(.pos-right),
.fin-hub, .ref-data-hub,
.audit-screen-card, .settings-check-row, .audit-actions-grid { overflow: visible; }
/* Horizontal only — vertical scroll belongs to .page-body (fixes RTL wheel trap) */
.panel-card .table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

/* ?? Related chips ?? */
.related-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem; }
.related-label { font-size: 0.8rem; color: var(--text-muted); margin-inline-end: 0.25rem; }
.related-chip {
    display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.55rem;
    border-radius: 999px; font-size: 0.78rem; text-decoration: none;
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text);
}
a.related-chip:hover { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }

/* ?? Financial hub ?? */
.fin-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.fin-kpi {
    padding: 0.85rem 1rem; border-radius: 14px; background: var(--card);
    border: 1px solid var(--bg-alt); animation: finCountIn .5s ease both; animation-delay: calc(var(--d, 0) * 80ms);
}
.fin-kpi strong { display: block; font-size: 1.15rem; margin-top: 0.25rem; }
.fin-kpi.in { border-color: color-mix(in srgb, #2e7d32 30%, transparent); }
.fin-kpi.out { border-color: color-mix(in srgb, #c62828 25%, transparent); }
.fin-kpi.good strong { color: #2e7d32; }
.fin-kpi.bad strong { color: #c62828; }
.fin-kpi.warn { border-color: color-mix(in srgb, #f57c00 30%, transparent); }
@keyframes finCountIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.live-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 0.2rem 0.55rem; cursor: pointer; font-family: inherit; }
.live-badge.on { color: #2e7d32; border-color: rgba(76, 175, 80, 0.35); background: rgba(76, 175, 80, 0.08); }
.live-dot, .live-dot-inline {
    width: 8px; height: 8px; border-radius: 50%; background: #ccc; display: inline-block;
}
.live-badge.on .live-dot, .live-dot-inline,
.dash-live-badge.on .live-dot { background: #4caf50; animation: livePulse 1.5s infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.live-feed { list-style: none; padding: 0; margin: 0; }
.live-feed.compact .live-item { grid-template-columns: 5rem 1fr auto; }
.live-item {
    display: grid; grid-template-columns: 5.5rem 1fr auto auto auto; gap: 0.5rem; align-items: center;
    padding: 0.55rem 0; border-bottom: 1px solid var(--bg-alt); font-size: 0.85rem;
    animation: slideIn .35s ease both;
}
.live-item.in .live-amount { color: #2e7d32; }
.live-item.out .live-amount { color: #c62828; }
.live-type { font-weight: 600; font-size: 0.78rem; color: var(--text-muted); }
.live-party { display: block; color: var(--text-muted); font-size: 0.75rem; }
.live-link { text-decoration: none; opacity: .7; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.insight-panel { margin-bottom: 1rem; }
.insight-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.65rem; }
.insight-card {
    display: flex; gap: 0.6rem; padding: 0.75rem; border-radius: 12px;
    background: var(--card); border: 1px solid var(--bg-alt); font-size: 0.85rem;
}
.insight-card.good { border-color: color-mix(in srgb, #2e7d32 35%, transparent); background: color-mix(in srgb, #2e7d32 6%, var(--card)); }
.insight-card.bad { border-color: color-mix(in srgb, #c62828 35%, transparent); background: color-mix(in srgb, #c62828 6%, var(--card)); }
.insight-card.warn { border-color: color-mix(in srgb, #f57c00 35%, transparent); }
.insight-card p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.8rem; }
.insight-icon { font-size: 1.1rem; font-weight: 700; }

.ref-layout { display: flex; flex-direction: column; gap: 0.65rem; }
.ref-nav-card { padding: 0.65rem 0.75rem !important; }
.ref-section-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.5rem; }
.ref-section-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem; border-radius: 10px;
    border: 1px solid var(--bg-alt); background: var(--card);
    cursor: pointer; font-size: 0.82rem; font-weight: 600;
    color: var(--text-muted); transition: all .15s;
}
.ref-section-tab:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
.ref-section-tab.active {
    color: var(--accent); border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}
.ref-section-icon { font-size: 1rem; line-height: 1; }
.ref-divider { height: 1px; background: var(--bg-alt); margin: 0.35rem 0 0.5rem; }
.ref-item-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ref-item-tab {
    padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem;
    border: 1px solid transparent; background: color-mix(in srgb, var(--accent) 5%, var(--card));
    cursor: pointer; color: var(--text); transition: all .12s;
}
.ref-item-tab:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ref-item-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.ref-content-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.65rem; padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--bg-alt);
}
.ref-content-title { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--text); }
.ref-usage-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.ref-usage-link {
    color: var(--accent); font-weight: 600; text-decoration: none;
    padding: 0.1rem 0.45rem; border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ref-data-table .col-code { width: 5rem; }
.ref-data-table .col-num { width: 4.5rem; text-align: center; }
.ref-data-table .col-actions { width: 8.5rem; text-align: end; white-space: nowrap; }
.code-badge {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 6px;
    font-family: ui-monospace, monospace; font-size: 0.78rem;
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    border: 1px solid var(--bg-alt);
}
.ref-map-panel { margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px dashed var(--bg-alt); }
.ref-map-title { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.45rem; }
.ref-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.35rem; }
.ref-map-item {
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.55rem;
    border-radius: 8px; border: 1px solid var(--bg-alt); text-decoration: none; color: var(--text);
    font-size: 0.75rem; cursor: pointer; background: var(--card);
}
.ref-map-item.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.ref-map-item strong { font-size: 0.8rem; }
.ref-map-section { color: var(--text-muted); font-size: 0.68rem; }
.form-grid-sized { align-items: start; }
.field-size-md { min-width: 0; }
.field-size-wide { grid-column: span 2; min-width: 0; }
.field-size-code { max-width: 7rem; }
.field-size-num { max-width: 6rem; }
.field-input--code { max-width: 6rem; font-family: ui-monospace, monospace; text-align: center; }
.field-input--num { max-width: 5.5rem; text-align: center; }
.field-label { display: inline-flex; align-items: center; gap: 0.25rem; }
.data-table thead th {
    font-size: 0.78rem; font-weight: 700;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 20%, var(--bg-alt));
}

.field-input--date { width: auto !important; max-width: 10.25rem; min-width: 9rem; font-size: 0.82rem; }

/* Purchase line cards ? compact collapsible */
.purchase-lines-advanced {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.purchase-line-card {
    display: block;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--bg-alt));
    border-radius: 12px;
    padding: 0.45rem 0.5rem;
    margin-bottom: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 7%, var(--card)),
            var(--card) 42%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}
.purchase-line-card--compact {
    padding: 0.42rem 0.48rem;
}
.purchase-line-card + .purchase-line-card {
    margin-top: 0.12rem;
}
.purchase-compact-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.purchase-line-top {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.purchase-line-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 0 auto;
}
.purchase-line-top .purchase-line-actions {
    margin-inline-start: 0.1rem;
}
.purchase-line-badge {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--bg-alt));
}
.purchase-line-name {
    flex: 1;
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.purchase-line-total {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--magenta);
    white-space: nowrap;
    flex-shrink: 0;
}
.purchase-line-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    min-width: 0;
    padding: 0.28rem 0.3rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-alt) 55%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--bg-alt));
    --purchase-ctrl-h: 2.2rem;
    box-sizing: border-box;
    overflow: visible;
}
.purchase-line-bar > * {
    align-self: center;
}
.purchase-unit-select {
    width: auto;
    min-width: 4.25rem;
    max-width: 6.5rem;
    min-height: var(--purchase-ctrl-h);
    height: var(--purchase-ctrl-h);
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 650;
    box-sizing: border-box;
    flex: 0 1 auto;
}
.purchase-expiry-input {
    flex: 1 1 6.25rem;
    min-width: 5.75rem;
    max-width: 8.75rem;
    min-height: var(--purchase-ctrl-h);
    height: var(--purchase-ctrl-h);
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bg-alt));
    border-radius: 8px;
    background: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
    line-height: 1.2;
    box-sizing: border-box;
}
.purchase-mini-date {
    flex: 1 1 5.8rem;
    min-width: 5.2rem;
    max-width: 6.6rem;
    padding: 0.14rem 0.22rem;
    font-size: 0.66rem;
    border: 1px solid var(--bg-alt);
    border-radius: 7px;
    background: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
    min-height: 22px;
}
.purchase-collapse-panel {
    margin-top: 0.4rem;
    padding: 0.55rem 0.45rem 0.45rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--bg-alt));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
    border-radius: 0 0 10px 10px;
}
.purchase-lot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem;
    align-items: end;
}
.purchase-adj-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(4.5rem, 5.5rem) minmax(0, 1.15fr) minmax(4.5rem, 5.5rem);
    gap: 0.45rem;
    align-items: end;
}
.purchase-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 5.5rem);
    gap: 0.45rem 0.4rem;
    align-items: end;
}
.purchase-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
    margin: 0;
}
.purchase-detail-field > span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--label-color, var(--magenta));
    line-height: 1.2;
}
.purchase-detail-field--full {
    grid-column: 1 / -1;
}
.purchase-lot-barcode-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}
.purchase-lot-barcode-row .field-input {
    flex: 1;
    min-width: 0;
}
.purchase-lot-regen {
    flex: 0 0 auto;
    min-width: 2.2rem;
    height: 2.35rem;
    padding-inline: 0.45rem;
}
.purchase-detail-field--type {
    grid-column: 1;
}
.purchase-detail-field--val {
    grid-column: 2;
}
.purchase-detail-input {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bg-alt));
    border-radius: 8px;
    background: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
    line-height: 1.25;
}
.purchase-detail-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.purchase-detail-val {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .app-shell select.purchase-detail-input {
    background-position: left 0.55rem center;
    padding-inline-start: 0.55rem;
    padding-inline-end: 1.85rem;
}
html[dir="ltr"] .app-shell select.purchase-detail-input {
    background-position: right 0.55rem center;
    padding-inline-end: 1.85rem;
}

/* legacy mini fields kept for any remaining uses */
.purchase-meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.purchase-meta-row .field-label-inline {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--label-color, var(--magenta));
}
.purchase-batch-input {
    width: 100%;
    min-height: 28px;
    padding: 0.25rem 0.45rem;
    font-size: 0.78rem;
    border: 1px solid var(--bg-alt);
    border-radius: 7px;
    background: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
}
.purchase-pair-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.4rem;
    gap: 0.18rem;
    align-items: center;
}
.purchase-mini-field--type { min-width: 0; }
.purchase-mini-field--val {
    text-align: center;
    font-weight: 600;
}
.purchase-mini-field--val:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.purchase-qty-touch {
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--bg-alt));
    border-radius: 8px;
    padding: 0 0.1rem;
    background: var(--card);
    gap: 0.1rem;
    flex-shrink: 0;
    height: var(--purchase-ctrl-h, 2.2rem);
    min-height: var(--purchase-ctrl-h, 2.2rem);
    align-items: center;
    display: inline-flex;
    box-sizing: border-box;
    overflow: hidden;
}
.purchase-qty-btn {
    width: 1.75rem !important;
    height: calc(var(--purchase-ctrl-h, 2.2rem) - 0.2rem) !important;
    min-height: 0 !important;
    font-size: 0.95rem !important;
    border-radius: 6px !important;
    flex: 0 0 auto;
}
.purchase-qty-input {
    width: 2.85rem;
    min-width: 2.5rem;
    height: calc(var(--purchase-ctrl-h, 2.2rem) - 0.35rem);
    border: 0;
    background: transparent;
    color: var(--input-text, var(--text));
    text-align: center;
    font-size: 0.84rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
}
.purchase-qty-input::-webkit-outer-spin-button,
.purchase-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.purchase-qty-touch span {
    min-width: 1.55rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
}
.purchase-mini-input {
    width: 3.6rem;
    min-width: 0;
    flex-shrink: 0;
    padding: 0.16rem 0.28rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--bg-alt);
    border-radius: 7px;
    background: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
    min-height: 22px;
}
.purchase-mini-chip {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0;
    border-radius: 8px;
    background: var(--bg-alt);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: help;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--purchase-ctrl-h, 2.15rem);
    height: var(--purchase-ctrl-h, 2.15rem);
    padding-inline: 0.55rem;
}
.purchase-unit-chip {
    min-width: 3.4rem;
}
.purchase-margin-chip {
    min-width: 3.2rem;
}
.purchase-mini-chip.margin-good { color: #2a9d8f; background: color-mix(in srgb, #2a9d8f 14%, var(--card)); }
.purchase-mini-chip.margin-ok { color: #c9a227; background: color-mix(in srgb, #e9c46a 16%, var(--card)); }
.purchase-mini-chip.margin-low { color: #e76f51; background: color-mix(in srgb, #e76f51 14%, var(--card)); }
.purchase-expand-btn {
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bg-alt));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}
.purchase-expand-btn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.purchase-expand-btn.is-open { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.purchase-expand-icon {
    display: block;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    color: inherit;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent currentColor;
}
html[dir="rtl"] .purchase-expand-icon,
[dir="rtl"] .purchase-expand-icon {
    border-width: 5px 7px 5px 0;
    border-color: transparent currentColor transparent transparent;
}
.purchase-expand-btn.is-open .purchase-expand-icon,
html[dir="rtl"] .purchase-expand-btn.is-open .purchase-expand-icon,
[dir="rtl"] .purchase-expand-btn.is-open .purchase-expand-icon {
    border-width: 7px 5px 0 5px;
    border-color: currentColor transparent transparent transparent;
}
.data-table th.col-expand,
.data-table td.col-expand,
.report-table th.col-expand,
.report-table td.col-expand {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    overflow: visible;
    padding-inline: 0.35rem !important;
    white-space: nowrap;
}
.data-table td.col-expand-id,
.report-table td.col-expand-id {
    overflow: visible;
    min-width: 9.5rem;
    white-space: nowrap;
}
.row-expand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-width: 0;
}
.row-expand-wrap .cell-tip-wrap {
    min-width: 0;
    flex: 1 1 auto;
}
.purchase-remove {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.purchase-mini-field {
    min-width: 0;
    width: 100%;
    padding: 0.16rem 0.3rem;
    font-size: 0.7rem;
    border: 1px solid var(--bg-alt);
    border-radius: 7px;
    background: var(--input-bg, var(--card));
    color: var(--input-text, var(--text));
    min-height: 24px;
    line-height: 1.2;
}
.purchase-mini-field--date { font-size: 0.68rem; }

html[dir="rtl"] .purchase-line-bar { padding-inline-start: 0.3rem; padding-inline-end: 0.3rem; }
html[dir="rtl"] .purchase-collapse-panel { padding-inline-start: 0.45rem; padding-inline-end: 0.45rem; }
html[dir="rtl"] .app-shell select.purchase-mini-field {
    background-position: left 0.45rem center;
    padding-inline-start: 0.3rem;
    padding-inline-end: 1.6rem;
}

@media (max-width: 720px) {
    .purchase-adj-row {
        grid-template-columns: minmax(0, 1fr) minmax(4.25rem, 5rem);
    }
}
@media (max-width: 520px) {
    .purchase-line-bar {
        padding-inline-start: 0.25rem;
        padding-inline-end: 0.25rem;
        flex-wrap: wrap;
    }
    .purchase-line-actions { margin-inline-start: 0; }
    .purchase-collapse-panel { padding-inline-start: 0.25rem; padding-inline-end: 0.25rem; }
    .purchase-lot-row,
    .purchase-adj-row {
        grid-template-columns: 1fr;
    }
    .purchase-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(4.25rem, 5rem); gap: 0.4rem 0.3rem; }
    .purchase-pair-row { grid-template-columns: minmax(0, 1fr) 3rem; }
    .purchase-expiry-input { max-width: none; flex: 1 1 6.5rem; }
}
.p-expiry { font-size: 0.68rem; display: block; margin-top: 0.15rem; }
.inventory-settings-panel { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--bg-alt); }
.smtp-settings-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.whatsapp-setup-guide {
  margin: 0.75rem 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-color, #d8dee6);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2, #f5f7fa) 88%, transparent);
}
.whatsapp-setup-guide > summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.whatsapp-setup-guide > summary::-webkit-details-marker { display: none; }
.whatsapp-setup-guide > summary::before {
  content: "أ¢â€“آ¸";
  display: inline-block;
  margin-inline-end: 0.35rem;
  transition: transform 0.15s ease;
}
.whatsapp-setup-guide[open] > summary::before { transform: rotate(90deg); }
.whatsapp-setup-steps {
  margin: 0.65rem 0 0.5rem;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: 0.4rem;
  line-height: 1.45;
  font-size: 0.92rem;
}
.whatsapp-setup-note {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.86rem;
  line-height: 1.4;
}

.settings-subhead {
    margin: 0.85rem 0 0.15rem;
    font-size: 0.95rem;
    color: var(--accent);
    grid-column: 1 / -1;
}
.badge-weighed {
    display: inline-block;
    margin-inline-start: 0.35rem;
    font-size: 0.85rem;
}
.scale-label-hint { margin: 0.35rem 0 0.65rem; font-size: 0.85rem; }
.row-weighed td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lbl-weight {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent);
}
.pos-scale-panel {
    margin: 0.4rem 0 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--panel-border, #e5e7eb));
    background: color-mix(in srgb, var(--accent) 5%, var(--card, #fff));
}
.pos-scale-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}
.pos-scale-readout {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    margin-bottom: 0.55rem;
}
.pos-scale-readout.is-stable { border-style: solid; border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.pos-scale-kg { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-scale-unit { color: var(--text-muted); font-weight: 600; }
.pos-scale-state { margin-inline-start: auto; font-size: 0.75rem; font-weight: 700; color: var(--accent); }
.pos-scale-actions {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr auto;
    gap: 0.5rem;
    align-items: end;
}
@media (max-width: 700px) {
    .pos-scale-actions { grid-template-columns: 1fr; }
}
.pos-scale-msg { margin: 0.35rem 0 0; font-size: 0.8rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; }
.weighed-item-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.35rem;
    width: 100%;
}
.weighed-item-check input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}
.weighed-item-check span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.4;
    color: color-mix(in srgb, var(--accent) 45%, var(--text));
}
.inventory-settings-panel .pos-mode-hint {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: -0.15rem 0 0.15rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    color: color-mix(in srgb, var(--accent) 55%, var(--text));
}
.expiry-stats-mini { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.65rem 0; }
.stat-pill { padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.stat-pill.danger { background: color-mix(in srgb, #e63946 18%, var(--card)); color: #e63946; }
.stat-pill.warn { background: color-mix(in srgb, #f4a261 18%, var(--card)); color: #f4a261; }
.stat-pill.info { background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); }
.expiry-samples h4 { font-size: 0.88rem; margin: 0.45rem 0 0.2rem; }
.expiry-samples-hint {
    font-size: 0.78rem !important;
    margin: 0 0 0.45rem !important;
    line-height: 1.4;
}
.expiry-sample-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--bg-alt); }
.expiry-sample-row.expired { color: #e63946; }
.expiry-sample-row.critical { color: #f4a261; }
.party-hero {
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bg-alt));
    background:
        radial-gradient(1200px 120px at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card));
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}
.party-hero-main { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; }
.party-avatar {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent) 18%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--bg-alt));
}
.party-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.party-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.party-name { font-size: 1.05rem; }
.party-hero-action {
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}
.party-kind {
    font-size: 0.72rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--bg-alt);
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    color: var(--text);
}

/* Employee toolbar & modals */
.staff-toolbar { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.65rem; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.staff-actions-divider { width: 1px; height: 1.5rem; background: var(--bg-alt); margin: 0 0.15rem; }
.btn-action-primary { font-weight: 700; }
.btn-action-link { border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); }
.btn-action-factory { font-size: 0.82rem; }
.modal-card.modal-add { border-top: 3px solid #2e7d32; }
.modal-card.modal-edit { border-top: 3px solid var(--accent); }
.modal-card.modal-add .wizard-steps { margin: 0.5rem 0 0.75rem; }
.modal-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.35rem; }
.modal-badge.add { background: color-mix(in srgb, #2e7d32 18%, transparent); color: #2e7d32; }
.modal-badge.edit { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* Mini charts */
.mini-chart { padding: 0.65rem; border-radius: 12px; background: var(--card); border: 1px solid var(--bg-alt); }
.mini-chart-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-muted); }
.mini-donut-wrap { position: relative; width: 7rem; height: 7rem; margin: 0 auto 0.5rem; }
.mini-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-ring { fill: none; stroke: var(--bg-alt); stroke-width: 4; }
.donut-seg { fill: none; stroke-width: 4; stroke-linecap: round; }
.donut-seg.in { stroke: #2e7d32; }
.donut-seg.out { stroke: #c62828; }
.donut-seg.warn { stroke: #f57c00; }
.donut-seg.accent { stroke: var(--accent); }
.mini-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.72rem; }
.mini-donut-center strong { font-size: 0.85rem; }
.mini-legend { list-style: none; padding: 0; margin: 0; font-size: 0.75rem; }
.mini-legend li { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mini-legend .in .leg-dot { background: #2e7d32; }
.mini-legend .out .leg-dot { background: #c62828; }
.mini-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.mini-bar-row { display: grid; grid-template-columns: 5rem 1fr 4rem; gap: 0.4rem; align-items: center; font-size: 0.75rem; }
.mini-bar-track { height: 8px; background: var(--bg-alt); border-radius: 4px; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); }
.mini-bar-fill.out { background: linear-gradient(90deg, #c62828, #ef5350); }
.mini-bar-fill.in { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.mini-bar-fill.stock { background: linear-gradient(90deg, #00897b, #4db6ac); }
.mini-legend .warn .leg-dot { background: #f57c00; }
@keyframes barGrow { from { width: 0 !important; } }
.animate-bar-grow { animation: barGrow .6s ease both; }
.app-shell .related-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 0.75rem;
}
.app-shell .related-chip-row--inline {
    margin: 0;
    flex: 0 1 auto;
}
.app-shell .report-stat-grid {
    margin-bottom: 1rem;
}
.app-shell .report-stat-grid .stat-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.app-shell .report-stat-grid .stat-value {
    font-variant-numeric: tabular-nums;
}
.app-shell .stat-meter {
    display: block;
    margin-top: 0.65rem;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    overflow: hidden;
}
.app-shell .stat-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4361ee, #4cc9f0);
    transition: width 0.45s ease;
}
.app-shell .stat-meter.theo > span {
    background: linear-gradient(90deg, #7209b7, #b5179e);
}
.app-shell .stat-meter.var > span {
    background: linear-gradient(90deg, #2d6a4f, #52b788);
}
.app-shell .stat-meter.waste > span {
    background: linear-gradient(90deg, #ea580c, #f59e0b);
}
.app-shell .stat-calc {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted, #667);
    line-height: 1.35;
}
.app-shell .stat-card--clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-shell .stat-card--clickable:hover,
.app-shell .stat-card--clickable:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent, #4361ee) 18%, transparent);
    outline: none;
}
.app-shell .stat-value--action {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.dash-kpi-overlay {
    z-index: 9200;
    align-items: center;
    justify-content: center;
}
.dash-kpi-modal {
    width: min(720px, 96vw);
    max-height: min(88vh, 900px);
    overflow: auto;
    padding: 1.1rem 1.2rem 1.25rem;
    margin: auto;
}
.dash-kpi-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}
.dash-kpi-head h3 { margin: 0; font-size: 1.15rem; }
.dash-kpi-total {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #4361ee) 8%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #4361ee) 18%, transparent);
    margin-bottom: 0.85rem;
}
.dash-kpi-total strong {
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
}
.dash-kpi-explain {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: color-mix(in srgb, #0f766e 7%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, #0f766e 18%, transparent);
    font-size: 0.9rem;
    line-height: 1.55;
}
.dash-kpi-explain p { margin: 0.35rem 0 0; }
.dash-kpi-formula {
    color: var(--muted, #556);
    font-size: 0.84rem !important;
}
.dash-kpi-lines .row-link { cursor: pointer; }
.dash-kpi-lines .row-link:hover { background: color-mix(in srgb, var(--accent, #4361ee) 6%, transparent); }
.dash-kpi-modal .row-total td { font-weight: 700; border-top: 1px solid var(--border, #dde3ea); }
.dash-kpi-modal .num { text-align: end; font-variant-numeric: tabular-nums; }
.app-shell .dash-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 80%, var(--bg-alt));
    border: 1px solid var(--border, rgba(0,0,0,.08));
}
.app-shell .dash-live-badge.on {
    color: #2e7d32;
    border-color: rgba(76, 175, 80, 0.35);
    background: rgba(76, 175, 80, 0.08);
}
.app-shell .dash-live-badge.on .live-dot {
    background: #4caf50;
    animation: livePulse 1.5s infinite;
}
.app-shell .dash-calc-banner {
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.85rem;
}
.app-shell .dash-calc-banner strong { color: var(--text); }
.app-shell .dash-calc-text { flex: 1 1 14rem; min-width: 0; }
.app-shell .report-explain-banner { margin: 0 0 0.85rem; }
.aging-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.aging-summary-caption { margin: -0.35rem 0 0.85rem; }
.report-summary .hint-tip-label,
.report-table thead th .hint-tip-label {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}
.app-shell .dash-calc-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.app-shell .mini-trend-chart {
    background: var(--card);
    border-radius: var(--radius-lg, 14px);
    padding: 1rem 1.1rem;
    border: 1px solid var(--border, rgba(0,0,0,.06));
    box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.04));
    min-width: 0;
}
.app-shell .mini-trend-empty { margin: 1rem 0; text-align: center; }
.app-shell .fin-hub .stat-grid.dash-stats-4,
.app-shell .report-stat-grid.dash-stats-4 {
    margin-bottom: 1rem;
}
.app-shell .acc-hub-kpis {
    margin-bottom: 1rem;
}
.app-shell .severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
}
.app-shell .severity-badge.sev-ok {
    color: #166534;
    background: color-mix(in srgb, #22c55e 16%, var(--card));
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}
.app-shell .severity-badge.sev-warn {
    color: #92400e;
    background: color-mix(in srgb, #f59e0b 18%, var(--card));
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
}
.app-shell .severity-badge.sev-critical {
    color: #991b1b;
    background: color-mix(in srgb, #ef4444 16%, var(--card));
    border: 1px solid color-mix(in srgb, #ef4444 40%, transparent);
}
.app-shell .age-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.theme-obsidian .app-shell .severity-badge.sev-ok { color: #86efac; }
.theme-obsidian .app-shell .severity-badge.sev-warn { color: #fcd34d; }
.theme-obsidian .app-shell .severity-badge.sev-critical { color: #fca5a5; }

/* Page header spacing (panel padding comes from pos-theme.css ? keep original look) */
.page-header-wrap { margin-bottom: 0.4rem; }
.page-header-wrap:not(:has(*)) { display: none; margin: 0; }
.invoice-search .form-grid { display: contents; }
.field-with-add { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.45rem; }
.field-with-add .field-input, .field-with-add select { flex: 1 1 12rem; min-width: 0; }
.compact-toolbar-row .compact-filter-bar { flex: 1; margin-bottom: 0; }

.ref-group-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
.ref-group-tab {
    padding: 0.45rem 0.75rem; border-radius: 10px; border: 1px solid var(--bg-alt);
    background: var(--card); cursor: pointer; text-align: start; font-size: 0.82rem;
}
.ref-group-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.ref-group-tab small { display: block; color: var(--text-muted); font-size: 0.72rem; }

.quick-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; }
.quick-report-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem;
    border-radius: 12px; text-decoration: none; color: var(--text);
    border: 1px solid var(--bg-alt); background: var(--card); font-size: 0.8rem; text-align: center;
}
.quick-report-card:hover { border-color: var(--accent); }
.quick-report-card span:first-child { font-size: 1.4rem; }

.factory-dash .factory-charts { margin-top: 0.85rem; }
.factory-dash .fin-charts-row.factory-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.85rem;
}
.factory-dash .factory-guide {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.factory-dash .factory-guide-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}
.factory-dash .factory-guide-intro {
    margin: 0 0 0.75rem;
    font-size: 0.86rem;
    line-height: 1.5;
}
.factory-dash .factory-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 0.65rem;
}
.factory-dash .factory-guide-card {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border, rgba(0,0,0,.06));
}
.factory-dash .factory-guide-card strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}
.factory-dash .factory-guide-card p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.factory-dash .factory-updated {
    align-self: center;
    white-space: nowrap;
}
.factory-dash .factory-insights {
    margin-bottom: 0.85rem;
}
.factory-dash .factory-insights-intro {
    margin: -0.15rem 0 0.65rem;
    line-height: 1.45;
}
.factory-dash .factory-insight-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.factory-dash .factory-insight {
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0,0,0,.08));
    background: color-mix(in srgb, var(--card) 92%, transparent);
}
.factory-dash .factory-insight.tone-ok {
    border-color: color-mix(in srgb, #22c55e 35%, transparent);
    background: color-mix(in srgb, #22c55e 7%, var(--card));
}
.factory-dash .factory-insight.tone-warn {
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
    background: color-mix(in srgb, #f59e0b 8%, var(--card));
}
.factory-dash .factory-insight.tone-critical {
    border-color: color-mix(in srgb, #ef4444 40%, transparent);
    background: color-mix(in srgb, #ef4444 8%, var(--card));
}
.factory-dash .factory-insight-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.35rem;
}
.factory-dash .factory-insight-title {
    font-size: 0.92rem;
}
.factory-dash .factory-insight-meaning {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text);
}
.factory-dash .factory-insight-action {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.factory-dash .factory-insight-action span {
    font-weight: 700;
    color: var(--text);
}
.factory-dash .factory-insight-nums {
    margin: 0.35rem 0 0;
    font-variant-numeric: tabular-nums;
}
.return-create-card .return-path-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.55rem;
}
.return-path-tab {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: start;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0,0,0,.08));
    background: var(--card);
    cursor: pointer;
    color: var(--text);
}
.return-path-tab strong { font-size: 0.88rem; }
.return-path-tab small { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; }
.return-path-tab.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.return-path-tab:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.factory-dash .factory-combo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0.35rem 0 0.65rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.factory-dash .factory-combo-legend i {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    margin-inline-end: 0.3rem;
    vertical-align: -0.05rem;
}
.factory-dash .combo-exp i { background: #c62828; }
.factory-dash .combo-wage i { background: #1565c0; }
.factory-dash .combo-mat i { background: #2e7d32; }
.factory-dash .factory-combo-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: end;
    min-height: 8.5rem;
}
.factory-dash .factory-combo-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.factory-dash .factory-combo-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 7rem;
    width: 100%;
}
.factory-dash .combo-bar {
    width: 28%;
    max-width: 0.85rem;
    min-height: 2px;
    border-radius: 4px 4px 2px 2px;
    transition: height .35s ease;
}
.factory-dash .combo-bar.exp { background: linear-gradient(180deg, #ef5350, #c62828); }
.factory-dash .combo-bar.wage { background: linear-gradient(180deg, #64b5f6, #1565c0); }
.factory-dash .combo-bar.mat { background: linear-gradient(180deg, #81c784, #2e7d32); }
.factory-dash .factory-combo-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.mini-stack-track {
    display: flex;
    height: 1.15rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border, #ccc) 40%, transparent);
    margin: 0.35rem 0 0.65rem;
}
.mini-stack-seg { height: 100%; min-width: 2px; }
.mini-stack-seg.in { background: linear-gradient(90deg, #43a047, #81c784); }
.mini-stack-seg.out { background: linear-gradient(90deg, #1565c0, #64b5f6); }
.mini-stack-seg.warn { background: linear-gradient(90deg, #ef6c00, #ffb74d); }
.mini-stack-legend em {
    margin-inline-start: 0.35rem;
    font-style: normal;
    color: var(--text-muted);
    font-size: 0.78rem;
}
@media (max-width: 640px) {
    .factory-dash .factory-combo-days { gap: 0.25rem; }
    .factory-dash .factory-combo-bars { height: 5.5rem; }
}
.mini-chart-hint { font-size: 0.72rem; margin: -0.25rem 0 0.5rem; line-height: 1.35; }
.mini-compare-list { display: flex; flex-direction: column; gap: 0.55rem; }
.mini-compare-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.4rem; align-items: start; }
.mini-compare-label { font-size: 0.72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-compare-tracks { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mini-compare-track {
    display: grid; grid-template-columns: 1.1rem 1fr auto; gap: 0.3rem; align-items: center;
}
.mini-compare-tag { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); }
.mini-compare-track .mini-compare-fill {
    height: 0.45rem; border-radius: 999px; background: #90caf9;
}
.mini-compare-fill.actual { background: linear-gradient(90deg, #ef6c00, #ffb74d); }
.mini-compare-fill.standard { background: linear-gradient(90deg, #1565c0, #64b5f6); }
.mini-compare-val { font-size: 0.68rem; white-space: nowrap; }
.mini-compare-legend {
    display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.55rem; font-size: 0.72rem; color: var(--text-muted);
}
.mini-compare-legend i {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-inline-end: 0.3rem; vertical-align: -0.1rem;
}
.mini-compare-legend .actual i { background: #ef6c00; }
.mini-compare-legend .standard i { background: #1565c0; }

.mini-area-meta { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem; }
.mini-area-svg { width: 100%; height: 5.5rem; display: block; }
.mini-area-axis {
    display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem;
}
.bar-chart .bar.bar-material { background: linear-gradient(180deg, #00897b, #4db6ac); }

.cashflow-hero {
    text-align: center; padding: 1.25rem; border-radius: 14px; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.cashflow-hero.positive strong { color: #2e7d32; font-size: 1.6rem; }
.cashflow-hero.negative strong { color: #c62828; font-size: 1.6rem; }
td.amount.in { color: #2e7d32; }
td.amount.out { color: #c62828; }

/* ?? Stock count: wide supplier column + usable native select ?? */
.stock-count-page .stock-count-toolbar {
    margin-bottom: 1rem;
    align-items: end;
}
.stock-count-page .stock-count-mode-tabs {
    margin: 0 0 0.85rem;
}
.stock-count-page .stock-count-ops-bar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(15rem, 0.9fr) minmax(15rem, 0.9fr) auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.9rem;
}
.stock-count-page .stock-count-ops-bar .field-group {
    min-width: 0;
}
.stock-count-page .stock-count-import-group input[type="file"],
.stock-count-page .stock-count-attachment-group input[type="file"] {
    width: 100%;
    max-width: 100%;
}
.stock-count-page .stock-count-ops-actions {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.45rem;
}
.stock-count-page .stock-count-ops-actions .icon-action-btn {
    width: 2.55rem;
    height: 2.55rem;
    font-size: 1.2rem;
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.stock-count-page .stock-count-ops-actions .icon-action-btn:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.24);
    filter: saturate(1.1);
}
.stock-count-page .stock-op-icon.template {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}
.stock-count-page .stock-op-icon.add-all {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.stock-count-page .stock-op-icon.panel-toggle {
    background: linear-gradient(135deg, #10b981, #0f766e);
}
.stock-count-page .stock-op-icon.remove {
    background: linear-gradient(135deg, #ef4444, #be123c);
}
.stock-count-page .stock-count-attach-name {
    display: block;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1150px) {
    .stock-count-page .stock-count-ops-bar {
        grid-template-columns: 1fr;
    }
    .stock-count-page .stock-count-ops-actions {
        justify-content: flex-start;
    }
}
.stock-count-page .stock-count-help {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    line-height: 1.45;
}
.stock-count-page .stock-count-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}
.stock-count-page .stock-count-kpi > div {
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-alt));
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
}
.stock-count-page .stock-count-kpi span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.stock-count-page .stock-count-kpi strong {
    font-size: 1.05rem;
}
.stock-count-work-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}
.stock-count-work-layout.no-picker {
    grid-template-columns: 1fr;
}
.stock-count-picker {
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 9rem);
    margin: 0;
}
.stock-count-picker .scan-bar {
    flex-shrink: 0;
}
.stock-count-picker .product-grid,
.stock-count-picker .touch-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.stock-count-list-page .table-wrap {
    overflow-x: auto;
}
.stock-count-list-page .data-table {
    width: 100%;
}
.stock-count-list-page .data-table th.inv-row-actions,
.stock-count-list-page .data-table td.inv-row-actions {
    width: 7.25rem;
    min-width: 7.25rem;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    vertical-align: middle;
}
.stock-count-list-page td.inv-row-actions {
    display: table-cell !important;
}
.stock-count-list-page td.inv-row-actions .btn-icon-action {
    display: inline-flex;
    vertical-align: middle;
}
.sc-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
    padding-inline-start: 0.9rem;
}
.sc-timeline-item {
    position: relative;
}
.sc-timeline-mark {
    position: absolute;
    inset-inline-start: calc(-0.9rem - 6px);
    top: 0.85rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.sc-timeline-card {
    background: var(--card);
    border: 1px solid var(--bg-alt);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 8%, transparent);
}
.sc-timeline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.sc-timeline-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.sc-event-posted .sc-timeline-badge { background: color-mix(in srgb, #16a34a 18%, transparent); color: #166534; }
.sc-event-cancelled .sc-timeline-badge { background: color-mix(in srgb, #dc2626 16%, transparent); color: #991b1b; }
.sc-event-saved .sc-timeline-badge { background: color-mix(in srgb, #2563eb 16%, transparent); color: #1d4ed8; }
.sc-event-assigned .sc-timeline-badge { background: color-mix(in srgb, #7c3aed 16%, transparent); color: #5b21b6; }
.sc-timeline-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.sc-timeline-msg {
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}
.sc-timeline-user {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
@media (max-width: 1100px) {
    .stock-count-work-layout { grid-template-columns: 1fr; }
    .stock-count-picker { position: static; max-height: none; }
    .stock-count-page .stock-count-kpi { grid-template-columns: 1fr 1fr; }
}
.stock-count-page .stock-count-main-actions {
    justify-content: flex-end;
    margin-top: 0.85rem;
    gap: 0.55rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 10%, var(--bg-alt));
}
.stock-count-page .stock-count-apply-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.15rem;
}
.stock-count-table th.col-supplier,
.stock-count-table td.col-supplier {
    min-width: 15rem;
    width: 16rem;
}
.stock-count-table .stock-count-supplier-select {
    width: 100%;
    min-width: 14rem;
    max-width: 100%;
}
.stock-count-table th.col-mycount,
.stock-count-table td.counted-input-cell {
    min-width: 7.5rem;
    max-width: 8.5rem;
    width: 8rem;
}
.stock-count-table th.col-teamcount {
    min-width: 7.5rem;
}
.stock-count-table td.counted-input-cell {
    padding: 0.35rem 0.45rem !important;
}
.stock-count-table .counted-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
.stock-count-table td:has(.stock-count-unit-select),
.stock-count-table th:nth-child(2) {
    min-width: 6.5rem;
    max-width: 8rem;
    width: 7.25rem;
}
.stock-count-table .stock-count-unit-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.stock-count-table td.amount-out {
    color: #b42318;
    font-weight: 700;
}
.stock-count-table td.amount-in {
    color: #067647;
    font-weight: 700;
}

/* ?? Payroll UX ?? */
.payroll-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.payroll-help { margin: 0.35rem 0 0.75rem; font-size: 0.82rem; }
.payroll-filters { margin-bottom: 0.85rem; }
.payroll-panel .payroll-filters.compact-filter-bar.chrome-filter-bar {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}
.payroll-panel .payroll-filters .compact-filter-fields {
    flex: 0 1 auto;
}
.payroll-panel .payroll-filters .cf-end-cluster {
    margin-inline-start: auto;
}
.payroll-type-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.payroll-type-badge.wage {
    background: color-mix(in srgb, #2e7d32 14%, transparent);
    color: #1b5e20;
}
.payroll-type-badge.withdrawal {
    background: color-mix(in srgb, #ef6c00 16%, transparent);
    color: #e65100;
}
.payroll-action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
}
.payroll-action-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    text-align: start;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1.5px solid var(--bg-alt);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.payroll-action-card span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.35; }
.payroll-action-card.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.payroll-balance-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.payroll-balance-box span { display: block; font-size: 0.78rem; color: var(--text-muted); }
.payroll-balance-box strong { font-size: 1.05rem; }
.payroll-balance-box small { display: block; margin-top: 0.2rem; font-size: 0.72rem; }
.payroll-balance-detail {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.payroll-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}
.payroll-balance-row.accent-row {
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.payroll-balance-row.accent-row strong { font-size: 1.2rem; }
.payroll-balance-row.muted-row strong { font-weight: 600; opacity: 0.85; }
.payroll-formula, .payroll-hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
}
.worker-periods-panel {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.wp-block {
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
    padding: 1rem 1.1rem 1.1rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.wp-block-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.wp-block-head h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.wp-block-head p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.ot-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    min-width: 0;
}
.ot-section-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ot-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin: 0.65rem 0;
}
@media (max-width: 640px) {
    .ot-stack { grid-template-columns: 1fr; }
}
.ot-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.ot-field > span {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text-muted);
}
.ot-field .field-input {
    width: 100%;
    min-width: 0 !important;
    height: 2.45rem;
    box-sizing: border-box;
}
.ot-preview-bar {
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    margin-bottom: 0.65rem;
}
.ot-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ot-formula {
    display: inline-block;
    unicode-bidi: isolate;
    direction: ltr;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
.ot-actions {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}
.ot-empty { margin: 0.5rem 0 0; text-align: center; }
.ot-check-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    margin: 0.5rem 0;
    cursor: pointer;
}
.wp-count {
    flex-shrink: 0;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.wp-empty {
    padding: 0.95rem 1rem;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent);
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
    margin-bottom: 0.85rem;
}
.wp-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.wp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    min-width: 0;
}
.wp-item-main {
    flex: 1;
    min-width: 0;
}
.wp-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
}
.wp-date {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 7.5rem;
}
.wp-date small {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}
.wp-date strong {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wp-arrow {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 0.9rem;
}
.wp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.wp-badge.ongoing {
    background: color-mix(in srgb, #2e7d32 14%, transparent);
    color: #1b5e20;
}
.wp-badge.paid {
    background: color-mix(in srgb, #1565c0 14%, transparent);
    color: #0d47a1;
}
.wp-badge.unpaid {
    background: color-mix(in srgb, #ef6c00 14%, transparent);
    color: #e65100;
}
.wp-days {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
}
.wp-notes {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
    word-break: break-word;
}
.wp-remove {
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.wp-composer {
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    width: 100%;
    box-sizing: border-box;
}
.wp-composer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    width: 100%;
}
.wp-composer-grid.leave {
    grid-template-columns: 1fr 1fr 1fr;
}
.wp-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
}
.wp-field > span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.wp-field .field-input,
.wp-date-input {
    width: 100% !important;
    min-width: 11.5rem !important;
    max-width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    font-size: 0.95rem;
}
.wp-field-wide {
    grid-column: 1 / -1;
}
.wp-ongoing-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    font-size: 0.88rem;
    cursor: pointer;
}
.wp-composer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}
.worker-edit-modal {
    width: min(820px, 96vw) !important;
    max-width: min(820px, 96vw) !important;
    max-height: min(92vh, 960px);
    overflow: auto;
}
.worker-edit-modal .form-grid {
    width: 100%;
}
@media (max-width: 720px) {
    .wp-composer-grid,
    .wp-composer-grid.leave {
        grid-template-columns: 1fr;
    }
    .wp-field .field-input,
    .wp-date-input {
        min-width: 0 !important;
    }
    .wp-arrow { display: none; }
}
.payroll-guide-alert {
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #ef6c00 35%, transparent);
    background: color-mix(in srgb, #ef6c00 10%, var(--card));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}
.payroll-guide-alert p {
    margin: 0;
    flex: 1 1 14rem;
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.4;
}
.payroll-amount-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: end;
    padding-bottom: 0.2rem;
}
.payroll-report-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.payroll-report-controls {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
}
.payroll-mode-tabs {
    margin-bottom: 0.85rem;
}
.payroll-payout-lux {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 920px);
    width: min(720px, 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    box-shadow: 0 18px 40px color-mix(in srgb, #0b1f33 24%, transparent);
}
.payroll-payout-lux > .form-grid,
.payroll-payout-lux > .modal-actions,
.payroll-payout-lux > .status-msg,
.payroll-payout-lux > .payroll-mode-switch {
    margin-inline: 1.25rem;
}
.payroll-payout-lux > .form-grid {
    margin-top: 0.35rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0.35rem;
}
.payroll-payout-lux > .modal-actions {
    flex: 0 0 auto;
    margin-inline: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.85rem 1.25rem 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--card) 92%, #f4efe4);
}
.payroll-payout-lux > .status-msg { margin-bottom: 0.5rem; }
.payroll-payout-head {
    padding: 1.25rem 1.35rem 1.05rem;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        linear-gradient(135deg, #0f2740 0%, #1a3a5c 48%, #0d2136 100%);
    color: #f7f4ec;
}
.payroll-payout-head h3 {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
}
.payroll-payout-lead {
    margin: 0;
    max-width: 38rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: color-mix(in srgb, #f7f4ec 82%, transparent);
}
.payroll-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-top: 1rem !important;
    margin-bottom: 0.85rem;
}
.payroll-mode-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-align: start;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--card) 96%, #f4efe4);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    contain: layout paint;
}
.payroll-mode-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.payroll-mode-card.is-active {
    border-color: color-mix(in srgb, var(--accent) 55%, #c9a227);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, #fff), color-mix(in srgb, #c9a227 8%, #fff));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.payroll-mode-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    position: relative;
}
.payroll-mode-card.is-active .payroll-mode-icon {
    background: color-mix(in srgb, var(--accent) 22%, #fff);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.payroll-mode-icon-single::before,
.payroll-mode-icon-multi::before,
.payroll-mode-icon-multi::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 75%, #0f2740);
}
.payroll-mode-icon-single::before {
    width: 0.72rem;
    height: 0.72rem;
    top: 0.42rem;
    inset-inline-start: 0.78rem;
    box-shadow: 0 0.55rem 0 -0.12rem color-mix(in srgb, var(--accent) 75%, #0f2740);
}
.payroll-mode-icon-multi::before,
.payroll-mode-icon-multi::after {
    width: 0.58rem;
    height: 0.58rem;
    top: 0.48rem;
    box-shadow: 0 0.48rem 0 -0.1rem color-mix(in srgb, var(--accent) 75%, #0f2740);
}
.payroll-mode-icon-multi::before { inset-inline-start: 0.48rem; }
.payroll-mode-icon-multi::after { inset-inline-start: 1.15rem; opacity: 0.75; }
.payroll-mode-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.payroll-mode-copy strong {
    font-size: 0.95rem;
    color: var(--text);
}
.payroll-mode-copy small {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.payroll-batch-box {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.payroll-batch-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.85rem;
}
.payroll-batch-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}
.payroll-batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}
.payroll-batch-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 80%, #0f2740);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.payroll-batch-list {
    height: 14.5rem;
    min-height: 14.5rem;
    max-height: 14.5rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 14px;
    background: var(--card);
    padding: 0.4rem;
    contain: layout style;
}
.payroll-batch-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}
.payroll-batch-search .field-input {
    flex: 1 1 12rem;
    min-width: 10rem;
}
.payroll-batch-empty {
    margin: 0.75rem 0.5rem;
    text-align: center;
}
.staff-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin: 0.35rem 0 0.85rem;
}
.staff-search-input {
    flex: 1 1 16rem;
    min-width: 12rem;
    max-width: 28rem;
}
.staff-search-meta {
    font-size: 0.82rem;
}
.staff-table-wrap {
    contain: content;
}
.staff-data-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 3rem;
}
.staff-table-photo.placeholder {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 35%, #fff) 0 28%, transparent 30%),
        linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--accent) 28%, #cbd5e1) 52%);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.lux-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.55rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.35rem 0.15rem;
}
.lux-pager-compact {
    margin-top: 0.45rem;
    padding-top: 0.25rem;
}
.lux-pager-meta {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
}
.lux-pager-nums {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}
.lux-pager-btn,
.lux-pager-num {
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 0.65rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: color-mix(in srgb, var(--card) 94%, #f4efe4);
    color: var(--text);
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
}
.lux-pager-btn:disabled {
    opacity: 0.45;
    cursor: default;
}
.lux-pager-num.is-on,
.lux-pager-btn:hover:not(:disabled),
.lux-pager-num:hover:not(.is-on) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, #fff);
}
.lux-pager-num.is-on {
    color: #0f2740;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, #c9a227 12%, #fff));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tip-label,
.tip-btn,
.tip-chip {
    position: relative;
}
.tip-label::after,
.tip-btn::after,
.tip-chip::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 40;
    inset-inline-start: 0;
    bottom: calc(100% + 0.45rem);
    width: max(12rem, 100%);
    max-width: min(20rem, 70vw);
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #0f2740;
    color: #f7f4ec;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 12px 28px rgba(15, 39, 64, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
    white-space: normal;
    text-align: start;
}
.tip-label:hover::after,
.tip-label:focus-visible::after,
.tip-btn:hover::after,
.tip-chip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.tip-label {
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 45%, transparent);
    cursor: help;
}
.tip-chip {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    color: color-mix(in srgb, var(--accent) 70%, #0f2740);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: help;
}
.payroll-preview-lux {
    padding: 0 !important;
    width: min(1100px, 96vw);
    max-height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    box-shadow: 0 18px 40px color-mix(in srgb, #0b1f33 24%, transparent);
}
.payroll-preview-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 1rem;
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        linear-gradient(135deg, #0f2740 0%, #1a3a5c 48%, #0d2136 100%);
    color: #f7f4ec;
}
.payroll-preview-head h3 {
    margin: 0 0 0.35rem;
    color: #fff;
}
.payroll-preview-totals {
    display: flex;
    gap: 1.1rem;
    align-items: flex-end;
}
.payroll-preview-totals > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 7rem;
}
.payroll-preview-totals span {
    font-size: 0.75rem;
    opacity: 0.85;
}
.payroll-preview-totals strong {
    font-size: 1.2rem;
    color: #fff;
}
.payroll-preview-rule {
    margin: 0.75rem 1.25rem 0.35rem;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.payroll-preview-table-wrap {
    margin: 0.5rem 1.25rem;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 12rem;
    max-height: 52vh;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 12px;
}
.payroll-preview-table td,
.payroll-preview-table th {
    vertical-align: middle;
}
.payroll-preview-table tr.is-skip {
    opacity: 0.72;
}
.payroll-preview-name {
    font-weight: 600;
}
.payroll-preview-amt {
    width: 7.5rem;
    min-width: 6rem;
}
.payroll-status-cell {
    min-width: 9.5rem;
    vertical-align: middle !important;
}
.payroll-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    position: relative;
}
.payroll-calc-btn {
    appearance: none;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    color: color-mix(in srgb, var(--accent) 75%, #0f2740);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    user-select: none;
}
.payroll-calc-btn::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    margin-top: -0.12rem;
}
.payroll-calc-btn.is-open {
    background: color-mix(in srgb, var(--accent) 18%, #fff);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.payroll-calc-btn.is-open::after {
    transform: rotate(-135deg);
    margin-top: 0.12rem;
}
.payroll-calc-tip {
    position: relative;
    max-width: 11rem;
}
.payroll-calc-tip > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    color: color-mix(in srgb, var(--accent) 75%, #0f2740);
    font-size: 0.72rem;
    font-weight: 700;
    user-select: none;
}
.payroll-calc-tip > summary::-webkit-details-marker { display: none; }
.payroll-calc-tip > summary::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    margin-top: -0.1rem;
}
.payroll-calc-tip[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}
.payroll-preview-lux .tip-label::after,
.payroll-preview-lux .tip-btn::after,
.payroll-preview-lux .tip-chip::after {
    content: none !important;
    display: none !important;
}
.payroll-calc-expand-row > td {
    padding: 0.45rem 0.75rem 0.85rem !important;
    background: color-mix(in srgb, var(--accent) 6%, #f7f4ec);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.payroll-calc-card {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background: #fff;
    color: var(--text);
    box-shadow: 0 4px 14px color-mix(in srgb, #0b1f33 8%, transparent);
}
.payroll-calc-card .payroll-calc-intro {
    margin: 0 0 0.65rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.payroll-calc-card .payroll-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.45rem 1rem;
}
.payroll-calc-card .payroll-calc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.payroll-calc-card .payroll-calc-row span {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.payroll-calc-card .payroll-calc-row strong {
    color: var(--text);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.payroll-calc-card .payroll-calc-row.is-result {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, #fff);
}
.payroll-calc-card .payroll-calc-row.is-result span,
.payroll-calc-card .payroll-calc-row.is-result strong {
    color: color-mix(in srgb, var(--accent) 70%, #0f2740);
}
.payroll-calc-card .payroll-calc-row.is-muted {
    border-bottom: none;
    opacity: 0.9;
}
.payroll-calc-card .payroll-calc-note {
    margin: 0.65rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.payroll-calc-intro {
    margin: 0 0 0.55rem;
    font-size: 0.76rem;
    line-height: 1.45;
    color: color-mix(in srgb, #f7f4ec 88%, transparent);
}
.payroll-calc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.payroll-calc-row:last-of-type {
    border-bottom: none;
}
.payroll-calc-row span {
    color: color-mix(in srgb, #f7f4ec 78%, transparent);
    font-size: 0.74rem;
}
.payroll-calc-row strong {
    color: #fff;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.payroll-calc-row.is-result {
    margin-top: 0.15rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid color-mix(in srgb, #c9a227 45%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #c9a227 14%, transparent);
}
.payroll-calc-row.is-result span,
.payroll-calc-row.is-result strong {
    color: #ffe9a8;
}
.payroll-calc-row.is-muted {
    border-bottom: none;
    opacity: 0.85;
}
.payroll-calc-note {
    margin: 0.55rem 0 0;
    padding-top: 0.45rem;
    border-top: 1px dashed color-mix(in srgb, #fff 18%, transparent);
    font-size: 0.72rem;
    line-height: 1.5;
    color: color-mix(in srgb, #f7f4ec 72%, transparent);
}
.payroll-preview-lux > .modal-actions {
    margin: 0;
    padding: 0.85rem 1.25rem 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--card) 92%, #f4efe4);
}
.payroll-preview-lux > .status-msg {
    margin: 0.35rem 1.25rem;
}
.payroll-batch-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    contain: layout paint;
}
.payroll-batch-row:hover {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.payroll-batch-row.is-selected {
    background: color-mix(in srgb, var(--accent) 12%, #fff);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.payroll-batch-row input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.payroll-batch-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-batch-place {
    justify-self: end;
    max-width: 8.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text) 78%, var(--accent));
    background: color-mix(in srgb, var(--bg) 70%, #fff);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-confirm-lux {
    min-width: 11rem;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
@media (max-width: 640px) {
    .payroll-mode-switch { grid-template-columns: 1fr; }
    .payroll-payout-lux > .form-grid,
    .payroll-payout-lux > .modal-actions,
    .payroll-payout-lux > .status-msg,
    .payroll-payout-lux > .payroll-mode-switch {
        margin-inline: 0.9rem;
    }
}
.payroll-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}
.payroll-filter-row .cf-input {
    width: auto;
    min-width: 8.5rem;
}
.payroll-simple-help {
    margin: 0.75rem 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
}
.payroll-steps-simple {
    margin: 0.85rem 0 0;
    padding-inline-start: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
}
.payroll-steps-simple li { margin-bottom: 0.25rem; }
.payslip-summary-bar { margin-bottom: 1rem; }
.voucher-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.voucher-index { font-size: 0.82rem; }
.voucher-amount-box {
    margin: 1rem 0;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.voucher-amount-box strong { font-size: 1.35rem; }
.voucher-notes { margin: 0.5rem 0 0; color: var(--text-muted); }
.payroll-voucher { margin-bottom: 1rem; }
.payroll-vouchers-print .payroll-voucher,
.payroll-vouchers-print .print-voucher-page {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}

/* On-screen preview of payment/receipt vouchers (print styles live in pos.js iframe) */
.ledger-voucher-pro {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--text);
}
.ledger-voucher-pro .lvp-frame {
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    overflow: visible;
    background: #fff;
}
.ledger-voucher-pro .lvp-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid #1e3a5f;
    background: #f8fafc;
}
.ledger-voucher-pro .lvp-brand {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    max-width: 100%;
}
.ledger-voucher-pro .lvp-brand-text {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ledger-voucher-pro .lvp-logo {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
    flex-shrink: 0;
}
.ledger-voucher-pro .lvp-org {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}
.ledger-voucher-pro .lvp-tag,
.ledger-voucher-pro .lvp-contact {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}
.ledger-voucher-pro .lvp-doc-badge {
    text-align: center;
    min-width: 9.5rem;
    max-width: 12rem;
    padding: 0.55rem 0.75rem;
    border: 2px solid #1e3a5f;
    border-radius: 6px;
    background: #fff;
    justify-self: end;
}
.ledger-voucher-pro.is-payment .lvp-doc-badge {
    border-color: #9a3412;
    background: #fff7ed;
}
.ledger-voucher-pro.is-receipt .lvp-doc-badge {
    border-color: #166534;
    background: #f0fdf4;
}
.ledger-voucher-pro .lvp-doc-type {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e3a5f;
    margin-bottom: 0.25rem;
}
.ledger-voucher-pro.is-payment .lvp-doc-type { color: #9a3412; }
.ledger-voucher-pro.is-receipt .lvp-doc-type { color: #166534; }
.ledger-voucher-pro .lvp-doc-no,
.ledger-voucher-pro .lvp-doc-date {
    display: block;
    font-size: 0.78rem;
    color: #334155;
    line-height: 1.45;
}
.ledger-voucher-pro .lvp-party-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.85rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #cbd5e1;
}
.ledger-voucher-pro .lvp-party-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}
.ledger-voucher-pro .lvp-party-name {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 40%;
}
.ledger-voucher-pro .lvp-party-code {
    font-size: 0.8rem;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    background: #f8fafc;
}
.ledger-voucher-pro .lvp-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.ledger-voucher-pro .lvp-grid th,
.ledger-voucher-pro .lvp-grid td {
    border: 1px solid #cbd5e1;
    padding: 0.55rem 0.7rem;
    vertical-align: middle;
    text-align: start;
}
.ledger-voucher-pro .lvp-grid th {
    width: 22%;
    background: #eef2f7;
    font-weight: 700;
    color: #1e3a5f;
    white-space: nowrap;
}
.ledger-voucher-pro .lvp-amount-row th {
    background: #1e3a5f;
    color: #fff;
}
.ledger-voucher-pro .lvp-amount {
    font-size: 1.35rem;
    font-weight: 800;
    background: #f1f5f9;
}
.ledger-voucher-pro.is-payment .lvp-amount-row th { background: #9a3412; }
.ledger-voucher-pro.is-receipt .lvp-amount-row th { background: #166534; }
.ledger-voucher-pro.is-payment .lvp-amount { background: #fff7ed; color: #9a3412; }
.ledger-voucher-pro.is-receipt .lvp-amount { background: #f0fdf4; color: #166534; }
.ledger-voucher-pro .lvp-signs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid #cbd5e1;
}
.ledger-voucher-pro .lvp-sign {
    padding: 0.75rem 0.85rem 1rem;
    border-inline-end: 1px solid #cbd5e1;
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ledger-voucher-pro .lvp-sign:last-child { border-inline-end: none; }
.ledger-voucher-pro .lvp-sign span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}
.ledger-voucher-pro .lvp-sign em {
    display: block;
    margin-top: auto;
    border-bottom: 1px solid #94a3b8;
    height: 2.75rem;
    font-style: normal;
}
.ledger-voucher-pro .lvp-sign em.lvp-stamp {
    border: 1.5px dashed #94a3b8;
    border-radius: 50%;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0.25rem auto 0;
}
@media (max-width: 640px) {
    .ledger-voucher-pro .lvp-header { grid-template-columns: 1fr; }
    .ledger-voucher-pro .lvp-doc-badge { justify-self: stretch; max-width: none; min-width: 0; }
    .ledger-voucher-pro .lvp-signs { grid-template-columns: 1fr; }
    .ledger-voucher-pro .lvp-sign { border-inline-end: none; border-bottom: 1px solid #cbd5e1; }
    .ledger-voucher-pro .lvp-sign:last-child { border-bottom: none; }
}

/* Supplier portal voucher print preview modal */
.receipt-panel.sp-voucher-preview {
    max-width: min(760px, 96vw);
    width: min(760px, 96vw);
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    overflow: hidden;
}
.sp-voucher-preview-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.15rem 0.1rem;
}
.sp-voucher-print-root {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.sp-voucher-actions {
    margin-top: 0.85rem;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.payslip-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.payslip-meta span { display: block; font-size: 0.78rem; color: var(--text-muted); }
.payroll-sign-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
}
.payroll-sign-box {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.payroll-sign-box em { font-style: normal; letter-spacing: 0.08em; }
.status-msg.warn { color: #c62828; }

/* Off-screen host for trader receipt/payment voucher print targets */
.ledger-vouchers-print-host {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

/* ?? Restaurant floor / KDS / shifts ?? */
.rest-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.rest-filter-bar {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem;
  overflow: visible !important;
  position: relative;
  z-index: 40;
}
.rest-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.55rem;
  width: 100%;
  overflow: visible !important;
}
/* Keep dropdown above kitchen cards / next sections */
.rest-filter-bar .searchable-select-wrap.is-open {
  z-index: 8000;
}
.rest-filter-bar .searchable-select-panel {
  z-index: 8001;
  min-width: 12rem;
}
/* Only direct children are flex items ? nested searchable-select must not get flex sizing */
.rest-filter-row > .rest-filter-item,
.rest-filter-row > .field-group.rest-filter-item,
.rest-filter-row > .searchable-select-wrap,
.rest-filter-row > input.rest-filter-item,
.rest-filter-row > select.rest-filter-item {
  flex: 0 1 10.5rem;
  min-width: 8rem;
  max-width: 14rem;
}
.rest-filter-row > .rest-filter-item.grow,
.rest-filter-row > .field-group.rest-filter-item.grow,
.rest-filter-row > input.rest-filter-item.grow,
.rest-filter-row > .searchable-select-wrap.grow {
  flex: 1 1 12rem;
  max-width: none;
  min-width: 10rem;
}
.rest-filter-row > .rest-filter-actions,
.rest-filter-row > .toolbar-icon-group.rest-filter-actions {
  flex: 0 0 auto;
  align-self: flex-end;
  margin-inline-start: 0;
}
.rest-filter-row .rest-filter-check {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
  margin: 0;
  padding-bottom: 0.35rem;
}
.rest-filter-row .field-group.rest-filter-item .field-input,
.rest-filter-row .field-group.rest-filter-item .searchable-select-wrap,
.rest-filter-row .field-group.rest-filter-item .searchable-select-trigger {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.rest-filter-row .field-group.rest-filter-item input[type="date"].field-input {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

/* Shift closing report ? force one compact row */
.shift-report-filters.rest-filter-bar {
  padding: 0.65rem 0.8rem;
}
.shift-report-filters .rest-filter-row--single {
  flex-wrap: nowrap !important;
  align-items: flex-end;
  gap: 0.4rem 0.5rem;
}
.shift-report-filters .rest-filter-date {
  flex: 0 0 9.5rem !important;
  width: 9.5rem;
  min-width: 9.5rem !important;
  max-width: 9.5rem !important;
}
.shift-report-filters .rest-filter-search {
  flex: 0 1 11rem !important;
  min-width: 8.5rem !important;
  max-width: 13rem !important;
}
.shift-report-filters .rest-filter-shift {
  flex: 1 1 14rem !important;
  min-width: 12rem !important;
  max-width: none !important;
}
.shift-report-filters .rest-filter-actions {
  flex: 0 0 auto !important;
  margin-inline-start: 0.15rem !important;
  padding-bottom: 0.05rem;
}
.rest-manage-hint { margin: 0.55rem 0 0; font-size: 0.85rem; }
@media (max-width: 720px) {
  .rest-filter-row:not(.rest-filter-row--single) { flex-wrap: wrap; }
  .shift-report-filters .rest-filter-date {
    flex: 0 0 8.75rem !important;
    width: 8.75rem;
    min-width: 8.75rem !important;
    max-width: 8.75rem !important;
  }
}

.floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}
.floor-table {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.9rem 0.75rem; border-radius: 12px; border: 2px solid transparent;
  background: var(--panel-bg, #fff); cursor: pointer; text-align: start;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease;
  font: inherit; color: inherit;
}
.floor-table:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.floor-table .floor-code { font-weight: 700; font-size: 1.15rem; }
.floor-table .floor-name { font-size: 0.9rem; }
.floor-table .floor-meta { font-size: 0.75rem; color: var(--text-muted); }
.floor-table .floor-badge {
  align-self: flex-start; margin-top: 0.35rem; padding: 0.15rem 0.45rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 600;
}
.floor-table .floor-order { font-size: 0.75rem; font-weight: 600; opacity: .85; }
.floor-table.status-0 { border-color: #2e7d32; }
.floor-table.status-0 .floor-badge { background: #e8f5e9; color: #1b5e20; }
.floor-table.status-1 { border-color: #ef6c00; }
.floor-table.status-1 .floor-badge { background: #fff3e0; color: #e65100; }
.floor-table.status-2 { border-color: #1565c0; }
.floor-table.status-2 .floor-badge { background: #e3f2fd; color: #0d47a1; }
.floor-table.status-3 { border-color: #6d4c41; }
.floor-table.status-3 .floor-badge { background: #efebe9; color: #4e342e; }

.kds-auto { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--text); }
.kds-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.kds-board-pro {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  align-items: stretch;
}
.kds-card {
  position: relative;
  color: var(--text);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--accent) 10%, var(--card)) 0%,
      var(--card) 42%,
      color-mix(in srgb, var(--bg-alt) 35%, var(--card)) 100%);
  border-radius: 1.15rem;
  padding: 0.85rem 0.9rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-top: 3px solid #f59e0b;
  box-shadow:
    0 10px 28px color-mix(in srgb, #000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  overflow: hidden;
}
.kds-card::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  pointer-events: none;
}
.kds-card-pro {
  height: 24rem;
  max-height: 24rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.8rem 0.85rem 0.7rem;
}
.kds-card.status-3 { border-top-color: #22c55e; }
.kds-card.status-2 { border-top-color: #fbbf24; }
.kds-card.status-4,
.kds-card.is-await-pay { border-top-color: #f97316; }
.kds-card.status-1 { border-top-color: #60a5fa; }
.kds-head {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; align-items: baseline; margin-bottom: 0.5rem;
}
.kds-card-pro .kds-head {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}
.kds-head-main { display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; align-items: center; min-width: 0; }
.kds-order-no {
  font-size: 1rem; letter-spacing: 0.02em; font-weight: 900;
  color: var(--text);
  text-shadow: 0 1px 0 color-mix(in srgb, #000 20%, transparent);
}
.kds-type-pill {
  font-size: 0.68rem; font-weight: 800; padding: 0.14rem 0.48rem; border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.kds-station-reassign { margin: 0.25rem 0 0.15rem; }
.kds-station-select {
  max-width: 100%; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.4rem;
  border-radius: 6px; border: 1px solid color-mix(in srgb, var(--border, #888) 70%, transparent);
  background: color-mix(in srgb, var(--panel, #fff) 92%, transparent); color: var(--text);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.kds-table {
  font-weight: 800; padding: 0.14rem 0.45rem; border-radius: 7px; font-size: 0.78rem;
  color: #fff;
  background: linear-gradient(135deg, #ea580c, #c2410c);
  box-shadow: 0 2px 8px rgba(194, 65, 12, .35);
}
.kds-time {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.kds-chips {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; flex-shrink: 0; min-height: 1.5rem;
}
.kds-chip {
  display: inline-flex; align-items: center; gap: 0.18rem;
  padding: 0.16rem 0.5rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 900; line-height: 1.2;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text);
}
.kds-chip.late { background: color-mix(in srgb, #ef4444 28%, transparent); color: #fecaca; border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.kds-chip.unpaid { background: color-mix(in srgb, #f97316 28%, transparent); color: #ffedd5; border-color: color-mix(in srgb, #f97316 45%, transparent); }
.kds-chip.await { background: color-mix(in srgb, #ef4444 30%, transparent); color: #fecaca; border-color: color-mix(in srgb, #dc2626 50%, transparent); }
.kds-chip.ticket { background: color-mix(in srgb, #818cf8 28%, transparent); color: #e0e7ff; border-color: color-mix(in srgb, #6366f1 45%, transparent); }
.kds-chip.called { background: color-mix(in srgb, #10b981 28%, transparent); color: #d1fae5; border-color: color-mix(in srgb, #059669 45%, transparent); }
.kds-chip.call-needed { background: color-mix(in srgb, #14b8a6 26%, transparent); color: #ccfbf1; border-color: color-mix(in srgb, #0d9488 45%, transparent); }
.kds-chip.prep { background: color-mix(in srgb, #f59e0b 30%, transparent); color: #fef3c7; border-color: color-mix(in srgb, #d97706 45%, transparent); }
.kds-chip.ready { background: color-mix(in srgb, #22c55e 28%, transparent); color: #dcfce7; border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.kds-chip.paid { background: color-mix(in srgb, #22c55e 26%, transparent); color: #bbf7d0; border-color: color-mix(in srgb, #16a34a 42%, transparent); }
.kds-card.is-paid-log {
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
  opacity: 0.96;
}
.kds-paid-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; margin: 0 0 0.75rem; padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
}
.kds-paid-summary strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Light themes: darker chip text for readability */
body.theme-zad-light .kds-chip.late,
body.theme-zad .kds-chip.late,
body.theme-copper .kds-chip.late { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
body.theme-zad-light .kds-chip.unpaid,
body.theme-zad .kds-chip.unpaid,
body.theme-copper .kds-chip.unpaid { color: #9a3412; background: #ffedd5; border-color: #fdba74; }
body.theme-zad-light .kds-chip.await,
body.theme-zad .kds-chip.await,
body.theme-copper .kds-chip.await { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
body.theme-zad-light .kds-chip.ticket,
body.theme-zad .kds-chip.ticket,
body.theme-copper .kds-chip.ticket { color: #3730a3; background: #e0e7ff; border-color: #a5b4fc; }
body.theme-zad-light .kds-chip.called,
body.theme-zad .kds-chip.called,
body.theme-copper .kds-chip.called { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
body.theme-zad-light .kds-chip.call-needed,
body.theme-zad .kds-chip.call-needed,
body.theme-copper .kds-chip.call-needed { color: #115e59; background: #ccfbf1; border-color: #5eead4; }
body.theme-zad-light .kds-chip.prep,
body.theme-zad .kds-chip.prep,
body.theme-copper .kds-chip.prep { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
body.theme-zad-light .kds-chip.ready,
body.theme-zad .kds-chip.ready,
body.theme-copper .kds-chip.ready { color: #166534; background: #dcfce7; border-color: #86efac; }
body.theme-zad-light .kds-chip.paid,
body.theme-zad .kds-chip.paid,
body.theme-copper .kds-chip.paid { color: #166534; background: #dcfce7; border-color: #86efac; }

.kds-lines {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1 1 auto; min-height: 0; overflow: auto;
  position: relative; z-index: 1;
}
.kds-line {
  padding: 0.5rem 0.55rem;
  border-radius: 0.75rem;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-inline-start: 3px solid #94a3b8;
}
.kds-line-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 0.55rem;
  align-items: center;
}
.kds-line-qty {
  font-weight: 800; font-size: 0.92rem;
  color: var(--text);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kds-line-state {
  font-size: 0.68rem; font-weight: 900; padding: 0.16rem 0.48rem; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  white-space: nowrap;
}
.kds-line.ks-0 { border-inline-start-color: #94a3b8; }
.kds-line.ks-1 {
  border-inline-start-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 16%, var(--card));
}
.kds-line.ks-1 .kds-line-state {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; border-color: transparent;
}
.kds-line.ks-2 {
  border-inline-start-color: #22c55e;
  background: color-mix(in srgb, #22c55e 14%, var(--card));
}
.kds-line.ks-2 .kds-line-state {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff; border-color: transparent;
}
.kds-line.ks-3 {
  border-inline-start-color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 14%, var(--card));
}
.kds-line.ks-3 .kds-line-qty { text-decoration: line-through; opacity: .72; }
.kds-line.ks-3 .kds-line-state {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff; border-color: transparent;
}
.kds-line small {
  display: block; margin-top: 0.2rem;
  color: var(--text-muted); font-weight: 600;
}
.kds-line-actions, .kds-actions {
  display: flex; flex-wrap: nowrap; gap: 0.35rem; margin-top: 0.45rem; align-items: center;
}
.kds-actions-pro {
  flex-shrink: 0; margin-top: 0.6rem; padding: 0.5rem 0.15rem 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: center;
}
.kds-actions-pro .kds-total {
  grid-column: 5 / 6;
  justify-self: end;
  margin: 0;
}
.kds-dock-slot {
  width: 100%;
  height: 2.45rem;
  visibility: hidden;
  pointer-events: none;
}
.kds-ico-row .kds-ico {
  width: 100%;
  height: 2.35rem;
  min-width: 0;
  padding: 0;
  font-size: 1.05rem;
  border-radius: 0.7rem;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--text) 8%, var(--card)) !important;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, #000 16%, transparent);
}
.kds-line-actions.kds-ico-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}
.kds-line-actions .kds-ico {
  width: 100%;
  height: 2.05rem;
  min-width: 0;
  font-size: 0.95rem;
}
.kds-ico-row .kds-ico-lg { height: 2.45rem; font-size: 1.1rem; }
.kds-ico-row .kds-ico.is-active,
.kds-line-actions .btn-xs.is-active,
.kds-actions .btn-sm.is-active {
  background: color-mix(in srgb, var(--accent) 32%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}
.kds-reopen { font-weight: 600; }
.kds-call-btn,
.kds-call-ico {
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #0d9488, #2563eb) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}
.kds-total {
  margin-inline-start: auto; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--text); font-size: 0.95rem;
}
.btn-xs { padding: 0.2rem 0.45rem; font-size: 0.75rem; }

/* Obsidian / dark kitchen command-center polish */
body.theme-obsidian .kds-card,
html.theme-obsidian .kds-card,
body.theme-obsidian .app-shell .kds-card {
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(165deg, rgba(30, 30, 48, 0.98), rgba(16, 16, 28, 0.96));
  border-color: rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.theme-obsidian .kds-card .kds-order-no,
body.theme-obsidian .kds-card .kds-time,
body.theme-obsidian .kds-card .kds-line-qty,
html.theme-obsidian .kds-card .kds-order-no,
html.theme-obsidian .kds-card .kds-time {
  color: #f8fafc !important;
}
body.theme-obsidian .kds-card .kds-line-note,
body.theme-obsidian .kds-card .muted,
html.theme-obsidian .kds-card .muted {
  color: #cbd5e1 !important;
}
body.theme-obsidian .kds-card .btn-icon-action[data-ico],
html.theme-obsidian .kds-card .btn-icon-action[data-ico] {
  color: #f4f4f5 !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
  background: rgba(15, 14, 28, 0.95) !important;
}
body.theme-obsidian .kds-card .btn-icon-action.is-primary[data-ico],
html.theme-obsidian .kds-card .btn-icon-action.is-primary[data-ico] {
  color: #fff !important;
  border-color: transparent !important;
  background: #2563eb !important;
}
body.theme-obsidian .kds-line {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-obsidian .kds-line.ks-1 { background: color-mix(in srgb, #f59e0b 18%, #161622); }
body.theme-obsidian .kds-line.ks-2 { background: color-mix(in srgb, #22c55e 16%, #161622); }
body.theme-obsidian .kds-line.ks-3 { background: color-mix(in srgb, #3b82f6 16%, #161622); }
body.theme-obsidian .kds-alert.danger {
  background: color-mix(in srgb, #ef4444 22%, #1a1014);
  color: #fecaca;
  border-color: color-mix(in srgb, #ef4444 45%, transparent);
}

.shift-summary {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem; margin: 0.75rem 0 1rem;
}
.shift-summary div { display: flex; flex-direction: column; gap: 0.15rem; }
.shift-summary span { font-size: 0.75rem; color: var(--text-muted); }
.shift-summary strong.warn { color: #c62828; }

.pos-rest-panel {
  margin: 0.5rem 0 0.75rem; padding: 0.65rem; border-radius: 10px;
  background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.06);
}
.pos-rest-types { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pos-rest-types button {
  flex: 1; min-width: 5rem; padding: 0.45rem 0.5rem; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12); background: var(--panel-bg, #fff);
  cursor: pointer; font: inherit;
}
.pos-rest-types button.active {
  background: var(--accent, #0d9488); color: #fff; border-color: transparent; font-weight: 600;
}
.pos-rest-shift { margin: 0 0 0.4rem; font-size: 0.85rem; }
.pos-rest-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.status-msg.ok { color: #2e7d32; }

.rest-guide { margin-bottom: 0.85rem; }
.rest-steps { margin: 0.4rem 0 0.6rem; padding-inline-start: 1.2rem; line-height: 1.55; font-size: 0.9rem; }
.floor-legend { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.floor-legend .leg { padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; }
.floor-legend .leg.free { background: #e8f5e9; color: #1b5e20; }
.floor-legend .leg.busy { background: #fff3e0; color: #e65100; }
.floor-legend .leg.reserved { background: #e3f2fd; color: #0d47a1; }
.floor-legend .leg.dirty { background: #efebe9; color: #4e342e; }
.floor-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.55rem; margin-bottom: 0.85rem; }
.floor-kpi { background: var(--panel-bg, #fff); border-radius: 12px; padding: 0.7rem 0.8rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 0.2rem; animation: fadeUp .45s ease both; }
.floor-kpi span { font-size: 0.72rem; color: var(--text-muted); }
.floor-kpi strong { font-size: 1.15rem; }
.floor-search { max-width: 12rem; }
.floor-filter { max-width: 11rem; }
.floor-hall-bars { margin-bottom: 0.85rem; }
.hall-bar-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.5rem; align-items: center; margin: 0.35rem 0; font-size: 0.85rem; }
.hall-bar-track { height: 0.55rem; background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; overflow: hidden; }
.hall-bar-fill { height: 100%; background: linear-gradient(90deg, #0d9488, #14b8a6); border-radius: 999px; transition: width .5s ease; }
.hall-bar-fill.takeaway { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.hall-bar-fill.delivery { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.hall-bar-fill.expense { background: linear-gradient(90deg, #dc2626, #f87171); }

/* ?? Payment tender / breakdown (shared: POS, invoice edit, settings, reports) ?? */
.pay-tender-panel {
  --pay-accent: var(--accent, #0d9488);
  --pay-gap: 0.65rem;
  --pay-radius: 12px;
  --pay-surface: var(--card, #fff);
  margin-top: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--text, #1e293b) 12%, transparent);
  border-radius: var(--pay-radius);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--pay-accent) 10%, var(--pay-surface)), var(--pay-surface) 48%);
  color: var(--text, #0f172a);
  display: flex;
  flex-direction: column;
  gap: var(--pay-gap);
  min-width: 0;
  box-sizing: border-box;
}
.pay-tender-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.pay-tender-title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.pay-tender-title strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.pay-tender-hint {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted, color-mix(in srgb, var(--text) 68%, transparent));
}
.pay-settings-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  text-decoration: none;
  width: fit-content;
}
.pay-settings-link:hover { text-decoration: underline; }
.pay-tender-due {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pay-accent) 18%, var(--pay-surface));
  color: color-mix(in srgb, var(--pay-accent) 55%, var(--text));
  white-space: nowrap;
}

.pay-method-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: 0.4rem;
}
.pay-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.15rem;
  padding: 0.4rem 0.35rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--bg-alt, var(--pay-surface)) 55%, var(--pay-surface));
  color: var(--text, #334155);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.pay-chip:hover {
  border-color: color-mix(in srgb, var(--pay-accent) 45%, transparent);
  background: color-mix(in srgb, var(--pay-accent) 12%, var(--pay-surface));
}
.pay-chip.is-active {
  border-color: var(--pay-accent);
  background: color-mix(in srgb, var(--pay-accent) 18%, var(--pay-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pay-accent) 22%, transparent);
  color: color-mix(in srgb, var(--pay-accent) 35%, var(--text));
}
.pay-chip-ico {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  background: color-mix(in srgb, var(--pay-accent) 20%, var(--bg-alt, var(--pay-surface)));
  color: color-mix(in srgb, var(--pay-accent) 40%, var(--text));
}
.pay-chip.is-active .pay-chip-ico {
  background: var(--pay-accent);
  color: #fff;
}
.method-tone-1 { background: color-mix(in srgb, #16a34a 28%, var(--bg-alt, var(--card))); color: color-mix(in srgb, #16a34a 55%, var(--text)); }
.method-tone-2, .method-tone-3, .method-tone-4, .method-tone-5 {
  background: color-mix(in srgb, #2563eb 26%, var(--bg-alt, var(--card))); color: color-mix(in srgb, #2563eb 50%, var(--text));
}
.method-tone-6, .method-tone-7 {
  background: color-mix(in srgb, #7c3aed 26%, var(--bg-alt, var(--card))); color: color-mix(in srgb, #7c3aed 50%, var(--text));
}
.method-tone-8 {
  background: color-mix(in srgb, #0f766e 26%, var(--bg-alt, var(--card))); color: color-mix(in srgb, #0f766e 50%, var(--text));
}
.pay-chip-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: inherit;
}

.pay-tender-lines {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
.pay-tender-line {
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text, #94a3b8) 14%, transparent);
  background: color-mix(in srgb, var(--bg-alt, var(--card)) 40%, var(--card, #fff));
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  min-width: 0;
  color: var(--text, #0f172a);
}
.pay-tender-line-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.pay-tender-line-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.pay-tender-line-name strong {
  font-size: 0.88rem;
  font-weight: 800;
}
.pay-tender-remove {
  border: 0;
  background: transparent;
  color: #dc2626;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  text-decoration: none;
}
.pay-tender-remove:hover { background: color-mix(in srgb, #dc2626 10%, transparent); }

.pay-tender-amount-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}
.pay-amount-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text, #64748b) 90%, transparent);
  white-space: nowrap;
}
.pay-amount-input {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pay-tender-refs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.pay-instapay-box {
  margin-top: 0.55rem;
  margin-bottom: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border-inline-start: 3px solid var(--pay-accent);
  background: color-mix(in srgb, var(--pay-accent) 7%, #f8fafc);
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text, #475569) 95%, transparent);
}
.pay-instapay-name { font-weight: 800; margin-bottom: 0.15rem; }
.pay-instapay-note { margin-top: 0.25rem; opacity: 0.9; }

.pay-wallet-extras {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.pay-wallet-mobile-row {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}
.pay-wallet-mobile-row .field-input { flex: 1; min-width: 0; }
.pay-wallet-hist-btn {
  flex: 0 0 auto;
  min-width: 2.4rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.pay-wallet-hist-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pay-wallet-hint { margin: 0; }

.wallet-hist-modal { max-width: 52rem; }
.wallet-hist-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.wallet-hist-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.65rem;
  font-size: 0.9rem;
}
.purchase-pay-panel {
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.45rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.purchase-landed-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}
.purchase-landed-explain {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.3;
  max-width: 14rem;
}
.purchase-landed-note {
  margin: 0.25rem 0 0;
  padding-inline: 0.15rem;
}
.wallet-report-phone { min-width: 10rem; max-width: 14rem; }

.pay-tender-sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text, #0f172a) 6%, var(--card, transparent));
  border: 1px solid color-mix(in srgb, var(--text, #94a3b8) 14%, transparent);
  color: var(--text, #0f172a);
}
.pay-tender-sum.is-full {
  background: color-mix(in srgb, #16a34a 14%, var(--card, #fff));
  border-color: color-mix(in srgb, #16a34a 32%, transparent);
}
.pay-tender-sum.is-partial {
  background: color-mix(in srgb, #d97706 12%, var(--card, #fff));
  border-color: color-mix(in srgb, #d97706 28%, transparent);
}
.pay-sum-paid {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pay-sum-paid span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, color-mix(in srgb, var(--text) 70%, transparent));
}
.pay-sum-paid strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0f172a);
}
.pay-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.pay-status-pill.is-ok {
  background: color-mix(in srgb, #16a34a 18%, var(--card));
  color: color-mix(in srgb, #16a34a 55%, var(--text));
}
.pay-status-pill.is-warn {
  background: color-mix(in srgb, #d97706 18%, var(--card));
  color: color-mix(in srgb, #d97706 50%, var(--text));
}
.pay-status-pill.is-credit {
  background: color-mix(in srgb, #2563eb 16%, var(--card));
  color: color-mix(in srgb, #2563eb 50%, var(--text));
}
.pay-credit-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.pay-credit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0.15rem;
}
.pay-credit-btn {
  flex: 1 1 8rem;
  font-size: 0.82rem !important;
  padding: 0.45rem 0.65rem !important;
  min-height: 2.4rem;
}

.pay-bill-split {
  margin: 0.55rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--primary, #0d9488) 28%, var(--border, #e2e8f0));
  background: color-mix(in srgb, var(--primary, #0d9488) 6%, var(--card, #fff));
}
.pay-bill-split-head {
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}
.pay-bill-split-hint,
.pay-bill-split-note,
.pay-bill-split-warn {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text, #334155) 72%, transparent);
}
.pay-bill-split-warn {
  color: color-mix(in srgb, #b45309 70%, var(--text));
  font-weight: 600;
}
.pay-bill-split-note {
  margin: 0.35rem 0 0;
}
.pay-bill-split-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.pay-bill-split-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
}
.pay-split-mode-btn {
  border: 1px solid color-mix(in srgb, var(--primary, #0d9488) 35%, var(--border, #e2e8f0));
  background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
  color: var(--text, #334155);
  border-radius: 0.45rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.25;
}
.pay-split-mode-btn.is-active {
  background: color-mix(in srgb, var(--primary, #0d9488) 16%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--primary, #0d9488) 55%, var(--border));
  color: color-mix(in srgb, var(--primary, #0d9488) 70%, var(--text));
}
.pay-guest-invoice-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
}
.pay-split-shares-input {
  width: 4.25rem !important;
  min-width: 4.25rem;
  text-align: center;
}
.pay-share-badge {
  margin-inline-start: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary, #0d9488) 14%, transparent);
  color: color-mix(in srgb, var(--primary, #0d9488) 55%, var(--text));
}

.pay-breakdown-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem 0;
}
.pay-bar-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.85rem;
  min-width: 0;
}
.pay-bar-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.pay-bar-track {
  height: 0.6rem;
  background: color-mix(in srgb, var(--text, #94a3b8) 12%, transparent);
  border-radius: 999px;
  overflow: hidden;
  min-width: 0;
}
.pay-bar-track > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #14b8a6);
  border-radius: 999px;
}
.pay-bar-row strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-bar-row small {
  color: color-mix(in srgb, var(--text, #64748b) 85%, transparent);
  min-width: 1.5rem;
  text-align: end;
}

.pay-method-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.pay-method-checks .settings-check-row,
.pay-method-tile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text, #94a3b8) 16%, transparent);
  background: color-mix(in srgb, var(--bg-alt, var(--card)) 40%, var(--card, #fff));
  color: var(--text, #0f172a);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pay-method-checks .settings-check-row:has(input:checked),
.pay-method-tile:has(input:checked) {
  border-color: var(--accent, #0d9488);
  background: color-mix(in srgb, var(--accent, #0d9488) 14%, var(--card, #fff));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0d9488) 18%, transparent);
}
.pay-method-tile.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--bg-alt, #f1f5f9) 70%, var(--card, #fff));
}
.pay-method-tile.is-disabled input {
  cursor: not-allowed;
}
.pay-terminal-guide {
  margin: 0.35rem 0 0.85rem;
  padding-inline-start: 1.25rem;
  line-height: 1.55;
}
.pay-terminal-guide li + li {
  margin-top: 0.25rem;
}

@media (max-width: 720px) {
  .pay-method-chips { grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr)); }
  .pay-tender-amount-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .pay-bar-row { grid-template-columns: 1fr auto; }
  .pay-bar-row .pay-bar-track { grid-column: 1 / -1; order: 3; }
}

/* Narrow POS cart column */
.pos-totals .pay-tender-panel,
.invoice-edit .pay-tender-panel {
  padding: 0.75rem;
}
.pos-totals .pay-method-chips {
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
}

/* Cost / profit / margin box أ¢â‚¬â€‌ matches payment tender panel */
.pos-margin-panel {
  --pay-accent: var(--accent, #0d9488);
  --pay-gap: 0.55rem;
  --pay-radius: 12px;
  margin-top: 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--text, #1e293b) 12%, transparent);
  border-radius: var(--pay-radius);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--pay-accent) 10%, var(--card, #fff)), var(--card, #fff) 48%);
  color: var(--text, #0f172a);
  display: flex;
  flex-direction: column;
  gap: var(--pay-gap);
  min-width: 0;
  box-sizing: border-box;
}
.pos-margin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}
.pos-margin-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.pos-margin-title strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--text, #0f172a) 92%, transparent);
}
.pos-margin-hint {
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text, #64748b) 85%, transparent);
}
.pos-margin-badge {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pay-accent) 14%, transparent);
  color: color-mix(in srgb, var(--pay-accent) 75%, #0f172a);
  white-space: nowrap;
}
.pos-margin-badge.is-ok {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #166534;
}
.pos-margin-badge.is-warn {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #92400e;
}
.pos-margin-badge.is-neg {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #991b1b;
}
.pos-margin-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pos-margin-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.pos-margin-rows > div span:last-child {
  font-weight: 700;
}
.pos-margin-rows .is-ok { color: color-mix(in srgb, #16a34a 55%, var(--text)); }
.pos-margin-rows .is-warn { color: color-mix(in srgb, #d97706 50%, var(--text)); }
.pos-margin-rows .is-neg { color: color-mix(in srgb, #dc2626 55%, var(--text)); }
.pos-totals .pos-margin-panel {
  margin-top: 0.55rem;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.55rem;
  width: 100%;
}
.pos-totals .pay-tender-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100%;
}

.pos-doc-purchase {
  margin-bottom: 0.55rem;
}
.pos-workspace.is-purchase .workflow-strip,
.pos-workspace.is-purchase .purchase-unit-hint,
.pos-workspace.is-purchase .pos-supplier-row,
.pos-workspace.is-purchase .pos-doc-type-badge {
  flex-shrink: 0;
}
.pos-workspace.is-purchase .pos-right .form-field {
  flex-shrink: 0;
}
.purchase-history-panel {
  margin-top: 1rem;
}

.floor-table-wrap { position: relative; }
.floor-table-actions { position: absolute; top: 0.35rem; inset-inline-end: 0.35rem; display: flex; gap: 0.2rem; opacity: 1; }
.floor-table.is-inactive { opacity: .55; filter: grayscale(.3); }
.floor-inactive-tag { font-size: 0.65rem; color: #c62828; }
.row-inactive { opacity: .55; }

/* ?? Virtual restaurant floor (touch) ?? */
.vf-shell { display: flex; flex-direction: column; gap: 0.75rem; }
.vf-topbar {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.85rem 1rem; border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--bg-alt));
  color: var(--text);
}
.vf-hint { margin: 0; font-size: 0.82rem; }
.vf-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vf-leg {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: color-mix(in srgb, var(--text) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
}
.vf-leg i { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: inline-block; }
.vf-leg.free i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.vf-leg.busy i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.vf-leg.reserved i { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.vf-leg.dirty i { background: #a8a29e; box-shadow: 0 0 0 3px rgba(168,162,158,.2); }
.vf-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.45rem; }
.vf-kpi {
  padding: 0.55rem 0.65rem; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.vf-kpi span { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.vf-kpi strong { font-size: 1.1rem; color: var(--text); }
.vf-kpi.free strong { color: #16a34a; }
.vf-kpi.busy strong { color: #ea580c; }
.vf-kpi.dirty strong { color: #78716c; }
.vf-filters .vf-manage-btn { min-height: 2.2rem; white-space: nowrap; }
.vf-hall-tabs { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.15rem; -webkit-overflow-scrolling: touch; }
.vf-hall-tab {
  flex: 0 0 auto; min-width: 6.5rem; min-height: 3.1rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0.1rem; padding: 0.45rem 0.85rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bg-alt));
  background: var(--card); color: var(--text); cursor: pointer;
  touch-action: manipulation; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vf-hall-tab span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.vf-hall-tab strong { font-size: 0.95rem; color: var(--text); }
.vf-hall-tab.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.vf-hall-tab.is-off { opacity: .55; }
.vf-hall-tab:active { transform: scale(.97); }
.vf-map { display: flex; flex-direction: column; gap: 0.85rem; }
.vf-zone {
  border-radius: 20px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-alt));
  background: var(--card);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 6%, transparent);
}
.vf-zone-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}
.vf-zone-head h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.vf-zone-head small { color: var(--text-muted); }
.vf-zone-occ { display: flex; align-items: center; gap: 0.45rem; min-width: 7rem; }
.vf-zone-occ span { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.vf-zone-track {
  flex: 1; height: 0.45rem; border-radius: 99px;
  background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden;
}
.vf-zone-track > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #22c55e);
}
.vf-stage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr));
  gap: 1.1rem 0.85rem;
  padding: 1.15rem 1rem 1.35rem;
  min-height: 12rem;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, color-mix(in srgb, #78716c 12%, var(--card)), color-mix(in srgb, #57534e 10%, var(--card)));
}
.vf-stage-pro {
  grid-template-columns: repeat(auto-fill, minmax(13.25rem, 13.25rem));
  justify-content: start;
  gap: 1.1rem;
}
.vf-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 13.25rem;
}
.vf-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.vf-card-pro {
  width: 13.25rem;
  max-width: 13.25rem;
  height: 21.5rem;
  max-height: 21.5rem;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--card);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent),
    0 14px 28px color-mix(in srgb, #000 22%, transparent);
}
.vf-card-pro .vf-card-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 1.15rem 6.1rem 2.05rem 1.55rem 1.45rem 1.05rem 1.05rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 18.1rem;
  max-height: 18.1rem;
  min-height: 18.1rem;
  padding: 0.45rem 0.45rem 0.3rem;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 1.25rem 1.25rem 0 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card));
  box-shadow: none;
}
.vf-card-pro .vf-card-main > .vf-ring {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  border-radius: 1.05rem 1.05rem 0 0;
}
.vf-hall-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.15rem;
  min-height: 1.15rem;
}
.vf-hall-chip.is-ghost { visibility: hidden; }
.vf-card-main {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.18rem; text-align: center;
  min-height: 8.4rem; width: 100%;
  padding: 0.85rem 0.55rem 0.7rem;
  border: 0; cursor: pointer; color: var(--text);
  border-radius: 1.15rem;
  background: var(--card);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--text) 8%, transparent),
    0 8px 20px color-mix(in srgb, var(--text) 10%, transparent);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .2s ease;
}
.vf-card-main:active { transform: scale(.985); }
.vf-ring {
  position: absolute; inset: 0.22rem; border-radius: 0.95rem; pointer-events: none;
  box-shadow: inset 0 0 0 2.5px rgba(34,197,94,.7);
}
.vf-card.status-0 .vf-ring { box-shadow: inset 0 0 0 2.5px rgba(34,197,94,.75); }
.vf-card.status-1 .vf-ring { box-shadow: inset 0 0 0 2.5px rgba(245,158,11,.85); }
.vf-card.status-2 .vf-ring { box-shadow: inset 0 0 0 2.5px rgba(59,130,246,.8); }
.vf-card.status-3 .vf-ring { box-shadow: inset 0 0 0 2.5px rgba(168,162,158,.8); }
.vf-card.is-ready .vf-ring { box-shadow: inset 0 0 0 2.5px rgba(16,185,129,.85); }
.vf-card.is-await .vf-ring { box-shadow: inset 0 0 0 2.5px rgba(239,68,68,.8); }
.vf-card.is-inactive { opacity: .55; filter: grayscale(.3); }
.vf-card.is-pulse .vf-card-main { animation: vfBusyCard 1.8s ease infinite; }
@keyframes vfBusyCard {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}
.vf-iso-scene { width: 11.4rem; height: 6rem; display: grid; place-items: center; }
.vf-iso-svg { width: 11.4rem; height: 6rem; overflow: visible; }
.vf-iso-cap { fill: #fff; font-size: 11px; font-weight: 800; font-family: inherit; paint-order: stroke fill; stroke: rgba(0,0,0,.35); stroke-width: 2.5px; }
.vf-iso-more-bg { fill: color-mix(in srgb, var(--card) 80%, #000); stroke: color-mix(in srgb, var(--text) 20%, transparent); }
.vf-iso-more { fill: var(--text); font-size: 11px; font-weight: 800; font-family: inherit; }
.vf-iso-leg { fill: #3f3f46; }
.vf-iso-seat { fill: #64748b; }
.vf-iso-back { fill: #475569; }
.vf-iso-guest { fill: #fde68a; stroke: #b45309; stroke-width: 1; }
.vf-iso-chair.is-free .vf-iso-seat { fill: #86efac; }
.vf-iso-chair.is-free .vf-iso-back { fill: #22c55e; }
.vf-iso-scene.status-0 .vf-iso-chair.is-free .vf-iso-seat { fill: #86efac; }
.vf-iso-scene.status-0 .vf-iso-chair.is-free .vf-iso-back { fill: #16a34a; }
.vf-iso-scene.status-1 .vf-iso-chair.is-free .vf-iso-seat { fill: #fde68a; }
.vf-iso-scene.status-1 .vf-iso-chair.is-free .vf-iso-back { fill: #f59e0b; }
.vf-iso-scene.status-1 .vf-iso-chair.is-taken .vf-iso-seat { fill: #f97316; }
.vf-iso-scene.status-1 .vf-iso-chair.is-taken .vf-iso-back { fill: #c2410c; }
.vf-iso-scene.status-2 .vf-iso-chair.is-free .vf-iso-seat { fill: #bfdbfe; }
.vf-iso-scene.status-2 .vf-iso-chair.is-free .vf-iso-back { fill: #3b82f6; }
.vf-iso-scene.status-2 .vf-iso-chair.is-taken .vf-iso-seat { fill: #60a5fa; }
.vf-iso-scene.status-2 .vf-iso-chair.is-taken .vf-iso-back { fill: #1d4ed8; }
.vf-iso-scene.status-3 .vf-iso-chair.is-free .vf-iso-seat { fill: #d6d3d1; }
.vf-iso-scene.status-3 .vf-iso-chair.is-free .vf-iso-back { fill: #78716c; }
.vf-id-block { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 0.08rem; min-height: 2.05rem; }
.vf-code { font-size: 1.2rem; font-weight: 900; letter-spacing: .03em; line-height: 1; color: var(--text); }
.vf-name { font-size: 0.78rem; font-weight: 700; opacity: .95; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; color: var(--text); }
.vf-status-banner { display: flex; align-items: center; justify-content: center; width: calc(100% - 0.4rem); height: 1.45rem; border-radius: 0.55rem; font-size: 0.78rem; font-weight: 900; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.12); }
.vf-status-banner.status-0 { background: linear-gradient(180deg, #4ade80, #16a34a); }
.vf-status-banner.status-1 { background: linear-gradient(180deg, #fb923c, #ea580c); }
.vf-status-banner.status-2 { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.vf-status-banner.status-3 { background: linear-gradient(180deg, #a8a29e, #57534e); }
.vf-meta-row { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0.22rem; width: 100%; height: 1.45rem; min-height: 1.45rem; max-height: 1.45rem; overflow: hidden; }
.vf-seats-pill { padding: 0.12rem 0.4rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; white-space: nowrap; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.vf-badge { margin-top: 0; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.56rem; font-weight: 800; background: color-mix(in srgb, var(--accent) 14%, var(--bg-alt)); color: var(--text); }
.vf-phase { padding: 0.12rem 0.38rem; border-radius: 7px; font-size: 0.58rem; font-weight: 800; background: color-mix(in srgb, #0ea5e9 26%, transparent); color: var(--text); white-space: nowrap; border: 1px solid color-mix(in srgb, #0284c7 30%, transparent); }
.vf-phase.phase-3 { background: color-mix(in srgb, #10b981 30%, transparent); border-color: color-mix(in srgb, #059669 40%, transparent); }
.vf-phase.phase-4 { background: color-mix(in srgb, #ef4444 28%, transparent); border-color: color-mix(in srgb, #dc2626 40%, transparent); }
.vf-pay-badge { padding: 0.1rem 0.36rem; border-radius: 999px; font-size: 0.58rem; font-weight: 900; white-space: nowrap; border: 1px solid transparent; }
.vf-pay-badge.unpaid { background: color-mix(in srgb, #ef4444 28%, transparent); color: #fecaca; border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.vf-pay-badge.paid { background: color-mix(in srgb, #22c55e 28%, transparent); color: #bbf7d0; border-color: color-mix(in srgb, #22c55e 45%, transparent); }
.vf-pay-badge.await { background: color-mix(in srgb, #f97316 28%, transparent); color: #fed7aa; border-color: color-mix(in srgb, #f97316 45%, transparent); }
body.theme-zad-light .vf-pay-badge.unpaid, body.theme-zad .vf-pay-badge.unpaid, body.theme-copper .vf-pay-badge.unpaid { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
body.theme-zad-light .vf-pay-badge.paid, body.theme-zad .vf-pay-badge.paid, body.theme-copper .vf-pay-badge.paid { background: #dcfce7; color: #166534; border-color: #86efac; }
body.theme-zad-light .vf-pay-badge.await, body.theme-zad .vf-pay-badge.await, body.theme-copper .vf-pay-badge.await { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.vf-order { font-size: 0.62rem; font-weight: 800; opacity: .95; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 1.05rem; line-height: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
.vf-action-hint { font-size: 0.62rem; font-weight: 800; color: var(--text); line-height: 1.05rem; height: 1.05rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.vf-card.status-0 .vf-action-hint { color: #4ade80; }
.vf-card.status-1 .vf-action-hint { color: #fdba74; }
.vf-card.status-2 .vf-action-hint { color: #93c5fd; }
body.theme-zad-light .vf-card.status-0 .vf-action-hint, body.theme-zad .vf-card.status-0 .vf-action-hint, body.theme-copper .vf-card.status-0 .vf-action-hint { color: #15803d; }
body.theme-zad-light .vf-card.status-1 .vf-action-hint, body.theme-zad .vf-card.status-1 .vf-action-hint, body.theme-copper .vf-card.status-1 .vf-action-hint { color: #c2410c; }
body.theme-zad-light .vf-card.status-2 .vf-action-hint, body.theme-zad .vf-card.status-2 .vf-action-hint, body.theme-copper .vf-card.status-2 .vf-action-hint { color: #1d4ed8; }
.vf-card-dock { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 0.28rem; height: 3.15rem; padding: 0.35rem 0.4rem 0.45rem; flex-shrink: 0; background: color-mix(in srgb, var(--bg-alt) 70%, var(--card)); border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-sizing: border-box; }
.vf-dock-btn { width: 100%; height: 2.25rem; border-radius: 0.65rem; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--text) 6%, var(--card)); color: var(--text); font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; text-decoration: none; box-shadow: 0 1px 3px color-mix(in srgb, #000 16%, transparent); }
.vf-dock-btn:active:not(:disabled):not(.is-off) { transform: scale(.94); }
.vf-dock-btn.is-off, .vf-dock-btn:disabled { opacity: .35; cursor: default; filter: grayscale(.35); }
.vf-call-btn:not(.is-off):not(:disabled) { background: color-mix(in srgb, #10b981 28%, var(--card)); border-color: color-mix(in srgb, #059669 45%, transparent); }
.vf-pay-btn:not(.is-off):not(:disabled) { background: color-mix(in srgb, #f97316 28%, var(--card)); border-color: color-mix(in srgb, #ea580c 45%, transparent); }
.vf-status-menu { position: relative; width: 100%; height: 2.25rem; }
.vf-status-menu > summary { list-style: none; width: 100%; height: 2.25rem; }
.vf-status-menu > summary::-webkit-details-marker { display: none; }
.vf-status-list { position: absolute; z-index: 30; bottom: calc(100% + 0.3rem); inset-inline: 0; min-width: 8rem; padding: 0.4rem; border-radius: 10px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bg-alt)); box-shadow: 0 12px 28px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 0.2rem; }
.vf-status-list button { border: 0; background: transparent; text-align: start; padding: 0.4rem 0.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: var(--text); cursor: pointer; }
.vf-status-list button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vf-call-bar { margin-bottom: 0.75rem; }
.vf-call-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vf-call-row .grow { flex: 1 1 14rem; min-width: 10rem; }
.rest-filter-row--toolbar { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.rest-filter-row--search { margin-top: 0.55rem; }
.rest-filter-search { width: 100%; }
.vf-kpi.await strong { color: #f87171; }
.vf-unit-actions { display: flex; gap: 0.35rem; }
body.theme-obsidian .vf-card-pro { background: rgba(18, 18, 30, 0.96); box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
body.theme-obsidian .vf-card-dock { background: rgba(8, 8, 16, 0.9); }

/* Legacy circular table (kept for any residual refs) */
.vf-table {
  position: relative; width: 8.6rem; height: 8.6rem;
  border: 0; padding: 0; cursor: pointer; background: transparent; color: inherit;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.vf-table:active { transform: scale(.96); }
.vf-table.is-inactive { opacity: .5; filter: grayscale(.35); }
.vf-seat {
  position: absolute; width: 1.15rem; height: 0.7rem; border-radius: 0.35rem;
  background: color-mix(in srgb, var(--text) 28%, #57534e);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none;
}
.vf-table.seats-2 .s1, .vf-table.seats-2 .s2,
.vf-table.seats-4 .s1, .vf-table.seats-4 .s2, .vf-table.seats-4 .s3, .vf-table.seats-4 .s4,
.vf-table.seats-6 .s1, .vf-table.seats-6 .s2, .vf-table.seats-6 .s3, .vf-table.seats-6 .s4, .vf-table.seats-6 .s5, .vf-table.seats-6 .s6,
.vf-table.seats-8 .vf-seat { opacity: 1; }
.vf-seat.s1 { top: 0.15rem; left: 50%; transform: translateX(-50%); }
.vf-seat.s2 { bottom: 0.15rem; left: 50%; transform: translateX(-50%); }
.vf-seat.s3 { top: 50%; left: 0.1rem; transform: translateY(-50%) rotate(90deg); }
.vf-seat.s4 { top: 50%; right: 0.1rem; transform: translateY(-50%) rotate(90deg); }
.vf-seat.s5 { top: 1.1rem; left: 1.1rem; transform: rotate(-40deg); }
.vf-seat.s6 { top: 1.1rem; right: 1.1rem; transform: rotate(40deg); }
.vf-seat.s7 { bottom: 1.1rem; left: 1.1rem; transform: rotate(40deg); }
.vf-seat.s8 { bottom: 1.1rem; right: 1.1rem; transform: rotate(-40deg); }
.vf-surface {
  position: absolute; inset: 1.05rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.12rem; text-align: center; padding: 0.55rem 0.45rem 0.45rem;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(160deg, #a16207, #78350f 55%, #451a03);
  border: 3px solid color-mix(in srgb, #fef3c7 35%, #92400e);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.28);
  color: #fff7ed; transition: box-shadow .2s ease, filter .2s ease;
}
.vf-table.status-0 .vf-surface { box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 3px rgba(34,197,94,.55), 0 10px 22px rgba(0,0,0,.28); }
.vf-table.status-1 .vf-surface { box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 3px rgba(245,158,11,.7), 0 10px 22px rgba(0,0,0,.28); filter: saturate(1.15); }
.vf-table.status-2 .vf-surface { box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 3px rgba(59,130,246,.65), 0 10px 22px rgba(0,0,0,.28); }
.vf-table.status-3 .vf-surface { box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 3px rgba(168,162,158,.7), 0 10px 22px rgba(0,0,0,.28); filter: grayscale(.25) brightness(.92); }
.vf-table.is-pulse .vf-surface { animation: vfBusy 1.8s ease infinite; }
@keyframes vfBusy {
  0%, 100% { box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 3px rgba(245,158,11,.55), 0 10px 22px rgba(0,0,0,.28); }
  50% { box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 7px rgba(245,158,11,.25), 0 12px 26px rgba(0,0,0,.32); }
}
.vf-stage-dense {
  grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)) !important;
  gap: 0.95rem 0.75rem !important;
  min-height: 16rem;
}
.vf-stage-dense.vf-stage-pro {
  grid-template-columns: repeat(auto-fill, minmax(13.25rem, 13.25rem)) !important;
  gap: 1.1rem !important;
}
.vf-hall-chip {
  max-width: 85%; padding: 0.08rem 0.42rem; border-radius: 999px;
  font-size: 0.58rem; font-weight: 800;
  background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 2;
}
.vf-empty { grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; }
.vf-modal-backdrop {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px);
}
.vf-modal {
  position: fixed; z-index: 12001;
  inset-inline: max(1rem, calc(50% - 28rem));
  top: 6vh; max-height: 88vh; overflow: auto;
  width: min(56rem, calc(100vw - 2rem));
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.vf-modal-close {
  position: absolute; top: 0.65rem; inset-inline-end: 0.75rem;
  width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
@media (max-width: 700px) {
  .vf-card { max-width: 100%; }
  .vf-card-main { min-height: 7.6rem; }
  .vf-table { width: 7.6rem; height: 7.6rem; }
  .vf-stage { grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr)); gap: 0.9rem 0.55rem; }
  .vf-modal { inset-inline: 0.65rem; width: auto; }
}

.pos-shift-banner {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.75rem 0.9rem; border-radius: 12px; margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--card, var(--panel-bg, #fff)));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--input-border, var(--bg-alt, #e5e7eb)));
  animation: fadeUp .4s ease both;
}
.pos-shift-banner.compact { padding: 0.55rem 0.7rem; margin: 0 0 0.5rem; }
.pos-shift-banner .pos-shift-label { display: block; font-size: 0.7rem; color: var(--text-muted); }
.pos-shift-banner strong { display: block; font-size: 1rem; color: var(--text); }
.pos-shift-banner small { display: block; font-size: 0.75rem; color: var(--text-muted); }
.pos-shift-sales { text-align: end; }
.pos-shift-sales span { display: block; font-size: 0.7rem; color: var(--text-muted); }
.pos-shift-sales strong { font-size: 1.1rem; color: var(--accent); }
.pos-shift-banner .btn-secondary { background: var(--card, var(--panel-bg, #fff)); color: var(--text); }

.pos-shift-chip {
  display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: space-between;
  padding: 0.65rem 0.8rem; margin: 0 0 0.55rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card, var(--panel-bg, #fff)));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--input-border, transparent));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}
.pos-shift-chip-main { min-width: 0; flex: 1 1 12rem; }
.pos-shift-chip-label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.1rem; }
.pos-shift-chip strong { display: block; font-size: 0.95rem; color: var(--text); }
.pos-shift-chip-no {
  display: inline-block; margin-inline-start: 0.35rem; padding: 0.05rem 0.4rem;
  border-radius: 6px; font-size: 0.75rem; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.pos-shift-chip small { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
.pos-shift-chip-sales { text-align: end; }
.pos-shift-chip-sales span { display: block; font-size: 0.7rem; color: var(--text-muted); }
.pos-shift-chip-sales strong { font-size: 1.05rem; color: var(--accent); }

.shift-explain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.85rem; }
.shift-explain-card { padding: 0.75rem; border-radius: 10px; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.06); }
.shift-explain-card p { font-size: 0.88rem; margin: 0.35rem 0 0.6rem; color: var(--text-muted); }
.report-filters { margin-bottom: 0.5rem; }

.kds-alert {
  padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 0.75rem;
  display: flex; flex-direction: column; gap: 0.2rem; font-weight: 600;
}
.kds-alert strong { font-size: 0.95rem; }
.kds-alert span { font-size: 0.85rem; font-weight: 500; opacity: .92; }
.kds-alert.danger { background: color-mix(in srgb, #ef4444 18%, var(--card)); color: color-mix(in srgb, #ef4444 75%, var(--text)); border: 1px solid color-mix(in srgb, #ef4444 40%, transparent); }
.kds-alert.warn { background: color-mix(in srgb, #f59e0b 16%, var(--card)); color: color-mix(in srgb, #d97706 70%, var(--text)); border: 1px solid color-mix(in srgb, #f59e0b 38%, transparent); }
.kds-card.is-late { box-shadow: 0 0 0 2px #e53935, 0 4px 14px rgba(229,57,53,.25); animation: latePulse 1.6s ease infinite; }
.kds-late-badge { background: #e53935; color: #fff; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; }
.kds-await-badge { background: #c2410c !important; }
.kds-card.is-await-pay { border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.kds-board-tabs { margin: 0.75rem 0; }
@keyframes latePulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.animate-fade-up { animation: fadeUp .45s ease both; }
.animate-pulse-soft { animation: latePulse 1.8s ease infinite; }

.bh-filters.rest-filter-bar { padding: 0.7rem 0.85rem; }
.bh-filters .rest-filter-row--single { gap: 0.45rem 0.55rem; }
.bh-filters .bh-mode-toggle { flex: 0 0 auto; min-width: 9rem; max-width: 12rem; }
.bh-filters .bh-mode-btns { display: inline-flex; gap: 0.3rem; flex-wrap: nowrap; }
.bh-filters .bh-live-controls { flex: 1 1 14rem; min-width: 12rem; max-width: none !important; }
.bh-filters .bh-live-row { display: flex; align-items: center; gap: 0.45rem; width: 100%; }
.bh-filters .bh-scrub { flex: 1; min-width: 6rem; accent-color: var(--accent); cursor: pointer; }
.bh-filters .bh-scrub-label {
  flex: 0 0 auto; font-size: 0.78rem; font-weight: 700;
  color: var(--text); min-width: 2.8rem; text-align: center;
}
.bh-filters .rest-filter-date { flex: 0 0 9.5rem !important; max-width: 9.5rem !important; }

/* Business Health chrome filters (header row beside fiscal) */
.wa-share-chrome {
    --wa-h: var(--cf-h, 2.35rem);
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.28rem;
    min-height: var(--wa-h);
    height: var(--wa-h);
    max-width: 100%;
    position: relative;
    z-index: 40;
}
.compact-filter-bar.chrome-filter-bar .cf-end-cluster {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-width: 0;
    margin-inline-start: auto;
    overflow: visible;
}
.wa-share-chrome > .wa-pick-panel {
    position: absolute;
    top: calc(100% + 0.3rem);
    inset-inline-end: 0;
    z-index: 90;
}
.wa-phone-panel {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.35rem;
    width: min(16rem, 70vw);
    max-height: none !important;
}
.wa-phone-panel .wa-pick-filter { flex: 1; margin: 0; }
.wa-phone-done {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 8px;
    background: var(--accent, #0078d4);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    flex: 0 0 auto;
}
.wa-share-modes {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    flex: 0 0 auto;
    height: var(--wa-h);
    padding: 0.15rem;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 18%, transparent);
    background: color-mix(in srgb, var(--card, #fff) 90%, var(--accent, #0078d4));
    box-sizing: border-box;
}
.wa-ico-btn {
    width: calc(var(--wa-h) - 0.4rem);
    height: calc(var(--wa-h) - 0.4rem);
    min-width: calc(var(--wa-h) - 0.4rem);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text, #1f2937);
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.wa-ico-btn:hover { background: color-mix(in srgb, var(--accent, #0078d4) 12%, transparent); }
.wa-ico-btn.is-active {
    background: var(--accent, #0078d4);
    color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent, #0078d4) 28%, transparent);
}
.wa-ico-btn.has-value:not(.is-active) {
    background: color-mix(in srgb, #22c55e 16%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}
.wa-pick-wrap {
    position: relative;
    flex: 0 0 auto;
    height: var(--wa-h);
    display: inline-flex;
    align-items: center;
}
.wa-pick-btn { border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 20%, transparent); }
.wa-pick-panel {
    position: absolute;
    top: calc(100% + 0.3rem);
    inset-inline-end: 0;
    width: min(18rem, 72vw);
    max-height: 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 20%, transparent);
    background: var(--card, #fff);
    box-shadow: 0 12px 28px color-mix(in srgb, #0f172a 16%, transparent);
    z-index: 80;
}
.wa-pick-filter {
    width: 100%;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 18%, transparent);
    padding: 0 0.55rem;
    font: inherit;
    font-size: 0.78rem;
    box-sizing: border-box;
    background: var(--input-bg, var(--card, #fff));
    color: var(--text, #1f2937);
}
.wa-pick-list {
    overflow: auto;
    max-height: 10.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.wa-pick-option {
    border: 0;
    background: transparent;
    text-align: start;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-pick-option:hover,
.wa-pick-option.is-selected {
    background: color-mix(in srgb, var(--accent, #0078d4) 12%, transparent);
}
.wa-pick-empty {
    padding: 0.55rem;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    text-align: center;
}
.wa-phone-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    width: min(16rem, 70vw);
    max-height: none;
}
.wa-phone-panel .wa-pick-filter { flex: 1; margin: 0; }
.wa-phone-done {
    flex: 0 0 auto;
    height: 2rem;
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 0;
    background: var(--accent, #0078d4);
    color: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 750;
    cursor: pointer;
}
.cf-end-cluster {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-width: 0;
    margin-inline-start: auto;
}
/* Standalone chrome filters (payroll, reports outside page-context): ONE horizontal row */
.compact-filter-bar.chrome-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    gap: 0.45rem 0.55rem;
    width: 100%;
}
.compact-filter-bar.chrome-filter-bar .compact-filter-fields {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.compact-filter-bar.chrome-filter-bar .cf-end-cluster {
    flex: 0 0 auto;
    margin-inline-start: auto;
}
.compact-filter-bar.chrome-filter-bar .toolbar-icon-group {
    flex-wrap: wrap;
}
.compact-filter-bar.chrome-filter-bar.has-trail-row .cf-trail-row .wa-share-chrome,
.compact-filter-bar.chrome-filter-bar.has-trail-row .cf-trail-row .toolbar-icon-group {
    flex: 0 0 auto;
}
@media (max-width: 900px) {
    .compact-filter-bar.chrome-filter-bar {
        flex-wrap: wrap;
    }
    .compact-filter-bar.chrome-filter-bar .cf-end-cluster {
        margin-inline-start: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .compact-filter-bar.chrome-filter-bar .cf-end-cluster .chrome-date-filter {
        width: 100%;
        justify-content: space-between;
    }
}
.bh-chrome-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--cf-h, 2.35rem);
  height: var(--cf-h, 2.35rem);
  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 18%, transparent);
  background: linear-gradient(105deg, color-mix(in srgb, #22c55e 8%, var(--card, #fff)) 0%, var(--card, #fff) 70%);
  box-sizing: border-box;
  max-width: min(100%, 22rem);
  flex: 1 1 12rem;
}
.bh-chrome-live-btn {
  flex: 0 0 auto;
  height: calc(var(--cf-h, 2.35rem) - 0.5rem);
  min-width: 4.5rem;
  padding: 0 0.65rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 22%, transparent);
  background: color-mix(in srgb, var(--accent, #0078d4) 10%, var(--card, #fff));
  color: var(--accent, #0078d4);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.bh-chrome-live-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bh-chrome-live-btn.is-on {
  background: color-mix(in srgb, #22c55e 18%, var(--card, #fff));
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
  color: #15803d;
}
.bh-chrome-scrub {
  flex: 1 1 auto;
  min-width: 4.5rem;
  accent-color: var(--accent, #0078d4);
  cursor: pointer;
  height: 0.35rem;
}
.bh-chrome-scrub-label {
  flex: 0 0 auto;
  min-width: 2.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  color: var(--text, #1f2937);
}
.bh-chrome-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--cf-h, 2.35rem);
}

.bh-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem 1.4rem;
  align-items: center;
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  margin-bottom: 0.85rem;
  color: #fff;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 18%, transparent);
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #0d9488 140%);
}
.bh-hero.grade-a { background: linear-gradient(135deg, #064e3b, #059669 72%); }
.bh-hero.grade-b { background: linear-gradient(135deg, #0c4a6e, #0284c7 72%); }
.bh-hero.grade-c { background: linear-gradient(135deg, #78350f, #d97706 72%); }
.bh-hero.grade-d, .bh-hero.grade-f { background: linear-gradient(135deg, #7f1d1d, #dc2626 72%); }
.bh-score-wrap { display: grid; place-items: center; }
.bh-score-ring {
  width: 6.6rem; height: 6.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#fff calc(var(--score) * 1%), rgba(255,255,255,.22) 0);
  animation: scoreSpin .75s ease both;
}
.bh-score-inner {
  width: 4.7rem; height: 4.7rem; border-radius: 50%;
  background: rgba(0,0,0,.22);
  display: grid; place-items: center; text-align: center;
  backdrop-filter: blur(2px);
}
.bh-grade { font-size: 1.75rem; font-weight: 800; line-height: 1; display: block; }
.bh-score { font-size: 0.82rem; opacity: .9; display: block; }
@keyframes scoreSpin { from { filter: blur(4px); transform: scale(.86); } to { filter: none; transform: none; } }
.bh-hero-text h2 { margin: 0 0 0.3rem; font-size: 1.35rem; color: #fff; }
.bh-hero-text p { margin: 0; max-width: 34rem; opacity: .93; color: #fff; }
.bh-hero-text small { opacity: .75; color: #fff; }
.bh-hero-mini {
  display: flex; flex-direction: column; gap: 0.45rem; min-width: 9.5rem;
}
.bh-hero-mini > div {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.4rem 0.55rem; border-radius: 10px; background: rgba(255,255,255,.12);
}
.bh-hero-mini span { font-size: 0.68rem; opacity: .85; }
.bh-hero-mini strong { font-size: 0.95rem; color: #fff; }
.bh-hero-mini strong.pos { color: #bbf7d0; }
.bh-hero-mini strong.neg { color: #fecaca; }

.bh-ticker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem;
  padding: 0.55rem 0.85rem; margin-bottom: 0.85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bg-alt));
  color: var(--text); font-size: 0.84rem;
}
.bh-ticker strong { color: var(--text); }
.bh-ticker-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--text-muted);
}
.bh-ticker.is-live .bh-ticker-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: bhPulse 1.2s ease infinite;
}
@keyframes bhPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.bh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.65rem; margin-bottom: 0.9rem;
}
.bh-kpi {
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-alt));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 6%, transparent);
  display: flex; flex-direction: column; gap: 0.3rem;
  animation: fadeUp .5s ease both; animation-delay: calc(var(--d, 0) * 35ms);
}
.bh-kpi.accent {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bg-alt));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.bh-kpi.is-neg strong { color: #ef4444; }
.bh-kpi span, .bh-kpi .hint-tip-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.bh-kpi strong { font-size: 1.05rem; color: var(--text); font-weight: 800; }
.bh-kpi-sub { font-size: 0.65rem; color: var(--text-muted); line-height: 1.3; }
.bh-mini-bar {
  height: 4px; border-radius: 99px; margin-top: 0.25rem;
  background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden;
}
.bh-mini-bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #22c55e));
  transition: width .5s ease;
}
.bh-mini-bar.warn > i { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.bh-insight-list { display: grid; gap: 0.55rem; }
.bh-insight {
  padding: 0.7rem 0.85rem; border-radius: 10px;
  border-inline-start: 4px solid #64748b;
  background: color-mix(in srgb, var(--text) 4%, var(--card));
  color: var(--text);
}
.bh-insight.sev-ok { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--card)); }
.bh-insight.sev-warn { border-color: #ea580c; background: color-mix(in srgb, #ea580c 12%, var(--card)); }
.bh-insight.sev-danger { border-color: #dc2626; background: color-mix(in srgb, #dc2626 12%, var(--card)); }
.bh-insight.sev-info { border-color: #0284c7; background: color-mix(in srgb, #0284c7 12%, var(--card)); }
.bh-insight strong { color: var(--text); }
.bh-insight p { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--text-muted); }

.bh-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.85rem; margin-bottom: 0.85rem;
}
.bh-chart-card { overflow: visible; }
.bh-chart-card .panel-title { color: var(--text); }

.bh-spark { display: flex; align-items: flex-end; gap: 0.28rem; height: 9.5rem; padding-top: 0.5rem; }
.bh-spark-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 0.2rem; min-width: 0; opacity: .45;
  transition: opacity .25s ease, transform .25s ease;
}
.bh-spark-col.is-reached { opacity: .85; }
.bh-spark-col.is-active { opacity: 1; transform: translateY(-2px); }
.bh-spark-bar {
  width: 100%; max-width: 1.35rem; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #0f766e));
  min-height: 4px; transition: height .45s ease;
}
.bh-spark-col.is-active .bh-spark-bar {
  background: linear-gradient(180deg, #fbbf24, var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bh-spark-col span { font-size: 0.62rem; color: var(--text-muted); }
.bh-spark-foot { margin: 0.45rem 0 0; font-size: 0.8rem; }

.bh-gauge-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.bh-gauge { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.bh-gauge-ring {
  --bh-g-accent: var(--accent);
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--bh-g-accent) calc(var(--g) * 1%), color-mix(in srgb, var(--text) 12%, transparent) 0);
  animation: scoreSpin .6s ease both;
}
.bh-gauge-ring > span {
  width: 3.05rem; height: 3.05rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--text);
  font-size: 0.78rem; font-weight: 800;
}
.bh-gauge small { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.bh-gauge small.ok { color: #16a34a; }
.bh-gauge small.warn { color: #ea580c; }

:root, .app-shell {
  --bh-rev: #0d9488;
  --bh-exp: #f59e0b;
  --bh-pay: #6366f1;
  --bh-pur: #94a3b8;
}
.bh-donut-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bh-donut {
  width: 8.5rem; height: 8.5rem; border-radius: 50%;
  box-shadow: inset 0 0 0 18px var(--card);
  animation: scoreSpin .7s ease both;
}
.bh-donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; flex: 1; min-width: 10rem; }
.bh-donut-legend li {
  display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text);
}
.bh-donut-legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; flex-shrink: 0; }
.bh-donut-legend .c-rev { background: var(--bh-rev); }
.bh-donut-legend .c-exp { background: var(--bh-exp); }
.bh-donut-legend .c-pay { background: var(--bh-pay); }
.bh-donut-legend .c-pur { background: var(--bh-pur); }
.bh-donut-legend strong { margin-inline-start: auto; color: var(--text); }

.bh-waterfall { display: grid; gap: 0.55rem; }
.bh-wf-row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.45rem; align-items: center; }
.bh-wf-row > span { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.bh-wf-row > strong { font-size: 0.8rem; color: var(--text); white-space: nowrap; }
.bh-wf-track {
  height: 0.7rem; border-radius: 99px;
  background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden;
}
.bh-wf-fill { height: 100%; border-radius: 99px; transition: width .55s cubic-bezier(.2,.8,.2,1); }
.bh-wf-fill.rev { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.bh-wf-fill.gross { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.bh-wf-fill.cost { background: linear-gradient(90deg, #d97706, #fbbf24); }
.bh-wf-fill.profit { background: linear-gradient(90deg, #16a34a, #4ade80); }
.bh-wf-fill.cash { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.bh-wf-fill.loss { background: linear-gradient(90deg, #dc2626, #fb7185); }

.hall-bar-track .bh-hall-fill.staff,
.bh-hall-fill.staff {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  transition: width .45s ease;
}

@media (max-width: 900px) {
  .bh-hero { grid-template-columns: 1fr; }
  .bh-hero-mini { flex-direction: row; flex-wrap: wrap; }
  .bh-gauge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-wf-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

.settings-check-row {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  margin: 0.35rem 0 0.15rem;
}
.settings-check-row .hint-tip { margin-inline-start: 0.15rem; }

/* Customer display settings ? promo upload */
.cd-settings-lead {
  margin: -0.25rem 0 1rem;
  max-width: 42rem;
}
.panel-title .hint-tip {
  margin-inline-start: 0.35rem;
  vertical-align: middle;
}
.cd-upload-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  background: color-mix(in srgb, var(--bg-alt, #f8fafc) 88%, var(--card, #fff));
}
.cd-upload-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text, #0f172a);
}
.cd-upload-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  padding: 1.15rem 1rem;
  border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--accent, #2563eb) 45%, var(--border, #cbd5e1));
  background: var(--bg-alt, var(--card, #f1f5f9));
  color: var(--text, #0f172a);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cd-upload-drop:hover,
.cd-upload-drop.has-file {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--bg-alt, var(--card, #e2e8f0)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cd-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.cd-upload-icon {
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.9;
  color: var(--accent, #2563eb);
}
.cd-upload-cta {
  font-weight: 800;
  color: var(--accent, #2563eb);
  -webkit-text-fill-color: var(--accent, #2563eb);
  font-size: 0.98rem;
}
.cd-upload-name {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-upload-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}
.cd-upload-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-top: 0.15rem;
}
.org-hall-media {
  margin: 1rem 0 1.6rem;
}
.org-hall-media .muted.tiny,
.org-hall-media .hint {
  color: var(--text-muted, #94a3b8) !important;
  opacity: 1;
}

/* Dark shell themes: solid glass tile (no white paper / pale ink) */
.app-shell.theme-obsidian .cd-upload-drop,
.app-shell.theme-midnight .cd-upload-drop,
.app-shell.theme-copper .cd-upload-drop,
.app-shell.theme-zad .cd-upload-drop,
body.theme-obsidian .app-shell .cd-upload-drop,
body.theme-midnight .app-shell .cd-upload-drop,
body.theme-copper .app-shell .cd-upload-drop,
body.theme-zad .app-shell .cd-upload-drop {
  background: #161622 !important;
  border-color: color-mix(in srgb, var(--accent, #a78bfa) 55%, #475569) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 28px rgba(0,0,0,0.35);
}
.app-shell.theme-obsidian .cd-upload-drop:hover,
.app-shell.theme-obsidian .cd-upload-drop.has-file,
.app-shell.theme-midnight .cd-upload-drop:hover,
.app-shell.theme-midnight .cd-upload-drop.has-file,
.app-shell.theme-copper .cd-upload-drop:hover,
.app-shell.theme-copper .cd-upload-drop.has-file,
.app-shell.theme-zad .cd-upload-drop:hover,
.app-shell.theme-zad .cd-upload-drop.has-file,
body.theme-obsidian .app-shell .cd-upload-drop:hover,
body.theme-obsidian .app-shell .cd-upload-drop.has-file,
body.theme-zad .app-shell .cd-upload-drop:hover,
body.theme-zad .app-shell .cd-upload-drop.has-file {
  background: #1c1c2e !important;
  border-color: var(--accent, #a78bfa) !important;
}
.app-shell.theme-obsidian .cd-upload-cta,
.app-shell.theme-midnight .cd-upload-cta,
.app-shell.theme-copper .cd-upload-cta,
.app-shell.theme-zad .cd-upload-cta,
body.theme-obsidian .app-shell .cd-upload-cta,
body.theme-zad .app-shell .cd-upload-cta {
  color: #ddd6fe !important;
  -webkit-text-fill-color: #ddd6fe !important;
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}
.app-shell.theme-obsidian .cd-upload-note,
.app-shell.theme-obsidian .cd-upload-name,
.app-shell.theme-obsidian .cd-upload-icon,
.app-shell.theme-midnight .cd-upload-note,
.app-shell.theme-midnight .cd-upload-name,
.app-shell.theme-zad .cd-upload-note,
.app-shell.theme-zad .cd-upload-name,
.app-shell.theme-zad .cd-upload-icon,
body.theme-obsidian .app-shell .cd-upload-note,
body.theme-obsidian .app-shell .cd-upload-name,
body.theme-zad .app-shell .cd-upload-note,
body.theme-zad .app-shell .cd-upload-name {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  opacity: 1 !important;
}
.app-shell.theme-obsidian .org-hall-media .muted,
.app-shell.theme-zad .org-hall-media .muted,
body.theme-obsidian .app-shell .org-hall-media .muted,
body.theme-zad .app-shell .org-hall-media .muted {
  color: #94a3b8 !important;
}

/* Light theme stays readable on pale tiles */
.app-shell.theme-zad-light .cd-upload-drop,
body.theme-zad-light .app-shell .cd-upload-drop {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, #94a3b8) !important;
}
.app-shell.theme-zad-light .cd-upload-cta,
body.theme-zad-light .app-shell .cd-upload-cta {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  text-shadow: none;
}
.app-shell.theme-zad-light .cd-upload-note,
body.theme-zad-light .app-shell .cd-upload-note {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
.theme-obsidian .org-hall-media .muted,
.theme-obsidian .org-hall-media .muted.tiny,
body.theme-obsidian .org-hall-media .muted,
body.theme-obsidian .org-hall-media .muted.tiny {
  color: #94a3b8 !important;
}
.org-form-card .shop-offer-panel {
  margin-top: 0.35rem;
  margin-bottom: 1.35rem;
}
.shop-offer-wizard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.shop-offer-step {
  padding: 14px 16px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 16%, var(--border, #e2e8f0));
  background: color-mix(in srgb, var(--accent, #2563eb) 4%, var(--surface, var(--card, #fff)));
}
.shop-offer-step-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.shop-offer-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #2563eb), color-mix(in srgb, var(--accent, #2563eb) 55%, #0f172a));
}
.shop-offer-step-head h5 {
  margin: 0 0 2px;
  font-size: .95rem;
  font-weight: 800;
}
.shop-offer-step-head p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  opacity: .72;
}
.shop-offer-active-check {
  align-self: end;
  margin-bottom: 6px;
}
.shop-offer-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-offer-step .searchable-select-wrap {
  width: 100%;
}
.shop-offer-form .shop-offer-days { display: flex; flex-direction: column; gap: 8px; }
.shop-offer-day-row { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.shop-offer-badge-chip {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}
.shop-offer-sort-hint {
  margin: 0;
  align-self: center;
}
.shop-offer-scope-chip {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
}
.shop-offer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .02em;
  white-space: nowrap;
}
.shop-offer-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.shop-offer-status.is-live {
  color: #047857;
  background: color-mix(in srgb, #10b981 16%, #fff);
  border: 1px solid color-mix(in srgb, #10b981 35%, transparent);
}
.shop-offer-status.is-active {
  color: #1d4ed8;
  background: color-mix(in srgb, #3b82f6 14%, #fff);
  border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent);
}
.shop-offer-status.is-soon {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 16%, #fff);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.shop-offer-status.is-ended {
  color: #6b7280;
  background: color-mix(in srgb, #9ca3af 14%, #fff);
  border: 1px solid color-mix(in srgb, #9ca3af 30%, transparent);
}
.shop-offer-status.is-off {
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 12%, #fff);
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
}
.shop-offer-overlap-warn {
  border-color: color-mix(in srgb, #f59e0b 45%, transparent) !important;
  background: color-mix(in srgb, #f59e0b 12%, transparent) !important;
}
.theme-obsidian .shop-offer-status.is-live,
body.theme-obsidian .shop-offer-status.is-live {
  color: #6ee7b7;
  background: rgba(16, 185, 129, .16);
}
.theme-obsidian .shop-offer-status.is-active,
body.theme-obsidian .shop-offer-status.is-active {
  color: #93c5fd;
  background: rgba(59, 130, 246, .16);
}
.theme-obsidian .shop-offer-status.is-soon,
body.theme-obsidian .shop-offer-status.is-soon {
  color: #fcd34d;
  background: rgba(245, 158, 11, .16);
}
.theme-obsidian .shop-offer-status.is-ended,
body.theme-obsidian .shop-offer-status.is-ended {
  color: #cbd5e1;
  background: rgba(148, 163, 184, .14);
}
.theme-obsidian .shop-offer-status.is-off,
body.theme-obsidian .shop-offer-status.is-off {
  color: #fca5a5;
  background: rgba(239, 68, 68, .14);
}
.shop-offer-table-wrap .sort-hint {
  margin: .55rem 0 0;
  font-size: .78rem;
}
.shop-offer-table-wrap .data-table td.shop-offer-row-actions,
.shop-offer-table-wrap .data-table th.col-actions {
  width: 11.5rem;
  min-width: 11.5rem;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.shop-offer-row-actions {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.shop-offer-row-actions .btn-sm {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.shop-offer-delete-btn {
  color: #b91c1c;
  border-color: color-mix(in srgb, #ef4444 35%, var(--input-border, #ddd));
}
.org-hall-preview {
  margin-top: 0.15rem;
  max-height: 8rem;
  object-fit: cover;
  border-radius: 0.7rem;
}
.org-hall-preview-video {
  margin-top: 0.15rem;
  max-width: 100%;
  max-height: 10rem;
  border-radius: 0.7rem;
}
.cd-upload-status {
  font-size: 0.82rem;
  line-height: 1.4;
}
.cd-status-ok code {
  font-size: 0.8em;
  word-break: break-all;
}
.cd-status-muted {
  color: var(--text-muted, #64748b);
}

/* POS toolbar / status ? last in cascade to beat Bootstrap .badge white text */
.app-shell .pos-mode-bar > .pos-tab:not(.is-active) {
    color: #201f1e !important;
    -webkit-text-fill-color: #201f1e;
    background: #ffffff !important;
}
.app-shell .pos-mode-bar > .pos-tab.is-active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}
.app-shell .pos-mode-bar > .pos-mode-action {
    color: #004578 !important;
    -webkit-text-fill-color: #004578;
    background: #ffffff !important;
    border: 1.5px solid #0078d4 !important;
}
.app-shell .pos-status-pill.is-waiting {
    background: #ffedd5 !important;
    color: #9a3412 !important;
    -webkit-text-fill-color: #9a3412;
}
.app-shell .pos-status-pill.is-paid {
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534;
}
.app-shell .pos-status-pill.is-cancelled {
    background: #f1f5f9 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155;
}

/* Force readable POS tab labels on light theme */
.app-shell.theme-zad-light .pos-mode-bar > .pos-tab:not(.is-active),
body.theme-zad-light .app-shell .pos-mode-bar > .pos-tab:not(.is-active) {
    color: #201f1e !important;
    -webkit-text-fill-color: #201f1e !important;
    background: #ffffff !important;
    border-color: #c8c6c4 !important;
}
.app-shell.theme-zad-light .pos-mode-bar > .pos-tab.is-active,
body.theme-zad-light .app-shell .pos-mode-bar > .pos-tab.is-active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* ?? Document line rows (PO / GRN / transfers) ?? */
.doc-entry-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem 1.25rem;
}
.doc-entry-meta {
    margin: 0;
}
.doc-lines-title {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.doc-lines-editor {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem 0.7rem 0.85rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 5%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-alt, #e5e7eb));
}
.doc-lines-head,
.doc-line-row {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1.55fr) minmax(5.25rem, 0.4fr) minmax(7.25rem, 0.6fr) 2.4rem;
    gap: 0.45rem 0.55rem;
    align-items: start;
    width: 100%;
}
.doc-lines-editor.no-cost .doc-lines-head,
.doc-lines-editor.no-cost .doc-line-row {
    grid-template-columns: 2.1rem minmax(0, 1.8fr) minmax(6rem, 0.5fr) 2.4rem;
}
.doc-lines-head {
    padding: 0 0.15rem 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 18%, transparent);
    align-items: end;
}
.doc-line-row {
    padding: 0.35rem 0.15rem;
    border-radius: 10px;
    background: var(--card, #fff);
    border: 1px solid color-mix(in srgb, var(--input-border, #d1d5db) 80%, transparent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.doc-line-row:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.doc-line-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.doc-line-item,
.doc-line-qty,
.doc-line-cost {
    min-width: 0;
}
.doc-line-item .searchable-select-wrap,
.doc-line-item .searchable-select-trigger {
    width: 100%;
}
.doc-line-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.2rem;
}
.doc-line-del {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
    background: color-mix(in srgb, #ef4444 8%, var(--card, #fff));
    color: #b91c1c;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.doc-line-del:hover:not(:disabled) {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}
.doc-line-del:disabled {
    opacity: 0.35;
    cursor: default;
}
.doc-lines-add-wrap {
    display: flex;
    justify-content: center;
    padding-top: 0.35rem;
}
.doc-lines-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: min(16rem, 70%);
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--card, #fff));
    color: var(--accent, #2563eb) !important;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.doc-lines-add-btn:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--card, #fff));
    border-style: solid;
    transform: translateY(-1px);
}
.doc-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.25rem;
    padding: 0.95rem 0.5rem 0.15rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--bg-alt, #e5e7eb));
}
.doc-form-actions .btn-primary,
.doc-form-actions .btn-secondary {
    min-width: 8.5rem;
    padding: 0.65rem 1.35rem;
    font-weight: 700;
}
@media (max-width: 820px) {
    .doc-lines-head { display: none; }
    .doc-lines-head,
    .doc-line-row,
    .doc-lines-editor.no-cost .doc-line-row {
        grid-template-columns: 2rem minmax(0, 1fr) 2.2rem;
        grid-template-areas:
            "num item actions"
            "num qty actions"
            "num cost actions";
    }
    .doc-lines-editor.no-cost .doc-line-row {
        grid-template-areas:
            "num item actions"
            "num qty actions";
    }
    .doc-line-num { grid-area: num; align-self: start; margin-top: 0.55rem; }
    .doc-line-item { grid-area: item; }
    .doc-line-qty { grid-area: qty; }
    .doc-line-cost { grid-area: cost; }
    .doc-line-actions { grid-area: actions; align-self: start; margin-top: 0.35rem; }
}

/* ?? Supplier portal polish ?? */
.supplier-portal-shell,
.sp-finance-simple,
.sp-section,
.supplier-finance-hub {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.sp-finance-simple { gap: 0.9rem; }
.sp-welcome { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--card)), color-mix(in srgb, var(--accent) 4%, var(--card))); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--bg-alt)); width: 100%; box-sizing: border-box; position: relative; overflow: hidden; }
.sp-welcome::before { content: ""; position: absolute; inset-inline-end: -1.5rem; top: -1.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; }
.sp-welcome-inner { display: flex; align-items: center; gap: 0.85rem; position: relative; z-index: 1; min-width: 0; }
.sp-welcome-avatar { width: 2.75rem; height: 2.75rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0f172a)); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); flex-shrink: 0; }
.sp-welcome-avatar svg { width: 1.35rem; height: 1.35rem; }
.sp-welcome-title { margin: 0; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; }
.sp-explain { padding: 0.95rem 1.1rem; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); margin-bottom: 0.35rem; width: 100%; box-sizing: border-box; display: flex; gap: 0.75rem; align-items: flex-start; }
.sp-explain-ico { width: 2.2rem; height: 2.2rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.sp-explain-ico svg { width: 1.15rem; height: 1.15rem; }
.sp-explain strong { display: block; margin-bottom: 0.35rem; font-size: 0.98rem; }
.sp-explain p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: 0.86rem; }
.sp-explain-list { margin: 0.55rem 0 0; padding-inline-start: 1.2rem; color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
.sp-explain-body { min-width: 0; flex: 1; }

.sp-admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.sp-admin-hint {
    margin: 0;
    flex: 1 1 14rem;
    min-width: 0;
    line-height: 1.45;
}
.sp-admin-toolbar .toolbar-icon-group {
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* Short professional page lead (no design/training callouts) */
.page-lead {
    margin: 0 0 0.9rem;
    max-width: 42rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}

/* Compact guide / alert — header icon tools + offline cluster (swapped slots) */
.top-bar-offline-cluster,
.top-bar-icon-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-width: 0;
    min-height: 36px;
}
.top-bar-offline-cluster {
    max-width: none;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    gap: 0.3rem;
}
.top-bar-icon-tools {
    padding: 2px 2px;
}
.top-bar-page-actions {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    flex: 0 1 auto;
    justify-content: flex-start;
    min-width: 0;
}
.top-bar-page-actions-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}
.top-bar-page-actions-inner:empty {
    display: none;
}
.top-bar-page-actions:has(.top-bar-page-actions-inner:empty),
.top-bar-page-actions:not(:has(*)) {
    display: none;
}

/* Compact in-page action rail — replaces full-width HeaderTools strip + top-bar page icons */
.page-action-rail {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 0.75rem;
    min-height: 0;
}
.page-action-rail__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-wrap: wrap;
    padding: 0.28rem 0.4rem;
    border-radius: 999px;
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--card, #fff) 92%, #0f766e) 0%,
            var(--card, #fff) 100%);
    border: 1px solid color-mix(in srgb, #0f766e 18%, var(--border, #e2e8f0));
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
        0 8px 20px color-mix(in srgb, #0f766e 8%, transparent);
}
.page-action-rail__pill .toolbar-icon-group {
    margin: 0;
}
.page-action-rail__pill > * {
    flex: 0 0 auto;
}
html[dir="rtl"] .page-action-rail {
    justify-content: flex-start;
}
.theme-dark .page-action-rail__pill,
.theme-zad-dark .page-action-rail__pill {
    background: color-mix(in srgb, var(--card, #1e293b) 92%, #14b8a6);
    border-color: color-mix(in srgb, #14b8a6 28%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.page-guide-chip,
.kds-toolbar-chip {
    display: none;
}
.guide-pop {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}
.guide-pop-trigger {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--bg-alt, #e2e8f0);
    background: var(--bg, #fff);
    color: var(--accent, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    touch-action: manipulation;
}
.guide-pop-trigger:hover,
.guide-pop-trigger.is-open {
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--bg, #fff));
    border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, var(--bg-alt, #e2e8f0));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #2563eb) 16%, transparent);
}
.guide-pop--alert .guide-pop-trigger {
    color: #c2410c;
}
.guide-pop--alert .guide-pop-trigger:hover,
.guide-pop--alert .guide-pop-trigger.is-open {
    background: color-mix(in srgb, #ea580c 14%, var(--bg, #fff));
    border-color: color-mix(in srgb, #ea580c 40%, var(--bg-alt, #e2e8f0));
    box-shadow: 0 2px 8px color-mix(in srgb, #ea580c 18%, transparent);
}
.guide-pop-svg { display: block; }
.guide-pop-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    background: #dc2626;
    color: #fff;
}
.guide-pop-host {
    position: relative;
    z-index: 10045;
}
.guide-pop-layer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
}
.guide-pop-layer > .guide-pop-scrim,
.guide-pop-layer > .guide-pop-panel {
    pointer-events: auto;
}
.guide-pop-scrim {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
}
.guide-pop-panel {
    position: fixed;
    z-index: 10051;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 94vw);
    max-height: min(82vh, 580px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 28%, #e2e8f0);
    border-top: 3px solid var(--accent, #2563eb);
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.32);
    overflow: hidden;
    animation: guide-pop-in 0.22s ease both;
    isolation: isolate;
}
.guide-pop-panel.is-rich {
    width: min(480px, 94vw);
}
.guide-pop--alert .guide-pop-panel,
.guide-pop-layer.guide-pop--alert .guide-pop-panel {
    border-color: color-mix(in srgb, #f59e0b 40%, #e2e8f0);
    border-top-color: #f59e0b;
}
@keyframes guide-pop-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.guide-pop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text, #0f172a) 10%, transparent);
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--card, #fff));
}
.guide-pop--alert .guide-pop-head {
    background: color-mix(in srgb, #f59e0b 12%, var(--card, #fff));
}
.guide-pop-head-main {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}
.guide-pop-head-mark {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
}
.guide-pop--alert .guide-pop-head-mark {
    color: #c2410c;
    background: color-mix(in srgb, #ea580c 16%, transparent);
}
.guide-pop-head-copy {
    min-width: 0;
}
.guide-pop-head-copy strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.guide-pop-head-copy p {
    margin: 0.28rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}
.guide-pop-x {
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text, #0f172a) 14%, transparent);
    background: color-mix(in srgb, var(--text, #0f172a) 5%, var(--card, #fff));
    color: var(--text, #0f172a);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.guide-pop-x:hover {
    background: color-mix(in srgb, var(--text, #0f172a) 10%, var(--card, #fff));
}
.guide-pop-body {
    padding: 0.7rem 0.85rem 0.85rem;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.guide-sec {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.guide-sec-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #2563eb);
}
html[dir="rtl"] .guide-sec-label,
html.is-rtl .guide-sec-label,
.guide-pop-layer.is-rtl .guide-sec-label,
.guide-pop-layer[dir="rtl"] .guide-sec-label,
.guide-pop-layer.is-dark-theme[dir="rtl"] .guide-sec-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
    font-weight: 700;
}
.guide-sec--tips .guide-sec-label { color: #0f766e; }
.guide-sec--notes .guide-sec-label { color: #b45309; }
.guide-sec--formulas .guide-sec-label { color: #4338ca; }
.guide-sec-ico {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.guide-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.guide-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.72rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 2px;
    background: color-mix(in srgb, var(--accent, #2563eb) 28%, transparent);
    border-radius: 2px;
}
.guide-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.55rem 1fr;
    gap: 0.55rem;
    align-items: start;
    padding: 0.35rem 0;
}
.guide-timeline-num {
    position: relative;
    z-index: 1;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px var(--guide-surface, var(--card, #fff));
}
.guide-timeline-copy {
    min-width: 0;
    padding: 0.2rem 0.55rem 0.35rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text, #0f172a);
}
.guide-tip-list,
.guide-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.guide-tip-list li,
.guide-note-list li {
    position: relative;
    padding: 0.45rem 0.65rem 0.45rem 0.7rem;
    padding-inline-start: 0.7rem;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    border: 1px solid transparent;
}
.guide-tip-list li {
    background: color-mix(in srgb, #0d9488 8%, var(--card, #fff));
    border-color: color-mix(in srgb, #0d9488 16%, transparent);
    color: var(--text, #0f172a);
}
.guide-note-list li {
    background: color-mix(in srgb, #f59e0b 10%, var(--card, #fff));
    border-color: color-mix(in srgb, #f59e0b 22%, transparent);
    color: var(--text, #0f172a);
}
.guide-formula-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.guide-formula-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: color-mix(in srgb, #4f46e5 7%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, #4f46e5 16%, transparent);
}
.guide-formula-card strong {
    font-size: 0.78rem;
    font-weight: 800;
    color: color-mix(in srgb, #4338ca 70%, var(--text, #0f172a));
}
.guide-formula-card code,
.guide-formula-expr {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text, #0f172a);
    background: color-mix(in srgb, #4f46e5 6%, transparent);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    white-space: pre-wrap;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    display: block;
}
.guide-formula-card small {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    line-height: 1.35;
}
.guide-pop-extra { margin-top: 0.1rem; }
.guide-pop-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.15rem;
}
.guide-pop-links-label {
    width: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}
.guide-link-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    text-decoration: none;
    line-height: 1.25;
    max-width: 100%;
}
.guide-link-chip small {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.75;
    white-space: normal;
}
.guide-sec--links .guide-sec-label { color: #0369a1; }
.guide-sec--video .guide-sec-label { color: #be123c; }
.guide-video-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.guide-video-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}
.guide-video {
    width: 100%;
    max-height: 220px;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid color-mix(in srgb, var(--text, #0f172a) 12%, transparent);
}
.guide-video-fallback {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, #be123c 8%, var(--card, #fff));
    border: 1px dashed color-mix(in srgb, #be123c 35%, transparent);
    font-size: 0.78rem;
    line-height: 1.4;
}
.guide-pop-foot {
    margin: 0;
    padding: 0.55rem 0.9rem 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--text, #0f172a) 10%, transparent);
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
    background: color-mix(in srgb, var(--text, #0f172a) 3%, var(--card, #fff));
}
a.guide-pop-foot-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
a.guide-pop-foot-link:hover {
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--card, #fff));
    color: var(--accent, #2563eb);
}
.guide-pop-foot-cta {
    display: block;
    font-weight: 700;
    color: var(--accent, #2563eb);
}
.guide-pop-call {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.guide-pop-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}
.guide-pop-textarea,
.guide-pop-panel .field-input,
.guide-pop-panel textarea.field-input,
.guide-pop-panel input.field-input {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--input-text, var(--text, #0f172a));
    background: var(--input-bg, var(--card, #fff));
    border: 1px solid var(--input-border, color-mix(in srgb, var(--text, #0f172a) 16%, transparent));
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    caret-color: var(--input-text, var(--text, #0f172a));
}
.guide-pop-panel .field-input {
    min-height: 2.35rem;
    resize: none;
}
.guide-pop-textarea::placeholder,
.guide-pop-panel .field-input::placeholder,
.guide-pop-panel textarea.field-input::placeholder {
    color: var(--input-placeholder, var(--text-muted, #94a3b8));
    opacity: 1;
}
.guide-pop-textarea[dir="rtl"],
.guide-pop-panel textarea.field-input[dir="rtl"] {
    text-align: right;
}
.guide-pop-textarea[dir="ltr"],
.guide-pop-panel textarea.field-input[dir="ltr"] {
    text-align: left;
}
.guide-pop-textarea[dir="rtl"]::placeholder,
.guide-pop-panel textarea.field-input[dir="rtl"]::placeholder {
    text-align: right;
    direction: rtl;
}
.guide-pop-textarea[dir="ltr"]::placeholder,
.guide-pop-panel textarea.field-input[dir="ltr"]::placeholder {
    text-align: left;
    direction: ltr;
}
.guide-pop-textarea:focus,
.guide-pop-panel .field-input:focus,
.guide-pop-panel textarea.field-input:focus {
    outline: none;
    border-color: var(--input-focus, var(--accent, #2563eb));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}
.guide-pop-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.call-desk {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.call-desk-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    padding: 0.2rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text, #0f172a) 6%, transparent);
}
.call-desk-tab {
    border: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    cursor: pointer;
}
.call-desk-tab.is-active {
    background: var(--card, #fff);
    color: var(--text, #0f172a);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.call-desk-preview {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}
.call-desk-preview-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.call-desk-preview-ar,
.call-desk-preview-en {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    font-weight: 650;
    color: var(--text, #0f172a);
}
.call-desk-preview-en {
    opacity: 0.82;
    font-weight: 600;
}
.call-desk-hint,
.call-desk-warn {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
}
.call-desk select.field-input {
    min-height: 2.4rem;
}
.call-desk-warn {
    color: #b45309;
    font-weight: 650;
}
.call-desk-free-link {
    align-self: flex-start;
    border: 0;
    background: none;
    padding: 0;
    color: var(--accent, #2563eb);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
}
.call-desk-free-link:hover { text-decoration: underline; }
.call-desk-status {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 650;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.call-desk-status.is-warn {
    background: color-mix(in srgb, #dc2626 10%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, #dc2626 22%, transparent);
    color: #b91c1c;
}
.call-desk-status.is-ok {
    background: color-mix(in srgb, #059669 10%, var(--card, #fff));
    border: 1px solid color-mix(in srgb, #059669 22%, transparent);
    color: #047857;
}
.guide-pop-panel:has(.call-desk) {
    max-height: min(92vh, 760px);
    overflow: hidden;
}
.guide-pop-panel:has(.call-desk) .guide-pop-body {
    overflow: auto;
    min-height: 0;
}
.guide-pop-panel:has(.call-desk) .guide-pop-foot,
.guide-pop-panel:has(.call-desk) .guide-pop-head {
    flex-shrink: 0;
}
.guide-pop-panel .call-desk .searchable-select-wrap {
    z-index: 3;
}
.guide-pop-panel .call-desk .searchable-select-panel {
    z-index: 10070;
    max-height: 14rem;
}

/* Kitchen filter ? single professional row */
.kds-filter-bar {
    padding: 0.55rem 0.7rem !important;
}
.kds-filter-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.kds-filter-search {
    flex: 1 1 12rem;
    min-width: 8rem;
    max-width: 100%;
}
.kds-filter-type {
    flex: 0 1 9.5rem;
    min-width: 7rem;
}
.kds-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.15rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text, #0f172a) 14%, transparent);
    background: color-mix(in srgb, var(--text, #0f172a) 4%, var(--card, #fff));
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kds-filter-chip.is-on {
    color: var(--accent, #2563eb);
    border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, transparent);
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--card, #fff));
}
.kds-filter-chip.is-on.is-warn {
    color: #b45309;
    border-color: color-mix(in srgb, #f59e0b 45%, transparent);
    background: color-mix(in srgb, #f59e0b 14%, var(--card, #fff));
}
.kds-filter-icons {
    flex: 0 0 auto;
    margin-inline-start: auto;
}
.kds-filter-flash {
    flex: 0 1 auto;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text-muted, #64748b);
    pointer-events: none;
}
.kds-filter-status {
    flex: 0 1 auto;
    font-size: 0.75rem;
}
@media (max-width: 900px) {
    .kds-filter-row {
        flex-wrap: wrap;
    }
    .kds-filter-search {
        flex: 1 1 100%;
        max-width: none;
    }
    .kds-filter-icons {
        margin-inline-start: 0;
    }
}

/* Merged search + actions filter row */
.rest-filter-row--merged {
    display: grid;
    grid-template-columns: minmax(11rem, 1.15fr) minmax(16rem, 1.85fr);
    gap: 0.65rem;
    align-items: center;
}
.rest-filter-col--search {
    min-width: 0;
}
.rest-filter-col--search .field-input,
.rest-filter-col--search input.rest-filter-search {
    width: 100%;
}
.rest-filter-col--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    justify-content: flex-end;
}
.rest-filter-col--actions .rest-filter-status,
.rest-filter-col--actions .searchable-select-wrap {
    min-width: 8.5rem;
    max-width: 12rem;
}
.rest-filter-check-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}
@media (max-width: 900px) {
    .rest-filter-row--merged {
        grid-template-columns: 1fr;
    }
    .rest-filter-col--actions {
        justify-content: flex-start;
    }
}

.vf-topbar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.vf-topbar-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-inline-start: auto;
}

/* Legacy class kept for older markup; content moved into GuidePopover */
.sc-page-guide { display: none; }
.sc-page-guide-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.sc-page-guide-icon {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
}
.sc-page-guide-copy {
    min-width: 0;
    flex: 1;
}
.sc-page-guide-copy strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    color: var(--text, #0f172a);
}
.sc-page-guide-copy p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}
.sc-page-guide-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: scstep;
}
.sc-page-guide-steps li {
    counter-increment: scstep;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text, #0f172a);
    background: color-mix(in srgb, var(--card, #fff) 88%, var(--accent, #2563eb));
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 16%, transparent);
}
.sc-page-guide-steps li::before {
    content: counter(scstep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    background: var(--accent, #2563eb);
}
.sc-page-guide-extra {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.sc-page-guide-extra p { margin: 0; }
.doc-lines-title .hint-tip { margin-inline-start: 0.25rem; }
.field-label .hint-tip { margin-inline-start: 0.2rem; }
.sp-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.15rem 0 0.35rem;
    width: 100%;
    align-items: stretch;
}
.sp-kpi {
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--bg-alt);
    box-shadow: 0 1px 0 color-mix(in srgb, #000 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-height: 5.1rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}
.sp-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, #000 8%, transparent); }
.sp-kpi-top { display: flex; align-items: center; gap: 0.5rem; }
.sp-kpi-ico {
    width: 2rem; height: 2rem; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.sp-kpi-ico svg { width: 1.05rem; height: 1.05rem; }
.sp-kpi-label { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; line-height: 1.25; }
.sp-kpi strong, .sp-kpi-value { font-size: 1.15rem; letter-spacing: -0.015em; word-break: break-word; font-weight: 800; }
.sp-kpi-sub { font-size: 0.7rem; color: var(--text-muted); line-height: 1.3; }
.sp-kpi-meter { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--bg-alt) 80%, transparent); margin-top: 0.35rem; overflow: hidden; }
.sp-kpi-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
.sp-kpi--balance { border-color: color-mix(in srgb, var(--accent) 35%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); }
.sp-kpi--balance .sp-kpi-ico { color: #fff; background: var(--accent); }
.sp-kpi--purchases { border-color: color-mix(in srgb, #1565c0 28%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #1565c0 10%, var(--card)), var(--card)); }
.sp-kpi--purchases .sp-kpi-ico { color: #1565c0; background: color-mix(in srgb, #1565c0 14%, transparent); }
.sp-kpi--pay { border-color: color-mix(in srgb, #2e7d32 30%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #2e7d32 10%, var(--card)), var(--card)); }
.sp-kpi--pay .sp-kpi-ico { color: #2e7d32; background: color-mix(in srgb, #2e7d32 14%, transparent); }
.sp-kpi--pay .sp-kpi-meter > span { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.sp-kpi--receipt { border-color: color-mix(in srgb, #0277bd 30%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #0277bd 10%, var(--card)), var(--card)); }
.sp-kpi--receipt .sp-kpi-ico { color: #0277bd; background: color-mix(in srgb, #0277bd 14%, transparent); }
.sp-kpi--stock { border-color: color-mix(in srgb, #00897b 30%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #00897b 10%, var(--card)), var(--card)); }
.sp-kpi--stock .sp-kpi-ico { color: #00897b; background: color-mix(in srgb, #00897b 14%, transparent); }
.sp-kpi--stock .sp-kpi-meter > span { background: linear-gradient(90deg, #00897b, #4db6ac); }
.sp-kpi--value { border-color: color-mix(in srgb, #6d4c41 28%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #6d4c41 10%, var(--card)), var(--card)); }
.sp-kpi--value .sp-kpi-ico { color: #6d4c41; background: color-mix(in srgb, #6d4c41 14%, transparent); }
.sp-kpi--alerts { border-color: color-mix(in srgb, #5c6bc0 28%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #5c6bc0 10%, var(--card)), var(--card)); }
.sp-kpi--alerts .sp-kpi-ico { color: #3949ab; background: color-mix(in srgb, #5c6bc0 16%, transparent); }
.sp-kpi--returns { border-color: color-mix(in srgb, #c62828 24%, var(--bg-alt)); background: linear-gradient(160deg, color-mix(in srgb, #c62828 8%, var(--card)), var(--card)); }
.sp-kpi--returns .sp-kpi-ico { color: #c62828; background: color-mix(in srgb, #c62828 12%, transparent); }
.sp-kpi--warn { border-color: color-mix(in srgb, #e65100 40%, var(--bg-alt)); background: color-mix(in srgb, #fff3e0 55%, var(--card)); }
.sp-kpi--warn .sp-kpi-ico { color: #e65100; background: color-mix(in srgb, #ff9800 18%, transparent); }
.sp-kpi--warn .sp-kpi-meter > span { background: linear-gradient(90deg, #ef6c00, #ffb74d); }

.sp-card-head { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.65rem; }
.sp-card-head-ico {
    width: 2.35rem; height: 2.35rem; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: #fff;
}
.sp-card-head-ico svg { width: 1.2rem; height: 1.2rem; }
.sp-card-head-ico--ops { background: linear-gradient(145deg, #1565c0, #42a5f5); }
.sp-card-head-ico--ship { background: linear-gradient(145deg, #00897b, #26a69a); }
.sp-card-head-ico--quote { background: linear-gradient(145deg, #ef6c00, #ffb74d); }
.sp-card-head-ico--docs { background: linear-gradient(145deg, #455a64, #78909c); }
.sp-card-head-ico--stock { background: linear-gradient(145deg, #00695c, #26a69a); }
.sp-card-head-ico--pay { background: linear-gradient(145deg, #2e7d32, #66bb6a); }
.sp-card-head-ico--receipt { background: linear-gradient(145deg, #0277bd, #4fc3f7); }
.sp-card-head-ico--finance { background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #0f172a)); }
.sp-card-head-copy { min-width: 0; flex: 1; }
.sp-card-head-copy h4 { margin: 0 0 0.15rem; font-size: 1rem; }
.sp-card-head-copy p { margin: 0; }

.sp-status {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.2;
    white-space: nowrap;
}
.sp-status--ok { background: color-mix(in srgb, #2e7d32 14%, transparent); color: #1b5e20; }
.sp-status--warn { background: color-mix(in srgb, #ef6c00 16%, transparent); color: #e65100; }
.sp-status--info { background: color-mix(in srgb, #0277bd 14%, transparent); color: #01579b; }
.sp-status--muted { background: color-mix(in srgb, #607d8b 14%, transparent); color: #455a64; }
.sp-status--danger { background: color-mix(in srgb, #c62828 14%, transparent); color: #b71c1c; }

.sp-empty-illust {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.45rem; padding: 1.4rem 1rem; text-align: center;
}
.sp-empty-illust-ico {
    width: 3rem; height: 3rem; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sp-empty-illust-ico svg { width: 1.5rem; height: 1.5rem; }
.sp-empty-illust p { margin: 0; color: var(--text-muted); font-size: 0.86rem; }

.sp-tabs .pos-tab .sp-tab-ico {
    width: 1.35rem; height: 1.35rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}
.sp-tabs .pos-tab.is-active .sp-tab-ico { background: color-mix(in srgb, #fff 22%, transparent); color: inherit; }
.sp-tabs .pos-tab .sp-tab-ico svg { width: 0.85rem; height: 0.85rem; }

.sp-balance-hero {
  padding: 1.25rem 1.35rem;
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--bg-alt));
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.sp-balance-hero::after {
  content: ""; position: absolute; inset-inline-start: -1rem; bottom: -1.5rem;
  width: 6rem; height: 6rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.sp-balance-hero-ico {
  width: 2.5rem; height: 2.5rem; margin: 0 auto 0.45rem; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: var(--accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  position: relative; z-index: 1;
}
.sp-balance-hero-ico svg { width: 1.25rem; height: 1.25rem; }
.sp-balance-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.sp-balance-value { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.sp-balance-hint { margin: 0.45rem 0 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.4; }
.sp-kpi-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-kpi-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-kpi-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-kpi-row--5,
.supplier-portal-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-kpi-row--3 .sp-kpi { min-height: 3.6rem; }
.sp-kpi-row--3 .sp-kpi-sub { display: none; }
.sp-toolbar-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; justify-content: space-between;
  padding: 0.65rem 0.75rem; border-radius: 12px; background: var(--card); border: 1px solid var(--bg-alt);
  width: 100%; box-sizing: border-box;
}
.sp-toolbar-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
  flex: 1 1 18rem;
  min-width: 0;
}
.sp-toolbar-dates .field,
.sp-toolbar-dates .field-group { min-width: 0; width: 100%; }
.sp-toolbar-dates .field-input { width: 100%; max-width: none; }
.sp-toolbar-bar .modal-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.sp-one-line { margin: 0 0 0.75rem; color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; }
.sp-action-card h4 { margin: 0 0 0.25rem; }
.sp-action-card,
.supplier-portal-shell .panel-card.sp-card,
.supplier-portal-shell .table-wrap {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.sp-pay-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  width: 100%;
}
.sp-pay-form .field-group,
.sp-pay-form .field { min-width: 0; }
.sp-toolbar.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0.65rem;
  align-items: end;
  width: 100%;
}
.sp-quick-amounts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.sp-install-note { margin: 0.25rem 0 0.5rem; }
.sp-subhead { margin: 1rem 0 0.45rem; font-size: 0.92rem; }
.sp-fold { padding: 0.85rem 1rem; }
.sp-fold > summary {
  cursor: pointer; font-weight: 700; font-size: 0.95rem; list-style: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.sp-fold > summary::-webkit-details-marker { display: none; }
.sp-fold > summary::before { content: "?"; color: var(--accent); font-size: 0.85rem; }
.sp-fold[open] > summary::before { content: "?"; }
.sp-fold > summary + * { margin-top: 0.75rem; }
.sp-refund-help {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    margin-bottom: 0.75rem;
}
.sp-refund-lead { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.5; font-weight: 600; color: var(--text); }
.sp-refund-steps {
    margin: 0 0 0.55rem;
    padding-inline-start: 1.25rem;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}
.sp-refund-steps li { margin-bottom: 0.2rem; }
.sp-refund-note {
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: color-mix(in srgb, #8a4b00 70%, var(--text));
    background: color-mix(in srgb, #fff3e0 70%, var(--card));
    border: 1px solid color-mix(in srgb, #ff9800 28%, transparent);
}
.sp-empty-box {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--text-muted) 35%, transparent);
  background: color-mix(in srgb, var(--bg-alt) 55%, var(--card));
}
.sp-empty-box strong { display: block; margin-bottom: 0.35rem; font-size: 0.92rem; }
.sp-empty-box p { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
@media (max-width: 1100px) {
  .sp-kpi-row--5,
  .supplier-portal-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-pay-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sp-kpi-row--2,
  .sp-kpi-row--3,
  .sp-kpi-row--4,
  .sp-kpi-row--5,
  .supplier-portal-kpis { grid-template-columns: 1fr; }
  .sp-balance-value { font-size: 1.55rem; }
  .sp-toolbar-bar { align-items: stretch; }
  .sp-toolbar-dates { width: 100%; flex: 1 1 100%; }
  .sp-toolbar-bar .modal-actions { width: 100%; }
  .sp-pay-form { grid-template-columns: 1fr; }
  .sp-toolbar.form-grid { grid-template-columns: 1fr; }
}
.sp-card { margin-top: 0.15rem; border-radius: 14px; overflow: hidden; }
.sp-card > h4 { margin: 0 0 0.35rem; }
.sp-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.sp-chart-card { min-height: 11rem; }
.sp-tabs .pos-tab { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.sp-tab-ico { display: inline-flex; line-height: 0; opacity: 0.9; }
.sp-tabs { flex-wrap: wrap; }
.nav-icon-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.settings-link-icon, .settings-link-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    flex-shrink: 0;
    line-height: 0;
}
.sp-badge-warn { display: inline-block; margin-inline-start: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: #fff3e0; color: #e65100; }
.sp-row-warn td { background: color-mix(in srgb, #fff3e0 45%, transparent); }
.donut-seg.ok, .donut-seg.info { stroke: var(--accent); }
.mini-legend .ok .leg-dot, .mini-legend .info .leg-dot, .mini-legend .accent .leg-dot { background: var(--accent); }
.nav-supplier-hint { margin: 0.35rem 0.75rem 0.5rem; line-height: 1.35; }
.mini-chart-title { color: color-mix(in srgb, var(--text) 72%, var(--text-muted)); }
.mini-bar-row { color: var(--text); }
.mini-bar-label { color: color-mix(in srgb, var(--text) 78%, var(--text-muted)); font-weight: 500; }
.mini-bar-val { color: var(--text); font-weight: 600; }
.mini-legend { color: color-mix(in srgb, var(--text) 82%, var(--text-muted)); }
.mini-donut-center { color: var(--text); }
.mini-donut-center span { color: color-mix(in srgb, var(--text) 70%, var(--text-muted)); }

/* Supplier portal ? dark theme contrast (obsidian & dark shells) */
.theme-obsidian .supplier-portal-shell .muted,
.theme-obsidian .supplier-portal-shell .muted.tiny,
.theme-obsidian .app-shell .supplier-portal-shell .muted,
body.theme-obsidian .app-shell .supplier-portal-shell .muted,
body.theme-obsidian .supplier-portal-shell .muted {
    color: #cbd5e1 !important;
    opacity: 1;
}
.theme-obsidian .sp-explain,
.theme-obsidian .sp-refund-help,
.theme-obsidian .sp-welcome,
.theme-obsidian .sp-empty-box,
.theme-obsidian .sp-balance-hero,
.theme-obsidian .sp-kpi,
.theme-obsidian .sp-chart-card.mini-chart,
.theme-obsidian .panel-card.sp-card {
    color: var(--text);
}
.theme-obsidian .sp-explain p,
.theme-obsidian .sp-explain-list,
.theme-obsidian .sp-refund-steps,
.theme-obsidian .sp-empty-box p,
.theme-obsidian .sp-one-line,
.theme-obsidian .sp-balance-hint,
.theme-obsidian .sp-balance-label,
.theme-obsidian .sp-kpi-label,
.theme-obsidian .sp-kpi-sub,
.theme-obsidian .sp-install-note,
.theme-obsidian .report-intro {
    color: #d1d5db !important;
}
.theme-obsidian .sp-refund-lead,
.theme-obsidian .sp-welcome-title,
.theme-obsidian .sp-empty-box strong,
.theme-obsidian .sp-balance-value,
.theme-obsidian .sp-kpi strong,
.theme-obsidian .sp-subhead,
.theme-obsidian .sp-fold > summary,
.theme-obsidian .sp-action-card h4,
.theme-obsidian .sp-card > h4 {
    color: #f8fafc !important;
}
.theme-obsidian .sp-refund-note {
    color: #fde68a !important;
    background: color-mix(in srgb, #92400e 45%, var(--card));
    border-color: color-mix(in srgb, #f59e0b 45%, transparent);
}
.theme-obsidian .sp-kpi--warn {
    background: color-mix(in srgb, #92400e 38%, var(--card));
    border-color: color-mix(in srgb, #f59e0b 45%, var(--bg-alt));
    color: #fff7ed;
}
.theme-obsidian .sp-kpi--warn .sp-kpi-label,
.theme-obsidian .sp-kpi--warn .sp-kpi-sub { color: #fde68a !important; }
.theme-obsidian .sp-kpi--warn strong { color: #fffbeb !important; }
.theme-obsidian .sp-badge-warn {
    background: color-mix(in srgb, #92400e 55%, transparent);
    color: #fde68a;
}
.theme-obsidian .sp-row-warn td {
    background: color-mix(in srgb, #92400e 28%, transparent);
}
.theme-obsidian .sp-empty-box {
    border-color: color-mix(in srgb, #94a3b8 45%, transparent);
    background: color-mix(in srgb, var(--bg-alt) 80%, var(--card));
}
.theme-obsidian .mini-chart-title { color: #e2e8f0 !important; }
.theme-obsidian .mini-bar-row { color: #f1f5f9 !important; }
.theme-obsidian .mini-bar-label { color: #cbd5e1 !important; }
.theme-obsidian .mini-bar-val { color: #f8fafc !important; }
.theme-obsidian .mini-legend,
.theme-obsidian .mini-legend li { color: #e2e8f0 !important; }
.theme-obsidian .mini-donut-center strong { color: #f8fafc !important; }
.theme-obsidian .mini-donut-center span,
.theme-obsidian .mini-donut-center small { color: #cbd5e1 !important; }
.theme-obsidian .mini-bar-track { background: rgba(255, 255, 255, 0.12); }
.theme-obsidian .donut-ring { stroke: rgba(255, 255, 255, 0.14); }
.theme-obsidian .nav-supplier-hint,
.theme-obsidian .app-shell .nav-supplier-hint {
    color: rgba(226, 232, 240, 0.88) !important;
    opacity: 1;
}
.theme-obsidian .nav-section-label {
    opacity: 0.78;
    color: var(--sidebar-muted, rgba(226, 232, 240, 0.75));
}
.theme-obsidian .page-header .muted,
.theme-obsidian .page-header-sub,
.theme-obsidian .page-subtitle {
    color: #cbd5e1 !important;
}
.theme-obsidian .data-table th {
    color: #e2e8f0;
}
.theme-obsidian .sp-tabs .pos-tab:not(.is-active) {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}
.theme-obsidian .field-label,
.theme-obsidian .supplier-portal-shell .field-label,
.theme-obsidian label.field-label {
    color: #e2e8f0 !important;
}
.theme-obsidian .doc-entry-card,
.theme-obsidian .panel-card {
    color: var(--text);
}
.theme-obsidian .data-table td {
    color: #e2e8f0;
}
.theme-obsidian .page-subtitle {
    color: #cbd5e1 !important;
}

@media (max-width: 900px) {
  .sp-welcome { flex-direction: column; }
  .sp-kpi-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-kpi-row--5,
  .supplier-portal-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ???????????????????????????????????????????????????????????
   Global visual polish ? all screens / all themes
   ??????????????????????????????????????????????????????????? */
.app-shell .report-toolbar {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--bg-alt));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 6%, transparent);
    backdrop-filter: blur(8px);
}
.app-shell .report-document,
.app-shell .report-print-sheet.panel-card {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: 0 12px 36px color-mix(in srgb, var(--accent) 10%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--card)), var(--card));
}
.app-shell .doc-entry-card {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 8%, transparent);
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 5%, var(--card)), var(--card));
}
.app-shell .workflow-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.85rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.app-shell .workflow-strip .wf-step {
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    opacity: 1;
}
.app-shell .workflow-strip .wf-arrow {
    opacity: 0.55;
    color: var(--accent);
}
.app-shell .data-table thead th,
.app-shell .report-table thead th {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--card)), color-mix(in srgb, var(--accent) 6%, var(--card))) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    letter-spacing: 0.01em;
    color: var(--text, #0f172a) !important;
    -webkit-text-fill-color: var(--text, #0f172a) !important;
}
.app-shell .data-table tbody tr:hover td,
.app-shell .report-table tbody tr:hover td {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.app-shell .related-chip {
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.app-shell .related-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 16%, transparent);
}
.app-shell .btn-primary,
.app-shell .btn-icon-action.is-primary {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
.app-shell .btn-primary:hover:not(:disabled),
.app-shell .btn-icon-action.is-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 34%, transparent);
}
.app-shell .field-input:focus,
.app-shell select.field-input:focus,
.app-shell textarea.field-input:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    outline: none;
}
.app-shell .sp-explain,
.app-shell .sp-welcome {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 8%, transparent);
}
.app-shell .sp-kpi {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.app-shell .sp-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--bg-alt));
}
.app-shell .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--text);
}
.app-shell .alert-box {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
    background: color-mix(in srgb, #ef4444 8%, var(--card));
    padding: 0.85rem 1rem;
}
.app-shell .fiscal-strip {
    border-radius: 12px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 8%, transparent);
}
.app-shell .dash-fiscal-banner {
    border-radius: 14px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

.theme-obsidian.app-shell .page-body,
body.theme-obsidian .app-shell .page-body {
    background:
        radial-gradient(1000px 420px at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
        radial-gradient(800px 380px at 0% 100%, color-mix(in srgb, #6366f1 12%, transparent), transparent 50%),
        var(--gradient-soft, var(--bg));
}
.theme-obsidian .app-shell .summary-card,
body.theme-obsidian .app-shell .summary-card {
    background: linear-gradient(165deg, color-mix(in srgb, var(--card) 95%, #fff), var(--card));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.theme-obsidian .app-shell .panel-card,
body.theme-obsidian .app-shell .panel-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.theme-obsidian .app-shell .data-table thead th,
.theme-obsidian .app-shell .report-table thead th,
body.theme-obsidian .app-shell .data-table thead th,
body.theme-obsidian .app-shell .report-table thead th {
    background: color-mix(in srgb, var(--accent) 16%, var(--card)) !important;
    color: #e2e8f0 !important;
}

.app-shell .sc-role-cards .summary-card strong {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.45;
    color: var(--text-muted);
}
.app-shell .sc-role-cards .summary-card:hover {
    transform: none;
}

/* Reports hub (top bar, beside settings) */
.reports-hub-switcher { display: inline-flex; align-items: center; }
.reports-hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--panel-border, color-mix(in srgb, var(--accent) 22%, transparent));
    background: color-mix(in srgb, var(--accent) 10%, var(--card, var(--bg-alt, #fff)));
    color: var(--accent, #2563eb);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reports-hub-btn:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--card, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}
.reports-hub-btn.active {
    background: color-mix(in srgb, var(--accent) 20%, var(--card, transparent));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Showroom — compact top-bar shortcut (matches reports hub) */
.showroom-launch-switcher { display: inline-flex; align-items: center; }
.showroom-launch-btn {
    --slb-accent: var(--accent, #8b5cf6);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--slb-accent) 28%, var(--panel-border, transparent));
    background: color-mix(in srgb, var(--slb-accent) 10%, var(--card, var(--bg-alt, #fff)));
    color: var(--slb-accent);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.showroom-launch-btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from 0deg,
        transparent 0 72%,
        color-mix(in srgb, var(--slb-accent) 70%, #fff) 86%,
        transparent 100%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    animation: showroom-launch-ring 8s linear infinite;
    pointer-events: none;
}
.showroom-launch-btn:hover {
    background: color-mix(in srgb, var(--slb-accent) 16%, var(--card, transparent));
    border-color: color-mix(in srgb, var(--slb-accent) 42%, transparent);
    color: var(--slb-accent);
}
.showroom-launch-btn:hover::after { opacity: 0.85; }
.showroom-launch-btn.active {
    background: color-mix(in srgb, var(--slb-accent) 20%, var(--card, transparent));
    border-color: color-mix(in srgb, var(--slb-accent) 50%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--slb-accent) 22%, transparent);
}
.showroom-launch-btn-logo {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}
.showroom-launch-genie-ico {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.35));
}
.showroom-launch-btn[data-look] { --slb-accent: color-mix(in srgb, var(--accent, #8b5cf6) 38%, #c4b5fd); }
.showroom-launch-btn[data-look="noir"] { --slb-accent: color-mix(in srgb, var(--accent) 40%, #d4af77); }
.showroom-launch-btn[data-look="aurora"] { --slb-accent: color-mix(in srgb, var(--accent) 35%, #22d3ee); }
.showroom-launch-btn[data-look="citrus"] { --slb-accent: color-mix(in srgb, var(--accent) 35%, #84cc16); }
.showroom-launch-btn[data-look="imperial"] { --slb-accent: color-mix(in srgb, var(--accent) 35%, #eab308); }
.showroom-launch-btn[data-look="velvet"] { --slb-accent: color-mix(in srgb, var(--accent) 35%, #ec4899); }
.showroom-launch-btn[data-look="tide"] { --slb-accent: color-mix(in srgb, var(--accent) 35%, #38bdf8); }
.showroom-launch-btn[data-look="frost"] { --slb-accent: color-mix(in srgb, var(--accent, #c9a86c) 40%, #8a6a45); }

@keyframes showroom-launch-ring { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .showroom-launch-btn::after { animation: none !important; opacity: 0 !important; }
    .showroom-launch-btn:hover::after { opacity: 0.55 !important; }
}

/* Portal gateway — compact top-bar shortcut (high contrast so it never ghosts) */
.portal-launch-switcher { display: inline-flex; align-items: center; }
.portal-launch-btn {
    --plb-accent: #0ea5e9;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--plb-accent) 55%, #0284c7) !important;
    background: linear-gradient(160deg, #38bdf8 0%, #0284c7 100%) !important;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.portal-launch-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45);
    color: #fff !important;
}
.portal-launch-btn svg {
    color: #fff !important;
    stroke: #fff !important;
}
header.top-bar .portal-launch-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    background: linear-gradient(160deg, #38bdf8 0%, #0284c7 100%) !important;
    border: 1.5px solid #0284c7 !important;
    color: #fff !important;
}
header.top-bar .portal-launch-btn svg {
    width: 15px !important;
    height: 15px !important;
    color: #fff !important;
    stroke: #fff !important;
}

/* ?? Help / Operations guide ?? */
.help-guide-switcher { display: inline-flex; align-items: center; }
.help-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid var(--panel-border, color-mix(in srgb, var(--accent) 22%, transparent));
    background: color-mix(in srgb, var(--accent) 10%, var(--card, var(--bg-alt, #fff)));
    color: var(--text, #111);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    min-height: 32px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.72rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.help-guide-btn-icon {
    flex-shrink: 0;
    color: var(--accent);
}
.help-guide-btn:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--card, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}
.help-guide-btn-text { white-space: nowrap; }
@media (max-width: 900px) {
    .help-guide-btn-text { display: none; }
    .help-guide-btn { width: 36px; padding: 0; }
}

.help-guide-page { display: flex; flex-direction: column; gap: 0.85rem; }
.help-guide-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.help-guide-lead {
    margin: 0;
    max-width: 48rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}
.help-guide-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.help-guide-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.help-guide-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
}
.help-guide-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.help-guide-tab.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.help-guide-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}
@media (max-width: 900px) {
    .help-guide-layout { grid-template-columns: 1fr; }
}

.help-guide-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem;
    max-height: min(70vh, 36rem);
    overflow: auto;
}
.help-guide-nav-item {
    text-align: start;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.help-guide-nav-item strong { font-size: 0.88rem; color: var(--text); }
.help-guide-nav-item span { font-size: 0.72rem; color: var(--text-muted); direction: ltr; text-align: start; }
.help-guide-nav-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.help-guide-nav-item.is-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.help-guide-detail { padding: 1rem 1.1rem 1.25rem; }
.help-guide-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}
.help-guide-detail-head h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.help-guide-detail-head p { margin: 0; color: var(--text-muted); line-height: 1.55; max-width: 42rem; }

.help-guide-section { margin-top: 1.1rem; }
.help-guide-section h3 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    color: var(--accent);
}

.help-workflow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.help-workflow li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: 0.82rem;
    font-weight: 600;
}
.help-workflow-num {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
}

.help-step {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(10rem, 0.8fr);
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
}
.help-step:last-child { border-bottom: none; }
@media (max-width: 720px) {
    .help-step { grid-template-columns: 1fr; }
}
.help-step-body h4 {
    margin: 0 0 0.4rem;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.help-step-num {
    flex-shrink: 0;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 0.78rem;
}
.help-step-body p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.9rem;
}

.help-img-slot { display: flex; flex-direction: column; gap: 0.45rem; }
.help-img-preview {
    width: 100%;
    max-height: 14rem;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.help-img-ph {
    min-height: 8.5rem;
    border-radius: 12px;
    border: 1.5px dashed color-mix(in srgb, var(--text-muted) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.help-img-ph-icon { font-size: 1.4rem; opacity: 0.7; }
.help-img-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.help-img-upload { position: relative; overflow: hidden; cursor: pointer; }
.help-img-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.help-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.55rem;
}
.help-related-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.help-related-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.help-related-card strong { font-size: 0.9rem; color: var(--accent); }
.help-related-card span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }

.help-print-root { display: none; }

.help-html { color: var(--text-muted); line-height: 1.6; font-size: 0.9rem; }
.help-html p { margin: 0 0 0.45rem; }
.help-html ul, .help-html ol { margin: 0.25rem 0 0.45rem 1.1rem; }
.help-custom-badge {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    width: fit-content;
}
.activity-shared-badge {
    margin-inline-start: 0.35rem;
    vertical-align: middle;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.2;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
}
.chip.chip-shared-path {
    gap: 0.35rem;
    border-color: color-mix(in srgb, var(--text-muted) 32%, transparent);
    background: color-mix(in srgb, var(--text-muted) 8%, var(--card));
}
.chip .activity-shared-badge {
    margin-inline-start: 0.1rem;
}
.multi-select-option .activity-shared-badge {
    margin-inline-start: auto;
}
.help-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.help-edit-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 800px) {
    .help-edit-grid { grid-template-columns: 1fr; }
}
.help-edit-step {
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 12px;
    padding: 0.75rem;
    display: grid;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}
.quill-wrap { background: var(--card, #fff); border-radius: 10px; }
.quill-host {
    min-height: 7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 0 0 10px 10px;
}
.quill-wrap .ql-toolbar.ql-snow {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.quill-wrap .ql-container.ql-snow { border: none; font-family: inherit; font-size: 0.9rem; }
.quill-wrap .ql-editor { min-height: 6.5rem; direction: inherit; }
.field-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-muted); }
.field-label-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.field-label-row .field-label { margin-bottom: 0; }

.pos-rest-panel .pos-rest-dine-row {
  display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: flex-end;
}
.pos-rest-panel .pos-rest-dine-row > * { flex: 1 1 0; min-width: 0; }
.app-shell .searchable-select-panel { z-index: 7000; }

/* ?? Guide popover: Obsidian / dark theme contrast ?? */
.theme-obsidian .guide-pop-scrim,
body.theme-obsidian .guide-pop-scrim,
.app-shell.theme-obsidian .guide-pop-scrim {
    background: rgba(3, 3, 10, 0.72);
    backdrop-filter: blur(4px);
}
.theme-obsidian .guide-pop-panel,
body.theme-obsidian .guide-pop-panel,
.app-shell.theme-obsidian .guide-pop-panel {
    --guide-surface: #161622;
    background: #161622;
    color: #f8fafc;
    border: 1px solid rgba(167, 139, 250, 0.42);
    border-top: 3px solid #a78bfa;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 28px 64px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(99, 102, 241, 0.18);
}
.theme-obsidian .guide-pop--alert .guide-pop-panel,
body.theme-obsidian .guide-pop--alert .guide-pop-panel,
.app-shell.theme-obsidian .guide-pop--alert .guide-pop-panel {
    border-color: rgba(251, 191, 36, 0.45);
    border-top-color: #fbbf24;
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.12),
        0 28px 64px rgba(0, 0, 0, 0.65),
        0 0 36px rgba(245, 158, 11, 0.16);
}
.theme-obsidian .guide-pop-head,
body.theme-obsidian .guide-pop-head,
.app-shell.theme-obsidian .guide-pop-head {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.22), rgba(22, 22, 34, 0.95));
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.theme-obsidian .guide-pop--alert .guide-pop-head,
body.theme-obsidian .guide-pop--alert .guide-pop-head,
.app-shell.theme-obsidian .guide-pop--alert .guide-pop-head {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.2), rgba(22, 22, 34, 0.95));
}
.theme-obsidian .guide-pop-head-copy strong,
body.theme-obsidian .guide-pop-head-copy strong,
.app-shell.theme-obsidian .guide-pop-head-copy strong {
    color: #f8fafc;
}
.theme-obsidian .guide-pop-head-copy p,
body.theme-obsidian .guide-pop-head-copy p,
.app-shell.theme-obsidian .guide-pop-head-copy p,
.theme-obsidian .guide-pop-field-label,
body.theme-obsidian .guide-pop-field-label,
.app-shell.theme-obsidian .guide-pop-field-label,
.theme-obsidian .guide-pop-foot,
body.theme-obsidian .guide-pop-foot,
.app-shell.theme-obsidian .guide-pop-foot,
.theme-obsidian .guide-formula-card small,
body.theme-obsidian .guide-formula-card small,
.app-shell.theme-obsidian .guide-formula-card small {
    color: #cbd5e1;
}
.theme-obsidian .guide-pop-head-mark,
body.theme-obsidian .guide-pop-head-mark,
.app-shell.theme-obsidian .guide-pop-head-mark {
    color: #c7d2fe;
    background: rgba(129, 140, 248, 0.22);
}
.theme-obsidian .guide-pop--alert .guide-pop-head-mark,
body.theme-obsidian .guide-pop--alert .guide-pop-head-mark,
.app-shell.theme-obsidian .guide-pop--alert .guide-pop-head-mark {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.2);
}
.theme-obsidian .guide-pop-x,
body.theme-obsidian .guide-pop-x,
.app-shell.theme-obsidian .guide-pop-x {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}
.theme-obsidian .guide-pop-x:hover,
body.theme-obsidian .guide-pop-x:hover,
.app-shell.theme-obsidian .guide-pop-x:hover {
    background: rgba(255, 255, 255, 0.14);
}
.theme-obsidian .guide-pop-foot,
body.theme-obsidian .guide-pop-foot,
.app-shell.theme-obsidian .guide-pop-foot {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: rgba(255, 255, 255, 0.1);
}
.theme-obsidian .guide-sec-label,
body.theme-obsidian .guide-sec-label,
.app-shell.theme-obsidian .guide-sec-label {
    color: #c4b5fd;
}
.theme-obsidian .guide-sec--tips .guide-sec-label,
body.theme-obsidian .guide-sec--tips .guide-sec-label,
.app-shell.theme-obsidian .guide-sec--tips .guide-sec-label {
    color: #5eead4;
}
.theme-obsidian .guide-sec--notes .guide-sec-label,
body.theme-obsidian .guide-sec--notes .guide-sec-label,
.app-shell.theme-obsidian .guide-sec--notes .guide-sec-label {
    color: #fbbf24;
}
.theme-obsidian .guide-sec--formulas .guide-sec-label,
body.theme-obsidian .guide-sec--formulas .guide-sec-label,
.app-shell.theme-obsidian .guide-sec--formulas .guide-sec-label {
    color: #a5b4fc;
}
.theme-obsidian .guide-timeline::before,
body.theme-obsidian .guide-timeline::before,
.app-shell.theme-obsidian .guide-timeline::before {
    background: rgba(167, 139, 250, 0.45);
}
.theme-obsidian .guide-timeline-num,
body.theme-obsidian .guide-timeline-num,
.app-shell.theme-obsidian .guide-timeline-num {
    background: #818cf8;
    color: #fff;
    box-shadow: 0 0 0 3px #161622;
}
.theme-obsidian .guide-timeline-copy,
body.theme-obsidian .guide-timeline-copy,
.app-shell.theme-obsidian .guide-timeline-copy {
    background: rgba(129, 140, 248, 0.14);
    border-color: rgba(167, 139, 250, 0.28);
    color: #f1f5f9;
}
.theme-obsidian .guide-tip-list li,
body.theme-obsidian .guide-tip-list li,
.app-shell.theme-obsidian .guide-tip-list li {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.28);
    color: #ecfdf5;
}
.theme-obsidian .guide-note-list li,
body.theme-obsidian .guide-note-list li,
.app-shell.theme-obsidian .guide-note-list li {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.32);
    color: #fffbeb;
}
.theme-obsidian .guide-formula-card,
body.theme-obsidian .guide-formula-card,
.app-shell.theme-obsidian .guide-formula-card {
    background: rgba(129, 140, 248, 0.14);
    border-color: rgba(165, 180, 252, 0.3);
}
.theme-obsidian .guide-formula-card strong,
body.theme-obsidian .guide-formula-card strong,
.app-shell.theme-obsidian .guide-formula-card strong {
    color: #c7d2fe;
}
.theme-obsidian .guide-formula-card code,
.theme-obsidian .guide-formula-expr,
body.theme-obsidian .guide-formula-card code,
body.theme-obsidian .guide-formula-expr,
.app-shell.theme-obsidian .guide-formula-card code,
.app-shell.theme-obsidian .guide-formula-expr {
    color: #f8fafc;
    background: rgba(15, 15, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.theme-obsidian .guide-pop-textarea,
.theme-obsidian .guide-pop-panel .field-input,
.theme-obsidian .guide-pop-panel textarea.field-input,
.theme-obsidian .guide-pop-panel input.field-input,
body.theme-obsidian .guide-pop-textarea,
body.theme-obsidian .guide-pop-panel .field-input,
body.theme-obsidian .guide-pop-panel textarea.field-input,
body.theme-obsidian .guide-pop-panel input.field-input,
.app-shell.theme-obsidian .guide-pop-textarea,
.app-shell.theme-obsidian .guide-pop-panel .field-input,
.app-shell.theme-obsidian .guide-pop-panel textarea.field-input,
.app-shell.theme-obsidian .guide-pop-panel input.field-input {
    color: #f8fafc !important;
    background: rgba(8, 8, 14, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    caret-color: #f8fafc;
}
.theme-obsidian .guide-pop-textarea::placeholder,
.theme-obsidian .guide-pop-panel .field-input::placeholder,
.theme-obsidian .guide-pop-panel textarea.field-input::placeholder,
body.theme-obsidian .guide-pop-textarea::placeholder,
body.theme-obsidian .guide-pop-panel .field-input::placeholder,
body.theme-obsidian .guide-pop-panel textarea.field-input::placeholder,
.app-shell.theme-obsidian .guide-pop-textarea::placeholder,
.app-shell.theme-obsidian .guide-pop-panel .field-input::placeholder,
.app-shell.theme-obsidian .guide-pop-panel textarea.field-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}
.theme-obsidian .guide-pop-trigger,
body.theme-obsidian .guide-pop-trigger,
.app-shell.theme-obsidian .guide-pop-trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #c7d2fe;
}
.theme-obsidian .guide-pop-trigger:hover,
.theme-obsidian .guide-pop-trigger.is-open,
body.theme-obsidian .guide-pop-trigger:hover,
body.theme-obsidian .guide-pop-trigger.is-open,
.app-shell.theme-obsidian .guide-pop-trigger:hover,
.app-shell.theme-obsidian .guide-pop-trigger.is-open {
    background: rgba(129, 140, 248, 0.22);
    border-color: rgba(167, 139, 250, 0.5);
    color: #e0e7ff;
}
.theme-obsidian .guide-pop--alert .guide-pop-trigger,
body.theme-obsidian .guide-pop--alert .guide-pop-trigger,
.app-shell.theme-obsidian .guide-pop--alert .guide-pop-trigger {
    color: #fbbf24;
}
.theme-obsidian .guide-pop--alert .guide-pop-trigger:hover,
.theme-obsidian .guide-pop--alert .guide-pop-trigger.is-open,
body.theme-obsidian .guide-pop--alert .guide-pop-trigger:hover,
body.theme-obsidian .guide-pop--alert .guide-pop-trigger.is-open,
.app-shell.theme-obsidian .guide-pop--alert .guide-pop-trigger:hover,
.app-shell.theme-obsidian .guide-pop--alert .guide-pop-trigger.is-open {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fde68a;
}
.theme-obsidian .guide-pop-panel .btn-secondary,
body.theme-obsidian .guide-pop-panel .btn-secondary,
.app-shell.theme-obsidian .guide-pop-panel .btn-secondary {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
.theme-obsidian .guide-pop-panel .btn-secondary:hover,
body.theme-obsidian .guide-pop-panel .btn-secondary:hover,
.app-shell.theme-obsidian .guide-pop-panel .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}
.theme-obsidian .guide-pop-panel .status-msg,
body.theme-obsidian .guide-pop-panel .status-msg,
.app-shell.theme-obsidian .guide-pop-panel .status-msg {
    color: #e2e8f0;
}

/* Dark guide layer ? class on portal root (survives backdrop-filter parents) */
.guide-pop-layer.is-dark-theme .guide-pop-scrim {
    background: rgba(3, 3, 10, 0.78) !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-panel {
    --guide-surface: #1a1a2a;
    background: #1a1a2a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
    border-top: 3px solid #a78bfa !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 28px 70px rgba(0, 0, 0, 0.72),
        0 0 48px rgba(99, 102, 241, 0.22) !important;
}
.guide-pop-layer.is-dark-theme.guide-pop--alert .guide-pop-panel {
    border-color: rgba(251, 191, 36, 0.5) !important;
    border-top-color: #fbbf24 !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-head {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.28), #1a1a2a) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.guide-pop-layer.is-dark-theme.guide-pop--alert .guide-pop-head {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.24), #1a1a2a) !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-head-copy strong { color: #f8fafc !important; }
.guide-pop-layer.is-dark-theme .guide-pop-head-copy p,
.guide-pop-layer.is-dark-theme .guide-pop-field-label,
.guide-pop-layer.is-dark-theme .guide-pop-foot,
.guide-pop-layer.is-dark-theme .guide-formula-card small {
    color: #e2e8f0 !important;
}
.guide-pop-layer.is-dark-theme .call-desk-status.is-warn {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fecaca;
}
.guide-pop-layer.is-dark-theme .call-desk-status.is-ok {
    background: rgba(5, 150, 105, 0.2);
    border-color: rgba(52, 211, 153, 0.4);
    color: #a7f3d0;
}
.guide-pop-layer.is-dark-theme .guide-pop-foot {
    background: rgba(255, 255, 255, 0.06) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-x {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.guide-pop-layer.is-dark-theme .guide-sec-label { color: #c4b5fd !important; }
.guide-pop-layer.is-dark-theme .guide-sec--tips .guide-sec-label { color: #5eead4 !important; }
.guide-pop-layer.is-dark-theme .guide-sec--notes .guide-sec-label { color: #fbbf24 !important; }
.guide-pop-layer.is-dark-theme .guide-sec--formulas .guide-sec-label { color: #a5b4fc !important; }
.guide-pop-layer.is-dark-theme .guide-sec--links .guide-sec-label { color: #7dd3fc !important; }
.guide-pop-layer.is-dark-theme .guide-sec--video .guide-sec-label { color: #fda4af !important; }
.guide-pop-layer.is-dark-theme .guide-video-title { color: #e2e8f0 !important; }
.guide-pop-layer.is-dark-theme .guide-video-fallback {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(251, 113, 133, 0.45) !important;
    color: #fecdd3 !important;
}
.guide-pop-layer.is-dark-theme .guide-link-chip {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
.guide-pop-layer.is-dark-theme .guide-timeline::before { background: rgba(167, 139, 250, 0.5) !important; }
.guide-pop-layer.is-dark-theme .guide-timeline-num {
    background: #818cf8 !important;
    box-shadow: 0 0 0 3px #1a1a2a !important;
}
.guide-pop-layer.is-dark-theme .guide-timeline-copy {
    background: rgba(129, 140, 248, 0.18) !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
    color: #f8fafc !important;
}
.guide-pop-layer.is-dark-theme .guide-tip-list li {
    background: rgba(45, 212, 191, 0.16) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
    color: #ecfdf5 !important;
}
.guide-pop-layer.is-dark-theme .guide-note-list li {
    background: rgba(251, 191, 36, 0.16) !important;
    border-color: rgba(251, 191, 36, 0.38) !important;
    color: #fffbeb !important;
}
.guide-pop-layer.is-dark-theme .guide-formula-card {
    background: rgba(129, 140, 248, 0.16) !important;
    border-color: rgba(165, 180, 252, 0.35) !important;
}
.guide-pop-layer.is-dark-theme .guide-formula-card strong { color: #c7d2fe !important; }
.guide-pop-layer.is-dark-theme .guide-formula-expr,
.guide-pop-layer.is-dark-theme .guide-formula-card code {
    color: #f8fafc !important;
    background: rgba(8, 8, 16, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-textarea,
.guide-pop-layer.is-dark-theme .guide-pop-panel .field-input,
.guide-pop-layer.is-dark-theme .guide-pop-panel textarea {
    color: #f8fafc !important;
    background: #0c0c14 !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    caret-color: #f8fafc !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-textarea::placeholder,
.guide-pop-layer.is-dark-theme .guide-pop-panel .field-input::placeholder,
.guide-pop-layer.is-dark-theme .guide-pop-panel textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
.guide-pop-layer.is-dark-theme .guide-pop-panel .btn-secondary {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}
.guide-pop.is-dark-theme .guide-pop-trigger {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #c7d2fe;
}
.guide-pop.is-dark-theme.guide-pop--alert .guide-pop-trigger {
    color: #fbbf24;
}

/* Item media / prep / POS thumbs */
.item-thumb-cell { width: 2.6rem; }
.item-media-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.item-media-thumb.is-sm { width: 2.4rem; height: 2.4rem; }
.item-media-thumb.is-md { width: 3.5rem; height: 3.5rem; }
.item-media-thumb.is-lg { width: 7.5rem; height: 7.5rem; }
.item-media-thumb {
  background:
    linear-gradient(45deg, rgba(128,128,128,.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.18) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: color-mix(in srgb, var(--card, #111) 88%, #888);
  overflow: hidden;
}
.item-media-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: transparent;
}
.item-media-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.95rem; letter-spacing: 0; line-height: 1;
}
.item-edit-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.85rem; }
.item-media-gallery {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 1rem;
  overflow: visible;
}
.item-media-card {
  position: relative; padding: 0.4rem; border-radius: 12px;
  border: 1px solid var(--bg-alt); background: var(--card);
  display: flex; flex-direction: column; gap: 0.35rem; align-items: center;
  overflow: visible;
}
.item-media-card-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden; /* round photo + badge only — tools live outside this box */
  z-index: 1;
  border-radius: 10px;
}
.item-media-card-visual .item-media-thumb {
  overflow: hidden;
}
.item-media-tools {
  position: absolute;
  inset-inline-end: 0.55rem;
  bottom: 2.55rem; /* sit on photo, above Edit/Delete row — outside overflow:hidden visual */
  display: flex;
  gap: 0.25rem;
  z-index: 8;
  overflow: visible;
}
.item-media-tool {
  position: relative;
  width: 1.85rem; height: 1.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--card, #fff) 92%, transparent);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  overflow: visible;
}
.item-media-tool:hover:not(:disabled) {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: transparent;
  z-index: 20;
}
.item-media-tool:disabled,
.item-media-tool.is-disabled {
  opacity: .38;
  cursor: not-allowed;
}

/* Float tip is portaled to <body> (see item-media-studio.js) — never clipped by image frame */
.item-media-tool[data-tip]::after,
.item-media-tool[data-tip]::before,
.ims-tool[data-tip]::after,
.ims-tool[data-tip]::before {
  content: none !important;
  display: none !important;
}
.zad-float-tip {
  position: fixed;
  z-index: 40000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 75%, transparent);
  background: color-mix(in srgb, var(--card, #fff) 94%, var(--text, #0f172a) 6%);
  color: var(--text, #0f172a);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .01em;
  text-align: center;
  white-space: normal;
  overflow: visible !important;
  overflow-wrap: anywhere;
  word-break: normal;
  max-height: none !important;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .12s ease, transform .12s ease;
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--text, #0f172a) 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
}
.zad-float-tip.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.zad-float-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -6px;
  background: inherit;
  border-inline-end: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 75%, transparent);
  transform: rotate(45deg);
}
.zad-float-tip.is-below::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -6px;
  border-inline-end: none;
  border-bottom: none;
  border-inline-start: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 75%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 75%, transparent);
}
/* Studio is always dark — keep tip readable there */
.zad-float-tip.is-studio {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.zad-float-tip.is-studio::after {
  background: #1e293b;
  border-color: rgba(148, 163, 184, .35);
}

/* —— Photo studio (theme-aware, no overflow scrollbars) —— */
.ims-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: color-mix(in srgb, var(--text, #0f172a) 45%, transparent);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 0.85rem;
  overflow: hidden;
  overscroll-behavior: contain;
}
.ims-dialog {
  width: min(920px, calc(100vw - 1.5rem));
  height: min(88vh, 820px);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--panel-border, color-mix(in srgb, var(--text) 12%, transparent));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--text, #0f172a) 28%, transparent);
  overflow: hidden;
}
.ims-head {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: flex-start;
  flex: 0 0 auto;
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, var(--bg-alt, #e2e8f0)) 90%, transparent);
  background: color-mix(in srgb, var(--bg-alt, #e2e8f0) 35%, var(--card, #fff));
}
.ims-head-text { min-width: 0; flex: 1; }
.ims-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.ims-head p {
  margin: 0.2rem 0 0;
  color: var(--text-muted, #64748b);
  font-size: 0.76rem;
  line-height: 1.35;
  max-width: 42rem;
}
.ims-close {
  border: 0;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text, #0f172a);
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  flex: 0 0 auto;
}
.ims-close:hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
  color: var(--accent, #2563eb);
}
.ims-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  padding: 0.55rem 0.75rem;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--border, var(--bg-alt, #e2e8f0)) 90%, transparent);
  background: var(--card, #fff);
  overflow: hidden;
}
.ims-tool-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-alt, #e2e8f0) 70%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.ims-tool-group--actions {
  margin-inline-start: 0;
  background: transparent;
  border-color: transparent;
  padding: 0;
}
.ims-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #0f172a);
  cursor: pointer;
  flex: 0 0 auto;
}
.ims-tool span {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.ims-tool-group--actions .ims-tool {
  width: auto;
  min-height: 2.15rem;
  padding: 0 0.7rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: var(--card, #fff);
  border-radius: 999px;
}
.ims-tool-group--actions .ims-tool span { display: inline; }
.ims-tool svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ims-tool:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #2563eb) 14%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
  color: var(--accent, #2563eb);
}
.ims-tool.is-on {
  background: var(--accent, #2563eb);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
}
.ims-tool.is-accent {
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, transparent);
  color: var(--accent, #2563eb);
}
.ims-tool.is-accent:hover:not(:disabled) {
  background: var(--accent, #2563eb);
  color: #fff;
}
.ims-tool:disabled { opacity: 0.38; cursor: not-allowed; }
.ims-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--text) 8%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--text) 8%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--text) 8%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--text) 8%, transparent) 75%),
    color-mix(in srgb, var(--bg-alt, #e2e8f0) 55%, var(--card, #fff));
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.ims-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.ims-banner {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: start;
  color: var(--text, #0f172a);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--card, #fff));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.ims-banner span { flex: 1; min-width: 0; }
.ims-banner-close {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text, #0f172a);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.ims-banner-close:hover {
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
.media-status-banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem 0.55rem 0.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text, #0f172a);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}
.media-status-banner span { flex: 1; min-width: 0; }
.media-status-close {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text, #0f172a);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}
.ims-loading, .ims-guide {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 34rem);
  padding: 0.45rem 0.9rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 650;
  text-align: center;
  line-height: 1.35;
  background: color-mix(in srgb, var(--card, #fff) 94%, transparent);
  color: var(--text, #0f172a);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 16%, transparent);
  z-index: 3;
}
.ims-loading { top: 0.85rem; }
.ims-guide {
  top: 0.75rem;
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--accent, #2563eb) 28%, transparent);
}
.ims-canvas.is-lasso { cursor: crosshair; }
.ims-canvas.is-crop { cursor: crosshair; }
.ims-canvas.is-pan { cursor: grab; }
.ims-canvas.is-pan:active { cursor: grabbing; }
.ims-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border, var(--bg-alt, #e2e8f0)) 90%, transparent);
  background: color-mix(in srgb, var(--bg-alt, #e2e8f0) 28%, var(--card, #fff));
}
.ims-foot-start, .ims-foot-end {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.ims-foot-end { margin-inline-start: auto; }
@media (max-width: 640px) {
  .ims-dialog { height: min(92vh, 900px); width: calc(100vw - 0.8rem); }
  .ims-tool-group--actions .ims-tool span { display: none; }
  .ims-tool-group--actions .ims-tool { width: 2.15rem; padding: 0; border-radius: 10px; }
  .ims-tool-group--actions { margin-inline-start: 0; width: 100%; }
}

.item-media-card.is-primary { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.item-media-badge {
  position: absolute; top: 0.35rem; inset-inline-start: 0.35rem;
  font-size: 0.65rem; padding: 0.1rem 0.35rem; border-radius: 6px;
  background: var(--accent); color: #fff; font-weight: 700;
}
.item-media-card-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }
.pos-tile-thumb { margin-bottom: 0.25rem; }
.product-tile { position: relative; }
.pos-note-badge {
  position: absolute; top: 0.35rem; inset-inline-end: 0.35rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; background: #f59e0b; color: #111; font-weight: 700;
}
.pos-note-badge.sev-2 { background: #ef4444; color: #fff; }
.pos-seats-hint, .pos-open-checks { margin: 0.25rem 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.kds-prep { margin: 0.2rem 0; font-size: 0.78rem; }
.kds-prep summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.kds-bom, .kds-mods { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.15rem 0; }
.kds-bom-chip, .kds-mod {
  font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.kds-line-note { display: block; margin-top: 0.15rem; }
.kds-line-note.sev-1, .kds-note-important .kds-line-note { color: #b45309; font-weight: 600; }
.kds-line-note.sev-2, .kds-note-critical .kds-line-note { color: #b91c1c; font-weight: 700; }
.kds-line-main { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ft-open-orders {
  display: flex; flex-direction: column; gap: 0.28rem;
  margin-top: 0.35rem; width: 100%;
  padding: 0.35rem 0.4rem 0.4rem;
  border-radius: 10px;
  background: color-mix(in srgb, #0ea5e9 10%, var(--card));
  border: 1px solid color-mix(in srgb, #0ea5e9 28%, transparent);
  max-height: 8.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ft-open-orders-label {
  font-size: 0.68rem; font-weight: 800;
  color: color-mix(in srgb, #0284c7 70%, var(--text));
  letter-spacing: 0.01em;
}
.ft-check-chip {
  display: flex; flex-direction: column; gap: 0.15rem;
  width: 100%; text-align: start;
  padding: 0.35rem 0.45rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, #0284c7 35%, var(--bg-alt));
  background: color-mix(in srgb, var(--card) 88%, #0ea5e9);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, #0284c7 12%, transparent);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.ft-check-chip:hover {
  border-color: color-mix(in srgb, #0284c7 70%, var(--accent));
  box-shadow: 0 2px 8px color-mix(in srgb, #0284c7 22%, transparent);
}
.ft-check-chip-main {
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700;
  color: var(--text);
}
.ft-check-chip-kind {
  font-size: 0.62rem; font-weight: 700;
  color: color-mix(in srgb, #0369a1 55%, var(--text));
  background: color-mix(in srgb, #0ea5e9 18%, transparent);
  padding: 0.05rem 0.35rem; border-radius: 999px;
}
.ft-check-chip-no {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 800;
}
.ft-check-chip-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.ft-check-chip-meta > span { color: inherit; }
.ft-check-chip-go {
  margin-inline-start: auto;
  color: color-mix(in srgb, #0284c7 45%, var(--accent));
  font-weight: 800;
}
.ft-check-chip-total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ft-check-chip.is-compact {
  padding: 0.28rem 0.4rem;
  gap: 0.08rem;
}
.ft-check-chip.is-compact .ft-check-chip-main { font-size: 0.68rem; }
.ft-check-chip.is-compact .ft-check-chip-meta { font-size: 0.6rem; gap: 0.35rem; }
.ft-check-chip.has-notes {
  border-inline-start: 3px solid color-mix(in srgb, #0ea5e9 70%, var(--accent));
}
.ft-check-chip.has-notes.sev-1 {
  border-inline-start-color: #d97706;
  background: color-mix(in srgb, #f59e0b 10%, var(--card));
}
.ft-check-chip.has-notes.sev-2 {
  border-inline-start-color: #dc2626;
  background: color-mix(in srgb, #ef4444 12%, var(--card));
}
.ft-check-note-flag {
  font-size: 0.72rem;
  line-height: 1;
  margin-inline-start: 0.15rem;
  filter: saturate(1.05);
}
.ft-check-notes {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0.2rem;
  padding-top: 0.28rem;
  border-top: 1px dashed color-mix(in srgb, #0284c7 28%, transparent);
  text-align: start;
  width: 100%;
}
.ft-check-note {
  display: grid;
  grid-template-columns: minmax(3.2rem, 34%) 1fr;
  gap: 0.35rem;
  align-items: start;
  font-size: 0.62rem;
  line-height: 1.35;
  padding: 0.18rem 0.3rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-alt, var(--card)) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.ft-check-note.order {
  background: color-mix(in srgb, #0ea5e9 12%, var(--card));
  border-color: color-mix(in srgb, #0284c7 22%, transparent);
}
.ft-check-note.sev-1 {
  background: color-mix(in srgb, #f59e0b 14%, var(--card));
  border-color: color-mix(in srgb, #d97706 30%, transparent);
}
.ft-check-note.sev-2 {
  background: color-mix(in srgb, #ef4444 14%, var(--card));
  border-color: color-mix(in srgb, #dc2626 32%, transparent);
}
.ft-check-note-tag {
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 78%, #0369a1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-check-note.sev-1 .ft-check-note-tag { color: #b45309; }
.ft-check-note.sev-2 .ft-check-note-tag { color: #b91c1c; }
.ft-check-note-body {
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  word-break: break-word;
}
.ft-check-note.sev-1 .ft-check-note-body { color: #92400e; }
.ft-check-note.sev-2 .ft-check-note-body { color: #991b1b; font-weight: 700; }
.ft-check-note-more {
  font-size: 0.58rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 65%, #0ea5e9);
  padding-inline: 0.2rem;
}
.ft-check-chip.is-compact .ft-check-note {
  font-size: 0.58rem;
  grid-template-columns: minmax(2.8rem, 38%) 1fr;
  padding: 0.12rem 0.22rem;
}
.ft-chip.notes {
  background: color-mix(in srgb, #0ea5e9 16%, transparent);
  color: var(--text) !important;
}
.ft-chip.notes.sev-1 {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #92400e !important;
}
.ft-chip.notes.sev-2 {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  color: #991b1b !important;
}
.ft-pick-check {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 0.35rem;
  text-align: start;
  width: 100%;
}
.ft-pick-check-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
}
.ft-pick-check.has-notes.sev-1 {
  border-color: color-mix(in srgb, #d97706 45%, var(--border, #e2e8f0));
}
.ft-pick-check.has-notes.sev-2 {
  border-color: color-mix(in srgb, #dc2626 50%, var(--border, #e2e8f0));
}
.ft-pick-notes {
  margin-top: 0;
  padding-top: 0.2rem;
  pointer-events: none;
}
.ft-open-more {
  font-size: 0.65rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 70%, #0ea5e9);
  text-align: center;
  padding: 0.15rem 0;
}
.ft-chip.checks { background: color-mix(in srgb, #0ea5e9 18%, transparent); color: var(--text) !important; }

/* Dark themes: never use flat white chips (white-on-white / washed totals) */
body.theme-obsidian .ft-open-orders,
body.theme-midnight .ft-open-orders,
body.theme-carbon .ft-open-orders,
html[data-theme="dark"] .ft-open-orders {
  background: color-mix(in srgb, #38bdf8 14%, var(--card));
  border-color: color-mix(in srgb, #38bdf8 32%, transparent);
}
body.theme-obsidian .ft-open-orders-label,
body.theme-midnight .ft-open-orders-label,
body.theme-carbon .ft-open-orders-label,
html[data-theme="dark"] .ft-open-orders-label {
  color: #7dd3fc;
}
body.theme-obsidian .ft-check-chip,
body.theme-midnight .ft-check-chip,
body.theme-carbon .ft-check-chip,
html[data-theme="dark"] .ft-check-chip {
  background: color-mix(in srgb, #0f172a 55%, #0c4a6e);
  border-color: color-mix(in srgb, #38bdf8 40%, transparent);
  color: #f1f5f9;
  box-shadow: none;
}
body.theme-obsidian .ft-check-chip-main,
body.theme-obsidian .ft-check-chip-no,
body.theme-midnight .ft-check-chip-main,
body.theme-midnight .ft-check-chip-no,
body.theme-carbon .ft-check-chip-main,
body.theme-carbon .ft-check-chip-no,
html[data-theme="dark"] .ft-check-chip-main,
html[data-theme="dark"] .ft-check-chip-no {
  color: #f8fafc;
}
body.theme-obsidian .ft-check-chip-kind,
body.theme-midnight .ft-check-chip-kind,
body.theme-carbon .ft-check-chip-kind,
html[data-theme="dark"] .ft-check-chip-kind {
  color: #e0f2fe;
  background: color-mix(in srgb, #38bdf8 22%, transparent);
}
body.theme-obsidian .ft-check-chip-meta,
body.theme-midnight .ft-check-chip-meta,
body.theme-carbon .ft-check-chip-meta,
html[data-theme="dark"] .ft-check-chip-meta {
  color: #cbd5e1;
}
body.theme-obsidian .ft-check-chip-go,
body.theme-midnight .ft-check-chip-go,
body.theme-carbon .ft-check-chip-go,
html[data-theme="dark"] .ft-check-chip-go {
  color: #7dd3fc;
}
body.theme-obsidian .ft-check-chip-total,
body.theme-midnight .ft-check-chip-total,
body.theme-carbon .ft-check-chip-total,
html[data-theme="dark"] .ft-check-chip-total {
  color: #f8fafc;
}
body.theme-obsidian .ft-check-chip.has-notes.sev-1,
body.theme-midnight .ft-check-chip.has-notes.sev-1,
body.theme-carbon .ft-check-chip.has-notes.sev-1,
html[data-theme="dark"] .ft-check-chip.has-notes.sev-1 {
  background: color-mix(in srgb, #f59e0b 18%, #0f172a);
  border-inline-start-color: #fbbf24;
}
body.theme-obsidian .ft-check-chip.has-notes.sev-2,
body.theme-midnight .ft-check-chip.has-notes.sev-2,
body.theme-carbon .ft-check-chip.has-notes.sev-2,
html[data-theme="dark"] .ft-check-chip.has-notes.sev-2 {
  background: color-mix(in srgb, #ef4444 20%, #0f172a);
  border-inline-start-color: #f87171;
}
body.theme-obsidian .ft-check-notes,
body.theme-midnight .ft-check-notes,
body.theme-carbon .ft-check-notes,
html[data-theme="dark"] .ft-check-notes {
  border-top-color: color-mix(in srgb, #38bdf8 28%, transparent);
}
body.theme-obsidian .ft-check-note,
body.theme-midnight .ft-check-note,
body.theme-carbon .ft-check-note,
html[data-theme="dark"] .ft-check-note {
  background: color-mix(in srgb, #1e293b 80%, transparent);
  border-color: color-mix(in srgb, #94a3b8 18%, transparent);
  color: #e2e8f0;
}
body.theme-obsidian .ft-check-note.order,
body.theme-midnight .ft-check-note.order,
body.theme-carbon .ft-check-note.order,
html[data-theme="dark"] .ft-check-note.order {
  background: color-mix(in srgb, #0ea5e9 16%, #0f172a);
}
body.theme-obsidian .ft-check-note.sev-1,
body.theme-midnight .ft-check-note.sev-1,
body.theme-carbon .ft-check-note.sev-1,
html[data-theme="dark"] .ft-check-note.sev-1 {
  background: color-mix(in srgb, #f59e0b 18%, #0f172a);
}
body.theme-obsidian .ft-check-note.sev-2,
body.theme-midnight .ft-check-note.sev-2,
body.theme-carbon .ft-check-note.sev-2,
html[data-theme="dark"] .ft-check-note.sev-2 {
  background: color-mix(in srgb, #ef4444 20%, #0f172a);
}
body.theme-obsidian .ft-check-note-tag,
body.theme-midnight .ft-check-note-tag,
body.theme-carbon .ft-check-note-tag,
html[data-theme="dark"] .ft-check-note-tag {
  color: #bae6fd;
}
body.theme-obsidian .ft-check-note.sev-1 .ft-check-note-tag,
body.theme-obsidian .ft-check-note.sev-1 .ft-check-note-body,
body.theme-midnight .ft-check-note.sev-1 .ft-check-note-tag,
body.theme-midnight .ft-check-note.sev-1 .ft-check-note-body,
body.theme-carbon .ft-check-note.sev-1 .ft-check-note-tag,
body.theme-carbon .ft-check-note.sev-1 .ft-check-note-body,
html[data-theme="dark"] .ft-check-note.sev-1 .ft-check-note-tag,
html[data-theme="dark"] .ft-check-note.sev-1 .ft-check-note-body {
  color: #fcd34d;
}
body.theme-obsidian .ft-check-note.sev-2 .ft-check-note-tag,
body.theme-obsidian .ft-check-note.sev-2 .ft-check-note-body,
body.theme-midnight .ft-check-note.sev-2 .ft-check-note-tag,
body.theme-midnight .ft-check-note.sev-2 .ft-check-note-body,
body.theme-carbon .ft-check-note.sev-2 .ft-check-note-tag,
body.theme-carbon .ft-check-note.sev-2 .ft-check-note-body,
html[data-theme="dark"] .ft-check-note.sev-2 .ft-check-note-tag,
html[data-theme="dark"] .ft-check-note.sev-2 .ft-check-note-body {
  color: #fca5a5;
}
body.theme-obsidian .ft-check-note-body,
body.theme-midnight .ft-check-note-body,
body.theme-carbon .ft-check-note-body,
html[data-theme="dark"] .ft-check-note-body {
  color: #e2e8f0;
}
body.theme-obsidian .ft-chip.notes.sev-1,
body.theme-midnight .ft-chip.notes.sev-1,
body.theme-carbon .ft-chip.notes.sev-1,
html[data-theme="dark"] .ft-chip.notes.sev-1 {
  color: #fcd34d !important;
}
body.theme-obsidian .ft-chip.notes.sev-2,
body.theme-midnight .ft-chip.notes.sev-2,
body.theme-carbon .ft-chip.notes.sev-2,
html[data-theme="dark"] .ft-chip.notes.sev-2 {
  color: #fca5a5 !important;
}
.ft-pick-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }

/* ?? Item media viewer (shared lightbox) ?? */
.item-media-thumb.is-clickable {
  position: relative; cursor: zoom-in; border: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
}
.item-media-thumb.is-clickable:hover { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.item-media-zoom-badge {
  position: absolute; inset-inline-end: 2px; bottom: 2px;
  width: 1rem; height: 1rem; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; line-height: 1;
  background: rgba(15, 23, 42, 0.55); color: #fff;
  pointer-events: none;
}
.imv-backdrop {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(3px);
}
.imv-panel {
  position: fixed; z-index: 12001;
  inset-inline: max(0.75rem, calc(50% - 28rem));
  top: 4.5vh; bottom: 4.5vh;
  max-width: 56rem; width: calc(100% - 1.5rem);
  margin-inline: auto;
  display: flex; flex-direction: column;
  background: var(--card); color: var(--text);
  border-radius: 16px; border: 1px solid var(--bg-alt);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  overflow: hidden;
}
.imv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem 0.55rem;
  border-bottom: 1px solid var(--bg-alt);
}
.imv-head h3 { margin: 0; font-size: 1.05rem; }
.imv-close {
  width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--bg-alt);
  background: transparent; color: var(--text); font-size: 1.25rem; cursor: pointer; line-height: 1;
}
.imv-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.55rem 1rem 0; }
.imv-body { flex: 1; overflow: auto; padding: 0.75rem 1rem 1rem; }
.imv-loading { display: flex; align-items: center; justify-content: center; min-height: 12rem; }
.imv-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 16rem; max-height: 48vh;
  border-radius: 12px; overflow: auto;
  background: color-mix(in srgb, var(--bg-alt) 55%, var(--card));
  border: 1px solid var(--bg-alt);
}
.imv-main-img {
  max-width: 100%; max-height: 46vh; object-fit: contain;
  transform-origin: center center; transition: transform .12s ease;
}
.imv-video { max-width: 100%; max-height: 46vh; }
.imv-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  margin-top: 0.65rem;
}
.imv-zoom-label { font-size: 0.78rem; font-weight: 700; min-width: 2.6rem; text-align: center; }
.imv-thumbs {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem;
}
.imv-thumb {
  width: 3.2rem; height: 3.2rem; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: var(--bg-alt); cursor: pointer;
}
.imv-thumb.is-active { border-color: var(--accent); }
.imv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imv-thumb-video {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  color: #fff; background: #0f172a; font-size: 0.9rem;
}
.imv-hint { margin: 0.5rem 0 0; font-size: 0.75rem; }
.imv-block { margin-bottom: 0.85rem; }
.imv-block h4 { margin: 0 0 0.25rem; font-size: 0.85rem; }
.imv-block p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.imv-note.sev-1 { color: #b45309; }
.imv-note.sev-2 { color: #b91c1c; font-weight: 600; }
.imv-fallback-thumb { width: 7rem !important; height: 7rem !important; }

/* View popup أ¢â‚¬â€‌ add-ons / modifiers (read-only) */
.imv-mods { display: flex; flex-direction: column; gap: 0.85rem; }
.imv-mods-intro {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.imv-mods-title {
  margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 750;
  color: var(--text, #1f2937);
}
.imv-mods-lead { margin: 0; font-size: 0.8rem; line-height: 1.4; max-width: 36rem; }
.imv-mods-count {
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 750;
  color: var(--accent, #0078d4);
  background: color-mix(in srgb, var(--accent, #0078d4) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 22%, transparent);
  white-space: nowrap;
}
.imv-mods-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.35rem;
  min-height: 11rem; padding: 1.25rem 1rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent, #0078d4) 28%, transparent);
  background: color-mix(in srgb, var(--accent, #0078d4) 5%, var(--card, #fff));
}
.imv-mods-empty-ico {
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--accent, #0078d4);
  background: color-mix(in srgb, var(--accent, #0078d4) 12%, transparent);
  margin-bottom: 0.25rem;
}
.imv-mods-empty-title { margin: 0; font-weight: 750; font-size: 0.92rem; }
.imv-mod-groups { display: flex; flex-direction: column; gap: 0.7rem; }
.imv-mod-card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 16%, var(--bg-alt, #e5e7eb));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent, #0078d4) 6%, var(--card, #fff)) 0%,
    var(--card, #fff) 52%
  );
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 65%, transparent) inset;
  padding: 0.75rem 0.85rem 0.85rem;
}
.imv-mod-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
}
.imv-mod-badge {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 750;
  color: #fff; background: var(--accent, #0078d4);
}
.imv-mod-req {
  display: inline-flex; align-items: center;
  padding: 0.16rem 0.5rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 750;
  color: #9a3412;
  background: color-mix(in srgb, #f97316 16%, transparent);
  border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
}
.imv-mod-name {
  margin: 0; flex: 1 1 8rem; min-width: 0;
  font-size: 0.95rem; font-weight: 750; line-height: 1.3;
}
.imv-mod-bilingual { margin: 0 0 0.55rem; font-size: 0.75rem; }
.imv-mod-options-label {
  font-size: 0.72rem; font-weight: 750;
  color: color-mix(in srgb, var(--text, #1f2937) 65%, transparent);
  margin-bottom: 0.4rem;
}
.imv-mod-opt-empty { margin: 0; font-size: 0.8rem; }
.imv-mod-opt-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.imv-mod-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 12%, transparent);
  background: color-mix(in srgb, var(--card, #fff) 92%, transparent);
}
.imv-mod-opt-name {
  font-size: 0.86rem; font-weight: 650; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imv-mod-opt-price {
  flex-shrink: 0;
  font-size: 0.75rem; font-weight: 750;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  color: color-mix(in srgb, var(--text, #1f2937) 72%, transparent);
  background: color-mix(in srgb, var(--bg-alt, #e5e7eb) 70%, transparent);
}
.imv-mod-opt-price.has-extra {
  color: #0f766e;
  background: color-mix(in srgb, #14b8a6 14%, transparent);
  border: 1px solid color-mix(in srgb, #14b8a6 28%, transparent);
}
@media (max-width: 720px) {
  .imv-panel { inset-inline: 0.4rem; top: 3vh; bottom: 3vh; width: auto; border-radius: 12px; }
  .imv-stage { min-height: 12rem; max-height: 40vh; }
}

/* POS cart section heading (cache-safe ? loaded after pos-theme) */
.app-shell .pos-right .pos-cart-heading,
.app-shell h3.pos-cart-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.15rem 0 0.65rem;
    padding: 0.4rem 0.65rem;
    border: 0;
    border-radius: 10px;
    border-inline-start: 3px solid var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 7%, var(--card, #fff));
    font-size: 0.78rem !important;
    font-weight: 650;
    letter-spacing: 0.03em;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text) 55%, var(--accent, #2563eb)) !important;
}
.app-shell .pos-customer-row { margin-bottom: 0; }

/* ?? Dining theater modal (theme-aware) ?? */
.dt-theater-scrim {
  position: absolute !important; inset: 0 !important; z-index: 9000 !important;
  background: color-mix(in srgb, var(--text, #0f172a) 45%, transparent) !important;
  backdrop-filter: blur(10px);
}
.dt-theater {
  position: absolute !important; z-index: 9001 !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(56rem, calc(100vw - 1.25rem)) !important;
  height: min(90vh, 46rem) !important;
  max-height: 90vh !important;
  display: flex !important; flex-direction: column !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--card, #fff) !important;
  color: var(--text, #0f172a) !important;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent) !important;
  box-shadow: 0 40px 100px color-mix(in srgb, #000 28%, transparent) !important;
}
.dt-theater-top {
  display: flex !important; align-items: center !important; gap: 0.75rem !important;
  flex-wrap: wrap !important; flex-shrink: 0 !important;
  padding: 0.85rem 1.15rem !important;
  background: color-mix(in srgb, var(--bg-alt, #eef2f7) 70%, var(--card, #fff)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
}
.dt-theater-id { flex: 1 1 auto; min-width: 8rem; }
.dt-theater-id strong {
  display: block; font-size: 1.15rem; font-weight: 750;
  color: var(--text, #0f172a) !important;
}
.dt-theater-id span {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--text) 58%, transparent) !important;
}
.dt-theater-pill {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
  padding: 0.35rem 0.85rem !important; border-radius: 999px !important;
  font-size: 0.78rem !important; font-weight: 800 !important;
  border: 1px solid transparent !important;
}
.dt-theater-pill.ok { background: #dcfce7; color: #166534; border-color: #86efac; }
.dt-theater-pill.busy { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.dt-theater-pill.hold { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.dt-theater-pill.dirt { background: #e7e5e4; color: #44403c; border-color: #a8a29e; }
.dt-theater-x {
  width: 2.1rem; height: 2.1rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.dt-theater-tip {
  margin: 0; padding: 0.45rem 1.15rem; flex-shrink: 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--accent, #2563eb) 75%, var(--text));
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.dt-theater-stage {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0.35rem 0.5rem !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%),
    radial-gradient(ellipse 55% 45% at 50% 72%, color-mix(in srgb, var(--text) 6%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg-alt, #f1f5f9) 55%, var(--card, #fff)) !important;
}
.dt-theater-stage .dt-stage {
  width: 100% !important; height: 100% !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border-radius: 0 !important;
}
.dt-theater-stage .dt-svg {
  width: 100% !important;
  height: 100% !important;
  min-height: 22rem !important;
  max-height: none !important;
}
.dt-theater-bar {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 0.5rem !important; flex-shrink: 0 !important;
  padding: 0.85rem 1.15rem !important;
  background: color-mix(in srgb, var(--bg-alt, #eef2f7) 65%, var(--card, #fff)) !important;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
}
.dt-theater-wait {
  flex: 1; font-size: 0.82rem;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
body.theme-obsidian .dt-theater-pill.ok,
body.theme-zad .dt-theater-pill.ok { background: color-mix(in srgb, #22c55e 28%, transparent); color: #bbf7d0; border-color: #16a34a; }
body.theme-obsidian .dt-theater-pill.busy,
body.theme-zad .dt-theater-pill.busy { background: color-mix(in srgb, #f97316 28%, transparent); color: #fed7aa; border-color: #ea580c; }
body.theme-obsidian .dt-theater-pill.hold,
body.theme-zad .dt-theater-pill.hold { background: color-mix(in srgb, #3b82f6 28%, transparent); color: #bfdbfe; border-color: #2563eb; }
body.theme-obsidian .dt-theater-pill.dirt,
body.theme-zad .dt-theater-pill.dirt { background: color-mix(in srgb, #a8a29e 28%, transparent); color: #e7e5e4; border-color: #78716c; }
body.theme-obsidian .dt-theater-scrim {
  background: rgba(4, 6, 12, 0.72) !important;
}
@media (max-width: 700px) {
  .dt-theater { width: calc(100vw - 0.5rem) !important; height: 92vh !important; border-radius: 14px !important; }
  .dt-theater-stage .dt-svg { min-height: 16rem !important; }
}

/* ?? Owner portal (align with org/staff form language) ?? */
.app-shell .owner-portal-card { padding: 1.1rem 1.25rem 1.25rem; }
.app-shell .owner-portal-card > .section-title:first-child,
.app-shell .owner-portal-card form > .section-title:first-child,
.app-shell .owner-portal-card > .owner-panel-toolbar:first-child {
  margin-top: 0;
}
.app-shell .owner-portal-card .section-title-sub {
  margin-top: 1rem;
  font-size: 0.95rem;
}
.app-shell .owner-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.app-shell .owner-panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.app-shell .owner-panel-toolbar .section-title { margin: 0; }
.app-shell .owner-user-pack-editor {
  border: 1px solid var(--border, color-mix(in srgb, var(--accent) 28%, transparent));
}
.app-shell .owner-portal-card > .form-grid + .modal-actions,
.app-shell .owner-portal-card .form-grid + .modal-actions {
  margin-top: 0.75rem;
}
.app-shell .owner-portal-card .form-grid + .modal-actions + .table-wrap,
.app-shell .owner-portal-card .modal-actions + .muted,
.app-shell .owner-portal-card .modal-actions + .table-wrap {
  margin-top: 0.85rem;
}
.app-shell .owner-pack-block { margin: 1rem 0 0.25rem; }
.app-shell .owner-pack-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.35rem 0 0.65rem; }
.app-shell .owner-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.55rem;
}
.app-shell .owner-pack-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius, 10px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-alt));
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  text-align: start;
}
.app-shell .owner-pack-chip input { accent-color: var(--accent); }
.app-shell .owner-pack-chip.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.app-shell .owner-activity-grid { margin-bottom: 0.35rem; }
.app-shell .owner-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block: 0.25rem;
  margin-inline: 0 0.75rem;
  font-size: 0.9rem;
}
.app-shell .owner-send-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  margin-top: 0.75rem;
}
.app-shell .owner-org-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
}
.app-shell .owner-org-title { margin: 0.15rem 0 0.35rem; font-size: 1.25rem; text-align: start; }
.app-shell .owner-org-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-inline-start: auto;
  justify-content: flex-end;
}
.app-shell .owner-org-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}
.app-shell .owner-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-alt) 70%, var(--card));
}
.app-shell .owner-status-chip.ok {
  color: #166534;
  border-color: color-mix(in srgb, #22c55e 45%, transparent);
  background: color-mix(in srgb, #22c55e 14%, var(--card));
}
.app-shell .owner-status-chip.warn {
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 45%, transparent);
  background: color-mix(in srgb, #f59e0b 14%, var(--card));
}
.app-shell .owner-status-chip.bad {
  color: #991b1b;
  border-color: color-mix(in srgb, #ef4444 45%, transparent);
  background: color-mix(in srgb, #ef4444 12%, var(--card));
}
.app-shell .owner-status-chip.trial {
  color: #5b21b6;
  border-color: color-mix(in srgb, #a78bfa 50%, transparent);
  background: color-mix(in srgb, #a78bfa 18%, var(--card));
}
html.theme-obsidian .app-shell .owner-status-chip.ok,
body.theme-obsidian .app-shell .owner-status-chip.ok {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.14);
}
html.theme-obsidian .app-shell .owner-status-chip.warn,
body.theme-obsidian .app-shell .owner-status-chip.warn {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.14);
}
html.theme-obsidian .app-shell .owner-status-chip.bad,
body.theme-obsidian .app-shell .owner-status-chip.bad {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.14);
}
html.theme-obsidian .app-shell .owner-status-chip.trial,
body.theme-obsidian .app-shell .owner-status-chip.trial {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(129, 140, 248, 0.16);
}
.app-shell .owner-trial-callout {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #a78bfa 40%, transparent);
  background: color-mix(in srgb, #a78bfa 12%, var(--card));
}
.app-shell .owner-trial-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent, #6366f1);
}
.app-shell .owner-trial-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.15rem;
}
.app-shell .owner-trial-live__label {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent, #6366f1);
  flex-shrink: 0;
}
.app-shell .owner-trial-live__countdown {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
/* Light theme — countdown units inside purple callout */
.app-shell .owner-trial-callout .trial-countdown-unit {
  min-width: 2.35rem;
  padding: 0.22rem 0.32rem;
  border-radius: 10px;
  background: color-mix(in srgb, #7c3aed 18%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, #7c3aed 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.app-shell .owner-trial-callout .trial-countdown-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #4c1d95;
  letter-spacing: 0.03em;
}
.app-shell .owner-trial-callout .trial-countdown-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #6d28d9;
  margin-top: 0.1rem;
}
.app-shell .owner-trial-callout .trial-countdown-sep {
  font-size: 0.95rem;
  font-weight: 800;
  color: color-mix(in srgb, #7c3aed 55%, #475569);
  margin-bottom: 0.75rem;
}
.app-shell .owner-trial-live--expired {
  font-weight: 700;
  font-size: 0.82rem;
  color: #ef4444;
}
html.theme-obsidian .app-shell .owner-trial-live__label,
body.theme-obsidian .app-shell .owner-trial-live__label,
html.theme-midnight .app-shell .owner-trial-live__label,
body.theme-midnight .app-shell .owner-trial-live__label {
  color: #c4b5fd;
}
html.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-value,
body.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-value,
html.theme-midnight .app-shell .owner-trial-callout .trial-countdown-value,
body.theme-midnight .app-shell .owner-trial-callout .trial-countdown-value {
  color: #e0e7ff;
}
html.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-label,
body.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-label,
html.theme-midnight .app-shell .owner-trial-callout .trial-countdown-label,
body.theme-midnight .app-shell .owner-trial-callout .trial-countdown-label {
  color: rgba(203, 213, 225, 0.9);
}
html.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-sep,
body.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-sep,
html.theme-midnight .app-shell .owner-trial-callout .trial-countdown-sep,
body.theme-midnight .app-shell .owner-trial-callout .trial-countdown-sep {
  color: rgba(199, 210, 254, 0.65);
}
html.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-unit,
body.theme-obsidian .app-shell .owner-trial-callout .trial-countdown-unit,
html.theme-midnight .app-shell .owner-trial-callout .trial-countdown-unit,
body.theme-midnight .app-shell .owner-trial-callout .trial-countdown-unit {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(167, 139, 250, 0.35);
}
.app-shell .owner-cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}
.app-shell .owner-cred-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.app-shell .owner-pwd-reveal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.app-shell .owner-pwd-val {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-alt) 80%, var(--card));
  cursor: pointer;
  user-select: text;
}
.app-shell .owner-pwd-toggle {
  min-width: 2rem;
  padding: 0.15rem 0.4rem !important;
}
.app-shell .owner-pwd-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.app-shell .owner-pwd-copy {
  min-width: 2rem;
  padding: 0.15rem 0.4rem !important;
}
.app-shell .owner-pwd-missing {
  display: block;
  margin-top: 0.15rem;
}
.app-shell .owner-pwd-copied {
  color: var(--accent, #0078d4);
}
.app-shell .owner-sub-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.app-shell .owner-sub-timeline-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.app-shell .owner-sub-timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 0.35rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 70%, #94a3b8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.app-shell .owner-sub-timeline-dot.is-paid { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.app-shell .owner-sub-timeline-dot.is-void { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.app-shell .owner-sub-timeline-dot.is-audit { background: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2); }
.app-shell .owner-sub-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
html.theme-obsidian .app-shell .owner-trial-callout,
body.theme-obsidian .app-shell .owner-trial-callout {
  color: #e9d5ff;
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(91, 33, 182, 0.22);
}
html.theme-obsidian .app-shell .owner-trial-callout strong,
body.theme-obsidian .app-shell .owner-trial-callout strong {
  color: #f3e8ff;
}
@media (max-width: 720px) {
  .app-shell .owner-org-metrics { grid-template-columns: 1fr; }
}

.app-shell .owner-pack-search { flex: 1; min-width: 160px; max-width: 280px; }
.app-shell .owner-pack-group {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius, 10px);
  margin: 0.55rem 0;
  background: color-mix(in srgb, var(--card) 92%, var(--bg-alt));
  overflow: hidden;
}
.app-shell .owner-pack-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.8rem;
  border: 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--text);
  cursor: pointer;
  text-align: start;
}
.app-shell .owner-pack-group-head strong { flex: 1; font-size: 0.92rem; }
.app-shell .owner-pack-chevron { width: 1rem; opacity: .7; }
.app-shell .owner-pack-group-toggles { margin-inline-start: auto; }
.app-shell .owner-pack-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem 0.65rem;
}
.app-shell .owner-pack-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.app-shell .owner-pack-row:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.app-shell .owner-pack-row.is-on {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.app-shell .owner-pack-row-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.app-shell .owner-pack-row-label { font-size: 0.88rem; }
.app-shell .owner-pack-route { font-family: ui-monospace, Consolas, monospace; opacity: .65; }

.app-shell .multi-select-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.25rem 0 0.55rem;
}

.app-shell .owner-activity-pack-modal {
  width: min(960px, 96vw) !important;
}

.app-shell .owner-activity-pack-layout {
  display: grid;
  grid-template-columns: minmax(200px, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  min-height: 280px;
  max-height: min(62vh, 560px);
}

.app-shell .owner-activity-pack-left,
.app-shell .owner-activity-pack-right {
  overflow: auto;
  padding: 0.35rem 0.15rem;
  border: 1px solid var(--input-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--card) 92%, var(--bg-alt, #f5f5f5));
}

.app-shell .owner-activity-pack-left { padding-inline: 0.65rem; }
.app-shell .owner-activity-pack-right { padding: 0.55rem 0.75rem; }

.app-shell .owner-activity-pack-cat { margin-bottom: 0.65rem; }

.app-shell .owner-activity-pack-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.app-shell .owner-activity-pack-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  text-align: start;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.app-shell .owner-activity-pack-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.app-shell .owner-activity-pack-item.is-on {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

@media (max-width: 720px) {
  .app-shell .owner-activity-pack-layout {
    grid-template-columns: 1fr;
    max-height: min(70vh, 640px);
  }
}

.pos-inbound-board .kds-card-pro {
  height: auto;
  max-height: none;
  min-height: 0;
  background: var(--card, var(--surface, #fff));
  color: var(--text);
  border-color: color-mix(in srgb, var(--input-border, var(--border, #cfd6dd)) 90%, transparent);
}
/* Match Delivery Board icon dock (kds-ico-row) */
.pos-inbound-board .kds-actions.kds-ico-row,
.pos-inbound-board .pos-inbound-actions.kds-ico-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.5rem;
  flex-wrap: nowrap !important;
  align-items: stretch;
}
.pos-inbound-board .pos-inbound-actions .btn-icon-action,
.pos-inbound-board .pos-inbound-actions a.btn-icon-action {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center;
}
.pos-inbound-board .pos-inbound-actions .kds-dock-slot {
  min-height: 2.45rem;
}
.hotel-stays-board .hotel-stay-actions.kds-ico-row,
.hotel-stays-board .kds-actions.kds-ico-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.5rem;
}
.hotel-stays-board .hotel-stay-actions .btn-icon-action,
.hotel-stays-board .hotel-stay-actions a.btn-icon-action {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center;
}
.pos-inbound-board .kds-card.is-called {
  box-shadow: 0 0 0 2px color-mix(in srgb, #10b981 55%, transparent);
}
.pos-inbound-board .pos-status-pill.is-incoming {
  background: color-mix(in srgb, #2563eb 18%, transparent);
  color: color-mix(in srgb, #2563eb 70%, var(--text));
  border-color: color-mix(in srgb, #2563eb 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-prep {
  background: color-mix(in srgb, #d97706 18%, transparent);
  color: color-mix(in srgb, #d97706 70%, var(--text));
  border-color: color-mix(in srgb, #d97706 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-ready {
  background: color-mix(in srgb, #7c3aed 18%, transparent);
  color: color-mix(in srgb, #7c3aed 70%, var(--text));
  border-color: color-mix(in srgb, #7c3aed 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-delivery {
  background: color-mix(in srgb, #ea580c 18%, transparent);
  color: color-mix(in srgb, #ea580c 70%, var(--text));
  border-color: color-mix(in srgb, #ea580c 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-pickup {
  background: color-mix(in srgb, #0284c7 18%, transparent);
  color: color-mix(in srgb, #0284c7 70%, var(--text));
  border-color: color-mix(in srgb, #0284c7 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-shop {
  background: color-mix(in srgb, #0d9488 18%, transparent);
  color: color-mix(in srgb, #0d9488 70%, var(--text));
  border-color: color-mix(in srgb, #0d9488 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-ok {
  background: color-mix(in srgb, #16a34a 18%, transparent) !important;
  color: color-mix(in srgb, #16a34a 70%, var(--text)) !important;
  -webkit-text-fill-color: color-mix(in srgb, #16a34a 70%, var(--text));
  border-color: color-mix(in srgb, #16a34a 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-waiting {
  background: color-mix(in srgb, #f59e0b 18%, transparent) !important;
  color: color-mix(in srgb, #d97706 70%, var(--text)) !important;
  -webkit-text-fill-color: color-mix(in srgb, #d97706 70%, var(--text));
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.pos-inbound-board .pos-status-pill.is-cancelled {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent) !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted);
  border-color: color-mix(in srgb, var(--text-muted) 35%, transparent);
}
.pos-inbound-ops-alert {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}
.pos-inbound-ops-alert .btn-sm { margin-inline-start: auto; }

/* ── Hotel PMS: room status board + reservation calendar ── */
.hotel-status-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.hotel-kpi-strip {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin: 0.65rem 0 0.35rem;
}
.hotel-kpi {
  min-width: 4.4rem; padding: 0.4rem 0.6rem; border-radius: 0.55rem;
  background: color-mix(in srgb, var(--panel, #fff) 92%, #0f172a 8%);
  border: 1px solid var(--border, #cfd6dd);
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
}
.hotel-kpi span { font-size: 0.65rem; color: var(--muted, #667); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.hotel-kpi strong { font-size: 1.05rem; }
.hotel-kpi.vacant { border-color: color-mix(in srgb, #2f9e44 45%, transparent); }
.hotel-kpi.occupied { border-color: color-mix(in srgb, #1971c2 45%, transparent); }
.hotel-kpi.dirty { border-color: color-mix(in srgb, #e8590c 45%, transparent); }
.hotel-kpi.ooo { border-color: color-mix(in srgb, #868e96 45%, transparent); }
.hotel-board-legend {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.35rem 0 0.5rem; font-size: 0.8rem; color: var(--muted, #667);
}
.hotel-board-legend i {
  display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px;
  margin-inline-end: 0.3rem; vertical-align: -1px;
}
.hotel-board-legend .vacant i { background: #2f9e44; }
.hotel-board-legend .occupied i { background: #1971c2; }
.hotel-board-legend .dirty i { background: #e8590c; }
.hotel-board-legend .ooo i { background: #868e96; }
.hotel-room-tile {
  position: relative;
  border: 1px solid var(--border, #cfd6dd);
  border-radius: 0.75rem;
  padding: 0.7rem 0.7rem 0.55rem;
  background: linear-gradient(165deg, var(--panel, #fff) 0%, color-mix(in srgb, var(--panel, #fff) 88%, #0f172a 12%) 100%);
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-height: 8rem;
  overflow: hidden;
  box-shadow: 0 4px 14px color-mix(in srgb, #0f172a 6%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hotel-room-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, #0f172a 12%, transparent);
}
.hotel-room-tile-glow {
  position: absolute; inset: auto -20% -40% auto; width: 5rem; height: 5rem;
  border-radius: 50%; filter: blur(28px); opacity: 0.28; pointer-events: none;
}
.hotel-room-tile.status-0 { border-left: 4px solid #2f9e44; }
.hotel-room-tile.status-0 .hotel-room-tile-glow { background: #2f9e44; }
.hotel-room-tile.status-1 { border-left: 4px solid #1971c2; }
.hotel-room-tile.status-1 .hotel-room-tile-glow { background: #1971c2; }
.hotel-room-tile.status-2 { border-left: 4px solid #e8590c; }
.hotel-room-tile.status-2 .hotel-room-tile-glow { background: #e8590c; }
.hotel-room-tile.status-3 { border-left: 4px solid #868e96; opacity: 0.92; }
.hotel-room-tile.status-3 .hotel-room-tile-glow { background: #868e96; }
.hotel-room-tile.muted { opacity: 0.55; }
.hotel-room-tile-no { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; position: relative; }
.hotel-room-tile-meta { font-size: 0.78rem; color: var(--muted, #667); position: relative; }
.hotel-room-tile-status { font-size: 0.8rem; font-weight: 700; position: relative; }
.hotel-room-tile.status-0 .hotel-room-tile-status { color: #2f9e44; }
.hotel-room-tile.status-1 .hotel-room-tile-status { color: #1971c2; }
.hotel-room-tile.status-2 .hotel-room-tile-status { color: #e8590c; }
.hotel-room-tile.status-3 .hotel-room-tile-status { color: #868e96; }
.hotel-room-tile-guest { font-size: 0.82rem; color: var(--text, #222); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotel-room-tile-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.2rem; position: relative; }

.hotel-cal-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 0.75rem; font-size: 0.85rem; }

.hotel-cal-leg.free::before { background: #e9ecef; }
.hotel-cal-leg.reserved::before { background: #a5d8ff; }
.hotel-cal-leg.inhouse::before { background: #74c0fc; }
.hotel-cal-leg.blocked::before { background: #ffc078; }
.hotel-cal-wrap { overflow: auto; max-width: 100%; }
.hotel-cal-grid { border-collapse: collapse; min-width: 100%; font-size: 0.78rem; }
.hotel-cal-grid th, .hotel-cal-grid td {
 border: 1px solid var(--border, #dee2e6);
 padding: 0.25rem 0.3rem;
 text-align: center;
 white-space: nowrap;
}
.hotel-cal-room { font-weight: 600; text-align: start !important; position: sticky; inset-inline-start: 0; background: var(--panel, #fff); z-index: 1; }
.hotel-cal-cell { min-width: 3.2rem; max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; }
.hotel-cal-cell.kind-0 { background: #f8f9fa; }
.hotel-cal-cell.kind-1 { background: #a5d8ff; }
.hotel-cal-cell.kind-2 { background: #74c0fc; color: #0b2e4e; font-weight: 600; }
.hotel-cal-cell.kind-3 { background: #ffc078; }


/* Hotel rooms map — TablesFloor parity accents */
.vf-leg.ooo i { background: #868e96; box-shadow: 0 0 0 3px rgba(134,142,150,.25); }
.vf-kpi.ooo strong { color: #868e96; }
.ft-room-glyph {
  width: 100%; min-height: 5.2rem;
  display: grid; place-items: center; gap: .2rem;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    color-mix(in srgb, var(--text) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.ft-room-glyph.status-0 { box-shadow: inset 0 0 0 2px color-mix(in srgb, #22c55e 35%, transparent); }
.ft-room-glyph.status-1 { box-shadow: inset 0 0 0 2px color-mix(in srgb, #f59e0b 40%, transparent); }
.ft-room-glyph.status-2 { box-shadow: inset 0 0 0 2px color-mix(in srgb, #a8a29e 45%, transparent); }
.ft-room-glyph.status-3 { box-shadow: inset 0 0 0 2px color-mix(in srgb, #64748b 45%, transparent); opacity: .9; }
.ft-room-door {
  display: inline-grid; place-items: center;
  min-width: 3.6rem; min-height: 3.2rem; padding: .35rem .5rem;
  border-radius: 10px 10px 4px 4px;
  font-weight: 900; font-size: 1.15rem; letter-spacing: .04em;
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 80%, #fff), var(--card));
  border: 2px solid color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, #000 12%, transparent);
}
.ft-room-glyph.immersive { min-height: min(42vh, 18rem); }
.ft-room-glyph.immersive .ft-room-door { min-width: 7rem; min-height: 6rem; font-size: 2rem; }
.ft-status.st-ooo { color: #64748b; }
.hotel-ft-card .ft-name { font-size: .78rem; }
.hotel-stays-board { margin-top: .35rem; }

/* ── Ops density: hotel / clinic / services boards (no fixed 24rem kitchen card height) ── */
.kds-board-pro.ops-dense .kds-card-pro,
.hotel-stays-board .kds-card-pro,
.ops-dense .kds-card-pro {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
}
.kds-board-pro.ops-dense .kds-dock-slot,
.hotel-stays-board .kds-dock-slot,
.ops-dense .kds-dock-slot {
  display: none !important;
  height: 0 !important;
}
.kds-board-pro.ops-dense .kds-lines,
.hotel-stays-board .kds-lines,
.ops-dense .kds-lines {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
}
.kds-board-pro.ops-dense .kds-actions-pro,
.hotel-stays-board .kds-actions-pro,
.ops-dense .kds-actions-pro {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(2.35rem, 1fr));
  gap: 0.3rem;
}
.ops-compose-panel .form-grid {
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.55rem 0.75rem;
  align-items: end;
}
.ops-compose-panel .modal-actions,
.ops-compose-panel .form-actions {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.ops-compose-panel {
  padding-bottom: 0.85rem;
}
.ops-filter-bar.rest-filter-bar,
.ops-compose-panel + .panel-card .rest-filter-bar {
  margin-bottom: 0.55rem;
}
.ops-filter-bar .rest-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: flex-end;
}
.ops-filter-bar .rest-filter-item {
  flex: 1 1 8.5rem;
  min-width: 7.5rem;
  max-width: 14rem;
}
.ops-filter-bar .rest-filter-actions {
  margin-inline-start: auto;
}

/* Invoice detail: keep flow table text visible + tighter vertical rhythm */
.receipt-panel.invoice-detail-panel {
  max-height: min(92vh, 960px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.receipt-panel.invoice-detail-panel.wide {
  max-width: min(880px, 96vw);
}
.receipt-panel.invoice-detail-panel.wide-a4 {
  max-width: min(880px, 96vw);
  width: min(880px, 96vw);
}
.receipt-panel .sale-flow-block,
.receipt-panel .doc-flow-block {
  margin: 0;
  padding: 0.35rem 0 0.15rem;
}
.receipt-panel .compact-status-table {
  width: 100%;
  table-layout: auto;
}
.receipt-panel .compact-status-table tbody td,
.receipt-panel .compact-status-table thead th {
  color: #0f172a !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: normal !important;
  vertical-align: middle;
  padding: 0.45rem 0.55rem !important;
}
.receipt-panel .compact-status-table tbody td:nth-child(1),
.receipt-panel .compact-status-table tbody td:nth-child(2) {
  color: #0f172a !important;
  font-weight: 650;
}
.receipt-panel .flow-item-name {
  color: #0f172a !important;
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
}
.receipt-panel #saleReprintArea,
.receipt-panel #purchaseReprintArea {
  margin-top: 0.35rem;
}
.receipt-panel .receipt-actions {
  margin-top: 0.45rem;
  gap: 0.4rem;
}

.hotel-cal-legend-pro { gap: 0.85rem; padding: 0.35rem 0; }
.hotel-cal-wrap-pro {
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border, #dee2e6));
  box-shadow: 0 10px 28px color-mix(in srgb, #0f172a 6%, transparent);
  background: color-mix(in srgb, var(--panel, #fff) 96%, var(--accent) 4%);
}
.hotel-cal-grid-pro th {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel, #fff));
  font-weight: 800; position: sticky; top: 0; z-index: 2;
}
.hotel-cal-grid-pro .hotel-cal-room {
  background: color-mix(in srgb, var(--accent) 6%, var(--panel, #fff));
  font-weight: 800;
}
.hotel-cal-leg::before {
  content: "";
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  margin-inline-end: 0.35rem;
  border-radius: 2px;
  vertical-align: -1px;
}

/* Clinic / services cards use kds-actions without -pro */
.ops-dense .kds-actions,
.ops-dense .kds-ico-row {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.ops-dense .kds-chips { min-height: 0; margin-bottom: 0.35rem; }
.ops-dense .kds-lines { margin: 0.15rem 0; }
.ops-dense .kds-line { padding: 0.35rem 0.45rem; }

/* TV empty states fill stage instead of leaving dead bands */
.sqd-stage .sqd-empty, .cwd-stage .cwd-empty {
  min-height: min(42vh, 22rem);
  display: grid;
  place-content: center;
  font-size: 1.05rem;
  opacity: 0.9;
}
.sqd-root, .cwd-root { min-height: 100vh; }

/* ===== Hall media dropzone — dark theme contrast (cascade last) ===== */
body.theme-obsidian label.cd-upload-drop,
body.theme-zad label.cd-upload-drop,
body.theme-copper label.cd-upload-drop,
body.theme-obsidian .cd-upload-drop,
body.theme-zad .cd-upload-drop,
body.theme-copper .cd-upload-drop,
.app-shell.theme-obsidian label.cd-upload-drop,
.app-shell.theme-zad label.cd-upload-drop,
.app-shell.theme-copper label.cd-upload-drop {
  background: #1a1b2e !important;
  background-image: none !important;
  border: 1.5px dashed rgba(167, 139, 250, 0.65) !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.4) !important;
}
body.theme-obsidian label.cd-upload-drop:hover,
body.theme-zad label.cd-upload-drop:hover,
body.theme-copper label.cd-upload-drop:hover,
body.theme-obsidian .cd-upload-drop.has-file,
body.theme-zad .cd-upload-drop.has-file,
body.theme-copper .cd-upload-drop.has-file {
  background: #22233a !important;
  border-color: #a78bfa !important;
}
body.theme-obsidian .cd-upload-cta,
body.theme-zad .cd-upload-cta,
body.theme-copper .cd-upload-cta,
.app-shell.theme-obsidian .cd-upload-cta,
.app-shell.theme-zad .cd-upload-cta {
  color: #e9d5ff !important;
  -webkit-text-fill-color: #e9d5ff !important;
  font-weight: 800 !important;
}
body.theme-obsidian .cd-upload-note,
body.theme-obsidian .cd-upload-name,
body.theme-obsidian .cd-upload-icon,
body.theme-zad .cd-upload-note,
body.theme-zad .cd-upload-name,
body.theme-zad .cd-upload-icon,
body.theme-copper .cd-upload-note,
body.theme-copper .cd-upload-name,
.app-shell.theme-obsidian .cd-upload-note,
.app-shell.theme-zad .cd-upload-note {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  opacity: 1 !important;
}
body.theme-obsidian .org-hall-media .muted,
body.theme-zad .org-hall-media .muted,
body.theme-obsidian .org-hall-media .muted.tiny,
body.theme-zad .org-hall-media .muted.tiny {
  color: #a5b4fc !important;
  opacity: 1 !important;
}
body.theme-obsidian .cd-upload-input,
body.theme-zad .cd-upload-input,
body.theme-copper .cd-upload-input,
.app-shell.theme-obsidian .cd-upload-input,
.app-shell.theme-zad .cd-upload-input {
  opacity: 0 !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Storefront inbox reply desk */
.shop-inbox-desk {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.15rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent, #7c3aed) 22%, var(--border, #e5e7eb));
  background: color-mix(in srgb, var(--accent, #7c3aed) 6%, var(--card, #fff));
  backdrop-filter: blur(10px);
}
.shop-inbox-desk-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #605e5c);
  margin-bottom: 0.2rem;
}
.shop-inbox-visitor-body,
.shop-inbox-staff-reply p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.shop-inbox-staff-reply {
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
  background: color-mix(in srgb, #16a34a 10%, transparent);
}
.shop-inbox-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  word-break: break-all;
}
.shop-inbox-composer { display: flex; flex-direction: column; gap: 0.35rem; }
.shop-inbox-reply-area { min-height: 5.5rem; resize: vertical; }
.shop-inbox-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.shop-inbox-link-row .field-input { flex: 1; min-width: 10rem; }
.shop-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.25rem;
}
.shop-inbox-qa { text-decoration: none; }
.theme-obsidian .shop-inbox-desk,
body.theme-obsidian .app-shell .shop-inbox-desk,
.app-shell.theme-obsidian .shop-inbox-desk {
  background: linear-gradient(145deg, rgba(36, 24, 58, 0.82), rgba(18, 14, 32, 0.9));
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.theme-obsidian .shop-inbox-staff-reply,
body.theme-obsidian .app-shell .shop-inbox-staff-reply {
  background: color-mix(in srgb, #22c55e 14%, rgba(16, 16, 28, 0.7));
  border-color: rgba(74, 222, 128, 0.28);
}
.theme-obsidian .shop-inbox-desk-label,
body.theme-obsidian .app-shell .shop-inbox-desk-label {
  color: #c4b5fd;
}

/* Compact top-bar chrome — icon-only, 28px */
header.top-bar {
    min-height: 46px !important;
    padding: 0.22rem 0.75rem !important;
}
header.top-bar .menu-toggle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    gap: 3px !important;
}
header.top-bar .menu-bar { width: 14px !important; height: 2px !important; }
header.top-bar .top-title { font-size: 1rem !important; }
header.top-bar .top-greeting { font-size: 0.65rem !important; }
header.top-bar .top-bar-end { gap: 0.2rem !important; }
header.top-bar .settings-btn-text,
header.top-bar .help-guide-btn-text { display: none !important; }
header.top-bar .settings-btn,
header.top-bar .reports-hub-btn,
header.top-bar .showroom-launch-btn,
header.top-bar .portal-launch-btn,
header.top-bar .help-guide-btn,
header.top-bar .pwd-btn,
header.top-bar .depth-toggle,
header.top-bar .notification-bell-btn,
header.top-bar .ops-alert-btn,
header.top-bar .guide-pop-trigger {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
header.top-bar .depth-toggle { transform: none !important; }
header.top-bar .depth-toggle:hover { transform: none !important; }
header.top-bar .settings-btn svg,
header.top-bar .reports-hub-btn svg,
header.top-bar .showroom-launch-btn svg,
header.top-bar .portal-launch-btn svg,
header.top-bar .help-guide-btn svg,
header.top-bar .pwd-btn svg,
header.top-bar .depth-toggle svg,
header.top-bar .notification-bell-btn svg,
header.top-bar .ops-alert-btn svg,
header.top-bar .guide-pop-svg {
    width: 14px !important;
    height: 14px !important;
}
/* Genie mascot — larger than generic header SVGs (see storefront-genie.css) */
header.top-bar .showroom-launch-genie-ico {
    width: 22px !important;
    height: 22px !important;
}
header.top-bar .theme-strip-compact {
    padding: 0.12rem 0.28rem !important;
    gap: 0.22rem !important;
}
header.top-bar .theme-strip-compact .theme-swatch {
    width: 14px !important;
    height: 14px !important;
}
header.top-bar .lang-switcher.lang-compact {
    padding: 0.08rem !important;
    gap: 0.08rem !important;
}
header.top-bar .lang-compact .lang-btn {
    min-height: 26px !important;
    padding: 0.12rem 0.38rem !important;
    font-size: 0.65rem !important;
    border-radius: 6px !important;
}
header.top-bar .bell-badge,
header.top-bar .ops-alert-badge,
header.top-bar .guide-pop-badge {
    font-size: 0.58rem !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    top: -3px !important;
    inset-inline-end: -3px !important;
}
.jw-list-toolbar { margin-bottom: 0.65rem; }
.jw-links { margin: 0 0 0.85rem; }
.jw-fg-pick {
    display: grid;
    gap: 0.55rem;
}
.jw-fg-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
    text-align: start;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 85%, transparent);
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--accent, #0f766e) 8%);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.jw-fg-card:hover {
    border-color: color-mix(in srgb, var(--accent, #0f766e) 55%, transparent);
}
.jw-fg-card.active {
    border-color: var(--accent, #0f766e);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0f766e) 28%, transparent);
    background: color-mix(in srgb, var(--accent, #0f766e) 12%, var(--surface, #fff));
}
.jw-fg-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}
.jw-fg-card-code {
    font-size: 0.72rem;
    opacity: 0.72;
    letter-spacing: 0.02em;
}
.jw-fg-card-mats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.4;
}
.jw-fg-mats-label {
    font-weight: 600;
    opacity: 0.78;
}
.jw-fg-mats-list {
    flex: 1 1 auto;
    min-width: 8rem;
}
.jw-fg-mats-count {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent, #0f766e) 18%, transparent);
    color: var(--accent, #0f766e);
}
.jw-welcome {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #4361ee) 22%, var(--border, #e2e8f0));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #4361ee) 8%, var(--card)) 0%, var(--card) 100%);
}
.jw-welcome h4 { margin: 0 0 0.45rem; font-size: 1rem; }
.jw-welcome p { margin: 0; line-height: 1.6; font-size: 0.9rem; color: var(--muted, #556); }
.jw-flow-map {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #4361ee) 6%, var(--card));
    border: 1px dashed color-mix(in srgb, var(--accent, #4361ee) 25%, var(--border, #e2e8f0));
}
.jw-flow-phase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.88rem;
    line-height: 1.45;
}
.jw-flow-phase strong {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent, #4361ee);
    min-width: 9rem;
}
.jw-flow-arrow { opacity: 0.45; font-size: 0.85rem; }
.jw-flow-fee {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, #c9a227 14%, var(--card));
    border: 1px solid color-mix(in srgb, #c9a227 35%, transparent);
    font-size: 0.86rem;
    line-height: 1.5;
}
.jw-stepper .jw-step-btn.is-done { border-color: color-mix(in srgb, #16a34a 40%, var(--border)); }
.jw-stepper .jw-step-btn.is-done .jw-step-num { background: #16a34a; color: #fff; }
.jw-stepper .jw-step-btn.is-fee { border-style: dashed; }
.jw-stepper .jw-step-btn.is-fee.active {
    border-color: color-mix(in srgb, #c9a227 55%, var(--accent));
    background: color-mix(in srgb, #c9a227 12%, var(--card));
}
.jw-step-opt {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.75;
    margin-inline-start: 0.2rem;
}
.jw-fee-panel {
    margin: 0 0 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 2px solid color-mix(in srgb, #c9a227 45%, transparent);
    background: color-mix(in srgb, #c9a227 10%, var(--card));
}
.jw-fee-panel strong { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; }
.jw-fee-panel p { margin: 0; line-height: 1.55; font-size: 0.88rem; }
.jw-next-hint {
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--accent, #4361ee) 10%, var(--card));
}


/* Return/exchange panel: readable headers (forms.css loads after pos-theme; beat .app-shell light header + white text clash) */
.app-shell .receipt-panel .return-lines-table thead th,
.app-shell .receipt-panel .data-table.return-lines-table thead th,
.receipt-panel .return-lines-table thead th,
.receipt-panel .return-lines-table th {
    background: #e2e8f0 !important;
    background-image: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-bottom: 2px solid #94a3b8 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
/* Guest history / receipt panels: light header + dark text (pos-theme forced white on dark clashes with app-shell light bg) */
.app-shell .receipt-panel .data-table thead th,
.app-shell .receipt-panel.resv-history-panel .data-table thead th,
.receipt-panel.resv-history-panel .data-table thead th,
.receipt-panel .data-table:not(.return-lines-table) thead th {
    background: #e2e8f0 !important;
    background-image: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-bottom: 2px solid #94a3b8 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
.receipt-panel.resv-history-panel .data-table tbody td {
    color: #0f172a !important;
    background: #fff !important;
}
.receipt-panel .return-lines-table tbody td {
    color: #0f172a !important;
    background: #fff !important;
}
/* Return/exchange modal: scrollable lines grid (table-wrap global rule hides overflow-y) */
.receipt-panel.return-panel {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 920px);
    overflow: hidden;
    gap: 0.45rem;
}
.receipt-panel.return-panel .return-lines-scroll {
    flex: 1 1 auto;
    min-height: 10rem;
    max-height: min(58vh, 560px);
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
.receipt-panel.return-panel .return-lines-table {
    table-layout: auto;
    min-width: 680px;
}
.receipt-panel.return-panel .return-lines-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.receipt-panel.return-panel .return-lines-table td:nth-child(2),
.receipt-panel.return-panel .return-lines-table th:nth-child(2) {
    min-width: 9rem;
    white-space: normal;
    word-break: break-word;
}
.receipt-panel.return-panel .receipt-actions,
.receipt-panel.return-panel .form-grid {
    flex-shrink: 0;
}
.receipt-panel.return-panel .return-panel-alert {
    flex-shrink: 0;
    margin: 0;
    font-weight: 600;
}

/* ── Dining reservations board (floor / KDS parity) ── */
.resv-shell { gap: 0.85rem; }
.vf-leg.wait i { background: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.22); }
.resv-compose {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--bg-alt));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card)),
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 6%, transparent);
}
.resv-compose-head { margin-bottom: 0.65rem; }
.resv-compose-head .panel-title { margin: 0 0 0.2rem; }
.resv-filters { margin: 0; padding: 0.65rem 0.85rem !important; }
.resv-filter-row {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: 0.45rem 0.55rem;
  width: 100%;
}
.resv-filter-row .rest-filter-search.grow {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: none;
  height: 2.35rem;
  min-height: 2.35rem;
  box-sizing: border-box;
}
.resv-filter-row .resv-filter-date {
  flex: 0 0 9.75rem;
  width: 9.75rem;
  max-width: 9.75rem;
  height: 2.35rem;
  min-height: 2.35rem;
  box-sizing: border-box;
  color: var(--text, #0f172a) !important;
  -webkit-text-fill-color: var(--text, #0f172a) !important;
}
.resv-filter-row .kds-filter-chip {
  flex: 0 0 auto;
  height: 2.35rem;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.resv-filter-row .rest-filter-actions {
  flex: 0 0 auto;
  margin-inline-start: 0 !important;
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: 2.35rem;
}
@media (max-width: 900px) {
  .resv-filter-row { flex-wrap: wrap; }
  .resv-filter-row .rest-filter-search.grow { flex: 1 1 100%; max-width: none; }
}
.resv-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.75rem;
}
.resv-card {
  position: relative;
  min-height: 10.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.resv-card.tone-wait { border-top-color: #a78bfa; }
.resv-card.tone-booked { border-top-color: #3b82f6; }
.resv-card.tone-seated { border-top-color: #f59e0b; }
.resv-card.tone-done { border-top-color: #22c55e; }
.resv-card.tone-closed { border-top-color: #a8a29e; opacity: .88; }
.resv-card.is-due {
  box-shadow: 0 0 0 1px color-mix(in srgb, #3b82f6 35%, transparent),
              0 10px 28px color-mix(in srgb, #3b82f6 18%, transparent);
}
.resv-card.is-late {
  animation: resv-pulse 1.6s ease-in-out infinite;
}
.resv-notes {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.resv-card .kds-actions { margin-top: auto; }
.resv-empty {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 18px;
}
@keyframes resv-pulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 40%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 28%, transparent), 0 8px 22px color-mix(in srgb, #ef4444 22%, transparent); }
}
.resv-customer-row {
  display: flex; align-items: stretch; gap: 0.4rem; width: 100%;
}
.resv-customer-row .searchable-select-wrap { flex: 1; min-width: 0; }
.resv-act-bar {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto;
}
.resv-act {
  flex: 1 1 auto;
  min-height: 2.15rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.3rem 0.55rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--text) 4%, var(--card));
  color: var(--text); font-size: 0.72rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.resv-act i[data-ico]::before {
  font-style: normal; font-weight: 700; font-size: 1.05rem; line-height: 1;
}
/* Distinct glyphs: chair vs blocked person — not interchangeable squares */
.resv-act i[data-ico="seat"]::before { content: "🪑"; }
.resv-act i[data-ico="noshow"]::before { content: "🚫"; }
.resv-act i[data-ico="cancel"]::before { content: "✖"; }
.resv-act i[data-ico="check"]::before { content: "✔"; }
.resv-act i[data-ico="history"]::before { content: "📋"; }
.resv-act.is-seat {
  color: #166534; border-color: color-mix(in srgb, #22c55e 45%, transparent);
  background: color-mix(in srgb, #22c55e 14%, var(--card));
}
.resv-act.is-noshow {
  color: #9a3412; border-color: color-mix(in srgb, #ea580c 45%, transparent);
  background: color-mix(in srgb, #ea580c 12%, var(--card));
}
.resv-act.is-cancel {
  color: #b91c1c; border-color: color-mix(in srgb, #ef4444 40%, transparent);
  background: color-mix(in srgb, #ef4444 10%, var(--card));
}
.resv-act.is-book {
  color: #1d4ed8; border-color: color-mix(in srgb, #3b82f6 40%, transparent);
  background: color-mix(in srgb, #3b82f6 12%, var(--card));
}
.resv-act.is-history {
  color: #475569; border-color: color-mix(in srgb, #64748b 35%, transparent);
}
.resv-act:disabled { opacity: .45; cursor: not-allowed; }
.resv-history-panel { max-width: min(720px, 96vw); }
.resv-hist-kpis { margin: 0.75rem 0; }
.resv-hist-notes { margin: 0.5rem 0 0.85rem; }
.resv-hist-notes ul { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; }
@media (max-width: 720px) {
  .resv-board { grid-template-columns: 1fr; }
  .resv-act span { display: none; }
  .resv-act { min-width: 2.4rem; flex: 0 0 auto; }
}


/* Real estate module */
.form-grid.jw-contract-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}
.form-grid.jw-contract-meta .full-width { grid-column: 1 / -1; }
.re-broker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
}
.re-broker-card { padding: 0.85rem; }
.sf-re-pay { max-width: 420px; margin: 0 auto; }
@media (max-width: 640px) {
  .form-grid.jw-contract-meta { grid-template-columns: 1fr; }
}

/* ===== App notice popup — luxurious, theme-aware, auto-dismiss ===== */
.app-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: color-mix(in srgb, #020617 52%, transparent);
    backdrop-filter: blur(8px) saturate(1.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    animation: app-notice-fade 0.22s ease-out;
}
.app-notice-card {
    position: relative;
    width: min(460px, 94vw);
    overflow: hidden;
    border-radius: 22px;
    padding: 1.55rem 1.45rem 1.2rem;
    text-align: center;
    isolation: isolate;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--surface, #ffffff) 92%, #fff) 0%,
            color-mix(in srgb, var(--surface-2, var(--surface, #f8fafc)) 88%, #eef2ff) 100%);
    border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 28%, transparent);
    box-shadow:
        0 28px 70px rgba(2, 6, 23, 0.38),
        0 0 0 1px color-mix(in srgb, #fff 35%, transparent) inset;
    animation: app-notice-pop 0.34s cubic-bezier(.16,1,.3,1);
    color: var(--text, #0f172a);
}
.app-notice-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent),
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.app-notice-card > *:not(.app-notice-glow):not(.app-notice-progress) { position: relative; z-index: 1; }
.app-notice-x { display: none !important; }
.app-notice-progress { display: none !important; }
.app-notice-icon {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0.15rem auto 0.65rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #60a5fa, #2563eb 55%, #1d4ed8);
    box-shadow: 0 10px 28px color-mix(in srgb, #2563eb 45%, transparent);
}
.app-notice-card.kind-success .app-notice-icon {
    background: linear-gradient(145deg, #34d399, #059669 55%, #047857);
    box-shadow: 0 10px 28px color-mix(in srgb, #059669 45%, transparent);
}
.app-notice-card.kind-warn .app-notice-icon {
    background: linear-gradient(145deg, #fbbf24, #d97706 55%, #b45309);
    box-shadow: 0 10px 28px color-mix(in srgb, #d97706 45%, transparent);
}
.app-notice-card.kind-error .app-notice-icon {
    background: linear-gradient(145deg, #f87171, #dc2626 55%, #b91c1c);
    box-shadow: 0 10px 28px color-mix(in srgb, #dc2626 45%, transparent);
}
.app-notice-card.kind-success { border-color: color-mix(in srgb, #059669 35%, transparent); }
.app-notice-card.kind-warn { border-color: color-mix(in srgb, #d97706 35%, transparent); }
.app-notice-card.kind-error { border-color: color-mix(in srgb, #dc2626 35%, transparent); }
.app-notice-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.app-notice-title {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text, #0f172a);
}
.app-notice-body {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 650;
    color: var(--text, #0f172a);
    white-space: pre-wrap;
}
.app-notice-actions { display: flex; justify-content: center; gap: 0.5rem; }
.app-notice-ok {
    min-width: 8rem;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 0.65rem 1.5rem !important;
}
.app-notice-card {
    padding-bottom: 1.35rem !important;
}
.app-notice-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent);
    overflow: hidden;
    z-index: 1;
}
.app-notice-progress::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: inline-start;
    background: linear-gradient(90deg, var(--accent, #3b82f6), color-mix(in srgb, var(--accent, #3b82f6) 40%, #fff));
    animation: app-notice-bar 5.2s linear forwards;
}
.app-notice-card.kind-success .app-notice-progress::after { background: linear-gradient(90deg, #10b981, #34d399); }
.app-notice-card.kind-warn .app-notice-progress::after { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.app-notice-card.kind-error .app-notice-progress::after { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Dark / obsidian themes */
.theme-obsidian .app-notice-card,
.app-shell.theme-obsidian .app-notice-card,
body.theme-obsidian .app-notice-card,
[data-theme="obsidian"] .app-notice-card,
.app-shell.theme-midnight .app-notice-card,
.app-shell.theme-noir .app-notice-card {
    background: linear-gradient(160deg, #121826 0%, #0b1220 100%);
    color: #e8eefc;
    border-color: color-mix(in srgb, #7aa2ff 30%, transparent);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.theme-obsidian .app-notice-title,
.theme-obsidian .app-notice-body,
.app-shell.theme-obsidian .app-notice-title,
.app-shell.theme-obsidian .app-notice-body,
body.theme-obsidian .app-notice-title,
body.theme-obsidian .app-notice-body { color: #f1f5ff; }
.theme-obsidian .app-notice-kicker,
.app-shell.theme-obsidian .app-notice-kicker,
body.theme-obsidian .app-notice-kicker { color: #93a4c7; }

/* After JS promotes a status line into AppNotice, hide only that consumed node */
.status-msg-consumed:not(.status-inline):not(.status-banner) {
    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;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Elegant in-page alerts (never hijacked into modal popups) */
.app-shell .page-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0.75rem 0;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--pa-accent, #2563eb) 28%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--pa-accent, #2563eb) 10%, var(--surface, #fff)),
            color-mix(in srgb, var(--pa-accent, #2563eb) 4%, var(--card, #fff)));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--pa-accent, #2563eb) 12%, transparent);
    color: var(--text, #0f172a);
}
.app-shell .page-alert--info { --pa-accent: #2563eb; }
.app-shell .page-alert--ok { --pa-accent: #059669; }
.app-shell .page-alert--warn { --pa-accent: #d97706; }
.app-shell .page-alert-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: color-mix(in srgb, var(--pa-accent) 18%, transparent);
    color: var(--pa-accent);
}
.app-shell .page-alert-body { min-width: 0; flex: 1; }
.app-shell .page-alert-title {
    display: block;
    font-weight: 800;
    margin-bottom: 0.2rem;
}
.app-shell .page-alert-body p {
    margin: 0;
    line-height: 1.45;
    opacity: 0.92;
    font-size: 0.92rem;
}

.restaurant-settings-panel { padding: 0.15rem 0.1rem 0.5rem; }
.restaurant-settings-panel .rs-hero {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}
.restaurant-settings-panel .rs-hero-badge {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: color-mix(in srgb, #b45309 16%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, #b45309 22%, transparent);
}
.restaurant-settings-panel .rs-hero-hint { margin: 0.2rem 0 0; line-height: 1.45; }
.restaurant-settings-panel .rs-card {
    margin: 0.75rem 0;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #b45309 14%, transparent);
    background: color-mix(in srgb, #b45309 4%, var(--card, #fff));
}
.restaurant-settings-panel .rs-card-title {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    font-weight: 800;
}
.restaurant-settings-panel .rs-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}
.restaurant-settings-panel .rs-printer-map { margin-top: 0.65rem; }
.restaurant-settings-panel .rs-printer-bind-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    align-items: center;
}
.restaurant-settings-panel .rs-add-printer {
    min-width: 2.4rem;
    height: 2.35rem;
    padding: 0 0.55rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.restaurant-settings-panel .rs-station-bind {
    grid-template-columns: minmax(5rem, 8rem) 1fr;
}
.restaurant-settings-panel .rs-add-printer-box {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.55rem;
    margin-bottom: 0.35rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #2563eb 35%, transparent);
    background: color-mix(in srgb, #2563eb 8%, var(--surface, #fff));
    box-shadow: 0 8px 20px color-mix(in srgb, #2563eb 12%, transparent);
}
.restaurant-settings-panel .rs-add-printer-box--inline {
    grid-column: 1 / -1;
    margin-inline-start: 0;
}
.restaurant-settings-panel .rs-add-printer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.15rem;
}
.app-shell .org-fnb-guide-steps {
    margin: 0.45rem 0 0;
    padding-inline-start: 1.2rem;
    display: grid;
    gap: 0.35rem;
}
.app-shell .org-fnb-guide-steps li {
    line-height: 1.45;
    font-size: 0.9rem;
    opacity: 0.95;
}

/* Compact contextual banners (stay in place — not sticky overlays) */
.app-shell .status-banner {
    display: block;
    margin: 0.55rem 0 0.35rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: start;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, var(--surface, #fff));
    color: color-mix(in srgb, #92400e 80%, var(--text, #0f172a));
    box-shadow: 0 8px 22px color-mix(in srgb, #f59e0b 12%, transparent);
}
.theme-obsidian .status-banner,
.app-shell.theme-obsidian .status-banner,
body.theme-obsidian .status-banner {
    background: color-mix(in srgb, #f59e0b 16%, #121826);
    color: #fde68a;
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}

@keyframes app-notice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-notice-pop {
    from { opacity: 0; transform: translateY(18px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes app-notice-bar {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}