/* Foaia de stil a editorului sălii (app/consola/sala.html), scoasă din
   pagină într-un fișier: politica de conținut (app/_headers, tools/csp.js)
   ajunge la „style-src 'self'” numai fără blocuri <style> și fără style="…"
   în pagini. Ce stătea în style="…" are regulile lui la capăt. */
/* Numai ce ține de pagina asta. Restul e în stil.css, una pentru toată consola. */

/* ---------- aranjarea, proprie paginii ----------
   Asta e o pagină de lucru, nu una care se derulează: ține tot ecranul, cu
   planșa întinsă între bara de sus și marginea de jos. De aceea html, body și
   main nu iau regulile obișnuite din stil.css — le-ar face o coloană îngustă
   în mijloc, cu planșa strivită. */
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
main{max-width:none;margin:0;padding:0;flex:1;display:flex;min-height:0}

button,input,select{font:inherit;color:inherit}
header a{color:var(--ink-3);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
header a:hover{color:var(--ink)}
select,input[type=text],input[type=number]{padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--ground)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#stare{font-size:12.5px;color:var(--ink-3);min-width:130px;text-align:right}
#stare.ok{color:var(--ok)}
#stare.err{color:var(--flag)}
aside{width:290px;flex:0 0 290px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:20px}
.grup h2{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.camp input,.camp select{width:100%}
/* Butoanele împart rândul în părți egale cât încap, apoi trec pe rândul
   următor. Cu min-width:0 nu treceau: rămâneau pe un rând și textul ieșea
   peste vecin — trei butoane de schiță arătau ca o singură mâzgăleală. */
.randuri>*{flex:1}
input[type=range]{accent-color:var(--accent);width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;border:1px solid var(--line-2);font-size:12.5px;font-weight:600;background:var(--ground);margin:0 6px 6px 0}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.paleta{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.paleta button{padding:8px 6px;border:1px dashed var(--line-2);border-radius:8px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.paleta button:hover{border-style:solid;color:var(--ink)}
.planse{flex:1;min-width:0;position:relative;background:var(--ground);overflow:hidden}
svg{display:block;width:100%;height:100%;touch-action:none}
.grid line{stroke:var(--line);stroke-width:.5}
.room{fill:var(--surface);stroke:var(--line-2);stroke-width:2}
.masa circle,.masa rect.m{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1.5;cursor:move}
.masa.sel circle,.masa.sel rect.m{stroke:var(--accent);stroke-width:3;fill:var(--accent-soft)}
.masa.ocupata circle,.masa.ocupata rect.m{stroke:var(--ok)}
.masa text{fill:var(--ink);font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}
.masa tspan.locuri{font-size:9px;fill:var(--ink-3);font-weight:600}
.reper rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5;cursor:move}
.reper.sel rect{stroke-width:3}
.reper text{fill:var(--accent);font-size:10px;font-weight:700;letter-spacing:.08em;text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}
.schita{pointer-events:none}
.schita.se-misca{pointer-events:auto;cursor:move;outline:2px dashed var(--accent)}
.banda{fill:var(--accent);fill-opacity:.10;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;pointer-events:none}
/* Caseta de peste planșă, cu o salvare care n-a mers: în stil.css, una
   pentru sală și așezare. */
/* O veste nu e o eroare: aceeași casetă, în culoarea produsului. */
.alerta.veste{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.alerta.veste button{color:var(--accent)}
.ajutor{position:absolute;left:14px;bottom:12px;max-width:calc(100% - 272px);font-size:12px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-family:"Karla",system-ui,sans-serif;}
kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px}
dialog{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink);padding:22px;max-width:440px;box-shadow:0 20px 60px var(--umbra-caseta)}
dialog::backdrop{background:var(--val-sala)}
dialog h3{margin:0 0 10px;font-size:16px}
dialog p{font-family:"Karla",system-ui,sans-serif;font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
dialog ul{font-family:"Karla",system-ui,sans-serif;margin:0 0 14px;padding-left:20px;color:var(--ink-2)}
.dlg-actiuni{display:flex;gap:8px;justify-content:flex-end}
.alaturi-lista{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.alaturi-lista label,.bifa{display:flex;gap:9px;align-items:center;font-size:14px;cursor:pointer}
.alaturi-lista .cate{margin-left:auto;font-size:12px;color:var(--ink-3)}
.bifa{margin:4px 0 0}
.lupa{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 7px}
.lupa button{width:27px;height:27px;border:1px solid var(--line-2);border-radius:6px;background:var(--ground);font-weight:700;line-height:1}
.lupa button:hover{border-color:var(--ink-3)}
.lupa button.lat{width:auto;padding:0 10px;font-size:12px;font-weight:600}
.lupa span{font-size:12px;color:var(--ink-3);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.lamurire{font-family:"Karla",system-ui,sans-serif;font-size:13px;line-height:1.5;color:var(--ink-3);margin:7px 0 0}
/* Cine folosește planul. Stă sus, deasupra numelui: mesele țin de plan, nu
   de eveniment, deci ce schimbi aici schimbi la toate nunțile de pe el. */
.folosit{border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;margin:0 0 12px;background:var(--ground)}
.folosit.mai-multe{border-color:var(--accent);background:var(--accent-soft)}
.folosit p{font-family:"Karla",system-ui,sans-serif;font-size:13.5px;line-height:1.5;color:var(--ink);margin:0 0 9px}
.folosit .btn{width:100%}
/* Explicațiile se ascund din antet. Caseta cu scurtături pleacă și ea — stătea
   peste planșă. Rămân rândurile care spun o STARE: „e pusă deoparte”, sau
   numerotarea care tocmai merge. */
html.fara-explicatii .ajutor,
html.fara-explicatii .lamurire:not(.stare){display:none}
.planse.se-muta svg{cursor:grab}
.planse.numerotam svg{cursor:crosshair}
/* pe telefon: nu mai e o pagină pe toată înălțimea, ci una care derulează,
   cu loc sub toate pentru bara de jos. Cu totul pe un ecran, capul cu
   butoanele lui înghițea planșa, iar bara acoperea ce rămânea. Ajutorul de
   la tastatură nu are rost fără tastatură.

   Planșa vine prima, sub cap: panoul întreg (~1000 px) stătea deasupra ei,
   iar în primul ecran nu se vedea nimic din sală. Sub planșă, panoul, cu
   ce se folosește cât lucrezi pe plan — masa aleasă, pasul înapoi,
   adăugatul — înaintea setărilor sălii și a schiței. Planșa nu ia tot
   ecranul: sub ea rămâne o fâșie de panou, de unde degetul derulează
   pagina (pe planșă, degetul mută mesele). */
@media (max-width:760px){
  html,body{height:auto;overflow:visible}
  body{display:block}
  main{display:flex;flex-direction:column;min-height:0}
  aside{width:auto;flex:none;max-height:none;overflow:visible;border-right:0;border-top:1px solid var(--line)}
  .planse{order:-1;flex:none;height:56vh;min-height:360px}
  #panouSelectie{order:-3}
  #grupInapoi{order:-2}
  #grupAdauga{order:-1}
  .ajutor{display:none}
  /* „Salvează” lat, la urmă; restul capului strâns vine din stil.css, ca la toate paginile */
  #btnSalveaza{flex:1 1 100%;order:9;padding:10px;font-size:14px}
}

/* ---------- ce stătea în style="…" ----------
   Scris pe loc, în marcaj și în panoul selecției; politica de conținut de la
   capăt nu mai ia stiluri scrise în pagină. Stau după toate celelalte, ca
   stilul pus pe loc, care trecea peste orice regulă. */
#btnSectorNou{align-self:flex-start}
/* „Pasul înapoi” și „Adaugă”: loc între butoane și ce vine sub ele */
.randuri.loc-jos{margin-bottom:8px}
#btnAlaturi{width:100%;margin-bottom:8px}
/* „Șterge masa” și „Șterge reperul”, sub câmpurile celei alese */
#sSterge{width:100%;margin-top:6px}