/*
 * Joorna v2 — Token/utility WhatsApp-specifici
 * ------------------------------------------------------------------
 * I TOKEN CORE platform-wide (primary/secondary/surface/semantic/
 * tipografia/radii/motion) sono CANONICI in `joorna-tokens.css`,
 * caricato PRIMA di questo file nei render hook dei due PanelProvider.
 * Qui restano SOLO i token/utility WhatsApp-specifici (--jo-wa-*,
 * --jo-channel-*, classi .jo-wa-*) e gli override dark scoped al modulo.
 *
 * Utility WA usate dalle schermate del pannello admin Filament:
 *   Inbox, Compliance, Quality, Onboarding, Campaigns,
 *   WAConfig, AuditLog, Activation.
 *
 * Riferimenti:
 *   - public/css/joorna-tokens.css              (token core canonici)
 *   - 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)
 */

:root {
  /* ──────────────────────────────────────────────────────────
   * 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".
   * ────────────────────────────────────────────────────────── */
  /* Badge dei canali: token --ds-* (chiaro e dark da joorna-tokens.css). */
  --jo-channel-whatsapp-bg:   var(--ds-ok-bg);
  --jo-channel-whatsapp-fg:   var(--ds-ok-fg);
  --jo-channel-email-bg:      var(--ds-info-bg);
  --jo-channel-email-fg:      var(--ds-info-fg);
  --jo-channel-chatbot-bg:    var(--ds-auto-bg);
  --jo-channel-chatbot-fg:    var(--ds-auto-fg);
  --jo-channel-instagram-bg:  color-mix(in srgb, var(--ds-brand-instagram) 12%, transparent);
  --jo-channel-instagram-fg:  var(--ds-brand-instagram);
  --jo-channel-facebook-bg:   var(--ds-info-bg);
  --jo-channel-facebook-fg:   var(--ds-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:     var(--ds-surface-hover);
  --jo-wa-bubble-inbound-fg:  var(--ds-text-primary);
  --jo-wa-chat-background:    var(--ds-surface-sunken);
  /* Bolla inviata in dark (owner 7-ott-2026): un verde spento, mai il
   * verde chiaro del tema chiaro sul fondo scuro. */
  --jo-wa-bubble-outbound:    #2A3B32;
  --jo-wa-bubble-outbound-fg: #E3EAE5;

  /* 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. */
}

/* ──────────────────────────────────────────────────────────────
 * Dark mode SCOPED all'Inbox omnichannel.
 * Invertiamo la scala surface SOLO dentro `.jo-inbox-root`, così i
 * pannelli (lista, header, card AI, compose) diventano scuri e i testi
 * chiari senza sfondi/scritte bianche — e SENZA toccare i token globali
 * (le altre pagine, es. Campagne, dipendono dalla scala light invariata).
 * I `var(--jo-surface-*)` dei componenti dell'inbox si invertono in
 * automatico; basta che i bg "white" letterali usino --jo-surface-0.
 * ────────────────────────────────────────────────────────────── */
/* Link testuali dell'inbox: il viola brand 700 su fondo scuro non si
 * legge (es. "Modelli WhatsApp" a finestra chiusa), in dark si schiarisce. */
.jo-inbox-root {
  --jo-inbox-link: var(--jo-primary-700);
}

.dark .jo-inbox-root,
[data-theme='dark'] .jo-inbox-root {
  --jo-inbox-link:  var(--jo-primary-300);
  --jo-surface-0:   var(--ds-surface);        /* pannelli/card */
  --jo-surface-50:  var(--ds-surface-sunken); /* superficie leggermente elevata (search, pannello AI) */
  --jo-surface-100: var(--ds-surface-hover);  /* hover/bordi tenui */
  --jo-surface-200: var(--ds-border);         /* bordi */
  --jo-surface-300: var(--ds-border-strong);
  --jo-surface-400: var(--ds-text-placeholder); /* icone muted */
  --jo-surface-500: var(--ds-text-tertiary);  /* testo muted (preview) */
  --jo-surface-600: var(--ds-text-secondary);
  --jo-surface-700: var(--ds-text-secondary); /* testo secondario */
  --jo-surface-800: var(--ds-text-primary);
  --jo-surface-900: var(--ds-text-primary);   /* testo primario */
}

/* ──────────────────────────────────────────────────────────────
 * 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;
  /* Fallback neutro leggibile: un canale sconosciuto (senza classe is-*)
   * non deve ereditare il testo (es. bianco di Filament in dark) e finire
   * bianco-su-bianco. surface-100/700 restano coerenti light+dark. */
  background: var(--jo-surface-100);
  color: var(--jo-surface-700);
}
.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); }
/* Icona facoltativa del badge (`<x-wa.channel-badge :icon="true">`). */
.jo-channel-badge-icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

/* 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: var(--ds-surface, #fff);
    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);
}

/* 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: var(--ds-surface, #fff);
    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: var(--ds-surface, #fff);
}
.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(124, 92, 203, 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: var(--ds-surface, #fff);
    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: var(--ds-surface, #fff);
    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;
}
/* Riga SELEZIONATA in dark: lo sfondo inline del blade usa --jo-primary-50
 * (#f5edff, scala brand volutamente NON invertita) sotto un testo che
 * l'inversione surface rende quasi bianco → nome illeggibile (bianco su
 * lilla chiaro). Variante scura del selected (stesso approccio di
 * .jo-wa-campaign-selected-template); !important per battere lo style
 * inline. */
.dark .jo-inbox-root .jo-wa-conv-item.is-active,
[data-theme='dark'] .jo-inbox-root .jo-wa-conv-item.is-active {
    background: rgba(124, 92, 203, 0.22) !important;
}
/* 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: in vista solo al passaggio
 * sulla riga (o col focus); su touch resta sempre visibile. */
.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;
}

@media (hover: hover) {
    .jo-wa-conv-item .jo-wa-conv-delete {
        opacity: 0;
    }
    .jo-wa-conv-item:hover .jo-wa-conv-delete,
    .jo-wa-conv-item:focus-within .jo-wa-conv-delete {
        opacity: 1;
    }
}