/* ==========================================================================
   DashView — Executive: Shops & stock movement  (pairs with js/exec-retail.js)
   Uses the existing tokens so it follows the dark / light theme.
   ========================================================================== */
.xr { margin: 18px 0 10px; display: flex; flex-direction: column; gap: 14px; }
.xr-head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.xr-head p { margin: 3px 0 0; font-size: 0.8125rem; color: var(--ink-50); }

/* KPI strip — four equal cards */
.xr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.xr-kpis .olx-kpi { min-width: 0; }
.xr-kpis .olx-k-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-kpis #xrK2 .olx-k-val { font-size: 1.4rem; line-height: 1.9rem; }
.xr-kpis .xr-bad .olx-k-val { color: var(--danger); }
.xr-kpis .xr-bad::before { background: linear-gradient(90deg, var(--danger), transparent); }

/* Two equal columns, then full-width panels */
.xr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xr-panel { min-width: 0; margin: 0; }
.xr-cv { position: relative; height: 290px; }
.xr-cv canvas { max-width: 100%; }
.xr-muted { color: var(--ink-30); }
.xr-empty { padding: 28px 12px; text-align: center; font-size: 0.8125rem; color: var(--ink-50); }
.xr-empty.is-error { color: var(--danger); }
.xr-foot { margin: 10px 2px 0; font-size: 0.75rem; color: var(--ink-50); line-height: 1.5; }
.xr-scroll { overflow-x: auto; }

/* Tables */
.xr-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.xr-table th { text-align: left; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); padding: 8px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.xr-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; white-space: nowrap; }
.xr-table tbody tr:last-child td { border-bottom: 0; }
.xr-table tbody tr:hover td { background: var(--signal-10); }
.xr-table .xr-num, .xr-table th.xr-num { text-align: right; font-variant-numeric: tabular-nums; }
.xr-rank { width: 34px; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.xr-name { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.xr-share { min-width: 190px; }
.xr-share .xr-bar { display: inline-block; vertical-align: middle; width: 110px; height: 7px; border-radius: 99px; background: var(--paper-soft); border: 1px solid var(--line); overflow: hidden; margin-right: 10px; }
.xr-share .xr-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--signal), var(--signal-bright)); }
.xr-share b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Result badges & status pills */
.xr-badge, .xr-pill, .xr-dir { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; line-height: 1.3; }
.xr-b-top  { background: var(--signal-20); color: var(--signal-bright); }
.xr-b-up   { background: color-mix(in srgb,var(--ios-green,#30d158) 16%,transparent); color: var(--ios-green,#30d158); }
.xr-b-down { background: color-mix(in srgb,var(--ios-red,#ff453a) 16%,transparent); color: var(--ios-red,#ff453a); }
.xr-b-flat, .xr-b-new { background: var(--paper-soft); color: var(--ink-70); border: 1px solid var(--line); }
.xr-dir { background: var(--paper-soft); color: var(--ink-70); border: 1px solid var(--line); font-weight: 500; }
.xr-p-draft  { background: rgba(140, 140, 140, .18); color: var(--ink-70); }
.xr-p-wait   { background: rgba(232, 163, 61, .18);  color: #d98f27; }
.xr-p-ready  { background: rgba(91, 143, 174, .20);  color: #5b8fae; }
.xr-p-done   { background: color-mix(in srgb,var(--ios-green,#30d158) 18%,transparent);  color: var(--ios-green,#30d158); }
.xr-p-cancel { background: color-mix(in srgb,var(--ios-red,#ff453a) 16%,transparent);  color: var(--ios-red,#ff453a); }

/* Transfer matrix (grid rows keep every column perfectly aligned) */
.xr-tr { min-width: 760px; }
.xr-tr-row { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(150px, 1.6fr) repeat(5, 74px) 60px 64px; align-items: center; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.xr-tr-row:last-child { border-bottom: 0; }
.xr-tr-row.is-minor { opacity: .72; }
.xr-tr-head { padding-top: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }
.xr-tr-name b { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.xr-c { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--ink); }
.xr-tr-head .xr-c { font-size: 10px; color: var(--ink-50); }
.xr-c.is-zero { color: var(--ink-30); }
.xr-c.is-late { color: var(--danger); font-weight: 700; }
.xr-c.xr-tot { font-weight: 700; }
.xr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.xr-stack { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--paper-soft); border: 1px solid var(--line); gap: 1px; }
.xr-stack i { display: block; min-width: 3px; }
.xr-s-draft  { background: #8c8c8c; } .xr-s-wait { background: #e8a33d; } .xr-s-ready { background: #5b8fae; }
.xr-s-done   { background: var(--ios-green,#30d158); } .xr-s-cancel { background: var(--ios-red,#ff453a); }

/* Site setup */
.xr-setup { margin-top: 12px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.xr-setup summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--ink-70); }
.xr-setup p { margin: 8px 0; font-size: 0.75rem; color: var(--ink-50); }
.xr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 0.75rem; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.xr-chip b { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; }
.xr-chip.is-wh b { background: var(--signal-20); color: var(--signal-bright); }
.xr-chip.is-shop b { background: rgba(91, 143, 174, .2); color: #5b8fae; }
.xr-chip:hover { background: var(--signal-10); border-color: var(--signal); }
.xr-chip:focus-visible, .xr-setup summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Direction tabs above the latest-transfers table */
.xr-tabs { margin: 0 0 12px; max-width: 100%; overflow-x: auto; }

/* Responsive */
@media (max-width: 1100px) { .xr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .xr-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px)  { .xr-kpis { grid-template-columns: minmax(0, 1fr); } .xr-cv { height: 250px; } }

/* Print: keep the section together */
body.olx-print-exec .xr-panel, body.olx-print-exec .xr-kpis { break-inside: avoid; }
body.olx-print-exec .xr-setup, body.olx-print-exec .xr-tabs { display: none; }