/* ============================================================
   COMPONENTS — cards, tables, filters, charts, page pieces
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden;
}
.card-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--border-soft);
}
.card-head h2{ font-size:.96rem; font-family:var(--font-display); }
.head-actions{ margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; }
.card-body{ padding:16px; }
.card-foot{
  padding:11px 16px; border-top:1px solid var(--border-soft);
  background:var(--surface-2); font-size:.8rem;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* ---------- KPI cards ---------- */
.cards{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.cards-4{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:13px; }

.kpi{ padding:16px; display:flex; flex-direction:column; gap:2px; position:relative; }
.kpi-ico{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px;
  background:var(--primary-tint); color:var(--primary); display:grid; place-items:center;
}
.kpi-label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-text); font-weight:600; }
.kpi-value{ font-family:var(--font-display); font-size:1.65rem; line-height:1.1; margin-top:3px; }
.kpi small{ font-size:.74rem; color:var(--muted-text); }
.kpi-warn .kpi-ico{ background:var(--warn-tint); color:var(--warn); }

.mini{ padding:13px 15px; display:flex; flex-direction:column; gap:2px; }
.mini span{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-text); font-weight:600; }
.mini b{ font-family:var(--font-display); font-size:1.28rem; }
.mini-ok b{ color:var(--ok); } .mini-warn b{ color:var(--warn); } .mini-bad b{ color:var(--bad); }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media(max-width:960px){ .split{ grid-template-columns:1fr; } }

/* ---------- filters ---------- */
.filters{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border-soft); background:var(--surface-2);
}
.filters .inp{ width:auto; min-width:140px; }
.search{ position:relative; flex:1; min-width:200px; }
.search i{ position:absolute; left:12px; top:50%; translate:0 -50%; color:var(--muted-text); }
.search input{
  width:100%; padding:9px 12px 9px 34px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); background:var(--surface); min-height:40px;
}
.search input:focus{ outline:none; border-color:var(--primary); }

.seg{ display:inline-flex; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden; }
.seg button{
  padding:8px 13px; font-size:.79rem; font-weight:600; color:var(--muted-text);
  border-right:1px solid var(--border); transition:all var(--t-fast);
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:var(--surface-2); color:var(--text); }
.seg button.on{ background:var(--primary); color:#fff; }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:600px; }
.tbl th{
  text-align:left; padding:10px 14px; font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted-text); font-weight:700;
  background:var(--surface-2); white-space:nowrap; border-bottom:1px solid var(--border);
}
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl tr.click{ cursor:pointer; }
.tbl small{ display:block; font-size:.73rem; color:var(--muted-text); }
.tbl td.wrap{ white-space:normal; min-width:220px; }
.tbl .thumb{ width:52px; }
.thumb img{ width:38px; height:38px; border-radius:8px; object-fit:cover; background:var(--surface-2); }
.thumb-fallback{
  width:38px; height:38px; border-radius:8px; background:var(--surface-2);
  display:grid; place-items:center; color:var(--muted-text);
}

/* ---------- charts ---------- */
.chart-box{ position:relative; height:290px; }
.chart-box.sm{ height:230px; }

/* ---------- empty ---------- */
.empty{ text-align:center; padding:36px 18px; color:var(--muted-text); }
.empty i{ font-size:1.9rem; opacity:.5; display:block; margin-bottom:9px; }
.empty b{ display:block; color:var(--text); font-size:.95rem; margin-bottom:4px; }
.empty p{ font-size:.83rem; max-width:38ch; margin:0 auto 12px; }

/* ---------- notice ---------- */
.notice{
  display:flex; gap:12px; padding:13px 16px; border-radius:var(--r);
  background:var(--info-tint); border:1px solid #CBDAE8; font-size:.84rem; color:var(--info);
}
.notice i{ font-size:1.05rem; margin-top:1px; }

/* ---------- order detail ---------- */
.ord-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .ord-grid{ grid-template-columns:1fr; } }
.ord-grid h4{
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-text); margin-bottom:5px;
}
.ord-grid p{ font-size:.88rem; line-height:1.6; }

.flow{ display:flex; gap:4px; margin-top:16px; }
.flow-step{ flex:1; text-align:center; }
.flow-step span{
  display:block; height:4px; border-radius:2px; background:var(--border); margin-bottom:5px;
}
.flow-step.done span{ background:var(--primary); }
.flow-step small{ font-size:.64rem; color:var(--muted-text); }
.flow-step.done small{ color:var(--primary); font-weight:600; }
@media(max-width:560px){ .flow-step small{ display:none; } }

.totals{ margin-top:14px; margin-left:auto; width:min(280px,100%); }
.totals div{ display:flex; justify-content:space-between; padding:5px 0; font-size:.86rem; }
.totals .grand{
  border-top:1px solid var(--border); margin-top:6px; padding-top:9px;
  font-family:var(--font-display); font-size:1.1rem; color:var(--primary);
}

/* ---------- reviews ---------- */
.rv-list{ padding:16px; display:grid; gap:11px; }
.rv{ border:1px solid var(--border-soft); border-radius:var(--r); padding:14px; background:var(--surface); }
.rv-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px; }
.rv-top b{ font-size:.88rem; }
.rv-top small{ display:block; font-size:.74rem; color:var(--muted-text); }
.rv-stars{ color:var(--accent); letter-spacing:.08em; font-size:.9rem; margin-left:auto; }
.rv-stars span{ color:var(--border); }
.rv p{ font-size:.86rem; color:var(--text-2); }
.rv-foot{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.rv-foot .nowrap{ margin-left:auto; display:flex; gap:6px; }