/* ============================================================================
   AVISECO SYSTEMS — Pagina «WhatsApp» a ecosistemului <avs-whatsapp> · v1.0
   Necesită aviseco-tokens.css + aviseco-components.css încărcate ÎNAINTE.
   Vanilla CSS, fără build. Prefix .avs-wa. Zero hex, zero px hardcodați în
   afara proprietăților proprii documentate mai jos. Doar tokens de rol, deci
   urmează tema gazdei (light / dark / Claude Style) fără nicio regulă per temă.
   Cardurile (.avs-card), câmpurile (.avs-field, .avs-select, .avs-check),
   badge-urile, tabelul și stările goale vin din aviseco-components.css.
   ============================================================================ */

/* ---------- 0. PROPRIETĂȚI PROPRII ---------- */
avs-whatsapp {
  --avs-wa-kv-min: 220px;          /* lățimea minimă a unei perechi cheie–valoare în grila punții */
  --avs-wa-tip-min: 260px;         /* lățimea minimă a unei bife de tip în lista «Ce se trimite» */
  --avs-wa-skeleton-h: 140px;      /* înălțimea scheletului de încărcare al unui card */
  --avs-wa-form-max: 720px;        /* formularul nu se întinde pe tot ecranul lat */
  display: flex; flex-direction: column; gap: var(--avs-space-4);
}

/* ---------- 1. CARDURI ---------- */
.avs-wa__card { padding: var(--avs-space-5); }
.avs-wa__card .avs-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-3); flex-wrap: wrap; margin-bottom: var(--avs-space-3); }
.avs-wa__card .avs-card__title { display: inline-flex; align-items: center; gap: var(--avs-space-2); flex-wrap: wrap; }
.avs-wa__actiuni { display: inline-flex; align-items: center; gap: var(--avs-space-2); flex-wrap: wrap; }
.avs-wa__actiuni .avs-btn svg, .avs-wa .avs-empty .avs-btn svg { width: 16px; height: 16px; }
.avs-wa__app { font-size: var(--avs-text-sm); font-weight: var(--avs-weight-regular); color: var(--avs-text-tertiary); }
.avs-wa__skeleton { height: var(--avs-wa-skeleton-h); border-radius: var(--avs-radius-md); }
.avs-wa__nota { margin: 0 0 var(--avs-space-4); font-size: var(--avs-text-sm); line-height: var(--avs-lh-sm, 1.5); color: var(--avs-text-secondary); }
.avs-wa__ico { width: 16px; height: 16px; flex: none; }
.avs-wa__empty-ico { width: 32px; height: 32px; color: var(--avs-text-tertiary); margin-bottom: var(--avs-space-2); }
.avs-wa__empty-ico--danger { color: var(--avs-danger); }

/* ---------- 2. PUNTEA (citire) ---------- */
.avs-wa__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--avs-wa-kv-min), 1fr)); gap: var(--avs-space-2) var(--avs-space-6); margin-bottom: var(--avs-space-4); }
.avs-wa__kv { display: flex; justify-content: space-between; gap: var(--avs-space-3); padding: var(--avs-space-2) 0; border-bottom: 1px solid var(--avs-border); font-size: var(--avs-text-sm); font-variant-numeric: tabular-nums; }
.avs-wa__kv > span:last-child { text-align: right; color: var(--avs-text-primary); overflow-wrap: anywhere; }
.avs-wa__regula { display: flex; align-items: flex-start; gap: var(--avs-space-2); margin: 0; padding: var(--avs-space-3); border-radius: var(--avs-radius-md); background: var(--avs-bg-subtle); color: var(--avs-text-secondary); font-size: var(--avs-text-xs); line-height: var(--avs-lh-xs, 1.5); }
.avs-wa__regula .avs-wa__ico { margin-top: 1px; color: var(--avs-text-tertiary); }

/* ---------- 3. NOTIFICĂRI (formular) ---------- */
.avs-wa__form { max-width: var(--avs-wa-form-max); }
.avs-wa__form .avs-select { width: 100%; }
.avs-wa__form .avs-check { align-items: flex-start; }
.avs-wa__form .avs-check input { margin-top: 2px; flex: none; }
.avs-wa__tipuri { border: 0; padding: 0; margin: 0 0 var(--avs-space-4); min-width: 0; }
.avs-wa__tipuri legend { padding: 0; margin-bottom: var(--avs-space-2); }
.avs-wa__tipuri[aria-disabled="true"] .avs-wa__tipuri-lista { opacity: .55; }
.avs-wa__tipuri-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--avs-wa-tip-min), 1fr)); gap: var(--avs-space-2); margin-bottom: var(--avs-space-2); }
.avs-wa__tip { padding: var(--avs-space-2) var(--avs-space-3); border: 1px solid var(--avs-border); border-radius: var(--avs-radius-md); background: var(--avs-bg-surface); transition: border-color var(--avs-motion-fast) var(--avs-ease), background var(--avs-motion-fast) var(--avs-ease); }
.avs-wa__tip:hover { border-color: var(--avs-border-strong); }
.avs-wa__tip:has(input:checked) { border-color: var(--avs-navy-400); background: var(--avs-navy-50); }
.avs-wa__tip:has(input:disabled) { cursor: not-allowed; }
.avs-wa__tip > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--avs-text-sm); }
.avs-wa__tip b { font-weight: var(--avs-weight-medium); color: var(--avs-text-primary); }
.avs-wa__tip-desc { font-size: var(--avs-text-xs); color: var(--avs-text-tertiary); line-height: var(--avs-lh-xs, 1.5); }
.avs-wa__mesaj { display: flex; align-items: center; gap: var(--avs-space-2); margin-bottom: var(--avs-space-4); }
.avs-wa__bara { display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-3); flex-wrap: wrap; }
.avs-wa__meta { margin: 0; font-size: var(--avs-text-xs); color: var(--avs-text-tertiary); }
.avs-wa__form .avs-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- 4. ULTIMELE TRIMITERI ---------- */
.avs-wa__tabel { overflow-x: auto; }
.avs-wa__tabel td, .avs-wa__tabel th { white-space: nowrap; }
.avs-wa__tabel td:nth-child(3) { white-space: normal; min-width: var(--avs-wa-kv-min); }

/* ---------- 5. TEMA DARK: doar excepțiile pe care tokenii nu le acoperă ---------- */
[data-theme="dark"] .avs-wa__tip:has(input:checked) { border-color: var(--avs-sky-500); background: var(--avs-navy-900); }

/* ---------- 6. TELEFON ---------- */
@media (max-width: 640px) {
  .avs-wa__card { padding: var(--avs-space-4); }
  .avs-wa__grid { grid-template-columns: 1fr; gap: 0; }
  .avs-wa__tipuri-lista { grid-template-columns: 1fr; }
  .avs-wa__bara .avs-btn { width: 100%; }
}

/* ---------- 7. TIPĂRIRE ---------- */
@media print { .avs-wa__actiuni, .avs-wa__bara { display: none; } }