/* Minimal overrides on top of Tailwind CDN.

   DESIGN LANGUAGE (canon — keep new markup consistent with this):
   - Primary button:  bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium
                      rounded-lg px-4 py-2 (compact: px-3 py-1.5; disabled:bg-slate-300)
   - Secondary:       text-sm border border-slate-300 hover:border-indigo-400
                      hover:text-indigo-600 rounded-lg px-4 py-2 (compact px-3);
                      caution variant hovers amber-400/amber-600 (rotate token, prune)
   - Row icon-button: text-slate-500 px-1.5, hover indigo (edit/preview), red (delete),
                      emerald (send); disabled:opacity-50
   - Links:           content = text-indigo-600 hover:underline;
                      muted/back = text-slate-500 hover:text-indigo-600
   - Fields:          rounded-lg border border-slate-300 px-3 py-2 text-sm
                      (compact py-1.5; selects add bg-white); focus comes from the
                      global rule below — never add focus:ring utilities per-field
   - Labels:          block text-xs font-medium text-slate-500 mb-1
   - Cards:           bg-white rounded-xl shadow-sm border border-slate-200 p-5
                      (p-6 auth/modal hero, p-4 stat tiles); header strip px-5 py-4
   - Tables:          wrap in overflow-x-auto; thead text-xs uppercase tracking-wide
                      text-slate-500 border-b border-slate-100, cells px-4 py-3,
                      tbody divide-y divide-slate-50
   - Badges:          inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs
                      font-medium; larger state pill (Preview/Forwarding): px-2.5 py-1
                      font-semibold
   - Status colors:   emerald=ok/forwarding, amber=preview/warn/caution, red=error/dead,
                      sky=info, slate=neutral
   - Pass/fail glyphs: fa-circle-check / fa-circle-xmark (never ✓/✗ text or emoji)
   - Alerts/flashes:  bg-*-50 border border-*-300 text-*-800 rounded-lg px-4 py-3
                      text-sm, leading icon (see layout.php flash block)
   - Empty states:    in-card: p-8 text-center text-sm text-slate-500
*/
[x-cloak] { display: none !important; }

/* One consistent focus treatment for every field, app-wide */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgb(99 102 241);            /* indigo-500 */
    box-shadow: 0 0 0 2px rgb(99 102 241 / .35);
}

/* "What is sent" header block: wrap like raw email headers — long unbroken
   values (Message-IDs, addresses) break only where needed, never one-char columns */
.mail-headers { overflow-wrap: anywhere; }

/* Preview iframe: neutral canvas regardless of email content */
iframe.mail-preview {
    width: 100%;
    min-height: 16rem;
    background: #fff;
    border: 0;
}