/* ============================================================
   Neo-brutalism theme — Outfit font, thick black borders, flat
   vibrant green primary, hard offset drop shadows. White bg,
   near-black text, rounded pills for interactive elements.
   ============================================================ */

:root {
  --ink: #0d0d0d;
  --bg: #ffffff;
  --bg-muted: #f6f6f7;
  --bg-soft: #fafafa;

  --primary: #22c55e;
  --primary-dark: #16a34a;
  --primary-soft: #dcfce7;

  --muted: #6b7280;
  --muted-2: #9ca3af;

  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --warn: #f59e0b;
  --warn-soft: #fef3c7;
  --info: #2563eb;
  --info-soft: #dbeafe;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-xs: 2px 2px 0 0 var(--ink);
  --shadow-sm: 3px 3px 0 0 var(--ink);
  --shadow-md: 4px 4px 0 0 var(--ink);
  --shadow-lg: 6px 6px 0 0 var(--ink);
  --shadow-press: 1px 1px 0 0 var(--ink);

  /* Bold ink border — reserved for focal elements: primary buttons,
     the outer card, the brand mark, active tab pills. Everything
     else uses --hairline (soft gray) so passive surfaces don't
     scream black at the user. */
  --border: 2px solid var(--ink);
  --line: #d4d4d8;
  --hairline: 1.5px solid var(--line);
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 2rem;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary-dark); }
small { color: var(--muted); }
code { font-family: ui-monospace, monospace; font-size: 0.85em; }
.hidden { display: none !important; }

.dashboard { max-width: 920px; margin: 0 auto; }

/* ===== Cards ===== */
.card {
  background: var(--bg);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.85rem;
  margin-bottom: 1.75rem;
}
.card h2 {
  margin: 0 0 1.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.55rem;
  flex-wrap: wrap;
}
.card h2 i { color: var(--primary-dark); }
.card.disabled { opacity: 0.55; pointer-events: none; }

/* ===== Forms ===== */
.form-group { margin-bottom: 1.4rem; }
.form-group label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.88rem;
  margin-bottom: 0.55rem;
}

input, textarea, select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
/* Focus: soft halo, no movement. Inputs that move on focus feel
   unsteady; we lean on a colored ring for the focus cue instead. */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea {
  min-height: 130px; resize: vertical;
  font-family: 'Outfit', system-ui, sans-serif;
  line-height: 1.5;
}

.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* ===== Buttons ===== */
.btn {
  background: var(--primary);
  color: #fff;
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn.secondary { background: var(--bg); color: var(--ink); }
.btn.danger { background: var(--danger); color: #fff; }
.btn[data-busy="1"] { pointer-events: none; }

/* ===== Header (app-header for Scheduler / Reports / Settings) ===== */
.app-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.app-header .brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.app-header .brand-mark {
  width: 36px; height: 36px;
  display: inline-block;
  border-radius: 9px;
}
.app-header .brand-name { color: var(--ink); }

/* Each tab is its own bordered pill — no wrapping container, no
   outer border. The active tab inverts to a black fill. */
.app-nav {
  display: inline-flex;
  gap: 0.45rem;
  margin-left: 0.5rem;
}
.app-nav .nav-pill {
  padding: 6px 16px;
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.app-nav .nav-pill:hover { color: var(--ink); }
.app-nav .nav-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.header-tools {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-left: auto;
}
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: var(--border);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.icon-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); }
.icon-btn:active { transform: translate(1px, 1px); box-shadow: var(--shadow-press); }
.icon-btn.active { background: var(--primary); }
.icon-btn i { font-size: 0.95rem; }

/* WA-status dot stacked on the settings gear */
.wa-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #cbd5e1;
}
.wa-dot.status-connected { background: var(--primary); }
.wa-dot.status-qr { background: #fcd34d; }
.wa-dot.status-connecting { background: #93c5fd; }
.wa-dot.status-disconnected { background: var(--danger); }
.wa-dot.status-unknown { background: #cbd5e1; }

/* Help / logout / refresh "link" element used on report page */
.help-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.help-link:hover { text-decoration: underline; }
.header-help {
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: var(--hairline);
  background: var(--bg);
  color: var(--ink);
}

/* ===== Recipients mode switch (Type numbers / Upload sheet) =====
   Mirrors the top-level nav: per-tab borders, no outer wrapper. */
.mode-switch {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.mode-switch .mode {
  background: var(--bg);
  border: var(--hairline);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.mode-switch .mode.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.mode-switch .mode:hover:not(.active) { color: var(--ink); }

/* ===== Status & data pills ===== */
.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.status-connected { background: var(--primary); color: #fff; }
.status-qr { background: #fcd34d; color: var(--ink); }
.status-disconnected { background: var(--danger); color: white; }
.status-connecting { background: #93c5fd; color: var(--ink); }
.status-unknown { background: var(--bg-muted); color: var(--ink); }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 4px;
  background: var(--bg-muted);
  color: var(--ink);
}
.pill.pending { background: var(--warn-soft); }
.pill.completed { background: var(--primary); color: #fff; }
.pill.failed { background: var(--danger); color: #fff; }

/* ===== Result panel ===== */
.result {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  max-height: 280px;
  overflow: auto;
}
.result.ok { background: var(--primary-soft); border: 1.5px solid #a7e2b8; }
.result.err { background: var(--danger-soft); border: 1.5px solid #fca5a5; }

/* ===== QR block ===== */
.qr-block { text-align: center; padding: 0.5rem; }
.qr-block img {
  max-width: 280px;
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: white;
}
.qr-block p { color: var(--muted); margin-top: 0.75rem; font-size: 0.9rem; }

/* ===== Login ===== */
.login-container {
  position: fixed; inset: 0;
  background: var(--primary);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.18) 0, transparent 50%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.login-card {
  background: var(--bg);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.75rem;
  width: 100%; max-width: 380px;
  animation: loginSlideIn 0.35s ease-out;
}
@keyframes loginSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-header { text-align: center; margin-bottom: 1.5rem; }
.login-header h1 {
  margin: 0.65rem 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.login-header p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.login-shield {
  width: 64px; height: 64px;
  display: inline-block;
  border-radius: 16px;
}

.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-form .form-group { position: relative; margin: 0; }
.login-form .form-group i {
  position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.login-form .form-group input { padding-left: 2.6rem; }
.login-btn {
  background: var(--primary);
  color: #fff;
  border: var(--border);
  padding: 0.9rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  letter-spacing: -0.005em;
}
.login-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-lg); }
.login-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 0 var(--ink); }
.login-error {
  background: var(--danger-soft);
  border: 1.5px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 500;
}
.login-loading {
  color: var(--ink);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.login-loading i { animation: spin 1s linear infinite; color: var(--primary-dark); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Loaders ===== */
.loader-block {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 2rem;
  color: var(--ink);
  font-size: 0.95rem; font-weight: 600;
}
.loader-block i { font-size: 1.2rem; color: var(--primary-dark); }
.fa-spin { animation: spin 1s linear infinite; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  background: var(--bg-muted);
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
tr:last-child td { border-bottom: none; }

/* ===== WA "not connected" notice on Schedule page ===== */
.wa-notice {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--warn-soft);
  border: 1.5px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  margin: 0 0 1rem;
  font-weight: 500;
}
.wa-notice a { color: var(--ink); font-weight: 700; text-decoration: underline; }

/* ===== WA connect progress (Settings page) ===== */
.wa-progress {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--info-soft);
  border: 1.5px solid #93c5fd;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0.25rem 0 0.75rem;
}
.wa-progress i { color: var(--info); font-size: 0.95rem; }

/* ===== Settings — connected-state action row ===== */
.wa-connected-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.85rem; margin-top: 0.85rem;
}
.link-danger {
  background: none; border: none; padding: 0;
  color: var(--danger);
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.link-danger:hover { text-decoration: underline; }

/* ===== Report page — heading row + meta + filters + banners ===== */
.report-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.report-title-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.report-title-info h1 {
  margin: 0;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--ink);
  word-break: break-word;
  letter-spacing: -0.02em;
}
.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.back-link:hover { color: var(--ink); }
.copy-id {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer; user-select: all;
}

/* Fires-at + attachment chips under the report title. The chip list
   sits inline alongside the paperclip count so the user sees both
   "how many" and "which ones" without an extra section. */
.report-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.65rem 0.85rem;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.report-meta-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap;
}
.report-meta-item > i { color: var(--muted-2); }
.report-attach-list {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-left: 0.35rem;
}
.report-attach-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-muted);
  color: var(--ink);
  text-decoration: none;
  border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 0.74rem;
  font-weight: 500;
  max-width: 180px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.report-attach-chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.report-attach-chip i { color: var(--primary-dark); font-size: 0.72rem; }
.report-attach-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.status-banner {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 0.65rem;
}
.status-banner.paused { background: var(--warn-soft); border: 1.5px solid #fcd34d; }
.status-banner.cancelled { background: var(--danger); color: #fff; }
.status-banner.completed { background: var(--primary); color: #fff; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; margin-bottom: 0.85rem;
}
.filter-bar .chip {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: var(--hairline);
  background: var(--bg);
  cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  color: var(--muted);
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.filter-bar .chip:hover { color: var(--ink); }
.filter-bar .chip.active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.filter-bar input {
  padding: 0.45rem 0.9rem;
  max-width: 220px;
  border: var(--hairline);
  border-radius: var(--radius-pill);
}

.msg-cell {
  max-width: 340px;
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap; word-break: break-word;
}
.reason-cell {
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 500;
  word-break: break-word;
  max-width: 240px;
}

/* ===== Phone picker =====
   Wrapper holds the country-code button + tag list + input. The
   wrapper carries the border and focus ring so the children stay
   visually quiet. Inner input must NOT fire its own focus halo,
   otherwise we get two rings (and the input visibly shifts). */
.phone-picker {
  display: flex; gap: 0;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg);
  min-height: 48px;
  position: relative;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.phone-picker:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.phone-picker .pp-input:focus { box-shadow: none; border-color: transparent; }

.pp-cc-wrap { position: relative; }
.pp-cc-btn {
  background: var(--bg-muted);
  border: none;
  border-right: var(--hairline);
  border-radius: 8px 0 0 8px;
  padding: 0 14px; height: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-family: inherit;
  font-size: 0.92rem; font-weight: 600;
  color: var(--ink);
}
.pp-cc-btn:hover { background: var(--primary-soft); }
.pp-cc-flag { font-size: 1.1rem; line-height: 1; }
.pp-cc-dial { font-weight: 700; }

.pp-cc-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 320px; max-height: 320px; overflow: hidden;
  background: var(--bg);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 50;
  display: flex; flex-direction: column;
}
.pp-cc-search {
  width: 100%;
  padding: 10px 12px;
  border: none; border-bottom: var(--hairline);
  font-family: inherit;
  font-size: 0.9rem;
}
.pp-cc-search:focus { outline: none; }
.pp-cc-list { overflow-y: auto; max-height: 280px; }
.pp-cc-item {
  padding: 9px 12px; cursor: pointer; display: grid;
  grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  font-size: 0.88rem;
}
.pp-cc-item:hover { background: var(--primary-soft); }
.pp-cc-name { color: var(--ink); }
.pp-cc-dialnum { color: var(--muted); font-variant-numeric: tabular-nums; }

.pp-tags {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 6px 8px; min-height: 38px; align-items: center;
}
.pp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-soft);
  color: var(--ink);
  border: 1.5px solid #a7e2b8;
  border-radius: var(--radius-pill);
  padding: 2px 4px 2px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: text;
  user-select: none;
}
.pp-tag-cc { color: var(--primary-dark); font-weight: 700; }
.pp-tag-num { color: var(--ink); }
.pp-tag-x {
  background: transparent; border: none; color: var(--ink);
  width: 20px; height: 20px; line-height: 1;
  border-radius: 999px; cursor: pointer; padding: 0;
  font-size: 0.95rem; font-weight: 700;
}
.pp-tag-x:hover { background: rgba(0,0,0,0.12); }

.pp-input {
  flex: 1 1 120px; min-width: 0;
  border: none; padding: 4px 6px;
  font-family: inherit; font-size: 0.92rem;
  background: transparent;
}
.pp-input:focus { outline: none; box-shadow: none; }

/* ===== File / sheet zone ===== */
.file-zone {
  position: relative;
  display: block;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 1.5rem 1.25rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.file-zone:hover, .file-zone.drag-over { border-color: var(--primary); }
.file-zone:hover, .file-zone.drag-over { background: var(--primary-soft); }
.file-zone.slim {
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-pill);
}
.file-zone.slim .file-zone-prompt {
  display: flex; align-items: center; gap: 0.6rem;
  text-align: left; pointer-events: none;
}
.file-zone.slim .file-zone-prompt i {
  display: inline; font-size: 1rem; margin: 0;
  color: var(--primary-dark);
}
.file-zone.slim .file-zone-prompt span {
  display: inline; font-size: 0.88rem; font-weight: 600; margin: 0;
  color: var(--ink);
}
.file-zone.slim .file-zone-prompt small {
  font-size: 0.72rem; color: var(--muted); margin-left: auto;
}
.file-zone.slim .file-zone-info { padding: 0; }
.file-zone.slim .file-zone-info > i { font-size: 1.2rem; }

.file-zone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}

.file-zone-prompt { text-align: center; pointer-events: none; }
.file-zone-prompt i {
  display: block;
  font-size: 1.85rem;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
.file-zone-prompt span {
  display: block; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem;
  font-size: 0.95rem;
}
.file-zone-prompt small { color: var(--muted); font-size: 0.78rem; }

.file-zone-info {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.15rem;
  text-align: left;
}
.file-zone-info > i {
  font-size: 1.5rem;
  color: var(--primary-dark);
  flex-shrink: 0;
}
.file-zone-info .file-text { min-width: 0; flex: 1; }
.file-zone-info .file-name {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-zone-info small { color: var(--muted); font-size: 0.78rem; }
.file-clear {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: var(--hairline);
  color: var(--muted);
  cursor: pointer; padding: 0; line-height: 1;
  flex-shrink: 0;
  position: relative; z-index: 1;
  font-weight: 700;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.file-clear:hover { background: var(--danger); color: white; }

/* ===== Sheet + phone-column + default-country pickers ===== */
.sheet-picker-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 0.85rem;
}
.picker-cell {
  flex: 1 1 200px; min-width: 0;
  background: var(--bg);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  display: flex; flex-direction: column;
}
.picker-cell label {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.picker-cell label i { color: var(--primary-dark); font-size: 0.85rem; }
.picker-cell select {
  border: none; outline: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  width: 100%;
  cursor: pointer;
}
#detectedBadge {
  display: inline-block;
  background: var(--primary);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.cc-hint {
  font-size: 0.62rem; font-weight: 500;
  color: var(--muted); letter-spacing: 0;
  text-transform: none;
  margin-left: auto;
}

/* ===== Attachments ===== */
.attachments-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  margin: 0.35rem 0 0.5rem;
}
.attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg);
  color: var(--muted);
  border: 1.5px dashed var(--line);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.attach-btn:hover { color: var(--ink); border-color: var(--primary); background: var(--primary-soft); }
.attach-btn i { font-size: 0.82rem; }

.attachment-chips { display: contents; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg);
  color: var(--ink);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: 2px 4px 2px 10px;
  font-size: 0.78rem;
  max-width: 220px;
  font-weight: 500;
}
.attach-chip i { color: var(--primary-dark); font-size: 0.78rem; }
.attach-chip .chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.attach-chip .chip-x {
  background: transparent; border: none; color: var(--ink);
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer; padding: 0;
  font-size: 0.95rem; line-height: 1;
  font-weight: 700;
}
.attach-chip .chip-x:hover { background: var(--danger); color: white; }
.attach-chip.uploading { background: var(--warn-soft); }
.attach-chip.uploading i { color: var(--warn); }

/* ===== Read-only chips for sheet rows ===== */
.sheet-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 240px; overflow-y: auto;
  padding: 10px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.pp-tag.pp-tag-readonly {
  background: var(--bg-muted);
  color: var(--ink);
  border-color: var(--line);
  cursor: default;
}
.pp-tag.pp-tag-readonly .pp-tag-num { color: var(--ink); }

.pp-tag-edit {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--warn-soft);
  border: 1.5px solid var(--warn);
  border-radius: var(--radius-pill);
  padding: 2px 4px 2px 10px;
}
.pp-tag-edit .pp-tag-cc { color: var(--warn); }
.pp-tag-edit-input {
  border: none; background: transparent; padding: 2px 4px;
  font-family: inherit; font-size: 0.85rem; width: 110px;
  font-variant-numeric: tabular-nums;
}
.pp-tag-edit-input:focus { outline: none; }

/* ===== Variable mapping row (legacy, still used for old paths) ===== */
.var-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.var-row input { padding: 6px 9px; }

/* ===== Reports table (desktop = real table, mobile = stacked cards) ===== */
.broadcasts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.broadcasts-table { min-width: 560px; }
.b-total-label { display: none; }
.b-name-text { font-weight: 600; color: var(--ink); }
.b-name-sub {
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.45rem;
  flex-wrap: wrap;
}
.b-name-sub i { font-size: 0.72rem; color: var(--muted-2); }
.b-name-sub .dot-sep { color: var(--muted-2); }

/* ============================================================
   MOBILE OVERRIDES — main card sheds its border + shadow so the
   page reads as a flat document instead of nested boxes. Inputs,
   pills and switches keep their borders so the brutalist accent
   is still there, just on the controls themselves.
   ============================================================ */
@media (max-width: 600px) {
  body { padding: 1rem 0.85rem; font-size: 14.5px; }
  .row { flex-direction: column; }
  .pp-cc-dropdown { width: calc(100vw - 2rem); }

  /* Flatten the outer card on phones — the border + offset shadow
     compete with the header pills and the form's own borders, making
     the layout feel like nested boxes. Padding becomes the content's
     own margin instead. */
  .card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .card h2 { font-size: 1.05rem; margin-bottom: 1rem; }
  .form-group { margin-bottom: 1.1rem; }
  .form-group label { font-size: 0.84rem; }
  input, textarea, select { font-size: 0.95rem; padding: 0.65rem 0.85rem; }
  .btn { font-size: 0.9rem; padding: 0.65rem 1.25rem; }

  .app-header { gap: 0.55rem; margin-bottom: 1.2rem; }
  .app-header .brand-name { display: none; }
  .app-nav { order: 3; flex: 1 1 100%; justify-content: center; }
  .header-tools { gap: 0.4rem; }
  .icon-btn { width: 38px; height: 38px; }

  .form-group label .mode-switch { margin: 0.45rem 0 0; }

  .sheet-picker-row { gap: 8px; }
  .picker-cell { flex: 1 1 100%; }

  .report-title-row h1 { font-size: 1.25rem; }
  .action-bar { width: 100%; }
  .action-bar .btn { flex: 1 1 auto; font-size: 0.82rem; padding: 0.5rem 0.75rem; }

  /* Broadcasts list → stacked cards */
  .broadcasts-table-wrap { overflow-x: visible; }
  .broadcasts-table { min-width: 0; }
  .broadcasts-table thead { display: none; }
  .broadcasts-table, .broadcasts-table tbody { display: block; width: 100%; }
  .broadcasts-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
  }
  .broadcasts-table tr:last-child { border-bottom: none; }
  .broadcasts-table td { display: block; padding: 0; border: none; }
  .broadcasts-table .b-type { display: none; }
  .broadcasts-table .b-name {
    grid-column: 1; grid-row: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .broadcasts-table .b-name .b-name-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 700;
  }
  .broadcasts-table .b-name .b-name-sub { font-size: 0.7rem; }
  .broadcasts-table .b-view { grid-column: 2; grid-row: 1; align-self: center; }
  .broadcasts-table .b-view a { font-size: 0.82rem; font-weight: 700; }
  .broadcasts-table .b-status {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .broadcasts-table .b-status .pill { margin: 0; }
  .broadcasts-table .b-total {
    grid-column: 1; grid-row: 3;
    color: var(--muted); font-size: 0.72rem;
  }
  .broadcasts-table .b-total-label { display: inline; }
  .broadcasts-table .b-created {
    grid-column: 2; grid-row: 3;
    color: var(--muted); font-size: 0.72rem; text-align: right;
  }

  /* Per-phone details → stacked cards */
  #detailsTable thead { display: none; }
  #detailsTable, #detailsTable tbody { display: block; width: 100%; }
  #detailsTable tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
  }
  #detailsTable tr:last-child { border-bottom: none; }
  #detailsTable td { display: block; padding: 0; border: none; }
  #detailsTable .d-phone {
    grid-column: 1; grid-row: 1;
    font-size: 0.88rem; font-weight: 700;
  }
  #detailsTable .d-status {
    grid-column: 2; grid-row: 1; text-align: right;
  }
  #detailsTable .d-msg {
    grid-column: 1 / -1; grid-row: 2;
    max-width: 100%; font-size: 0.75rem;
  }
  #detailsTable .d-reason {
    grid-column: 1 / -1; grid-row: 3;
    max-width: 100%; font-size: 0.75rem;
  }
  #detailsTable .d-reason:empty { display: none; }

  .filter-bar input { max-width: 100%; flex: 1 1 100%; }
  .filter-bar #downloadCsvBtn { margin-left: 0 !important; }

}