/* MailBridge Dashboard CSS — Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg:      #f5f6f8;
  --bg2:     #ffffff;
  --bg3:     #f0f2f5;
  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.15);
  --text:    #111827;
  --text-muted: #6b7280;
  --accent:  #059669;
  --accent2: #2563eb;
  --accent3: #d97706;
  --red:     #dc2626;
  --green:   #16a34a;
  --source-border: #2563eb;
  --dest-border:   #059669;
  --font-main: 'Open Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  min-height: 100vh;
  line-height: 1.6;
}

/* Subtle dot grid */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ===== NAVBAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 58px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand svg { color: var(--accent2); }

.nav-links { display: flex; gap: 0.2rem; }

.nav-links a {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.15s;
}

.nav-links a:hover { color: var(--text); background: var(--bg3); }
.nav-links a.active { color: var(--accent2); background: #eff6ff; }

/* ===== LAYOUT ===== */
.container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  z-index: 1;
}

/* ===== PAGE HEADER ===== */
.page-header { margin-bottom: 1.75rem; }
.page-header h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text);
}
.page-header p { color: var(--text-muted); margin-top: 0.25rem; font-size: 0.875rem; }

/* ===== STATS ROW ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px) { .stats-row { grid-template-columns: repeat(2,1fr); } }

.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-card.running { border-left: 3px solid var(--accent2); }
.stat-card.ok      { border-left: 3px solid var(--green); }
.stat-card.err     { border-left: 3px solid var(--red); }
.stat-card.blue    { border-left: 3px solid var(--accent); }

.stat-number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.pulse-ring {
  position: absolute; top: 1rem; right: 1rem;
  width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent2);
}
.pulse-ring::after {
  content:''; position:absolute; inset:-4px;
  border-radius:50%; border:2px solid var(--accent2);
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2);opacity:0} }

/* ===== CHART CARD ===== */
.chart-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
}
.chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.chart-header h3 { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.chart-total { font-family:var(--font-mono); font-size:0.875rem; color:var(--accent); font-weight:700; }

/* ===== SECTION HEADER ===== */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.section-header h2 { font-size:1rem; font-weight:700; letter-spacing:-0.02em; }

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  background: var(--accent2);
  color: #fff;
  font-family: var(--font-main);
  font-size: 0.875rem; font-weight: 700;
  border: none; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(37,99,235,0.3);
}
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.btn-full { width:100%; justify-content:center; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--bg2);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 0.875rem; font-weight: 600;
  border: 1px solid var(--border2);
  border-radius: var(--radius); cursor: pointer;
  text-decoration: none; transition: all 0.15s;
  box-shadow: var(--shadow);
}
.btn-secondary:hover { border-color: var(--accent2); color: var(--accent2); background: #eff6ff; }

/* ===== JOBS TABLE ===== */
.jobs-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--bg2);
}
.jobs-table { width:100%; border-collapse:collapse; font-size:0.875rem; }

.jobs-table th {
  background: var(--bg3);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.jobs-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.jobs-table tr:last-child td { border-bottom: none; }
.jobs-table tbody tr { background: var(--bg2); transition: background 0.1s; }
.jobs-table tbody tr:hover { background: #f8faff; }

/* ===== MAILBOX CELL ===== */
.mailbox-cell { display:flex; align-items:center; gap:0.6rem; }
.provider-badge {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; font-weight:800; flex-shrink:0;
}
.provider-badge.google { background:#e8f0fe; color:#1a73e8; border:1px solid #c5d9fb; }
.provider-badge.imap   { background:#d1fae5; color:#059669; border:1px solid #a7f3d0; }
.mailbox-cell .email { font-weight:600; color:var(--text); }
.mailbox-cell .host  { font-size:0.75rem; color:var(--text-muted); }

/* ===== STATUS BADGES ===== */
.status-badge {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.2rem 0.65rem;
  border-radius:100px;
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
}
.status-badge.idle      { background:#f3f4f6; color:#6b7280; border:1px solid #d1d5db; }
.status-badge.running   { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
.status-badge.completed,
.status-badge.success   { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.status-badge.error     { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.status-badge.paused    { background:#fafafa; color:#9ca3af; border:1px solid #e5e7eb; }

.status-badge .dot {
  width:6px; height:6px; border-radius:50%;
  background:currentColor; animation:blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ===== ACTION BUTTONS ===== */
.action-btns { display:flex; gap:0.3rem; }
.btn-sm {
  width:28px; height:28px; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:6px; font-size:0.8rem;
  text-decoration:none; transition:all .15s;
  border:1px solid var(--border); background:var(--bg3);
  color:var(--text-muted); cursor:pointer;
}
.btn-sm:hover        { border-color:var(--border2); color:var(--text); background:#fff; }
.btn-sm.btn-run:hover  { background:#f0fdf4; border-color:#16a34a; color:#16a34a; }
.btn-sm.btn-del:hover  { background:#fef2f2; border-color:var(--red); color:var(--red); }
.btn-sm.btn-log:hover  { background:#eff6ff; border-color:var(--accent2); color:var(--accent2); }
.btn-sm.btn-edit:hover { background:#fefce8; border-color:#ca8a04; color:#ca8a04; }
.btn-sm.btn-pause:hover{ background:#fffbeb; border-color:#d97706; color:#d97706; }

/* ===== TAG BADGES ===== */
.tag-badge { font-size:0.6rem; font-weight:800; letter-spacing:.1em; padding:.1rem .45rem; border-radius:100px; }
.tag-badge.dryrun   { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.tag-badge.paused   { background:#f3f4f6; color:#6b7280; border:1px solid #d1d5db; }
.tag-badge.inactive { background:#f9fafb; color:#9ca3af; border:1px solid #e5e7eb; }

/* ===== ERR PREVIEW ===== */
.err-preview { font-size:.7rem; color:var(--red); margin-top:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; cursor:help; }

/* ===== JOB ROWS ===== */
.job-row.status-paused td { opacity:.65; }
.is-dryrun td:first-child  { border-left:3px solid var(--accent3); }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align:center; padding:4rem 2rem;
  color:var(--text-muted);
  border:1.5px dashed var(--border2);
  border-radius:var(--radius-lg);
  background:var(--bg2);
}
.empty-state p { margin:1rem 0; }

/* ===== LOGIN ===== */
.login-wrap {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.login-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem;
  width:100%; max-width:380px;
  box-shadow: var(--shadow-md);
}
.login-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:.25rem; }
.login-logo h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.04em; }
.login-sub { color:var(--text-muted); font-size:.875rem; margin-bottom:1.5rem; }
.login-form { margin-top:1.5rem; }

/* ===== FORMS ===== */
.form-group { margin-bottom:1rem; }
.form-group label {
  display:block; font-size:.8rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.4rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width:100%; padding:.65rem .85rem;
  background:#fff; border:1.5px solid #d1d5db;
  border-radius:var(--radius); color:var(--text);
  font-family:var(--font-main); font-size:.875rem;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-group small  { display:block; font-size:.75rem; color:var(--text-muted); margin-top:.3rem; }
.form-group small a { color:var(--accent2); }
.form-group small.warn { color:var(--red); }
.req { color:var(--red); }

.check-group { display:flex; align-items:flex-end; padding-bottom:.1rem; }
.check-group label,
.check-label {
  display:flex; align-items:center; gap:.5rem;
  font-size:.875rem; font-weight:500;
  text-transform:none; letter-spacing:0; cursor:pointer; color:var(--text);
}

.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media (max-width:800px) { .form-row-3 { grid-template-columns:1fr; } }

.form-section {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  margin-bottom:1.25rem; box-shadow:var(--shadow);
}
.form-section h3 {
  font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent2); margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.form-section h4 { font-size:.8rem; font-weight:700; color:var(--text-muted); margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.05em; }

/* ===== TWO-COL FORM ===== */
.two-col-form { display:grid; grid-template-columns:1fr 80px 1fr; gap:1rem; margin-bottom:1.25rem; }
@media (max-width:900px) { .two-col-form { grid-template-columns:1fr; } .arrow-col { display:none; } }

.form-panel {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  box-shadow:var(--shadow);
}
.form-panel.source-panel { border-top:3px solid var(--source-border); }
.form-panel.dest-panel   { border-top:3px solid var(--dest-border); }
.form-panel h3 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; display:flex; align-items:center; gap:.4rem; }
.source-panel h3 { color:var(--accent2); }
.dest-panel h3   { color:var(--accent); }

.provider-quick { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.provider-btn {
  padding:.3rem .7rem; border:1.5px solid var(--border2);
  border-radius:100px; background:#fff; color:var(--text-muted);
  font-family:var(--font-main); font-size:.75rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.provider-btn:hover { border-color:var(--accent2); color:var(--accent2); background:#eff6ff; }

.arrow-col { display:flex; align-items:center; justify-content:center; }
.sync-arrow { display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--text-muted); }
.sync-loop-badge {
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:#d1fae5; border:1px solid #a7f3d0;
  border-radius:100px; padding:.15rem .45rem;
}

.test-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.test-result { font-size:.875rem; font-family:var(--font-mono); }
.test-result.ok  { color:var(--green); }
.test-result.err { color:var(--red); }

.form-actions { display:flex; gap:.75rem; justify-content:flex-end; padding-top:1rem; }

/* ===== ALERTS ===== */
.alert {
  padding:.75rem 1rem; border-radius:var(--radius);
  margin-bottom:1rem; font-size:.875rem; font-weight:600;
  transition: opacity .5s;
}
.alert-error   { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }

/* ===== LOG OUTPUT ===== */
.log-output {
  background:#f9fafb; border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem;
  font-family:var(--font-mono); font-size:.75rem;
  line-height:1.7; color:#374151; max-height:500px;
  overflow-y:auto; white-space:pre-wrap; word-break:break-all;
}

/* ===== RUNS TABLE ===== */
.runs-table-wrap {
  overflow-x:auto; border-radius:var(--radius-lg);
  border:1px solid var(--border); margin-bottom:1.5rem;
  box-shadow:var(--shadow); background:var(--bg2);
}

/* ===== SETTINGS ===== */
.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width:800px) { .settings-grid { grid-template-columns:1fr; } }

.settings-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  box-shadow:var(--shadow);
}
.settings-card h3 { font-size:.9rem; font-weight:700; margin-bottom:.75rem; letter-spacing:-.01em; }
.settings-card p, .settings-card ul, .settings-card ol { font-size:.875rem; color:var(--text-muted); line-height:1.7; }
.settings-card a { color:var(--accent2); }

.info-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.info-table td { padding:.5rem 0; border-bottom:1px solid var(--border); }
.info-table td:first-child { color:var(--text-muted); width:50%; }

.code-block {
  background:#f9fafb; border:1.5px solid #e5e7eb;
  border-radius:6px; padding:.75rem 1rem;
  font-family:var(--font-mono); font-size:.7rem;
  color:#1e40af; overflow-x:auto; white-space:pre; margin:.5rem 0;
}

/* ===== UTILITIES ===== */
.mono      { font-family:var(--font-mono); font-size:.85em; }
.text-muted{ color:var(--text-muted); }
code { font-family:var(--font-mono); background:var(--bg3); padding:.1em .4em; border-radius:4px; font-size:.85em; color:#1e40af; }

/* ===== OAUTH BTN ===== */
.oauth-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; background:#fff;
  color:#3c4043; border:1.5px solid #dadce0;
  border-radius:var(--radius); font-size:.875rem; font-weight:600;
  text-decoration:none; transition:all .15s; box-shadow:var(--shadow);
}
.oauth-btn:hover { box-shadow:var(--shadow-md); }

/* Full-width dashboard improvements */
.jobs-table { table-layout: fixed; }
.jobs-table th:nth-child(1), .jobs-table td:nth-child(1) { width: 14%; }  /* Job */
.jobs-table th:nth-child(2), .jobs-table td:nth-child(2) { width: 28%; }  /* Source→Dest */
.jobs-table th:nth-child(3), .jobs-table td:nth-child(3) { width: 14%; }  /* Status */
.jobs-table th:nth-child(4), .jobs-table td:nth-child(4) { width: 9%; }   /* Synced */
.jobs-table th:nth-child(5), .jobs-table td:nth-child(5) { width: 10%; }  /* Last Run */
.jobs-table th:nth-child(6), .jobs-table td:nth-child(6) { width: 10%; }  /* Next Run */
.jobs-table th:nth-child(7), .jobs-table td:nth-child(7) { width: 15%; }  /* Actions */

/* Source→Dest cell: show both emails on one line */
.imap-route { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.imap-route .email-pill { min-width: 0; }
.imap-route .email-pill .email-addr { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* Topbar full width */
.topbar { padding: 0 1.5rem; }

/* Stats row full width */
.stats-row { grid-template-columns: repeat(5, 1fr); }

/* Chart full width */
.chart-card { width: 100%; }