/* General layout */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0f172a;
  color: #e0e6f1;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background-color: #112240;
  color: #e0e6f1;
  padding: 1rem;
  border-bottom: 1px solid #1f3568;
}

main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Controls sidebar */
/* Increase the width of the controls sidebar so that coverage stats fit on one line */
/* Increase the width of the controls sidebar so that coverage stats fit on one line */
.controls {
  width: 380px;
  padding: 1rem;
  box-sizing: border-box;
  background: #091c2e;
  border-right: 1px solid #1f3568;
  overflow-y: auto;
  color: #e0e6f1;
}

.section {
  margin-bottom: 1rem;
}

.section h2 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #9db2c9;
  letter-spacing: 0.5px;
}

.section label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  color: #a6b3cf;
}

.section input[type="number"] {
  width: 100%;
  padding: 0.3rem;
  border-radius: 4px;
  border: 1px solid #34527b;
  background-color: #0f2544;
  color: #e0e6f1;
  box-sizing: border-box;
}

/* Style text inputs in sections (e.g. room name) similarly to numeric inputs */
.section input[type="text"] {
  width: 100%;
  padding: 0.3rem;
  border-radius: 4px;
  border: 1px solid #34527b;
  background-color: #0f2544;
  color: #e0e6f1;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

/* Style selects in sections (e.g., units) to match inputs */
.section select {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.3rem;
  border-radius: 4px;
  border: 1px solid #34527b;
  background-color: #0f2544;
  color: #e0e6f1;
  box-sizing: border-box;
}

/* Make section sliders line up with the other controls, including Grid Zoom */
.section input[type="range"] {
  width: 100%;
  margin: 0.2rem 0 0.35rem;
  box-sizing: border-box;
  accent-color: #2a4b7c;
}

.button-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.button-row button {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: 4px;
  background-color: #2a4b7c;
  color: #e0e6f1;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure custom SVG icons for the buttons are a consistent size and
   spaced from the button label. The icons shrink appropriately when
   the button resizes and maintain legibility on the dark background. */
.button-row button svg {
  width: 16px;
  height: 16px;
  margin-right: 0.4rem;
  flex-shrink: 0;
}

.button-row button:hover {
  background-color: #376b96;
}

.button-row.utility-row {
  margin-top: 0.5rem;
}

.button-row.utility-row button {
  font-size: 0.85rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #a6b3cf;
  cursor: pointer;
}

.toggle-label input {
  accent-color: #2a4b7c;
}

.device-list {
  margin-top: 1rem;
}

.device-item {
  border: 1px solid #1f3568;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border-radius: 4px;
  background-color: #112240;
}

.device-item h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: #a6b3cf;
}

.device-item label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: #a6b3cf;
}

.device-item input[type="number"],
.device-item input[type="range"],
.device-item select {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  border-radius: 4px;
  border: 1px solid #34527b;
  background-color: #0f2544;
  color: #e0e6f1;
  box-sizing: border-box;
}

/* Display for slider values next to sliders */
.device-item .slider-value {
  display: block;
  font-size: 0.75rem;
  color: #a6b3cf;
  margin-bottom: 0.5rem;
  text-align: right;
}

/* Coverage summary lines: display each stat on its own line and prevent wrapping */
#coverage-summary {
  white-space: normal;
}
/* Coverage analysis rows with progress bars */
#coverage-summary .coverage-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

#coverage-summary .coverage-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 120px;
  font-size: 0.8rem;
  color: #a6b3cf;
}

#coverage-summary .coverage-icon {
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex-shrink: 0;
}

#coverage-summary .coverage-bar {
  flex: 1;
  height: 8px;
  background-color: #1f3568;
  border-radius: 4px;
  margin-right: 0.5rem;
  overflow: hidden;
}

#coverage-summary .coverage-bar-fill {
  height: 100%;
}

/* Audio and video bar colors */
#coverage-summary .coverage-bar-fill.audio {
  background-color: #6fa8dc;
}
#coverage-summary .coverage-bar-fill.video {
  background-color: #34c759;
}

#coverage-summary .coverage-percent {
  width: 40px;
  text-align: right;
  font-size: 0.8rem;
  color: #a6b3cf;
}


/* Theme-matched scrollbar for the left controls panel */
.controls {
  scrollbar-width: thin;
  scrollbar-color: #2a4b7c #0b2137;
}

.controls::-webkit-scrollbar {
  width: 10px;
}

.controls::-webkit-scrollbar-track {
  background: #0b2137;
  border-left: 1px solid #1f3568;
}

.controls::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #376b96 0%, #2a4b7c 100%);
  border-radius: 999px;
  border: 2px solid #0b2137;
}

.controls::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4a82ae 0%, #376b96 100%);
}

.device-item .remove-btn {
  background-color: #c0392b;
  color: white;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
}

.device-item .remove-btn:hover {
  background-color: #a93226;
}

/* Device group headings and layout */
.device-group {
  margin-bottom: 1rem;
}
.device-group h2 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #9db2c9;
  letter-spacing: 0.5px;
}

/* SVG dimension labels for the room width and height. These are
   rendered as <text> elements inside the SVG and use negative
   coordinates to position outside the grid. Disable pointer events so
   they do not interfere with dragging. */
/* Dimension labels (width and height) displayed outside the grid. When
   rendered as HTML elements, they are absolutely positioned. When used
   as SVG <text> elements, the fill attribute is set directly on the
   element. */
.dimension-label {
  position: absolute;
  pointer-events: none;
  user-select: none;
  font-size: 14px;
  color: #9db2c9;
  white-space: nowrap;
}

/* Room canvas */
.room-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0f172a;
  position: relative;
}

.room-svg {
  background-color: #112240;
  border: 1px solid #1f3568;
  /* Create a subtle grid pattern */
  background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  /* Allow SVG labels to render outside the SVG's view box by letting
     overflow be visible. Without this, our dimension labels placed
     above and to the left of the grid would be clipped. */
  overflow: visible;
}

/* Room dimension labels placed just outside of the grid */
.room-label {
  position: absolute;
  color: #9db2c9;
  font-size: 14px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Remove default positioning for dimension labels. Their positions are
   controlled via inline styles computed in JavaScript. We retain
   font styling and color via .room-label. */
/* Position the room dimension labels outside the grid using CSS alone. The width
   label sits above the grid, centred horizontally; the height label sits to
   the left of the grid and is rotated so it reads vertically. We use CSS
   transforms to offset the labels outside the SVG bounds instead of
   computing positions in JavaScript. */
/* Specific positions and rotations for the room dimension labels are computed
   in JavaScript, so no positioning or transforms are defined here. */
.room-label.width {
}

.room-label.height {
}

.section .setting-value {
  display: block;
  font-size: 0.75rem;
  color: #a6b3cf;
  margin-top: -0.15rem;
  margin-bottom: 0.35rem;
  text-align: right;
}

.room-container {
  overflow: auto;
  padding: 1rem 1.5rem 1.5rem;
  box-sizing: border-box;
  scroll-padding: 50%;
}

.room-stage {
  position: relative;
  display: inline-block;
  transform-origin: center center;
  margin: auto;
}


.app-header {
  text-align: left;
  margin-bottom: 0;
  background: #091c2e;
  padding: 10px;
}

.app-logo {
  height: 40px;
  margin-bottom: 6px;
  display: block;
  margin-left: 0;
}

.app-title {
  font-size: 1.4rem;
}


/* seamless header/sidebar override */
.app-header {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.sidebar {
  margin-top: 0 !important;
  border-top: none !important;
}

header,
.top-bar,
.main-content,
.content {
  margin-top: 0;
  margin-bottom: 0;
}


/* FORCE REMOVE GAP */
body, html {
  margin: 0;
  padding: 0;
}

.app-header {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar {
  margin: 0 !important;
  border-top: none !important;
}

/* Ensure layout container has no gap */
.main-content, .layout, .container {
  margin: 0 !important;
  padding-top: 0 !important;
}

/* Fix chair icon color */
button .chair-icon,
button svg.chair,
button svg[data-icon="chair"] {
  fill: #ffffff !important;
  color: #ffffff !important;
}


/* header/sidebar seamless final fix */
header {
  background: #091c2e !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.app-header {
  background: transparent !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: none !important;
  box-shadow: none !important;
}

main {
  margin: 0 !important;
  padding: 0 !important;
}

.controls {
  margin-top: 0 !important;
  border-top: none !important;
}

.button-icon,
.chair-icon,
button .button-icon {
  color: #ffffff !important;
  fill: currentColor !important;
  flex: 0 0 auto;
}


/* strong full-width header divider */
#app > header,
header {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #1f3568 !important;
}

.app-header {
  border-bottom: 1px solid #1f3568 !important;
  padding-bottom: 12px !important;
}

main,
.controls,
.stage-area,
.canvas-container {
  margin-top: 0 !important;
}


/* grid device icons */
.device-icon {
  vector-effect: non-scaling-stroke;
}

.device-icon path {
  pointer-events: none;
}

/* label and chair color tweaks */
.device-label,
svg text {
  fill: #ffffff;
}

.chair-shape,
.chair rect,
g[data-type="chair"] rect {
  fill: rgba(168, 85, 247, 0.28);
  stroke: #a855f7;
}


/* table no fill override */
g[data-type="table"] rect,
.table-shape {
  fill: none !important;
  stroke: #facc15 !important;
  stroke-width: 2;
}

/* only the table icon should drag/select the table */

/* table drag by icon only */
.table-icon,
.table-icon * {
  pointer-events: all !important;
  cursor: move;
}

g[data-type="table"] rect,
.table-shape {
  pointer-events: none !important;
}

/* show grab cursor on all draggable device icons */
.mic-icon,
.microphone-icon,
.camera-icon,
.table-icon,
.chair-icon,
.device-icon,
.device-icon * {
  cursor: grab !important;
}

.mic-icon:active,
.microphone-icon:active,
.camera-icon:active,
.table-icon:active,
.chair-icon:active,
.device-icon:active,
.device-icon *:active {
  cursor: grabbing !important;
}

/* force grab cursor for all draggable devices */
.mic-icon,
.mic-icon *,
.microphone-icon,
.microphone-icon *,
.camera-icon,
.camera-icon *,
.chair-icon,
.chair-icon *,
.device-icon,
.device-icon *,
g[data-type="microphone"],
g[data-type="microphone"] *,
g[data-type="camera"],
g[data-type="camera"] *,
g[data-type="chair"],
g[data-type="chair"] * {
  cursor: grab !important;
  pointer-events: all;
}

.mic-icon:active,
.mic-icon *:active,
.microphone-icon:active,
.microphone-icon *:active,
.camera-icon:active,
.camera-icon *:active,
.chair-icon:active,
.chair-icon *:active,
.device-icon:active,
.device-icon *:active,
g[data-type="microphone"]:active,
g[data-type="microphone"] *:active,
g[data-type="camera"]:active,
g[data-type="camera"] *:active,
g[data-type="chair"]:active,
g[data-type="chair"] *:active {
  cursor: grabbing !important;
}


/* selected device sync between canvas and sidebar */
.device-item.selected {
  border-color: #7fb3ff;
  box-shadow: 0 0 0 1px rgba(127, 179, 255, 0.55);
  background-color: #163055;
}

.device-item.selected h3,
.device-item.selected label {
  color: #ffffff;
}

.selected-device .device-icon path {
  stroke: #ffffff;
}


.coverage-camera-icon {
  color: #ffffff;
  vertical-align: middle;
  flex: 0 0 auto;
  margin-right: 6px;
}

.coverage-camera-icon path {
  stroke: currentColor;
}


/* active add-mode button */
button.active-add {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22) inset;
  filter: brightness(1.08);
}


.chair-icon path {
  stroke: currentColor;
  fill: none;
}


.bottom-action-row {
  margin-top: 12px;
}

.bottom-action-row #clear-grid {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #153450;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.bottom-action-row #clear-grid:hover {
  background: #1a4164;
}


.bottom-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bottom-action-row #print-pdf,
.bottom-action-row #clear-grid {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #153450;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.bottom-action-row #print-pdf:hover,
.bottom-action-row #clear-grid:hover {
  background: #1a4164;
}

#print-room-design {
  display: none;
}

@media print {
  body.printing-room-design > *:not(#print-room-design) {
    display: none !important;
  }

  body.printing-room-design #print-room-design {
    display: block !important;
    color: #111;
    background: #fff;
    padding: 0;
    margin: 0;
  }

  .print-sheet {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18mm 14mm;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }

  .print-header {
    margin-bottom: 12mm;
  }

  .print-header h1 {
    margin: 0 0 6mm 0;
    font-size: 20pt;
    color: #111;
  }

  .print-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3mm 8mm;
    font-size: 10.5pt;
  }

  .print-stage-wrap {
    border: 1px solid #cfd6df;
    border-radius: 6px;
    padding: 8mm;
    margin-bottom: 10mm;
    break-inside: avoid;
  }

  .print-stage-svg {
    width: 100%;
    height: auto;
    max-height: 170mm;
  }

  .print-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm 8mm;
    font-size: 10.5pt;
  }

  @page {
    size: A4 portrait;
    margin: 10mm;
  }
}


.camera-model-select {
  width: 100%;
  background: #102b43;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

.camera-model-note {
  font-size: 0.82rem;
  opacity: 0.8;
}


.coverage-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.coverage-toggle-row label {
  margin: 0;
}


#disable-camera-range-limit {
  accent-color: #4da3ff;
}


.coverage-toggle-note {
  font-size: 0.82rem;
  opacity: 0.8;
  margin-top: 4px;
}