/* Plan sală — portat din docs/prototip/plan-sala-nunta.html */
:root{
  --bg:#ECEAE2;
  --paper:#FCFBF6;
  --ink:#2B2B33;
  --line:#9A968B;
  --accent:#5E7357;       /* sage — mese parțial ocupate */
  --accent-soft:#DDE5D8;
  --full:#B4884B;         /* chihlimbar — mese pline */
  --full-soft:#F0E3CC;
  --sel:#3E5A8F;
  --rose:#B56576; --blue:#4A6FA5; --green:#5E7357; --amber:#B4884B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
}

/* ===== Header ===== */
header{
  display:flex; align-items:baseline; gap:16px;
  padding:14px 22px 10px;
  border-bottom:1px solid #D8D5CB;
  background:var(--bg);
  flex-wrap:wrap;
}
header h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:28px; font-weight:700; letter-spacing:.02em;
}
header .date{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px; font-style:italic; color:#6b675c;
}
header .spacer{flex:1;}
.stat{font-size:13px; color:#55524a;}
.stat b{color:var(--ink); font-size:15px;}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.btn{
  font:inherit; font-size:13px; font-weight:500;
  border:1px solid #C4C0B4; background:var(--paper); color:var(--ink);
  border-radius:8px; padding:6px 12px; cursor:pointer;
  text-decoration:none; display:inline-block; white-space:nowrap;
}
.btn:hover{border-color:var(--ink);}
.btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn.icon{width:32px; padding:6px 0; text-align:center; font-weight:700;}
.btn:focus-visible{outline:2px solid var(--sel); outline-offset:2px;}

/* ===== Layout ===== */
main{flex:1; display:flex; min-height:0;}
#hallWrap{
  flex:1; overflow:auto; position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    var(--bg);
}
#hall{
  position:relative;
  width:1340px; height:960px;
  background:var(--paper);
  box-shadow:0 2px 24px rgba(43,43,51,.12);
  margin:24px;
  transform-origin:top left;
  background-image:
    linear-gradient(rgba(154,150,139,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,150,139,.08) 1px, transparent 1px);
  background-size:40px 40px;
}

/* ===== Elemente fixe ===== */
.fixed{
  position:absolute; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.12em; font-size:15px;
  background:var(--paper); z-index:1; text-align:center;
}
.fixed small{display:block; font-weight:500; letter-spacing:.05em; font-size:10px; color:#6b675c;}
#ring{
  position:absolute; border:2px dashed #C4C0B4; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#B8B4A8; font-weight:600; letter-spacing:.3em; font-size:14px;
  z-index:0; user-select:none;
}
.intrare{
  position:absolute; writing-mode:vertical-rl; text-orientation:mixed;
  font-size:11px; letter-spacing:.15em; color:#8a8678; font-weight:600;
  z-index:1; user-select:none;
}

/* ===== Mese ===== */
.table{
  position:absolute; z-index:2; cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition:filter .15s;
}
.table:focus-visible{outline:none;}
.table:focus-visible .disc{outline:2px solid var(--sel); outline-offset:3px;}
.disc{
  position:absolute;
  border:2px solid var(--line);
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.table.round .disc{border-radius:50%;}
.table.rect  .disc{border-radius:8px;}
.tname{font-size:12px; font-weight:600; line-height:1.1; text-align:center; pointer-events:none;}
.tcount{font-size:10.5px; color:#7a7668; pointer-events:none;}
.table.partial .disc{background:var(--accent-soft); border-color:var(--accent);}
.table.partial .tcount{color:var(--accent); font-weight:600;}
.table.full .disc{background:var(--full-soft); border-color:var(--full);}
.table.full .tcount{color:var(--full); font-weight:700;}
.table.selected .disc{box-shadow:0 0 0 3px var(--sel);}
.table.dropok .disc{box-shadow:0 0 0 3px var(--accent); border-color:var(--accent);}
.table.dropfull .disc{box-shadow:0 0 0 3px #C0392B;}
.table.shake{animation:shake .3s;}
@keyframes shake{0%,100%{translate:0}25%{translate:-4px 0}75%{translate:4px 0}}

/* mese blocate (IsLocked) — înghețate, nu primesc/nu cedează invitați */
.table.locked .disc{border-style:dashed; opacity:.8;}
.table.locked .tname::after{content:' 🔒'; font-size:10px;}

.seat{
  position:absolute; width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--paper);
  pointer-events:none; transition:background .2s, border-color .2s;
}
.seat.on{background:var(--accent); border-color:var(--accent);}
.table.full .seat.on{background:var(--full); border-color:var(--full);}

body.movemode .table{cursor:move;}
body.movemode .table .disc{border-style:dashed;}

/* ===== Sidebar ===== */
aside{
  width:330px; flex-shrink:0; background:#F5F3EC;
  border-left:1px solid #D8D5CB;
  display:flex; flex-direction:column; min-height:0;
}
.side-head{padding:14px 16px 10px; border-bottom:1px solid #E2DFD4;}
.side-head h2{font-size:14px; font-weight:700; letter-spacing:.02em; margin-bottom:8px;}
#search{
  width:100%; font:inherit; font-size:13px;
  border:1px solid #C4C0B4; border-radius:8px;
  padding:7px 10px; background:#fff; margin-bottom:8px;
}
#search:focus{outline:2px solid var(--sel); outline-offset:1px;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  font:inherit; font-size:11.5px; font-weight:500;
  border:1px solid #C4C0B4; border-radius:20px;
  padding:3px 10px; background:#fff; cursor:pointer;
  display:flex; align-items:center; gap:5px;
}
.chip .dot{width:8px; height:8px; border-radius:50%;}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

/* meniu „Adaugă masă" */
.add-menu{position:relative; display:inline-block;}
.add-options{
  position:absolute; top:calc(100% + 4px); left:0; z-index:60;
  background:var(--paper); border:1px solid #C4C0B4; border-radius:8px;
  box-shadow:0 4px 14px rgba(43,43,51,.15);
  display:flex; flex-direction:column; min-width:210px; overflow:hidden;
}
.add-options[hidden]{display:none;}
.add-options button{
  font:inherit; font-size:13px; text-align:left;
  border:none; background:none; padding:9px 14px; cursor:pointer;
}
.add-options button:hover{background:var(--accent-soft);}

/* panou masă selectată */
#tablePanel{
  border-bottom:1px solid #E2DFD4; padding:12px 16px;
  background:#EFEDE3; display:none;
}

/* redenumire masă selectată */
.tp-rename{display:flex; gap:6px; margin-top:8px;}
.tp-rename input{
  flex:1; font:inherit; font-size:13px;
  border:1px solid #C4C0B4; border-radius:8px;
  padding:5px 9px; background:#fff;
}
.tp-rename input:focus{outline:2px solid var(--sel); outline-offset:1px;}
.tp-rename .btn{padding:5px 12px; font-size:13px;}

/* acțiuni pe masa selectată: rotire, locuri, ștergere */
.tp-actions{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px dashed #D8D5CB;
}
.tp-actions .btn{padding:3px 9px; font-size:13px;}
.tp-cap{display:flex; align-items:center; gap:5px; font-size:12.5px; margin-left:2px;}
.tp-cap b{min-width:20px; text-align:center; font-size:13.5px;}
.tp-delete{margin-left:auto; color:#B0483B; border-color:#D8B5AE;}
.tp-delete:hover{border-color:#B0483B; background:#F7ECE9;}
#tablePanel.show{display:block;}
#tablePanel h3{font-size:13.5px; display:flex; align-items:baseline; gap:8px;}
#tablePanel h3 span{font-weight:400; font-size:12px; color:#7a7668;}
#tpClose{float:right; border:none; background:none; cursor:pointer; font-size:16px; color:#7a7668;}
#tpGuests{margin-top:8px; display:flex; flex-direction:column; gap:4px; max-height:170px; overflow:auto;}
.tp-guest{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; background:#fff; border:1px solid #E2DFD4;
  border-radius:6px; padding:4px 8px;
}
.tp-guest .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.tp-guest button{
  margin-left:auto; border:none; background:none; cursor:pointer;
  color:#B0483B; font-weight:700; font-size:13px; padding:0 4px;
}
#tpEmpty{font-size:12px; color:#8a8678; margin-top:6px; font-style:italic;}

/* lista invitați */
#guestList{flex:1; overflow:auto; padding:10px 16px 20px;}
.grp-title{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#7a7668; margin:14px 0 6px; display:flex; align-items:center; gap:6px;
}
.grp-title .dot{width:9px; height:9px; border-radius:50%;}
.guest{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #E0DDD2; border-radius:8px;
  padding:6px 10px; margin-bottom:5px;
  font-size:13px; cursor:grab;
  transition:opacity .15s, border-color .15s;
}
.guest:active{cursor:grabbing;}
.guest .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.guest .tag{
  margin-left:auto; font-size:10.5px; font-weight:700;
  background:var(--accent-soft); color:var(--accent);
  border-radius:5px; padding:2px 6px; letter-spacing:.03em;
}
.guest.assigned{opacity:.62;}
.guest.dragging{opacity:.35;}
.guest.hidden{display:none;}
#guestList.dropok{outline:2px dashed var(--accent); outline-offset:-6px; border-radius:10px;}

#toast{
  position:fixed; bottom:22px; left:50%; translate:-50% 0;
  background:var(--ink); color:#fff; font-size:13px;
  padding:9px 16px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .25s;
  z-index:50;
}
#toast.show{opacity:1;}

/* Pe ecrane mici planul rămâne vizibil sus, lista de invitați dedesubt, cu
   destul spațiu vizibil ca să se poată derula confortabil.
   (Pentru așezare de pe telefon rămâne recomandată pagina Aranjare mese.) */
@media (max-width: 768px){
  main{flex-direction:column;}
  #hallWrap{flex:0 0 34vh; height:auto; min-height:220px;}
  aside{width:100%; flex:1; min-height:0; border-left:none; border-top:1px solid #D8D5CB;}
  #guestList{min-height:160px;}
}

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