/* ============================================================
   FLUXATH CRM — Stripe-inspired container primitives
   (Phase 2B of stripe-reskin-2026-05-24)

   Scope: cards (.card, .card-feature), tables (.table, thead/tbody
   rhythm, sticky headers), modals (.modal-backdrop / .modal),
   drawers / side panels, toasts (.toast).

   Rules consume tokens from tokens-stripe.css (--rad-lg, --rad-xl,
   --shadow-soft-blue-2, --shadow-soft-blue-3, --ease-stripe,
   --row-pad-*, --cell-pad-*). Color tokens stay sourced from
   style.css.

   NO template logic edits. NO data-action wiring changes. CSS only.
   ============================================================ */

/* ============================================================
   1. CARDS
   .card       — generic surface card
   .card-feature — NEW utility class; feature-explanation card
                   matching DESIGN.md card-feature-light spec.
   Padding: --row-pad-x * 2 = 32px comfortable / 24px compact.
   NOTE: td.num numeric tnum is applied in section 2 (tables).
   ============================================================ */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-lg);
  padding: calc(var(--row-pad-x) * 2);
  box-shadow: var(--shadow-soft-blue-1);
  transition:
    box-shadow var(--dur-fast) var(--ease-stripe),
    transform  var(--dur-fast) var(--ease-stripe);
}

.card:hover {
  box-shadow: var(--shadow-soft-blue-2);
  transform: translateY(-1px);
}

/* .card-feature — NEW utility, matches DESIGN.md card-feature-light */
.card-feature {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-lg);
  padding: calc(var(--row-pad-x) * 2);
  box-shadow: var(--shadow-soft-blue-1);
  transition:
    box-shadow var(--dur-fast) var(--ease-stripe),
    transform  var(--dur-fast) var(--ease-stripe);
}

.card-feature:hover {
  box-shadow: var(--shadow-soft-blue-2);
  transform: translateY(-1px);
}

/* ============================================================
   2. TABLES
   .table             — root table element
   .table thead       — header band
   .table tbody tr    — data rows
   .table th          — header cells
   .table td          — data cells
   .table td.num      — numeric cells: tnum + tabular tracking
   .table.sticky-head — NEW utility: sticky thead
   ============================================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-tab);
  letter-spacing: var(--tracking-tabular);
}

.table thead {
  border-bottom: 1px solid var(--border);
}

.table th {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  font: var(--type-caption);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: left;
}

.table td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

/* Numeric cells — tabular figures + tight tracking (Stripe financial DNA) */
.table td.num {
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tabular);
  text-align: right;
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

/* Sticky-head variant — requires .table.sticky-head */
.table.sticky-head thead {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 2;
}

/* ============================================================
   3. MODALS
   .modal-backdrop — full-screen scrim + blur
   .modal          — dialog surface

   Entry animation uses modal-in keyframe defined below.
   No forced max-width — templates set their own widths.
   ============================================================ */

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay, 100);
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-xl);
  padding: calc(var(--row-pad-x) * 2);
  box-shadow: var(--shadow-soft-blue-3);
  animation: modal-in var(--dur-med) var(--ease-stripe);
}

/* ============================================================
   4. DRAWERS — NEW utility classes
   .drawer-right  — slides in from the right edge
   .drawer-left   — slides in from the left edge
   Controlled by toggling .open on the element.
   Width: 420px; collapses to 100vw on mobile.
   ============================================================ */

.drawer-right,
.drawer-left {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft-blue-3);
  z-index: var(--z-panel, 200);
  overflow-y: auto;
  transition: transform var(--dur-med) var(--ease-stripe);
}

.drawer-right {
  right: 0;
  transform: translateX(100%);
  border-radius: var(--rad-xl) 0 0 var(--rad-xl);
}

.drawer-left {
  left: 0;
  transform: translateX(-100%);
  border-radius: 0 var(--rad-xl) var(--rad-xl) 0;
}

.drawer-right.open,
.drawer-left.open {
  transform: translateX(0);
}

@media (max-width: 480px) {
  .drawer-right,
  .drawer-left {
    width: 100vw;
    border-radius: 0;
  }
}

/* ============================================================
   5. TOASTS — upgrade of existing .toast
   Position: fixed bottom-right (matches existing pattern).
   Variants: .success .error .warn .info use a 3px left accent stripe.
   NOTE: .ok / .err are existing aliases; .success / .error added as
   NEW utility variants matching the spec.
   ============================================================ */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  padding: 12px 16px;
  font: var(--type-body-md);
  color: var(--ink);
  box-shadow: var(--shadow-soft-blue-2);
  z-index: var(--z-toast, 9100);
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition:
    opacity  var(--dur-fast) var(--ease-stripe),
    transform var(--dur-fast) var(--ease-stripe);
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Semantic accent stripe — 3px left border */
.toast.success { border-left: 3px solid var(--ok);     background: var(--ok-soft);     color: var(--ok);     }
.toast.error   { border-left: 3px solid var(--danger);  background: var(--danger-soft);  color: var(--danger);  }
.toast.warn    { border-left: 3px solid var(--warn);    background: var(--warn-soft);    color: var(--warn);    }
.toast.info    { border-left: 3px solid var(--info);    background: var(--info-soft);    color: var(--info);    }

/* Keep existing .ok / .err aliases working */
.toast.ok  { border-left: 3px solid var(--ok);    background: var(--ok-soft);    color: var(--ok);    }
.toast.err { border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   6. FLASHES — inline status banners (non-floating)
   .flash            — base
   .flash-success    — NEW alias matching spec (.flash-ok exists)
   .flash-error      — NEW alias matching spec (.flash-error exists)
   .flash-warning    — NEW alias
   .flash-info       — NEW alias
   Same 3px accent-stripe pattern as toasts, but inline.
   ============================================================ */

.flash {
  padding: 10px 14px;
  border-radius: var(--rad-md);
  margin-bottom: 16px;
  font: var(--type-body-md);
  box-shadow: var(--shadow-soft-blue-1);
}

/* Existing .flash-ok stays unchanged; add a .flash-success alias */
.flash-success {
  background: var(--ok-soft);
  color: var(--ok);
  border-left: 3px solid var(--ok);
}

/* .flash-error already exists in style.css; reinforce with accent stripe */
.flash-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-left: 3px solid var(--danger);
}

/* .flash-warning — NEW alias for .flash-warn */
.flash-warning {
  background: var(--warn-soft);
  color: var(--warn);
  border-left: 3px solid var(--warn);
}

/* .flash-info — NEW */
.flash-info {
  background: var(--info-soft);
  color: var(--info);
  border-left: 3px solid var(--info);
}

/* ============================================================
   7. REDUCED-MOTION — zero durations; respect user preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .card,
  .card-feature,
  .toast,
  .modal,
  .drawer-right,
  .drawer-left {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
}