/* polish.css — final pass: scrollbars, focus rings, empty-state component,
   toast polish, row entrance, micro-interactions */

/* ── Consistent scrollbars (webkit + firefox) ──────────────────── */
* { scrollbar-width: thin; scrollbar-color: #d4d7e0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #d4d7e0;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #9fa6b5; background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
/* keep dark sidebar scrollbar subtle on dark */
.sidebar *::-webkit-scrollbar-thumb { background: #3a3f55; background-clip: padding-box; }
.sidebar *::-webkit-scrollbar-thumb:hover { background: #525b75; background-clip: padding-box; }
.sidebar * { scrollbar-color: #3a3f55 transparent; }

/* ── Focus rings — only on :focus-visible (keyboard) ───────────── */
button:focus { outline: none; }
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* icon-btns get a tighter ring */
.icon-btn:focus-visible,
.mw-icon-btn:focus-visible,
.nf-cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ── Selection color on-brand ──────────────────────────────────── */
::selection { background: color-mix(in oklab, var(--brand) 28%, white); color: var(--ink-1); }

/* ── Generic empty-state component (.es-*) ─────────────────────── */
.es {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 32px;
  text-align: center;
  color: var(--ink-muted);
  gap: 6px;
  animation: esIn .28s cubic-bezier(.2,.7,.3,1);
}
.es-illu {
  width: 72px; height: 72px; margin-bottom: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 12%, white), color-mix(in oklab, var(--brand) 4%, white));
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  position: relative;
}
.es-illu::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--brand) 22%, white);
  pointer-events: none;
}
.es-title { font-size: 15px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.008em; }
.es-sub   { font-size: 13px; color: var(--ink-muted); max-width: 360px; line-height: 1.45; }
.es-actions { display: flex; gap: 8px; margin-top: 10px; }
.es-btn {
  padding: 7px 14px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  background: var(--brand); color: white; border: 1px solid var(--brand);
  cursor: pointer;
}
.es-btn:hover { filter: brightness(1.06); }
.es-btn.is-ghost { background: white; color: var(--ink-1); border-color: var(--divider); }
.es-btn.is-ghost:hover { background: var(--surface-1); }
@keyframes esIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Toast polish ──────────────────────────────────────────────── */
.toast,
[class*="toast"]:not([class*="toast-container"]) {
  animation: toastIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Button press state (subtle scale) ─────────────────────────── */
button:not(:disabled):active,
.icon-btn:active,
.btn:active,
.primary:active {
  transform: translateY(0.5px) scale(.99);
}

/* ── Table row entrance (first render) ─────────────────────────── */
.t tbody tr { animation: rowIn .24s cubic-bezier(.2,.7,.3,1) both; }
.t tbody tr:nth-child(1)  { animation-delay: .00s; }
.t tbody tr:nth-child(2)  { animation-delay: .015s; }
.t tbody tr:nth-child(3)  { animation-delay: .03s; }
.t tbody tr:nth-child(4)  { animation-delay: .045s; }
.t tbody tr:nth-child(5)  { animation-delay: .06s; }
.t tbody tr:nth-child(6)  { animation-delay: .075s; }
.t tbody tr:nth-child(7)  { animation-delay: .09s; }
.t tbody tr:nth-child(8)  { animation-delay: .105s; }
.t tbody tr:nth-child(n+9){ animation-delay: .12s; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Sidebar hover states — slight nudge ───────────────────────── */
.sidebar-item { transition: background .1s ease, transform .08s ease; }
.sidebar-item:hover:not(.is-active) { transform: translateX(1px); }

/* ── Checkbox refinement ───────────────────────────────────────── */
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Pill icons — snap nicer on hover ──────────────────────────── */
.pill { transition: filter 0.12s ease, transform 0.08s ease; }
.pill:active { transform: translateY(0.5px); }

/* ── Tighter table zebra for long lists (optional feel) ────────── */
.t tbody tr:hover td:not(.cell-name) { background: color-mix(in oklab, var(--brand) 3%, white); }

/* ── Segmented button pressed feel ─────────────────────────────── */
.nf-head-filter button,
.mw-view-btn,
.mw-range-btn {
  transition: background .1s ease, color .1s ease, box-shadow .12s ease;
}

/* ── Drawer: make section titles feel settled ─────────────────── */
.drawer-sec-title { letter-spacing: .06em; }

/* ── Skeleton shimmer utility ──────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, #eef0f4 0%, #f7f8fa 50%, #eef0f4 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite ease-in-out;
  border-radius: 4px;
}
@keyframes skelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Kanban cards lift on hover ────────────────────────────────── */
.kanban-card { transition: box-shadow .14s ease, transform .12s ease; }
.kanban-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,22,40,.08); }