/* UI_FOUNDATION_2026_07_25 — design-system token + component layer.
 *
 * Loaded once from base.html (served under /static, allowed by style-src
 * 'self'). This file carries the STATIC half of the design system:
 *   - neutral + semantic tokens (colour roles that are NOT tenant-branded)
 *   - the type / space / radius / shadow / motion scale
 *   - component classes Tailwind utilities can't express cleanly (skeleton
 *     shimmer, htmx-indicator, focus-ring defaults, reduced-motion guard,
 *     print rules, toast motion, scroll-elevation).
 *
 * The tenant-BRANDED tokens (--ui-accent*, --ui-brand*) are injected at
 * render time in base.html's <style id="ui-tokens"> from tenant.brand.colors
 * (RULE 1 — never hardcode a brand colour here). This file only *consumes*
 * those variables; it never defines a brand colour value.
 */

/* ------------------------------------------------------------------ *
 *  TOKENS — neutral + semantic (brand tokens come from base.html)
 * ------------------------------------------------------------------ */
:root {
  /* Surfaces + text (light) */
  --ui-bg:          #ffffff;
  --ui-surface:     #ffffff;
  --ui-surface-2:   #f8fafc;   /* slate-50  — subtle raised / striped rows */
  --ui-surface-3:   #f1f5f9;   /* slate-100 — chips, skeleton base         */
  --ui-border:      #e2e8f0;   /* slate-200 — hairline card border         */
  --ui-border-strong:#cbd5e1;  /* slate-300 — input border                 */
  --ui-text:        #252525;
  --ui-muted:       #64748b;   /* slate-500 — secondary text               */
  --ui-faint:       #94a3b8;   /* slate-400 — captions / placeholder       */

  /* Semantic roles (status). *-soft = tinted surface, *-fg = text-on-soft. */
  --ui-success:      #059669;  --ui-success-soft: #ecfdf5;  --ui-success-fg: #065f46;  --ui-success-bd: #a7f3d0;
  --ui-warn:         #d97706;  --ui-warn-soft:    #fffbeb;  --ui-warn-fg:    #92400e;  --ui-warn-bd:    #fcd34d;
  --ui-danger:       #dc2626;  --ui-danger-soft:  #fef2f2;  --ui-danger-fg:  #991b1b;  --ui-danger-bd:  #fecaca;
  --ui-info:         #0284c7;  --ui-info-soft:    #f0f9ff;  --ui-info-fg:    #075985;  --ui-info-bd:    #bae6fd;
  --ui-neutral-soft: #f1f5f9;  --ui-neutral-fg:   #475569;  --ui-neutral-bd: #e2e8f0;

  /* Radius scale */
  --ui-radius-sm: 6px;
  --ui-radius:    10px;   /* default card / control                       */
  --ui-radius-lg: 14px;   /* feature panels, modals                       */
  --ui-radius-pill: 9999px;

  /* Elevation — 3 deliberate levels + a lifted hover */
  --ui-shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --ui-shadow-2: 0 2px 4px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.06);
  --ui-shadow-3: 0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --ui-shadow-focus: 0 0 0 3px var(--ui-focus-ring, rgba(0,72,61,.28));

  /* Motion */
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
  --ui-dur:  170ms;
}

/* ------------------------------------------------------------------ *
 *  MOTION defaults + reduced-motion guard
 * ------------------------------------------------------------------ */
.ui-transition { transition: background-color var(--ui-dur) var(--ui-ease),
                             color var(--ui-dur) var(--ui-ease),
                             border-color var(--ui-dur) var(--ui-ease),
                             box-shadow var(--ui-dur) var(--ui-ease),
                             transform var(--ui-dur) var(--ui-ease),
                             opacity var(--ui-dur) var(--ui-ease); }

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

/* ------------------------------------------------------------------ *
 *  FOCUS — one canonical keyboard focus ring (brand-tinted)
 * ------------------------------------------------------------------ */
.ui-focus:focus-visible,
.ui-btn:focus-visible,
.ui-input:focus-visible,
.ui-field:focus-visible {
  outline: 2px solid var(--ui-accent, #00483D);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

/* ------------------------------------------------------------------ *
 *  BUTTONS — .ui-btn base + hierarchy + sizes
 * ------------------------------------------------------------------ */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  padding: .5rem .85rem; font-size: .8125rem;
  transition: background-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              transform var(--ui-dur) var(--ui-ease);
}
.ui-btn:active { transform: translateY(.5px); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

.ui-btn--sm { padding: .3rem .6rem;  font-size: .75rem; }
.ui-btn--lg { padding: .65rem 1.1rem; font-size: .9375rem; }

.ui-btn--primary   { background: var(--ui-accent); color: var(--ui-accent-contrast, #fff); }
.ui-btn--primary:hover   { background: var(--ui-accent-hover, var(--ui-accent)); }
.ui-btn--secondary { background: var(--ui-surface); color: var(--ui-accent); border-color: var(--ui-border-strong); }
.ui-btn--secondary:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.ui-btn--ghost     { background: transparent; color: var(--ui-accent); }
.ui-btn--ghost:hover     { background: var(--ui-accent-soft); }
.ui-btn--danger    { background: var(--ui-danger); color: #fff; }
.ui-btn--danger:hover    { background: var(--ui-danger-fg); }
.ui-btn--highlight { background: var(--ui-highlight, #EAFB3C); color: var(--ui-brand, #00483D); border-color: rgba(0,0,0,.08); }
.ui-btn--highlight:hover { filter: brightness(.96); }

/* ------------------------------------------------------------------ *
 *  CARDS + surfaces
 * ------------------------------------------------------------------ */
.ui-card {
  background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-1);
}
.ui-card--pad { padding: 1.25rem; }
.ui-card--hover { transition: box-shadow var(--ui-dur) var(--ui-ease),
                              border-color var(--ui-dur) var(--ui-ease),
                              transform var(--ui-dur) var(--ui-ease); }
.ui-card--hover:hover { box-shadow: var(--ui-shadow-2); border-color: color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border)); }

/* ------------------------------------------------------------------ *
 *  STAT TILE
 * ------------------------------------------------------------------ */
.ui-stat { display:block; padding: 1rem; border-radius: var(--ui-radius);
           border: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-stat__label { font-size: .625rem; font-weight: 700; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--ui-muted); }
.ui-stat__value { font-size: 1.875rem; font-weight: 700; line-height: 1.1;
                  margin-top: .25rem; color: var(--ui-brand, var(--ui-accent));
                  font-variant-numeric: tabular-nums; }
.ui-stat__hint  { font-size: .6875rem; color: var(--ui-faint); margin-top: .15rem; }
a.ui-stat { transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease); }
a.ui-stat:hover { border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-border)); box-shadow: var(--ui-shadow-1); }

/* ------------------------------------------------------------------ *
 *  BADGES / STATUS PILLS — canonical status→colour map
 * ------------------------------------------------------------------ */
.ui-badge {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  padding: .25rem .5rem; border-radius: var(--ui-radius-pill);
  border: 1px solid transparent; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
.ui-badge--success { background: var(--ui-success-soft); color: var(--ui-success-fg); border-color: var(--ui-success-bd); }
.ui-badge--warn    { background: var(--ui-warn-soft);    color: var(--ui-warn-fg);    border-color: var(--ui-warn-bd); }
.ui-badge--danger  { background: var(--ui-danger-soft);  color: var(--ui-danger-fg);  border-color: var(--ui-danger-bd); }
.ui-badge--info    { background: var(--ui-info-soft);    color: var(--ui-info-fg);    border-color: var(--ui-info-bd); }
.ui-badge--neutral { background: var(--ui-neutral-soft); color: var(--ui-neutral-fg); border-color: var(--ui-neutral-bd); }
.ui-badge--brand   { background: var(--ui-accent-soft);  color: var(--ui-brand, var(--ui-accent)); border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent); }

/* ------------------------------------------------------------------ *
 *  TABLES — sticky header, row hover, zebra option
 * ------------------------------------------------------------------ */
.ui-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ui-table thead th {
  text-align: left; font-size: .625rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ui-muted);
  padding: .5rem .5rem; border-bottom: 1px solid var(--ui-border);
}
.ui-table--sticky thead th { position: sticky; top: 0; background: var(--ui-surface); z-index: 1; }
.ui-table tbody td { padding: .5rem .5rem; border-bottom: 1px solid var(--ui-surface-3); vertical-align: top; }
.ui-table tbody tr { transition: background-color 120ms var(--ui-ease); }
.ui-table tbody tr:hover { background: var(--ui-accent-soft); }
.ui-table--zebra tbody tr:nth-child(even) { background: var(--ui-surface-2); }
.ui-table--zebra tbody tr:hover { background: var(--ui-accent-soft); }

/* ------------------------------------------------------------------ *
 *  SKELETON — shimmer loading placeholder
 * ------------------------------------------------------------------ */
.ui-skeleton {
  position: relative; overflow: hidden; border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-3);
}
.ui-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: ui-shimmer 1.3s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }
.ui-skeleton-line { height: .75rem; margin: .35rem 0; }
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton::after { animation: none; }
}

/* ------------------------------------------------------------------ *
 *  HTMX indicator — hidden until a request is in flight
 * ------------------------------------------------------------------ */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ------------------------------------------------------------------ *
 *  EMPTY STATE
 * ------------------------------------------------------------------ */
.ui-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ui-muted); }
.ui-empty__icon { font-size: 2rem; opacity: .55; }
.ui-empty__title { font-weight: 600; color: var(--ui-text); margin-top: .5rem; }
.ui-empty__msg { font-size: .8125rem; margin-top: .15rem; }

/* ------------------------------------------------------------------ *
 *  TOASTS — slide-in motion + pause-on-hover
 * ------------------------------------------------------------------ */
.ui-toast { transition: opacity 300ms var(--ui-ease), transform 300ms var(--ui-ease); }
.ui-toast[data-paused="1"] { /* paused: dismiss timer halted in JS */ }

/* ------------------------------------------------------------------ *
 *  SCROLL ELEVATION — top bar gains a shadow once the page is scrolled
 * ------------------------------------------------------------------ */
[data-elevate-on-scroll].is-scrolled {
  box-shadow: var(--ui-shadow-2);
  backdrop-filter: saturate(1.4) blur(6px);
}

/* ------------------------------------------------------------------ *
 *  MODAL / DRAWER shell motion
 * ------------------------------------------------------------------ */
.ui-modal-overlay { transition: opacity var(--ui-dur) var(--ui-ease); }
.ui-modal-panel   { transition: opacity var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease); }
.ui-modal[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 *  PRINT — hide chrome, flatten surfaces
 * ------------------------------------------------------------------ */
@media print {
  header, footer, nav, .ui-no-print,
  #flow-toasts, [data-cmdk-open], #cmdk-overlay { display: none !important; }
  .ui-card, .ui-stat { box-shadow: none !important; border-color: #ddd !important; }
  main { padding: 0 !important; max-width: none !important; }
  a[href]::after { content: ""; }
}