/* screens/dashboard.css — Dashboard (#/home). ALL classes prefixed .db-
   The shared layer owns: .card .card-head .card-head__link .ava .pill .bar
   .empty .hint .dot-live .vh. Nothing below re-implements them — the local
   rules here only place or re-tune them for this screen. */

/* --- header: greeting + quiet date line ------------------------------------ */
.db-head{margin-bottom:clamp(20px,2.6vw,28px)}
.db-head__row{display:flex;align-items:center;gap:var(--sp-14);flex-wrap:wrap;min-width:0}
.db-head__row h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-head__sub{margin-top:var(--sp-8);color:var(--muted);font-weight:500;font-size:var(--fs-md)}

/* --- first run: what is still unfinished ----------------------------------- */
.db-setup{margin-bottom:var(--sp-grid)}
.db-setup__count{font-size:var(--fs-fine);font-weight:600;color:var(--muted-2);flex:none}
.db-setup__list{display:flex;flex-direction:column}
.db-setup__it{
  display:flex;align-items:center;gap:var(--sp-14);min-width:0;
  padding:var(--sp-12) var(--sp-20);border-bottom:1px solid var(--line);
  transition:background var(--t);
}
.db-setup__list .db-setup__it:last-child{border-bottom:0;border-radius:0 0 var(--r-card) var(--r-card)}
.db-setup__it:hover{background:var(--card-2)}
/* the row runs flush to the card edge, so the ring goes inside it — an outset
   ring would hang over the card border. Radius is inherited from the row. */
.db-setup__it:focus-visible{box-shadow:var(--focus-inset);background:var(--card-2)}
.db-setup__mk{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:var(--r-circle);border:1px solid var(--line-2);background:var(--card);
  font-size:var(--fs-fine);font-weight:700;color:var(--muted);
}
.db-setup__mk i{font-style:normal}
.db-setup__mk svg{width:15px;height:15px}
.db-setup__it.is-done .db-setup__mk{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.db-setup__txt{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}
.db-setup__txt b{font-size:var(--fs-md);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-setup__it.is-done .db-setup__txt b{color:var(--muted)}
.db-setup__txt small{font-size:var(--fs-hint);font-weight:500;color:var(--muted-2);line-height:var(--lh-body)}
.db-setup__go{width:14px;height:14px;flex:none;color:var(--muted-2)}

/* the same slot once every step is done */
.db-ready{padding:var(--sp-16) var(--sp-20);margin-bottom:var(--sp-grid)}
.db-ready b{display:block;font-size:var(--fs-base);font-weight:700;margin-bottom:var(--sp-2)}

/* --- stat row ---------------------------------------------------------------- */
.db-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-grid);margin-bottom:var(--sp-grid)}
.db-stat{display:flex;flex-direction:column;padding:var(--sp-20) var(--sp-20) var(--sp-16);min-width:0}
.db-stat__num{
  font-size:clamp(26px,2.4vw,33px);font-weight:700;letter-spacing:-.03em;line-height:1.12;
}
/* THE one aurora move on this screen — the card's top edge, not the digits.
   A 33px number in the aurora is 2.36:1 on white; large text needs 3:1. */
.db-stat--grad{position:relative;overflow:hidden}
.db-stat--grad::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.db-stat__cap{margin-top:var(--sp-4);font-size:var(--fs-fine);font-weight:600;color:var(--muted);line-height:1.35}
/* the sparkline paints in currentColor — a hairline of ink, never a brand colour */
.db-stat__spark{width:100%;height:30px;margin-top:auto;padding-top:var(--sp-14);box-sizing:content-box;color:var(--ink);opacity:.2}

/* --- quota meter (the shared .bar, exactly as in settings) -------------------- */
.db-quota{
  display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;
  gap:clamp(16px,3vw,34px);padding:var(--sp-16) var(--sp-24);margin-bottom:var(--sp-grid);
}
.db-quota__info{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.db-quota__ttl{display:flex;align-items:center;gap:var(--sp-8);min-width:0;flex-wrap:wrap}
.db-quota__ttl b{font-size:var(--fs-sm);font-weight:700}
.db-quota__count{font-size:var(--fs-fine);font-weight:600;color:var(--muted)}
.db-quota__side{display:flex;align-items:center;gap:var(--sp-20);flex-wrap:wrap}
.db-quota__renew{font-size:var(--fs-fine);font-weight:500;color:var(--muted-2)}
.db-quota__up{
  display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);font-weight:700;
  color:var(--ink);transition:opacity var(--t);
}
.db-quota__up:hover{opacity:.65}
.db-quota__up .sh-ic{width:14px;height:14px}

/* --- main grid ----------------------------------------------------------------- */
.db-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:var(--sp-grid);align-items:start}
.db-rail{display:flex;flex-direction:column;gap:var(--sp-grid);min-width:0}

/* --- recent conversations -------------------------------------------------------- */
.db-conv{
  display:flex;align-items:center;gap:var(--sp-12);min-width:0;
  padding:var(--sp-12) var(--sp-20);border-bottom:1px solid var(--line);
  transition:background var(--t);
}
.db-recent__list .db-conv:last-child{border-bottom:0;border-radius:0 0 var(--r-card) var(--r-card)}
.db-conv:hover{background:var(--card-2)}
.db-conv:focus-visible{box-shadow:var(--focus-inset);background:var(--card-2)}
.db-conv__who{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}
.db-conv__who b{font-size:var(--fs-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-conv__who small{font-size:var(--fs-fine);font-weight:500;color:var(--muted-2)}
/* the booking receipt — a .pill carrying the service and its price */
.db-conv__rcpt{height:28px;flex:none;max-width:38%;font-size:var(--fs-fine);color:var(--ink)}
.db-conv__rcpt .num{overflow:hidden;text-overflow:ellipsis}
.db-conv__meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);flex:none;min-width:52px}
.db-conv__meta b{font-size:var(--fs-sm);font-weight:700}
.db-conv__meta small{font-size:var(--fs-meta);font-weight:500;color:var(--muted-2)}

/* --- today's bookings (mirrors the landing mini receipt) --------------------------- */
.db-book__list{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12)}
.db-rcpt{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12);border-radius:var(--r-md);background:var(--card-2);min-width:0}
.db-rcpt__body{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}
.db-rcpt__tag{font-style:normal;font-size:var(--fs-meta);font-weight:500;color:var(--muted-2);letter-spacing:.09em}
.db-rcpt__body b{font-size:var(--fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-rcpt em{margin-left:auto;flex:none;font-style:normal;font-weight:700;font-size:var(--fs-fine);color:var(--muted)}
/* compact empty state — the shared .empty is sized for a full-width card, not
   a 336px rail, so the rail keeps its own tighter block */
.db-book__empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);text-align:center;padding:var(--sp-28) var(--sp-20)}
.db-book__empty b{font-size:var(--fs-sm);font-weight:700}
.db-book__empty span{font-size:var(--fs-fine);font-weight:500;color:var(--muted);max-width:30ch}

/* --- channel status strip ------------------------------------------------------------ */
.db-ch__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);padding:var(--sp-12)}
.db-ch__it{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);
  padding:var(--sp-12) var(--sp-4) var(--sp-12);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card-2);
  transition:border-color var(--t),background var(--t);min-width:0;
}
.db-ch__it:hover{border-color:var(--line-2);background:var(--card)}
.db-ch__mk{position:relative;display:grid;place-items:center;width:32px;height:32px;color:var(--ink)}
.db-ch__mk svg{width:20px;height:20px}
.db-ch__dot{position:absolute;right:0;top:1px;width:6px;height:6px;box-shadow:0 0 0 2.5px var(--live-soft)}
.db-ch__nm{font-size:var(--fs-meta);font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* unconnected reads quiet, but still legible — no 50% ghosting */
.db-ch__it.is-off .db-ch__mk,.db-ch__it.is-off .db-ch__nm{color:var(--muted-2)}

/* --- responsive ----------------------------------------------------------------------- */
@media (max-width:1080px){
  .db-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  .db-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-10);margin-bottom:var(--sp-12)}
  .db-stat{padding:var(--sp-16) var(--sp-16) var(--sp-12)}
  .db-quota{grid-template-columns:1fr;gap:var(--sp-12);padding:var(--sp-16) var(--sp-20);margin-bottom:var(--sp-12)}
  .db-quota__side{justify-content:space-between}
  .db-grid{gap:var(--sp-12)}
  .db-rail{gap:var(--sp-12)}
  .db-setup,.db-ready{margin-bottom:var(--sp-12)}
  .db-setup__it{padding:var(--sp-12) var(--sp-16)}
}
/* 320px is the reflow floor (WCAG 1.4.10) — nothing may scroll sideways */
@media (max-width:400px){
  .db-quota{padding:var(--sp-14) var(--sp-16)}
  .db-quota__side{gap:var(--sp-10)}
}
@media (max-width:700px){
  .db-conv__rcpt{display:none}
  .db-conv{padding:var(--sp-12) var(--sp-16)}
}