:root{
  --brand-blue: #002f6d;
  --brand-blue-dark: #002458;
  --bg-cream: #f7f3ed;
  --border: #e2e8f0;
  --muted: #64748b;
  --text: #0f172a;
  --card-bg: #ffffff;

  --badge-src-bg:#E0F2FE; --badge-src-fg:#075985;
  --badge-med-bg:#DCFCE7; --badge-med-fg:#065F46;
  --badge-cam-bg:#FDE68A; --badge-cam-fg:#854D0E;
  --badge-term-bg:#FCE7F3; --badge-term-fg:#9D174D;
  --badge-cont-bg:#EDE9FE; --badge-cont-fg:#5B21B6;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; color:var(--text); background:var(--bg-cream);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Layout & chrome */
.container{ max-width: 1200px; margin: 0 auto; padding: 24px; }
.card{ background:var(--card-bg); border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.07); padding: 24px; }

.header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ height: 32px; width:auto; }
.header h1{ margin:0; font-size: 24px; font-weight: 800; }
.header .actions-right{ display:flex; gap:8px; }

.muted{ color:var(--muted); font-size: 12px; }
.small{ font-size: 12px; }
.divider{ border:none; border-top:1px solid var(--border); margin:16px 0; }

.guide{ background:#eef5ff; border:1px solid var(--border); padding:10px 12px; border-radius:10px; font-size: 14px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Form grid */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.full{ grid-column: 1 / -1; }

.field label{ display:block; font-size: 14px; margin-bottom:6px; }
.input, .select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff;
}
.inline{ display:flex; gap:8px; align-items:center; }

/* Accessible focus outlines */
.input:focus-visible, .btn:focus-visible, .col-filter:focus-visible, .crumb:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Combobox (input + dropdown) */
.combo-wrap{ position:relative; }
.combo-list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--border); border-radius:8px; max-height:220px; overflow:auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding:6px; display:none;

  /* Smooth open/close */
  opacity: 0; transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease;
}
.combo-list.open{
  display:block;
  opacity: 1; transform: translateY(0);
}
.combo-item{
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:14px;
}
.combo-item:hover{ background:#f3f4f6; }
.combo-empty{ padding:8px 10px; font-size:13px; color:var(--muted); }

.hint{ font-size:12px; color:var(--muted); margin-top:4px; }

/* Buttons */
.actions{ display:flex; align-items:center; gap:8px; }
.toggles{ display:flex; gap:10px; align-items:center; margin-bottom: 8px; font-size: 14px; flex-wrap: wrap; }

.btn{
  appearance:none; border:1px solid var(--border); background:#fff; padding:8px 14px; border-radius:8px;
  font-size:14px; cursor:pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ background:#fafafa; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-primary{
  background:var(--brand-blue); border-color:var(--brand-blue); color:#fff;
}
.btn-primary:hover{ background:var(--brand-blue-dark); border-color:var(--brand-blue-dark); }

.btn-ghost{
  background:#fff; border:1px solid var(--border); color:var(--text);
}

.btn-danger{
  border-color:#ef4444; color:#b91c1c; background:#fff;
}
.btn-danger:hover{ background:#fee2e2; }
.btn-xs{ padding:4px 8px; font-size:12px; border-radius:6px; }

.btn-link{
  background:transparent; border-color:transparent; color:var(--brand-blue); text-decoration:underline;
}
.btn-link:hover{ background:transparent; }

.ml-auto{ margin-left:auto; }

/* Result blocks */
.result{ margin-top:16px; }
.label{ font-size: 14px; font-weight:600; margin-bottom:4px; }
.block{ display:block; }
.codeblock{ background:#f8fafc; border:1px solid var(--border); border-radius:8px; padding:10px 12px; word-break: break-all; }

/* Saved table */
.section-title{ font-size: 20px; font-weight:700; margin:24px 0 12px; }

.table-wrap{ overflow-x:auto; }
.table{
  width:100%; border-collapse: separate; border-spacing: 0;
  font-size:14px; table-layout: auto;
}
.table thead th{ text-align:left; color:#475569; padding:8px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.table tbody td{ padding:8px 8px; border-top:1px solid var(--border); vertical-align: top; }

/* Subtle row hover for readability */
.table tbody tr:hover td { background: #fafafa; }

/* Per-column filters */
.filters input.col-filter{
  width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px;
}

/* Sorting affordance */
.sortable{ cursor:pointer; user-select:none; }
.sortable .arrow{ opacity:.4; margin-left:4px; transition: opacity .15s ease; }
.sortable.active .arrow{ opacity:1; }

/* Badges for colorized UTM preview */
.badge{ border-radius:9999px; padding:2px 6px; font-size:11px; display:inline-block; }
.src{ background:var(--badge-src-bg); color:var(--badge-src-fg); }
.med{ background:var(--badge-med-bg); color:var(--badge-med-fg); }
.cam{ background:var(--badge-cam-bg); color:var(--badge-cam-fg); }
.term{ background:var(--badge-term-bg); color:var(--badge-term-fg); }
.cont{ background:var(--badge-cont-bg); color:var(--badge-cont-fg); }

/* Long text + copy affordance */
.break{ word-break: break-all; }
.copy{ cursor:pointer; text-decoration: none; transition: color .15s ease, font-weight .15s ease, background-color .15s ease; }
.copy:hover{ background-color:#f3f4f6; }
.copied{ font-weight:600; }

/* Column visibility (indices reflect table with a new FIRST "Copy" button column) */
/* Columns: 1 Copy | 2 Date | 3 Base | 4 Source | 5 Medium | 6 Campaign | 7 Term | 8 Content | 9 Output | 10 UTM Only | 11 Actions */
.table.hide-col-2  thead th:nth-child(2),  .table.hide-col-2  thead tr.filters th:nth-child(2),  .table.hide-col-2  tbody td:nth-child(2){ display:none; }
.table.hide-col-3  thead th:nth-child(3),  .table.hide-col-3  thead tr.filters th:nth-child(3),  .table.hide-col-3  tbody td:nth-child(3){ display:none; }
.table.hide-col-4  thead th:nth-child(4),  .table.hide-col-4  thead tr.filters th:nth-child(4),  .table.hide-col-4  tbody td:nth-child(4){ display:none; }
.table.hide-col-5  thead th:nth-child(5),  .table.hide-col-5  thead tr.filters th:nth-child(5),  .table.hide-col-5  tbody td:nth-child(5){ display:none; }
.table.hide-col-6  thead th:nth-child(6),  .table.hide-col-6  thead tr.filters th:nth-child(6),  .table.hide-col-6  tbody td:nth-child(6){ display:none; }
.table.hide-col-7  thead th:nth-child(7),  .table.hide-col-7  thead tr.filters th:nth-child(7),  .table.hide-col-7  tbody td:nth-child(7){ display:none; }
.table.hide-col-8  thead th:nth-child(8),  .table.hide-col-8  thead tr.filters th:nth-child(8),  .table.hide-col-8  tbody td:nth-child(8){ display:none; }
.table.hide-col-9  thead th:nth-child(9),  .table.hide-col-9  thead tr.filters th:nth-child(9),  .table.hide-col-9  tbody td:nth-child(9){ display:none; }
.table.hide-col-10 thead th:nth-child(10), .table.hide-col-10 thead tr.filters th:nth-child(10), .table.hide-col-10 tbody td:nth-child(10){ display:none; }
/* We never hide col 1 (Copy) or col 11 (Actions). */

/* Pill toggles for columns */
.pill-toggle{
  border:1px solid var(--border); border-radius:9999px; padding:6px 10px; cursor:pointer; user-select:none;
  background:#fff; color:var(--text); font-size:13px;
}
.pill-toggle.active{ background: var(--brand-blue); color:#fff; border-color: var(--brand-blue); }

/* Fixed max width for all columns (side scroll OK) */
.table td, .table th {
  max-width: 800px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Wizard modal ===== */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.38);
  display: none; justify-content: center; z-index: 50;
  align-items: flex-start; padding-top: 15vh; /* ~1/3 from top */
}
.modal{
  width: min(720px, 92vw);
  background: #fff; border-radius: 14px; border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.modal-header{
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.modal-title{ font-weight: 800; font-size: 18px; display:flex; align-items:center; gap:8px; }
.modal-body{ padding: 16px 18px; }
.modal-footer{ padding: 14px 18px; border-top: 1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* Breadcrumbs */
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-bottom:12px; font-size:13px;
}
.crumb{
  background:#f3f4f6; border:1px solid var(--border); color:var(--text);
  border-radius:9999px; padding:4px 10px; cursor:pointer;
}
.crumb:hover { background:#eef2f6; }
.crumb strong{ font-weight:700; }
.crumb-sep{ color:var(--muted); padding:0 2px; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:9999px; padding:10px 14px;
  cursor:pointer; user-select:none; background:#fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pill:hover{ background:#fafafa; }
.pill input{ accent-color: var(--brand-blue); }
.pill.active{ border-color: var(--brand-blue); background:#f2f6ff; }
.pill.primary{
  border-color: var(--brand-blue);
  background:#f2f6ff;
  box-shadow: 0 6px 16px rgba(0,47,109,.12);
}
.pill-icon{ width: 24px; height: 24px; }

/* Small logo used in wizard titles & the header button */
.wizard-logo-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -2px;
  margin-right: 8px;
}



.grid-choices{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
.help{ color: var(--muted); font-size: 12px; }
.mt-1{ margin-top: 4px; } .mt-2{ margin-top: 8px; } .mt-3{ margin-top: 12px; } .mt-4{ margin-top: 16px; } .mt-6{ margin-top: 24px; }
.w-full{ width:100%; }

/* Responsive tweak */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.hidden { display: none }

/* ===== Responsive tweaks ===== */

/* 1) Header actions wrap on small screens.
   - "Signed in as…" drops to a new row under the buttons
   - Keeps everything aligned nicely */
.header .actions-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;          /* allow wrapping */
}

@media (max-width: 640px) {
  /* Put email on its own line (full width) and after the buttons */
  #userEmail {
    flex-basis: 100%;       /* new row */
    order: 3;               /* after the two buttons */
    margin-top: 4px;
  }
  /* Keep buttons on the first row */
  #backToWizard { order: 1; }
  .actions-right .btn-ghost[onclick*="logOut"] { order: 2; }
}

/* 2) Hide "sets utm_source/utm_medium…" helper text inside wizard pills on small screens */
@media (max-width: 640px) {
  .grid-choices .pill .help {
    display: none;
  }
}

/* Optional: tighten header spacing on very small screens */
@media (max-width: 480px) {
  .header { gap: 10px; }
  .brand h1 { font-size: 20px; }
}

/* Make wizard modal scrollable on small screens */
.modal {
  display: flex;            /* stack header/body/footer */
  flex-direction: column;
  max-height: 86vh;         /* keep within viewport */
}

.modal-header,
.modal-footer {
  flex-shrink: 0;           /* keep visible */
}

.modal-body {
  overflow-y: auto;         /* scroll the body content */
  -webkit-overflow-scrolling: touch;
}

/* On very small screens, bring modal a bit higher and allow more interior space */
@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-start;
    padding-top: 6vh;       /* was ~15vh; give body more room */
  }
  .modal {
    max-height: 88vh;
    width: 94vw;            /* a little narrower padding on tiny screens */
  }
  /* Dropdown lists inside wizard/forms shouldn’t exceed viewport */
  .combo-list {
    max-height: 40vh;
  }
  /* Quick-pick button rows should wrap instead of overflowing */
  .toggles {
    flex-wrap: wrap;
  }
}