/* ============================================================================
   ui.css — the app-wide DESIGN SYSTEM layer (loaded after app.css + shell.css,
   so its single-class overrides win on equal specificity).

   Purpose: upgrade every module/page at once by restyling the shared utility
   patterns the 119 templates already use, and BIND the whole app to the admin
   theme (Settings ▸ Appearance) instead of hard-coded blues:

     • every blue-* accent utility  → var(--accent)/--link family
     • dark neutral pills/bands     → var(--sb-bg) (the theme's ink colour)
     • cards                        → soft layered elevation
     • tables, inputs, buttons      → consistent focus, hover and motion

   The DEFAULT theme's accent (#2563eb) equals Tailwind blue-600, so with the
   default preset the app looks identical — pick Dusty/Emerald/Ocean and the
   entire app recolours coherently. Semantic colours (emerald/amber/rose) are
   deliberately NOT remapped — they encode state, not brand.
   ========================================================================== */

/* ---- 1. Accent utilities → theme ------------------------------------------ */
.bg-blue-600, .bg-blue-500 { background-color: var(--accent, #2563eb); }
.hover\:bg-blue-700:hover  { background-color: var(--accent-hover, #1d4ed8); }
.bg-blue-700               { background-color: var(--accent-hover, #1d4ed8); }

.text-blue-600 { color: var(--link, #2563eb); }
.text-blue-700, .text-blue-800 { color: var(--link-hover, #1e40af); }
.text-blue-500, .text-blue-400 {
  color: color-mix(in srgb, var(--link, #2563eb) 65%, transparent); }
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover,
.hover\:text-blue-800:hover { color: var(--link-hover, #1e40af); }

.bg-blue-50, .bg-blue-100  { background-color: var(--accent-soft, #eff6ff); }
.bg-blue-50\/40, .bg-blue-50\/50 {
  background-color: color-mix(in srgb, var(--accent-soft, #eff6ff) 55%, transparent); }
.hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover {
  background-color: var(--accent-soft, #eff6ff); }
.hover\:bg-blue-200:hover {
  background-color: color-mix(in srgb, var(--accent, #2563eb) 22%, #ffffff); }

.border-blue-100 { border-color: color-mix(in srgb, var(--accent, #2563eb) 16%, #ffffff); }
.border-blue-200 { border-color: color-mix(in srgb, var(--accent, #2563eb) 28%, #ffffff); }
.border-blue-300, .hover\:border-blue-300:hover
  { border-color: color-mix(in srgb, var(--accent, #2563eb) 42%, #ffffff); }
.hover\:border-blue-400:hover
  { border-color: color-mix(in srgb, var(--accent, #2563eb) 58%, #ffffff); }
.ring-blue-300 { --tw-ring-color: color-mix(in srgb, var(--accent, #2563eb) 40%, #ffffff); }
.hover\:ring-blue-200:hover
  { --tw-ring-color: color-mix(in srgb, var(--accent, #2563eb) 26%, #ffffff); }
.focus\:ring-blue-200:focus
  { --tw-ring-color: color-mix(in srgb, var(--accent, #2563eb) 26%, #ffffff); }

/* the few indigo-branded buttons (AI actions) follow the accent too */
.bg-indigo-600 { background-color: var(--accent, #4f46e5); }
.hover\:bg-indigo-700:hover { background-color: var(--accent-hover, #4338ca); }

/* ---- 2. Dark neutrals → theme ink ------------------------------------------ */
/* active pills, pager current page, primary dark buttons */
.bg-slate-900 { background-color: var(--sb-bg, #0f172a); }
.bg-slate-800 { background-color: color-mix(in srgb, var(--sb-bg, #0f172a) 92%, #ffffff); }
.hover\:bg-slate-800:hover
  { background-color: color-mix(in srgb, var(--sb-bg, #0f172a) 86%, #ffffff); }
/* the KPI stat bands (pipeline / prospect / lead-status) — theme-aware gradient */
.bg-\[\#1b3a6b\] {
  background: linear-gradient(135deg, var(--sb-bg, #131133) 0%,
              color-mix(in srgb, var(--sb-bg, #131133) 74%, var(--accent, #7168EE)) 100%); }

/* ---- 3. Cards: soft layered elevation -------------------------------------- */
.bg-white.rounded-xl {
  box-shadow: 0 1px 3px rgba(19, 17, 51, .05), 0 8px 24px -14px rgba(19, 17, 51, .09); }
.rounded-xl.border-slate-200 { border-color: #e9edf3; }
@media print { .bg-white.rounded-xl { box-shadow: none; } }

/* ---- 4. Tables -------------------------------------------------------------- */
thead th { font-weight: 600; }
tbody tr { transition: background-color .12s ease; }
/* subtle accent-tinted hover where a template didn't define its own */
tbody tr:hover > td {
  background-color: color-mix(in srgb, var(--accent, #2563eb) 3%, transparent); }

/* ---- 5. Inputs: consistent focus affordance --------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
select:focus, textarea:focus, [contenteditable="true"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #2563eb) 55%, #ffffff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 14%, transparent); }

/* ---- 6. Buttons & links: micro-motion ---------------------------------------- */
button, a { transition: background-color .15s ease, color .15s ease,
            border-color .15s ease, box-shadow .15s ease; }
button:active { transform: translateY(.5px); }
button:disabled { transform: none; }

/* ---- 7. Details / expander polish -------------------------------------------- */
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { color: #b6bfca; }

/* ---- 8. Scrollbars (WebKit) ---------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d3dae3; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #b9c3cf; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 9. UI kit: KPI stat cards (shared across modules, see _ui_kit.html) ---- */
.uk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.uk-kpi { background: #fff; border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 1px 3px rgba(19,17,51,.05), 0 8px 24px -14px rgba(19,17,51,.09); }
.uk-lab { font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #8b95a5;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.uk-ico { width: 30px; height: 30px; border-radius: 8px; display: grid;
  place-items: center; font-size: 14px; flex: none; }
.uk-val { font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.uk-sub { font-size: 11.5px; font-weight: 600; color: #8b95a5; }
.uk-head .uk-ico { background: var(--accent-soft, #eff6ff); color: var(--accent, #2563eb); }
.uk-head .uk-val { color: var(--accent, #2563eb); }
.uk-good .uk-ico { background: #E8F6EF; color: #46B277; }
.uk-good .uk-sub { color: #46B277; }
.uk-warn .uk-ico { background: #FDEFE7; color: #E77636; }
.uk-warn .uk-sub { color: #E77636; }
.uk-bad  .uk-ico { background: #FDEAF0; color: #E7366B; }
.uk-bad  .uk-sub { color: #E7366B; }
.uk-info .uk-ico { background: #E4F8FC; color: #01B8DE; }
@media print { .uk-kpi { box-shadow: none; border: 1px solid #e5e7eb; } }

/* ---- 10. Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button, a, tbody tr { transition: none !important; }
  button:active { transform: none; }
}