/* ===  GLOBAL ============================================================ */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;   /* header rows stack vertically */
}

:root {
  --ui-accent: #3b82f6; /* <- same blue as your slider bars */
  --ui-bg: #ffffff;
  --ui-surface: #f5f5f5;
  --ui-surface-strong: #eeeeee;
  --ui-border: #cfcfcf;
  --ui-text: #111111;
  --ui-muted: #555555;
  --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  --ui-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.12);
  --btn-bg-top: #f7f7f7;
  --btn-bg-bottom: #d9d9d9;
  --btn-border: #bcbcbc;
  --btn-text: #111111;
  --btn-glow: rgba(59, 130, 246, 0.25);
  --btn-press: #cfcfcf;
  --control-bg: #ffffff;
  --control-border: #bdbdbd;
} 

body {
  background: var(--ui-bg);
  color: var(--ui-text);
}

body.night {
  --ui-bg: #1f242b;
  --ui-surface: #2a313a;
  --ui-surface-strong: #242b33;
  --ui-border: #39414b;
  --ui-text: #e7ecf2;
  --ui-muted: #b8c0cc;
  --ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --ui-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.35);
  --btn-bg-top: #3b414a;
  --btn-bg-bottom: #1f242b;
  --btn-border: #4a5563;
  --btn-text: #e7ecf2;
  --btn-glow: rgba(59, 130, 246, 0.3);
  --btn-press: #161b22;
  --control-bg: #2e3540;
  --control-border: #4a5563;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  padding: 0.32rem 0.75rem;
  font-size: 0.85rem;
  background: linear-gradient(180deg, var(--btn-bg-top), var(--btn-bg-bottom));
  color: var(--btn-text);
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: 0 0 10px var(--btn-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2),
    0 6px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 6px rgba(0, 0, 0, 0.18),
    0 10px 18px rgba(0, 0, 0, 0.22);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--btn-press), var(--btn-bg-bottom));
  box-shadow:
    inset 0 1px 6px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.18);
}

select,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="file"] {
  border-radius: 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--ui-text);
  padding: 0.28rem 0.45rem;
  font-size: 0.85rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

input[type="file"]::file-selector-button {
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  padding: 0.24rem 0.6rem;
  background: linear-gradient(180deg, var(--btn-bg-top), var(--btn-bg-bottom));
  color: var(--btn-text);
  font-weight: 600;
}

/* ===  LAYOUT ============================================================== */
.main { display: flex; /* side-by-side panels */ 
flex: 1 1 auto; /* 🆕 stretch to fill remaining height */ 
min-height: 0; /* 🆕 needed for Firefox shrink-to-fit */
position: relative;
}
.main::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ccc;
  pointer-events: none;
  z-index: 10;  /* sit above canvases/images */
  background: var(--ui-accent);
}

.panel { flex: 1 1 50%; /* each panel gets half width */ 
display: flex; /* 🆕 let children (filename + wrapper) stack */ 
flex-direction: column; /* 🆕 vertical flow inside panel */ 
overflow: auto; /* panel scrolls when zoomed */ 
position: relative; 
box-sizing: border-box; 
min-height: 0; /* 🆕 ensures wrapper can shrink */ 
}
.inline-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5em;
}

/* === Desktop-style Menubar ====================================== */
#menubar {
  background: var(--ui-surface-strong);
  border-bottom: 1px solid var(--ui-border);
  font: 12px/1.15 system-ui, sans-serif;
  user-select: none;
  position: sticky;     /* stays at top if page scrolls */
  top: 0;
  z-index: 2000;        /* above .toolbar and canvases */
}
#menubar > ul {
  margin: 0;
  padding: 0 6px;
  list-style: none;
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

#menubar #appVersion {
  padding: 4px 8px;
  font: inherit;
  line-height: inherit;
  color: var(--ui-muted);
}

#menubar .menu-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}

#menubar .theme-toggle {
  margin: 2px 0;
}

/* Verifier mode badge (shown next to version text) */
.sc-verifier-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #dbeafe;
  color: #1e3a8a;
  font: 700 12px/1.2 system-ui, sans-serif;
  letter-spacing: .02em;
  vertical-align: middle;
}
.sc-verifier-badge[hidden] {
  display: none !important;
}
@supports (background: color-mix(in srgb, white 50%, black)) {
  .sc-verifier-badge {
    border-color: color-mix(in srgb, var(--ui-accent) 35%, #ffffff);
    background: color-mix(in srgb, var(--ui-accent) 18%, #ffffff);
    color: color-mix(in srgb, var(--ui-accent) 70%, #0f172a);
  }
}

/* App toast (used by Verifier Mode notifications) */
.sc-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  font: 600 13px/1.35 system-ui, sans-serif;
}
.sc-toast[hidden] {
  display: none !important;
}
@supports (background: color-mix(in srgb, white 50%, black)) {
  .sc-toast {
    border-color: color-mix(in srgb, var(--ui-accent) 40%, #ffffff);
    background: color-mix(in srgb, var(--ui-accent) 12%, #ffffff);
  }
}

#menubar {
  display: flex;
  align-items: center;
}
#menubar .menu {
  position: relative;
  padding: 2px 6px;
  cursor: default;
  border-radius: 4px 4px 0 0;
}
#menubar .menu:hover {
  background: rgba(0, 0, 0, 0.06);
}
#menubar .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-top: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: var(--ui-shadow-soft);
  padding: 4px 0;
  margin: 0;
  list-style: none;
  display: none;             /* hidden by default */
  z-index: 2001;
}
#menubar .menu:hover > .submenu,
#menubar .submenu.open {
  display: block;
}
#menubar .submenu li {
  margin: 0;
}
#menubar .submenu button {
  width: 100%;
  text-align: left;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ui-text);
  font: inherit;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
}
#menubar .submenu button:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: none;
  box-shadow: none;
}
#menubar .submenu button:active {
  transform: none;
  box-shadow: none;
}

#menubar .submenu #undoDropdown {
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*added 10-4-2025*/
/* hide by default; show when .open is present */
#menubar .submenu { display: none; position: absolute; }
#menubar .submenu.open { display: block; }

/* position nested submenu to the right of its parent submenu */
#menubar .submenu .submenu { left: 100%; top: 0; }
/*added 10-4-2025*/

/* About dialog polish */
#aboutDialog { width: 520px; max-width: 95vw; }
#aboutDialog .about-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#aboutDialog #aboutLogo {
  max-width: 220px;
  height: auto;
  align-self: center;
}
#aboutDialog h2 {
  margin: .25rem 0 0 0;
  text-align: center;
}
#aboutDialog .about-tagline,
#aboutDialog .about-meta {
  margin: 0;
  text-align: center;
  color: #333;
}
#aboutDialog .about-meta { font-size: 0.95rem; opacity: .85; }
#aboutDialog hr { border: 0; border-top: 1px solid #e5e5e5; margin: .25rem 0 .5rem; }
#aboutDialog .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#aboutDialog .about-grid a { text-decoration: none; color: inherit; }
#aboutDialog .about-grid a:hover { text-decoration: underline; }
#aboutDialog menu { margin-top: .5rem; } /* your global dialog menu already right-aligns */


/* Top toolbar ---------------------------------------------------------*/
.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 8px 12px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

/* Optional: keep tool filenames/labels from crowding */
.toolbar label { margin: 0; }
.toolbar input[type="file"] { max-width: 220px; }


/* make dialogs absolutely positioned, but leave them wherever JS puts them 
dialog {
  border: none;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 32px rgba(0,0,0,.3);
  max-width: 520px;

  position: absolute;
}
*/

.toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr; /* midline is the column boundary */
  align-items: center;
  column-gap: 12px;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* nice on smaller widths */
}

.theme-toggle {
  width: 26px;
  height: 22px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}

.theme-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.toolbar button,
.toolbar input[type="button"],
.toolbar input[type="submit"],
.toolbar input[type="reset"] {
  padding: 0.22rem 0.6rem;
  font-size: 0.78rem;
}

.toolbar select,
.toolbar input[type="text"],
.toolbar input[type="date"],
.toolbar input[type="number"],
.toolbar input[type="file"] {
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
}

.toolbar input[type="file"]::file-selector-button {
  padding: 0.2rem 0.5rem;
}

.theme-toggle .icon-moon {
  display: none;
}

body.night .theme-toggle .icon-sun {
  display: none;
}

body.night .theme-toggle .icon-moon {
  display: block;
}

.draw-tool-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tool-toggle {
  padding: 4px 10px;
  border: 1px solid #9aa3af;
  background: #f5f7fb;
  border-radius: 4px;
  cursor: pointer;
}

.tool-toggle.active {
  background: #dbeafe;
  border-color: #2563eb;
  box-shadow: inset 0 0 0 1px #2563eb;
}

body.night .tool-toggle {
  background: #1f242b;
  color: #e7ecf2;
  border-color: #6b7280;
}

body.night .tool-toggle.active {
  background: #e7ecf2;
  color: #111827;
  border-color: #e7ecf2;
  box-shadow: inset 0 0 0 1px #111827;
}

.annotations-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #d1d5db;
}

.annotations-badge.is-hidden {
  background: #fca5a5;
  border-color: #f87171;
  color: #7f1d1d;
}

.annotations-hidden {
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Optional: stack on small screens */
@media (max-width: 900px) {
  .toolbar { grid-template-columns: 1fr; row-gap: 8px; }
  .toolbar-right { justify-self: start; } /* default */
}



/* Base <dialog> appearance --------------------------------------------*/
dialog {
  position: fixed;                       /* center in viewport space */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);      /* true centering */
  border: none;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 32px rgba(0,0,0,.3);
  margin: 0;                             /* ignore body margins */
  z-index: 1000;
}

/* no backdrop dimming */
dialog::backdrop { background: transparent; }

/* Shared accent color (already defined above) is used for sliders + header */
input[type="range"] { accent-color: var(--ui-accent); }

/* Dialog draggable header (single source of truth) --------------------*/
.dlg-header {
  display: flex;               /* grip | title */
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  background: var(--ui-accent); /* ← blue header to match sliders */
  color: #fff;
  font-weight: 600;
  cursor: grab;
  user-select: none;
}
.dlg-header:active { cursor: grabbing; }

/* dotted “grip” icon */
.dlg-header::before {
  content: '';
  width: 12px; height: 12px;
  flex: none;
  opacity: .85;
  background-image:
    radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 4px 4px;
}

/* Edit Report (metadata) dialog: stack label + input */
#metadataDialog label {
  display: flex;
  flex-direction: column;
  gap: .25rem;          /* small space between label text and input */
  margin: .5rem 0;      /* space between rows */
}

/* Consistent action button row on dialogs */
dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
}

/* Prepare Screen for RBG Levels and Greyscale Levels*/
#leftImage, #rightImage { will-change: filter; }


/* Greyscale Levels dialog ---------------------------------------------*/
#greyLevelsDialog {
  width: 480px;        /* wide enough to prevent value wrap */
  max-width: 90vw;
}

/* lay out each slider row: label..value | slider ----------------------*/
#greyLevelsDialog .lvl-column label {
  display: grid;
  grid-template-columns: auto 1fr;  /* text+value | slider */
  column-gap: .75rem;
  align-items: center;
  white-space: nowrap;              /* keep values on one line */
}
#greyLevelsDialog .lvl-column input[type="range"] { width: 100%; }

/* FFT Filter dialog ----------------------------------------------------*/
.fft-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.fft-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fft-canvas-wrap {
  position: relative;
  width: 420px;
  max-width: 90vw;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.fft-canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}
.fft-mask {
  position: absolute;
  top: 0;
  left: 0;
}
.fft-help {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--ui-muted);
}

/* Log-Gabor dialog -----------------------------------------------------*/
.log-gabor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
#logGaborDialog label {
  display: block;
  margin: 0.45rem 0;
}
#logGaborDialog .log-gabor-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.log-gabor-row button {
  white-space: nowrap;
}
.log-gabor-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.log-gabor-help {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--ui-muted);
}

/* Custom color picker dialog ---------------------------------------------*/
#customColorDialog {
  width: 380px;
  max-width: 95vw;
}

#customColorDialog form {
  margin: 0;
}

.custom-color-layout {
  display: grid;
  grid-template-columns: 1fr 26px;
  gap: 10px;
  margin-top: 0.75rem;
}

#customColorSatVal,
#customColorHue {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  touch-action: none;
}

#customColorSatVal {
  cursor: crosshair;
}

#customColorHue {
  cursor: ns-resize;
}

.custom-color-hex-label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 0.75rem;
}

#customColorHexInput {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  font-family: monospace;
  text-transform: uppercase;
}

#customColorPreview {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: #ff7f00;
}

.custom-color-recent-row {
  display: grid;
  gap: 8px;
  margin-top: 0.75rem;
}

.custom-color-recent-row strong {
  font-size: 0.85rem;
  color: var(--ui-muted);
}

.custom-color-recent-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.custom-color-recent-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

.custom-color-recent-swatch.empty {
  cursor: default;
  background-image: linear-gradient(135deg, #f1f5f9 25%, transparent 25%, transparent 50%, #f1f5f9 50%, #f1f5f9 75%, transparent 75%, transparent);
  background-size: 10px 10px;
}

.custom-color-recent-swatch:disabled {
  opacity: 0.6;
}



/* ===  IMAGE + CANVAS STACK ============================================== */
.image-wrapper { position: relative; 
flex: 1 1 auto; /* 🆕 fill full panel height */ 
width: 100%; 
}

.image-wrapper img,
.image-wrapper canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;           /* fills the half-screen pane horizontally        */
  height: auto;          /* preserves aspect ratio                          */
  display: block;
  touch-action: none;    /* improves drawing on mobile                     */
}

#leftOverlay, #rightOverlay { filter: none !important; z-index: 2; }
.ninhydrin-layer { pointer-events: none; z-index: 1; }
.image-wrapper img { z-index: 0; }
body.ninhydrin-picking, body.ninhydrin-picking * { cursor: crosshair; }

.text-annotation-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}

.text-annotation-layer.is-active {
  pointer-events: auto;
}

.sc-text-box {
  position: absolute;
  border: 1px dashed rgba(59, 130, 246, 0.35);
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  overflow: hidden;
}

.text-annotation-layer.is-active .sc-text-box.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}

.sc-text-box-input {
  width: 100%;
  height: calc(100% - 12px);
  margin-top: 12px;
  border: 0;
  outline: 0;
  resize: none;
  box-sizing: border-box;
  padding: 2px;
  background: transparent;
  color: #111827;
  line-height: 1.25;
}

.sc-text-box-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12px;
  cursor: move;
  background: rgba(59, 130, 246, 0.18);
}

.sc-text-box-rotate {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.25);
  cursor: grab;
  display: none;
  z-index: 4;
}

.sc-text-box-rotate:active {
  cursor: grabbing;
}

.text-annotation-layer.is-active .sc-text-box.is-selected .sc-text-box-rotate {
  display: block;
}

.text-annotation-layer:not(.is-active) .sc-text-box {
  border-color: transparent;
  background: transparent;
}

.text-annotation-layer:not(.is-active) .sc-text-box-handle {
  display: none;
}

.text-annotation-layer:not(.is-active) .sc-text-box-rotate {
  display: none;
}

.text-annotation-layer:not(.is-active) .sc-text-box-input {
  cursor: default;
}

.text-box-menu {
  position: fixed;
  z-index: 10020;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.text-box-menu[hidden] {
  display: none !important;
}

.text-box-menu label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #334155;
}

.text-box-menu input[type="text"],
.text-box-menu input[type="number"],
.text-box-menu input[type="color"],
.text-box-menu select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box;
}

.text-box-menu input[type="color"] {
  padding: 2px;
  min-height: 32px;
  background: #ffffff;
}

.text-box-menu .menu-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.text-box-menu button {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
}

.text-box-menu #textMenuDeleteBtn {
  color: #991b1b;
  border-color: #fecaca;
  background: #fef2f2;
}


/* styles.css – place near the end */
.panel.dropping {
  outline: 3px dashed #3b82f6;      /* blue highlight while dragging */
}

/* Controls row: two equal columns that line up with the panels */
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* left | right */
  align-items: center;
  padding: 8px 0;                  /* no side padding so edges line up with .main */
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  font-size: 0.9rem;
  gap: 0;                          /* no column gap so centers match perfectly */
  position: relative;
}

/* Each group is centered inside its own half */
.control-group {
  display: flex;
  justify-content: center;         /* centers over its corresponding panel */
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Keep zoom/rotate value text from changing width while dragging */
.control-group span {
  display: inline-block;
  width: 4ch;          /* enough for -100 or 15.0 */
  text-align: right;
}

/* (Optional but explicit) make sure each group sits in its own column */
#controlsLeft  { grid-column: 1; }
#controlsRight { grid-column: 2; }


.controls::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--ui-accent);
  pointer-events: none;
  z-index: 1;
}

/* Hand cursor while right-drag panning (panel and canvas) */
#leftPanel.panning,
#rightPanel.panning,
#leftOverlay.panning,
#rightOverlay.panning {
  cursor: grabbing !important;
}

/* Keep wheel-zoom contained to the image panels */
#leftPanel,
#rightPanel {
  overscroll-behavior: contain;
}


/* ─── LOGIN PAGE ONLY ─────────────────────────────────────────────── */
body.login-page{
  /* full-bleed background image */
  background: url("images/login-bg.jpg") no-repeat center/cover fixed;

  /* centre everything with Flexbox */
  display:flex;                /* overrides global column layout */
  align-items:center;
  justify-content:center;

  min-height:100vh;            /* make sure it always fills screen */
  font-family:system-ui,sans-serif;
}

.login-box{
  background:rgba(255,255,255,.85); /* frosted-glass look */
  padding:2rem 2.5rem;
  border-radius:10px;
  width:320px;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}

.login-box h2{margin-top:0;text-align:center;font-weight:600;}

.login-box label{display:flex;flex-direction:column;margin-bottom:1rem;font-size:.9rem;color:#333;}

.login-box input{
  padding:.65rem .75rem;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:1rem;
}

.login-box button{
  padding:.75rem;
  width:100%;
  border:none;
  border-radius:4px;
  font-size:1rem;
  font-weight:600;
  background:#3b82f6;
  color:#fff;
  transition:background .2s;
}
.login-box button:hover{background:#2563eb;cursor:pointer;}

.error{color:#d00;margin-bottom:1rem;text-align:center;}

/* ─── BRANDING INSIDE LOGIN BOX ────────────────────────────────────*/
.branding{
  display:flex;
  flex-direction:column;   /* stack logo then name */
  align-items:center;      /* centre horizontally */
  margin-bottom:1rem;      /* space before “Sign in” */
}

.branding img{
  max-width:240px;         /* shrink if logo is large */
  height:auto;
  margin-bottom:.5rem;
}

.product-name{
  font-size:1.50rem;       /* a bit bigger than normal text */
  font-weight:600;
  letter-spacing:.2px;
  color:#111;
  text-align:center;
}


/* ------------- LOGIN PAGE ------------- */

/* <body class="login-page"> */
.login-page{
  /* full-screen background photo */
  background: url("images/login-bg.jpg") center/cover no-repeat fixed;

  /* flex-layout to keep the form centred
     and the footer at the very bottom */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centring of login box */
  align-items: center;       /* horizontal centring */
  min-height: 100vh;         /* ensure full window height */
  margin: 0;
}

/* login form panel */
.login-box{
  background: rgba(255,255,255,0.90);   /* translucent white */
  padding: 2rem 2.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  max-width: 360px;
  width: 90%;
  text-align: center;
    /* ↓ NEW LINE ↓ */
  margin-top: 1in;                      /* shift panel down ~1" */
}

/* logo + product name strip */
.branding{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.branding img{
  width: 240px;   /* tweak to match your logo */
  height: auto;
}
.product-name{
  font-size: 1.4rem;
  font-weight: 600;
}

/* labels, inputs, and button styling */
.login-box label{
  display: block;
  text-align: left;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.login-box label span{
  display: block;
  margin-bottom: 0.25rem;
}
.login-box input{
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 1rem;
}
.login-box button{
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  background: #1473e6;         /* primary colour */
  color: #fff;
  cursor: pointer;
}
.login-box button:hover{
  opacity: 0.9;
}

/* login-error message */
.error{
  color: #c0392b;
  margin-bottom: 0.75rem;
}

/* sticky footer */
.footer{
  margin-top: auto;            /* pushes footer to bottom */
  text-align: center;
  padding: 10px 0;
  font-size: 0.8rem;
  color: #666;
  background: #f5f5f5;
  border-top: 1px solid #ccc;
}

/* ------------- END LOGIN PAGE ------------- */

/* Hide the legacy Tools dropdown + its label, but keep them in the DOM */
#toolDropdown,
#toolDropdownLabel {
  display: none !important;
}