/* Styling for the widgets in widgets.js: Draw, Bookmarks, Share, Attribute
   Table. Kept separate from app.css so the shell chrome stays readable. */

/* ---- shared small controls ---- */
.wab-btn{
  border:1px solid var(--border-2); background:#fff; color:var(--ink);
  font-family:inherit; font-size:12px; font-weight:600; padding:6px 10px;
  border-radius:6px; cursor:pointer; transition:.15s;
}
.wab-btn:hover{ border-color:var(--wab-purple); color:var(--wab-purple); }
.wab-btn-danger:hover{ border-color:#c0392b; color:#c0392b; }

.wab-toast{
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%);
  z-index:2200; background:rgba(26,37,49,.94); color:#fff;
  font-size:12.5px; padding:9px 15px; border-radius:999px;
  box-shadow:var(--shadow-lg); opacity:1; transition:opacity .35s;
  max-width:min(90vw,420px); text-align:center;
}
.wab-toast.out{ opacity:0; }

/* ---- Draw widget ---- */
.wab-dw-modes{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.wab-dw-mode{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid var(--border); background:#fff; color:var(--ink-2);
  border-radius:7px; padding:7px 2px; cursor:pointer; font-family:inherit;
  font-size:10.5px; font-weight:600; transition:.15s;
}
.wab-dw-mode:hover{ border-color:var(--wab-purple-2); color:var(--wab-purple); }
.wab-dw-mode.active{ border-color:var(--wab-purple); background:#f0ecf5; color:var(--wab-purple); }

.wab-dw-textwrap{ display:none; margin-top:8px; }
.wab-dw-textwrap.on{ display:block; }
.wab-dw-text{
  width:100%; box-sizing:border-box; border:1px solid var(--border-2);
  border-radius:6px; padding:7px 9px; font-family:inherit; font-size:12.5px;
  color:var(--ink); outline:none;
}
.wab-dw-text:focus{ border-color:var(--wab-purple); }

.wab-dw-colours{ display:flex; gap:6px; margin:9px 0 0; }
.wab-dw-colour{
  width:22px; height:22px; border-radius:50%; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--border-2); cursor:pointer; padding:0;
}
.wab-dw-colour.active{ box-shadow:0 0 0 2px var(--wab-purple); }

.wab-dw-hint{ font-size:11.5px; color:var(--ink-3); margin:9px 0 4px; line-height:1.45; }

.wab-dw-list{ display:flex; flex-direction:column; gap:1px; margin:4px 0 9px; }
.wab-dw-empty{ font-size:12px; color:var(--ink-3); padding:6px 2px; }
.wab-dw-row{ display:flex; align-items:center; gap:8px; padding:4px 2px; border-radius:5px; }
.wab-dw-row:hover{ background:#f3f0f8; }
.wab-dw-dot{ flex:0 0 auto; width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.wab-dw-name{
  flex:1 1 auto; font-size:12.5px; color:var(--ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wab-dw-name:hover{ color:var(--wab-purple); }
.wab-dw-del{
  flex:0 0 auto; width:20px; height:20px; padding:0; border:0; border-radius:5px;
  background:transparent; color:var(--ink-3); font-size:16px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.wab-dw-del:hover{ background:#f6dcd8; color:#c0392b; }

.wab-dw-actions{ display:flex; flex-wrap:wrap; gap:6px; }

/* Text annotations on the map. */
.leaflet-marker-icon.wab-dw-textmark{
  background:transparent; border:0; width:auto !important; height:auto !important;
  white-space:nowrap; font-weight:700; font-size:13px;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 5px #fff;
}

/* Active drawing tool: mark the toolbar button so it is obvious why clicks on
   the map are being captured. */
.wab-tool.drawing svg{ box-shadow:0 0 0 3px rgba(91,44,134,.35),0 2px 8px rgba(0,0,0,.3); }

/* ---- Bookmarks ---- */
.wab-bm-list{ display:flex; flex-direction:column; gap:1px; }
.wab-bm-group{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink-3); margin:9px 0 3px;
}
.wab-bm-group:first-child{ margin-top:0; }
.wab-bm-row{
  display:flex; align-items:center; gap:6px; width:100%; text-align:left;
  border:0; background:transparent; font-family:inherit; font-size:12.5px;
  color:var(--ink); padding:6px 4px; border-radius:6px; cursor:pointer;
}
.wab-bm-row:hover{ background:#f3f0f8; color:var(--wab-purple); }
.wab-bm-row--saved{ cursor:default; padding:0 4px 0 0; }
.wab-bm-row--saved:hover{ background:transparent; }
.wab-bm-goto{
  flex:1 1 auto; text-align:left; border:0; background:transparent;
  font-family:inherit; font-size:12.5px; color:var(--ink);
  padding:6px 4px; border-radius:6px; cursor:pointer;
}
.wab-bm-goto:hover{ background:#f3f0f8; color:var(--wab-purple); }
.wab-bm-add{ display:flex; gap:6px; margin-top:10px; }
.wab-bm-name{
  flex:1 1 auto; min-width:0; border:1px solid var(--border-2); border-radius:6px;
  padding:6px 8px; font-family:inherit; font-size:12px; color:var(--ink); outline:none;
}
.wab-bm-name:focus{ border-color:var(--wab-purple); }

/* ---- Attribute table (bottom sheet) ---- */
.wab-attrbtn{
  position:fixed; right:14px; bottom:24px; z-index:1200;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(40,40,40,.85); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.3); backdrop-filter:blur(4px);
}
.wab-attrbtn:hover{ background:var(--wab-purple); transform:translateY(-1px); }
.wab-attrbtn.active{ background:var(--wab-purple); }

.wab-attr{
  position:fixed; left:0; right:0; bottom:0; z-index:1350; height:40vh;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(31,20,45,.16);
  display:none; flex-direction:column;
}
.wab-attr.open{ display:flex; }
.wab-attr-head{
  display:flex; align-items:center; gap:10px;
  background:var(--wab-purple); color:#fff; padding:8px 12px;
  font-size:13px; font-weight:700;
}
.wab-attr-title{ flex:0 0 auto; }
.wab-attr-select{
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  border:0; border-radius:6px; padding:5px 8px; background:#fff; cursor:pointer;
  max-width:60vw;
}
.wab-attr-count{ flex:1 1 auto; font-size:11.5px; font-weight:500; opacity:.9; }
.wab-attr-close{
  flex:0 0 auto; border:0; background:transparent; color:#fff;
  font-size:22px; line-height:1; cursor:pointer; opacity:.85; padding:0 2px;
}
.wab-attr-close:hover{ opacity:1; }
.wab-attr-scroll{ flex:1 1 auto; overflow:auto; }

.wab-attr-table{ border-collapse:collapse; width:100%; font-size:12.5px; }
.wab-attr-table th{
  position:sticky; top:0; z-index:1; background:#f3f0f8; color:var(--ink-2);
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:8px 12px; white-space:nowrap; cursor:pointer;
  border-bottom:1px solid var(--border);
}
.wab-attr-table th:hover{ color:var(--wab-purple); }
.wab-attr-table td{
  padding:7px 12px; border-bottom:1px solid var(--border); color:var(--ink);
  vertical-align:top; max-width:340px;
}
.wab-attr-table tbody tr{ cursor:pointer; }
.wab-attr-table tbody tr:hover{ background:#f7f5fb; }
.wab-attr-null{ color:var(--ink-3); }

@media (max-width:700px){
  /* lifted clear of the widget toolbar, whose labels reach the corner at
     this width */
  .wab-attrbtn{ width:38px; height:38px; right:8px; bottom:84px; }
  .wab-attr{ height:52vh; }
  .wab-attr-head{ flex-wrap:wrap; }
  .wab-attr-count{ flex:0 0 auto; }
  .wab-toast{ bottom:100px; }
  .wab-dw-modes{ grid-template-columns:repeat(4,1fr); }
}