/* ========================================
   STOCK ON HAND — Dark Chrome + Theme
   ======================================== */

.soh-wrapper {
    width: 100%;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

.soh-no-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Dark Chrome Header ── */
.soh-header {
    background: var(--chrome-bg);
    padding: 14px 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.soh-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%);
}

.soh-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.soh-header-icon {
    width: 38px;
    height: 38px;
    background: var(--accent-10);
    border: 1px solid var(--accent-20);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.soh-header-icon [data-lucide] { width: 18px; height: 18px; }

.soh-header-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--chrome-text);
    line-height: 1.3;
}

.soh-header-sub {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--chrome-text-dim);
    font-weight: 400;
}

.soh-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Header Chips ── */
.soh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.soh-chip i, .soh-chip [data-lucide] { width: 12px; height: 12px; }
.soh-chip-ok { color: var(--success); background: var(--success-light); }
.soh-chip-scanning { color: var(--signal); background: var(--warning-light); }
.soh-chip-error { color: var(--error); background: var(--error-light, rgba(248, 113, 113, 0.12)); }

.soh-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    animation: sohPulse 1.2s ease-in-out infinite;
}

@keyframes sohPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

/* ── Header Buttons ── */
.soh-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--accent-10);
    border: 1px solid var(--accent-20);
    border-radius: 8px;
    color: var(--accent-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.soh-btn-action:hover {
    background: var(--accent-20);
    border-color: var(--accent-30);
    color: var(--accent-primary);
}

.soh-btn-action:disabled { opacity: 0.4; cursor: not-allowed; }
.soh-btn-action i, .soh-btn-action [data-lucide] { width: 13px; height: 13px; }

.soh-btn-icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--chrome-input-bg);
    border: 1px solid var(--chrome-input-border);
    border-radius: 8px;
    color: var(--chrome-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.soh-btn-icon:hover { background: var(--chrome-active); color: var(--chrome-text); }
.soh-btn-icon [data-lucide] { width: 14px; height: 14px; }

/* ── Settings Panel ── */
.soh-settings {
    margin: 16px 28px 0;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.soh-settings-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.soh-settings-header [data-lucide] { width: 14px; height: 14px; }

.soh-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.soh-fg-wide { grid-column: span 2; }

.soh-fg label {
    display: block;
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.soh-input {
    width: 100%;
    padding: 6px 10px;
    background-color: var(--surface-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    color-scheme: inherit;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

select.soh-input {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--surface-inset);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;
    cursor: pointer;
}

select.soh-input option {
    background-color: var(--surface-inset);
    color: var(--text-primary);
}

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

.soh-settings-footer {
    margin-top: 12px;
    display: flex; justify-content: flex-end;
}

/* ── Toggle Switch ── */
.soh-switch {
    position: relative; display: inline-block;
    width: 38px; height: 20px; cursor: pointer;
}

.soh-switch input { opacity: 0; width: 0; height: 0; }

.soh-switch-track {
    position: absolute; inset: 0;
    background: var(--border-medium);
    border-radius: 20px;
    transition: 0.2s;
}

.soh-switch-track::before {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    left: 3px; bottom: 3px;
    background: var(--surface);
    border-radius: 50%;
    transition: 0.2s;
}

.soh-switch input:checked + .soh-switch-track { background: var(--accent-primary); }
.soh-switch input:checked + .soh-switch-track::before { transform: translateX(18px); }

/* ── Content ── */
.soh-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px 40px;
}

.soh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.soh-empty [data-lucide] { width: 48px; height: 48px; color: var(--border-soft); }
.soh-empty h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text-secondary); }
.soh-empty p { font-size: 13px; margin: 0; }

/* ── Table ── */
.soh-table-wrap {
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.soh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.soh-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-soft);
}

.soh-table tbody tr {
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.1s;
}

.soh-table tbody tr:last-child { border-bottom: none; }

.soh-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.soh-table tbody td {
    padding: 10px 16px;
    color: var(--text-primary);
}

.soh-th-num { width: 50px; }
.soh-th-right { text-align: right; }

.soh-td-num {
    color: var(--text-disabled);
    font-size: 11px;
    font-weight: 600;
    width: 50px;
}

.soh-td-product {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.soh-td-product [data-lucide] {
    width: 15px; height: 15px;
    color: var(--accent-primary);
    opacity: 0.6;
    flex-shrink: 0;
}

.soh-td-value {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: var(--text-primary);
}

.soh-td-negative { color: var(--status-error); }

.soh-td-positive { color: var(--success); }
.soh-td-negative-text { color: var(--error); }
.soh-td-muted { color: var(--text-muted); }

.soh-td-closing {
    font-weight: 800;
    font-size: 14px;
    color: var(--text-primary);
    border-left: 2px solid var(--border-soft);
}

.soh-th-purchased { color: var(--success); }
.soh-th-sold { color: var(--error); }
.soh-th-returned { color: var(--signal); }
.soh-th-production { color: var(--accent-primary); }
.soh-th-closing { border-left: 2px solid var(--border-soft); }
.soh-th-price { color: var(--text-muted); font-size: 9px; }

.soh-td-price { color: var(--text-muted); font-size: 12px; font-weight: 500; }

.soh-summary-row {
    border-top: 2px solid var(--border-medium) !important;
    background: var(--chrome-hover);
}

.soh-summary-row td { padding-top: 6px !important; padding-bottom: 6px !important; }

.soh-td-predicted { color: var(--signal); }
.soh-td-confirmed { color: var(--success); }

.soh-predicted-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--signal);
    margin-left: 4px;
    vertical-align: super;
}

.soh-date-picker {
    width: auto;
    min-width: 150px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ── Category sections ── */
.soh-category {
    margin-bottom: 24px;
}

.soh-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-color, var(--text-primary));
    border-bottom: 2px solid var(--cat-color, var(--border-soft));
}

/* Category color classes — theme-friendly */
.soh-cat-soya       { --cat-color: var(--success); }
.soh-cat-sunflower  { --cat-color: var(--signal); }
.soh-cat-canola     { --cat-color: var(--accent-primary); }
.soh-cat-maize      { --cat-color: var(--warning); }
.soh-cat-default    { --cat-color: var(--text-secondary); }

.soh-category-header [data-lucide] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.soh-category-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--chrome-hover);
    color: var(--text-muted);
}

/* ── Mapping panel ── */
.soh-map-controls {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.soh-map-controls .soh-fg { flex: 1; }

.soh-map-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.soh-map-list-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.soh-map-list-title [data-lucide] { width: 13px; height: 13px; }

.soh-map-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-primary);
    margin: 0 6px 6px 0;
}

.soh-map-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: all 0.15s;
}

.soh-map-remove:hover {
    background: rgba(248, 113, 113, 0.15);
    color: var(--error);
}

.soh-map-remove [data-lucide] { width: 12px; height: 12px; }

.soh-btn-icon-active {
    background: var(--accent-15) !important;
    border-color: var(--accent-30) !important;
    color: var(--accent-primary) !important;
}

/* ── Skipped sheets collapsible ── */
.soh-details {
    margin-top: 20px;
}

.soh-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
    list-style: none;
}

.soh-details summary::-webkit-details-marker { display: none; }

.soh-details summary [data-lucide] { width: 13px; height: 13px; }

.soh-details[open] summary { margin-bottom: 8px; }

.soh-skip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.soh-skip-tag {
    padding: 3px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Grand Total ── */
.soh-grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    margin-top: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    border-top: 2px solid var(--accent-primary);
}

.soh-grand-total-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.soh-grand-total-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Scrollbar ── */
.soh-content::-webkit-scrollbar { width: 6px; }
.soh-content::-webkit-scrollbar-track { background: transparent; }
.soh-content::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }
.soh-content::-webkit-scrollbar-thumb:hover { background: var(--border-medium); }

/* ── Config Dialog ── */
.soh-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    backdrop-filter: blur(6px);
    animation: sohFadeIn 0.15s ease;
}

@keyframes sohFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sohSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.soh-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 880px;
    max-height: 82vh;
    background: var(--chrome-dropdown-bg);
    border: 1px solid var(--chrome-border);
    border-radius: 16px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: sohSlideIn 0.2s ease;
    color-scheme: inherit;
}

.soh-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-border);
    border-radius: 16px 16px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--chrome-text);
    position: relative;
}

.soh-dialog-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 60%);
}

.soh-dialog-header [data-lucide] { width: 18px; height: 18px; color: var(--accent-primary); }

.soh-dialog-tabs {
    display: flex;
    gap: 0;
    background: var(--chrome-hover);
    border-bottom: 1px solid var(--chrome-border);
    padding: 0 28px;
}

.soh-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    border: none;
    background: transparent;
    color: var(--chrome-text-dim);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    position: relative;
}

.soh-tab:hover { color: var(--chrome-text); background: var(--chrome-hover); }
.soh-tab-active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); background: var(--accent-dim); }
.soh-tab [data-lucide] { width: 14px; height: 14px; }

.soh-dialog-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
}

.soh-dialog-body::-webkit-scrollbar { width: 5px; }
.soh-dialog-body::-webkit-scrollbar-track { background: transparent; }
.soh-dialog-body::-webkit-scrollbar-thumb { background: var(--chrome-hover); border-radius: 3px; }

.soh-dialog-hint {
    font-size: 12px;
    color: var(--chrome-text-dim);
    margin: 0 0 20px;
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--accent-dim);
    border-left: 3px solid var(--accent-30);
    border-radius: 0 6px 6px 0;
}

/* ── Dialog Tables ── */
.soh-dialog-body .soh-table { font-size: 12px; }
.soh-dialog-body .soh-table thead th {
    padding: 10px 14px;
    font-size: 9px;
    color: var(--signal);
    background: var(--chrome-hover);
    border-bottom: 1px solid var(--accent-15);
}
.soh-dialog-body .soh-table tbody td {
    padding: 10px 14px;
    color: var(--text-secondary);
}
.soh-dialog-body .soh-table tbody tr { border-bottom: 1px solid var(--chrome-border); }
.soh-dialog-body .soh-table tbody tr:hover { background: var(--accent-dim); }

/* ── Dialog Forms ── */
.soh-dialog-body .soh-fg { margin-bottom: 0; }
.soh-dialog-body .soh-fg label {
    display: block;
    margin-bottom: 5px;
    color: var(--signal);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*
 * IMPORTANT: native <select> and <input> elements require OPAQUE backgrounds.
 * Semi-transparent (rgba) values composite over the browser's internal white
 * control background, making them appear white regardless of theme.
 * Use --surface-inset (opaque in all themes) instead of --chrome-input-bg.
 */
.soh-dialog-body .soh-input,
.soh-dialog-body select.soh-input,
.soh-dialog-body input.soh-input {
    background-color: var(--surface-inset) !important;
    border: 1px solid var(--chrome-border);
    color: var(--text-primary) !important;
    color-scheme: inherit;
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.soh-dialog-body select.soh-input {
    background-color: var(--surface-inset) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.soh-dialog-body select.soh-input option {
    background-color: var(--surface-inset) !important;
    color: var(--text-primary) !important;
    padding: 8px;
}

.soh-dialog-body .soh-input:focus,
.soh-dialog-body select.soh-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-15);
    outline: none;
}

.soh-dialog-body .soh-input::placeholder { color: var(--text-muted); }

.soh-dialog-body .soh-btn-action {
    padding: 8px 16px;
    border-radius: 8px;
    height: 36px;
    background: var(--accent-15);
    border: 1px solid var(--accent-30);
    color: var(--accent-secondary);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.soh-dialog-body .soh-btn-action:hover {
    background: var(--accent-20);
    border-color: var(--accent-30);
    color: var(--accent-primary);
}

.soh-dialog-body .soh-btn-action:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Dialog Map Tags ── */
.soh-dialog-body .soh-map-tag {
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    padding: 6px 10px 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.soh-dialog-body .soh-map-tag:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.soh-dialog-body .soh-map-list { border-top: none; padding-top: 8px; }
.soh-dialog-body .soh-map-list-title { color: var(--signal); margin-bottom: 10px; font-size: 11px; }

/* ── Dialog Group Cards ── */
.soh-dialog-body .soh-group-card {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--chrome-hover);
    border: 1px solid var(--accent-10);
    border-radius: 10px;
}

/* ── Dialog Section Titles ── */
.soh-dialog-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--chrome-border);
}

/* ── Dialog Close Button ── */
.soh-dialog-header .soh-map-remove {
    color: var(--chrome-text-dim);
    width: 28px;
    height: 28px;
}
.soh-dialog-header .soh-map-remove:hover {
    color: var(--accent-primary);
    background: var(--accent-10);
}

/* ── Dialog Delete Buttons ── */
.soh-dialog-body .soh-map-remove {
    color: var(--chrome-text-dim);
}
.soh-dialog-body .soh-map-remove:hover {
    color: var(--error);
    background: rgba(248, 113, 113, 0.15);
}

/* ── Dialog Yield Source Headers ── */
.soh-yield-source-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}

.soh-yield-source-header [data-lucide] {
    width: 14px;
    height: 14px;
    color: var(--accent-primary);
}

.soh-yield-source-cat {
    color: var(--text-muted);
}

.soh-yield-source-name {
    color: var(--text-primary);
}

.soh-yield-product-name {
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Dialog Section Divider ── */
.soh-dialog-divider {
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

/* ── Dialog Group Card ── */
.soh-group-card {
    margin-bottom: 14px;
    padding: 16px 18px;
    background: var(--surface-inset);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent-primary);
    border-radius: 10px;
    transition: border-color 0.15s;
}

.soh-group-card:hover {
    border-color: var(--accent-20);
    border-left-color: var(--accent-primary);
}

.soh-group-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.soh-group-card-header [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.soh-group-card-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-primary);
    letter-spacing: -0.2px;
}

.soh-group-card-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--on-accent, #fff);
    margin-left: auto;
    background: var(--accent-primary);
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.soh-group-card-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Product tags inside group cards — need opaque bg for contrast in all themes */
.soh-group-card-items .soh-map-tag {
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.soh-group-card-items .soh-map-tag:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .soh-header { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
    .soh-content { padding: 16px; }
    .soh-settings { margin: 12px 16px 0; }
    .soh-settings-grid { grid-template-columns: 1fr; }
    .soh-fg-wide { grid-column: span 1; }
}