/* UI2 Sales & growth (U5). Scoped to html.ui2 (R6). Layout/shell come from U1's report-shell.css; this file styles only the
   pieces report-sales.js draws itself: detail line, day list, "why" grid, filters, and the Table-view matrix. */
html.ui2{--sales-ink:#1f2328;--sales-muted:#6b7280;--sales-line:#e5e7eb;--sales-neg:#b42318;--sales-pos:#3f6212;--sales-dim:.32;}
html.ui2 .sales-detail{margin:8px 0 0;min-height:1.4em;font-size:14px;font-weight:600;color:var(--sales-ink);font-variant-numeric:tabular-nums;}
html.ui2 .sales-note{margin:6px 0 0;font-size:12px;color:var(--sales-muted);}
html.ui2 .sales-loading,html.ui2 .sales-error{padding:16px;font-size:14px;color:var(--sales-muted);}
html.ui2 .sales-error{color:var(--sales-neg);}
html.ui2 .is-neg{color:var(--sales-neg);}
html.ui2 .is-pos{color:var(--sales-pos);}

/* Day list (store page) */
html.ui2 .sales-daylist{list-style:none;margin:0;padding:0;}
html.ui2 .sales-dayrow{display:grid;grid-template-columns:5.5em 1fr auto;gap:8px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--sales-line);color:var(--sales-ink);text-decoration:none;font-variant-numeric:tabular-nums;}
html.ui2 .sales-dayrow:hover,html.ui2 .sales-dayrow:focus-visible{background:#f6f7f8;}
html.ui2 .sd-of{color:var(--sales-muted);font-size:13px;}
html.ui2 .sd-chip{font-weight:600;font-size:13px;}

/* Why did sales move? */
html.ui2 .sales-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--sales-line);border-radius:12px;overflow:hidden;}
html.ui2 .sales-why-cell{padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;}
html.ui2 .sales-why-cell+.sales-why-cell{border-left:1px solid var(--sales-line);}
html.ui2 .sw-label{font-size:12px;color:var(--sales-muted);}
html.ui2 .sw-value{font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
html.ui2 .sales-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;}
html.ui2 .sales-link{color:var(--sales-ink);font-weight:600;font-size:14px;}

/* Filters + day-page interval switch */
html.ui2 .sales-filters{display:flex;flex-wrap:wrap;gap:12px;}
html.ui2 .sf-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sales-muted);}
html.ui2 .sf-field select,html.ui2 .sf-field input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--sales-line);border-radius:8px;background:#fff;color:var(--sales-ink);}
html.ui2 .sales-seg{display:inline-flex;border:1px solid var(--sales-line);border-radius:999px;padding:2px;margin-bottom:8px;}
html.ui2 .sales-seg button{font:inherit;font-size:13px;border:0;background:none;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--sales-ink);}
html.ui2 .sales-seg button[aria-pressed="true"]{background:var(--sales-ink);color:#fff;}

/* Table view: store x day matrix (D20-2; feedback 4/5/6) */
html.ui2 .sales-matrix-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
html.ui2 .sales-matrix{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;font-variant-numeric:tabular-nums;}
html.ui2 .sales-matrix th,html.ui2 .sales-matrix td{padding:7px 10px;border-bottom:1px solid var(--sales-line);white-space:nowrap;}
html.ui2 .sales-matrix thead th{font-size:12px;font-weight:600;color:var(--sales-muted);background:#fff;}
html.ui2 .sales-matrix .sm-name{text-align:left;position:sticky;left:0;background:#fff;z-index:1;font-weight:600;}
html.ui2 .sales-matrix .sm-num{text-align:right;}
html.ui2 .sales-matrix .sm-total{font-weight:700;border-left:1px solid var(--sales-line);}
html.ui2 .sales-matrix td.has-heat{background:var(--sm-heat);color:var(--sales-ink);}
html.ui2 .sales-matrix .sm-store .sm-name{padding-left:28px;font-weight:500;}
html.ui2 .sales-matrix .sm-fleet th,html.ui2 .sales-matrix .sm-fleet td{border-bottom:2px solid var(--sales-line);}
html.ui2 .sales-matrix tr.is-dim{opacity:var(--sales-dim);filter:grayscale(1);}
html.ui2 .sm-toggle{font:inherit;font-weight:700;background:none;border:0;padding:0;cursor:pointer;color:var(--sales-ink);}
html.ui2 .sm-sub{font-weight:400;font-size:12px;color:var(--sales-muted);}
html.ui2 .sm-link{color:var(--sales-ink);}
@media (max-width:640px){
 html.ui2 .sales-why-cell{padding:8px;}
 html.ui2 .sw-value{font-size:16px;}
 html.ui2 .sales-dayrow{grid-template-columns:5em 1fr auto;}
}

/* Header pieces the page adds to the shell: report tiles, period toggle + Filters row, by-region sort (items 3/9: in flow, no overlap) */
html.ui2 .sales-tiles{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px 0 0;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
html.ui2 .sales-tile{flex:0 0 auto;min-width:112px;min-height:58px;justify-content:center;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:8px 12px;border:1px solid var(--sales-line);border-radius:12px;background:#fff;color:var(--sales-ink);text-decoration:none;}
html.ui2 .sales-tile.is-active{border:2px solid var(--sales-ink);background:#fff;}
html.ui2 .st-label{font-size:12px;color:var(--sales-muted);white-space:nowrap;}
html.ui2 .sales-tile.is-active .st-label{color:var(--sales-ink);font-weight:600;}
html.ui2 .st-value{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;}
html.ui2 .sales-controls{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:10px;}
html.ui2 .sales-controls .u2r-grains{flex:1 1 auto;margin:0;}
html.ui2 .u2r-byregion .u2r-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
@media (max-width:640px){
 html.ui2 .sales-controls .u2r-grains{flex-basis:100%;}
}

/* POL-SALES (2026-10-21 polish): period bar, tiles, sort, skeleton, pills, tables, reduced motion, focus. */
html.ui2 .sales-tile.is-link{min-width:0;flex-direction:row;align-items:center;gap:8px;background:#fafafa;}
html.ui2 .sales-tile.is-link .st-label{color:var(--sales-ink);}
html.ui2 .st-go{font-size:18px;line-height:1;color:var(--sales-muted);}
html.ui2 .sales-tiles.is-phone{order:1;margin:0;}
html.ui2 .sales-controls{align-items:center;}
html.ui2 .sales-period{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
html.ui2 .sales-stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--sales-line);border-radius:12px;background:#fff;padding:2px;}
html.ui2 .ss-btn{width:40px;height:34px;border:0;border-radius:9px;background:none;font:inherit;font-size:20px;line-height:1;color:var(--sales-ink);cursor:pointer;}
html.ui2 .ss-btn:disabled{opacity:.35;cursor:default;}
html.ui2 .ss-label{min-width:104px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
html.ui2 .sales-sort{appearance:none;-webkit-appearance:none;width:auto;min-height:34px;padding:5px 28px 5px 12px;border-radius:999px;margin-left:auto;cursor:pointer;
 background:linear-gradient(45deg,transparent 50%,#555 50%) calc(100% - 17px) 14px/5px 5px no-repeat,linear-gradient(135deg,#555 50%,transparent 50%) calc(100% - 12px) 14px/5px 5px no-repeat,#fff;}
html.ui2 .sales-pill,html.ui2 .sales-links .sales-pill{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--u2r-line-2,#d4d4d4);border-radius:999px;background:#fff;color:var(--sales-ink);text-decoration:none;font-weight:650;font-size:14px;}
html.ui2 .sales-pill:hover{background:#f4f4f5;}
/* Loading stage at roughly final heights (no jump when the data lands). Static blocks: no new animation. */
html.ui2 .sales-skel{display:flex;flex-direction:column;gap:12px;width:100%;max-width:1440px;margin:0 auto;padding:12px 16px 24px;}
html.ui2 .sk-block{border-radius:14px;background:#f1f2f3;}
html.ui2 .sk-head{height:150px;} html.ui2 .sk-sum{height:72px;} html.ui2 .sk-chart{height:360px;} html.ui2 .sk-list{height:200px;}
@media (min-width:1100px){html.ui2 .sales-skel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);}html.ui2 .sk-head{grid-column:1/-1;height:130px;}html.ui2 .sk-chart{grid-column:1;grid-row:span 2;height:420px;}html.ui2 .sk-sum,html.ui2 .sk-list{grid-column:2;}}
@media (max-width:640px){html.ui2 .sales-skel{padding:8px 4px 20px;}html.ui2 .sk-head{height:120px;}}
/* Tables */
html.ui2 .sm-caret{display:inline-block;width:1.2em;font-size:18px;line-height:1;vertical-align:-2px;}
html.ui2 .sm-toggle{min-height:28px;text-align:left;}
html.ui2 .sales-matrix thead th.sm-num,html.ui2 .u2r-chartbody .sales-matrix thead th.sm-num{white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:11px;padding-left:2px;padding-right:2px;}
@media (max-width:600px){html.ui2 .sm-toggle,html.ui2 .sales-seg button{min-height:40px;}}
/* Keyboard focus + reduced motion */
html.ui2 .sales-tile:focus-visible,html.ui2 .sales-dayrow:focus-visible,html.ui2 .sales-seg button:focus-visible,html.ui2 .sales-sort:focus-visible,html.ui2 .ss-btn:focus-visible,html.ui2 .sales-pill:focus-visible,html.ui2 .sm-toggle:focus-visible,html.ui2 .sales-matrix a:focus-visible,html.ui2 .sf-field select:focus-visible,html.ui2 .sf-field input:focus-visible{outline:2px solid #004AB5;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){html.ui2 .sales-tile,html.ui2 .sales-dayrow,html.ui2 .ss-btn,html.ui2 .sales-pill,html.ui2 .sales-matrix *{transition:none!important;animation:none!important;}}
html.ui2 .sales-scoperow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
html.ui2 .sales-scoperow .u2r-scope{flex:1 1 0;min-width:0}
html.ui2 .sales-scoperow .sales-period{flex:0 0 auto}
@media (max-width:640px){html.ui2 .ss-label{min-width:0;padding:0 2px}html.ui2 .ss-btn{width:34px}html.ui2 .sk-head{height:130px;}html.ui2 .sales-tiles.is-phone{margin-top:0;}}