/* =====================================================================
   Xic — planta da sala.
   Serve o editor no wp-admin e a vista da equipa na aplicação.
   ===================================================================== */

.xic-sala {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 0 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 5% 100%,
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 7.14%,
    #141a1d;
  border: 2px solid #2b3439;
  border-radius: 6px;
  overflow: hidden;

  /* Na vista da equipa a planta é só para ver: o dedo tem de poder
     deslizar a página por cima dela. O bloqueio do gesto fica reservado
     ao editor, onde é preciso para arrastar as mesas. */
  touch-action: pan-y pinch-zoom;
}

.xic-sala--editor { touch-action: none; }

/* Com planta de fundo, a grelha sai da frente. */
.xic-sala--com-planta { background-color: #141a1d; }

.xic-sala__vazia {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 20px; text-align: center;
  color: #94a0a6; font-size: 15px;
}

/* ---- Mesa ---- */
.xic-mesa {
  position: absolute;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding: 4px;
  text-align: center; overflow: hidden;
  background: rgba(35, 43, 48, 0.92);
  color: #e9e6df;
  border: 2px solid #55636b;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.15;
}
.xic-mesa[data-forma="redonda"] { border-radius: 50%; }
.xic-mesa[data-forma="quadrada"] { border-radius: 6px; }
.xic-mesa[data-forma="comprida"] { border-radius: 8px; }

.xic-mesa__nome { font-weight: 800; font-size: clamp(10px, 1.5vw, 14px); }
.xic-mesa__lugares { font-size: clamp(9px, 1.2vw, 12px); color: #9fb0b8; }
.xic-mesa__quem {
  font-size: clamp(9px, 1.2vw, 12px); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xic-mesa__hora { font-size: clamp(8px, 1.1vw, 11px); opacity: .85; }

.xic-mesa[data-estado="ocupada"] {
  background: #174e5c; border-color: #0d343e; color: #f6f4ee;
}
.xic-mesa[data-estado="ocupada"] .xic-mesa__lugares { color: #cfe0e4; }
.xic-mesa[data-estado="reservada"] { background: #f0b429; }
.xic-mesa[data-seleccionada="sim"] { outline: 3px solid #a82d1b; outline-offset: 2px; }

/* ---- Editor ---- */
.xic-sala--editor .xic-mesa { cursor: grab; user-select: none; touch-action: none; }
.xic-sala--editor .xic-mesa:active { cursor: grabbing; }
.xic-sala--editor .xic-mesa[data-activa="sim"] { outline: 3px solid #2271b1; outline-offset: 2px; }

.xic-mesa__pega {
  position: absolute; right: -1px; bottom: -1px;
  width: 16px; height: 16px;
  background: #2271b1;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: nwse-resize;
}

.xic-editor-barra {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 16px 0;
}
.xic-editor-painel {
  max-width: 320px; margin-top: 16px; padding: 4px 18px 12px;
  background: #fff; border: 1px solid #c3c4c7; border-radius: 4px;
}
.xic-editor-painel input, .xic-editor-painel select { width: 100%; }