/*
 * Star Cash - Admin Design System
 * -----------------------------------------------------------------------
 * Central place for design tokens (colors, spacing, radius, shadows, font)
 * and shared UI components (buttons, badges, alerts, cards, tables,
 * inputs) used across every admin panel page (categories, products,
 * currencies, and future pages such as orders/users/payment methods).
 *
 * Pages should reuse these classes/variables instead of redefining their
 * own colors, so light mode, dark mode, and spacing stay consistent
 * project-wide. Page-specific `<style>` blocks should only contain rules
 * that are truly unique to that page (e.g. drag-and-drop layout,
 * modals, product thumbnails).
 */

:root {
    --font-sans: 'Cairo', 'Tahoma', 'Segoe UI', Arial, sans-serif;

    --bg-color: #eef1f7;
    --card-color: #ffffff;
    --surface-color: #eef2f9;
    --surface-strong: #e4e9f3;
    --text-color: #1c2536;
    --muted-color: #67728a;
    --border-color: #dde3ef;

    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: rgba(37, 99, 235, 0.08);

    --success-color: #16a34a;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --success-border: #86efac;

    --danger-color: #dc2626;
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;
    --danger-border: #fca5a5;

    --warning-color: #d97706;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --warning-border: #fde68a;

    --info-color: #2563eb;
    --info-bg: #dbeafe;
    --info-text: #1d4ed8;
    --info-border: #bfdbfe;

    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 55px rgba(15, 23, 42, 0.14);

    /* Canonical aliases used by page stylesheets (orders, customers, �) */
    --sc-bg: var(--bg-color);
    --sc-surface: var(--card-color);
    --sc-surface-muted: var(--surface-color);
    --sc-ink: var(--text-color);
    --sc-muted: var(--muted-color);
    --sc-line: var(--border-color);
    --sc-line-strong: #c5cddd;
    --sc-primary: var(--primary-color);
    --sc-primary-hover: var(--primary-hover);
    --sc-primary-soft: var(--primary-soft);
    --sc-success: var(--success-color);
    --sc-danger: var(--danger-color);
    --sc-warning: var(--warning-color);
    --sc-info: var(--info-color);
    --sc-radius: var(--radius-lg);
    --sc-shadow: var(--shadow);
    --sc-shadow-sm: var(--shadow-sm);
    --sc-control-h: 38px;
    --sc-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

body.dark-mode,
html.dark-mode-pending {
    --bg-color: #0b1120;
    --card-color: #141d31;
    --surface-color: #1b2338;
    --surface-strong: #212c47;
    --text-color: #e8ecf6;
    --muted-color: #96a3bc;
    --border-color: #2d3852;

    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-soft: rgba(59, 130, 246, 0.16);

    --success-color: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.16);
    --success-text: #4ade80;
    --success-border: rgba(34, 197, 94, 0.4);

    --danger-color: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.16);
    --danger-text: #f87171;
    --danger-border: rgba(239, 68, 68, 0.4);

    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.16);
    --warning-text: #fbbf24;
    --warning-border: rgba(245, 158, 11, 0.4);

    --info-color: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.16);
    --info-text: #60a5fa;
    --info-border: rgba(59, 130, 246, 0.4);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);

    /*
     * Re-declare --sc-* aliases here. Values like --sc-surface: var(--card-color)
     * on :root are resolved against :root's light --card-color and then inherit
     * as a frozen #ffffff � breaking every dark surface that uses --sc-*.
     */
    --sc-bg: var(--bg-color);
    --sc-surface: var(--card-color);
    --sc-surface-muted: var(--surface-color);
    --sc-ink: var(--text-color);
    --sc-muted: var(--muted-color);
    --sc-line: var(--border-color);
    --sc-line-strong: #3d4b6b;
    --sc-primary: var(--primary-color);
    --sc-primary-hover: var(--primary-hover);
    --sc-primary-soft: var(--primary-soft);
    --sc-success: var(--success-color);
    --sc-danger: var(--danger-color);
    --sc-warning: var(--warning-color);
    --sc-info: var(--info-color);
    --sc-radius: var(--radius-lg);
    --sc-shadow: var(--shadow);
    --sc-shadow-sm: var(--shadow-sm);
    --sc-control-h: 38px;
    --sc-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

/* Dark-only overrides for shared controls that still hardcode light greys */
body.dark-mode .sc-date-pill__label {
    background: var(--card-color);
    color: var(--muted-color);
}

body.dark-mode .sc-date-pill__input {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
    color-scheme: dark;
}

body.dark-mode .sc-date-pill__input:focus {
    background: var(--card-color);
    border-color: var(--primary-color);
    box-shadow: var(--sc-focus-ring);
}

body.dark-mode .form-control,
body.dark-mode input.field,
body.dark-mode select.field,
body.dark-mode textarea.field,
body.dark-mode .search-input {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
    color-scheme: dark;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input.field::placeholder,
body.dark-mode textarea.field::placeholder,
body.dark-mode .search-input::placeholder {
    color: var(--muted-color);
    opacity: 0.85;
}

/* Light Mode only: separate interactive controls from page background */
body:not(.dark-mode) .search-input,
body:not(.dark-mode) .form-control,
body:not(.dark-mode) input.field,
body:not(.dark-mode) select.field,
body:not(.dark-mode) textarea.field,
body:not(.dark-mode) .sc-date-pill__input,
body:not(.dark-mode) .sc-toolbar__control,
body:not(.dark-mode) .sc-toolbar input[type="search"],
body:not(.dark-mode) .sc-toolbar input[type="text"],
body:not(.dark-mode) .sc-toolbar input[type="number"],
body:not(.dark-mode) .sc-toolbar select,
body:not(.dark-mode) .sc-modal__body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(.dark-mode) .sc-modal__body select,
body:not(.dark-mode) .sc-modal__body textarea {
    background: var(--card-color);
    color: var(--text-color);
}

body:not(.dark-mode) .sc-date-pill__label {
    background: var(--card-color);
}

body.dark-mode .table-card,
body.dark-mode .form-card,
body.dark-mode .stat-card {
    background: var(--card-color);
    border-color: var(--border-color);
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .table-card .table-header h2,
body.dark-mode .page-title h1 {
    color: var(--text-color);
}

body.dark-mode .page-title p,
body.dark-mode .table-header-link {
    color: var(--muted-color);
}

body {
    font-family: var(--font-sans);
}

/* ---------- Page header ---------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.page-title h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color);
}

.page-title p {
    margin: 0;
    color: var(--muted-color);
    font-size: 12.5px;
}

.header-actions,
.normal-header-actions,
.order-mode-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-mode-actions {
    display: none;
}

/* ---------- Buttons ---------- */

.add-button,
.reorder-button,
.save-order-button,
.cancel-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.add-button {
    border: none;
    background: var(--primary-color);
    color: #ffffff;
}

.add-button:hover {
    background: var(--primary-hover);
}

.reorder-button {
    border: 1px solid var(--border-color);
    background: var(--card-color);
    color: inherit;
}

.reorder-button:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-soft);
}

.save-order-button {
    border: none;
    background: var(--success-color);
    color: #ffffff;
}

.cancel-order-button {
    border: 1px solid var(--danger-border);
    background: var(--card-color);
    color: var(--danger-color);
}

.cancel-order-button:hover {
    background: var(--danger-bg);
}

/* ---------- Focus visibility (accessibility) ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.add-button:focus-visible,
.reorder-button:focus-visible,
.save-order-button:focus-visible,
.cancel-order-button:focus-visible,
.action-btn:focus-visible,
.category-combobox-display:focus-visible,
.category-combobox-option:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ---------- Disabled state ---------- */

button:disabled,
.btn:disabled,
.add-button[disabled],
.action-btn[disabled],
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(15%);
}

/* ---------- Required field marker (generic, reusable across all forms) ---------- */

.label-required {
    color: var(--danger-color);
    font-weight: 800;
    margin-right: 3px;
}

/* Generic Bootstrap-like fallbacks so any legacy/unfinished form
   (e.g. plain `.form-control` / `.btn` markup) automatically picks up
   the same design tokens without needing markup changes. */

.form-control {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-color);
    color: var(--text-color);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-primary {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.btn-primary:active {
    filter: brightness(0.95);
}

.btn-secondary {
    border-color: var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
}

.btn-secondary:hover {
    border-color: var(--sc-line-strong, var(--border-color));
    background: var(--surface-strong);
    color: var(--text-color);
}

.btn-success {
    border-color: var(--success-color);
    background: var(--success-color);
    color: #ffffff;
}

.btn-success:hover {
    filter: brightness(0.95);
    color: #ffffff;
}

.btn-danger {
    border-color: var(--danger-color);
    background: var(--danger-color);
    color: #ffffff;
}

.btn-danger:hover {
    filter: brightness(0.95);
    color: #ffffff;
}

.btn-warning {
    border-color: var(--warning-color);
    background: var(--warning-color);
    color: #ffffff;
}

.btn-warning:hover {
    filter: brightness(0.95);
    color: #ffffff;
}

.btn-info {
    border-color: var(--info-color);
    background: var(--info-bg);
    color: var(--info-text);
}

.btn-info:hover {
    border-color: var(--info-color);
    background: var(--info-color);
    color: #ffffff;
}

.btn.is-loading,
.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.72;
}

/* Semantic aliases used across pages � keep same size as .btn / .action-btn */
.sc-btn-view,
a.sc-btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sc-btn-view:hover {
    background: var(--info-color);
    border-color: var(--info-color);
    color: #ffffff;
}

.sc-btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--danger-color);
    background: var(--danger-color);
    color: #ffffff;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.sc-btn-danger-solid:hover {
    filter: brightness(0.95);
    color: #ffffff;
}

/* Global admin table row hover */
.table-card table tbody tr:hover,
.sc-orders-table tbody tr:hover,
.sc-compact table tbody tr:hover,
.categories-table tbody tr:hover,
.currencies-table tbody tr:hover,
.products-table tbody tr:hover,
.customer-groups-table tbody tr:hover,
.payment-methods-table tbody tr:hover,
table.sc-sortable-table tbody tr:hover {
    background: var(--surface-color);
}

body.dark-mode .table-card table tbody tr:hover,
body.dark-mode .sc-orders-table tbody tr:hover,
body.dark-mode .sc-compact table tbody tr:hover,
body.dark-mode table.sc-sortable-table tbody tr:hover {
    background: var(--surface-strong);
}

/* ---------- Alerts ---------- */

.alert-success,
.alert-error {
    position: relative;
    margin-bottom: 10px;
    padding: 9px 38px 9px 13px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 700;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.alert-success {
    border: 1px solid var(--success-border);
    background: var(--success-bg);
    color: var(--success-text);
}

.alert-error {
    border: 1px solid var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-text);
}

.alert-success.hide,
.alert-error.hide {
    opacity: 0;
    transform: translateY(-8px);
}

.alert-close {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    transform: translateY(-50%);
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 17px;
    cursor: pointer;
}

.alert-errors {
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    color: var(--danger-text);
    font-size: 13px;
}

.alert-errors ul {
    margin: 8px 0 0;
    padding-right: 20px;
}

.base-note {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Stat cards ---------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.stat-card {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 7px 12px;
}

.stat-card span {
    color: var(--muted-color);
    font-size: 12px;
    font-weight: 600;
}

.stat-card strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color);
}

/* ---------- Table shell ---------- */

.table-card {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--border-color);
}

.table-header h2 {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-color);
}

.table-header span {
    color: var(--muted-color);
    font-size: 12px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* ---------- Search ---------- */

.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input {
    width: 220px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-color);
    color: var(--text-color);
    padding: 0 11px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
}

.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.search-clear {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Category filter/select bar (products pages) ---------- */

.category-select-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.category-select-card label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-color);
    white-space: nowrap;
}

.category-select-card .category-combobox {
    flex: 1;
    min-width: 220px;
}

/* ---------- Searchable category combobox (shared, used app-wide) ---------- */

.category-combobox {
    position: relative;
    width: 100%;
}

.category-combobox-display {
    width: 100%;
    min-width: 200px;
    height: 36px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-color);
    color: var(--text-color);
    padding: 0 11px;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-combobox-display:hover {
    border-color: var(--primary-color);
}

.category-combobox-display:focus-visible,
.category-combobox[data-open="1"] .category-combobox-display {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.category-combobox-display-icon {
    flex-shrink: 0;
    font-size: 14px;
}

.category-combobox-display-label {
    flex: 1;
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-combobox-caret {
    flex-shrink: 0;
    color: var(--muted-color);
    font-size: 11px;
    transition: transform 0.15s ease;
}

.category-combobox-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 60;
    padding: 8px;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, var(--shadow));
}

.category-combobox-panel.show {
    display: block;
}

.category-combobox[data-open="1"] .category-combobox-caret {
    transform: rotate(180deg);
}

.category-combobox-input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    color: var(--text-color);
    padding: 0 11px;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
}

.category-combobox-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.category-combobox-results {
    max-height: 260px;
    overflow-y: auto;
}

.category-combobox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-combobox-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-combobox-option-check {
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 12px;
    opacity: 0;
}

.category-combobox-option.is-selected .category-combobox-option-check {
    opacity: 1;
}

.category-combobox-option.is-selected {
    color: var(--primary-color);
    font-weight: 700;
}

.category-combobox-option.is-home {
    font-weight: 700;
}

.category-combobox-option:hover,
.category-combobox-option.is-active {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.category-combobox-empty {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--muted-color);
}

/* ---------- Data tables (categories / currencies / products / future) ---------- */

.categories-table,
.currencies-table,
.products-table,
.customer-groups-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.categories-table th,
.categories-table td,
.currencies-table th,
.currencies-table td,
.products-table th,
.products-table td,
.customer-groups-table th,
.customer-groups-table td {
    padding: 7px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    font-size: 12.5px;
    color: var(--text-color);
}

.categories-table th,
.currencies-table th,
.products-table th,
.customer-groups-table th {
    color: var(--muted-color);
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-color);
}

.categories-table tbody tr:last-child td,
.currencies-table tbody tr:last-child td,
.products-table tbody tr:last-child td,
.customer-groups-table tbody tr:last-child td {
    border-bottom: none;
}

.categories-table tbody tr,
.currencies-table tbody tr,
.products-table tbody tr,
.customer-groups-table tbody tr {
    transition: background-color 0.12s ease;
}

.categories-table tbody tr:hover,
.currencies-table tbody tr:hover,
.products-table tbody tr:hover,
.customer-groups-table tbody tr:hover {
    background: var(--surface-color);
}

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
}

.badge-base {
    background: var(--info-bg);
    color: var(--info-text);
}

.badge-active {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-inactive {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* ---------- Verified customer identity (admin only) ---------- */

.sc-admin-customer-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.sc-admin-customer-name__link,
.sc-admin-customer-name__text {
    min-width: 0;
}

.sc-admin-customer-name__link {
    color: inherit;
    text-decoration: none;
}

.sc-admin-customer-name__link:hover,
.sc-admin-customer-name__link:focus-visible,
.sc-admin-verified-full-name:hover,
.sc-admin-verified-full-name:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
}

.sc-admin-customer-name__verified {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: .95em;
    font-weight: 900;
    line-height: 1;
}

.sc-admin-customer-name__warning {
    flex: 0 0 auto;
    color: #b45309;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}

.sc-admin-verified-full-name {
    color: #2563eb;
    font-weight: 800;
}

body.dark-mode .sc-admin-customer-name__verified,
body.dark-mode .sc-admin-verified-full-name {
    color: #60a5fa;
}

body.dark-mode .sc-admin-customer-name__warning {
    color: #fbbf24;
}

/* ---------- Inline quick-edit inputs ---------- */

.quick-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-input {
    height: 30px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    padding: 0 9px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    width: 150px;
}

.quick-input:focus {
    border-color: var(--primary-color);
}

select.quick-input {
    width: 110px;
}

.quick-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--muted-color);
}

/* ---------- Row action buttons ---------- */

.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--border-color);
    background: transparent;
    color: inherit;
    font-family: inherit;
}

.action-btn-edit:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.action-btn-save {
    border-color: var(--success-color);
    color: var(--success-color);
}

.action-btn-save:hover {
    background: var(--success-bg);
}

.action-btn-delete {
    border-color: var(--danger-border);
    color: var(--danger-color);
}

.action-btn-delete:hover {
    background: var(--danger-bg);
}

/* ---------- Empty state ---------- */

.empty-state {
    padding: 34px 20px !important;
    text-align: center !important;
    color: var(--muted-color);
    white-space: normal !important;
}

/* ---------- Reorder note banner (categories / currencies) ---------- */

.reorder-note {
    padding: 9px 15px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-soft);
    color: var(--info-text);
    font-size: 12px;
    font-weight: 700;
}

/* ---------- Drag handles & drag state (categories / currencies) ---------- */

.order-drag-handle,
.drag-handle {
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--muted-color);
    border-radius: 8px;
    color: var(--muted-color);
    font-size: 15px;
    cursor: grab;
}

.order-drag-handle:active,
.drag-handle:active {
    cursor: grabbing;
}

.order-row.drag-over,
.currency-row.drag-over {
    box-shadow: inset 0 3px 0 var(--primary-color);
}

.order-item.dragging > .order-row,
.currency-row.dragging {
    opacity: 0.45;
    background: var(--primary-soft);
}

/* ---------- Actions dropdown menu ---------- */

.actions-menu {
    position: relative;
    display: inline-block;
}

.actions-trigger {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-color);
    color: inherit;
    font-size: 21px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

.actions-trigger:hover {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    color: var(--primary-color);
}

.actions-dropdown {
    position: fixed;
    left: auto;
    top: auto;
    z-index: 100;
    display: none;
    width: 205px;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-color);
    box-shadow: var(--shadow-lg);
}

.actions-dropdown.show {
    display: block;
    animation: actionsDropdownOpen 0.15s ease;
}

@keyframes actionsDropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-menu-link,
.action-menu-button {
    width: 100%;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: right;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.action-menu-link:hover,
.action-menu-button:hover {
    background: var(--surface-strong);
}

.action-menu-primary {
    color: var(--primary-color);
}

.action-menu-warning {
    color: var(--warning-color);
}

.action-menu-danger {
    color: var(--danger-color);
}

.action-menu-divider {
    height: 1px;
    margin: 6px 3px;
    background: var(--border-color);
}

.action-menu-button:disabled {
    color: var(--muted-color) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.action-menu-button:disabled:hover {
    background: transparent;
}

/* ---------- Toggle switch (currencies) ---------- */

.switch {
    position: relative;
    width: 49px;
    height: 27px;
    flex-shrink: 0;
}

.switch input {
    display: none;
}

.switch .slider,
.switch .switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: var(--border-color);
    cursor: pointer;
    transition: 0.2s;
}

.switch .slider::before,
.switch .switch-slider::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    right: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    transition: 0.2s;
}

.switch input:checked + .slider,
.switch input:checked + .switch-slider {
    background: var(--primary-color);
}

.switch input:checked + .slider::before,
.switch input:checked + .switch-slider::before {
    transform: translateX(-22px);
}

/* ---------- Rich text editor (TinyMCE) theme sync ---------- */

.tox-tinymce {
    border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important;
}

body.dark-mode .tox-tinymce {
    border-color: var(--border-color) !important;
}

body.dark-mode .tox .tox-toolbar,
body.dark-mode .tox .tox-toolbar__primary,
body.dark-mode .tox .tox-toolbar-overlord,
body.dark-mode .tox .tox-menubar,
body.dark-mode .tox .tox-statusbar {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .tox .tox-toolbar__group {
    border-color: var(--border-color) !important;
}

body.dark-mode .tox .tox-tbtn,
body.dark-mode .tox .tox-tbtn span,
body.dark-mode .tox .tox-statusbar a,
body.dark-mode .tox .tox-statusbar__path-item,
body.dark-mode .tox .tox-statusbar__wordcount {
    color: var(--text-color) !important;
}

body.dark-mode .tox .tox-tbtn svg,
body.dark-mode .tox .tox-statusbar__resize-handle svg {
    fill: var(--muted-color) !important;
}

body.dark-mode .tox .tox-tbtn:hover,
body.dark-mode .tox .tox-tbtn--enabled,
body.dark-mode .tox .tox-tbtn--enabled:hover {
    background-color: var(--primary-soft) !important;
}

body.dark-mode .tox .tox-edit-area__iframe {
    background-color: var(--card-color) !important;
}

body.dark-mode .tox .tox-menu,
body.dark-mode .tox .tox-collection--list .tox-collection__group {
    background-color: var(--card-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .tox .tox-collection__item {
    color: var(--text-color) !important;
}

body.dark-mode .tox .tox-collection__item-caret svg {
    fill: var(--text-color) !important;
}

body.dark-mode .tox .tox-collection__item--active,
body.dark-mode .tox .tox-collection__item:hover {
    background-color: var(--primary-soft) !important;
}

body.dark-mode .tox input.tox-textfield,
body.dark-mode .tox .tox-selectfield select {
    background-color: var(--card-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Product description + static-page editors only. The notification editor is
 * the visual reference and keeps its existing page-specific rules. */
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce {
    color-scheme: dark;
    border-color: var(--border-color) !important;
    background: var(--card-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-editor-header,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-toolbar-overlord,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-toolbar,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-toolbar__overflow,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-toolbar__primary,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-menubar,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-statusbar {
    border-color: var(--border-color) !important;
    background: var(--card-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-toolbar__group,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-statusbar {
    border-color: var(--border-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-edit-area__iframe,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-sidebar-wrap {
    background: var(--card-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn--select,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn--bespoke,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-input-wrapper,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-number-input,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-textfield {
    border-color: var(--border-color) !important;
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn:hover,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn:focus,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn--enabled,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn--enabled:hover {
    background: var(--primary-soft) !important;
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn__select-label,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-number-input input,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-textfield,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-statusbar__path-item,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-statusbar__wordcount {
    background: transparent !important;
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn svg,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-tbtn svg path,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-statusbar__resize-handle svg,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox .tox-statusbar__resize-handle svg path {
    fill: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-menu,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection--list,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-dialog,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-dialog__header,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-dialog__body,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-dialog__footer,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-form__group,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-selectfield select,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-textarea,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-textfield {
    border-color: var(--border-color) !important;
    background: var(--card-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection__item,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-label,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-dialog__title {
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection__item:hover,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection__item--active,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection__item--enabled {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection__item-icon svg,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-collection__item-icon svg path,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-chevron svg,
body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox-tinymce-aux .tox .tox-chevron svg path {
    fill: var(--text-color) !important;
}

body.dark-mode:is(.sc-product-editor-page, .sc-storefront-editor-page) .tox * {
    scrollbar-color: var(--muted-color) var(--card-color);
}

/* ---------- Table/card header "view all" link (dashboard, future lists) ---------- */

.table-header-link {
    color: var(--primary-color);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.table-header-link:hover {
    text-decoration: underline;
}

.table-header-link.is-disabled {
    color: var(--muted-color);
    cursor: not-allowed;
    text-decoration: none;
}

.table-header-link.is-disabled:hover {
    text-decoration: none;
}

/* ---------- Empty state icon (optional, on top of .empty-state) ---------- */

.empty-state-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.75;
}

.empty-state strong {
    display: block;
    color: var(--text-color);
    font-size: 13.5px;
    margin-bottom: 4px;
}

.empty-state span {
    font-size: 12.5px;
}

/* ---------- Customer balances (future wallet system) ----------
 * Not populated with data yet: no Wallet / Customer Balance / Debt
 * system exists in the project. This is only the visual scaffold so a
 * future feature can render one `.balance-currency-block` per currency
 * without needing any new CSS. Each block is meant to hold three boxes:
 * "??? ??? ???????" (owed to us), "??????? ?????" (owed to customers),
 * and "??????? ????????" (net result). */

.balance-currency-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.balance-currency-block {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    padding: 14px;
}

.balance-currency-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.balance-currency-head strong {
    font-size: 14px;
    color: var(--text-color);
}

.balance-currency-head span {
    color: var(--muted-color);
    font-size: 12px;
}

.balance-boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.balance-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-color);
    padding: 12px;
    text-align: center;
}

.balance-box-label {
    display: block;
    color: var(--muted-color);
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.balance-box-value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
}

.balance-box-result {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

.balance-box-result .balance-box-value {
    color: var(--primary-color);
}

/* ---------- Form cards & fields (shared "add/edit" page pattern) ----------
 * Used by pages built as a vertical stack of titled cards (each with a
 * heading + short description) instead of one big plain block � e.g. the
 * customer groups add/edit form. products/form.blade.php and
 * payment-methods/form.blade.php currently keep their own local copies of
 * these same rules (pre-existing, left untouched to avoid any regression
 * on those already-finished pages); new pages should reference these
 * central classes instead of redefining them again. */

.form-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-card {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.form-card-head {
    margin-bottom: 16px;
}

.form-card-head h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-card-head p {
    margin: 0;
    font-size: 12px;
    color: var(--muted-color);
}

.form-cards .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-cards .full {
    grid-column: 1 / -1;
}

.form-cards label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-color);
    font-size: 13px;
}

.form-cards .field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-cards .field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.form-cards textarea.field {
    resize: vertical;
    min-height: 120px;
    line-height: 1.8;
}

.form-cards .field-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--muted-color);
}

.form-cards .label-optional {
    font-weight: 500;
    color: var(--muted-color);
    font-size: 11.5px;
    margin-right: 4px;
}

.form-cards .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
}

.form-cards .toggle-row strong,
.form-cards .toggle-row small {
    display: block;
}

.form-cards .toggle-row small {
    margin-top: 4px;
    color: var(--muted-color);
    font-size: 11.5px;
}

.form-cards .toggle-row.is-locked {
    opacity: 0.75;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.form-actions-secondary {
    margin-left: auto;
}

/* ---------- Modal / popup (product picker, reusable for future pages) ---------- */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(9, 14, 26, 0.55);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.show {
    display: flex;
}

.modal-box {
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
}

.modal-close {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--muted-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    background: var(--surface-color);
    color: var(--text-color);
}

.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
}

/* ---------- Picker list (used inside the product-picker popup) ---------- */

.picker-search {
    margin-bottom: 12px;
}

.picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    text-align: right;
    width: 100%;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.picker-option:hover,
.picker-option:focus-visible {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}
.picker-option.is-selected {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.picker-option-name {
    font-weight: 700;
    color: var(--text-color);
}

.picker-option-meta {
    color: var(--muted-color);
    font-size: 11.5px;
    white-space: nowrap;
}

.picker-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted-color);
    font-size: 12.5px;
}

.picker-selected-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
}

.picker-selected-summary strong {
    color: var(--text-color);
    font-size: 13px;
}

.picker-back {
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.picker-back:hover {
    text-decoration: underline;
}

/* ---------- System-wide date pills ---------- */

.sc-date-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    min-width: 168px;
}

.sc-date-pill__label {
    position: absolute;
    top: -8px;
    right: 14px;
    z-index: 1;
    padding: 0 6px;
    background: var(--card-color);
    color: var(--muted-color);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.sc-date-pill__input {
    width: 100%;
    min-width: 168px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--card-color);
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    direction: ltr;
    text-align: center;
    font-family: inherit;
    color-scheme: light;
}

.sc-date-pill__input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--card-color);
    box-shadow: var(--sc-focus-ring);
}

.sc-date-pill__input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--surface-color);
}

.sc-date-pill__input[data-sc-md-date] {
    cursor: pointer;
    padding-inline-start: 16px;
    padding-inline-end: 40px;
    -webkit-appearance: none;
    appearance: none;
}

.sc-date-pill__input[data-sc-md-date]::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
}

.sc-date-pill__icon {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.sc-date-pill__icon:hover {
    color: var(--primary-color);
    background: var(--primary-soft);
}

/* ---------- Star Cash Material Date Dialog (internal) ---------- */

body.sc-md-date-open {
    overflow: hidden;
}

.sc-md-date {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.sc-md-date[hidden] {
    display: none !important;
}

.sc-md-date__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.sc-md-date__dialog {
    position: relative;
    z-index: 1;
    width: min(340px, calc(100vw - 24px));
    max-height: min(92vh, 560px);
    overflow: auto;
    border-radius: 16px;
    background: var(--card-color);
    color: var(--text-color);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
}

.sc-md-date__header {
    background: var(--primary-color);
    color: #fff;
    padding: 18px 20px 16px;
    border-radius: 16px 16px 0 0;
}

.sc-md-date__weekday {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.92;
    margin-bottom: 4px;
}

.sc-md-date__title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
}

.sc-md-date__body {
    padding: 12px 14px 8px;
}

.sc-md-date__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.sc-md-date__nav-btn,
.sc-md-date__month-btn {
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    cursor: pointer;
}

.sc-md-date__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-md-date__nav-btn:hover,
.sc-md-date__month-btn:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.sc-md-date__month-btn {
    flex: 1;
    min-width: 0;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    padding: 0 8px;
}

.sc-md-date__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 4px;
}

.sc-md-date__wd {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-color);
    padding: 4px 0;
}

.sc-md-date__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.sc-md-date__cell {
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sc-md-date__cell--empty {
    pointer-events: none;
    visibility: hidden;
}

.sc-md-date__cell:hover:not(.sc-md-date__cell--empty) {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.sc-md-date__cell.is-today {
    box-shadow: inset 0 0 0 1.5px var(--primary-color);
}

.sc-md-date__cell.is-selected {
    background: var(--primary-color);
    color: #fff;
    box-shadow: none;
}

.sc-md-date__years {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 6px 0 4px;
    min-height: 220px;
}

.sc-md-date__year {
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.sc-md-date__year:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-soft);
}

.sc-md-date__year.is-selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.sc-md-date__actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 14px 14px;
}

.sc-md-date__btn {
    min-width: 88px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    padding: 0 14px;
}

.sc-md-date__btn--ghost {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}

.sc-md-date__btn--ghost:hover {
    background: var(--surface-color);
}

.sc-md-date__btn--primary {
    background: var(--primary-color);
    color: #fff;
}

.sc-md-date__btn--primary:hover {
    filter: brightness(1.05);
}

body.dark-mode .sc-md-date__backdrop {
    background: rgba(0, 0, 0, 0.62);
}

body.dark-mode .sc-md-date__dialog {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}

body.dark-mode .sc-md-date__cell.is-today {
    box-shadow: inset 0 0 0 1.5px var(--primary-color);
}

@media (max-width: 480px) {
    .sc-md-date__dialog {
        width: min(100%, calc(100vw - 16px));
        max-height: min(90vh, 560px);
    }

    .sc-md-date__title {
        font-size: 20px;
    }

    .sc-md-date__cell {
        height: 36px;
    }
}

/* ==========================================================================
   UI Guard 2026-08 � Unified admin controls (compat with legacy classes)
   Reference: customer show / extraModal (break-limit)
   ========================================================================== */
:root {
    --sc-btn-h: 38px;
    --sc-btn-h-sm: 32px;
    --sc-btn-h-xs: 26px;
    --sc-btn-radius: 10px;
    --sc-btn-font: 13px;
    --sc-btn-pad-x: 14px;
    --sc-modal-w-sm: 400px;
    --sc-modal-w-md: 440px;
    --sc-modal-w-lg: 560px;
    --sc-dropdown-min-w: 200px;
}

/* Role-based buttons */
.sc-ui-btn,
.add-button,
.reorder-button,
.save-order-button,
.cancel-order-button,
.btn.btn-primary,
.btn.btn-secondary,
.sc-btn-h {
    min-height: var(--sc-btn-h);
    height: var(--sc-btn-h);
    padding: 0 var(--sc-btn-pad-x);
    border-radius: var(--sc-btn-radius);
    font-size: var(--sc-btn-font);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.sc-ui-btn:focus-visible,
.add-button:focus-visible,
.reorder-button:focus-visible,
.cancel-order-button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.sc-ui-btn:disabled,
.sc-ui-btn[aria-busy="true"],
.sc-ui-btn.is-loading,
.add-button:disabled,
.add-button[aria-busy="true"],
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.sc-ui-btn--primary,
.add-button,
.btn.btn-primary,
.modal-save-button {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
}
.sc-ui-btn--primary:hover:not(:disabled),
.add-button:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.modal-save-button:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.sc-ui-btn--success,
.save-order-button,
.btn.btn-success {
    background: var(--success-color);
    border: 1px solid var(--success-color);
    color: #fff;
}

.sc-ui-btn--danger,
.sc-btn-danger-solid,
.btn-danger,
.btn.btn-danger {
    background: #991b1b !important;
    border: 1px solid #991b1b !important;
    color: #fff !important;
}

.sc-ui-btn--warning,
.btn-warn-soft {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
}

.sc-ui-btn--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info-text);
}

.sc-ui-btn--secondary,
.btn.btn-secondary,
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
.modal-cancel-button,
.reorder-button {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.sc-ui-btn--secondary:hover:not(:disabled),
.btn.btn-secondary:hover:not(:disabled),
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover:not(:disabled),
.modal-cancel-button:hover:not(:disabled),
.reorder-button:hover:not(:disabled) {
    background: var(--surface-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Modal cancel = secondary (not danger). Customer page header overrides remain scoped. */
.cancel-order-button {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.cancel-order-button:hover:not(:disabled) {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.sc-ui-btn--ghost,
.sc-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted-color);
    box-shadow: none;
}

.sc-ui-btn--sm,
.action-btn {
    min-height: var(--sc-btn-h-sm);
    height: var(--sc-btn-h-sm);
    padding: 0 10px;
    font-size: 12.5px;
    border-radius: var(--sc-btn-radius);
}
.sc-ui-btn--xs {
    min-height: var(--sc-btn-h-xs);
    height: var(--sc-btn-h-xs);
    padding: 0 10px;
    font-size: 11px;
    border-radius: 8px;
}

/* Unified modal shell (shared; customers.css may refine dark overrides) */
body.sc-modal-open { overflow: hidden; }
.sc-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    direction: rtl;
}
.sc-modal.is-open { display: flex; }
.sc-modal[hidden] { display: none !important; }
/* Legacy picker overlay uses .show; keep identical shell behavior. */
.modal-overlay.show {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    direction: rtl;
}
.sc-modal__dialog {
    width: 100%;
    max-width: var(--sc-modal-w-md);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--text-color);
    min-height: 0;
}
.sc-modal__dialog--sm { max-width: var(--sc-modal-w-sm); }
.sc-modal__dialog--lg { max-width: var(--sc-modal-w-lg); }
.sc-modal__dialog > form,
.sc-modal__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.sc-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
    flex-shrink: 0;
}
.sc-modal__titles h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color);
}
.sc-modal__titles p {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted-color);
    font-weight: 600;
}
.sc-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-color);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.sc-modal__close:hover {
    background: var(--surface-strong, #eef2f7);
    color: var(--text-color);
}
.sc-modal__body {
    padding: 16px 18px;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--card-color);
}
.sc-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
    flex-shrink: 0;
}
.sc-wallet-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px;
    border-radius: 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}
.sc-wallet-summary__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--card-color);
    border: 1px solid var(--border-color);
}
.sc-wallet-summary__item span {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-color);
}
.sc-wallet-summary__item strong {
    font-size: 13px;
    font-weight: 800;
}
.sc-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.sc-stack__field { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; }
.sc-stack__field > label {
    display: block;
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-color);
}
.sc-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--sc-btn-radius);
    background: var(--card-color);
    color: var(--text-color);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
}
.sc-control--area,
textarea.sc-control {
    height: auto !important;
    min-height: 72px !important;
    padding: 10px 12px;
    resize: vertical;
}
.sc-control:focus {
    border-color: var(--primary-color);
    box-shadow: var(--sc-focus-ring);
}
.sc-input-currency { position: relative; width: 100%; }
.sc-input-currency .sc-control { padding-left: 56px; direction: ltr; text-align: left; }
.sc-input-currency__unit {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    color: var(--muted-color);
    pointer-events: none;
}

/* Unified actions dropdown */
.actions-dropdown {
    min-width: var(--sc-dropdown-min-w);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    background: var(--card-color);
    z-index: 2500;
}
.actions-dropdown .action-menu-button,
.actions-dropdown .action-menu-link {
    border-radius: 8px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
}
.actions-dropdown .action-menu-button:focus-visible,
.actions-dropdown .action-menu-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

@media (max-width: 560px) {
    .sc-modal { padding: 0; align-items: flex-end; }
    .sc-modal__dialog {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }
    .sc-wallet-summary { grid-template-columns: 1fr; }
    .sc-modal__footer .add-button,
    .sc-modal__footer .cancel-order-button {
        flex: 1;
        justify-content: center;
    }
}

body.dark-mode .sc-modal__header,
body.dark-mode .sc-modal__footer {
    background: var(--surface-color);
    border-color: var(--border-color);
}
body.dark-mode .sc-modal__body { background: var(--card-color); }
body.dark-mode .sc-control {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
body.dark-mode .sc-wallet-summary { background: var(--surface-strong); }

/* ---------- Shared catalog bulk quick-edit ---------- */
.sc-bulk-quick-heading,
.sc-bulk-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sc-bulk-quick-actions[hidden],
.sc-bulk-quick-trigger[hidden] { display: none !important; }
.sc-bulk-quick-count {
    color: var(--muted-color);
    font-size: 11.5px;
    font-weight: 700;
}
.sc-quick-edit-field { display: none !important; }
tr.is-sc-quick-editing .sc-quick-view { display: none !important; }
tr.is-sc-quick-editing .sc-quick-edit-field { display: block !important; }
tr.is-sc-quick-editing .sc-quick-edit-field.sc-quick-edit-stack { display: flex !important; }
tr.is-sc-quick-dirty { background: var(--primary-soft) !important; }
.sc-quick-name-stack,
.sc-quick-edit-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
}
.sc-quick-name-stack small {
    color: var(--muted-color);
    font-size: 10.5px;
    direction: ltr;
    text-align: right;
}
.sc-quick-edit-stack .quick-input {
    width: 180px;
    height: 27px;
}
.sc-quick-edit-field.quick-input {
    width: 112px;
    height: 29px;
}
.categories-page .sc-quick-edit-stack .quick-input { width: 190px; }
.products-page.is-sc-bulk-quick-editing .search-form,
.categories-page.is-sc-bulk-quick-editing .search-form { opacity: 0.7; }
.products-page.reorder-mode .sc-bulk-quick-heading,
.categories-page.reorder-mode .sc-bulk-quick-heading { display: none; }

/* Compact shared shell for catalog selection/action dialogs. */
.sc-catalog-bulk-modal .sc-modal__dialog { max-width: 520px; }
.sc-catalog-bulk-modal .sc-modal__body {
    max-height: min(58vh, 460px);
    overscroll-behavior: contain;
}
.sc-catalog-picker-search { position: relative; margin-bottom: 10px; }
.sc-catalog-picker-search .sc-control { width: 100%; }
.sc-catalog-choice-list {
    display: grid;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
}
.sc-catalog-choice {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}
.sc-catalog-choice:hover,
.sc-catalog-choice:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}
.sc-catalog-bulk-modal .sc-scope-list { max-height: min(46vh, 320px); }
.sc-catalog-bulk-modal .sc-scope-meta strong { color: var(--text-color); }

@media (max-width: 700px) {
    .sc-catalog-bulk-modal .sc-modal__body { max-height: 62vh; }
}


/* ---------- Unified numeric admin pagination ---------- */
.sc-number-pagination {
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sc-number-pagination a,
.sc-number-pagination .is-current,
.sc-number-pagination__ellipsis {
    direction: ltr;
    font-variant-numeric: lining-nums tabular-nums;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: var(--surface-color);
    color: var(--text-color);
    box-sizing: border-box;
}

.sc-number-pagination .is-current {
    font-weight: 700;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sc-number-pagination__ellipsis {
    border-color: transparent;
    background: transparent;
}