@import url('css/variables.css');
.toggles{display:flex;gap:8px;margin-top:8px}
.toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border-primary);background:var(--bg-elev-1);color:var(--ink);border-radius:10px;cursor:pointer}
.toggle.off{opacity:.55;filter:saturate(.7)}
.toggle .eye{width:14px;height:14px;display:inline-block;background-repeat:no-repeat;background-size:14px 14px}
/* eye open */
.toggle .eye{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>")}
/* eye closed */
.toggle.off .eye{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b2d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.77 21.77 0  0 1 5.06-5.94M1 1l22 22'/><path d='M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 2.12-.88'/></svg>")}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.app{display:grid;grid-template-columns:1fr var(--panel-width, 420px);height:100%}
#map{height:100%;width:100%;background:var(--bg); position:relative; z-index:0}
.map-wrap{ position:relative; z-index:0 }
/* Dim only base map tiles, keep overlays/dots fully opaque */
.leaflet-tile-pane { opacity: 0.6; }
.panel{position:relative;background:var(--panel);height:100vh;overflow-y:hidden;overflow-x:visible;min-width:420px; z-index: 3000;}
.panel-scroll{ position:relative; height:100%; overflow:auto; }
.report-toast-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,27,56,0.1);
  opacity:0;
  transition:opacity 180ms ease;
  z-index:5000;
  pointer-events:none;
}
.report-toast-overlay.visible{
  opacity:1;
}
.report-toast-card{
  backdrop-filter:blur(12px);
  background:rgba(19,32,64,0.92);
  color:#f4f6ff;
  padding:18px 28px;
  border-radius:16px;
  border:1px solid rgba(114,137,255,0.35);
  box-shadow:0 18px 44px rgba(12,18,36,0.45);
  max-width:420px;
  font-size:15px;
  text-align:center;
  pointer-events:auto;
}
.panel-resize{
  /* Animated sizing variables */
  --handle-full-w: 15px;
  --handle-w: var(--handle-full-w);
  --handle-h: 30px;

  position:fixed; /* center relative to viewport height */
  right: calc(var(--panel-width, 420px) - (var(--handle-w) / 2)); /* keep handle center on panel edge */
  top: 50%;
  width: var(--handle-w);
  height: var(--handle-h);
  cursor: ew-resize;
  border-radius: 8px;
  z-index: 4000; /* above map and HUD */
  pointer-events:auto;
  will-change: transform, opacity, width, right;
  transform: translateY(-50%);
  transition: width 160ms ease, right 160ms ease, transform 160ms ease, filter 120ms ease;
  /* Match icon button style */
  background-color: var(--bg-elev-1);
  border: 1px solid var(--border-panel);
  color: var(--border-panel); /* light gray dots */
  /* No SVGs — draw dots via pseudo-element */
}
.panel-resize::before{
  content:''; position:absolute; left:50%; top:50%; width:4px; height:4px;
  margin:-2px 0 0 -2px; border-radius:50%; background: currentColor;
  transition: box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.panel-resize:not(:hover):not(.dragging){
  /* Initial state: pill at 60% width */
  --handle-w: calc(var(--handle-full-w) * 0.6);
}
.panel-resize:not(:hover):not(.dragging)::before{
  /* Initial state: single dot at 60% of base size */
  width: calc(4px * 0.6);
  height: calc(4px * 0.6);
  margin: calc(4px * -0.3) 0 0 calc(4px * -0.3);
  box-shadow:none;
}
.panel-resize:hover{ transform: translateY(-50%) scale(1.03); }
.panel-resize.dragging{ transform: translateY(-50%) scale(0.98); transition: none; }
.panel-resize:hover::before, .panel-resize.dragging::before{ box-shadow: 0 -6px 0 0 currentColor, 0 6px 0 0 currentColor; }

/* collapse-handle triangles removed; dots drawn via .panel-resize::before */
.panel header{position:static; top:auto; background:linear-gradient(var(--header-grad-from),var(--header-grad-to)); border-bottom:1px solid var(--border-panel); padding:14px 16px; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.sticky-top{position:sticky; top:0; z-index:2; background:var(--panel); overflow:visible}
.panel header h2{margin:0;font-size:calc(16px * 1.3)}
.title-row{ display:flex; align-items:center; gap:8px; }
.header-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.header-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.header-right{ position:relative; }
.panel header{ margin-top:4px; }
.panel header .header-actions{ display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.icon-btn{ appearance:none; border:1px solid var(--border-primary); background:var(--bg-elev-1); color:var(--ink); width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: transform 120ms ease, box-shadow 180ms ease, filter 120ms ease; }
.icon-btn.pulse{ animation: btnPulse 220ms ease; }
.icon-btn:hover{ filter:brightness(1.05); }
.icon-btn:active{ transform: translateY(1px) scale(0.97); }
.icon-btn.pulse{ animation: btnPulse 220ms ease; }
.icon-btn.icon-btn--toggle{ width:auto; min-width:0; padding:0 10px; gap:6px; justify-content:flex-start; }
.icon-btn.icon-btn--toggle span{ font-size:12px; line-height:1; color:inherit; }
.icon-btn.icon-btn--toggle svg{ width:18px; height:18px; }
.icon-btn.icon-btn--toggle.active{ background:var(--bg-elev-2); border-color:var(--border-strong); color:var(--text-accent); }
@keyframes btnPulse { 0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(64,128,255,0); } 50%{ transform:scale(0.94); box-shadow:0 0 0 6px color-mix(in oklab, var(--accent) 20%, transparent); } 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(64,128,255,0); } }
/* Compact icon button variant for inline copy actions */
.icon-btn--copy{ width:26px; height:26px; border-radius:7px; color:#bcd0ff; align-self:flex-start; margin-top:-5px; }

/* Presence popup */
.presence-popup{ position:absolute; right:0; top:36px; min-width:220px; background:var(--bg-elev-2); border:1px solid var(--border-panel); border-radius:10px; box-shadow:0 6px 20px var(--shadow-strong); z-index:5000; padding:8px 10px; }
.presence-popup.hidden{ display:none; }
.presence-popup .presence-title{ font-weight:600; color:var(--text-strong); margin:0 0 6px; font-size:12px; }
.presence-popup .presence-list{ list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.presence-popup .presence-item{ padding:6px 4px; border-bottom:1px solid var(--border-panel); font-size:12px; color:var(--ink); }
.presence-popup .presence-item:last-child{ border-bottom:none; }
.presence-popup .presence-name{ font-weight:500; color:var(--text-strong); }
.presence-popup .presence-email{ color:var(--muted); font-size:11px; }
.presence-popup .presence-empty{ color:var(--muted); font-size:12px; padding:4px 2px; }

/* Report Issue modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter: blur(2px); z-index:6000; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-card{ width:min(640px, 92vw); background:var(--bg-elev-2); border:1px solid var(--border-panel); border-radius:12px; box-shadow:0 12px 28px var(--shadow-strong); padding:14px; color:var(--ink); }
.modal-card h3{ margin:0 0 10px; font-size:16px; color:var(--text-strong); }
.modal-body{ display:flex; flex-direction:column; gap:10px; }
.modal-row{ display:flex; flex-direction:column; gap:6px; }
.modal-row label{ font-size:12px; color:var(--muted); }
.modal-row input[type="text"], .modal-row textarea{ width:100%; box-sizing:border-box; background:var(--bg-elev-1); color:var(--ink); border:1px solid var(--border-primary); border-radius:10px; padding:8px 10px; font: inherit; }
.modal-row.compact{ gap:2px; }
.modal-row.compact .modal-value{ padding:4px 0; }
.modal-value{ padding:8px 0; color:var(--muted); font-size:14px; }
.modal-row textarea{ min-height:110px; resize:vertical; }
.modal-footer{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px; }
.btn.secondary{ background:transparent; color:var(--ink); }
.section{padding:12px 16px}
.panel .section{overflow:visible}
.list{display:grid;gap:10px}
.panel .selection-bar,
.panel .list-group-title,
.panel .section,
.panel header,
.panel .sticky-top{ grid-column: 1 / -1; }

/* Two-column layout toggle via JS-added class */
.panel.two-cols .list{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.panel.two-cols .card,
.panel.two-cols .list-row{ grid-column: auto; width:100%; box-sizing:border-box; }
.panel.two-cols .card{ width:100%; box-sizing:border-box; }
.panel .meta, .panel .value-text, .panel .row-name{ white-space: normal; overflow-wrap:anywhere; word-break: break-word; }
.panel.two-cols .selection-bar,
.panel.two-cols .list-group-title,
.panel.two-cols .section,
.panel.two-cols header,
.panel.two-cols .sticky-top{ grid-column: 1 / -1; }
.card{background:var(--bg-elev-2);border:1px solid var(--border-panel);border-radius:12px;padding:12px;cursor:pointer;position:relative;overflow:hidden}
.card:hover{border-color:var(--accent)}
.card .pin-btn{
  position:absolute; top:8px; right:8px;
  appearance:none; border:none; background:transparent; color:var(--ink);
  cursor:pointer; padding:0; margin:0;
}
.card .pin-btn:hover{ filter:brightness(1.05); }
.card .share-btn{
  position:absolute; top:8px; right:8px;
  appearance:none; border:none; background:transparent; color:var(--tint-soft-link);
  cursor:pointer; padding:0; margin:0; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
}
.card .share-btn svg{ width:18px; height:18px; opacity:0.9; }
.card .share-btn:active{ transform: translateY(1px); }
/* removed pin visuals */
.card h4{margin:0 0 4px;font-size:14px;color:var(--text-strong)}
.card h4 a{ color: inherit; text-decoration: none; }
.card h4 a:hover, .card h4 a:focus{ text-decoration: underline; }
.card .card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .meta{color:var(--muted);font-size:12px}
.card.inactive{ border:2px solid hwb(330 12% 29%) !important; }
.card .tag{display:inline-block;font-size:10px;color:var(--tint-soft-blue);border:1px solid var(--border-strong);padding:2px 6px;border-radius:999px;margin-right:6px}
.chip{appearance:none;border:1px solid var(--border-primary);background:var(--bg-elev-1);color:var(--ink);padding:8px 16px;border-radius:9999px;cursor:pointer}
.chip[disabled]{opacity:0.6;cursor:default}
.search{width:100%; box-sizing:border-box; background:var(--bg-elev-1); border:1px solid var(--border-primary); color:var(--ink); padding:10px 12px; border-radius:10px; outline:none}
.search::placeholder{color:var(--tint-placeholder)}
.btn{appearance:none;border:1px solid var(--border-primary);background:var(--bg-elev-1);color:var(--ink);padding:8px 12px;border-radius:10px;cursor:pointer}
.divider{height:1px;background:var(--divider-deep);margin:13px 0 17px}
/* Card-specific dividers take business color */
.card .divider{ height:3px; margin:13px 0 17px; border-radius:999px; background:var(--divider-deep); }
.card.biz-therapie .divider{ background: var(--biz-thc); }
.card.biz-optilase .divider{ background: var(--biz-opt); }
.card.biz-fertility .divider{ background: var(--biz-fer); }
.field-row{display:flex;align-items:flex-start;gap:18px;color:var(--muted);font-size:14px}
.field-row + .field-row { margin-top: 18px; }
.field-row .value{flex:1;min-width:0}
.value-line{display:flex;align-items:flex-start;gap:8px}
.value-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-word
}
.copy-btn{ flex:0 0 auto }
.copy-btn:hover{ border-color: var(--border-strong); }
.field-label{font-size:0.85em;opacity:0.8;color:var(--muted);margin-bottom:4px}
/* Old copy-icon kept for compatibility but no longer used */
@keyframes nudgeUpDown { 0%{transform:translateY(0)} 20%{transform:translateY(-3px)} 80%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
.copy-icon.nudge { animation: nudgeUpDown 300ms ease; }
.copy-wrap{ position: relative; display:flex; align-items:center; justify-content:center; flex:0 0 16px; width:16px; height:16px; overflow:visible; }
.copy-wrap.pulse{ animation: btnPulse 220ms ease; }

.copied-msg{ margin-left:8px; font-size:12px; color:var(--text-accent); opacity:0; animation: fadeUp 900ms ease forwards; }
@keyframes fadeUp { 0%{opacity:0;transform:translateY(8px)} 20%{opacity:1;transform:translateY(0)} 80%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-4px)} }

.hud{position:absolute;left:12px;bottom:18px;top:auto;background:var(--overlay-panel);border:1px solid var(--border-panel);padding:6px 10px;border-radius:10px;font-size:12px;backdrop-filter:blur(4px);color:var(--muted);z-index:500;pointer-events:auto;display:flex;align-items:center;gap:7px}
.hud .hud-chips{ display:inline-flex; gap:9px; margin-left:4px; }

.chip{
  appearance:none; border:1px solid var(--border-strong); background:var(--tint-badge-bg); color:var(--text-badge);
  border-radius:999px; padding:3px 6px 3px 3px; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; line-height:1;
}
.chip:hover{ filter:brightness(0.98); }
.chip:active{ transform:translateY(1px); }
.chip-badge{
  width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-weight:300; letter-spacing:0.5px; font-size:8px; background:var(--bg-elev-3); color:var(--text-strong);
  border:1px solid var(--text-accent); box-shadow: inset 0 0 0 1px var(--inset-muted); flex:0 0 auto;
}
.chip-count{ font-weight:800; font-size:10px; color:var(--text-badge); min-width:10px; text-align:right; }

.map-wrap { position:relative; background:var(--bg-inverse); }
.brand-row { position:relative; }
.brand-row img { height:65px; }
#userBtn { display:none; }
#searchWrap { margin-top:6px; margin-bottom:8px; display:none; }
#bizToggles { display:none; }
/* Applied filter pills (replace brand toggles) */
#bizToggles.pills{ display:flex !important; flex-wrap:wrap; gap:8px; margin-top:8px; }
#bizToggles.pills .chip{ padding:4px 8px; gap:6px; background:var(--bg-elev-1); color:var(--ink); border:1px solid var(--border-primary); font-size:11px; font-weight:400; line-height:1; }
#bizToggles.pills .chip-badge{ width:auto; height:auto; border-radius:0; background:transparent; border:none; box-shadow:none; padding:0; font-weight:400; font-size:11px; color:inherit; letter-spacing:0; }
#panelSubtitle { color: var(--muted); font-size:11px; line-height:1.15; }

.staff-entry { padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--tint-hr-light); }
.staff-entry:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
/* List view rows */
.list-row { display:flex; align-items:center; justify-content:space-between; gap:2px; padding:3px 2px; border:none; border-radius:8px; background:transparent; line-height:1.15; }
.list-row + .list-row { margin-top:2px; }
.list-row .row-left { display:flex; align-items:center; gap:6px; min-width:0; }
.list-row .row-name { color:var(--text-strong); font-weight:400; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; font-size:13px; line-height:1.15; }
.list-row input[type="checkbox"] { width:14px; height:14px; }
.selection-bar { display:none; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-elev-1); border:1px solid var(--border-primary); border-radius:10px; padding:8px 12px; margin:8px 0; }
.selection-bar.visible { display:flex; }
.selection-bar .muted { color: var(--muted); }
.selection-bar .actions { display:flex; align-items:center; gap:10px; }
.selection-bar .link { background:none; border:none; color:var(--text-accent); text-decoration:underline; cursor:pointer; padding:0; font: inherit; }
/* List view groups */
.list-group { margin:10px 0 18px; }
.list-group-title { color:var(--text-accent); font-size:12px; letter-spacing:0.3px; text-transform:none; margin:4px 4px 8px; }
/* Toolbar (Back / Zoom / Google Maps) */
.toolbar{ display:flex; gap:8px; align-items:stretch; margin:8px 0; width:100%; padding:4px 0; }
.toolbar .btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; line-height:36px; padding:0 12px; white-space:nowrap; }
/* Ensure our SVG-based icons have no square background/border */
.leaflet-marker-icon.thc-dot,
.leaflet-marker-icon.thc-cluster,
.marker-cluster,
.marker-cluster div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Offices: ensure no default white box around div icons */
.leaflet-marker-icon.office-dot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Ensure cluster container is transparent and circular drawing comes from SVG only */
.leaflet-marker-icon.thc-cluster { background: transparent !important; border:none !important; box-shadow:none !important; }
/* Material Symbols in office icon */
.leaflet-marker-icon.office-dot .office-ico .office-ms{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family: 'Material Symbols Outlined'; font-size:18px; line-height:1; color:#ffffff;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* --- Auth & User Menu --- */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel.panel--detail #filtersToggleBtn{ display:none !important; }
.card.team .value-text{ color: var(--ink); }
.brand-row img { height:65px; }
/* Invert transparent logo in light mode for contrast */
:root[data-theme="light"] .brand-row img{ filter: invert(1) hue-rotate(180deg); }
.user-btn{
  appearance:none;
  border:1px solid var(--border-primary);
  background:var(--bg-elev-1);
  color:var(--ink);
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;
  overflow:hidden;
  padding:0;
  background-size:cover; /* for user photo */
  background-position:center;
  background-repeat:no-repeat;
}
.user-menu{position:absolute;right:16px;top:56px;background:var(--bg-elev-2);border:1px solid var(--border-panel);border-radius:10px;box-shadow:0 6px 20px var(--shadow-strong);min-width:160px;z-index:10}
.user-menu.hidden{display:none}
.user-menu ul{list-style:none;margin:6px 0;padding:6px 0}
.user-menu li{color:var(--ink);cursor:pointer}
.user-menu li.menu-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
}
.user-menu li.menu-row .menu-item-label{flex:1;min-width:0}
.user-menu li.menu-row .menu-item-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}
.user-menu li.menu-row .menu-item-icon svg{width:18px;height:18px;display:block;}
.user-menu li.menu-row.menu-row-destructive{
  color:var(--error);
}
.user-menu li.menu-row.menu-row-destructive .menu-item-icon{
  color:var(--error);
}
.user-menu li.menu-row:hover .menu-item-icon{
  color:var(--accent);
}
.user-menu li.menu-row.menu-row-destructive:hover{
  color:var(--error);
}
.user-menu li.menu-row.menu-row-destructive:hover .menu-item-icon{
  color:var(--error);
}
.user-menu li.theme-toggle .menu-item-icon .sun-and-moon{
  width:18px;
  height:18px;
}

/* Sun/Moon visual states (based on web.dev pattern) */
.sun-and-moon { stroke-linecap: round; }
.sun-and-moon .sun { transform-origin: center; transition: transform 250ms ease-out; }
.sun-and-moon .sun-beams { transform-origin: center; transition: transform 500ms ease-out, opacity 500ms ease-out; }
.sun-and-moon .moon circle { transform-origin: center; transition: transform 250ms ease-out; }

/* Light: sun visible */
:root[data-theme="light"] .sun-and-moon .sun-beams{ opacity:1; transform: rotate(0deg); }
:root[data-theme="light"] .sun-and-moon .moon circle{ transform: translateX(0); }

/* Dark: show moon crescent and hide beams */
:root[data-theme="dark"] .sun-and-moon .sun-beams{ opacity:0; transform: rotate(-25deg); }
:root[data-theme="dark"] .sun-and-moon .moon circle{ transform: translateX(-8px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sun-and-moon .sun,
  .sun-and-moon .sun-beams,
  .sun-and-moon .moon circle{ transition: none; }
}
.user-menu li.theme-toggle .slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background:var(--bg-elev-2);transition:.2s;border-radius:50%;box-shadow:0 1px 2px var(--shadow-strong)}
.user-menu li.theme-toggle input:checked + .slider{background:var(--accent)}
.user-menu li.theme-toggle input:checked + .slider:before{transform:translateX(16px)}
.user-menu li:hover{background:var(--bg-hover)}

.login-form{padding:12px 0;display:flex;flex-direction:column;gap:10px}
.form-row{display:flex;gap:8px}
.login-input{flex:1;box-sizing:border-box;background:var(--bg-elev-1);border:1px solid var(--border-primary);color:var(--ink);padding:10px 12px;border-radius:10px;outline:none}
.remember-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:4px}
.login-actions{display:flex;gap:8px;align-items:center}
.error-text{color:var(--error);font-size:12px}
/* --- MSAL login gate --- */
.login-center{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px; /* taller so it centers nicely within the info bar */
  margin: 10px 0;   /* light vertical spacing */
}
.login-card{background:var(--bg-elev-2);border:1px solid var(--border-panel);border-radius:12px;padding:12px 14px;max-width:320px;width:100%;text-align:center}
.login-title{font-size:12px;color:var(--muted);margin-bottom:10px}

/* Toolbar alignment fix (if not present) */
.toolbar{margin:0 0 8px 0;padding:0;display:flex;gap:8px}
.action-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 10px; }
.action-row .btn{ flex:0 0 auto; }
.action-row .hint{ color:var(--muted); font-size:12px; }
.hidden{display:none !important}
/* --- Network status dots --- */
.status-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.status-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.dot-green{background:var(--state-green);box-shadow:0 0 0 2px var(--state-green-ring)}
.dot-red{background:var(--state-red);box-shadow:0 0 0 2px var(--state-red-ring)}
.dot-gray{background:var(--state-gray);box-shadow:0 0 0 2px var(--state-gray-ring)}

/* --- Refresh button (Network card) --- */
.btn-refresh{
  padding: 4px 10px;
  font-size: 22px; /* ~1.2x from 18px */
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  line-height: 1;
  color: var(--tint-soft-link);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes spinFull {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.btn-refresh.spinning{
  animation: spinFull 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.panel .content-grid{ display:grid; grid-template-columns: 1fr; grid-template-areas: "toolbar" "cards"; grid-auto-rows:auto; gap:10px; width:100%; max-width:100%; }
.panel .content-grid > .toolbar{ grid-area: toolbar; grid-column:1 / -1; }
.panel .content-grid > .cards-grid{ grid-area: cards; grid-column:1 / -1; display:grid; gap:10px; grid-template-columns:minmax(0,1fr); width:100%; max-width:100%; }
/* Use a single authoritative grid for cards */
.panel .cards-grid{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); width:100%; max-width:100%; }
/* Force exact column counts when panel adds size classes */
.panel.two-cols .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.panel.three-cols .cards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.panel.panel--detail .cards-grid{ grid-template-columns: minmax(0,1fr) !important; }
.cards-grid--detail{ grid-template-columns: minmax(0,1fr); }
.cards-grid--detail .card{ grid-column: auto; }
.cards-grid .card + .card{ margin-top: 0; }
.cards-grid .card, .cards-grid .list-row{ width:100%; max-width:100%; box-sizing:border-box; }

/* Temporary highlight for deep-linked section */
.card.highlight{ outline: 2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }

/* Two-line clamp utility for long text (addresses, etc.) */
.clamp-2{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Reserve space for two lines even if only one exists */
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}
.panel .list{ width:100%; max-width:100%; }
.filters-bar{ display:none; padding:10px 12px; border:1px solid var(--border-primary); border-radius:10px; background:var(--bg-elev-1); margin:8px 0; box-sizing:border-box; }
.filters-bar.visible{ display:block; }
.filters-row{ display:flex; gap:18px; align-items:flex-start; flex-wrap:nowrap; }
.filters-bar{ width:100%; max-height:none; overflow:visible; }
.filters-col{ display:flex; flex-direction:column; gap:6px; min-width:200px; }
.filters-colset{ display:flex; flex-direction:column; gap:18px; }
.filters-colset--left{ flex:0 0 117px; max-width:117px; padding-right:18px; }
.filters-colset--right{ flex:1 1 auto; min-width:240px; }
.filters-colset--right .filters-col{ width:100%; }
.filters-colset--left .filters-col{ min-width:117px; }
.filters-row label{ font-size:12px; color:var(--muted); }
.filters-row select{ min-width:220px; max-width:320px; background:var(--bg-elev-2); color:var(--ink); border:1px solid var(--border-primary); border-radius:8px; padding:6px; }
.filters-toggle{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.filters-toggle .link{ background:none; border:none; color:var(--text-accent); text-decoration:underline; cursor:pointer; padding:0; font:inherit; }
.filters-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; }
.filters-actions .btn{ padding:6px 10px; }
.filters-checkbox{ display:flex; align-items:center; gap:8px; margin-top:8px; }

.help-floating{
  position:absolute;
  bottom:28px;
  right:28px;
  height:44px;
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  border:1px solid var(--border-primary);
  border-radius:12px;
  background:var(--bg-elev-1);
  color:var(--ink);
  box-shadow:0 8px 20px color-mix(in oklab, var(--shadow-strong) 35%, transparent);
  cursor:pointer;
  overflow:hidden;
  transition:width 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  z-index:450;
}
.help-floating:hover,
.help-floating:focus-visible{
  width:230px;
  justify-content:flex-start;
  gap:12px;
  box-shadow:0 12px 24px color-mix(in oklab, var(--shadow-strong) 45%, transparent);
  transform:translateY(-1px);
}
.help-floating .help-icon{
  font-size:18px;
  font-weight:600;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-strong);
  transition:color 160ms ease;
}
.help-floating .help-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  max-width:0;
  transform:translateX(-8px);
  transition:opacity 160ms ease, transform 160ms ease, max-width 160ms ease;
  text-align:left;
  white-space:nowrap;
  font-size:13px;
}
.help-floating:hover .help-text,
.help-floating:focus-visible .help-text{
  opacity:1;
  max-width:200px;
  transform:translateX(0);
}
.help-floating:hover .help-icon,
.help-floating:focus-visible .help-icon{
  color:var(--text-strong);
}
.help-floating .help-text strong{
  font-weight:600;
  color:var(--text-strong);
}
.help-floating .help-text small{
  font-size:11px;
  color:var(--muted);
}

.help-overlay .modal-card.help-card{
  width:min(780px, 96vw);
  max-height:90vh;
  overflow:auto;
}
.help-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.help-card__header h3{
  margin:0;
  font-size:18px;
  color:var(--text-strong);
}
.help-card__body{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.help-card__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.help-card__badge{ display:none; }
.help-card__text h4{ margin:0 0 4px; font-size:14px; color:var(--text-strong); }
.help-card__text p{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.help-card__close{
  width:32px;
  height:32px;
  border-radius:10px;
}
.help-card__footer{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.help-chip{ display:inline-flex; align-items:center; justify-content:center; padding:2px 6px; margin:0 4px; border-radius:999px; border:1px solid var(--border-primary); background:var(--bg-elev-1); color:var(--text-strong); font-weight:500; font-size:11px; }
.help-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--border-primary); background:var(--bg-elev-1); margin:0 4px; color:var(--text-strong); }
.help-icon-btn svg{ width:16px; height:16px; stroke:#bcd0ff; }

/* Align toolbar, filters, selection bar, and titles to card inner width */
.panel .content-grid{ padding-inline: var(--card-pad-x); box-sizing: border-box; }
.panel .content-grid > .toolbar,
.panel .content-grid > .selection-bar,
.panel .content-grid > .filters-bar,
.panel .content-grid > .list-group-title{
  width: 100%;
  margin: 0;
  padding-inline: 0;
  box-sizing: border-box;
}