/*
 * --------------------------------------------------------------------------
 * MIS Web Theme Tokens
 * --------------------------------------------------------------------------
 * Central palette, spacing, radii, and motion primitives shared across the app.
 * Components should consume these via var(--ph-*) lookups so we can tweak the
 * presentation from a single place. All values mirror the legacy styling to
 * avoid visual regressions while giving us a knob for future tweaks.
 */

:root {
  /* Color foundations ----------------------------------------------------- */
  --ph-color-page-bg: #f8fafc;
  --ph-color-surface: #ffffff;
  --ph-color-surface-soft: #fbfdff;
  --ph-color-surface-accent: #f2f6ff;
  --ph-color-surface-alt: #eef2ff;
  --ph-color-surface-muted: #f5f5f5;
  --ph-color-surface-halo: #dbeafe;

  /* Borders --------------------------------------------------------------- */
  --ph-color-border-subtle: #e1e9ff;
  --ph-color-border-soft: #dde3f1;
  --ph-color-border-strong: #c5cee3;
  --ph-color-border-highlight: #bed0ff;

  /* Typography colors ----------------------------------------------------- */
  --ph-color-text-default: #000000; /* Pure black — maximum readability */
  --ph-color-text-primary: #000000; /* Pure black — maximum readability */
  --ph-color-text-strong: #000000; /* Pure black — maximum readability */
  --ph-color-text-muted: #1f2937; /* Darker gray (was #4b5563) — less "light" hierarchy */
  --ph-color-text-soft: #374151; /* Darker gray (was #6b7280) — less "light" hierarchy */
  --ph-color-text-hint: #999999;
  --ph-color-text-placeholder: #9ca3af;
  --ph-color-text-inverse: #ffffff;

  /* Typography families --------------------------------------------------- */
  --ph-font-sans: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  --ph-font-sans-condensed: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --ph-font-serif: 'Times New Roman', Times, serif;
  --ph-font-mono-narrow: 'Courier New', Courier, monospace;

  /* Typography scale (T1-T5, base 1.0rem) --------------------------------- */
  /* T1: Page titles, primary headings, large metric values */
  --ph-font-size-t1: 1.75rem; /* Bigger (was 1.6rem) */
  /* T2: Section headers, panel titles, prominent labels */
  --ph-font-size-t2: 1.4rem; /* Bigger (was 1.28rem) */
  /* T3: Card labels, block headers, prominent buttons */
  --ph-font-size-t3: 1.15rem; /* Bigger (was 1.08rem) */
  /* T4: Body text (baseline), table cells, descriptions, inputs */
  --ph-font-size-t4: 1rem; /* BIGGER baseline (was 0.9rem) */
  /* T5: Small meta, badges, timestamps, flags, table headers */
  --ph-font-size-t5: 0.875rem; /* Bigger (was 0.78rem) */

  /* Font weights ---------------------------------------------------------- */
  --ph-font-weight-heading: 700;
  --ph-font-weight-semibold: 650;
  --ph-font-weight-label: 600;
  --ph-font-weight-body: 500; /* Medium weight (was 400) — bolder for readability */

  /* Letter spacing -------------------------------------------------------- */
  /* Uppercase labels (chip text, section headers) */
  --ph-letter-spacing-caps: 0.1em;
  /* Slightly looser uppercase */
  --ph-letter-spacing-caps-wide: 0.12em;
  /* Mixed-case text (member names, body copy) */
  --ph-letter-spacing-normal: 0.03em;
  /* Tight tracking for compact areas */
  --ph-letter-spacing-tight: 0.01em;

  /* Card hierarchy tokens ------------------------------------------------- */
  /* Level 1: Primary surfaces (member panels, batch panels) */
  --ph-card-radius: var(--ph-radius-lg);
  --ph-card-shadow: var(--ph-shadow-card);
  --ph-card-border: 1px solid var(--ph-color-border-soft);
  /* Level 2: Secondary surfaces (detail panels, period blocks) */
  --ph-card-shadow-secondary: 0 1px 2px rgba(20, 38, 60, 0.05);
  /* Level 3: Tertiary surfaces (stage cards, counters, chips) */
  --ph-card-shadow-tertiary: 0 1px 2px rgba(16, 24, 40, 0.04);

  /* Chip/Badge tokens (global) -------------------------------------------- */
  /* Default chip (neutral) */
  --ph-chip-bg: #eef4ff;
  --ph-chip-text: #21406c;
  --ph-chip-border: #c9d7e7;
  /* Highlight/active chip */
  --ph-chip-highlight-bg: #eff6ff;
  --ph-chip-highlight-border: #c9defc;

  /* Print palette --------------------------------------------------------- */
  --ph-color-print-accent: #000073;
  --ph-color-print-border: #000000;

  /* Print typography scale (sized for older stakeholder readability) ------ */
  --ph-font-size-print-sm: 14px;
  --ph-font-size-print-md: 16px;

  /* Brand accents --------------------------------------------------------- */
  --ph-color-primary: #1d4ed8;
  --ph-color-primary-strong: #1e40af;
  --ph-color-primary-soft: rgba(59, 130, 246, 0.15);

  --ph-color-accent: #4338ca;
  --ph-color-accent-soft: #e0e7ff;
  --ph-color-accent-bright: #3b82f6;
  --ph-color-accent-bright-soft: rgba(59, 130, 246, 0.12);

  /* Navigation palette ---------------------------------------------------- */
  --ph-color-nav-bg: #1f3d7a;
  --ph-color-nav-bg-hover: #193265;
  --ph-color-nav-outline: #91b4ff;
  --ph-color-nav-pill-text: #1f2d3d;
  --ph-color-nav-pill-bg: rgba(244, 247, 252, 0.9);
  --ph-color-nav-pill-bg-hover: #e4ecfa;
  --ph-color-nav-pill-active-bg: #dce6ff;
  --ph-color-nav-pill-active-border: #5d8edc;
  --ph-color-nav-pill-active-text: #1d3f70;
  --ph-color-nav-context-bg: #f6f8fb;
  --ph-color-nav-context-border: #e3e9f1;
  --ph-color-nav-context-title: #14324f;

  /* Badges & chips -------------------------------------------------------- */
  --ph-color-badge-bg: #ede9fe;
  --ph-color-badge-text: #5b21b6;
  --ph-color-badge-neutral: #e5e7eb;

  /* Status colors --------------------------------------------------------- */
  --ph-color-negative-strong: #cc5555;
  --ph-color-danger: #dc2626;
  --ph-color-danger-soft: #fee2e2;
  --ph-color-status-negative-border: #f87171;
  --ph-color-status-positive-bg: #fef3c7;
  --ph-color-status-positive-border: #facc15;
  --ph-color-status-balanced-bg: #dcfce7;
  --ph-color-status-balanced-border: #86efac;
  --ph-color-feedback-error-text: #a94442;
  --ph-color-feedback-error-bg: #fdf7f7;
  --ph-color-feedback-error-border: #eed3d7;
  --ph-color-warning: #f97316;
  --ph-color-warning-soft: rgba(249, 115, 22, 0.15);
  --ph-color-success: #16a34a;

  /* Variant & Review System (global design patterns) --------------------- */
  /* Used for delinquency edge cases, manual review flags, and operational exceptions */

  /* MANUAL REVIEW: Orange Palette (Prominent, Action Required) */
  --ph-variant-row-bg: #ffedd5; /* Orange-100 */
  --ph-variant-row-bg-hover: #fed7aa; /* Orange-200 */
  --ph-variant-row-border: #f97316; /* Orange-500 */
  --ph-variant-badge-bg: #ffedd5; /* Orange-100 */
  --ph-variant-badge-border: #fdba74; /* Orange-300 */
  --ph-variant-badge-text: #9a3412; /* Orange-800 */
  --ph-variant-detail-bg: #fff7ed; /* Orange-50 */
  --ph-variant-detail-border: #fdba74; /* Orange-300 */
  --ph-variant-detail-text: #9a3412; /* Orange-800 */
  --ph-variant-accent: #f97316; /* Orange-500 */

  /* AUTO-EXCLUDE: Red/Rose Palette (System Action, Distinct) */
  --ph-auto-exclude-row-bg: #fff1f2; /* Rose-50 */
  --ph-auto-exclude-row-bg-hover: #ffe4e6; /* Rose-100 */
  --ph-auto-exclude-row-border: #991b1b; /* Red-800 */
  --ph-auto-exclude-badge-bg: #ffe4e6; /* Rose-100 */
  --ph-auto-exclude-badge-border: #991b1b; /* Red-800 */
  --ph-auto-exclude-badge-text: #991b1b; /* Red-800 */
  --ph-auto-exclude-detail-bg: #fff1f2; /* Rose-50 */
  --ph-auto-exclude-detail-border: #991b1b; /* Red-800 */
  --ph-auto-exclude-detail-text: #991b1b; /* Red-800 */

  /* Legitimate variant system (informational, non-action) */
  --ph-legit-variant-bg: #eef2ff;
  --ph-legit-variant-border: #c7d2fe;
  --ph-legit-variant-text: #1e40af;

  /* Edit Form System ------------------------------------------------------ */
  /* Tokens for CRUD update/edit forms - optimized for editing efficiency */

  /* Edit Panel Identity Header (LIGHT MODE — fits existing theme) */
  --ph-edit-header-bg: #f1f5f9; /* Slate-100 — light, clean, professional */
  --ph-edit-header-bg-hover: #e2e8f0; /* Slate-200 */
  --ph-edit-header-text: var(--ph-color-text-primary);
  --ph-edit-header-border: #cbd5e1; /* Slate-300 */
  --ph-edit-header-accent: var(--ph-color-primary); /* Blue accent for title */

  /* Warning Banner: TIERED SYSTEM */
  /* Level 1: Default warnings (informational caution) — Amber-200 */
  --ph-banner-warning-bg: #fde68a; /* Amber-200 — noticeable but not alarming */
  --ph-banner-warning-border: #fcd34d; /* Amber-300 */
  --ph-banner-warning-text: #92400e; /* Amber-800 */

  /* Level 2: Critical warnings (FUCK REVIEW level) — Orange-200 */
  --ph-banner-warning-critical-bg: #fed7aa; /* Orange-200 — demands attention */
  --ph-banner-warning-critical-border: #fb923c; /* Orange-400 */
  --ph-banner-warning-critical-text: #9a3412; /* Orange-800 */

  /* Info Banner (neutral information) */
  --ph-banner-info-bg: #dbeafe; /* Blue-100 */
  --ph-banner-info-border: #93c5fd; /* Blue-300 */
  --ph-banner-info-text: #1e40af; /* Blue-800 */

  /* Input States (edit mode distinction) */
  --ph-input-readonly-bg: var(--ph-stripe-even);
  --ph-input-readonly-text: var(--ph-color-text-soft);
  --ph-input-readonly-border: 1px dashed var(--ph-border-grid);
  --ph-input-computed-bg: #eff6ff; /* Blue-50 - calculated fields */
  --ph-input-computed-text: var(--ph-color-text-muted);
  --ph-input-focus-ring: 0 0 0 3px var(--ph-color-primary-soft);
  --ph-input-active-border: var(--ph-color-primary);

  /* Input "has value" indicator (neutral, non-judgmental) */
  --ph-input-hasvalue-bg: #f5f3ff; /* Violet-50 - subtle, neutral tint */
  --ph-input-hasvalue-border: #c4b5fd; /* Violet-300 - soft border */

  /* Success/Saved Banner (for edit status bar) */
  --ph-banner-success-bg: #dcfce7; /* Green-100 */
  --ph-banner-success-border: #86efac; /* Green-300 */
  --ph-banner-success-text: #166534; /* Green-800 */

  /* Checklist Status System ----------------------------------------------- */
  /* Pending: Light green (ready but waiting) */
  --ph-checklist-pending-bg: #f0fdf4; /* Green-50 */
  --ph-checklist-pending-border: #86efac; /* Green-300 */

  /* Done: Bold green (completed, signed-off) */
  --ph-checklist-done-bg: var(--ph-banner-success-bg); /* Green-100 */
  --ph-checklist-done-border: var(--ph-color-success); /* Green-600 */
  --ph-checklist-done-border-width: 2px;

  /* Elevation ------------------------------------------------------------- */
  --ph-shadow-card: 0 8px 14px rgba(30, 64, 175, 0.06);
  --ph-shadow-panel: 0 12px 24px rgba(30, 64, 175, 0.08);
  --ph-shadow-float: 0 16px 28px rgba(59, 130, 246, 0.18);
  --ph-shadow-active: 0 4px 12px rgba(37, 99, 235, 0.18), 0 1px 3px rgba(37, 99, 235, 0.12);
  --ph-shadow-deep: 0 18px 45px rgba(15, 23, 42, 0.08);

  /* Radii ----------------------------------------------------------------- */
  --ph-radius-xs: 8px;
  --ph-radius-sm: 10px;
  --ph-radius-md: 12px;
  --ph-radius-lg: 14px;
  --ph-radius-xl: 18px;
  --ph-radius-pill: 999px;

  /* Spacing scale --------------------------------------------------------- */
  --ph-space-2xs: 0.25rem;
  --ph-space-xs: 0.5rem;
  --ph-space-sm: 0.75rem;
  --ph-space-md: 1.25rem;
  --ph-space-lg: 1.75rem;
  --ph-space-xl: 2.25rem;

  /* Enterprise UI: Data Density System ------------------------------------ */
  /* "Plumbers Union Pattern" - Optimized for scanning, not aesthetics */

  /* Zebra striping for alternating rows */
  --ph-stripe-even: #f8fafc; /* Very subtle gray for even rows */
  --ph-stripe-odd: transparent; /* White for odd rows */
  --ph-stripe-hover: #f1f5f9; /* Slight blue-gray on hover */

  /* Hard borders for explicit structure */
  --ph-border-grid: #e2e8f0; /* Visible grid lines */
  --ph-border-grid-strong: #cbd5e1; /* Emphasized grid lines */

  /* Data typography */
  --ph-font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

  /* Motion ---------------------------------------------------------------- */
  --ph-transition-quick: 0.16s ease;
  --ph-transition-default: 0.18s ease;

  /* Gradients ------------------------------------------------------------- */
  --ph-gradient-card: linear-gradient(90deg, #fbfdff 0%, #f2f6ff 100%);
  --ph-gradient-card-alt: linear-gradient(90deg, #fbfdff 0%, #f3f6ff 100%);
  --ph-gradient-report-card: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}

/* Delinquency bucket display — Suspended state: genuine cancellation candidate */
.delinquency-bucket--suspended {
  color: var(--ph-color-danger);
  font-weight: 700;
}

/* Delinquency bucket display — Excluded state: system already auto-excluded (Missed Init / Ledger Surplus).
 * Same prominence treatment as Suspended (bold) but in warning amber instead of danger red —
 * "we see this delinquency, it's handled, no action needed" vs. "ACTION REQUIRED." */
.delinquency-bucket--excluded {
  color: var(--ph-color-warning);
  font-weight: 700;
}