/*
 * Joorna v2 — Design tokens scoped al modulo WhatsApp
 * ------------------------------------------------------------------
 * Single source of truth dei valori cromatici/tipografici/di motion
 * usati dalle 8 schermate WhatsApp del pannello admin Filament:
 *   Inbox, Compliance, Quality, Onboarding, Campaigns,
 *   WAConfig, AuditLog, Activation.
 *
 * Riferimenti:
 *   - docs/15_design_system/extracted-tokens.md (sintesi tokens)
 *   - docs/02_whatsapp/ui_ux_redesign_plan.md   (sub-roadmap WA)
 *   - mockup/v1-initial-export/                 (snapshot mockup)
 *
 * Convenzioni:
 *   --jo-wa-*              token specifici WhatsApp (es. bolle chat)
 *   --jo-primary-*         brand Joorna #7400ff (scala 50→900)
 *   --jo-secondary-*       brand Joorna #cff601 lime
 *   --jo-surface-*         neutrals (Tailwind Zinc, dal mockup)
 *   --jo-{success|warning|danger|info}{,-bg}  semantic
 *
 * Brand decisions (2026-05-13):
 *   - Primary e Secondary mantengono i colori brand Joorna attuali
 *     (#7400ff + #cff601 lime). NON adottata la palette violet del
 *     mockup `ui.joorna.it` (#8b5cf6).
 *   - Tutto il resto (surface, semantic, font, radii, motion) deriva
 *     dal mockup.
 *
 * Generazione scala primary (50→900):
 *   Approssimazione OKLCH ramp da #7400ff come step 600 (saturo,
 *   medio-scuro). Da rifinire con uicolors.app per pareggiare la
 *   palette che Filament ricalcola internamente da Color::hex('#7400ff').
 */

:root {
  /* ──────────────────────────────────────────────────────────
   * Brand — Primary (Joorna viola #7400ff)
   * ────────────────────────────────────────────────────────── */
  --jo-primary-50:  #f5edff;
  --jo-primary-100: #ead9ff;
  --jo-primary-200: #d3b3ff;
  --jo-primary-300: #b888ff;
  --jo-primary-400: #9b5dff;
  --jo-primary-500: #8536ff;
  --jo-primary-600: #7400ff;  /* BASE — usato per CTA, link, accent */
  --jo-primary-700: #5e00d6;
  --jo-primary-800: #4900a3;
  --jo-primary-900: #340075;

  /* ──────────────────────────────────────────────────────────
   * Brand — Secondary (Joorna lime #cff601)
   * Usato come accent puntuale, non come scala piena.
   * ────────────────────────────────────────────────────────── */
  --jo-secondary:        #cff601;
  --jo-secondary-bg:     #f6fcd5;   /* fondo tintato leggero */
  --jo-secondary-text:   #4b5d00;   /* testo su bg lime */
  --jo-secondary-hover:  #b9de00;

  /* ──────────────────────────────────────────────────────────
   * Surface / Neutrals (Tailwind Zinc, dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-surface-50:  #fafafa;
  --jo-surface-100: #f4f4f5;
  --jo-surface-200: #e4e4e7;
  --jo-surface-300: #d4d4d8;
  --jo-surface-400: #a1a1aa;
  --jo-surface-500: #71717a;
  --jo-surface-600: #52525b;
  --jo-surface-700: #3f3f46;
  --jo-surface-800: #27272a;
  --jo-surface-900: #18181b;

  /* ──────────────────────────────────────────────────────────
   * Semantic (success / warning / danger / info)
   * BG = sfondi tintati per alert, badge, banner.
   * ────────────────────────────────────────────────────────── */
  --jo-success:     #10b981;   /* emerald-500 */
  --jo-success-bg:  #ecfdf5;   /* emerald-50 */
  --jo-success-fg:  #065f46;   /* emerald-800 — testo su bg light */

  --jo-warning:     #f59e0b;   /* amber-500 (token semantic custom dal mockup) */
  --jo-warning-bg:  #fffbeb;   /* amber-50 */
  --jo-warning-fg:  #92400e;   /* amber-800 */

  --jo-danger:      #ef4444;   /* red-500 */
  --jo-danger-bg:   #fef2f2;   /* red-50 */
  --jo-danger-fg:   #991b1b;   /* red-800 */

  --jo-info:        #3b82f6;   /* blue-500 */
  --jo-info-bg:     #eff6ff;   /* blue-50 */
  --jo-info-fg:     #1e40af;   /* blue-800 */

  /* ──────────────────────────────────────────────────────────
   * WhatsApp-specific (chat-app styling)
   * Trovati hardcoded nel CSS del mockup ui.joorna.it.
   * Usati nell'Inbox WhatsApp per dare lo stile "chat app".
   * ────────────────────────────────────────────────────────── */
  --jo-wa-bubble-outbound:    #d9fdd3;   /* messaggio operatore (mio) */
  --jo-wa-bubble-outbound-fg: #111827;   /* testo sulla bolla outbound */
  --jo-wa-bubble-inbound:     #ffffff;   /* messaggio ospite (loro) */
  --jo-wa-bubble-inbound-fg:  #111827;
  --jo-wa-chat-background:    #e5ddd5;   /* sfondo area chat (beige WhatsApp) */
  --jo-wa-tick-pending:       var(--jo-surface-400);
  --jo-wa-tick-sent:          var(--jo-surface-500);
  --jo-wa-tick-delivered:     var(--jo-surface-600);
  --jo-wa-tick-read:          var(--jo-info);
  --jo-wa-tick-failed:        var(--jo-danger);

  /* ──────────────────────────────────────────────────────────
   * Channel badges (Inbox multi-canale)
   * Tones per i badge "WhatsApp / Email / Chatbot / IG / FB".
   * ────────────────────────────────────────────────────────── */
  --jo-channel-whatsapp-bg:   #d1fae5;
  --jo-channel-whatsapp-fg:   #065f46;
  --jo-channel-email-bg:      var(--jo-info-bg);
  --jo-channel-email-fg:      var(--jo-info-fg);
  --jo-channel-chatbot-bg:    var(--jo-primary-100);
  --jo-channel-chatbot-fg:    var(--jo-primary-800);
  --jo-channel-instagram-bg:  #fce7f3;
  --jo-channel-instagram-fg:  #9d174d;
  --jo-channel-facebook-bg:   var(--jo-info-bg);
  --jo-channel-facebook-fg:   var(--jo-info-fg);

  /* ──────────────────────────────────────────────────────────
   * Typography (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  'Liberation Mono', 'Courier New', monospace;

  --jo-text-xs:    0.75rem;     /* 12px / lh 1     */
  --jo-text-sm:    0.875rem;    /* 14px / lh 1.25  */
  --jo-text-base:  1rem;        /* 16px / lh 1.5   */
  --jo-text-lg:    1.125rem;    /* 18px / lh 1.555 */
  --jo-text-xl:    1.25rem;     /* 20px / lh 1.4   */

  /* ──────────────────────────────────────────────────────────
   * Border radius (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-radius-sm:  0.25rem;
  --jo-radius-md:  0.375rem;
  --jo-radius-lg:  0.5rem;
  --jo-radius-xl:  0.75rem;
  --jo-radius-2xl: 1rem;
  --jo-radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
   * Shadow (Tailwind default — il mockup non personalizza)
   * ────────────────────────────────────────────────────────── */
  --jo-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --jo-shadow:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --jo-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --jo-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --jo-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ──────────────────────────────────────────────────────────
   * Motion (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-transition-duration: 0.15s;
  --jo-transition-timing:   cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
  --jo-transition:          var(--jo-transition-duration) var(--jo-transition-timing);
}

/* ──────────────────────────────────────────────────────────────
 * Dark mode override
 * Sovrascrivi solo i token che cambiano in dark mode; gli altri
 * restano coerenti tra light e dark (es. primary brand).
 * ────────────────────────────────────────────────────────────── */
.dark, [data-theme='dark'] {
  --jo-wa-bubble-inbound:     #374151;   /* gray-700 */
  --jo-wa-bubble-inbound-fg:  #f9fafb;
  --jo-wa-chat-background:    #111827;   /* gray-900 */

  /* I bg semantic light (es. --jo-success-bg) restano "vivaci" anche
   * in dark mode per non perdere segnaletica; eventualmente
   * sostituire con varianti più tenui se appaiono troppo accese. */
}

/* ──────────────────────────────────────────────────────────────
 * Helper utility scoped al modulo WA
 * Classi atomiche prefissate `.jo-wa-*` per ridurre lo `style="..."`
 * inline nei Blade. Non sostituiscono Tailwind, lo affiancano per
 * pattern troppo specifici (es. bolle chat) che non meritano una
 * utility Tailwind dedicata.
 * ────────────────────────────────────────────────────────────── */

.jo-wa-bubble-outbound {
  background: var(--jo-wa-bubble-outbound);
  color: var(--jo-wa-bubble-outbound-fg);
  border-radius: var(--jo-radius-xl);
  border-bottom-right-radius: var(--jo-radius-sm);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--jo-shadow-sm);
}

.jo-wa-bubble-inbound {
  background: var(--jo-wa-bubble-inbound);
  color: var(--jo-wa-bubble-inbound-fg);
  border-radius: var(--jo-radius-xl);
  border-bottom-left-radius: var(--jo-radius-sm);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--jo-shadow-sm);
}

.jo-wa-chat-bg {
  background-color: var(--jo-wa-chat-background);
}

/* ──────────────────────────────────────────────────────────────
 * Template preview "iPhone mockup" usato in Create/Edit campagna.
 * Sfondo beige WhatsApp + bolla outbound + dot pattern decorativo.
 * Colori #8696a0, #00a884, #c8e6c0 sono i colori WhatsApp standard
 * (non token Joorna): timestamp grigio, link verde, divider verde
 * chiaro — fedeli all'app per il realismo dell'anteprima.
 * ────────────────────────────────────────────────────────────── */
.jo-wa-template-preview {
  background: var(--jo-wa-chat-background);
  border-radius: var(--jo-radius-xl);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}
.jo-wa-template-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.jo-wa-template-preview__bubble {
  position: relative;
  z-index: 1;
  max-width: 20rem;
  background: var(--jo-wa-bubble-outbound);
  color: var(--jo-wa-bubble-outbound-fg);
  border-radius: var(--jo-radius-lg);
  border-top-right-radius: 0;
  padding: 0.75rem;
  box-shadow: var(--jo-shadow-sm);
  margin-left: auto;
}
.jo-wa-template-preview__text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--jo-wa-bubble-outbound-fg);
  white-space: pre-line;
  font-family: var(--jo-font-sans);
}
.jo-wa-template-preview__time {
  font-size: 0.6875rem;
  color: #8696a0;
  text-align: right;
  margin-top: 0.25rem;
}
.jo-wa-template-preview__buttons {
  margin-top: 0.5rem;
  border-top: 1px solid #c8e6c0;
  padding-top: 0.5rem;
}
.jo-wa-template-preview__button {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #00a884;
  padding: 0.375rem 0;
}
.jo-wa-template-preview__button + .jo-wa-template-preview__button {
  border-top: 1px solid #c8e6c0;
}
.jo-wa-template-preview__empty {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 0;
  color: #8696a0;
  font-size: 0.8125rem;
  font-family: var(--jo-font-sans);
}

/* Channel badge generico, applica una classe modificatore es.
 * `.jo-channel-badge.is-whatsapp` per pickare i token canale. */
.jo-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--jo-radius-md);
  font-size: var(--jo-text-xs);
  font-weight: 600;
  line-height: 1.25;
}
.jo-channel-badge.is-whatsapp  { background: var(--jo-channel-whatsapp-bg);  color: var(--jo-channel-whatsapp-fg); }
.jo-channel-badge.is-email     { background: var(--jo-channel-email-bg);     color: var(--jo-channel-email-fg); }
.jo-channel-badge.is-chatbot   { background: var(--jo-channel-chatbot-bg);   color: var(--jo-channel-chatbot-fg); }
.jo-channel-badge.is-instagram { background: var(--jo-channel-instagram-bg); color: var(--jo-channel-instagram-fg); }
.jo-channel-badge.is-facebook  { background: var(--jo-channel-facebook-bg);  color: var(--jo-channel-facebook-fg); }

/* Button "Elimina" stile danger con hover + focus parity (a11y).
 * Usato nell'Inbox sopra l'header chat. Lo style base resta inline nel
 * Blade (riusabile altrove); qui solo le pseudo-classi che JS inline
 * non saprebbe coprire per la tastiera. */
.jo-wa-btn-danger:hover,
.jo-wa-btn-danger:focus-visible {
    background: var(--jo-danger) !important;
    color: white !important;
    outline: 2px solid var(--jo-danger);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────
 * Compose box — textarea + send button con focus visible (a11y)
 * ────────────────────────────────────────────────────────────── */
.jo-wa-compose-input:focus {
    outline: none;
    border-color: var(--jo-primary-500);
    box-shadow: 0 0 0 2px var(--jo-primary-100);
}
.jo-wa-send-btn:hover:not(:disabled),
.jo-wa-send-btn:focus-visible:not(:disabled) {
    background: var(--jo-primary-700) !important;
}
.jo-wa-send-btn:focus-visible {
    outline: 2px solid var(--jo-primary-300);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────
 * Status badge (Inbox conversation row): open / pending / closed
 * Evita interpolazione di stringhe CSS in style="..." nei Blade
 * (rompe il CSS linter VSCode sui Blade `{{ }}`).
 * ────────────────────────────────────────────────────────────── */
.jo-wa-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--jo-radius-md);
    font-size: var(--jo-text-xs);
    font-weight: 600;
    line-height: 1.25;
}
.jo-wa-status-badge--open    { background: var(--jo-channel-whatsapp-bg); color: var(--jo-channel-whatsapp-fg); }
.jo-wa-status-badge--pending { background: var(--jo-warning-bg);          color: var(--jo-warning-fg); }
.jo-wa-status-badge--closed  { background: var(--jo-surface-100);         color: var(--jo-surface-500); }

/* ──────────────────────────────────────────────────────────────
 * Campagne — Create/Edit campaign + Template library partial
 *
 * Helper classes condivise dai 3 file:
 *   - resources/views/filament/resources/wa-campaign-resource/
 *       pages/{create,edit}-wa-campaign.blade.php
 *       partials/template-library.blade.php
 *
 * Estratte qui per:
 *   1. eliminare duplicazione del `<style>` block tra Create/Edit
 *   2. azzerare gli hex hardcoded a favore dei token --jo-*
 *   3. centralizzare la dark mode (i Blade hanno solo HTML, niente
 *      override `.dark .qualcosa`)
 *
 * Convenzione naming: `.jo-wa-campaign-*` (scope = pagine campagne).
 * ────────────────────────────────────────────────────────────── */

/* Card contenitore (form colonna sx + template library colonna dx) */
.jo-wa-campaign-card {
    background: white;
    border: 1px solid var(--jo-surface-200);
    border-radius: var(--jo-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--jo-shadow-sm);
}
.dark .jo-wa-campaign-card {
    background: var(--jo-surface-800);
    border-color: var(--jo-surface-700);
}

/* Titoli sezione interni alla card */
.jo-wa-campaign-section-title {
    font-size: var(--jo-text-sm);
    font-weight: 600;
    color: var(--jo-surface-900);
    margin-bottom: 1rem;
}
.dark .jo-wa-campaign-section-title {
    color: var(--jo-surface-50);
}

/* Stat cards orizzontali a 4 colonne (header pagina) */
.jo-wa-campaign-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--jo-radius-xl);
    border: 1px solid;
    --jo-stat-bg:     var(--jo-primary-50);
    --jo-stat-border: var(--jo-primary-200);
    --jo-stat-fg:     var(--jo-primary-600);
    background: var(--jo-stat-bg);
    border-color: var(--jo-stat-border);
    color: var(--jo-stat-fg);
}
.jo-wa-campaign-stat--success {
    --jo-stat-bg:     var(--jo-success-bg);
    --jo-stat-border: #a7f3d0;            /* emerald-200 — non token Joorna */
    --jo-stat-fg:     #059669;            /* emerald-600 — più scuro di --jo-success per contrasto su bg-50 */
}
.jo-wa-campaign-stat--info {
    --jo-stat-bg:     var(--jo-info-bg);
    --jo-stat-border: #bfdbfe;            /* blue-200 */
    --jo-stat-fg:     #2563eb;            /* blue-600 */
}
.jo-wa-campaign-stat--warning {
    --jo-stat-bg:     var(--jo-warning-bg);
    --jo-stat-border: #fde68a;            /* amber-200 */
    --jo-stat-fg:     #d97706;            /* amber-600 */
}
.jo-wa-campaign-stat__icon { flex-shrink: 0; }
.jo-wa-campaign-stat__icon svg { width: 1.75rem; height: 1.75rem; }
.jo-wa-campaign-stat__content { display: flex; flex-direction: column; }
.jo-wa-campaign-stat__label { font-size: var(--jo-text-xs); font-weight: 500; line-height: 1.2; }
.jo-wa-campaign-stat__value { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }

/* Recipient picker (4 bottoni: all / men / women / segments) */
.jo-wa-campaign-recipient-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--jo-surface-200);
    border-radius: var(--jo-radius-xl);
    cursor: pointer;
    transition: var(--jo-transition);
    background: white;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jo-surface-700);
}
.jo-wa-campaign-recipient-btn:hover { border-color: var(--jo-primary-300); }
.jo-wa-campaign-recipient-btn.is-active {
    border-color: var(--jo-primary-600);
    background: var(--jo-primary-50);
    color: var(--jo-primary-600);
}
.jo-wa-campaign-recipient-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.dark .jo-wa-campaign-recipient-btn {
    background: var(--jo-surface-800);
    border-color: var(--jo-surface-700);
    color: var(--jo-surface-300);
}
.dark .jo-wa-campaign-recipient-btn.is-active {
    background: var(--jo-primary-900);
    border-color: var(--jo-primary-600);
    color: var(--jo-primary-300);
}

/* Segment picker list (visible quando recipientType === 'segments') */
.jo-wa-campaign-segments {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: var(--jo-surface-50);
    border-radius: var(--jo-radius-lg);
    border: 1px solid var(--jo-surface-200);
    max-height: 16rem;
    overflow-y: auto;
}
.dark .jo-wa-campaign-segments {
    background: var(--jo-surface-800);
    border-color: var(--jo-surface-700);
}
.jo-wa-campaign-segment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--jo-radius-lg);
    cursor: pointer;
    transition: background 0.1s;
}
.jo-wa-campaign-segment-item:hover { background: var(--jo-surface-50); }
.jo-wa-campaign-segment-item.is-selected { background: var(--jo-primary-50); }
.dark .jo-wa-campaign-segment-item:hover { background: var(--jo-surface-700); }
.jo-wa-campaign-segment-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--jo-surface-300);
    border-radius: var(--jo-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: white;
}
.jo-wa-campaign-segment-checkbox.is-checked {
    background: var(--jo-primary-600);
    border-color: var(--jo-primary-600);
}
.jo-wa-campaign-segment-name {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jo-surface-700);
}
.dark .jo-wa-campaign-segment-name { color: var(--jo-surface-200); }
.jo-wa-campaign-segment-count {
    font-size: var(--jo-text-xs);
    color: var(--jo-surface-400);
}

/* Selected template box (mostra il template scelto + variabili) */
.jo-wa-campaign-selected-template {
    border: 2px solid var(--jo-primary-600);
    background: var(--jo-primary-50);
    border-radius: var(--jo-radius-lg);
    padding: 1rem;
}
.dark .jo-wa-campaign-selected-template { background: rgba(116, 0, 255, 0.15); }
.jo-wa-campaign-selected-template__name {
    font-weight: 600;
    font-size: var(--jo-text-sm);
    color: var(--jo-primary-600);
}
.jo-wa-campaign-selected-template__body {
    font-size: 0.8125rem;
    color: var(--jo-surface-500);
    margin-top: 0.25rem;
    line-height: 1.5;
}
.dark .jo-wa-campaign-selected-template__body { color: var(--jo-surface-400); }
.jo-wa-campaign-selected-template__remove {
    font-size: var(--jo-text-xs);
    color: var(--jo-danger);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 1rem;
}

/* Empty template placeholder */
.jo-wa-campaign-empty-template {
    border: 2px dashed var(--jo-surface-300);
    border-radius: var(--jo-radius-lg);
    padding: 2rem;
    text-align: center;
}
.dark .jo-wa-campaign-empty-template { border-color: var(--jo-surface-700); }
.jo-wa-campaign-empty-template__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.5rem;
    color: var(--jo-surface-300);
}
.jo-wa-campaign-empty-template__text {
    color: var(--jo-surface-400);
    font-size: 0.8125rem;
    margin: 0;
}

/* Variable mapping (yellow warning panel sotto al template scelto) */
.jo-wa-campaign-variable-panel {
    margin-top: 0.75rem;
    padding: 0.875rem;
    background: var(--jo-warning-bg);
    border: 1px solid #fde68a;
    border-radius: var(--jo-radius-lg);
}
.jo-wa-campaign-variable-panel__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--jo-warning-fg);
    margin-bottom: 0.625rem;
}
.jo-wa-campaign-variable-token {
    font-size: var(--jo-text-xs);
    background: #fef3c7;            /* amber-100 */
    border: 1px solid #fde68a;      /* amber-200 */
    padding: 0.2rem 0.5rem;
    border-radius: var(--jo-radius-sm);
    white-space: nowrap;
    color: var(--jo-warning-fg);
    min-width: 2.5rem;
    text-align: center;
}
.jo-wa-campaign-variable-sample {
    font-size: 0.72rem;
    color: var(--jo-surface-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.jo-wa-campaign-variable-select {
    flex: 1;
    min-width: 0;
    display: block;
    width: 100%;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371717a'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    border: 1px solid var(--jo-surface-300);
    border-radius: var(--jo-radius-lg);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: var(--jo-text-sm);
    color: var(--jo-surface-900);
    box-shadow: var(--jo-shadow-sm);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Action buttons (footer del form: Annulla / Salva) */
.jo-wa-campaign-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.jo-wa-campaign-action-cancel {
    flex: 1;
    padding: 0.875rem;
    background: transparent;
    color: var(--jo-surface-500);
    border: 1px solid var(--jo-surface-300);
    border-radius: var(--jo-radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--jo-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.jo-wa-campaign-action-cancel:hover {
    background: var(--jo-surface-100);
    border-color: var(--jo-surface-400);
}
.dark .jo-wa-campaign-action-cancel {
    color: var(--jo-surface-400);
    border-color: var(--jo-surface-700);
}
.dark .jo-wa-campaign-action-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--jo-surface-500);
}

.jo-wa-campaign-action-send {
    flex: 1;
    padding: 0.875rem;
    background: var(--jo-primary-600);
    color: white;
    border: none;
    border-radius: var(--jo-radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.jo-wa-campaign-action-send:hover:not(:disabled) { background: var(--jo-primary-700); }
.jo-wa-campaign-action-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Campaign name input + error state */
.jo-wa-campaign-name-input {
    display: block;
    width: 100%;
    border: 1px solid var(--jo-surface-300);
    border-radius: var(--jo-radius-lg);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--jo-surface-900);
    background: white;
    outline: none;
    box-shadow: var(--jo-shadow-sm);
}
.jo-wa-campaign-name-input.has-error {
    border-color: var(--jo-danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.jo-wa-campaign-name-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.jo-wa-campaign-name-error {
    color: var(--jo-danger);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Template library (colonna dx, partial template-library.blade.php) */
.jo-wa-campaign-template-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
}
.jo-wa-campaign-template-card {
    border: 1px solid var(--jo-surface-200);
    border-radius: var(--jo-radius-xl);
    padding: 1rem;
    transition: var(--jo-transition);
    cursor: pointer;
}
.jo-wa-campaign-template-card:hover { border-color: var(--jo-primary-300); }
.jo-wa-campaign-template-card.is-selected {
    border: 2px solid var(--jo-primary-600);
    background: var(--jo-primary-50);
}
.jo-wa-campaign-template-card.is-dimmed { cursor: not-allowed; }
.jo-wa-campaign-template-card.is-dimmed .jo-wa-campaign-template-card__title,
.jo-wa-campaign-template-card.is-dimmed .jo-wa-campaign-template-card__body { opacity: 0.45; }
.dark .jo-wa-campaign-template-card {
    border-color: var(--jo-surface-700);
    background: var(--jo-surface-800);
}
.dark .jo-wa-campaign-template-card.is-selected {
    background: var(--jo-primary-900);
    border-color: var(--jo-primary-600);
}
.jo-wa-campaign-template-card__title {
    font-size: var(--jo-text-sm);
    font-weight: 600;
    color: var(--jo-surface-900);
}
.jo-wa-campaign-template-card.is-selected .jo-wa-campaign-template-card__title {
    color: var(--jo-primary-600);
}
.dark .jo-wa-campaign-template-card__title { color: var(--jo-surface-50); }
.jo-wa-campaign-template-card__body {
    color: var(--jo-surface-500);
    font-size: var(--jo-text-xs);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.dark .jo-wa-campaign-template-card__body { color: var(--jo-surface-400); }

/* Template status badge (approved / pending / draft / rejected) */
.jo-wa-campaign-template-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--jo-radius-full);
    font-size: 0.6875rem;
    font-weight: 500;
    margin-top: 0.25rem;
}
.jo-wa-campaign-template-status--approved { background: var(--jo-channel-whatsapp-bg); color: var(--jo-channel-whatsapp-fg); }
.jo-wa-campaign-template-status--pending  { background: #fef3c7;                       color: var(--jo-warning-fg); }
.jo-wa-campaign-template-status--draft    { background: #c2410c;                       color: white; }
.jo-wa-campaign-template-status--rejected { background: var(--jo-danger-bg);           color: var(--jo-danger-fg); }

/* Template card icon-buttons (verifica / modifica / elimina) */
.jo-wa-campaign-template-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
}
.jo-wa-campaign-template-action--info   { color: var(--jo-info); }
.jo-wa-campaign-template-action--warn   { color: var(--jo-warning); }
.jo-wa-campaign-template-action--danger { color: var(--jo-danger); }

/* Template list empty state */
.jo-wa-campaign-template-empty {
    border: 2px dashed var(--jo-surface-200);
    border-radius: var(--jo-radius-xl);
    padding: 2rem;
    text-align: center;
}
.dark .jo-wa-campaign-template-empty { border-color: var(--jo-surface-700); }
.jo-wa-campaign-template-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.5rem;
    color: var(--jo-surface-300);
}
.jo-wa-campaign-template-empty__title {
    font-weight: 500;
    color: var(--jo-surface-500);
    font-size: 0.8125rem;
    margin: 0;
}
.jo-wa-campaign-template-empty__hint {
    color: var(--jo-surface-400);
    font-size: var(--jo-text-xs);
    margin: 0.25rem 0 0;
}

/* Campaign status pill (Edit page: Bozza / Programmata / In Invio / …) */
.jo-wa-campaign-status-pill {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border-radius: var(--jo-radius-full);
}
.jo-wa-campaign-status-pill--draft     { background: var(--jo-secondary);   color: var(--jo-secondary-text); }
.jo-wa-campaign-status-pill--scheduled { background: var(--jo-warning);     color: white; }
.jo-wa-campaign-status-pill--sending   { background: var(--jo-primary-600); color: white; }
.jo-wa-campaign-status-pill--sent      { background: var(--jo-success);     color: white; }
.jo-wa-campaign-status-pill--failed    { background: var(--jo-danger);      color: white; }
.jo-wa-campaign-status-pill--cancelled { background: var(--jo-surface-500); color: white; }

/* ──────────────────────────────────────────────────────────────
 * Conversation item hover (escluso quando .is-active)
 * ────────────────────────────────────────────────────────────── */
.jo-wa-conv-item:not(.is-active):hover,
.jo-wa-conv-item:not(.is-active):focus-visible {
    background: var(--jo-surface-50);
}
.jo-wa-conv-item:focus-visible {
    outline: 2px solid var(--jo-primary-400);
    outline-offset: -2px;
}
/* Mostra il pulsante elimina su hover/focus della riga (anche keyboard) */
.jo-wa-conv-item:hover .jo-wa-conv-delete,
.jo-wa-conv-item:focus-within .jo-wa-conv-delete {
    opacity: 1;
}
/* Button delete dentro la conversation item */
.jo-wa-conv-delete {
    opacity: 1;
    transition: var(--jo-transition);
}
.jo-wa-conv-delete:hover,
.jo-wa-conv-delete:focus-visible {
    color: var(--jo-danger) !important;
    background: var(--jo-danger-bg) !important;
}
.jo-wa-conv-delete:focus-visible {
    opacity: 1;
    outline: 2px solid var(--jo-danger);
    outline-offset: 2px;
}