/* File: icpf-sms/public/assets/app.css */
:root {
  --ink: #1d2a44;
  --ink-2: #2f4470;
  --paper: #f3f5f8;
  --bubble: #e7e9ee;
  --ok: #2f7d5b;
  --warn: #b7791f;
  --bad: #b83a3a;
  --bs-primary: #2f4470;
  --bs-primary-rgb: 47, 68, 112;
  --bs-link-color: #2f4470;
  --bs-link-color-rgb: 47, 68, 112;
  --bs-link-hover-color: #1d2a44;
}
body { background: var(--paper); color: #1f2430; }

.btn-primary { --bs-btn-bg: var(--ink-2); --bs-btn-border-color: var(--ink-2); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: var(--ink); }
.btn-outline-primary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--ink-2); --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-border-color: var(--ink-2); }
.form-control:focus, .form-select:focus { border-color: var(--ink-2); box-shadow: 0 0 0 .2rem rgba(47, 68, 112, .2); }

.app-nav { background: var(--ink); }
.app-nav .navbar-brand { color: #fff; font-weight: 700; letter-spacing: .01em; }
.app-nav .navbar-brand span { font-weight: 400; opacity: .7; }
.app-nav .nav-link { color: rgba(255, 255, 255, .75); }
.app-nav .nav-link:hover, .app-nav .nav-link.active { color: #fff; }
.app-nav .navbar-text { color: rgba(255, 255, 255, .6); }
.app-nav .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.app-nav .navbar-toggler-icon { filter: invert(1); }
.dry-banner { background: #fff4d6; color: #6b4a00; text-align: center; font-size: .875rem; padding: .4rem 1rem; border-bottom: 1px solid #f0dca0; }

.card { border: 1px solid #e1e5ec; }

/* Segment meter */
.sms-meter-bar { height: 6px; background: #e4e7ed; border-radius: 3px; overflow: hidden; }
.sms-meter-bar span { display: block; height: 100%; background: var(--ok); transition: width .15s ease-out; }
.sms-meter--warning .sms-meter-bar span { background: var(--warn); }
.sms-meter--danger .sms-meter-bar span { background: var(--bad); }
.sms-meter-text { font-size: .85rem; margin-top: .35rem; color: #4a5162; }
.sms-meter--danger .sms-meter-text strong { color: var(--bad); }

/* The phone preview: the one element with personality */
.phone-preview {
  background: #fff;
  border: 1px solid #d9dee7;
  border-radius: 28px;
  padding: 1.1rem 1rem 1.25rem;
  max-width: 420px;
  margin-inline: auto;
  box-shadow: 0 1px 0 #fff inset, 0 12px 28px -18px rgba(29, 42, 68, .45);
}
.phone-top { text-align: center; font-size: .75rem; color: #8a90a0; margin-bottom: .9rem; }
.bubble {
  background: var(--bubble);
  border-radius: 18px 18px 18px 6px;
  padding: .7rem .9rem;
  max-width: 88%;
  line-height: 1.4;
  font-size: .95rem;
  white-space: normal;
  overflow-wrap: anywhere;
  min-height: 2.6rem;
}
.phone-note { font-size: .75rem; color: #8a90a0; margin: .5rem 0 0 .4rem; }
.seg-break {
  display: block;
  margin: .45rem -.9rem;
  padding: 0 .9rem;
  border-top: 1px dashed #aeb5c4;
  font-size: .65rem;
  color: #8a90a0;
  line-height: 1.6;
}
.bad-char { background: #f6c9c9; color: var(--bad); padding: 0 .15em; border-radius: 3px; cursor: help; }

/* Campaign stats */
.stat { background: #fff; border: 1px solid #e1e5ec; border-radius: .5rem; padding: .6rem .25rem; }
.stat-n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-l { font-size: .75rem; color: #6b7280; }
.stat--delivered .stat-n { color: var(--ok); }
.stat--failed .stat-n { color: var(--bad); }
.progress-bar { background: var(--ok); transition: width .3s ease-out; }
.send-log { background: #111827; color: #d1d5db; font-size: .75rem; max-height: 220px; overflow: auto; padding: .75rem; border-radius: .5rem; white-space: pre-wrap; }

@media (max-width: 575.98px) {
  .stats .col { flex: 0 0 33.333%; }
  .stat-n { font-size: 1.3rem; }
  .btn-lg { --bs-btn-padding-y: .5rem; --bs-btn-font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sms-meter-bar span, .progress-bar { transition: none; }
}

/* WhatsApp runner */
.wa-current { min-height: 6.5rem; }
.wa-phone { font-size: 2rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.wa-name { font-size: 1.1rem; color: #4a5162; }
.wa-done { font-size: 1.1rem; color: var(--ok); padding: 1rem 0; }
.bubble--wa { background: #dcf8c6; border-radius: 18px 18px 6px 18px; margin-left: auto; }
.wa-card kbd { font-size: .7em; font-family: inherit; background: rgba(0, 0, 0, .25); }
@media (max-width: 575.98px) { .wa-phone { font-size: 1.5rem; } }