/* Sprinkler Circle Tool — FINAL styles.css
   Replace your entire styles.css with this file.
   UI sizing: change ONLY --sidebar-font to shrink/grow everything in the left panel.
*/

@font-face {
  font-family: "FireShieldGauge";
  src: url("./fonts/gauge-e.otf") format("opentype");
}

:root {
  --sidebar-width: 400px;
  --sidebar-font: 11px;
  /* 👈 change this: 10px smaller, 12px bigger */
  --gap: 10px;
}

.hidden {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Arial, sans-serif;
  padding: 0;
  background: #fff;
  font-size: 14px;
  visibility: hidden;
  /* general default; sidebar overrides via --sidebar-font */
}

/* ===== App layout: LEFT 400px panel + RIGHT full-height canvas ===== */
.appLayout {
  display: flex;
  width: 100vw;
  height: 100vh;
}

/* LEFT sidebar */
.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  height: 100vh;
  overflow: auto;
  border-right: 1px solid #ddd;
  padding: 12px;
  box-sizing: border-box;
  background: #fff;

  /* 👇 all sidebar UI inherits from this */
  font-size: var(--sidebar-font);
}

.appTitle {
  margin: 0 0 10px;
  font-size: 1.35em;
  /* scales with sidebar */
  line-height: 1.15;
}

/* RIGHT stage */
.stage {
  flex: 1;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #f6f6f6;
}

/* Canvas container fills the entire stage */
.canvasWrap {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: auto;
}

/* Canvas itself (size is controlled by JS when image loads) */
canvas {
  display: block;
  cursor: crosshair;
  background: #fff;
}

/* ===== Download buttons (top-left overlay on canvas) ===== */
.downloadPanel {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
  z-index: 30;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
}

.downloadBtn {
  width: auto;
  height: auto;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  /* keep readable on canvas overlay */
  line-height: 1;
}

.downloadBtn:hover {
  filter: brightness(0.98);
}

.downloadBtnSecondary {
  background: #f7f7f7;
}

/* ===== Snap + Opacity overlay (under download buttons) ===== */
.snapPanel {
  position: absolute;
  top: 64px;
  /* give it a bit more space under the buttons */
  left: 12px;
  z-index: 30;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  /* ✅ DO NOT WRAP */
  gap: 12px;

  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;

  font-size: 10px;
  /* requested */
  white-space: nowrap;
  /* ✅ keep text on one line */
}

.snapLabel {
  display: inline-flex;
  /* ✅ inline-flex avoids weird flex stretching */
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
  /* ✅ no wrapping per label */
}

.snapLabel input[type="checkbox"] {
  width: auto;
  /* ✅ override global input width:100% */
  margin: 0;
}

.snapOpacity {
  width: 60px;
  /* ✅ fixed */
  padding: 4px;
  font-size: 10px;
  box-sizing: border-box;
}

/* ===== Status overlay (bottom-left on canvas) ===== */
.status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 10px;
  z-index: 20;
  max-width: calc(100% - 24px);
  font-size: 13px;
  /* keep readable on canvas overlay */
  color: #222;
}

/* ===== Sidebar UI (Frames/Rows) ===== */
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.frame {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.frameTitle {
  font-size: 0.95em;
  /* scales with sidebar */
  font-weight: bold;
  opacity: 0.75;
  margin-bottom: 10px;
}

.row {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 10px;
}

.row:last-child {
  margin-bottom: 0;
}

/* Frame 2 row colors */
.rowRed {
  background: #ffecec;
  padding: 10px;
  border-radius: 8px;
}

.rowBlue {
  background: #eaf4ff;
  padding: 10px;
  border-radius: 8px;
}

/* Labels & inputs (inherit sidebar font size) */
label {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  gap: 4px;
  min-width: 0;
}

input,
select {
  padding: 7px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
}

button {
  padding: 8px 10px;
  font-size: 1em;
  cursor: pointer;
}

.miniX {
  padding: 6px 10px;
  font-weight: bold;
  border-radius: 8px;
  line-height: 1;
}


/* Width ratios (Frame 1 rows) */
.w5 {
  flex: 5;
  min-width: 240px;
}

.w1 {
  flex: 1;
  min-width: 120px;
}

.w7 {
  flex: 7;
  min-width: 160px;
}

.btnWide {
  width: 100%;
}

.checkboxLabel {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 1em;
}

.tinyNote {
  font-size: 0.95em;
  opacity: 0.7;
  margin-top: 6px;
}

/* ===== FRAME 2: keep red/blue rows one line even with 4 fields ===== */
#frame2 .rowRed,
#frame2 .rowBlue {
  flex-wrap: nowrap;
  gap: 8px;
}

#frame2 .rowRed label,
#frame2 .rowBlue label {
  flex: 1 1 0;
  min-width: 0;
}

#frame2 input {
  padding: 6px;
  font-size: 1em;
  /* inherit sidebar font */
}

/* ===== FRAME 4: 4 fields per row (tight for 400px sidebar) =====
   If you want 3 per row instead, see note at bottom.
*/
#frame4 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

#frame4 .row label {
  flex: 0 0 calc((100% - 6px) / 4);
  /* 4 columns, 3 gaps => 3*2px */
  max-width: calc((100% - 6px) / 4);
  min-width: 0;
}

#frame4 input {
  width: 100%;
  padding: 6px;
  font-size: 1em;
}

/* Mobile fallback: stack sidebar on top */
@media (max-width: 900px) {
  .appLayout {
    flex-direction: column;
    height: auto;
  }

  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .stage {
    height: 70vh;
  }
}

/* --- NOTE: switch Frame 4 to 3-per-row by replacing the Frame4 label rule with:
#frame4 .row { gap: 8px; }
#frame4 .row label {
  flex: 0 0 calc((100% - 16px) / 3);
  max-width: calc((100% - 16px) / 3);
}
--- */

/* ===== Half-circle HUD (top-right overlay on canvas) ===== */
/* ===== Half-circle HUD (INLINE inside snapPanel) ===== */
.halfHudInline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.halfHudLabel {
  font-size: 10px;
  /* match snapPanel */
  opacity: 0.8;
}

.halfHudInput {
  width: 70px;
  padding: 4px;
  font-size: 10px;
  box-sizing: border-box;
}

.halfHudBtn {
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  line-height: 1;
}

/* Fix checkbox layout (Frame 3: Auto download / Cut to boundary) */
.checkboxLabel {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.checkboxLabel input[type="checkbox"] {
  width: auto !important;
  /* override input { width:100% } */
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

/* Optional: align the whole row nicer */
#frame3 .row {
  align-items: center;
  /* instead of "end" */
}


.zones-row {
  display: flex;
  flex-wrap: nowrap;
  /* ONE ROW */
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  /* nice spacing before red row */
}

.zones-row input {
  width: 60px;
  max-width: 60px;
  text-align: center;
  border: none;
  padding: 6px;
  font-size: 1em;
  box-sizing: border-box;
  color: #fff;
}

#ezones {
  background: lightcoral;
}

#rzones {
  background: lightblue;
  color: #000;
}

#czones {
  background: lightyellow;
  color: #000;
}

/* ===== Upload working overlay + 10px upload status bar ===== */
.workingOverlay {
  position: fixed;
  inset: 0;
  bottom: 10px;
  /* ✅ do NOT cover the 10px status bar */
  z-index: 9999;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  /* block clicks */
}

.workingOverlayCard {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.uploadStatusBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  line-height: 10px;
  padding: 0 8px;
  box-sizing: border-box;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Frame 1: Load + Upload on one row, auto-resize */
.wLoad {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: wrap;
  /* allows wrap if sidebar gets too narrow */
  flex: 2;
  /* takes some space in the row */
  min-width: 220px;
  /* tweak if you want */
}

/* buttons share available width */
.wLoad .btnWide {
  width: auto;
  /* override btnWide's 100% inside this area */
  flex: 1 1 120px;
  /* grow/shrink; minimum 120px each */
  margin: 0;
  /* just in case */
  white-space: nowrap;
}

/* ===== Frame 3 drag/drop hover ===== */
#frame3.dropHover {
  background: #e6ffe6;
  /* light green */
  border-color: #7ad67a;
}

.confirmModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}

.confirmModal.hidden {
  display: none;
}

.confirmCard {
  background: white;
  padding: 20px;
  border-radius: 10px;
  min-width: 300px;
  text-align: center;
}

.confirmButtons {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

#frame5 .row label {
  flex: 1 1 100%;
}

#frame5 #sendProposalEmailBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.matchedPropertyAddressLabel {
  margin-top: 4px;
  color: rgb(86, 201, 55);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

.authScreen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  z-index: 30000;
}

.authCard {
  width: 320px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.authCard h2 {
  margin-top: 0;
  margin-bottom: 16px;
}

.authCard label {
  margin-bottom: 12px;
}

.authButtons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.authMessage {
  margin-top: 12px;
  min-height: 20px;
  font-size: 13px;
  color: #c62828;
}

.sessionBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.currentUserEmail {
  font-size: 13px;
  color: #2e7d32;
  font-weight: 700;
  word-break: break-word;
}

.videoSection {
  margin-bottom: 12px;
}

.videoTitle {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.8;
}


#frame2 .checkboxLabel {
  align-self: center;
}

/* GUIDE */
.videoButtons {
  display: flex;
  gap: 6px;
  flex-direction: row;
}

.videoButtons button {
  flex: 1;
}

.guideModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25000;
}

.guideModal.hidden {
  display: none;
}

.guideCard {
  width: min(560px, calc(100vw - 40px));
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.guideHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.guideHeader h3 {
  margin: 0;
  font-size: 18px;
}

.guideCloseBtn {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.guideBody p {
  margin: 8px 0;
  line-height: 1.45;
}

.guideBody hr {
  margin: 14px 0;
  border: none;
  border-top: 1px solid #ddd;
}

@keyframes blinkBadField {

  0%,
  100% {
    box-shadow: 0 0 0 2px red;
  }

  50% {
    box-shadow: 0 0 0 2px transparent;
  }
}

.needsFixBlink {
  border: 2px solid red !important;
  animation: blinkBadField 0.7s infinite;
}