/* PartsFlow theme layer.
 *
 * The app is built with Tailwind utility classes on a consistent palette
 * (white / slate surfaces, slate text). Rather than add dark: variants to every
 * template, we remap those specific utilities under `html.dark` here — higher
 * specificity than a bare utility class, so it wins without !important.
 *
 * Light mode gets small polish (smoother transitions, nicer scrollbars, focus).
 */

:root { color-scheme: light; }
html.dark { color-scheme: dark; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Theme transition (kept subtle; skip on form controls to avoid lag). */
body, .bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200,
table, thead, tr, td, th {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Nicer scrollbars. */
* { scrollbar-width: thin; }
html.dark * { scrollbar-color: #475569 transparent; }

/* ===== Dark mode ========================================================= */
html.dark body { background-color: #0b1220; color: #e2e8f0; }

/* Surfaces */
html.dark .bg-white { background-color: #131c2e !important; }
html.dark .bg-slate-50 { background-color: #182235 !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .bg-slate-200 { background-color: #334155 !important; }

/* Text */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #7c8aa0 !important; }
html.dark .text-slate-300 { color: #64748b !important; }

/* Borders & dividers */
html.dark .border,
html.dark .border-t,
html.dark .border-b,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .divide-y > * { border-color: #2a3852 !important; }

/* Hover states that use light grays */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover { background-color: #233049 !important; }

/* Translucent white surfaces (e.g. floating tile badges) */
html.dark .bg-white\/80 { background-color: rgba(19,28,46,.85) !important; }

/* Explicit slate dividers */
html.dark .divide-slate-100 > * + *,
html.dark .divide-slate-200 > * + * { border-color: #2a3852 !important; }

/* Form controls */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f1726 !important;
  border-color: #2a3852 !important;
  color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

/* Shadows are too heavy on dark; soften to a thin ring. */
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg {
  --tw-shadow: 0 0 0 1px rgba(148,163,184,.08), 0 1px 2px rgba(0,0,0,.4);
  box-shadow: var(--tw-shadow) !important;
}

/* Keep pale accent badges readable: in dark, lighten their text a touch. */
/* Accent callouts & badges: in dark, the pale -50/-100 backgrounds become
 * translucent tints with lighter text, so they read as soft highlights instead
 * of bright white boxes. (rgb base per accent, low alpha on dark.) */
html.dark .bg-emerald-50 { background: rgba(16,185,129,.10) !important; }
html.dark .bg-emerald-100 { background: rgba(16,185,129,.18) !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800 { color:#6ee7b7 !important; }
html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: rgba(16,185,129,.35) !important; }

html.dark .bg-amber-50 { background: rgba(245,158,11,.10) !important; }
html.dark .bg-amber-100 { background: rgba(245,158,11,.18) !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color:#fcd34d !important; }
html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245,158,11,.35) !important; }

html.dark .bg-sky-50 { background: rgba(14,165,233,.10) !important; }
html.dark .bg-sky-100 { background: rgba(14,165,233,.18) !important; }
html.dark .text-sky-600, html.dark .text-sky-700 { color:#7dd3fc !important; }
html.dark .border-sky-200 { border-color: rgba(14,165,233,.35) !important; }

html.dark .bg-rose-50 { background: rgba(244,63,94,.10) !important; }
html.dark .bg-rose-100 { background: rgba(244,63,94,.18) !important; }
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800 { color:#fda4af !important; }
html.dark .border-rose-200, html.dark .border-rose-300 { border-color: rgba(244,63,94,.35) !important; }

html.dark .bg-red-50 { background: rgba(239,68,68,.10) !important; }
html.dark .bg-red-100 { background: rgba(239,68,68,.18) !important; }
html.dark .text-red-600, html.dark .text-red-700 { color:#fca5a5 !important; }
html.dark .border-red-200, html.dark .border-red-300 { border-color: rgba(239,68,68,.35) !important; }

html.dark .bg-violet-50 { background: rgba(139,92,246,.10) !important; }
html.dark .bg-violet-100 { background: rgba(139,92,246,.18) !important; }
html.dark .text-violet-700, html.dark .text-violet-800 { color:#c4b5fd !important; }
html.dark .border-violet-200 { border-color: rgba(139,92,246,.35) !important; }

html.dark .bg-purple-100 { background: rgba(168,85,247,.18) !important; }
html.dark .text-purple-700 { color:#d8b4fe !important; }

html.dark .bg-brand-50 { background: rgba(0,150,136,.12) !important; }
html.dark .bg-brand-100 { background: rgba(0,150,136,.20) !important; }
html.dark .text-brand-700, html.dark .text-brand-800 { color:#4db6ac !important; }
html.dark .border-brand-200, html.dark .border-brand-300 { border-color: rgba(0,150,136,.40) !important; }

html.dark .bg-indigo-100 { background: rgba(99,102,241,.18) !important; }
html.dark .text-indigo-600, html.dark .text-indigo-700 { color:#a5b4fc !important; }

/* ===== Table polish ===================================================== */
/* Header row: a touch darker than the data rows in both themes. */
.pf-thead { background: #e8edf3; }
html.dark .pf-thead { background: #0a111e !important; }

/* Sort arrows: hidden until you hover the header (or the column is active). */
.pf-sort { opacity: 0; transition: opacity .12s ease; }
th:hover .pf-sort, .pf-sort.pf-active { opacity: 1; }

/* Drag-to-resize handle on the right edge of a header cell. */
th.pf-col { position: relative; }
.pf-resize {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none;
}
.pf-resize:hover, .pf-resize.pf-resizing { background: rgba(0,150,136,.35); }

/* ===== Shared polish (both themes) ====================================== */
:focus-visible { outline: 2px solid #00897b; outline-offset: 1px; }
a, button { transition: color .12s ease, background-color .12s ease; }