*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  font-family:Tahoma,Arial,sans-serif;font-size:11px;color:#000;}

:root{
  --chrome:#ECE9D8;
  --chrome-dark:#D4D0C8;
  --border:#8C8C8C;
  --border-light:#FFFFFF;
  --winblue:#316AC5;
  --winblue-dark:#1D4C9B;
  --residential:#5E7A96;
  --commercial:#C9A056;
  --industrial:#8A8578;
  --agricultural:#7A9B57;
  --government:#8B5E6B;
  --marine:#3F6B8A;
  --vacant:#B0AA96;
  --recreation:#6B9B7A;
  --county:#7A2E2E;
  --municipality:#2E4A7A;
}

#app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--chrome);}

.menubar{
  background:var(--chrome);border-bottom:1px solid var(--border);
  padding:2px 6px;display:flex;gap:14px;flex:none;
}
.menubar span{padding:2px 4px;cursor:default;}
.menubar span:hover{background:var(--winblue);color:#fff;}

.toolbar{
  background:var(--chrome);border-bottom:1px solid var(--border);
  padding:3px 6px;display:flex;align-items:center;gap:2px;flex:none;
}
.tsep{width:1px;height:20px;background:var(--border);margin:0 6px;}
.tbtn{
  display:flex;align-items:center;gap:4px;
  background:var(--chrome);border:1px solid transparent;border-radius:2px;
  padding:3px 7px;cursor:pointer;font-family:inherit;font-size:11px;color:#000;
}
.tbtn svg{width:16px;height:16px;flex:none;}
.tbtn:hover{border-color:var(--border);background:#F5F4EE;}
.tbtn:active{background:var(--chrome-dark);border-color:var(--border);}

.workspace{flex:1;display:flex;min-height:0;}

.toc{
  width:260px;flex:none;background:#fff;border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0;
}
.toc-head{
  background:var(--chrome-dark);border-bottom:1px solid var(--border);border-top:1px solid var(--border);
  padding:3px 8px;font-weight:bold;
}
.toc-tree{padding:6px 8px;border-bottom:1px solid var(--border);}
.toc-layer{display:flex;align-items:center;gap:5px;padding:2px 0;}
.toc-caret{width:10px;display:inline-block;font-family:monospace;color:#555;}
.toc-layer-name{font-weight:bold;}
.toc-legend{margin-left:24px;}
.toc-swatch-row{display:flex;align-items:center;gap:6px;padding:1px 0;}
.swatch{width:12px;height:12px;border:1px solid #555;flex:none;}
.swatch.residential{background:var(--residential);}
.swatch.commercial{background:var(--commercial);}
.swatch.industrial{background:var(--industrial);}
.swatch.agricultural{background:var(--agricultural);}
.swatch.government{background:var(--government);}
.swatch.marine{background:var(--marine);}
.swatch.vacant{background:var(--vacant);}
.swatch.recreation{background:var(--recreation);}
.swatch.county{background:#fff;border-color:var(--county);border-width:2px;}
.swatch.municipality{background:#fff;border-color:var(--municipality);border-width:2px;}

.search-input{
  margin:6px 8px;padding:3px 5px;border:1px solid var(--border);font-family:inherit;font-size:11px;
}
.attr-table-wrap{flex:1;overflow-y:auto;border-top:1px solid var(--border);}
.attr-table{width:100%;border-collapse:collapse;font-size:11px;}
.attr-table thead th{
  background:var(--chrome-dark);border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  text-align:left;padding:3px 6px;position:sticky;top:0;
}
.attr-table tbody tr{cursor:pointer;border-bottom:1px solid #E5E5E5;}
.attr-table tbody tr:nth-child(even){background:#F3F6FB;}
.attr-table tbody tr:hover{background:#DCE7F7;}
.attr-table td{padding:3px 6px;border-right:1px solid #E5E5E5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.attr-table .dot{width:8px;height:8px;display:inline-block;border:1px solid #555;}
.empty-row td{color:#777;font-style:italic;}

.map-wrap{flex:1;position:relative;min-width:0;}
#map{position:absolute;inset:0;background:#0E1A22;}

/* z-index 900: above Leaflet's own panes (tile 200 / overlay 400 / shadow 500 /
   marker 600 / tooltip 650 / popup 700) so vertex handles and labels never cover this */
.draw-hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:900;
  background:#FFFFE1;border:1px solid #000;padding:4px 10px;font-size:11px;
}

.edit-shape-bar{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:900;
  background:#FFFFE1;border:1px solid #000;padding:4px 8px;font-size:11px;
  display:flex;align-items:center;gap:8px;max-width:90%;
}
/* display:flex above has the same specificity as the browser's own [hidden]{display:none}
   and comes later in the cascade, so it silently wins and the bar never actually hides -
   this restores hidden's precedence with a more specific selector. */
.edit-shape-bar[hidden]{display:none;}
.edit-shape-bar .wbtn{margin-left:0;}

.statusbar{
  flex:none;background:var(--chrome);border-top:1px solid var(--border);
  padding:2px 8px;display:flex;gap:10px;font-size:11px;
}
.statusbar-sep{color:#999;}

/* classic Windows dialog */
.dlg-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.25);}
.dlg{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;
  width:360px;background:var(--chrome);border:1px solid #000;
  box-shadow:2px 2px 8px rgba(0,0,0,0.4);font-size:11px;
}
.dlg-titlebar{
  background:linear-gradient(to bottom, var(--winblue), var(--winblue-dark));
  color:#fff;font-weight:bold;padding:4px 4px 4px 8px;
  display:flex;align-items:center;justify-content:space-between;
}
.dlg-x{
  background:var(--chrome);border:1px solid #000;color:#000;font-size:12px;line-height:1;
  width:18px;height:16px;cursor:pointer;
}
.dlg-body{padding:10px;background:var(--chrome);}
.dlg-grid{width:100%;border-collapse:collapse;}
.dlg-grid td{padding:3px 4px;}
.dlg-label{width:70px;text-align:right;padding-right:8px;}
.dlg-grid input, .dlg-grid select, .dlg-grid textarea{
  width:100%;font-family:inherit;font-size:11px;border:1px solid var(--border);padding:2px 3px;
  background:#fff;
}
.dlg-grid textarea{resize:vertical;}
.dlg-grid tr[hidden]{display:none;}
.dlg-meta{margin-top:6px;color:#555;font-size:10px;}

.dlg-actions{
  display:flex;align-items:center;padding:8px 10px;background:var(--chrome);border-top:1px solid var(--border);
}
.wbtn{
  font-family:inherit;font-size:11px;padding:4px 14px;margin-left:6px;
  background:var(--chrome);border:1px solid #6B6B6B;border-radius:2px;cursor:pointer;
}
.wbtn:hover{border-color:#000;}
.wbtn-default{font-weight:bold;border-color:#000;}

.statusbar-link{color:var(--winblue);cursor:pointer;text-decoration:underline;}
.statusbar-link:hover{color:var(--winblue-dark);}

/* login gate sits above every other modal - blocks the whole app until authenticated */
.login-backdrop{z-index:5000;background:var(--chrome);}
#loginPanel{z-index:5001;}
#loginPanel[hidden]{display:none;}
.login-copy{margin:0 0 8px;}
.login-password{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:11px;
  border:1px solid var(--border);padding:3px 5px;background:#fff;
}
.login-error{color:#900;margin-top:6px;font-size:11px;min-height:14px;}

.leaflet-container{background:#0E1A22;font-family:Tahoma,Arial,sans-serif;}

/* classic ArcMap-style sketch tool while actively drawing */
/* Leaflet.Draw's own guide is a trail of small unrotated square divs, not an
   actual dashed line - hidden here in favor of a real dashed L.polyline. */
.leaflet-draw-guide-dash{display:none !important;}
.leaflet-editing-icon, .leaflet-div-icon{
  background:transparent !important;border:none !important;border-radius:0 !important;
  width:20px !important;height:20px !important;margin-left:-10px !important;margin-top:-10px !important;
  box-shadow:none !important;position:absolute !important;
}
.leaflet-editing-icon::after, .leaflet-div-icon::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;background:#fff;border:1px solid #000;
}
.leaflet-mouse-marker{opacity:0 !important;}
.leaflet-draw-tooltip{
  background:#ECE9D8;color:#000;border:1px solid #000;border-radius:2px;
  font-family:Tahoma,Arial,sans-serif;font-size:11px;padding:3px 7px;
}
.leaflet-draw-tooltip:before{border-right-color:#000;}

.parcel-label{
  background:rgba(255,255,255,0.88);border:1px solid #555;border-radius:2px;
  padding:1px 5px;font-size:10px;line-height:1.35;color:#000;white-space:nowrap;
  box-shadow:none;text-align:center;
}
.parcel-label::before{display:none;}
.parcel-label .lbl-addr{font-weight:bold;display:block;}
.parcel-label .lbl-owner{display:block;color:#333;}

.boundary-label{
  background:none !important;border:none !important;box-shadow:none;padding:0;
  font-weight:bold;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;
  text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 0 0 4px #fff;
}
.boundary-label::before{display:none;}
.boundary-label.type-county{color:var(--county);}
.boundary-label.type-municipality{color:var(--municipality);}