/* Tables, form inputs, buttons, badges, toast, progress bar, toggle switch. */

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
th { background: var(--bg-page); color: var(--text-muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); }
td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
tr.clickable:hover { background: var(--bg-page); cursor: pointer; }

.product-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--border); }
.product-cell { display: flex; align-items: center; gap: 12px; font-weight: 500; }

.input-price { width: 100px; background: var(--bg-page); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 8px 12px; border-radius: 6px; font-size: 14px; outline: none; }
.input-price:focus { border-color: var(--accent-indigo); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }

/* Same visual language as .input-price (border/bg/text/radius/focus-ring) but for
   non-price selects -- the header language switcher was borrowing .input-price
   purely for convenience, which is semantically wrong (a heuristic audit flagged
   this) even though the inline style overrides happened to mask most of it. */
.select-compact { background: var(--bg-page); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: 6px; outline: none; cursor: pointer; }
.select-compact:focus { border-color: var(--accent-indigo); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }

.btn-save { background: var(--accent-indigo); color: #fff; border: none; padding: 8px 14px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-save:hover { background: var(--accent-indigo-dark); }

/* Compact pill button for a row of equal-weight quick actions (see .accent-card). */
.quick-action-btn { background: var(--bg-page); border: 1px solid var(--border-strong); color: var(--text-secondary); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s, border-color 0.2s; white-space: nowrap; }
.quick-action-btn:hover { background: var(--border); border-color: var(--accent-indigo-light); }

/*
 * Integration card connection states (synced with real per-shop settings by
 * tab_integrations.js's updateIntegrationCardsState()). Previously all 8
 * cards looked identical regardless of whether the merchant had actually
 * connected anything — this gives a real at-a-glance signal.
 */
.integ-card { transition: opacity 0.2s ease, border-color 0.2s ease; }
.integ-card.integ-off { opacity: 0.6; }
.integ-card.integ-connected { border-color: rgba(16, 185, 129, 0.35) !important; }
.integ-card.integ-needs-setup { border-color: rgba(245, 158, 11, 0.35) !important; }

/*
 * Onboarding wizard's strategy-selection radio cards. Previously plain
 * `<div onclick>` with no keyboard access and selection signaled only by a
 * border/background color swap (not colorblind/contrast-safe on its own) —
 * now a proper role="radio" with a visible checkmark on the selected card.
 */
.wiz-goal-card { position: relative; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.wiz-goal-card:focus-visible { outline: 2px solid var(--accent-indigo-light); outline-offset: 2px; }
.wiz-goal-card.selected-indigo { border: 2px solid var(--accent-indigo); background: rgba(99, 102, 241, 0.15); }
.wiz-goal-card.selected-amber { border: 2px solid var(--accent-amber); background: rgba(245, 158, 11, 0.15); }
.wiz-goal-check { display: none; position: absolute; top: -7px; left: 10px; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; border: 2px solid var(--bg-card); color: #fff; }
.wiz-goal-card.selected-indigo .wiz-goal-check { display: flex; background: var(--accent-indigo); }
.wiz-goal-card.selected-amber .wiz-goal-check { display: flex; background: var(--accent-amber); }

.badge-active { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); border: 1px solid rgba(16, 185, 129, 0.25); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.badge-yield { background: rgba(99, 102, 241, 0.15); color: var(--accent-indigo-light); border: 1px solid rgba(99, 102, 241, 0.25); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.badge-inactive { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); border: 1px solid rgba(148, 163, 184, 0.2); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

.toast { position: fixed; bottom: 24px; right: 24px; background: var(--accent-emerald); color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 10px 20px rgba(0,0,0,0.4); display: none; z-index: 1000; }

/* Progress Bar */
.progress-container { width: 100%; background: var(--bg-page); border-radius: 8px; height: 16px; overflow: hidden; margin: 16px 0; border: 1px solid var(--border); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-indigo), var(--accent-emerald)); width: 0%; transition: width 0.3s ease; }

/* Rule Simulator scenario picker -- a real segmented control (single track,
   sliding active pill) instead of 3 separately-bordered pill buttons that
   each carried their own accent color regardless of selection state. */
.sim-preset-group { display: flex; gap: 4px; background: var(--bg-page); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.sim-preset-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 7px 6px; border-radius: 7px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.sim-preset-btn:hover { color: var(--text-primary); }
.sim-preset-btn:focus-visible { outline: 2px solid var(--accent-indigo-light); outline-offset: 1px; }
.sim-preset-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.14); }
.sim-preset-btn.active svg { stroke: var(--accent-indigo); }

/*
 * Custom range-slider track/thumb. Chromium's native accent-color track-fill
 * rendering turned out inconsistent here -- one slider rendered its unfilled
 * track correctly light, three others rendered it solid black regardless of
 * color-scheme (confirmed via devtools: color-scheme resolved to "light"
 * correctly, the browser just didn't paint the unfilled track from it).
 * Track is now painted explicitly via a JS-computed gradient (paintRangeFill()
 * in dashboard.js, called from updateSimulation()) instead of trusting the
 * browser's own filled/unfilled split. Thumb + fill color come from the
 * input's own `color` (set inline per-slider), read via currentColor.
 */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--border); outline: none; cursor: pointer; margin: 10px 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: currentColor; border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; margin-top: -5px; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: currentColor; border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: currentColor; }
input[type="range"]:focus-visible { outline: 2px solid var(--accent-indigo-light); outline-offset: 2px; }

/* iOS Style Toggle Switch */
.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.switch-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.switch-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-emerald); }
input:checked + .slider:before { transform: translateX(22px); }