/* ============================================================================
   app-ui.css — Shared UI design system for the AgPerspective admin dashboard.

   THE single source of truth for chips, badges, count chips, delete controls,
   and buttons across every admin view (FSA-578 / Document Splitter / Router).

   Extracted from the canonical "Email Documents" page
   (email-router/views/email-router-log.html), picked by the product owner as the
   reference for colour scheme, chip style and the trash-icon delete.

   ── Why hand-written CSS (not Tailwind @apply)? ──────────────────────────────
   Tailwind ships to these pages via the CDN runtime (cdn.tailwindcss.com), which
   does NOT process @apply. So the canonical Tailwind classes are reproduced here
   as plain CSS with their literal hex values (Tailwind v3 default palette). These
   classes are usable both from static markup and from the JS string-builders the
   pages already use — just plain class names, no build step.

   ── Semantic meaning is fixed ────────────────────────────────────────────────
   green = done/success · red = error/failed · amber = warning/partial/review ·
   blue = in-progress · purple = routing · gray = pending. Standardise the FORM
   of a chip, never recolour its MEANING.
   ============================================================================ */

/* ── Status pill ──────────────────────────────────────────────────────────────
   Markup: <span class="pill pill-done"><span class="pill-dot"></span>Done</span>
   One tone class per semantic state; the leading dot is coloured by the tone. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.pill-done {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.pill-done .pill-dot {
  background: #22c55e;
}

.pill-error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.pill-error .pill-dot {
  background: #ef4444;
}

.pill-progress {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.pill-progress .pill-dot {
  background: #3b82f6;
}

.pill-routing {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}
.pill-routing .pill-dot {
  background: #a855f7;
}

.pill-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.pill-warning .pill-dot {
  background: #f59e0b;
}

.pill-pending {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
.pill-pending .pill-dot {
  background: #9ca3af;
}

/* Indigo — "planned / dry-run": an intention, deliberately distinct from
   done/success (green) and pending (gray) so a dry-run is never mistaken for a
   real outcome. */
.pill-indigo {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}
.pill-indigo .pill-dot {
  background: #6366f1;
}

/* Teal — the SFTP intake source chip; a fourth distinct source colour alongside
   email (blue), splitter (purple) and manual (amber). */
.pill-teal {
  background: #f0fdfa;
  color: #0f766e;
  border-color: #99f6e4;
}
.pill-teal .pill-dot {
  background: #14b8a6;
}

/* Optional pulsing dot for active/in-progress states (canonical "Sorting").
   Add alongside a tone: <span class="pill-dot pill-dot-pulse"></span> */
.pill-dot-pulse {
  animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes aui-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── Badge (doc type / role / label) ─────────────────────────────────────────
   Default tone is indigo (canonical doc-type badge). Tone variants for other
   categories keep the same shape. */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
}
.badge-gray {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
.badge-green {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.badge-amber {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.badge-red {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.badge-purple {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}
.badge-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

/* ── Count chip (e.g. routed count) ──────────────────────────────────────────
   Amber/orange chip, usually with a small leading icon. */
.count-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: #fff4e6;
  color: #b45309;
  border: 1px solid #fed7aa;
}

/* Muted em-dash placeholder for an empty cell/value. */
.cell-empty {
  color: #c4c4c4;
}

/* ── Delete control ──────────────────────────────────────────────────────────
   Icon-only grey→red trash. NEVER a solid-red text button.
   Markup: <button class="icon-delete">{TRASH_ICON}</button> */
.icon-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: #c4c4c4;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.icon-delete:hover {
  color: #dc2626;
}
.icon-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Uniform padding (px-5 py-2) + weight. Primary = gold with white text. */
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.btn-primary {
  background: #dcb424;
  color: #ffffff;
}
.btn-primary:hover {
  background: #c6a11f;
}
.btn-secondary {
  background: #ffffff;
  color: #2c2c2c;
  border-color: #ededed;
}
.btn-secondary:hover {
  background: #f9fafb;
}
.btn-danger {
  background: #dc2626;
  color: #ffffff;
}
.btn-danger:hover {
  background: #b91c1c;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Compact size for in-table / inline actions. Combine with a tone:
   class="btn-primary btn-sm". */
.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  gap: 0.375rem;
}

/* ── Input focus ring ────────────────────────────────────────────────────────
   Gold ring to match the brand accent. Add .app-input to a text input/select. */
.app-input {
  border: 1px solid #ededed;
  border-radius: 0.5rem;
}
.app-input:focus {
  outline: none;
  border-color: #dcb424;
  box-shadow: 0 0 0 2px rgba(220, 180, 36, 0.3);
}

/* ── Accordion open/close animation (the app-wide standard) ───────────────────
   Anything that expands/collapses in place should animate with this. Two forms,
   same 260ms ease feel:

   1) A native disclosure — add `ui-accordion` to a <details>:
        <details class="ui-accordion"><summary>…</summary> …content… </details>
      Animated purely in CSS via ::details-content + interpolate-size (Chromium/
      Safari). Older engines simply open/close instantly — graceful degradation,
      no broken layout.

   2) A custom (non-<details>) collapsible — table detail rows, JS dropdowns:
        <div class="accordion-panel"><div class="accordion-inner"><div class="p-4">…</div></div></div>
      Toggle the `.open` class on the outer .accordion-panel. The grid-rows
      0fr→1fr trick animates height smoothly without a hard-coded pixel height.
      ⚠️ .accordion-inner is the CLIP layer — keep it padding/border-free, or a
      `0fr` track can't shrink below that padding and the panel won't fully close.
      Put any padding on a child INSIDE .accordion-inner (as shown above). */

/* Enables animating to/from intrinsic sizes (e.g. `auto`) — required for form 1. */
:root {
  interpolate-size: allow-keywords;
}

details.ui-accordion::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.26s ease,
    content-visibility 0.26s ease allow-discrete;
}
details.ui-accordion[open]::details-content {
  block-size: auto;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.accordion-panel > .accordion-inner {
  overflow: hidden;
  min-height: 0;
}
.accordion-panel.open {
  grid-template-rows: 1fr;
}

/* Respect users who ask the OS to reduce motion — collapse instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
  details.ui-accordion::details-content,
  .accordion-panel {
    transition: none;
  }
}