/* ============================================================================
   smooth.css — MOTION & POLISH layer for the existing indigo/slate theme.
   NO colour changes. Login/welcome-grade smoothness via CHEAP, targeted rules
   only (no attribute-substring selectors, no page-wide scroll animation, no
   always-on backdrop-filter) so it never janks the large orders table.
   Loaded after tailwind.css. Reversible — remove this file + its <link>.
   ========================================================================== */

:root{
  --ease-spring: cubic-bezier(.2,.9,.25,1.1);
  --ease-out:    cubic-bezier(.2,.9,.25,1.05);
}

/* ── Primary (indigo) buttons: gentle lift + press ────────────────────────── */
button.bg-indigo-600, a.bg-indigo-600, button.bg-indigo-700, a.bg-indigo-700{
  transition: transform .16s var(--ease-spring), box-shadow .18s ease, filter .16s ease;
}
button.bg-indigo-600:hover, a.bg-indigo-600:hover,
button.bg-indigo-700:hover, a.bg-indigo-700:hover{
  transform: translateY(-1px); box-shadow: 0 14px 32px rgba(79,70,229,.30);
}
button:active, a.bg-indigo-600:active, .btn:active{ transform: translateY(0) scale(.98); }
/* Secondary/ghost + generic buttons: smooth state changes */
button, [role="button"], .btn{ transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .16s var(--ease-spring); }

/* ── Nav links + inputs: smooth (cheap paint-only) ────────────────────────── */
.sidebar-link{ transition: background-color .18s ease, color .18s ease, transform .16s var(--ease-spring); }
.sidebar-link:hover{ transform: translateX(2px); }
input, select, textarea, .filter-select, .filter-input, .filter-btn{
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

/* ── View transition — active dashboard panel rises in on navigate (once) ─── */
@keyframes smoothRise{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform: translateY(0) } }
main > div:not(.hidden):not(#app-topbar){ animation: smoothRise .38s var(--ease-out); }

/* ── Popups / modals — spring-in card (no page-wide backdrop-filter) ───────── */
@keyframes smoothPop{ 0%{opacity:0; transform: translateY(16px) scale(.955)} 100%{opacity:1; transform: translateY(0) scale(1)} }
.fixed.inset-0.flex.items-center > *{ animation: smoothPop .40s var(--ease-spring) both; }

/* ── Perf: the sticky header's backdrop-blur re-blurs the whole scrolling table
   every frame → scroll jank on the large orders table. The header is ~95% opaque
   anyway, so drop the blur (look is virtually identical, scroll stays smooth). ── */
header.backdrop-blur, header.backdrop-blur-sm, .sticky.backdrop-blur{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
#delivery-perf-view header, #docpharma-recon-view header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* ── Notification toast — already slides; give it the spring easing ───────── */
#notification{ transition-timing-function: var(--ease-out) !important; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ── Dashboard width ──────────────────────────────────────────────────────────
   Every view's content sat in `max-w-7xl` (1280px), which on a 1900px screen
   left ~600px of empty margin either side while tables and charts squeezed.
   Real CSS rather than a Tailwind class on purpose: tailwind.css is PREBUILT, so
   `max-w-[1720px]` and `max-w-screen-2xl` are not compiled and would silently do
   nothing at all. Still capped, not edge-to-edge — an unbounded row of KPI cards
   on an ultrawide stretches into unreadable strips.                            */
.p-8.mx-auto.w-full, .p-6.mx-auto.w-full{ max-width:1720px; }
@media (min-width:1600px){
  .p-8.mx-auto.w-full{ padding-left:2.5rem; padding-right:2.5rem; }
}


/* ── Delivery-Perf basket bar + escalation-sheet modal (2026-08-19) ─────────────────────────────
   The bar's colour classes are NOT in the prebuilt tailwind.css — plain .bg-slate-900 does not exist
   (only /40 and /50 variants), nor do bg-white/10 or z-[60]/z-[80] — so the bar rendered as a WHITE
   pill with WHITE text: invisible except the emerald button. Load-bearing colour lives here as real
   CSS, per the standing prebuilt-Tailwind rule. */
#dp-basket-bar{ background:#0f172a; color:#fff; z-index:60; }
#dp-basket-bar .dpb-ghost{ background:rgba(255,255,255,.14); }
#dp-basket-bar .dpb-ghost:hover{ background:rgba(255,255,255,.25); }
.dp-sheet-overlay{ z-index:80; }
/* Modal primary button — plain bg-slate-900 is NOT in the prebuilt tailwind.css (same trap as the
   basket bar): the "Add to basket" primary rendered white-on-white, leaving only Cancel visible. */
.dpm-dark{ background:#0f172a; color:#fff; }
.dpm-dark:hover{ background:#1e293b; }