/* ============================================================
   STB Client Dashboard — SaaS design system
   Builds on ../styles.css tokens (brand orange/teal, Syne/Kanit,
   glass recipe). Everything dashboard-specific lives here.
   ============================================================ */

body{ min-height:100vh }
html.js body{ opacity:1 }

/* ============================================================
   App shell: sidebar + main
   ============================================================ */
.dash-shell{ display:flex; min-height:100vh }

.side-nav{
  width:15.5rem; flex-shrink:0;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.5rem 1rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-right:1px solid var(--card-border);
}
.side-nav .logo-img{ height:1.9rem; width:auto; margin:0 0 1.5rem .5rem }
.side-nav .nav-item{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .9rem; border-radius:.8rem;
  font-family:'Syne',sans-serif; font-weight:600; font-size:.875rem;
  color:var(--muted); text-align:left; width:100%;
  transition:background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.side-nav .nav-item svg{ width:1.1rem; height:1.1rem; flex-shrink:0 }
.side-nav .nav-item:hover{ background:rgba(27,94,110,.07); color:var(--brand-teal); transform:translateX(2px) }
.side-nav .nav-item.on{
  background:var(--grad-cta); color:#fff;
  box-shadow:0 10px 24px -10px rgba(238,108,31,.5);
}
.side-nav .spacer{ flex:1 }
.side-nav .who-mini{ font-size:.75rem; color:var(--faint); padding:.5rem .9rem; word-break:break-all }

.dash-main{ flex:1; min-width:0; padding:1.75rem 2rem 4rem }
.main-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.5rem; flex-wrap:wrap;
}
.main-head h1{ font-size:1.5rem; letter-spacing:-.01em }
.main-head .sub{ font-size:.8125rem; color:var(--muted); margin-top:.2rem }
.view{ display:none; flex-direction:column; gap:1.5rem }
.view.on{ display:flex }

/* ============================================================
   Panels & cards
   ============================================================ */
.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.32));
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:1.25rem;
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.95);
  padding:1.5rem;
}
.panel h2{ font-size:1.05rem; margin-bottom:1rem }
.panel h3{ font-size:.9375rem; margin:1.25rem 0 .6rem }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap }
.panel-head h2{ margin:0 }

/* ---- KPI cards ---- */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem }
.kpi{
  position:relative; overflow:hidden;
  border-radius:1.1rem; padding:1.25rem 1.35rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.24));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation:kpiIn .6s var(--ease-reveal) backwards;
}
.kpi:nth-child(2){ animation-delay:.07s } .kpi:nth-child(3){ animation-delay:.14s } .kpi:nth-child(4){ animation-delay:.21s }
@keyframes kpiIn{ from{ opacity:0; transform:translateY(14px) } }
.kpi:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -22px rgba(15,45,58,.3) }
.kpi::after{
  content:""; position:absolute; right:-2.5rem; top:-2.5rem;
  width:7rem; height:7rem; border-radius:50%;
  background:radial-gradient(circle, rgba(245,130,31,.16), transparent 70%);
}
.kpi:nth-child(even)::after{ background:radial-gradient(circle, rgba(27,94,110,.15), transparent 70%) }
.kpi .ic{
  width:2.4rem; height:2.4rem; border-radius:.75rem;
  display:grid; place-items:center; margin-bottom:.7rem;
  background:var(--grad-cta); color:#fff;
  box-shadow:0 8px 18px -8px rgba(238,108,31,.55);
}
.kpi:nth-child(even) .ic{ background:linear-gradient(135deg,#2e7d91,#1b5e6e); box-shadow:0 8px 18px -8px rgba(27,94,110,.55) }
.kpi .ic svg{ width:1.15rem; height:1.15rem }
.kpi b{
  display:block; font-family:'Syne',sans-serif; font-size:1.6rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.kpi span{ font-size:.75rem; color:var(--muted) }
.kpi .trend{ font-size:.6875rem; font-weight:600; color:var(--brand-teal) }

/* ---- charts ---- */
.chart-grid{ display:grid; grid-template-columns:2fr 1fr; gap:1.5rem }
.chart-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem }
.chart-box{ position:relative; height:15rem }
.chart-box.sm{ height:12.5rem }

/* ============================================================
   Forms / buttons / badges / tables
   ============================================================ */
.field label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:.35rem; font-family:'Syne',sans-serif }
.field input, .field select, .field textarea{
  width:100%; font:inherit; color:var(--ink);
  background:rgba(255,255,255,.8);
  border:1px solid var(--card-border);
  border-radius:.75rem; padding:.68rem .9rem;
  transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.field textarea{ min-height:5rem; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-orange);
  box-shadow:0 0 0 3px rgba(245,130,31,.16);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.form-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.5rem }

.tbl{ width:100%; border-collapse:collapse; font-size:.8438rem }
.tbl th{
  text-align:left; font-family:'Syne',sans-serif; font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  padding:.5rem .6rem; border-bottom:1px solid var(--card-border);
}
.tbl td{ padding:.62rem .6rem; border-bottom:1px solid rgba(15,45,58,.05); vertical-align:middle }
.tbl tbody tr{ transition:background .15s ease }
.tbl tbody tr:hover{ background:rgba(27,94,110,.04) }
.tbl tr:last-child td{ border-bottom:none }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums }

.badge{
  display:inline-block; font-size:.6875rem; font-weight:600;
  padding:.2rem .65rem; border-radius:var(--radius-pill);
  text-transform:capitalize;
}
.badge.active, .badge.paid    { background:rgba(27,94,110,.12);  color:var(--brand-teal) }
.badge.paused, .badge.sent,
.badge.draft, .badge.pending  { background:rgba(245,130,31,.14); color:var(--brand-orange-deep) }
.badge.ended, .badge.overdue  { background:rgba(200,40,40,.1);   color:#b03030 }
.badge.auto{ background:rgba(15,45,58,.08); color:var(--muted) }

.chip-filter{ display:flex; gap:.4rem; flex-wrap:wrap }
.chip-filter button{
  font-size:.75rem; font-weight:600; font-family:'Syne',sans-serif;
  padding:.4rem .95rem; border-radius:var(--radius-pill);
  border:1px solid var(--card-border); color:var(--muted);
  transition:all .2s var(--ease-out);
}
.chip-filter button.on{ background:var(--grad-cta); color:#fff; border-color:transparent }

.icon-btn{
  width:1.9rem; height:1.9rem; border-radius:.55rem; display:inline-grid; place-items:center;
  color:var(--muted); transition:background .2s, color .2s;
}
.icon-btn:hover{ background:rgba(27,94,110,.08); color:var(--brand-teal) }
.icon-btn svg{ width:.95rem; height:.95rem }

/* ============================================================
   Client cards + full-screen drawer
   ============================================================ */
.client-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:1rem }
.client-card{
  border-radius:1.1rem; padding:1.2rem 1.3rem; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.3));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 12px 30px -18px rgba(15,45,58,.22), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.client-card:hover{ transform:translateY(-4px); border-color:rgba(245,130,31,.45); box-shadow:0 24px 50px -20px rgba(15,45,58,.3) }
.client-card .avatar{
  width:2.6rem; height:2.6rem; border-radius:.85rem;
  display:grid; place-items:center; margin-bottom:.7rem;
  font-family:'Syne',sans-serif; font-weight:700; font-size:.9rem; color:#fff;
  background:linear-gradient(135deg,#2e7d91,var(--brand-teal));
}
.client-card:nth-child(odd) .avatar{ background:var(--grad-cta) }
/* client logo replaces the initials avatar when uploaded */
.client-card .avatar.has-logo{
  background:#fff !important; border:1px solid var(--card-border);
  padding:.3rem; overflow:hidden;
}
.client-card .avatar.has-logo img{ width:100%; height:100%; object-fit:contain; display:block }
.client-card b{ display:block; font-family:'Syne',sans-serif; font-size:.95rem }
.client-card .meta{ font-size:.75rem; color:var(--muted); margin:.15rem 0 .5rem }

.drawer-veil{
  position:fixed; inset:0; z-index:150;
  background:rgba(15,45,58,.35); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:160;
  width:min(52rem, 100vw);
  background:#fbfdfe;
  border-left:1px solid var(--card-border);
  box-shadow:-30px 0 80px -30px rgba(15,45,58,.35);
  transform:translateX(102%);
  transition:transform .38s var(--ease-reveal);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none }
.drawer-veil.open{ opacity:1; visibility:visible; transition:opacity .3s ease }
.drawer-head{
  padding:1.4rem 1.75rem 0;
  border-bottom:1px solid var(--card-border);
}
.drawer-head .row1{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.drawer-head h2{ font-size:1.2rem }
.drawer-tabs{ display:flex; gap:.25rem; margin-top:1rem; overflow-x:auto }
.drawer-tabs button{
  font-family:'Syne',sans-serif; font-weight:600; font-size:.8125rem;
  padding:.6rem 1rem; color:var(--muted);
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .2s;
}
.drawer-tabs button.on{ color:var(--brand-orange-deep); border-bottom-color:var(--brand-orange) }
.drawer-body{ flex:1; overflow-y:auto; padding:1.5rem 1.75rem }
.drawer-body .dtab{ display:none; flex-direction:column; gap:1.25rem }
.drawer-body .dtab.on{ display:flex }

/* ---- service assignment cards ---- */
.svc-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.85rem }
.svc-pick .opt{
  border:1.5px solid var(--card-border); border-radius:.95rem;
  padding:1rem 1.1rem; cursor:pointer;
  background:rgba(255,255,255,.7);
  transition:border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.svc-pick .opt:hover{ transform:translateY(-2px) }
.svc-pick .opt.sel{ border-color:var(--brand-orange); box-shadow:0 0 0 3px rgba(245,130,31,.14) }
.svc-pick .opt b{ font-family:'Syne',sans-serif; font-size:.85rem; display:block; margin-bottom:.55rem }
.svc-pick .opt .row{ display:flex; gap:.5rem }
.svc-pick .opt input, .svc-pick .opt select{
  width:100%; font:inherit; font-size:.8rem;
  border:1px solid var(--card-border); border-radius:.55rem; padding:.4rem .55rem;
  background:#fff;
}
.assigned-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--card-border); border-radius:.95rem;
  padding:.9rem 1.1rem; background:rgba(255,255,255,.7);
}
.assigned-card b{ font-family:'Syne',sans-serif; font-size:.875rem; display:block }
.assigned-card .meta{ font-size:.72rem; color:var(--muted) }
.assigned-card .price{ font-family:'Syne',sans-serif; font-weight:700; color:var(--brand-teal); white-space:nowrap }

/* ---- timeline ---- */
.timeline{ position:relative; padding-left:1.4rem }
.timeline::before{ content:""; position:absolute; left:.35rem; top:.3rem; bottom:.3rem; width:2px; background:linear-gradient(var(--brand-orange-soft), var(--brand-teal-soft)) }
.timeline .ev{ position:relative; padding:0 0 1.1rem }
.timeline .ev::before{
  content:""; position:absolute; left:-1.4rem; top:.3rem;
  width:.72rem; height:.72rem; border-radius:50%;
  background:#fff; border:2.5px solid var(--brand-orange);
}
.timeline .ev:nth-child(even)::before{ border-color:var(--brand-teal) }
.timeline .ev b{ font-size:.83rem; font-family:'Syne',sans-serif }
.timeline .ev span{ display:block; font-size:.72rem; color:var(--faint) }

/* ============================================================
   Modal (client wizard / generate invoice)
   ============================================================ */
.modal-veil{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,45,58,.4); backdrop-filter:blur(5px);
  display:none; align-items:flex-start; justify-content:center;
  padding:4vh 1rem; overflow-y:auto;
}
.modal-veil.open{ display:flex }
.modal{
  width:min(38rem,100%);
  background:#fff; border-radius:1.25rem;
  box-shadow:0 40px 100px -30px rgba(15,45,58,.5);
  padding:1.75rem;
  animation:modalIn .35s var(--ease-reveal);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98) } }
.stepper{ display:flex; gap:.5rem; margin:0 0 1.25rem }
.stepper .st{
  flex:1; text-align:center; font-size:.72rem; font-weight:600; font-family:'Syne',sans-serif;
  color:var(--faint); padding-bottom:.55rem; border-bottom:2.5px solid var(--card-border);
}
.stepper .st.on{ color:var(--brand-orange-deep); border-color:var(--brand-orange) }
.stepper .st.done{ color:var(--brand-teal); border-color:var(--brand-teal) }
.wstep{ display:none; flex-direction:column; gap:1rem }
.wstep.on{ display:flex }

/* ============================================================
   Login / topbar (client & editor pages keep these)
   ============================================================ */
.dash-topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.5rem;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--card-border);
}
.dash-topbar .logo-img{ height:1.8rem; width:auto }
.dash-topbar .who{ display:flex; align-items:center; gap:.75rem; font-size:.8125rem; color:var(--muted) }
.role-badge{
  font-family:'Syne',sans-serif; font-weight:700; font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.3rem .8rem; border-radius:var(--radius-pill);
  background:linear-gradient(135deg, rgba(245,130,31,.14), rgba(27,94,110,.14));
  color:var(--brand-teal);
}
.dash-wrap{
  max-width:75rem; margin:0 auto;
  padding:2rem 1.5rem 4rem;
  display:flex; flex-direction:column; gap:1.5rem;
}
.dash-grid{ display:grid; grid-template-columns:20rem 1fr; gap:1.5rem; align-items:start }
.dash-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem }

.login-stage{ min-height:100vh; display:grid; place-items:center; padding:2rem }
.login-card{ width:min(26rem,100%); text-align:center }
.login-card .logo-img{ height:2.2rem; margin:0 auto 1.25rem }
.login-card h1{ font-size:1.375rem; margin-bottom:.35rem }
.login-card p.sub{ font-size:.875rem; color:var(--muted); margin-bottom:1.5rem }
.login-card form{ display:flex; flex-direction:column; gap:.85rem; text-align:left }

/* ---- files / dropzone ---- */
.file-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.85rem }
.file-card{
  border:1px solid var(--card-border); border-radius:.9rem;
  padding:.85rem 1rem; background:rgba(255,255,255,.62);
  display:flex; flex-direction:column; gap:.3rem;
  transition:transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.file-card:hover{ transform:translateY(-3px); border-color:rgba(245,130,31,.4) }
.file-card b{ font-size:.8125rem; word-break:break-all; font-family:'Syne',sans-serif }
.file-card .meta{ font-size:.6875rem; color:var(--faint) }
.file-card .dl{ font-size:.75rem; font-weight:600; color:var(--brand-orange-deep); cursor:pointer; align-self:flex-start }
.file-card .dl:hover{ color:var(--brand-teal) }

.dropzone{
  border:2px dashed rgba(27,94,110,.3); border-radius:1rem;
  padding:2.5rem 1.5rem; text-align:center; color:var(--muted);
  transition:border-color .25s var(--ease-out), background .25s var(--ease-out);
  cursor:pointer;
}
.dropzone.drag{ border-color:var(--brand-orange); background:rgba(245,130,31,.06) }

/* ---- rich note editor (editor page) ---- */
.rte-bar{ display:flex; gap:.25rem; flex-wrap:wrap; margin-bottom:.4rem }
.rte-bar button{
  min-width:2rem; height:2rem; border-radius:.5rem; font-size:.8rem;
  border:1px solid var(--card-border); background:#fff; color:var(--muted);
  font-family:'Syne',sans-serif; font-weight:600;
  transition:all .15s ease;
}
.rte-bar button:hover{ color:var(--brand-orange-deep); border-color:rgba(245,130,31,.4) }
.rte{
  min-height:6.5rem; border:1px solid var(--card-border); border-radius:.75rem;
  padding:.8rem 1rem; background:rgba(255,255,255,.85);
  font-size:.9rem; line-height:1.6;
}
.rte:focus{ outline:none; border-color:var(--brand-orange); box-shadow:0 0 0 3px rgba(245,130,31,.16) }
.rte:empty::before{ content:attr(data-ph); color:var(--faint) }

/* ============================================================
   Searchable dropdowns (native selects upgraded by dash.js)
   ============================================================ */
.sd-wrap{ position:relative; min-width:0 }
.sd-wrap > select{
  position:absolute !important; width:1px; height:1px;
  opacity:0; pointer-events:none; margin:0;
}
.sd-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font:inherit; color:var(--ink); text-align:left;
  background:rgba(255,255,255,.8);
  border:1px solid var(--card-border);
  border-radius:.75rem; padding:.66rem .9rem;
  cursor:pointer;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.sd-btn svg{ width:.9rem; height:.9rem; color:var(--faint); flex-shrink:0; transition:transform .2s }
.sd-wrap.open .sd-btn{ border-color:var(--brand-orange); box-shadow:0 0 0 3px rgba(245,130,31,.14) }
.sd-wrap.open .sd-btn svg{ transform:rotate(180deg) }
.sd-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.875rem }
.sd-label.ph{ color:var(--faint) }
.sd-panel{
  position:absolute; top:calc(100% + .35rem); left:0; right:0; z-index:300;
  background:#fff; border:1px solid var(--card-border); border-radius:.85rem;
  box-shadow:0 24px 60px -20px rgba(15,45,58,.35);
  padding:.4rem; display:none;
  animation:sdIn .18s var(--ease-reveal);
}
.sd-wrap.open .sd-panel{ display:block }
@keyframes sdIn{ from{ opacity:0; transform:translateY(-6px) } }
.sd-search{
  width:100%; font:inherit; font-size:.83rem;
  border:1px solid var(--card-border); border-radius:.55rem;
  padding:.45rem .7rem; margin-bottom:.35rem;
}
.sd-search:focus{ outline:none; border-color:var(--brand-orange) }
.sd-list{ max-height:14rem; overflow-y:auto }
.sd-opt{
  padding:.5rem .7rem; border-radius:.5rem; font-size:.85rem; cursor:pointer;
  transition:background .12s;
}
.sd-opt:hover{ background:rgba(245,130,31,.1) }
.sd-opt.sel{ background:rgba(27,94,110,.1); font-weight:600; color:var(--brand-teal) }
.sd-none{ padding:.5rem .7rem; font-size:.8rem; color:var(--faint) }

/* ============================================================
   Profile / branding (avatars, client logos, settings panels)
   ============================================================ */
[hidden]{ display:none !important }
#profile-box{ margin-top:1.25rem; display:flex; flex-direction:column; gap:1.25rem }
.avatar-img{
  width:2.2rem; height:2.2rem; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 12px -4px rgba(15,45,58,.35);
}
.client-logo{ max-height:2.2rem; width:auto; max-width:9rem; object-fit:contain }
.brand-pick{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.brand-pick .preview{
  width:4.2rem; height:4.2rem; border-radius:1rem;
  border:1.5px dashed rgba(27,94,110,.35);
  display:grid; place-items:center; overflow:hidden;
  background:rgba(255,255,255,.7);
  font-size:.65rem; color:var(--faint); text-align:center; padding:.25rem;
}
.brand-pick .preview img{ width:100%; height:100%; object-fit:contain }
.creds-note{
  border:1px solid rgba(27,94,110,.25); background:rgba(27,94,110,.06);
  border-radius:.9rem; padding:1rem 1.25rem; font-size:.875rem; line-height:1.7;
}
.creds-note code{
  background:#fff; border:1px solid var(--card-border); border-radius:.4rem;
  padding:.15rem .5rem; font-size:.85rem; color:var(--brand-orange-deep);
}

/* ---- misc ---- */
.muted{ color:var(--muted); font-size:.875rem }
.empty{ color:var(--faint); font-size:.875rem; padding:1rem 0 }
.toast{
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(1rem);
  background:var(--ink); color:#fff; font-size:.875rem;
  padding:.75rem 1.5rem; border-radius:var(--radius-pill);
  opacity:0; pointer-events:none; z-index:400;
  transition:opacity .3s ease, transform .3s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) }
.notice{
  border:1px solid rgba(245,130,31,.4); background:rgba(245,130,31,.08);
  border-radius:.9rem; padding:1rem 1.25rem; font-size:.875rem; line-height:1.6;
}
.notice code{ font-size:.8125rem; background:rgba(15,45,58,.06); padding:.1rem .35rem; border-radius:.3rem }
.tbl-scroll{ overflow-x:auto }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .chart-grid, .chart-grid-3{ grid-template-columns:1fr }
  .dash-grid{ grid-template-columns:1fr }
}
@media (max-width:820px){
  .dash-shell{ flex-direction:column }
  .side-nav{
    position:sticky; top:0; height:auto; width:100%; z-index:100;
    flex-direction:row; align-items:center; overflow-x:auto;
    padding:.75rem 1rem; gap:.25rem;
    border-right:none; border-bottom:1px solid var(--card-border);
  }
  .side-nav .logo-img{ margin:0 .75rem 0 0; height:1.6rem }
  .side-nav .nav-item{ white-space:nowrap; padding:.55rem .8rem }
  .side-nav .nav-item span{ display:none }        /* icons only */
  .side-nav .who-mini{ display:none }
  .side-nav .spacer{ display:none }
  .dash-main{ padding:1.25rem 1rem 3rem }
  .form-grid{ grid-template-columns:1fr }
  .drawer{ width:100vw }
  .main-head h1{ font-size:1.25rem }
  .chart-box{ height:13rem } .chart-box.sm{ height:11rem }
}
@media (max-width:520px){
  .kpi-row{ grid-template-columns:1fr 1fr; gap:.7rem }
  .kpi{ padding:1rem }
  .kpi b{ font-size:1.25rem }
  .client-grid{ grid-template-columns:1fr }
  .panel{ padding:1.1rem }
  .modal{ padding:1.25rem }
  .drawer-head{ padding:1rem 1.1rem 0 }
  .drawer-body{ padding:1.1rem }
  .assigned-card{ flex-direction:column; align-items:flex-start; gap:.5rem }
  .dash-wrap{ padding:1.25rem .9rem 3rem }
  .svc-pick{ grid-template-columns:1fr }
}