/* ==========================================================================================================================================================
 * Doctor Phone Pro - the phones store as a POS platform (v3.20.13, built from a clean slate)
 *
 * ONE design language for every store screen (hub, showroom, accessories, sales log, debts, customers, bookings, treasury):
 *   - a deep navy surface (#0b1324) with slate hairlines (#1e2b45): NO glowing / coloured card borders;
 *   - a colour appears only on the small icon chip of a control (its tone), never on a whole card;
 *   - a wide search + scan bar at the top of every working screen, wrapping filter pills (no horizontal scrolling), one title row;
 *   - generous bottom padding so the floating [ <- رجوع ] capsule never covers a control.
 * Only #storeRoot is styled here; the customer-facing portal (.sp-portal) keeps its own sheet (store-v3119.css / ui-polish.css).
 * ========================================================================================================================================================== */

#tab-store { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
#storeRoot { --pos-bg: #0b1324; --pos-surface: #0f1a2e; --pos-surface-2: #14233c; --pos-line: #1e2b45; --pos-line-2: #2a3a5a; --pos-text: #e8eef8; --pos-mute: #8da0bd; --pos-faint: #5f7391;
    --t-sky: #38bdf8; --t-amber: #fbbf24; --t-emerald: #34d399; --t-teal: #2dd4bf; --t-orange: #fb923c; --t-cyan: #22d3ee; --t-lime: #a3e635; --t-slate: #94a3b8; --t-yellow: #facc15; --t-rose: #fb7185; }
:root:root #storeRoot * { box-sizing: border-box; }
:root:root #storeRoot .pos { display: flex; flex-direction: column; gap: 12px; color: var(--pos-text); }

/* ---- title row ------------------------------------------------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 44px; }   /* v3.20.29: the actions wrap under the title when a longer language leaves it no room */
:root:root #storeRoot .pos-chip { flex: none; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--pos-surface-2); border: 1px solid var(--pos-line); color: var(--tone, var(--t-sky)); font-size: 18px; }
:root:root #storeRoot .pos-chip.is-sm { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
:root:root #storeRoot .pos-titles { flex: 1 1 130px; min-width: 110px; }
:root:root #storeRoot .pos-title { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.25; color: var(--pos-text); }
:root:root #storeRoot .pos-sub { margin: 1px 0 0; font-size: 11px; font-weight: 700; line-height: 1.35; color: var(--pos-mute); }
:root:root #storeRoot .pos-bar-actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }

/* ---- buttons --------------------------------------------------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 14px; background: var(--pos-surface-2); border: 1px solid var(--pos-line-2); color: var(--pos-text); font-size: 12.5px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
:root:root #storeRoot .pos-btn i { color: var(--tone, var(--t-sky)); font-size: 14px; }
:root:root #storeRoot .pos-btn:active { background: var(--pos-surface); transform: scale(.98); }
:root:root #storeRoot .pos-btn.is-primary { background: #e8eef8; border-color: #e8eef8; color: #0b1324; }
:root:root #storeRoot .pos-btn.is-primary i { color: #0b1324; }
:root:root #storeRoot .pos-btn.is-block { width: 100%; }

/* ---- the search + scan bar ----------------------------------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-find { position: relative; display: flex; align-items: center; gap: 8px; }
:root:root #storeRoot .pos-find-box { position: relative; flex: 1 1 auto; min-width: 0; }
:root:root #storeRoot .pos-find-box > i { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--pos-faint); font-size: 15px; pointer-events: none; }
:root:root #storeRoot .pos-find input[type="search"], :root:root #storeRoot .pos-find input[type="text"] { width: 100%; min-height: 54px; padding: 0 16px; padding-inline-start: 44px; border-radius: 16px; background: var(--pos-surface); border: 1.5px solid var(--pos-line-2); color: var(--pos-text); font-size: 15px; font-weight: 800; outline: none; }
:root:root #storeRoot .pos-find input::placeholder { color: var(--pos-faint); font-weight: 700; }
:root:root #storeRoot .pos-find input:focus { border-color: var(--t-sky); box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); }
:root:root #storeRoot .pos-scan { flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--pos-surface-2); border: 1.5px solid var(--pos-line-2); color: var(--t-cyan); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
:root:root #storeRoot .pos-scan:active { background: var(--pos-surface); }
:root:root #storeRoot .pos-find .dpp-scanwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; }
:root:root #storeRoot .pos-find-ico { position: absolute; inset-inline-start: 16px; top: 27px; transform: translateY(-50%); color: var(--pos-faint); font-size: 15px; pointer-events: none; z-index: 1; }
:root:root #storeRoot .pos-filterrow { display: flex; align-items: flex-start; gap: 8px; }
:root:root #storeRoot .pos-filterrow > :first-child { flex: 1 1 auto; min-width: 0; }
:root:root #storeRoot .pos-seg.is-sm button { width: 46px; height: 40px; border-radius: 14px; border-width: 1px; font-size: 14px; }
:root:root #storeRoot .pos-find .dpp-scanwrap > input { flex: 1 1 auto; min-height: 54px; height: 54px; border-radius: 16px; }
:root:root #storeRoot .pos-find .dpp-scanbtn { width: 54px; min-height: 54px; height: 54px; border-radius: 16px; background: var(--pos-surface-2); border: 1.5px solid var(--pos-line-2); color: var(--t-cyan); }
:root:root #storeRoot .pos-seg { flex: none; display: flex; gap: 6px; }
:root:root #storeRoot .pos-seg button { width: 54px; height: 54px; border-radius: 16px; background: var(--pos-surface); border: 1.5px solid var(--pos-line-2); color: var(--pos-mute); font-size: 16px; display: flex; align-items: center; justify-content: center; }
:root:root #storeRoot .pos-seg button[aria-pressed="true"] { background: var(--pos-surface-2); color: var(--t-sky); border-color: var(--t-sky); }

/* ---- filter pills (wrap: never a horizontal scroller) --------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-pills { display: flex; flex-wrap: wrap; gap: 8px; }
:root:root #storeRoot .pos-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-height: 40px; padding: 0 10px; border-radius: 999px; background: var(--pos-surface); border: 1px solid var(--pos-line); color: var(--pos-mute); font-size: 11.5px; font-weight: 900; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
:root:root #storeRoot .pos-pill b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--pos-surface-2); color: var(--pos-text); font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; display: inline-flex; align-items: center; justify-content: center; }
:root:root #storeRoot .pos-pill[aria-pressed="true"] { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .55); color: #e0f2fe; }
:root:root #storeRoot .pos-pill[aria-pressed="true"] b { background: rgba(56, 189, 248, .25); }
:root:root #storeRoot .pos-pill i { color: var(--tone, var(--pos-mute)); font-size: 12px; }

/* ---- hub ------------------------------------------------------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root:root #storeRoot .pos-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--pos-surface); border: 1px solid var(--pos-line); text-align: center; cursor: pointer; }
:root:root #storeRoot .pos-kpi strong { font: 900 19px/1.1 ui-monospace, Menlo, monospace; color: var(--tone, var(--pos-text)); }
:root:root #storeRoot .pos-kpi span { font-size: 10.5px; font-weight: 800; color: var(--pos-mute); }
:root:root #storeRoot .pos-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root:root #storeRoot .pos-quick .pos-btn { min-height: 58px; justify-content: flex-start; padding: 0 14px; font-size: 13.5px; }
:root:root #storeRoot .pos-quick .pos-btn .pos-chip { width: 36px; height: 36px; border-radius: 11px; background: var(--pos-bg); }
:root:root #storeRoot .pos-group { margin: 6px 2px -2px; font-size: 11px; font-weight: 900; letter-spacing: .02em; color: var(--pos-faint); }
:root:root #storeRoot .pos-gates { display: flex; flex-direction: column; gap: 8px; }
:root:root #storeRoot .pos-gate { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 10px 12px; border-radius: 16px; background: var(--pos-surface); border: 1px solid var(--pos-line); text-align: start; cursor: pointer; touch-action: manipulation; color: var(--pos-text); }
:root:root #storeRoot .pos-gate:active { background: var(--pos-surface-2); }
:root:root #storeRoot .pos-gate-t { flex: 1 1 auto; min-width: 0; }
:root:root #storeRoot .pos-gate-t strong { display: block; font-size: 14px; font-weight: 900; line-height: 1.3; }
:root:root #storeRoot .pos-gate-t span { display: block; margin-top: 1px; font-size: 11px; font-weight: 700; color: var(--pos-mute); line-height: 1.35; }
:root:root #storeRoot .pos-gate > .pos-go { flex: none; color: var(--pos-faint); font-size: 13px; }
:root:root #storeRoot .pos-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--t-cyan); color: #04121f; font: 900 11px/22px ui-monospace, Menlo, monospace; text-align: center; }
:root:root #storeRoot .pos-badge.hidden { display: none; }

/* ---- breadcrumb + tiles (accessories hierarchy) ---------------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:root:root #storeRoot .pos-crumb { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 999px; background: var(--pos-surface); border: 1px solid var(--pos-line); color: var(--pos-mute); font-size: 12px; font-weight: 900; }
:root:root #storeRoot .pos-crumb[aria-current="true"] { color: var(--pos-text); border-color: var(--pos-line-2); background: var(--pos-surface-2); }
:root:root #storeRoot .pos-crumbs > i { color: var(--pos-faint); font-size: 10px; }
:root:root #storeRoot .pos-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { :root:root #storeRoot .pos-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:root:root #storeRoot .pos-tilewrap { position: relative; display: flex; }
:root:root #storeRoot .pos-tilewrap > .pos-tile { width: 100%; }
:root:root #storeRoot .pos-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 124px; border-radius: 18px; background: var(--pos-surface); border: 1px solid var(--pos-line); text-align: start; cursor: pointer; color: var(--pos-text); touch-action: manipulation; }
:root:root #storeRoot .pos-tile:active { background: var(--pos-surface-2); }
:root:root #storeRoot .pos-logo { width: 56px; height: 56px; border-radius: 15px; background: var(--pos-surface-2); border: 1px solid var(--pos-line); display: flex; align-items: center; justify-content: center; color: var(--tone, var(--t-sky)); font-size: 22px; overflow: hidden; flex: none; }
:root:root #storeRoot .pos-logo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; background: #fff; }
:root:root #storeRoot .pos-tile strong { font-size: 13.5px; font-weight: 900; line-height: 1.3; }
:root:root #storeRoot .pos-tile small { font-size: 11px; font-weight: 800; color: var(--pos-mute); }
:root:root #storeRoot .pos-tile-edit { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 36px; height: 36px; min-width: 36px; border-radius: 10px; background: var(--pos-bg); border: 1px solid var(--pos-line); color: var(--pos-mute); font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ---- product / phone cards ------------------------------------------------------------------------------------------------------------------------- */
:root:root #storeRoot .pos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
@media (min-width: 620px) { :root:root #storeRoot .pos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:root:root #storeRoot .pos-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--pos-surface); border: 1px solid var(--pos-line); padding: 0 !important; box-shadow: none; }
:root:root #storeRoot .pos-card.is-hidden { opacity: .82; }
:root:root #storeRoot .pos-card.is-sold .pos-img { filter: grayscale(.6); }
:root:root #storeRoot .pos-photo { position: relative; background: #070d1a; }
:root:root #storeRoot .pos-img { display: block; width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; background: #070d1a; }
:root:root #storeRoot .pos-img.is-43 { aspect-ratio: 4 / 3; }
:root:root #storeRoot .pos-noimg { width: 100%; aspect-ratio: 1 / 1.02; display: flex; align-items: center; justify-content: center; color: var(--pos-faint); font-size: 34px; }
:root:root #storeRoot .pos-noimg.is-43 { aspect-ratio: 4 / 3; }
:root:root #storeRoot .pos-price { position: absolute; inset-inline-start: 8px; inset-block-end: 8px; padding: 3px 9px; border-radius: 10px; background: rgba(7, 13, 26, .86); color: #f4f8fc; font: 900 14px/1.35 ui-monospace, Menlo, monospace; }
:root:root #storeRoot .pos-flags { position: absolute; inset-inline-start: 8px; inset-block-start: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 52px); }
:root:root #storeRoot .pos-flag { padding: 2px 8px; border-radius: 99px; background: rgba(7, 13, 26, .86); color: var(--tone, var(--pos-text)); font-size: 10px; font-weight: 900; line-height: 1.5; }
:root:root #storeRoot .pos-order { position: absolute; inset-inline-end: 8px; inset-block-start: 8px; display: flex; flex-direction: column; gap: 4px; }
:root:root #storeRoot .pos-order button { width: 34px; height: 34px; border-radius: 11px; background: rgba(7, 13, 26, .86); border: 1px solid var(--pos-line-2); color: var(--t-yellow); font-size: 13px; display: flex; align-items: center; justify-content: center; }
:root:root #storeRoot .pos-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 10px 8px; min-width: 0; flex: 1 1 auto; }
:root:root #storeRoot .pos-name { margin: 0; font-size: 13.5px; font-weight: 900; line-height: 1.35; color: var(--pos-text); overflow-wrap: anywhere; word-break: normal; }
:root:root #storeRoot .pos-meta { font-size: 11px; font-weight: 700; color: var(--pos-mute); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:root #storeRoot .sp-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 11px; line-height: 1.3; color: #cbd5e1; }
:root:root #storeRoot .sp-spec { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
:root:root #storeRoot .sp-spec i { font-size: 11px; }
:root:root #storeRoot .sp-sto { color: #7dd3fc; } :root:root #storeRoot .sp-bat { color: #86efac; } :root:root #storeRoot .sp-col { color: #fcd34d; }
:root:root #storeRoot .sp-imei { display: flex; align-items: center; gap: 5px; font: 600 10.5px/1.3 ui-monospace, Menlo, monospace; color: var(--pos-mute); white-space: nowrap; overflow: hidden; }
:root:root #storeRoot .sp-imei i { font-size: 10px; color: var(--pos-faint); }
:root:root #storeRoot .sp-money { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
:root:root #storeRoot .sp-cost { font-size: 10px; color: var(--pos-mute); white-space: nowrap; }
:root:root #storeRoot .sp-cost.is-masked { display: inline-flex; align-items: center; gap: 4px; color: var(--pos-faint); }
:root:root #storeRoot .pos-chips { display: flex; flex-wrap: wrap; gap: 4px; }
:root:root #storeRoot .pos-tag { padding: 1px 8px; border-radius: 99px; background: var(--pos-surface-2); border: 1px solid var(--pos-line); color: var(--pos-mute); font-size: 10px; font-weight: 800; line-height: 1.6; }
:root:root #storeRoot .pos-tag.is-warn { color: var(--t-amber); } :root:root #storeRoot .pos-tag.is-bad { color: var(--t-rose); } :root:root #storeRoot .pos-tag.is-ok { color: var(--t-emerald); }
:root:root #storeRoot .sp-feat, :root:root #storeRoot .sp-reserved { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--pos-surface-2); border: 1px solid var(--pos-line); font-size: 10px; font-weight: 800; line-height: 1.6; }
:root:root #storeRoot .sp-feat { color: var(--t-yellow); } :root:root #storeRoot .sp-reserved { color: var(--t-rose); }
:root:root #storeRoot .pos-actions { display: flex; border-top: 1px solid var(--pos-line); }
:root:root #storeRoot .pos-actions > button { flex: 1 1 0; min-width: 0; min-height: 46px; border: 0; border-radius: 0; background: transparent; color: var(--tone, var(--pos-mute)); font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; touch-action: manipulation; }
:root:root #storeRoot .pos-actions > button + button { border-inline-start: 1px solid var(--pos-line); }
:root:root #storeRoot .pos-actions > button:active { background: var(--pos-surface-2); }
:root:root #storeRoot .pos-actions > button:disabled { opacity: .45; }
:root:root #storeRoot .sp-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root:root #storeRoot .sp-ib { display: inline-flex; align-items: center; justify-content: center; }
:root:root #storeRoot .sp-ib i { font-size: 15px; }
:root:root #storeRoot .pos-card [data-store-act="delete"], :root:root #storeRoot .pos-card [data-acc-act="delete"] { --tone: var(--t-rose); }
:root:root #storeRoot .pos-card [data-store-act="sold"], :root:root #storeRoot .pos-card [data-acc-act="sell"] { --tone: var(--t-emerald); }
:root:root #storeRoot .pos-card [data-store-act="edit"], :root:root #storeRoot .pos-card [data-acc-act="edit"] { --tone: #e2e8f0; }
:root:root #storeRoot .pos-card [data-store-act="label"], :root:root #storeRoot .pos-card [data-acc-act="label"], :root:root #storeRoot .pos-card [data-acc-act="reserve"], :root:root #storeRoot .pos-card [data-store-act="invoice"], :root:root #storeRoot .pos-card [data-store-act="toggle"] { --tone: var(--t-sky); }

/* ---- lists, empty states, generic surfaces of the modules mounted inside the store ------------------------------------------------------------------ */
:root:root #storeRoot .pos-empty { padding: 28px 16px; border-radius: 18px; background: var(--pos-surface); border: 1px dashed var(--pos-line-2); text-align: center; color: var(--pos-mute); font-size: 12.5px; font-weight: 800; line-height: 1.7; }
:root:root #storeRoot .pos-sec { display: flex; flex-direction: column; gap: 10px; }
:root:root #storeRoot [class*="bg-slate-900/70"], :root:root #storeRoot [class*="bg-slate-900/80"], :root:root #storeRoot [class*="bg-black/30"] { background: var(--pos-surface) !important; border-color: var(--pos-line) !important; box-shadow: none !important; }
:root:root #storeRoot .rounded-2xl[class*="border-"], :root:root #storeRoot .rounded-xl[class*="border-"] { border-color: var(--pos-line); }
:root:root #storeRoot [data-sales-log-list] > div, :root:root #storeRoot [data-debts] [data-debt-row], :root:root #storeRoot [data-debts] article { border-radius: 16px; background: var(--pos-surface) !important; border: 1px solid var(--pos-line) !important; box-shadow: none !important; }
:root:root #storeRoot input:not([type="checkbox"]):not([type="radio"]), :root:root #storeRoot select, :root:root #storeRoot textarea { background: var(--pos-surface); border: 1.5px solid var(--pos-line-2); border-radius: 14px; color: var(--pos-text); }
:root:root #storeRoot input:focus, :root:root #storeRoot select:focus, :root:root #storeRoot textarea:focus { border-color: var(--t-sky); outline: none; }
:root:root #storeRoot [data-sales-log-tabs] button, :root:root #storeRoot [data-debt-tab], :root:root #storeRoot [data-acc-tab], :root:root #storeRoot [data-res-tab] { min-height: 42px; border-radius: 14px; background: var(--pos-surface); border: 1px solid var(--pos-line); color: var(--pos-mute); font-weight: 900; }
:root:root #storeRoot [data-sales-log-tabs] button[aria-selected="true"], :root:root #storeRoot [data-debt-tab][aria-selected="true"], :root:root #storeRoot [data-acc-tab][aria-selected="true"], :root:root #storeRoot [data-res-tab][aria-pressed="true"] { background: var(--pos-surface-2); border-color: var(--t-sky); color: var(--pos-text); }
:root:root #storeRoot .sp-res { border-radius: 16px; padding: 12px !important; border: 1px solid var(--pos-line) !important; background: var(--pos-surface) !important; }
:root:root #storeRoot .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .6rem; }
:root:root #storeRoot h2 { font-size: 17px; }
:root:root #storeRoot .pos-note { padding: 10px 12px; border-radius: 14px; background: var(--pos-surface); border: 1px solid var(--pos-line); color: var(--t-amber); font-size: 11.5px; font-weight: 800; line-height: 1.6; }
:root:root #storeRoot .dpp-chipbar { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 0; }
:root:root #storeRoot .dpp-chipbar > * { flex: 1 1 auto; }

:root:root #storeRoot .pos-actions.is-wrap { flex-wrap: wrap; }
:root:root #storeRoot .pos-actions > .is-wide { flex: 1 1 100%; border-top: 1px solid var(--pos-line); border-inline-start: 0; }
:root:root #storeRoot .pos-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--pos-surface); border: 1px solid var(--pos-line); }
:root:root #storeRoot .pos-switch button { min-height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--pos-mute); font-size: 12.5px; font-weight: 900; }
:root:root #storeRoot .pos-switch button[aria-pressed="true"] { background: var(--pos-surface-2); color: var(--pos-text); box-shadow: inset 0 0 0 1px var(--pos-line-2); }
/* the modules mounted inside the store keep their markup; their loud gradient / solid buttons take the quiet POS skin */
:root:root #storeRoot button[class*="bg-gradient-to"], :root:root #storeRoot button[class*="bg-cyan-500"], :root:root #storeRoot button[class*="bg-sky-500 "], :root:root #storeRoot button.act-confirm { background: var(--pos-surface-2) !important; color: var(--pos-text) !important; border: 1px solid var(--pos-line-2) !important; box-shadow: none !important; }
:root:root #storeRoot button[class*="bg-cyan-500 text-slate-950"] { background: rgba(56, 189, 248, .12) !important; border-color: rgba(56, 189, 248, .55) !important; color: #e0f2fe !important; }
:root:root #storeRoot [class*="border-amber-"], :root:root #storeRoot [class*="border-emerald-"], :root:root #storeRoot [class*="border-rose-"], :root:root #storeRoot [class*="border-yellow-"], :root:root #storeRoot [class*="border-cyan-"], :root:root #storeRoot [class*="border-sky-"] { border-color: var(--pos-line) !important; }
:root:root #storeRoot .sp-chips { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 0; }
:root:root #storeRoot .sp-chips > * { flex: 1 1 auto; }

/* ---- v3.20.13: the records hub + the management drawer share the POS hairline (no coloured frames, no glow) ------------------------------------------ */
:root:root #recordsHubModal .rh-list { display: flex; flex-direction: column; gap: 8px; }
:root:root #recordsHubModal .rh-row { width: 100%; min-height: 62px; padding: 10px 12px; display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: start; border-radius: 16px; background: var(--pos-surface, #0f1a2e); border: 1px solid var(--pos-line, #1e2b45); color: #f1f5f9; box-shadow: none; cursor: pointer; touch-action: manipulation; }
:root:root #recordsHubModal .rh-row:active { background: var(--pos-surface-2, #14213a); transform: scale(.985); }
:root:root #recordsHubModal .rh-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(148, 163, 184, .08); border: 1px solid var(--pos-line, #1e2b45); }
:root:root #recordsHubModal .rh-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root:root #recordsHubModal .rh-title { font-size: 12.5px; font-weight: 900; line-height: 1.45; color: #f1f5f9; overflow-wrap: anywhere; }
:root:root #recordsHubModal .rh-sub { font-size: 10.5px; font-weight: 700; line-height: 1.4; color: #94a3b8; overflow-wrap: anywhere; }
:root:root #recordsHubModal .rh-end { flex: none; display: inline-flex; align-items: center; gap: 8px; }
:root:root #recordsHubModal .rh-count { min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 900; font-family: ui-monospace, monospace; color: #e2e8f0; background: rgba(148, 163, 184, .1); border: 1px solid var(--pos-line, #1e2b45); }
:root:root #recordsHubModal .rh-count.hidden { display: none; }
:root:root #recordsHubModal .rh-chev { font-size: 12px; color: #64748b; }
:root:root #recordsHubModal > div { border-color: var(--pos-line, #1e2b45); box-shadow: none; }

:root:root #managementDrawerModal .sec-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
:root:root #managementDrawerModal .sec-btn { width: 100%; justify-content: flex-start; min-height: 54px; border: 1px solid var(--pos-line, #1e2b45); box-shadow: none; }
:root:root #managementDrawerModal .sec-btn > .text-right { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; }
:root:root #managementDrawerModal .sec-btn.is-danger { border-color: var(--pos-line, #1e2b45); }
:root:root #managementDrawerModal [class*="border-amber-"], :root:root #managementDrawerModal [class*="border-emerald-"], :root:root #managementDrawerModal [class*="border-cyan-"], :root:root #managementDrawerModal [class*="border-sky-"], :root:root #managementDrawerModal [class*="border-blue-"], :root:root #managementDrawerModal [class*="border-rose-"], :root:root #managementDrawerModal [class*="border-red-"], :root:root #managementDrawerModal [class*="border-yellow-"], :root:root #managementDrawerModal [class*="border-green-"], :root:root #managementDrawerModal [class*="border-white/"] { border-color: var(--pos-line, #1e2b45); box-shadow: none; }
:root:root #managementDrawerModal button:hover, :root:root #managementDrawerModal a:hover { box-shadow: none; }
:root:root #managementDrawerModal .drawer-sec { background: none; box-shadow: none; border-inline-start: 0; border-radius: 0; border-bottom: 1px solid var(--pos-line, #1e2b45); padding: .45rem .15rem; }
:root:root #managementDrawerModal .drawer-sec i { filter: none; }
:root:root #managementDrawerModal .drawer-sec > div:first-child { background-color: rgba(var(--tone), .10); box-shadow: none; }
@media (hover: hover) { :root:root #managementDrawerModal .drawer-sec + .grid > button:hover, :root:root #managementDrawerModal .drawer-sec ~ .grid > button:hover { border-color: var(--pos-line, #1e2b45); } }

/* ---- v3.20.14: the five action buttons of a phone / accessory card: three per row, each its own 44 px touch target with a gap (no accidental taps) ---- */
:root:root #storeRoot .sp-phone .pos-actions, :root:root #storeRoot .sp-acc .pos-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--pos-line); }
:root:root #storeRoot .sp-phone .pos-actions > button, :root:root #storeRoot .sp-acc .pos-actions > button { min-height: 44px; border: 1px solid var(--pos-line); border-radius: 12px; background: var(--pos-surface-2); }
:root:root #storeRoot .sp-phone .pos-actions > button + button, :root:root #storeRoot .sp-acc .pos-actions > button + button { border-inline-start: 1px solid var(--pos-line); }
:root:root #storeRoot .pos-quick.pos-quick-full { grid-template-columns: 1fr; }
:root:root #storeRoot .pos-quick-full > .pos-btn { width: 100%; justify-content: center; min-height: 46px; }