:root {
  --bg:      #f7f6f2;
  --surface: #ffffff;
  --border:  #e4e1d8;
  --text:    #1a1a1a;
  --muted:   #6b7280;
  --accent:  #e98d2f;
  --radius:  8px;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);font-family:'Inter',sans-serif;color:var(--text);font-size:14px; }

/* Header */
.bb-header { background:var(--surface);color:black;padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--accent);height:52px;flex-shrink:0; }
.bb-header-logo { width:30px;height:30px;object-fit:contain;flex-shrink:0; }
.bb-header h1 { font-family:'DM Serif Display',serif;font-size:1.6rem;margin:0;letter-spacing:-0.01em;line-height:1;font-weight:700;color:inherit; }
.bb-header h1 .cba { font-family:'Inter',sans-serif;font-size:1rem;letter-spacing:-0.01em;font-weight:500;color:rgba(0,0,0,.85);margin-left:.35rem }
.bb-header h1 .dash { font-family:'Inter',sans-serif;font-size:1rem;letter-spacing:-0.01em;font-weight:400;color:rgba(0,0,0,0.45); }
.bb-header-right { margin-left:auto;display:flex;align-items:center;gap:10px; }
.bb-info-btn { background:transparent;border:1px solid #cbd5e1;color:#374151;border-radius:6px;padding:4px 10px;font-size:0.72rem;font-family:'Azeret Mono',monospace;letter-spacing:0.06em;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all 0.15s; }
.bb-info-btn:hover { background:#f1f5f9;border-color:#94a3b8; }
.bb-last-updated { font-size:0.72rem;white-space:nowrap;display:flex;align-items:baseline;gap:0.35em; }
.bb-last-updated .lbl { font-family:'Inter',sans-serif;font-weight:500;color:#9b4040;letter-spacing:0.01em; }
.bb-last-updated .val { font-family:'Inter',sans-serif;font-weight:400;color:#9ca3af;letter-spacing:0.01em; }

/* Modal */
.bb-modal-backdrop { display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.55);backdrop-filter:blur(3px); }
.bb-modal-backdrop.open { display:flex;align-items:center;justify-content:center; }
.bb-modal { background:white;border-radius:14px;width:min(640px,92vw);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.28);animation:modal-in 0.22s ease; }
@keyframes modal-in { from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;} }
.bb-modal-header { padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.bb-modal-header h2 { font-family:'Playfair Display',serif;font-size:1.25rem;margin:0; }
.bb-modal-close-x { background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.4rem;line-height:1;padding:2px 6px;border-radius:4px; }
.bb-modal-close-x:hover { background:#f3f4f6;color:var(--text); }
.bb-modal-body { overflow-y:auto;padding:20px 24px;flex:1; }
.bb-modal-body h3 { font-family:'Inter',sans-serif;font-size:1rem;margin:16px 0 6px;color:var(--text); }
.bb-modal-body h3:first-child { margin-top:0; }
.bb-modal-body p,.bb-modal-body li { font-size:0.85rem;color:#374151;line-height:1.65;margin:4px 0; }
.bb-modal-body code { background:#f3f4f6;padding:1px 5px;border-radius:3px;font-family:'Azeret Mono',monospace;font-size:0.78rem; }
.bb-modal-callout { background:#fefce8;border:1px solid #fde68a;border-radius:8px;padding:11px 15px;margin:0 0 14px;font-size:0.85rem;color:#78350f; }
.bb-modal-footer { padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center; }
.bb-modal-cta { background:var(--accent);color:white;border:none;border-radius:8px;padding:9px 22px;font-size:0.88rem;font-weight:600;cursor:pointer;transition:opacity 0.15s; }
.bb-modal-cta:hover { opacity:0.88; }

/* Layout */
.bb-root { display:flex;flex-direction:column;height:100vh; }
.bb-body { display:flex;flex:1;overflow:hidden; }

/* Sidebar */
.bb-sidebar { width:270px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column; }
.sidebar-section { padding:12px 14px;border-bottom:1px solid var(--border); }
.sidebar-section-title { font-family:'Azeret Mono',monospace;font-size:0.63rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px; }
.sidebar-section label { font-size:0.72rem;color:var(--muted);margin-bottom:2px; }
.sidebar-section .form-control { font-size:0.72rem;border:1px solid var(--border);border-radius:var(--radius);padding:5px 8px;background:white;color:var(--text); }
.form-check { display:flex;align-items:center;gap:6px; }
.form-check-label { font-size:0.82rem; }
.confirmed-date-link { font-size:0.72rem;color:#6b7280;text-decoration:none;font-weight:600;font-family:'Azeret Mono',monospace; }
.confirmed-date-link:hover { text-decoration:underline;color:#374151; }

/* Middle */
.bb-main { flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border); }
.bb-map-wrap { height:62vh;min-height:0;position:relative; }
.bb-map-wrap .leaflet-container { height:100% !important;width:100% !important; }
#map { height:100% !important; }
.bb-bottom-table { height:38vh;min-height:0;overflow:hidden; }

/* Right */
.bb-right { height:calc(100vh - 52px);width:40%;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden; }

/* Loading */
#map-loading { position:absolute;inset:0;z-index:1000;background:rgba(247,246,242,0.82);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none; }
#map-loading.hidden { display:none; }
.map-spinner { width:36px;height:36px;border:3px solid #e4e1d8;border-top-color:#5b21b6;border-radius:50%;animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
#map-loading p { font-family:'Azeret Mono',monospace;font-size:0.72rem;color:#6b7280;margin:0; }

/* Geocoder */
.leaflet-control-geocoder { border-radius:8px !important;box-shadow:0 2px 8px rgba(0,0,0,0.12) !important; }
.leaflet-control-geocoder-form input { font-family:'Inter',sans-serif !important;font-size:0.82rem !important;border-radius:6px !important; width: 210px !important}
.leaflet-control-geocoder-alternatives { border-radius:8px !important;box-shadow:0 4px 12px rgba(0,0,0,0.14) !important; }
.leaflet-control-geocoder-alternatives li a { font-family:'Inter',sans-serif !important;font-size:0.8rem !important; }

.bb-locate-btn { width:30px !important;height:34px !important;cursor:pointer;font-size:1.2rem;line-height:30px !important;text-align:center;background:white;border:none;color:#374151;display:block; }
.bb-locate-btn:hover { background:#f1f5f9;color:#1a1a1a; }

/* Map legend */
.leaflet-control .legend-title { font-family:'Inter',sans-serif !important;font-size:0.72rem !important;font-weight:600 !important;margin-bottom:4px !important; }
.leaflet-control .legend-scale div { font-family:'Inter',sans-serif !important;font-size:0.72rem !important; }
.info.legend { font-family:'Inter',sans-serif !important;font-size:0.72rem !important;background:white;padding:8px 10px;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,0.18); }
.info.legend i { width:12px !important;height:12px !important;margin-right:4px !important;float:left;border-radius:2px; }

.leaflet-control-attribution { font-size:0.55rem !important;font-family:'Inter',sans-serif !important; }

/* DT */
table.dataTable { font-size:0.7rem !important;font-family:'Inter',sans-serif !important; }
table.dataTable thead th { font-family:'Inter', sans-serif !important;font-size:0.68rem !important;text-transform:none !important;letter-spacing:0.02em !important;color:var(--muted) !important;border-bottom:2px solid var(--border) !important;background:white !important;white-space:normal !important;line-height:1.2;vertical-align:middle;padding:4px 6px !important; }
table.dataTable tbody td { padding:3px 6px !important;vertical-align:middle !important;border-color:var(--border) !important;font-size:0.7rem !important;line-height:1.3 !important;letter-spacing:-0.02em !important; }
table.dataTable tbody tr:hover { background:#f7f6f2 !important; }
table.dataTable tbody tr.row-selected { background:#fef3c7 !important; }
.dataTables_filter input { font-size:0.8rem;border:1px solid var(--border);border-radius:var(--radius);padding:3px 7px; }
.dataTables_filter { padding:6px 8px; }
.dataTables_info { font-size:0.7rem;color:var(--muted);padding:4px 8px; }

/* DT controls */
.dataTables_filter,
.dataTables_length,
.dataTables_paginate,
.dataTables_info {
  font-family:'Azeret Mono', monospace !important;
  font-size:0.68rem !important;
  color:var(--muted) !important;
}

/* Search label */
.dataTables_filter label {
  font-size:0.68rem !important;
  margin-bottom:0 !important;
}

/* Search input */
.dataTables_filter input {
  font-family:'Inter', sans-serif !important;
  font-size:0.68rem !important;
  height:18px !important;
  padding:2px 6px !important;
  border-radius:6px !important;
  margin-left:4px !important;
}

/* Pagination buttons */
.dataTables_paginate {
  padding-top:0 !important;
  margin-top:0 !important;
  display:flex !important;
  align-items:center !important;
  height:100% !important;
}
.dataTables_paginate .paginate_button {
  font-size:0.68rem !important;
  padding:1px 6px !important;
  margin:0 1px !important;
  min-width:auto !important;
  line-height:1.4 !important;
  vertical-align:middle !important;
}

/* Current page */
.dataTables_paginate .paginate_button.current {
  border-radius:5px !important;
}

/* Showing X to X... line */
.dataTables_info {
  padding-top:.25 !important;
  display:flex !important;
  align-items:center !important;
  height:100% !important;
}

.dataTables_wrapper {
  font-family: 'Inter', sans-serif !important;
}

/* Compact top controls row */
.dataTables_wrapper .row:first-child {
  min-height:28px !important;
  align-items:center !important;
  display:flex !important;
}
.dataTables_wrapper .row:first-child > div {
  display:flex !important;
  align-items:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Species pane */
.species-pane { display:flex;flex-direction:column;height:100%;overflow:hidden; }
.block-detail-hint { display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:0.88rem;font-style:italic; }
.block-detail-header { padding:6px 12px 5px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0; }
.block-name { font-family:'Azeret Mono',monospace;font-size:0.88rem;font-weight:500;color:var(--accent); }
.block-name-link { color:var(--accent);text-decoration:none; }
.block-name-link:hover { text-decoration:underline;opacity:0.85; }
.block-county { font-size:0.74rem;color:var(--muted); }
.opacity-row { display:flex;align-items:center;gap:4px;margin-top:6px; }
.opacity-row label { font-size:0.72rem;color:var(--muted);white-space:nowrap;margin:0;flex-shrink:0; }
.opacity-row input[type=range] { flex:1;min-width:0;accent-color:var(--accent); }

/* Mini dashboard */
.block-mini-dashboard { flex-shrink:0;background:#fafaf8;border-bottom:1px solid var(--border);padding:7px 12px 6px;display:flex;flex-direction:column;gap:6px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;max-height:38vh; height: 170px}
.dash-row { display:flex;align-items:center;gap:8px;min-width:max-content; }
.dash-divider { height:1px;background:var(--border);margin:2px 0; }
.stat-chip { display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;border:1px solid var(--border);border-radius:7px;padding:3px 7px;min-width:48px;min-height:48px;text-align:center;flex-shrink:0; }
.stat-chip-value { font-family:'Azeret Mono',monospace;font-size:1rem;font-weight:600;line-height:1.1;color:#1a1a1a; }
.stat-chip-label { font-size:0.58rem;color:#6b7280;line-height:1.2;margin-top:1px;text-align:center; }
.species-table-wrap { flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0; }
.species-table-wrap .dataTables_wrapper { display:block; }
.species-table-wrap .dataTables_scrollBody { overflow-y:auto !important;overflow-x:auto !important; }
.species-table-wrap .dataTables_scrollHead { overflow:hidden !important; }
.species-table-wrap .dataTables_scrollHeadInner,
.species-table-wrap .dataTables_scrollHeadInner table { width:100% !important; }
.species-table-wrap table.dataTable td:last-child,
.species-table-wrap table.dataTable th:last-child { white-space:nowrap !important; }

/* Status pills */
.status-pill { display:inline-flex;align-items:center;gap:9px;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap; }
.status-confirmed { background:#065f46;border-color:white; }
.status-probable  { background:#CFF1E6;border-color:#059669; }
.status-possible  { background:#ecfdf5;border-color:#34d399; }
.status-observed  { background:#f8fafc;border-color:#64748b; }
.status-none      { background:#f9fafb;border-color:#9ca3af;opacity:0.55; }
.status-track { display:flex;align-items:center; }
.status-dot { width:13px;height:13px;border-radius:50%;background:white;border:2px solid #d1d5db;position:relative;z-index:2;flex-shrink:0; }
.status-dot:not(:last-child) { margin-right:10px; }
.status-dot:not(:last-child)::after { content:'';position:absolute;top:50%;left:100%;width:10px;height:2px;transform:translateY(-50%);background:#d1d5db;z-index:1; }
.filled-1 { background:#94a3b8;border-color:#64748b; }
.filled-2 { background:#6ee7b7;border-color:#34d399; }
.filled-3 { background:#10b981;border-color:#059669; }
.filled-4 { background:#065f46;border-color:white; }
.filled-1::after { background:#94a3b8 !important; }
.filled-2::after { background:#6ee7b7 !important; }
.filled-3::after { background:#10b981 !important; }
.status-dot-check::before { content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:8px;font-weight:700;line-height:1; }
.status-label { font-size:0.72rem;font-weight:600;letter-spacing:0.01em; }
.status-confirmed .status-label { color:white; }
.status-probable  .status-label { color:#059669; }
.status-possible  .status-label { color:#34d399; }
.status-observed  .status-label { color:#64748b; }
.status-none      .status-label { color:#9ca3af; }

/* Sensitive species tag */
.sensitive-tag { display:inline-flex;align-items:center;gap:3px;background:#fff1f2;color:#be123c;border:1px solid #fecdd3;border-radius:999px;padding:3px 10px;font-size:0.72rem;font-weight:600;white-space:nowrap;font-family:'Inter',sans-serif; }

/* Links */
.checklist-link { text-decoration:none;font-size:0.74rem;font-weight:400;font-family:'Azeret Mono',monospace; }
.checklist-link:hover { text-decoration:underline; }
.checklist-confirmed { color:#065f46; }
.checklist-probable  { color:#059669; }
.checklist-possible  { color:#0d9488; }
.checklist-observed  { color:#64748b; }
.species-link { color:var(--text);text-decoration:none; }
.species-link:hover { color:#5b21b6;text-decoration:underline; }
.code-link {
  text-decoration:none;
  cursor:pointer;
}
.code-link:hover span {
  text-decoration:underline;
}
.dt-nowrap { white-space:nowrap !important; }
.dt-center { text-align:center !important; }
.dt-left { text-align:left !important; }

.confirmed-date-link { text-decoration:none;font-size:0.68rem;font-weight:400;font-family:'Azeret Mono',monospace;color:#6b7280; }
.confirmed-date-link:hover { text-decoration:underline;color:#374151; }
::-webkit-scrollbar { width:4px;height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border);border-radius:4px; }