/* ===== Extra professional UI additions ===== */

    /* Bottom-right compact tool bar */
    .leaflet-bar.tool-control {
      border: 1px solid rgba(255, 215, 0, 0.85);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }
    .leaflet-bar.tool-control a {
      background: rgba(3, 58, 99, 0.95);
      color: #ffd700;
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      text-decoration: none;
      display: block;
      font-size: 16px;
      border-bottom: 1px solid rgba(255, 215, 0, 0.5);
      user-select: none;
    }
    .leaflet-bar.tool-control a:hover {
      background: rgba(3, 58, 99, 1);
    }
    .leaflet-bar.tool-control a:last-child {
      border-bottom: none;
    }

    /* Place the compact tools bar on the left, aligned with the legend */
    .leaflet-bottom.leaflet-left .leaflet-control.tool-control {
      margin-bottom: 70px; /* slightly lower to avoid covering layer/upload windows */
    }


    /* Toast notification (for non-blocking messages) */
    #toast {
      position: absolute;
      right: 10px;
      bottom: 120px;
      max-width: 340px;
      background: rgba(3, 58, 99, 0.95);
      color: #ffffff;
      border: 1px solid rgba(255, 215, 0, 0.85);
      border-radius: 10px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.28);
      padding: 10px 12px 10px 12px;
      font-size: 12px;
      line-height: 1.35;
      z-index: 1400;
      display: none;
      box-sizing: border-box;
    }
    #toast .toast-close {
      position: absolute;
      top: 6px;
      right: 10px;
      color: #ffd700;
      cursor: pointer;
      font-weight: 700;
      user-select: none;
    }
    #toast .toast-title {
      font-weight: 700;
      color: #ffd700;
      margin-bottom: 6px;
    }

    /* About + Settings panels */
    #infoPanel,
    #settingsPanel,
    #queryPanel,
    #spatialPanel,
    #printPanel,
    #coordinatePanel {
      position: absolute;
      top: 66px;
      left: 55px;  /* align with the search bar */
      width: 330px;
      max-height: 64vh;
      overflow-y: auto;
      background: rgba(3, 58, 99, 0.95);
      color: #ffffff;
      border: 1px solid #ffd700;
      border-radius: 10px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.28);
      padding: 12px 12px 10px 12px;
      z-index: 1200;
      display: none;
      box-sizing: border-box;
    }

    #infoPanel h3,
    #settingsPanel h3,
    #queryPanel h3,
    #spatialPanel h3,
    #printPanel h3,
    #coordinatePanel h3 {
      margin: 0 0 10px 0;
      font-size: 14px;
      font-weight: 700;
      color: #f1c40f;
      padding-right: 22px;
    }

    .panel-close {
      position: absolute;
      top: 8px;
      right: 10px;
      color: #f1c40f;
      cursor: pointer;
      font-size: 18px;
      line-height: 18px;
      user-select: none;
    }

    .panel-section {
      margin-bottom: 10px;
    }

    .panel-muted {
      font-size: 12px;
      line-height: 1.4;
      opacity: 0.95;
    }

    .panel-list {
      margin: 6px 0 0 18px;
      padding: 0;
      font-size: 12.5px;
      line-height: 1.35;
    }

    .panel-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 6px;
      font-size: 13px;
    }

    .panel-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .panel-btn {
      background: #ffd700;
      color: #023047;
      border: none;
      border-radius: 7px;
      padding: 7px 10px;
      font-weight: 700;
      font-size: 12.5px;
      cursor: pointer;
    }

    .panel-btn:hover {
      filter: brightness(0.95);
    }

    .panel-value {
      min-width: 44px;
      text-align: right;
      color: #ffd700;
      font-weight: 700;
    }

    #settingsPanel input[type="range"] {
      width: 100%;
    }


    /* Query panel form */
    .query-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    .query-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .query-row label {
      font-size: 12px;
      color: #ffd700;
      font-weight: 700;
    }

    .query-row select,
    .query-row input[type="text"],
    .query-row input[type="number"] {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 215, 0, 0.35);
      background: rgba(255,255,255,0.96);
      color: #023047;
      font-size: 13px;
      outline: none;
    }

    .query-row select:focus,
    .query-row input:focus {
      border-color: rgba(255, 215, 0, 0.85);
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18);
    }

    .query-inline {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .query-inline > * {
      flex: 1;
    }

    .query-check {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      user-select: none;
      margin-top: 2px;
      opacity: 0.98;
    }

    .query-check input {
      margin: 0;
    }

    .query-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .query-results {
      margin-top: 10px;
      border-top: 1px solid rgba(255, 215, 0, 0.35);
      padding-top: 8px;
      font-size: 12.5px;
      line-height: 1.35;
    }

    .query-results .result-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      color: #ffd700;
      font-weight: 700;
    }

    .query-results .result-count {
      font-size: 12px;
      opacity: 0.95;
      font-weight: 700;
      color: #ffffff;
    }

    .query-results .result-item {
      margin-top: 6px;
      padding: 7px 8px;
      border: 1px solid rgba(255, 215, 0, 0.28);
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
      cursor: pointer;
    }

    .query-results .result-item:hover {
      background: rgba(255,255,255,0.14);
    }

    .query-badge {
      display: inline-block;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(255, 215, 0, 0.16);
      border: 1px solid rgba(255, 215, 0, 0.35);
      color: #ffd700;
      margin-left: 6px;
      white-space: nowrap;
    }



    /* Spatial filter + draw/edit panel */
    #spatialPanel .spatial-help {
      font-size: 12.5px;
      line-height: 1.4;
      opacity: 0.96;
      margin-bottom: 9px;
    }
    #spatialPanel .spatial-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 8px;
    }
    #spatialPanel .spatial-row label {
      font-size: 12px;
      color: #ffd700;
      font-weight: 700;
    }
    #spatialPanel select,
    #spatialPanel input[type="text"],
    #spatialPanel input[type="number"] {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 215, 0, 0.35);
      background: rgba(255,255,255,0.96);
      color: #023047;
      font-size: 13px;
      outline: none;
    }
    #spatialPanel .spatial-inline {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    #spatialPanel .spatial-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    #spatialPanel .spatial-summary {
      margin-top: 10px;
      border-top: 1px solid rgba(255, 215, 0, 0.35);
      padding-top: 8px;
      font-size: 12.5px;
      line-height: 1.35;
    }
    #spatialPanel .spatial-layer-row {
      margin-top: 6px;
      padding: 7px 8px;
      border: 1px solid rgba(255, 215, 0, 0.28);
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
    }
    #spatialPanel .spatial-layer-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-weight: 700;
      color: #ffd700;
    }
    #spatialPanel .spatial-samples {
      margin-top: 4px;
      opacity: 0.95;
      font-size: 12px;
    }
    #spatialPanel .spatial-badge {
      display: inline-block;
      border-radius: 999px;
      padding: 2px 7px;
      border: 1px solid rgba(255, 215, 0, 0.45);
      background: rgba(255, 215, 0, 0.14);
      color: #ffffff;
      font-size: 11.5px;
      white-space: nowrap;
    }
    #spatialPanel .spatial-note {
      font-size: 11.5px;
      opacity: 0.9;
      margin-top: 6px;
    }
    .leaflet-draw-toolbar a {
      background-color: rgba(255,255,255,0.95) !important;
    }
    /* Make attribution readable above the credit bar */
    .leaflet-control-attribution {
      background: rgba(255,255,255,0.85);
      border-radius: 6px;
      padding: 2px 6px;
      margin-bottom: 52px;
    }


    /* Coordinate jump panel */
    #coordinatePanel .coord-go-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }
    #coordinatePanel .coord-go-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    #coordinatePanel .coord-go-row label {
      font-size: 12px;
      color: #ffd700;
      font-weight: 700;
    }
    #coordinatePanel input[type="text"],
    #coordinatePanel input[type="number"] {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 215, 0, 0.35);
      background: rgba(255,255,255,0.96);
      color: #023047;
      font-size: 13px;
      outline: none;
    }
    #coordinatePanel input:focus {
      border-color: rgba(255, 215, 0, 0.85);
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18);
    }
    #coordinatePanel .coord-inline {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    #coordinatePanel .coord-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .coordinate-target-marker {
      pointer-events: none;
    }

    /* Print: hide interactive controls but keep title/credit/legend */
    @media print {
      .leaflet-control-container {
        display: none !important;
      }
      #infoPanel,
      #settingsPanel,
      #queryPanel,
      #spatialPanel,
      #printPanel,
      #coordinatePanel {
        display: none !important;
      }
      body {
        margin: 0;
      }
      #map {
        height: 100vh !important;
      }
    }