/* ==================================================================
   Dynamic Menu Coloring (Connects project-edit settings to UI)
   ================================================================== */

/* 1. Round Buttons (Classic Theme) */
.controls button,
.round-btn {
    /* Use the custom color if set, otherwise default to Blue (#0d6efd) */
    background-color: var(--btn-color, #0d6efd) !important;
    border-color: var(--btn-color, #0d6efd) !important;
    color: #ffffff !important; /* Icon always white */
}

/* Logo buttons — transparent, no chrome, just the image.
   Must beat .controls button (0,1,1), #button-panel button (1,0,1),
   and #sidebar .sidebar-btn (1,1,0) specificity. */
.menu-logo-btn,
.controls .menu-logo-btn,
#button-panel .menu-logo-btn,
#sidebar .menu-logo-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 20px !important;
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

/* 2. Pill Buttons (Text Theme) */
#button-panel button, 
.gbtn {
    /* Use the custom color if set, otherwise default to Green (#198754) */
    background-color: var(--btn-color, #198754) !important;
    border-color: var(--btn-color, #198754) !important;
    color: #ffffff !important;
}

/* 3. Hover Effects (Optional: Darken slightly) */
.controls button:hover, 
#button-panel button:hover {
    filter: brightness(0.9);
}


/* ==================================================================
   Classic Round Button Styling
   ================================================================== */


/* Restoring Round Buttons for Classic Theme */
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.2); /* Subtle glass effect */
  padding: 10px;
  border-radius: 30px;
}

.round-btn {
  width: 50px;
  height: 50px;
  border-radius: 50% !important; /* Forces the circle */
  border: none;
  background-color: var(--btn-color, #0d6efd);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

.round-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.round-btn i {
  font-size: 1.4rem;
}


/* ─────────────────────────────────────────────
   Menu hover labels (Map View)
   ───────────────────────────────────────────── */

.round-btn {
  position: relative;
}

.menu-hover-label {
  position: absolute;
  left: 110%;
  top: 50%;
  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-in-out;

  z-index: 1000;
}

/* show label only on hover */
.round-btn:hover .menu-hover-label {
  opacity: 1;
}


/* ==================================================================
   Text Menu (Pill Buttons)
   ================================================================== */

#button-panel .menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between buttons */
    padding: 10px;
}

/* Text Menu Button — default is rounded rectangle (matches live/blue server).
   Pill shape (50px) is applied only when data-ui-motif="pill" is set explicitly. */
.gbtn {
    all: unset; /* Clear the dark box styling */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px !important;
    border-radius: 8px;
    background-color: var(--btn-color, #0d6efd) !important;
    color: white !important;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}

/* Pill motif — full pill shape */
html[data-ui-motif="pill"] .gbtn {
    border-radius: 50px !important;
}

.gbtn:hover {
    filter: brightness(1.1);
    transform: translateX(4px); /* Subtle nudge on hover */
}

.gbtn i {
    font-size: 1.1rem;
}

/* ---------------- */

/* ==================================================================
   Modal Heading Sizes
   TinyMCE content often uses <h2>/<h3> in welcome, legend, exit
   modals. Cap them so they don't blow out at Bootstrap's default size.
   Matches the live/blue server appearance.
   ================================================================== */
.modal-content h2,
.modal-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Never allow stacked modal backdrops */
.modal-backdrop + .modal-backdrop {
  display: none !important;
}

/* Utility */
.hidden {
  display: none !important;
}


/* ── Cursor States ──────────────────────────────────── */
/* Default: grab/grabbing for panning                    */
#map .mapboxgl-canvas                        { cursor: grab; }
#map .mapboxgl-canvas:active                 { cursor: grabbing; }

/* Drawing/placing mode: crosshair                       */
#map.cursor-crosshair .mapboxgl-canvas       { cursor: crosshair !important; }

/* Hovering a clickable feature: pointer                 */
#map.cursor-pointer .mapboxgl-canvas         { cursor: pointer !important; }


/* ==================================================================
   Corner Style Motif: Pill vs Rounded
   Controlled by data-ui-motif="pill" | "rounded" on <html>
   Affects: text banner, text buttons (.gbtn), round icon buttons (.round-btn)
   Does NOT affect the sidebar topbar — that is always a full-width bar.
   ================================================================== */

/* ---- PILL MOTIF (default) ---- */
/* Text banner, .gbtn, .round-btn already default to pill/circle shapes
   in their base CSS — no overrides needed here. */

/* ---- ROUNDED MOTIF ---- */

/* Text buttons (gbtn) — pill → rounded rectangle */
html[data-ui-motif="rounded"] .gbtn {
  border-radius: 14px !important;
}

/* Classic round icon buttons — circle → rounded square */
html[data-ui-motif="rounded"] .round-btn {
  border-radius: 14px !important;
}

/* Classic controls container — pill → rounded rectangle */
html[data-ui-motif="rounded"] .controls {
  border-radius: 18px;
}

/* Text banner title — pill → rounded rectangle */
html[data-ui-motif="rounded"] .banner.banner--text {
  border-radius: 14px !important;
}