/* admin/css/dashboard.css — Utama (#/): barisan kerja. Awalan kelas: .dash-
   Telefon dahulu (390 px). Sasaran sentuh ≥ 44 px; kontras ≥ 4.5:1 (token base.css); gerakan dihormati (prefers-reduced-motion). */

.dash,.dash-body{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.dash-body[hidden],.dash-skel[hidden]{display:none}
.dash-sec{min-width:0}
.dash-sec .sechead{min-height:2.3rem;margin-bottom:.65rem}
.dash-sec h2:focus-visible{outline-offset:3px}
.dash-err .alert{margin:0}

/* ---------- kepala ---------- */
.dash-head{margin-bottom:-.5rem;flex-wrap:nowrap;align-items:flex-start}
.dash-head__t{flex:1 1 auto;min-width:0}
.dash-head h1{overflow-wrap:anywhere}
.dash-head .page__sub{margin-top:.2rem}
.dash-date,.dash-asof{display:block}
.dash-sep{display:none}
.dash-asof.is-stale{color:var(--warn);font-weight:600}
.dash-refresh{flex:none;width:2.75rem;min-height:2.75rem;padding:0;margin:-.1rem -.35rem 0 0;color:var(--plum-700)}
.dash-refresh .ico{width:1.25rem;height:1.25rem}

/* ---------- perlu tindakan ---------- */
.dash-att{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.dash-att__li{display:flex;min-width:0}
.dash-att__li.is-row{grid-column:1/-1}
.dash-att--solo .dash-att__li.is-big{grid-column:1/-1}
.dash-att__a{position:relative;display:grid;flex:1 1 auto;min-width:0;color:var(--ink);text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:border-color .15s,background .15s,transform .1s}
.dash-att__a,.dash-refresh,.dash-all{touch-action:manipulation}
.dash-att__a:hover{border-color:var(--plum-500)}
.dash-att__a:active{transform:scale(.99)}
.dash-att__ico{grid-area:ico;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--lilac-100);color:var(--plum-700)}
.dash-att__ico .ico{width:1.15rem;height:1.15rem}
.dash-att__n{grid-area:n;font:600 1rem/1.1 var(--font-head);font-variant-numeric:tabular-nums}
.dash-att__t{grid-area:t;font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.dash-att__s{grid-area:s;font-size:.8125rem;line-height:1.4;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere}
.dash-att__x{grid-area:x;margin-top:.15rem;font-size:.75rem;line-height:1.4;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.dash-att__go{grid-area:go;width:1.1rem;height:1.1rem;opacity:.55;align-self:center}
.dash-att__s[hidden],.dash-att__x[hidden]{display:none}

/* kad besar: baru + sedia hantar */
.dash-att__a.is-big{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ico go" "n n" "t t" "s s" "x x";align-content:start;padding:.85rem .95rem 1rem;min-height:8.2rem}
.is-big .dash-att__go{align-self:start;margin-top:.55rem}
.is-big .dash-att__n{margin-top:.5rem;font-size:2.35rem;line-height:1.05;letter-spacing:-.01em}
.is-big .dash-att__t{margin-top:.1rem;font-size:.9375rem}
.is-big .dash-att__s{margin-top:.1rem}
.dash-att__a.is-big.tone-primary{background:var(--plum-800);border-color:var(--plum-800);color:#fff}
.dash-att__a.is-big.tone-primary:hover{background:var(--plum-700);border-color:var(--plum-700)}
.is-big.tone-primary .dash-att__ico{background:rgba(255,255,255,.16);color:#fff}
.is-big.tone-primary .dash-att__s,.is-big.tone-primary .dash-att__x{color:var(--lilac-200)}
.dash-att__a.is-big.tone-soft{background:var(--lilac-100);border-color:var(--lilac-300);color:var(--plum-900)}
.dash-att__a.is-big.tone-soft:hover{background:var(--lilac-200);border-color:var(--plum-500)}
.is-big.tone-soft .dash-att__ico{background:var(--plum-800);color:#fff}
.dash-att__a.is-big.tone-warn{background:var(--warn-bg);border-color:#e9c27a;color:#4a2b00}
.dash-att__a.is-big.tone-warn:hover{border-color:var(--warn)}
.is-big.tone-warn .dash-att__ico{background:var(--warn);color:#fff}

/* baris: pengecualian lain */
.dash-att__a.is-row{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ico t n go" "ico s n go";align-items:center;column-gap:.8rem;padding:.5rem .85rem .5rem 1rem;min-height:3.9rem;box-shadow:var(--shadow-sm),inset .28rem 0 0 var(--tone,var(--line-strong))}
.is-row .dash-att__n{align-self:center;min-width:2rem;padding:.4rem .65rem;border-radius:999px;font:700 .9rem/1 var(--font);text-align:center;background:var(--grey-bg);color:var(--grey)}
.is-row .dash-att__t{font-size:.9rem}
.dash-att__a.tone-warn{--tone:var(--warn)}
.dash-att__a.tone-bad{--tone:var(--bad)}
.dash-att__a.tone-info{--tone:var(--info)}
.is-row.tone-warn .dash-att__ico,.is-row.tone-warn .dash-att__n{background:var(--warn-bg);color:var(--warn)}
.is-row.tone-bad .dash-att__ico,.is-row.tone-bad .dash-att__n{background:var(--bad-bg);color:var(--bad)}
.is-row.tone-info .dash-att__ico,.is-row.tone-info .dash-att__n{background:var(--info-bg);color:var(--info)}

/* kad berkelip bila kiraan naik */
.dash-att__a.is-bump{animation:dash-bump 2.6s ease-out}
.dash-att__a.is-row.is-bump{animation-name:dash-bump-row}
@keyframes dash-bump{0%{box-shadow:0 0 0 0 rgba(133,103,175,.7),var(--shadow-sm)}60%{box-shadow:0 0 0 .7rem rgba(133,103,175,0),var(--shadow-sm)}100%{box-shadow:0 0 0 0 rgba(133,103,175,0),var(--shadow-sm)}}
@keyframes dash-bump-row{0%{box-shadow:0 0 0 0 rgba(133,103,175,.7),var(--shadow-sm),inset .28rem 0 0 var(--tone,var(--line-strong))}60%{box-shadow:0 0 0 .7rem rgba(133,103,175,0),var(--shadow-sm),inset .28rem 0 0 var(--tone,var(--line-strong))}100%{box-shadow:0 0 0 0 rgba(133,103,175,0),var(--shadow-sm),inset .28rem 0 0 var(--tone,var(--line-strong))}}

/* semuanya beres */
.dash-ok{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border:1px solid #b5dfc7;border-radius:var(--r-lg);background:var(--ok-bg);color:#154d33}
.dash-ok__ico{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ok);color:#fff}
.dash-ok__ico .ico{width:1.3rem;height:1.3rem;stroke-width:2.5}
.dash-ok__t{display:flex;flex-direction:column;min-width:0}
.dash-ok__t b{font-size:1.05rem;color:var(--ok)}
.dash-ok[hidden]{display:none}

/* ---------- hari ini ---------- */
.dash-kpis{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem}
.dash-kpi--sure{grid-column:1/-1}
.dash-kpis--one{grid-template-columns:minmax(0,1fr)}
.dash-kpi{gap:.2rem;padding:.9rem 1rem}
.dash-kpi .kpi__value{font-size:clamp(1.2rem,6vw,1.7rem);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dash-kpi .kpi__value.is-long{font-size:clamp(1.05rem,5.2vw,1.45rem)}
.dash-kpi--sure .kpi__value{color:var(--ok)}
.dash-kpi .kpi__sub{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .65rem}
.dash-kpi__hint{margin-top:.3rem;padding-top:.5rem;border-top:1px dashed var(--line-strong);font-size:.75rem;line-height:1.4;color:var(--muted)}
.dash-delta{display:inline-flex;align-items:center;gap:.28rem;font-weight:600;white-space:nowrap}
.dash-delta--up{color:var(--ok)}
.dash-delta--down{color:var(--warn)}
.dash-delta--same{color:var(--muted)}
.dash-arrow{width:.62rem;height:.62rem;flex:none}

/* ---------- 7 hari ---------- */
.dash-week{overflow:hidden}
.dash-week__cap{margin:0;padding:.7rem 1rem .6rem;font-size:.75rem;line-height:1.4;color:var(--muted);background:var(--lilac-50);border-bottom:1px solid var(--line)}
.dash-days{list-style:none;margin:0;padding:0}
.dash-days[hidden],.dash-week__cap[hidden],.dash-week__none[hidden]{display:none}
.dash-week__none{margin:0;padding:1.1rem 1rem;font-size:.875rem;line-height:1.5;color:var(--ink-soft);text-align:center}
.dash-day{display:grid;grid-template-columns:minmax(0,1fr) minmax(5.4rem,max-content);grid-template-areas:"d v" "b n";align-items:center;column-gap:.8rem;row-gap:.4rem;padding:.65rem 1rem .7rem;border-bottom:1px solid var(--line);font-size:.875rem}
.dash-day[hidden]{display:none}
.dash-day__d{grid-area:d;min-width:0;font-weight:500;overflow-wrap:break-word}
.dash-day__v{grid-area:v;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-day__bar{grid-area:b;display:block;height:.7rem;border-radius:999px;background:var(--lilac-100);overflow:hidden}
.dash-day__fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--plum-600);transition:width .45s ease}
.dash-day__n{grid-area:n;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap}
.dash-day__n b{color:var(--ink);font-weight:600}
.dash-day.is-today{background:var(--lilac-50)}
.dash-day.is-today .dash-day__d{font-weight:700}
.dash-day--tot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.15rem 1rem;border-top:1px solid var(--line-strong);border-bottom:0;background:var(--lilac-50);font-weight:600}
.dash-day--tot .dash-day__d{flex:1 1 auto}
.dash-day--tot .dash-day__n,.dash-day--tot .dash-day__v{flex:0 0 auto}
.dash-day--tot .dash-day__n{order:1}
.dash-day--tot .dash-day__v{order:2}
.dash-note{margin:.75rem .25rem 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.dash-note.is-high{color:var(--warn);font-weight:600}
@media (max-width:22.49em){
  .dash-day{grid-template-columns:minmax(0,1fr) minmax(4.9rem,max-content);column-gap:.6rem;padding-left:.8rem;padding-right:.8rem}
  .dash-week__cap{padding-left:.8rem;padding-right:.8rem}
}

/* ---------- pesanan terkini ---------- */
.dash-all{color:var(--plum-700);min-height:2.75rem;padding-left:.8rem;padding-right:.5rem}
.dash-all .ico{width:1rem;height:1rem}
.dash-recent{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
.dash-recent__li{display:flex;min-width:0}
.dash-recent__li>.ocard{flex:1 1 auto;min-width:0}
.dash-recent__li.is-new>.ocard{animation:dash-new 2.8s ease-out}
@keyframes dash-new{from{background:var(--lilac-200);border-color:var(--plum-500)}to{background:var(--card)}}
.dash-empty{background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}
.dash-empty[hidden]{display:none}

/* ---------- rangka muat ---------- */
.dash-skel{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.dash-skel__title{width:8rem;height:1.3rem;border-radius:.4rem;margin-top:.95rem}
.dash-skel__title:first-child{margin-top:0}
.dash-skel__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.dash-skel__kpis{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem}
.dash-skel__tile{height:8.2rem;border-radius:var(--r-lg)}
.dash-skel__row{height:3.9rem;border-radius:var(--r-lg)}
.dash-skel__kpi{height:6.4rem;border-radius:var(--r-lg)}
.dash-skel__kpi:last-child{grid-column:1/-1}
.dash-skel__week{height:24rem;border-radius:var(--r-lg)}
.dash-skel__card{height:6.6rem;border-radius:var(--r-md)}

/* ---------- skrin lebih lebar (em: ikut tetapan saiz teks pelayar) ---------- */
@media (min-width:22.5em){
  .dash-kpis,.dash-skel__kpis{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .dash-kpis.dash-kpis--one{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:640px){
  .dash-day{grid-template-columns:8.5rem 6.2rem minmax(0,1fr) 7rem;grid-template-areas:"d n b v";column-gap:1rem;padding:.6rem 1rem}
  .dash-days--n .dash-day{grid-template-columns:8.5rem 6.2rem minmax(0,1fr);grid-template-areas:"d n b"}
  .dash-day--tot{display:grid;grid-template-columns:8.5rem 6.2rem minmax(0,1fr) 7rem;grid-template-areas:"d n . v";align-items:center}
  .dash-days--n .dash-day--tot{grid-template-columns:8.5rem 6.2rem minmax(0,1fr);grid-template-areas:"d n ."}
  .dash-day--tot .dash-day__d,.dash-day--tot .dash-day__n,.dash-day--tot .dash-day__v{flex:none}
  .dash-day__n{text-align:left}
  .dash-date,.dash-asof{display:inline}
  .dash-sep{display:inline}
  .dash-kpi .kpi__value,.dash-kpi .kpi__value.is-long{font-size:1.7rem}
  .dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash-kpi--sure{grid-column:auto}
  .dash-kpis.dash-kpis--one{grid-template-columns:minmax(0,22rem)}
  .dash-skel__kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash-skel__kpi:last-child{grid-column:auto}
}
@media (min-width:900px){
  .dash{gap:1.9rem}
  .dash-att{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dash-att__li.is-big,.dash-att__li.is-row,.dash-att--solo .dash-att__li.is-big{grid-column:span 2}
  .dash-skel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-recent{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .dash-att__a,.dash-day__fill{transition:none}
  .dash-att__a.is-bump,.dash-recent__li.is-new>.ocard{animation:none}
}