/* ============================================================
   Nunta Vini & Sarah — stil
   Directie: elegant-modern, cald. Verde salvie profund + auriu
   discret. Serif caracterful pentru nume, sans curat pentru date.
   ============================================================ */

/* Fonturi gazduite local, nu de la Google (vezi public/fonts/fonts.css) */
@import url('/fonts/fonts.css');

:root {
  --sage-900: #2b3a2e;
  --sage-700: #3f5843;
  --sage-500: #6a8069;
  --sage-100: #e8ede6;
  --cream:    #f6f4ee;
  --paper:    #fffefb;
  --gold:     #b08948;
  --gold-soft:#d9c199;
  --ink:      #24291f;
  --muted:    #7a7f72;
  --line:     #e0ddd2;
  --ok:       #3f7d52;
  --warn:     #b0873f;
  --danger:   #a44a3f;
  --radius:   14px;
  --shadow:   0 2px 14px rgba(43,58,46,0.07);
}

* { box-sizing: border-box; }

/* Atributul "hidden" trebuie să învingă orice display pus de noi mai jos
   (de exemplu display:block pe rândurile de tabel în varianta de telefon). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* iOS-safe area: stânga/dreapta pe body, sus/jos acolo unde conteaza */
@supports (padding: max(0px)) {
  body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}

/* ============================================================
   Meniul
   ------------------------------------------------------------
   Ecran lat: bara de sus, toate secțiunile, icon + text.
   Telefon:   bara de jos, la degetul mare, patru secțiuni des
              folosite plus „Mai mult".

   Iconurile vin din partials/iconuri.ejs, desenate din linii cu
   stroke="currentColor", deci iau culoarea textului și merg atât
   pe verde închis cât și pe alb, fără a doua variantă.
   ============================================================ */
.ic {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Bara de sus ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 14px 16px;
  background: var(--sage-900);
  color: var(--paper);
  position: sticky; top: 0; z-index: 100;
}
/* Pagina rulează sub bara de status pe iPhone (black-translucent),
   deci bara de sus are nevoie de spațiul crestăturii. */
@supports (padding: max(0px)) {
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); }
}
.brand {
  display: flex; flex-direction: column; line-height: 1.15;
  color: inherit; text-decoration: none;
}
.brand-names {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem; font-weight: 600;
  letter-spacing: 0.3px;
}
.brand-sub {
  font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--gold-soft);
}

.mainnav { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.mainnav a {
  color: var(--sage-100); text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 500;
  transition: background 0.15s, color 0.15s;
  min-height: 44px; display: flex; align-items: center; gap: 7px;
}
.mainnav a:hover { background: var(--sage-700); color: #fff; }
.mainnav a.activ { background: var(--gold); color: #fff; }

.logout-form { margin: 0; }
.btn-link {
  background: none; border: 1px solid var(--sage-500);
  color: var(--sage-100); cursor: pointer;
  padding: 8px 13px; border-radius: 999px; font-size: 0.82rem;
  font-family: inherit; transition: background 0.15s;
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
}
.btn-link:hover { background: var(--sage-700); }

/* ---------- Panoul „Mai mult": ascuns pe ecran lat ---------- */
.mai-mult { display: none; }

/* ---------- Pe telefon ---------- */
@media (max-width: 780px) {
  /* Bara stă pe un rând și rămâne subțire: ~48px. Iconurile fac
     asta posibil — eticheta se vede doar la secțiunea curentă. */
  .topbar {
    padding: 7px 10px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  @supports (padding: max(0px)) {
    .topbar { padding-top: max(7px, env(safe-area-inset-top)); }
  }
  .brand-names { font-size: 0.92rem; }
  .brand-sub { display: none; }

  .mainnav {
    gap: 1px;
    flex-wrap: nowrap;
    /* Nu ar trebui să fie nevoie: patru iconuri plus „Mai mult" încap.
       Rămâne ca plasă de siguranță pentru ecrane foarte înguste sau
       text mărit din setările telefonului. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: -10px;
    padding-right: 10px;
  }
  .mainnav::-webkit-scrollbar { display: none; }

  .mainnav a {
    flex: 0 0 auto;
    padding: 8px 9px;
    min-height: 40px;
    font-size: 0.72rem;
    gap: 5px;
  }
  /* Secțiunile rar folosite trec în panou */
  .mainnav a.nav-rar { display: none; }
  /* Eticheta doar la secțiunea curentă: patru iconuri plus una
     scrisă încap pe un rând, ceea ce zece etichete nu ar face. */
  .mainnav a span { display: none; }
  .mainnav a.activ span { display: inline; }

  /* Ieșirea stă în panou, nu în bară */
  .logout-form { display: none; }

  /* ---------- „Mai mult" ---------- */
  .mai-mult { display: block; flex: 0 0 auto; }
  .mai-mult > summary {
    display: flex; align-items: center; justify-content: center;
    gap: 5px;
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 999px;
    color: var(--sage-100);
    font-size: 0.72rem;
    list-style: none;
    cursor: pointer;
  }
  .mai-mult > summary::-webkit-details-marker { display: none; }
  .mai-mult > summary span { display: none; }
  .mai-mult.activ > summary { background: var(--gold); color: #fff; }
  .mai-mult.activ > summary span { display: inline; }

  /* Panoul coboară de sub bară, lipit de marginea din dreapta */
  .panou-mai-mult {
    position: absolute;
    right: 8px;
    top: calc(100% + 4px);
    z-index: 201;
    min-width: 186px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(20, 24, 18, 0.24);
  }
  .panou-mai-mult a,
  .panou-mai-mult button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 0; border-radius: 9px;
    background: none;
    color: var(--ink);
    font-family: inherit; font-size: 0.9rem; text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .panou-mai-mult a.activ { background: var(--cream); color: var(--sage-900); font-weight: 600; }
  .panou-mai-mult a:hover, .panou-mai-mult button:hover { background: var(--cream); }
  /* O linie înaintea ieșirii: nu e o secțiune ca celelalte */
  .panou-mai-mult form {
    margin: 4px 0 0;
    border-top: 1px solid var(--line);
    padding-top: 4px;
  }
  .panou-mai-mult button { color: var(--danger); }
}

/* ---------- Container ---------- */
.container { max-width: 980px; margin: 0 auto; padding: 24px 16px 60px; }

@media (max-width: 640px) {
  .container { padding: 16px 12px 60px; }
}

/* ---------- Titluri ---------- */
h1, h2, h3 { font-family: 'Fraunces', serif; color: var(--sage-900); font-weight: 600; }
h1 { font-size: 2rem; margin: 0 0 6px; }
.subtitlu { color: var(--muted); margin: 0 0 28px; font-size: 0.98rem; }

/* ---------- Carduri rezumat ---------- */
.grid-carduri {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 32px;
}
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow);
}
.card .cifra {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem; font-weight: 600; color: var(--sage-900);
  line-height: 1;
}
.card .eticheta {
  font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--muted); margin-top: 8px;
}
.card.accent { border-top: 3px solid var(--gold); }
.card.ok     { border-top: 3px solid var(--ok); }
.card.warn   { border-top: 3px solid var(--warn); }

/* ---------- Sectiuni tabele mici ---------- */
.doua-coloane { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .doua-coloane { grid-template-columns: 1fr; } }

.panou {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.panou h3 { margin: 0 0 14px; font-size: 1.15rem; }

/* ---------- Tabele ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; }
tr:last-child td { border-bottom: none; }
.tabel-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
.tabel-card table td, .tabel-card table th { padding-left: 14px; padding-right: 14px; }

@media (max-width: 640px) {
  table { font-size: 0.85rem; }
  th, td { padding: 10px 8px; }
  .tabel-card table td, .tabel-card table th { padding-left: 10px; padding-right: 10px; }
  th { font-size: 0.7rem; }
}

/* ---------- Badge status ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600;
}
.badge.confirmat    { background: #e3f0e6; color: var(--ok); }
.badge.in_asteptare { background: #f6ecd8; color: var(--warn); }
.badge.refuzat      { background: #f5e2df; color: var(--danger); }
.pill { display:inline-block; background: var(--sage-100); color: var(--sage-700);
  padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 500; }
/* Persoane completate de familie din pagina de RSVP */
.pill-aur { background: #f6ecd8; color: var(--gold); margin-top: 4px; }

/* ---------- Butoane ---------- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 0.9rem; font-weight: 500;
  padding: 11px 20px; border-radius: 999px; border: none;
  transition: transform 0.05s, background 0.15s;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
}
.btn:active { transform: translateY(1px); opacity: 0.8; }
.btn-primar    { background: var(--sage-900); color: #fff; }
.btn-primar:hover { background: var(--sage-700); }
.btn-aur       { background: var(--gold); color: #fff; }
.btn-aur:hover { background: #9c7739; }
/* Nu coborâm sub 38px: mai jos de atât degetul ratează butonul. Pe
   telefon urcă la 44px, măsura recomandată de Apple. */
.btn-mic       { padding: 8px 14px; font-size: 0.8rem; min-height: 38px; }
.btn-sters     { background: transparent; color: var(--danger); border: 1px solid #e6cfcb; }
.btn-sters:hover { background: #f9efed; }
.actiuni-rand  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 640px) {
  .btn { padding: 12px 16px; min-height: 48px; }
  .btn-mic { padding: 8px 12px; min-height: 44px; }
}

/* ---------- Formulare ---------- */
.form-card { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); max-width: 560px; }
.camp { margin-bottom: 16px; }
.camp label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sage-700); margin-bottom: 7px; }
.camp input[type=text], .camp input[type=tel], .camp input[type=password],
.camp input[type=email], .camp input[type=number], .camp input[type=date],
.camp select, .camp textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 1rem; background: #fff;
  -webkit-appearance: none; appearance: none;
  min-height: 44px;
}
.camp input:focus, .camp select:focus, .camp textarea:focus {
  outline: 2px solid var(--gold-soft); border-color: var(--gold);
}
.camp-inline { display: flex; align-items: center; gap: 10px; }
.camp-inline input { width: auto; min-height: auto; }
.camp-inline label { margin: 0; }
.rand-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 640px) {
  .form-card { padding: 18px; }
  .rand-doua { grid-template-columns: 1fr; }
  .camp input, .camp select, .camp textarea { font-size: 16px; }
}

/* ============================================================
   Tabel care devine listă de carduri pe telefon
   ------------------------------------------------------------
   Sub 780px fiecare rând se transformă în card, iar antetul
   coloanei apare ca etichetă din atributul data-eticheta.
   Un singur set de conținut în HTML, două prezentări.
   ============================================================ */
@media (max-width: 780px) {
  /* ============================================================
     Listele pe telefon
     ------------------------------------------------------------
     Prima variantă punea fiecare coloană pe rândul ei. Ieșeau
     ~320px pe familie, adică 16 ecrane de iPhone pentru 40 de
     familii. Acum coloanele curg una după alta și se rup doar
     când nu mai încap, iar lista de familii are o formă și mai
     strânsă (.lista-strimta): ~85px pe rând.
     ============================================================ */

  /* Clasa e pusă direct pe container, nu prin :has() — nu depindem
     de suportul selectorului în versiuni mai vechi de Safari. */
  .tabel-card.adaptiv {
    background: none; border: none; box-shadow: none; overflow: visible;
    padding: 0;
  }
  .tabel-adaptiv, .tabel-adaptiv tbody { display: block; width: 100%; }
  .tabel-adaptiv thead { display: none; }

  /* Rândul e un card, iar celulele curg în el ca niște etichete */
  .tabel-adaptiv tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }

  .tabel-adaptiv td {
    display: flex;
    align-items: baseline;
    gap: 5px;
    width: auto;
    border-bottom: none !important;
    padding: 1px 0 !important;
    font-size: 0.88rem;
  }

  /* Eticheta coloanei, mică, lipită de valoare */
  .tabel-adaptiv td[data-eticheta]::before {
    content: attr(data-eticheta);
    color: var(--muted); font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    flex: 0 0 auto;
  }

  /* Numele e titlul cardului și ține rândul lui întreg */
  .tabel-adaptiv .celula-nume {
    display: block;
    flex: 0 0 100%;
    padding: 0 0 3px !important;
  }
  .tabel-adaptiv .celula-nume .link-familie,
  .tabel-adaptiv .celula-nume strong { font-size: 1rem; }
  /* Pastilele stau pe rândul numelui, nu una sub alta */
  .tabel-adaptiv .celula-nume .pill,
  .tabel-adaptiv .celula-nume .badge {
    display: inline-block; margin-top: 2px;
  }
  .tabel-adaptiv .celula-nume .ajutor { display: block; margin-top: 1px; }
  .tabel-adaptiv .celula-nume br { display: none; }

  /* Acțiunile: rând propriu, butoane cât textul, nu pe toată lățimea */
  .tabel-adaptiv .celula-actiuni {
    display: block;
    flex: 0 0 100%;
    padding: 6px 0 0 !important;
  }
  .tabel-adaptiv .celula-actiuni .btn { width: auto; }

  /* Rândul de „nicio familie" nu e un card */
  .tabel-adaptiv td[colspan] {
    flex: 0 0 100%;
    display: block;
    text-align: center;
    padding: 20px 0 !important;
  }
  .tabel-adaptiv td[colspan]::before { content: none; }

  /* ----------------------------------------------------------
     Lista strâmtă: pentru listele lungi (familii). Textul la
     stânga, o singură acțiune la dreapta, restul coloanelor
     ascunse — pagina familiei le are pe toate oricum.
     ---------------------------------------------------------- */
  .lista-strimta tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    padding: 9px 12px;
    margin-bottom: 7px;
  }
  .lista-strimta .celula-nume {
    grid-column: 1;
    flex: none;
    min-width: 0;
  }
  /* Sumarul: singura coloană care rămâne la vedere */
  .lista-strimta td[data-sumar] {
    grid-column: 1;
    padding: 1px 0 !important;
    font-size: 0.8rem;
  }
  .lista-strimta td[data-sumar]::before { content: none; }
  /* Butonul stă în dreapta și ține toate rândurile din stânga */
  .lista-strimta .celula-actiuni {
    grid-column: 2;
    grid-row: 1 / -1;
    flex: none;
    padding: 0 !important;
    align-self: center;
  }
  .lista-strimta td:not(.celula-nume):not(.celula-actiuni):not([data-sumar]):not([colspan]) {
    display: none;
  }
  .lista-strimta td[colspan] { grid-column: 1 / -1; }

  /* Pastilele „cuplu" / „o persoană" spun ce spune deja rândul cu
     prenumele, deci pe telefon ocupă un rând degeaba. Cele de
     atenționare rămân: ele cer o acțiune. */
  .lista-strimta .celula-nume .pill:not(.pill-atentie) { display: none; }

  /* ----------------------------------------------------------
     Tabel pliabil: strâns la nume și sumar, se deschide la
     atingere. Cu opt persoane într-o familie, altfel fiecare
     ocupa jumătate de ecran.

     Ce rămâne la vedere se marchează cu data-sumar. Înainte se
     potrivea după textul etichetei („Status"), deci o redenumire
     a coloanei strica plierea fără să se vadă de ce.
     ---------------------------------------------------------- */
  .tabel-pliabil tbody tr:not(.rand-editare) { padding: 10px 13px; cursor: pointer; }
  .tabel-pliabil tbody tr:not(.rand-editare) > td:not(.celula-nume):not([data-sumar]) {
    display: none;
  }
  .tabel-pliabil tbody tr.desfacut > td { display: flex; }
  .tabel-pliabil tbody tr.desfacut > td.celula-nume,
  .tabel-pliabil tbody tr.desfacut > td.celula-actiuni { display: block; }

  /* Numele și sumarul stau pe un rând, fără chenar între ele */
  .tabel-pliabil .celula-nume {
    padding: 0 !important;
    padding-right: 22px !important;
  }
  .tabel-pliabil tr.desfacut .celula-nume {
    padding-bottom: 8px !important;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--line) !important;
  }
  .tabel-pliabil td[data-sumar] { padding-top: 4px !important; }
  .tabel-pliabil td[data-sumar]::before { content: none; }

  /* Semnul care arată că rândul se deschide */
  .semn-plica {
    position: absolute; right: 13px; top: 14px;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.2s;
  }
  .tabel-pliabil tbody tr { position: relative; }
  .tabel-pliabil tr.desfacut .semn-plica { transform: rotate(-135deg); }
}

/* Pe ecran lat semnul nu are rost */
@media (min-width: 781px) {
  .semn-plica { display: none; }
}

/* Alergiile pot fi un text lung — nu trebuie să întindă tabelul */
.celula-alergii { max-width: 22ch; }
.alergii-text { display: block; font-size: 0.86rem; line-height: 1.5; }

/* ---------- Răspunsuri noi ---------- */
.banda-raspunsuri {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: #e8f0e9; border: 1px solid #cfe3d4;
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
  color: #2f6340; text-decoration: none; min-height: 56px;
  font-size: 0.95rem;
}
.banda-raspunsuri:hover { background: #ddebdf; }
.banda-raspunsuri .freccia { color: var(--ok); font-size: 1.2rem; }

.rand-raspuns {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.rand-raspuns:last-child { border-bottom: none; }
.rand-raspuns .cand { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.rand-raspuns .detalii { font-size: 0.86rem; color: var(--muted); margin-top: 3px; }

/* ---------- Rezumat ---------- */
.antet-rezumat { margin-bottom: 24px; }
.numaratoare-mare {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.3rem); color: var(--sage-900);
  letter-spacing: -0.5px; margin: 0 0 4px;
}
.data-nuntii {
  color: var(--muted); font-size: 0.95rem; margin: 0;
  font-family: 'Fraunces', serif; font-style: italic;
}

.bara-raspunsuri {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--sage-100);
}
.bara-raspunsuri .parte { height: 100%; }
.bara-raspunsuri .parte.confirmat { background: var(--ok); }
.bara-raspunsuri .parte.asteptare { background: var(--gold-soft); }
.bara-raspunsuri .parte.refuzat   { background: #d8bdb7; }

.legenda {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;
  font-size: 0.85rem; color: var(--muted);
}
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda .pata { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legenda .pata.confirmat { background: var(--ok); }
.legenda .pata.asteptare { background: var(--gold-soft); }
.legenda .pata.refuzat   { background: #d8bdb7; }

.banda-actiune {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fbf5e8; border: 1px solid var(--gold-soft);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
  color: var(--sage-900); text-decoration: none; min-height: 56px;
  font-size: 0.95rem;
}
.banda-actiune:hover { background: #f8efdc; }
.banda-actiune .freccia { color: var(--gold); font-size: 1.2rem; }

/* Panou care se pliază (cod QR etc.) */
.pliant { padding: 0; }
.pliant summary {
  cursor: pointer; padding: 18px 22px; min-height: 56px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; font-size: 0.95rem; color: var(--sage-900);
}
.pliant summary .ajutor { font-weight: 400; }
.pliant[open] summary { border-bottom: 1px solid var(--line); }
.continut-qr { padding: 22px; text-align: center; }
.continut-qr img {
  width: 100%; max-width: 240px; height: auto;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px;
}
.continut-qr .ajutor { word-break: break-all; margin-bottom: 14px; }

/* ---------- Buget ---------- */
.rand-suma {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line);
}
.rand-suma:last-child { border-bottom: none; }
.rand-suma strong { white-space: nowrap; font-weight: 600; }
.rand-suma.mare {
  border-bottom: none; padding: 0; align-items: baseline;
}
.rand-suma.mare strong {
  font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--sage-900);
}
.rand-suma.depasita strong { color: var(--danger); }

.bara {
  height: 6px; background: var(--sage-100); border-radius: 999px;
  overflow: hidden; margin-top: 8px; max-width: 220px;
}
.bara-umplere { height: 100%; background: var(--gold); border-radius: 999px; }
.bara-umplere.peste { background: var(--danger); }

/* 16px e intenționat, nu din neatenție: Safari pe iPhone mărește toată
   pagina când se atinge un câmp cu text mai mic de 16px, și nu o
   micșorează după. Câmpul se vede mic prin lățime și padding, nu prin
   mărimea literei. Aceeași regulă pentru orice câmp adăugat mai târziu. */
.input-suma {
  width: 120px !important; padding: 8px 10px !important;
  min-height: 40px !important; font-size: 16px !important;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; background: #fff;
}
.rand-achitat { background: #f7faf7; }
.rand-achitat strong { color: var(--muted); }

/* ---------- Trimiterea invitatiilor ---------- */
.filtre { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--sage-700); text-decoration: none;
  font-size: 0.85rem; font-weight: 500;
}
.chip:hover { border-color: var(--gold-soft); }
.chip.activ { background: var(--sage-900); border-color: var(--sage-900); color: #fff; }

.link-familie { color: var(--sage-900); font-weight: 600; text-decoration: none; }
.link-familie:hover { text-decoration: underline; }

.pill-atentie { background: #f6ecd8; color: var(--warn); margin-top: 4px; }

.anunt-atentie {
  background: #f6ecd8; color: #7d5f22; border: 1px solid var(--gold-soft);
  padding: 12px 16px; border-radius: 10px; font-size: 0.9rem;
  margin: 0 0 20px;
}

/* Schimbarea rapidă a numelui, pe loc */
.nume-editabil { display: inline-flex; align-items: baseline; gap: 6px; }
.creion {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--muted); font-size: 0.85rem; line-height: 1;
  opacity: 0; transition: opacity 0.15s; min-width: 32px; min-height: 32px;
}
.nume-editabil:hover .creion,
.nume-editabil:focus-within .creion { opacity: 1; }
/* Pe ecrane cu atingere nu există hover — creionul stă mereu vizibil */
@media (hover: none) {
  .creion { opacity: 0.55; }
}
.camp-nume-rapid {
  font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: 7px 10px; min-height: 40px; width: 100%; max-width: 260px;
  border: 1.5px solid var(--gold); border-radius: 8px;
  background: #fff; color: var(--sage-900);
}
.camp-nume-rapid:focus { outline: 2px solid var(--gold-soft); }

/* Persoane adăugate în formularul de familie nouă */
.membru-nou {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 14px 10px; margin-bottom: 12px;
}
.scoate-membru {
  position: absolute; top: 6px; right: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--danger); font-size: 1.3rem; line-height: 1;
  min-width: 36px; min-height: 36px; border-radius: 8px;
}
.scoate-membru:hover { background: #f9efed; }

/* ---------- Alegerea paletei de culori ---------- */
.palete {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.paleta {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--paper);
  cursor: pointer; min-height: 60px;
}
.paleta:hover { border-color: var(--gold-soft); }
.paleta.activa { border-color: var(--gold); background: #fdfaf4; }
.paleta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paleta:focus-within { outline: 2px solid var(--gold-soft); }

.mostre { display: flex; flex: 0 0 auto; }
.mostre span {
  width: 20px; height: 32px; border: 1px solid rgba(0, 0, 0, 0.12);
}
.mostre span:first-child { border-radius: 4px 0 0 4px; }
.mostre span:last-child { border-radius: 0 4px 4px 0; }

.paleta-nume { font-size: 0.88rem; font-weight: 500; color: var(--sage-900); }


.rand-trei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.camp input[type=color] {
  width: 100%; height: 48px; padding: 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer;
}
@media (max-width: 640px) {
  .rand-trei { grid-template-columns: 1fr 1fr; }
}

/* Rândul de editare al unei persoane, în tabelul familiei */
.rand-editare > td { background: #fbfaf6; }
.form-persoana { max-width: 560px; }
.camp-copil { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.camp-copil input[type=number] { width: 110px; }

.panou-invitatie { border-left: 3px solid var(--gold); }
.cap-invitatie {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}

.previzualizare-mesaj summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 600;
  color: var(--sage-700); padding: 8px 0; min-height: 40px;
  display: flex; align-items: center;
}
.previzualizare-mesaj pre {
  background: var(--sage-100); border-radius: 10px; padding: 14px;
  font-family: inherit; font-size: 0.87rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; margin: 6px 0 0;
  color: var(--ink);
}
.camp code {
  background: var(--sage-100); padding: 1px 6px; border-radius: 5px;
  font-size: 0.85em; font-family: ui-monospace, monospace;
}

/* ============================================================
   Planul meselor
   ============================================================ */
/* Schița sălii: caroiaj fix, deci pozițiile au același sens
   pe orice ecran. Raportul se ține cu aspect-ratio. */
.sala {
  display: grid;
  grid-template-columns: repeat(var(--coloane), 1fr);
  grid-template-rows: repeat(var(--randuri), 1fr);
  aspect-ratio: 4 / 3;
  gap: 2px;
  background: var(--sage-100);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  /* Mesele se trag cu degetul; fără asta pagina ar derula în loc */
  touch-action: none;
}
.celula { border-radius: 4px; background: rgba(255, 255, 255, 0.45); }

.masa {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--sage-700);
  background: var(--paper);
  border-radius: 50%;
  cursor: grab;
  font-family: inherit;
  padding: 0;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  width: 92%;
  min-width: 34px;
  touch-action: none;
}
.masa:hover { border-color: var(--gold); }
.masa.se-trage { cursor: grabbing; border-color: var(--gold); z-index: 5; opacity: 0.9; }
.masa.plina { background: var(--sage-100); }
.masa.peste { border-color: var(--danger); background: #f9efed; }
.masa-nr {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(0.7rem, 2.4vw, 1rem); color: var(--sage-900); line-height: 1;
}
.masa-locuri { font-size: clamp(0.5rem, 1.5vw, 0.62rem); color: var(--muted); }

/* Panoul unei mese */
.masa-panou { transition: box-shadow 0.3s, border-color 0.3s; }
.masa-panou.evidentiat { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,137,72,0.18); }
.masa-cuprins { display: grid; gap: 22px; grid-template-columns: 240px 1fr; align-items: start; }
@media (max-width: 700px) {
  .masa-cuprins { grid-template-columns: 1fr; justify-items: center; }
  .masa-lista { width: 100%; }
}

/* Cercul cu scaune: fiecare scaun se rotește pe circumferință */
.cerc-masa {
  position: relative;
  width: 210px; height: 210px;
  border: 1.5px dashed var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.cerc-nr {
  font-family: 'Fraunces', serif; font-size: 1.6rem;
  font-weight: 600; color: var(--sage-900);
}
.scaun {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  /* Întâi se rotește pe cerc, apoi se readuce drept ca textul
     să nu fie întors pe o parte. */
  transform: rotate(var(--unghi)) translate(105px) rotate(calc(-1 * var(--unghi)));
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
}
.scaun.liber:hover { border-color: var(--gold); color: var(--gold); }
.scaun.ocupat {
  background: var(--sage-900); border-color: var(--sage-900); color: #fff;
}
.scaun:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-aseaza {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}

/* ---------- Bara sus pagina ---------- */
.bara-titlu { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

/* ---------- Setari nunta ---------- */
.form-card.form-larg { max-width: 720px; }
.form-card h3 { margin: 0 0 16px; font-size: 1.05rem; }
.form-card h3.sectiune-noua {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
}
.ajutor { font-size: 0.8rem; color: var(--muted); margin: 7px 0 0; }
.anunt-ok {
  background: #e3f0e6; color: var(--ok); border: 1px solid #c8e6d0;
  padding: 12px 16px; border-radius: 10px; font-size: 0.9rem;
  font-weight: 500; margin: 0 0 20px;
}

/* Ceva n-a mers: formular respins, valoare imposibilă */
.anunt-rau {
  background: #f9efed; color: var(--danger); border: 1px solid #e6cfcb;
  padding: 12px 16px; border-radius: 10px; font-size: 0.9rem;
  font-weight: 500; margin: 0 0 20px;
}
.info-data {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: var(--sage-100); border-radius: 10px; padding: 16px;
  margin-bottom: 4px;
}
.info-data .eticheta {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); margin-bottom: 3px;
}
.info-data strong { color: var(--sage-900); font-size: 0.92rem; }

/* Zona de incarcare a imaginii — eticheta e si butonul (nativ, un singur tap) */
.input-fisier {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
}
.zona-incarcare {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 20px; border: 2px dashed var(--line); border-radius: 12px;
  background: #fbfaf6; cursor: pointer; text-align: center;
  font-size: 0.92rem; font-weight: 500; color: var(--sage-700);
  min-height: 44px; transition: border-color 0.15s, background 0.15s;
}
.zona-incarcare:hover { border-color: var(--gold-soft); background: var(--paper); }
.zona-incarcare.are-fisier { border-color: var(--ok); background: #f2f8f3; }
.zona-incarcare .zona-icon { font-size: 1.8rem; }
.zona-incarcare small { color: var(--muted); font-weight: 400; }
.input-fisier:focus-visible + .zona-incarcare,
.zona-incarcare:focus-within { outline: 2px solid var(--gold); }

/* Galeria de imagini din setari */
.galerie-admin {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.imagine-item {
  position: relative; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--paper);
}
.imagine-item.principala { border-color: var(--gold); border-width: 2px; }
.imagine-item img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
.insigna-principala {
  position: absolute; top: 8px; left: 8px;
  background: var(--gold); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
}
/* Marcaj pentru fisierele care nu mai exista pe disc */
.imagine-item .lipsa {
  display: none; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; background: var(--sage-100);
  color: var(--muted); font-size: 0.8rem; font-weight: 500;
  text-align: center; padding: 10px;
}
.galerie-poze { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.imagine-actiuni {
  display: flex; gap: 6px; padding: 10px; flex-wrap: wrap; align-items: center;
}
.imagine-actiuni form { margin: 0; flex: 1; }
.imagine-actiuni .btn { width: 100%; font-size: 0.75rem; padding: 7px 8px; }

/* Panoul de alegere a salii */
.panou-alegere {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow); margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.panou-alegere.aleasa { border-left-color: var(--ok); }
.panou-alegere h3 { margin: 0 0 5px; font-size: 1.05rem; }
.panou-alegere .ajutor { margin: 0; max-width: 52ch; }
.panou-alegere form { margin: 0; }

.rand-ales { background: #fbf8f1; }
/* 16px pentru același motiv ca .input-suma: altfel iPhone-ul mărește
   pagina la atingere. Vezi comentariul de acolo. */
.select-mic {
  padding: 7px 10px; font-size: 16px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; min-height: 40px;
}

.previzualizare { margin-bottom: 18px; }
.previzualizare img {
  display: block; width: 100%; max-height: 280px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); margin-bottom: 12px;
}
.actiuni-form { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .info-data { grid-template-columns: 1fr; }
  .actiuni-form .btn { flex: 1; }
}

/* ---------- Login ---------- */
/* 100dvh: pe iOS Safari, 100vh include bara de unelte si taie conținutul */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background:
  radial-gradient(1200px 500px at 50% -10%, var(--sage-100), var(--cream)); }
.login-card { background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 40px 34px; width: 100%; max-width: 380px; box-shadow: var(--shadow); text-align: center; }
.login-card .mono { font-family:'Fraunces',serif; font-size:1.8rem; color:var(--sage-900); margin-bottom: 4px; }
.login-card .sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 26px; letter-spacing: 1px; text-transform: uppercase; }
.eroare { background:#f5e2df; color: var(--danger); padding: 10px 14px; border-radius: 10px; font-size: 0.88rem; margin-bottom: 16px; }

/* ---------- Link token RSVP ---------- */
.token-box { font-family: ui-monospace, monospace; background: var(--sage-100);
  color: var(--sage-900); padding: 4px 10px; border-radius: 8px; font-size: 0.85rem; }

/* ---------- Footer ---------- */
.sitefooter { text-align: center; padding: 28px; color: var(--muted);
  font-size: 0.82rem; font-family:'Fraunces',serif; font-style: italic; }
@supports (padding: max(0px)) {
  .sitefooter { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* ---------- Gol ---------- */
.gol { text-align: center; padding: 50px 20px; color: var(--muted); }
.gol .btn { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Sumar de details care arata ca un titlu de panou, nu ca un link */
.sumar-simplu {
  cursor: pointer;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sage-900);
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.sumar-simplu::-webkit-details-marker { display: none; }
.sumar-simplu::after {
  content: '';
  margin-left: 10px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
details[open] > .sumar-simplu::after { transform: rotate(-135deg); }

/* ---------- Cele doua momente de trimitere ---------- */
.faze { margin-top: 16px; }
.faza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.faza-text { flex: 1 1 200px; }
.faza-titlu {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1rem; color: var(--sage-900); margin: 0 0 2px;
}

/* ---------- Alegerea pozei pentru „rețineți data" ---------- */
.alege-poza {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.poza-optiune {
  position: relative; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; line-height: 0;
}
.poza-optiune img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.poza-optiune input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.poza-optiune.activa { border-color: var(--gold); }
.poza-optiune:hover { border-color: var(--gold-soft); }
.poza-optiune:focus-within { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

.camp input[type=range] {
  width: 100%; min-height: 44px; accent-color: var(--sage-700);
}


/* ============================================================
   Editorul paginii „rețineți data"
   ------------------------------------------------------------
   Două coloane pe ecran lat, una pe telefon. În stânga pânza:
   cadrul arată pagina adevărată, iar mânerele stau deasupra în
   același sistem de procente, deci se aliniază exact. În dreapta
   uneltele, strânse în grupuri.
   ============================================================ */
.editor {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* Pânza rămâne la vedere cât timp se scrie în dreapta */
.editor-panza { position: sticky; top: 16px; }

.editor-unelte-col { min-width: 0; }

.panza {
  position: relative;
  /* Raportul unui telefon: acolo se deschide anunțul */
  aspect-ratio: 9 / 16;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #15140f;
  /* Se trage cu degetul; fără asta pagina ar derula în loc să mute */
  touch-action: none;
  cursor: grab;
}
.panza.mut-poza { cursor: grabbing; }

.panza iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* Cadrul e doar de privit: atingerile ajung la pânză și la mânere */
  pointer-events: none;
}

/* Indiciul stă jos, peste pagină, ca să nu ocupe loc dedesubt */
.panza-indiciu {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 3;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(12, 12, 10, 0.66);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.6rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.maner {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 5px 9px;
  /* 30px e minimul pe care un deget îl prinde din prima */
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(20, 20, 16, 0.62);
  color: #fff;
  font-family: inherit;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  cursor: grab;
  white-space: nowrap;
  touch-action: none;
  z-index: 4;
}
.maner:hover { background: rgba(20, 20, 16, 0.82); border-color: #fff; }
.maner.se-trage { cursor: grabbing; background: var(--gold); border-color: var(--gold); }
.maner:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.editor-unelte {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 12px; flex-wrap: wrap;
}

/* ---------- Grupurile de unelte ---------- */
.grup {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  margin-bottom: 14px;
  overflow: hidden;
}
.grup > summary {
  padding: 13px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grup > summary::-webkit-details-marker { display: none; }
.grup > summary::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1;
}
.grup[open] > summary::after { content: '−'; }
.grup > summary:hover { background: var(--cream); }
.grup-corp { padding: 4px 16px 16px; }
.grup-corp .camp:last-child { margin-bottom: 0; }

.doua-campuri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------- Alegerea fontului ---------- */
.alege-font { display: grid; gap: 8px; }

.font-optiune {
  position: relative;
  display: block;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.font-optiune input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.font-optiune.activa { border-color: var(--gold); background: var(--cream); }
.font-optiune:hover { border-color: var(--gold-soft); }
.font-optiune:focus-within { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* Mostra e scrisă chiar în fontul respectiv: dacă un font n-ar avea
   ș sau ț, s-ar vedea aici, nu abia pe pagina trimisă invitaților. */
.font-optiune .mostra {
  display: block;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.font-optiune .mostra-nume {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--muted);
}

.editor-salvare {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
}

/* Pe telefon: o coloană, pânza deasupra și nelipită, ca să se poată
   derula la unelte fără să rămână agățată pe ecran. */
@media (max-width: 800px) {
  .editor { grid-template-columns: 1fr; gap: 18px; }
  .editor-panza { position: static; max-width: 320px; margin: 0 auto; }
  .doua-campuri { grid-template-columns: 1fr; gap: 0; }
}

/* Rândul cu bifă: căsuța și textul pe același rând, aliniate la mijloc,
   cu o zonă de atins suficient de mare pentru un deget. */
.linie-bifa {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  cursor: pointer;
}
.linie-bifa input { width: 18px; height: 18px; margin: 0; flex: none; }

/* „(opțional)" lângă o etichetă: prezent, dar retras */
.opt { color: var(--muted); font-weight: 400; font-size: 0.86em; }

/* ============================================================
   Numele familiei, alcătuit din persoane
   ------------------------------------------------------------
   Numele scurt („Familia Rusu") intră în mesaje, deci rămâne
   scurt. Rândul de dedesubt spune cine e în familie — el
   deosebește trei unchi Rusu unul de altul.
   ============================================================ */
.cine-e {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
.cine-e em { font-style: italic; }

/* Numele calculat, arătat în formular cât se scriu persoanele */
.nume-dedus {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--gold-soft);
  border-radius: 10px;
  background: var(--cream);
  color: var(--muted);
  font-size: 0.86rem;
}
.nume-dedus strong { color: var(--ink); font-size: 0.98rem; }

/* ============================================================
   Lista pentru sală
   ------------------------------------------------------------
   Pagină făcută ca să fie tipărită sau trimisă ca PDF. Pe ecran
   arată ca restul panoului; la tipar rămâne doar hârtia, alb-negru,
   fără meniu și fără butoane.
   ============================================================ */
.hartie {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}

/* Capul cu numele și data apare doar pe hârtie: pe ecran titlul e
   deja în bara de sus, ar fi scris de două ori. */
.cap-tipar { display: none; }

.bloc-lista { margin-bottom: 30px; }
.bloc-lista:last-child { margin-bottom: 0; }
.bloc-lista h2 {
  font-size: 1.12rem;
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--line);
}

.tabel-lista { width: 100%; border-collapse: collapse; }
.tabel-lista th[scope="row"] {
  text-align: left;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.94rem;
  color: var(--ink);
  padding: 9px 0;
}
.tabel-lista .nr {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.98rem;
  padding: 9px 0 9px 16px;
}
.tabel-lista .rand-total th[scope="row"],
.tabel-lista .rand-total .nr {
  font-weight: 700;
  border-top: 2px solid var(--line);
}
.tabel-lista .rand-atentie th[scope="row"] { color: var(--warn); }

/* Tabelul cu alergii are cap de coloană și chenare */
.tabel-plin thead th {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px 8px 0;
}
.tabel-plin td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.92rem;
}
.tabel-plin .text-lung { width: 45%; }

.nota { color: var(--muted); font-size: 0.88rem; margin: 12px 0 0; }
.nota.rand-atentie { color: var(--warn); }
.mic { font-size: 0.82em; color: var(--muted); }

.varste { margin-top: 12px; }
.varste summary { cursor: pointer; font-size: 0.88rem; color: var(--muted); }

/* ---------- Mesele ---------- */
.mese-lista {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.masa-fisa {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  /* O masă nu se rupe între două pagini la tipar */
  break-inside: avoid;
}
.masa-cap {
  margin: 0 0 7px;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.masa-persoane {
  margin: 0; padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.7;
}
.masa-persoane .loc { color: var(--muted); font-variant-numeric: tabular-nums; }
.semn-alergie {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f6ecd8;
  color: #7d5f22;
}

@media (max-width: 640px) {
  .hartie { padding: 18px 14px; }
  .tabel-plin .text-lung { width: auto; }
}

/* ============================================================
   La tipar
   ============================================================ */
@media print {
  /* Fondurile colorate mănâncă tonerul și nu ajută pe hârtie */
  body { background: #fff; color: #000; }
  .topbar, .sitefooter, .fara-tipar, .mai-mult { display: none !important; }
  .container { max-width: none; padding: 0; }
  .hartie { border: 0; box-shadow: none; border-radius: 0; padding: 0; }

  .cap-tipar {
    display: block;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000;
  }
  .cap-cuplu {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem; font-weight: 600; margin: 0;
  }
  .cap-detalii { margin: 3px 0 0; font-size: 0.95rem; }
  .cap-data { margin: 3px 0 0; font-size: 0.8rem; color: #555; }

  .bloc-lista h2 { border-bottom-color: #000; }
  .tabel-lista .rand-total th, .tabel-lista .rand-total .nr { border-top-color: #000; }
  .tabel-plin thead th, .tabel-plin td { border-bottom-color: #999; }
  .masa-fisa { border-color: #999; }
  .semn-alergie { background: none; color: #000; border: 1px solid #000; }
  .mic, .nota { color: #444; }

  /* Secțiunile lungi încep pe pagină nouă, ca alergiile să nu se rupă
     de titlul lor. Prima nu, altfel iese o pagină goală la început. */
  .pagina-noua { break-before: page; }
  .bloc-lista:first-child .pagina-noua { break-before: auto; }
  .bloc-lista h2 { break-after: avoid; }
  tr { break-inside: avoid; }

  /* Capul tabelului se repetă pe fiecare pagină */
  thead { display: table-header-group; }

  /* ------------------------------------------------------------
     Tabelele se întorc tabele
     ------------------------------------------------------------
     Hârtia A4 cu margini are ~680px, adică sub pragul de 780px al
     regulilor de telefon — deci fără blocul ăsta un tabel adaptiv
     s-ar tipări ca un șir de carduri, cu eticheta coloanei
     repetată la fiecare rând. Pe hârtie e loc: tabel.
     ------------------------------------------------------------ */
  .tabel-adaptiv { display: table; }
  .tabel-adaptiv thead { display: table-header-group; }
  .tabel-adaptiv tbody { display: table-row-group; }
  .tabel-adaptiv tr {
    display: table-row;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0; background: none;
  }
  .tabel-adaptiv td {
    display: table-cell;
    padding: 8px 10px 8px 0 !important;
    border-bottom: 1px solid #999 !important;
  }
  /* Eticheta coloanei e în cap de tabel, nu la fiecare celulă */
  .tabel-adaptiv td[data-eticheta]::before { content: none; }
  /* Coloanele ascunse pe telefon revin la vedere */
  .lista-strimta td, .tabel-pliabil tbody tr > td { display: table-cell; }

  @page { margin: 16mm 14mm; }
}