/* ─── CSS Custom Properties ──────────────────────────────────────────────────
   Single source of truth for the design scale.
   All arbitrary Tailwind values (text-[13px], etc.) correspond to these vars.
─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Typography scale */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Spacing */
  --space-card-padding: 16px;
  --space-section-gap:  24px;
  --space-element-gap:  12px;

  /* Primitive blue scale */
  --blue-50:               #eff6ff;
  --blue-100:              #dbeafe;
  --blue-200:              #bfdbfe;
  --blue-300:              #93c5fd;
  --blue-400:              #60a5fa;
  --blue-500:              #3b82f6;
  --blue-600:              #2563eb;
  --blue-700:              #1d4ed8;
  --blue-800:              #1e40af;
  --blue-900:              #1e3a8a;

  /* Semantic color tokens */
  --color-bg:              #f8fbff;
  --color-surface:         #ffffff;
  --color-surface-soft:    #f4f9ff;
  --color-surface-muted:   var(--blue-50);
  --color-primary:         var(--blue-700);
  --color-primary-hover:   var(--blue-800);
  --color-primary-active:  var(--blue-900);
  --color-primary-soft:    var(--blue-100);
  --color-primary-border:  var(--blue-200);
  --color-text:            #0f172a;
  --color-text-secondary:  #475569;
  --color-text-muted:      #64748b;
  --color-border:          #dbe7f7;
  --color-border-muted:    #e9f1fb;
  --color-ring:            var(--blue-500);
  --color-success:         #1d4ed8;
  --color-success-dark:    #1e40af;
  --color-warning:         #2563eb;
  --color-danger:          #1d4ed8;
  --color-danger-dark:     #1e40af;

  /* Chart-specific (read by analytics.html chart setup) */
  --color-chart-violet-fill:   rgba(37,99,235,0.70);
  --color-chart-violet-border: rgb(29,78,216);
  --color-chart-emerald-fill:  rgba(96,165,250,0.75);
  --color-chart-emerald-border: rgb(37,99,235);
  --color-chart-grid:          #e8f0fb;
  --color-chart-tick:          #64748b;
}

/* ─── Interactive element baseline ───────────────────────────────────────────
   Ensures every button and link-button has a pointer cursor, smooth
   transitions, and a subtle press-down on :active.
─────────────────────────────────────────────────────────────────────────── */
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color            0.15s ease,
    border-color     0.15s ease,
    box-shadow       0.15s ease,
    transform        0.1s  ease;
}

a {
  transition:
    color            0.15s ease,
    background-color 0.15s ease,
    border-color     0.15s ease,
    box-shadow       0.15s ease,
    transform        0.1s  ease;
}

/* Press-down feedback */
button:active:not(:disabled),
[role="button"]:active:not(:disabled),
a[class*="rounded-full"]:active,
a[class*="rounded-xl"]:active {
  transform: scale(0.98);
}

/* Keyboard focus ring (overrides browser default; scoped to visible focus) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ─── Empty states ────────────────────────────────────────────────────────────
   Use .empty-state as a wrapper, .empty-state-icon for the SVG/icon,
   and .empty-state-message for the descriptive text.
─────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-element-gap);
  color: var(--color-text-muted);
}

/* Lucide replaces <i data-lucide> with <svg>; both get explicit size */
.empty-state-icon i[data-lucide],
.empty-state-icon svg {
  width: 40px;
  height: 40px;
}

.empty-state-message {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  max-width: 320px;
  line-height: 1.6;
}

/* ─── Skeleton loaders ────────────────────────────────────────────────────────
   Add class="skeleton-row" or "skeleton-card" to placeholders that appear
   while an async section is loading. Remove them once real content arrives.
─────────────────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.skeleton-row {
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-row + .skeleton-row {
  margin-top: 8px;
}

.skeleton-card {
  height: 100px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ─── Flash notification ──────────────────────────────────────────────────────
   The .flash-animate class is added/removed by window.flash() in base.html
   to re-trigger the slide-up animation on every call.
─────────────────────────────────────────────────────────────────────────── */
@keyframes flash-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.flash-animate {
  animation: flash-in 0.2s ease forwards;
}

/* ─── Modal card entrance ─────────────────────────────────────────────────────
   The .modal-enter class is added to the inner card div when a modal opens.
─────────────────────────────────────────────────────────────────────────── */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-enter {
  animation: modal-in 0.18s ease forwards;
}

/* ─── Typography enforcement ─────────────────────────────────────────────────
   Headings that Tailwind Preflight resets to normal weight/size are
   given meaningful defaults here; Tailwind utility classes (text-lg, etc.)
   override these where explicitly set on elements.
─────────────────────────────────────────────────────────────────────────── */
h1 { font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; }
h2 { font-size: var(--text-xl);  font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--text-lg);  font-weight: 700; line-height: 1.3; }

/* ─── Layout safeguards ───────────────────────────────────────────────────────
   Prevent text overflow inside flex children; keep overflow tables scrollable.
─────────────────────────────────────────────────────────────────────────── */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Ensure min-width:0 on flex children that contain truncate text */
.min-w-0 {
  min-width: 0;
}

/* ─── Sidebar nav ─────────────────────────────────────────────────────────────
   Prevent nav links from stretching or overflowing their container.
─────────────────────────────────────────────────────────────────────────── */
aside nav a {
  min-width: 0;
  overflow: hidden;
}

/* ─── Consent skeleton section ───────────────────────────────────────────────
   The pending-consent-section shows skeleton rows while the first fetch
   is in flight, then either reveals real cards or hides itself.
─────────────────────────────────────────────────────────────────────────── */
#consent-skeleton {
  padding: 16px 24px;
}

@media (min-width: 640px) {
  #consent-skeleton {
    padding: 16px 32px;
  }
}

/* ─── Beta access banner ──────────────────────────────────────────────────
   Shown at the top of the page for free_beta plan users.
─────────────────────────────────────────────────────────────────────────── */
.beta-banner {
  width: 100%;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-700) 100%);
  color: #ffffff;
  text-align: center;
  padding: 8px 16px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Global surface, cards, and controls */
body {
  background: var(--color-bg);
  color: var(--color-text);
}

.rounded-2xl,
.rounded-xl {
  border-color: var(--color-border);
}

input,
select,
textarea {
  border-color: var(--color-border);
  color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}