/* =========================================================
   MagicSender — Egaux CI Styles
   ========================================================= */

/* ========== 1) Tokens ========== */
:root{
  --ink:#121417;
  --ink-2:#2d3742;
  --line:#e8eaef;

  --paper:#000000;
  --surface:#ffffff;

  --peach:#ffb89a;
  --warm:#ffd166;

  --radius-sm:12px;
  --radius-md:14px;
  --radius-lg:22px;

  --shadow-sm:0 2px 0 rgba(0,0,0,.04);
  --shadow-md:0 8px 20px rgba(18,20,23,.06);
  --shadow-lg:0 12px 28px rgba(18,20,23,.08);

  --focus-ring:rgba(255,184,154,.35);
  --ok:#22c55e;
  --danger:#b42318;
}

/* ========== 2) Base ========== */
*, *::before, *::after{ box-sizing:border-box; }

html{
  height:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{
  margin:0;
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

/* ========== 3) App shell ========== */
.app-shell{
  width:min(1160px, 92vw);
  margin:24px auto 40px;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

.app-title{
  font-size:1.6rem;
  font-weight:800;
  margin-bottom:4px;
}

.app-subtitle{
  color:var(--ink-2);
  margin-bottom:20px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

.brand-link{
  text-decoration:none;
  color:inherit;
}

.brand-link:hover{
  text-decoration:underline;
}

/* Make anchor buttons behave like buttons */
a.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem .9rem;
  border-radius:var(--radius-sm);
  font-weight:800;
  text-decoration:none;
  color:inherit;
}


/* ========== 4) Tabs + Views (fixes your “tabs do nothing” bug) ========== */
.tabs{
  display:flex;
  gap:8px;
  margin-bottom:18px;
}

.tab{
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  cursor:pointer;
}

.tab.active{
  background:var(--peach);
  border-color:transparent;
}

.view{ display:none; }
.view.active{ display:block; }

/* ========== 5) Cards + layout ========== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:16px;
}

.card-header{ margin-bottom:12px; }
.card-title{ font-weight:800; }
.card-subtitle{ color:var(--ink-2); font-size:.95rem; }

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.grid-2-tight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

@media (max-width: 980px){
  .grid-2,
  .grid-2-tight{ grid-template-columns:1fr; }
}

/* ========== 6) Forms ========== */
.field{ margin-bottom:14px; }

label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

input,
select,
textarea{
  width:100%;
  font:inherit;
  padding:.6rem .75rem;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

textarea{
  min-height:120px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--peach);
  box-shadow:0 0 0 4px rgba(255,184,154,.2);
}

.hint,
.small{
  font-size:.85rem;
  color:var(--ink-2);
}

.hint.error{
  color:var(--danger);
  font-weight:600;
}

/* ========== 7) Buttons ========== */
button{
  font:inherit;
  font-weight:800;
  padding:.6rem .9rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}

.btn-primary{
  background:var(--peach);
  border-color:transparent;
}

.btn-secondary{
  background:var(--warm);
  border-color:transparent;
}

.btn-ghost{
  background:transparent;
  border:1px dashed var(--ink-2);
}

.button-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Upload/Download buttons side-by-side, same “weight” */
.template-actions{
  display:flex;
  gap:10px;
  margin:10px 0 10px;
}
.template-actions button{
  flex:1;
}

/* Hide native file inputs (we trigger them via Upload template button) */
.file-input{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* File name + green check “light” */
.file-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  margin-top:6px;
  padding:.55rem .75rem;

  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.file-name{
  color:var(--ink-2);
  font-size:.92rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ok-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--ok);
  color:#fff;
  font-weight:900;
  line-height:1;
}

/* ========== 8) Previews ========== */
.preview-title{
  font-weight:800;
  margin-bottom:6px;
}

.preview-box{
  margin:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-sm);
  color:var(--ink-2);
  white-space:pre-wrap;
  word-break:break-word;
  min-height:96px;
}

.divider{
  height:1px;
  background:var(--line);
  margin:16px 0;
}

/* ✅ NEW: HTML email preview iframe (send view) */
.email-preview-frame{
  width:100%;
  height:520px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

/* ========== 9) Tables ========== */
.table-wrapper{ position:relative; }

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}

thead th{
  text-align:left;
  font-weight:800;
  padding:.7rem .8rem;
  background:linear-gradient(
    180deg,
    rgba(255,209,102,.35),
    rgba(255,184,154,.18)
  );
  border-bottom:1px solid var(--line);
}

tbody td{
  padding:.65rem .8rem;
  border-bottom:1px solid var(--line);
}

tbody tr:last-child td{ border-bottom:none; }

tbody tr:hover{ background:rgba(0,0,0,.03); }

.table-empty{
  margin-top:10px;
  color:var(--ink-2);
  font-size:.9rem;
}

/* ========== 10) Reduced motion ========== */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}