/* ==========================================================================
   Store — extra styles: statistics, categories, delivery, promos and the
   responsive rules for phone / tablet / desktop.
   ========================================================================== */

/* ---------------- Statistics, categories & delivery panels ---------------- */
.st-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin:6px 0 18px}
.st-kpis .stat-card small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;line-height:1.35}
.st-kpis .stat-card.tone-revenue{background:linear-gradient(135deg,#f6ece4,#fff)}

.st-bars{margin:6px 0 20px}
.st-bars-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.st-bars-inner{display:flex;align-items:flex-end;gap:8px;min-height:190px;min-width:100%;padding:8px 2px 0}
.st-bar-wrap{flex:1 0 42px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:180px;gap:4px}
.st-bar{width:100%;max-width:46px;background:linear-gradient(180deg,#8a5c33,#4b2608);border-radius:8px 8px 3px 3px;min-height:3px;transition:height .25s ease}
.st-bar-value{font-size:10.5px;color:var(--muted);white-space:nowrap}
.st-bar-label{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.25;max-width:64px}

.st-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.st-line{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.st-line:last-child{border-bottom:0}
.st-line-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-line-value{color:var(--muted);white-space:nowrap;font-size:12.5px}
.st-rank{width:22px;height:22px;border-radius:50%;background:#f4ece6;color:#4b2608;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:0 0 auto}

.st-inline-form{margin-top:18px;padding:16px;border:1px dashed var(--line);border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-inline-form .span-2{grid-column:1/-1}
.st-inline-form .modal-actions{grid-column:1/-1;justify-content:flex-end}

.st-mini-totals{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.st-mini-totals span{display:flex;justify-content:space-between;gap:10px}
.st-mini-totals .st-mini-total{font-size:15px}
.promo-tag{background:#e8f6ee;color:#0f7a4a;border-radius:99px;padding:1px 7px;font-size:11px;white-space:nowrap}

/* --------------------------------- Tablet -------------------------------- */
@media (max-width: 1000px) {
  .st-two{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap;gap:10px}
  .search-bar{order:3;width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .detail-layout{grid-template-columns:1fr}
  .modal-card{width:min(94vw,720px);max-height:88vh;overflow-y:auto}
  .admin-shell{display:block}
  .side-nav{display:flex;flex-wrap:wrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;position:static}
  .side-link{flex:0 0 auto}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:620px}
  .st-inline-form{grid-template-columns:1fr}
}

/* ---------------------------------- Phone -------------------------------- */
@media (max-width: 760px) {
  body{-webkit-text-size-adjust:100%}
  .page-wrap{padding:16px 12px 40px}
  .header-actions .head-btn .label{display:none}
  .head-btn{padding:9px 11px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .st-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .st-bar-wrap{height:150px}
  .st-bars-inner{min-height:160px}
  .cat-nav-inner{gap:6px}
  .cat-tile{padding:12px}
  .drawer{width:100%;max-width:100%}
  .modal-card{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92vh}
  .modal-overlay{align-items:flex-end}
  .btn{padding:12px 16px}
  .btn.small{padding:9px 12px}
  .row-actions{flex-wrap:wrap;gap:6px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tabs .tab{flex:0 0 auto}
  .field input,.field select,.field textarea{font-size:16px} /* stops iOS zoom-on-focus */
  .st-inline-form{padding:12px}
  table{font-size:13px}
}

@media (max-width: 420px) {
  .grid{grid-template-columns:1fr 1fr}
  .st-kpis{grid-template-columns:1fr}
}

/* --------------------------- Touch friendliness -------------------------- */
@media (hover: none) {
  .btn,.side-link,.tab,.chip,.cl-remove,.icon-btn{min-height:42px}
  .cl-remove{min-width:42px}
}