/* ═══════════════════════════════════════════════════════════════════
   Impact Outbox — polish.css
   CSS-only refinement pass. Load AFTER the page's existing styles:
   put <link rel="stylesheet" href="polish.css"> as the LAST thing in
   <head> on every page (after the inline <style> blocks).

   No markup changes required. Every selector matches existing
   classes/IDs. Safe to remove per-section if anything conflicts.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  --io-navy: #1B2A4A;
  --io-green: #1D9E75;
  --io-green-dark: #17845F;   /* hover: darken, don't brighten */
  --io-green-tint: #E4F5EE;
  --io-ink: #26324B;          /* body text: softened navy instead of pure gray */
  --io-muted: #6B7280;
  --io-faint: #8A94A6;
  --io-border: #E4E9F1;
  --io-shadow-1: 0 1px 2px rgba(27,42,74,.05), 0 4px 14px rgba(27,42,74,.06);
  --io-shadow-2: 0 2px 4px rgba(27,42,74,.07), 0 10px 28px rgba(27,42,74,.10);
}

/* ── Base ──────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--io-ink);
}

::selection { background: rgba(29,158,117,.22); }

/* Visible keyboard focus everywhere, brand-colored */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid rgba(29,158,117,.55);
  outline-offset: 2px;
}

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

/* ── Page header ───────────────────────────────────────────────── */
.page-title { letter-spacing: -0.4px; }
.page-subtitle { color: var(--io-muted); }

/* Eyebrow labels: one consistent treatment */
.card-label, .section-label, .detail-label, .stat-label, .field-label {
  color: var(--io-faint);
  letter-spacing: 0.7px;
}

/* ── Cards: hairline border + softer, cooler shadow ────────────── */
.card, .campaign-card, .email-card {
  border: 1px solid var(--io-border);
  box-shadow: var(--io-shadow-1);
}

/* ── Dashboard stat cards ──────────────────────────────────────────
   Was: centered green 42px number + 4px green left-border accent.
   Now: left-aligned navy number, quiet hairline card. The green left
   border + giant colored number pattern reads as noise at 4-up. */
.dashboard-stats-grid .stat-card {
  border: 1px solid var(--io-border);
  box-shadow: var(--io-shadow-1);
  text-align: left;
  padding: 20px 22px;
}
.dashboard-stats-grid .stat-card:hover {
  transform: none;
  box-shadow: var(--io-shadow-2);
}
.dashboard-stats-grid .stat-number {
  font-size: 34px;
  color: var(--io-navy);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

/* ── Sidebar ───────────────────────────────────────────────────────
   Active item: solid green block → green tint + accent bar.
   Keeps orientation without a heavy filled row. */
nav .sidebar-item.active {
  background-color: rgba(29,158,117,.16);
  border-left-color: #2FBE8F;
  font-weight: bold;
}
nav .sidebar-item, nav .sidebar-section { color: rgba(255,255,255,.88); }
nav .sidebar-item:hover, nav .sidebar-section:hover { color: #FFFFFF; }

/* ── Buttons ───────────────────────────────────────────────────────
   Hover = darker (pressing into the page), not brighter. */
.button-primary:hover, .schedule-all-btn:hover { background-color: var(--io-green-dark); }
.button-outline:hover, .button-outline-teal:hover,
.campaign-button:hover, .edit-btn:hover { background-color: var(--io-green-tint); }
.button:active, .campaign-button:active, .edit-btn:active,
.schedule-all-btn:active { transform: translateY(1px); }

/* Text links on light backgrounds: darker on hover (brighter #16b373
   only worked on the navy nav) */
.alert-link:hover, .back-link:hover, .back-button:hover { color: var(--io-green-dark); }

/* ── Status badges: one consistent recipe ──────────────────────── */
.status-badge {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 14px;
  min-width: 0;                 /* hug content; no forced 80–100px widths */
  border-radius: 999px;
}
/* Harmonized variant colors (also resolves the duplicate .status-sent /
   .status-pending definitions that currently disagree across pages) */
.status-active, .status-sent, .status-approved, .status-completed {
  background-color: var(--io-green-tint);
  color: #157A5B;
}
.status-scheduled { background-color: #EDF1FE; color: #4361E0; }
.status-draft     { background-color: #F1F3F7; color: #77808F; }
.status-pending   { background-color: #FDF3DC; color: #9A6B0A; }
.status-rejected  { background-color: #FDE8E8; color: #C0392B; }

/* ── Alert banner: full hairline border instead of left accent ─── */
.alert-banner {
  background-color: #FEF6E2;
  border: 1px solid #F0DCA8;
  border-left: 1px solid #F0DCA8;
}
.alert-text { color: #7A5B12; }

/* ── Tabs (campaign page) ──────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--io-border); }
.tab { color: #77808F; }
.tab:hover { color: var(--io-navy); box-shadow: inset 0 -3px 0 #D6DDE8; }
.tab.active:hover { box-shadow: none; }

/* ── List items (campaign tabs): flat gray → hairline card ─────── */
.list-item {
  background-color: #FFFFFF;
  border: 1px solid #EEF1F7;
}

/* ── Forms ─────────────────────────────────────────────────────── */
.read-only-input {
  border-color: var(--io-border);
  background-color: #F6F8FB;
  color: #5B6472;
}
.campaign-selector { border-color: #D8DFEA; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="date"]:focus,
input[type="datetime-local"]:focus, input[type="password"]:focus,
select:focus, textarea:focus {
  border-color: var(--io-green);
  box-shadow: 0 0 0 3px rgba(29,158,117,.12);
  outline: none;
}

/* ── Bottom action bar (emails page) ───────────────────────────── */
.bottom-bar {
  background-color: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--io-border);
  box-shadow: 0 -4px 20px rgba(27,42,74,.08);
}

/* ── Info rows (settings) ──────────────────────────────────────── */
.info-row { border-bottom-color: #F0F3F8; }
.info-label { color: var(--io-muted); }

/* ── Misc ──────────────────────────────────────────────────────── */
.error {
  background-color: #FDF0EF;
  border: 1px solid #F2C6C0;
  border-left: 1px solid #F2C6C0;
}
.spinner { border-color: #E4E9F1; border-top-color: var(--io-green); }
