/* Stage */
#rbat-admin-floor-app { margin-top: 16px; }

.rbat-floor-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px
}

/* In embedded view-only we may hide editing actions but keep section navigation visible.
   The nav itself lives inside .rbat-secnav; we don't hide the whole toolbar anymore. */
.rbat-secnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rbat-sec-title-wrap{display:flex;align-items:center;gap:8px}
.rbat-sec-title{font-weight:700}

.rbat-floor-help{
  background:#fafafa;border:1px solid #e5e5e5;padding:10px;border-radius:6px;margin:8px 0
}

.rbat-floor-stage{
  position:relative;
  width:100%; /* Fill container width in embedded view */
  height:auto; /* JS sets exact section height */
  border:1px solid #e5e5e5;
  border-radius:8px;
  /* Stage holds scroll and plain background; grid lives on inner canvas so it matches section size */
  background-color:#fff;
  overflow:auto;
  user-select:none;
  -webkit-user-select:none;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Inner admin canvas gets the grid so its width/height exactly reflect the section */
.rbat-admin-canvas{
  position:relative;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size:20px 20px;
  background-color:#fff;
}

.rbat-node{  
  position:absolute;
  /* Icon-only look: no box, just the icon centered in the node area */
  border:none;
  background:transparent;
  border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:none;
  cursor:move;
  padding:0;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
/* combo nodes no longer have a special border in icon-only mode */
.rbat-node.selected{
  /* Selection ring without a box */
  outline: 2px solid #0f62fe66;
  outline-offset: 4px;
}
.rbat-node .label{
  width:100%; text-align:center; font-size:11px; color:#333;
  background:transparent;
  pointer-events:none;
  margin-top:4px;
}

/* Icon element */
.rbat-node-icon{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.rbat-node-icon img{ max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain; display:block; }

/* Status coloring (applied to .rbat-node) */
.rbat-node.status-free .rbat-node-icon img{ filter:none; }
.rbat-node.status-reserved .rbat-node-icon img{ filter: saturate(1.1) contrast(1.05) hue-rotate(20deg); }
.rbat-node.status-busy .rbat-node-icon img{ filter: grayscale(1) brightness(0.9); }
.rbat-node.status-unknown .rbat-node-icon img{ filter: none; opacity:.9; }

/* Optional colored halo around icon to reinforce status */
.rbat-node.status-free .rbat-node-icon{ box-shadow: 0 0 0 2px rgba(16,185,129,.35); border-radius: 10px; }
.rbat-node.status-reserved .rbat-node-icon{ box-shadow: 0 0 0 2px rgba(245,158,11,.35); border-radius: 10px; }
.rbat-node.status-busy .rbat-node-icon{ box-shadow: 0 0 0 2px rgba(239,68,68,.35); border-radius: 10px; }


/* Inspector */
.rbat-inspector{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap:10px 12px;
  align-items:end;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:12px;
}
.rbat-inspector .rbat-ins-title{ grid-column: 1 / -1; font-weight:600; color:#1f2937; margin-bottom:2px }
.rbat-inspector .rbat-ins-subtitle{ grid-column: 1 / -1; font-weight:600; color:#374151; margin-top:4px }
.rbat-inspector .rbat-ins-sep{ grid-column: 1 / -1; border:none; border-top:1px solid #eee; margin:2px 0 4px 0 }
.rbat-inspector label{display:flex;flex-direction:column;font-size:12px;color:#444}
.rbat-inspector input,.rbat-inspector select{
  padding:8px;border:1px solid #dcdcdc;border-radius:6px;background:#fff;font:inherit
}
.rbat-inspector .rbat-ins-actions{
  grid-column: 1 / -1;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:4px
}

/* Wider span for long controls */
.rbat-inspector .rbat-ins-field--span2{ grid-column: span 2; }
.rbat-inspector .rbat-spin{ gap:10px; }
.rbat-inspector .rbat-spin .button{ min-width:32px; }
.rbat-inspector #rbat-sec-w, .rbat-inspector #rbat-sec-h{ width: 110px; }

/* Small helpers */
.rbat-muted{color:#666}

/* Dialog visibility: hidden by default, visible when [open] */
dialog.rbat-modal{ display:none; }
dialog.rbat-modal[open]{ display:flex; }

/* Modal layout and form alignment */
dialog.rbat-modal{ align-items:center; justify-content:center; padding:0; }
.rbat-modal-box{ background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:14px; width:min(680px,92vw); max-width:92vw; box-shadow:0 8px 30px rgba(0,0,0,.12); }
.rbat-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600; margin-bottom:12px; }
.rbat-modal-x{ appearance:none; border:none; background:transparent; font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:6px; }
.rbat-modal-x:hover{ background:#f5f5f5; }
.rbat-form .rbat-field{ display:block; margin-bottom:10px; }
.rbat-modal .rbat-field{ display:block; }
.rbat-form label{ display:block; font-size:12px; color:#444; }
.rbat-form input, .rbat-form select{ width:100%; max-width:100%; box-sizing:border-box; padding:6px; border:1px solid #dcdcdc; border-radius:6px; background:#fff; font:inherit; }
.rbat-modal-foot{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.rbat-btn{ display:inline-block; padding:6px 10px; border:1px solid #dcdcdc; border-radius:6px; background:#f6f7f7; color:#1e1e1e; cursor:pointer; }
.rbat-btn:hover{ background:#eef0f1; }
.rbat-btn-primary{ background:#2271b1; border-color:#1e6da3; color:#fff; }
.rbat-btn-primary:hover{ background:#1b5f93; }
.rbat-btn-danger{ background:#d63638; border-color:#b32d2e; color:#fff; }
.rbat-btn-danger:hover{ background:#b02b2d; }

/* Icon picker */
.rbat-icon-picker{ max-height:60vh; overflow:auto; }
.rbat-icon-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
.rbat-icon-cell{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; cursor:pointer; }
.rbat-icon-cell:hover{ border-color:#0f62fe; box-shadow:0 0 0 2px #0f62fe22; }
.rbat-icon-cell img{ width:auto; max-width:72px; max-height:72px; object-fit:contain; display:block; }
.rbat-icon-cell .label{ font-size:12px; color:#555; text-align:center; word-break:break-all; }
.rbat-icon-preview .label{ font-size:12px; color:#555; margin-top:4px; }