/* ChargeFlow — design tokens + the custom layer on top of Tailwind.
   Colours are "R G B" triples so Tailwind's /opacity modifiers keep working.
   Light is the default; [data-theme="dark"] overrides it. */

/* ---------- light (default) ------------------------------------------- */
:root {
  color-scheme: light;

  --canvas:   247 248 250;
  --surface:  255 255 255;
  --raised:   243 245 249;
  --track:    229 233 240;
  --hair:     226 230 238;
  --fg:        11  18  32;
  --fg2:       51  65  85;
  --muted:    100 116 139;
  --faint:    148 163 184;
  --field:    255 255 255;
  --elevated: 255 255 255;

  --brand:       16 168 116;
  --brand-deep:   6 122  83;
  --brand-soft: 110 231 183;
  --brand-text:   5 110  74;
  --on-brand:   255 255 255;

  --info:        37  99 235;
  --info-text:   29  78 216;
  --danger:     225  45  70;
  --danger-text:190  24  60;
  --warn:       217 119   6;
  --warn-text:  180  83   9;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -18px rgba(15, 23, 42, .28);
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, .06), 0 26px 52px -24px rgba(15, 23, 42, .36);
  --shadow-glow: 0 1px 2px rgba(6, 122, 83, .28), 0 16px 36px -18px rgba(16, 168, 116, .55);

  --scrim: 15 23 42;
  --page-wash: radial-gradient(circle at 72% -12%, rgba(16, 168, 116, .06) 0, transparent 46%);
}

/* ---------- dark ------------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:     7   9  15;
  --surface:   16  20  30;
  --raised:    26  32  46;
  --track:     35  43  60;
  --hair:      37  45  62;
  --fg:       248 250 252;
  --fg2:      203 213 225;
  --muted:    130 143 163;
  --faint:     85 100 122;
  --field:     11  14  22;
  --elevated:  18  22  31;

  --brand:       34 201 138;
  --brand-deep:  18 169 115;
  --brand-soft: 127 243 192;
  --brand-text: 127 243 192;
  --on-brand:     7   9  15;

  --info:        96 165 250;
  --info-text:   96 165 250;
  --danger:     244  85 105;
  --danger-text:253 164 175;
  --warn:       245 158  11;
  --warn-text:  252 211  77;

  --shadow-card: inset 0 1px 0 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .9);
  --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, .07), 0 28px 60px -28px rgba(0, 0, 0, 1);
  --shadow-glow: 0 0 0 1px rgba(34, 201, 138, .25), 0 22px 60px -26px rgba(34, 201, 138, .55);

  --scrim: 2 4 8;
  --page-wash: radial-gradient(circle at 72% -12%, rgba(34, 201, 138, .10) 0, transparent 42%);
}

html { -webkit-tap-highlight-color: transparent; }
/* The ambient blobs read far stronger over white than over near-black. */
.theme-blob { opacity: .45; }
:root[data-theme="dark"] .theme-blob { opacity: 1; }
body { background-image: var(--page-wash); }

/* Smooth the swap, but never animate the first paint. */
.theme-transition, .theme-transition * {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease !important;
}

/* --- scrollbars ------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--faint) / .45) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--faint) / .45); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--muted) / .7); background-clip: content-box; }

/* --- native controls -------------------------------------------------- */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select { background-image: none; }

/* --- charts ----------------------------------------------------------- */
.chart-canvas-wrap { position: relative; width: 100%; }
.chart-canvas-wrap > canvas { display: block; width: 100% !important; }

/* --- motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* staggered card entrance */
.stagger > * { animation: cf-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
.stagger > *:nth-child(1) { animation-delay: .02s }
.stagger > *:nth-child(2) { animation-delay: .06s }
.stagger > *:nth-child(3) { animation-delay: .10s }
.stagger > *:nth-child(4) { animation-delay: .14s }
.stagger > *:nth-child(5) { animation-delay: .18s }
.stagger > *:nth-child(6) { animation-delay: .22s }
.stagger > *:nth-child(7) { animation-delay: .26s }
@keyframes cf-rise { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background: rgb(var(--raised)); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(var(--surface) / .85), transparent);
  animation: cf-shimmer 1.6s infinite;
}
@keyframes cf-shimmer { to { transform: translateX(100%) } }

/* toast */
.toast-in { animation: cf-toast .3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cf-toast { from { opacity: 0; transform: translate(-50%, 14px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* modal */
.dialog-in { animation: cf-dialog .28s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cf-dialog { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }

/* --- responsive table: stacked cards on small screens ----------------- */
@media (max-width: 767px) {
  .rtable thead { display: none; }
  .rtable tbody { display: grid; gap: .625rem; }
  .rtable tr {
    position: relative; display: block;
    border: 1px solid rgb(var(--hair)); border-radius: .875rem;
    padding: .875rem 2.5rem .875rem .875rem; background: rgb(var(--raised) / .55);
  }
  .rtable td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    border: 0 !important; padding: .2rem 0 !important; white-space: normal;
  }
  .rtable td::before {
    content: attr(data-label); flex: none;
    color: rgb(var(--muted)); font-size: .72rem; font-weight: 500; letter-spacing: .02em;
  }
  .rtable td.row-action { position: absolute; top: .5rem; right: .5rem; padding: 0 !important; }
  .rtable td.row-action::before { content: none; }
}

/* Tailwind display utilities out-specify preflight's [hidden]. */
[hidden] { display: none !important; }