/*  Lurstan Mailer — Unified Theme
    Shared design tokens & base styles for all pages.
    Inspired by modern dark SaaS dashboards.                      */

/* ── Design Tokens (Dark Default) ─────────────────────────────── */
:root{
  /* Backgrounds */
  --bg:        #060912;
  --bg2:       #0a0f1f;

  /* Surfaces */
  --surface:   #0f1629;
  --surface2:  #131c36;
  --surface3:  #182347;

  /* Text */
  --text:      #edf2ff;
  --muted:     #8b97b8;

  /* Borders & Dividers */
  --border:    rgba(148,163,184,.14);
  --border-hi: rgba(148,163,184,.22);

  /* Brand palette */
  --blue:      #3b82f6;
  --blue2:     #2563eb;
  --purple:    #8b5cf6;
  --teal:      #14b8a6;
  --green:     #22c55e;
  --yellow:    #f59e0b;
  --red:       #ef4444;
  --orange:    #f97316;

  /* Accent gradient (header / primary buttons) */
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);

  /* Layout */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --max:       1200px;
  --pad:       18px;
  --headerH:   64px;
  --footerH:   48px;

  /* Shadows */
  --shadow:    0 4px 24px rgba(0,0,0,.35);
  --shadow2:   0 8px 40px rgba(0,0,0,.45);
  --shadow-glow: 0 0 40px rgba(59,130,246,.08);

  /* Font stack */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .18s;
}

/* ── Light Theme Override ─────────────────────────────────────── */
:root[data-theme="light"],
html[data-theme="light"]{
  --bg:        #f4f6fb;
  --bg2:       #ebeef6;

  --surface:   #ffffff;
  --surface2:  #f8f9fc;
  --surface3:  #eef0f6;

  --text:      #0c1021;
  --muted:     #5b6477;

  --border:    rgba(15,23,42,.10);
  --border-hi: rgba(15,23,42,.16);

  --shadow:    0 4px 20px rgba(15,23,42,.08);
  --shadow2:   0 8px 36px rgba(15,23,42,.12);
  --shadow-glow: 0 0 40px rgba(59,130,246,.04);
}

/* ── Base Reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.18);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(148,163,184,.30); }

/* ── Global Links ─────────────────────────────────────────────── */
a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ── Selection ────────────────────────────────────────────────── */
::selection{
  background: rgba(59,130,246,.25);
  color: var(--text);
}

/* ── Utility: Glass Card ──────────────────────────────────────── */
.glass{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.01) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
html[data-theme="light"] .glass{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.50) 100%
  );
}

/* ── Utility: Subtle hover lift ───────────────────────────────── */
.hover-lift{
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

/* ── Utility: Truncate text ───────────────────────────────────── */
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Utility: Badge ───────────────────────────────────────────── */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.badge.green{ color: var(--green); border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); }
.badge.red{   color: var(--red);   border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); }
.badge.blue{  color: var(--blue);  border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.08); }
.badge.amber{ color: var(--yellow); border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.08); }

/* ── Utility: Dot indicator ───────────────────────────────────── */
.dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot.green{ background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,.4); }
.dot.red{   background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,.4); }
.dot.blue{  background: var(--blue);  box-shadow: 0 0 6px rgba(59,130,246,.4); }
.dot.amber{ background: var(--yellow); box-shadow: 0 0 6px rgba(245,158,11,.4); }
.dot.off{   background: var(--muted); opacity: .4; }

/* ── Utility: Progress bar ────────────────────────────────────── */
.progress{
  height: 6px;
  background: rgba(148,163,184,.12);
  border-radius: 3px;
  overflow: hidden;
}
.progress .bar{
  height: 100%;
  border-radius: 3px;
  background: var(--accent-gradient);
  transition: width .4s var(--ease);
}
.progress .bar.green{ background: linear-gradient(90deg, #22c55e, #4ade80); }
.progress .bar.red{   background: linear-gradient(90deg, #ef4444, #f87171); }
.progress .bar.amber{ background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* ── Utility: Status pill ─────────────────────────────────────── */
.status-pill{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.status-pill.s-completed,
.status-pill.s-sent{   background: rgba(34,197,94,.12); color: #4ade80; }
.status-pill.s-sending,
.status-pill.s-processing{ background: rgba(59,130,246,.12); color: #60a5fa; }
.status-pill.s-queued,
.status-pill.s-draft{  background: rgba(148,163,184,.12); color: var(--muted); }
.status-pill.s-paused{ background: rgba(245,158,11,.12); color: #fbbf24; }
.status-pill.s-failed{ background: rgba(239,68,68,.12);  color: #f87171; }

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