/* =====================================================================
   Hamsaya Hub — professional dashboard layout (desktop / tablet, 900px and wider)
   sidebar | header + filter toolbar | map | docked details panel
   Phones keep the map-first layout from app.css.
   ===================================================================== */
.sidenav { display: none; }

@media (min-width: 900px) {
  :root {
    --side-w: 84px; --head-h: 64px; --tool-h: 56px; --panel-w: 420px;
    --dash-bg: #f3f5f4; --dash-line: #e3e8e5; --side-bg: #0f2f22; --side-ink: #a9c2b6;
  }
  body { background: var(--dash-bg); }

  /* ---------- sidebar ---------- */
  .sidenav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 1100; background: var(--side-bg); padding: 12px 10px; }
  .side-brand { display: grid; place-items: center; height: 52px; margin-bottom: 10px; }
  .side-logo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, #1f7a52, #145a3c); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  .side-logo svg { width: 24px; height: 24px; }
  .side-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border-radius: 12px; color: var(--side-ink); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .01em; transition: background .15s, color .15s; position: relative; }
  .side-item:hover { background: rgba(255,255,255,.06); color: #fff; }
  .side-item.active { background: rgba(255,255,255,.1); color: #fff; }
  .side-item.active::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #f5a623; }
  .side-item[hidden] { display: none; }
  .side-spacer { flex: 1; }
  .side-foot { text-align: center; color: #5f7d70; font-size: 9.5px; line-height: 1.25; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }

  /* ---------- header ---------- */
  .topbar { position: fixed; left: var(--side-w); right: 0; top: 0; height: var(--head-h); padding: 0 20px; gap: 16px; background: #fff; border-bottom: 1px solid var(--dash-line); z-index: 1050; pointer-events: auto; }
  .brand { background: transparent; color: var(--ink); box-shadow: none; padding: 0; cursor: pointer; border-radius: 0; }
  .brand-logo { display: none; }
  .brand-text strong { font-size: 17px; letter-spacing: -.01em; }
  .brand-text small { font-size: 12px; color: var(--ink-3); opacity: 1; margin-top: 2px; }
  .search { max-width: 560px; margin: 0 auto; height: 42px; border-radius: 10px; background: var(--dash-bg); box-shadow: none; border: 1px solid transparent; }
  .search:focus-within { background: #fff; border-color: var(--green); box-shadow: 0 0 0 3px rgba(20,90,60,.12); }
  .topnav { gap: 10px; }
  #btnMine, #btnAdmin { display: none !important; }            /* reachable from the sidebar */
  .pill-btn { height: 40px; border-radius: 10px; box-shadow: none; font-size: 13.5px; }
  .pill-btn.primary { background: var(--green); color: #fff; }
  .avatar { width: 40px; height: 40px; box-shadow: none; background: linear-gradient(145deg, #1f7a52, #145a3c); font-size: 14px; }

  /* ---------- filter toolbar ---------- */
  .chips { position: fixed; left: var(--side-w); right: var(--panel-w); top: var(--head-h); height: var(--tool-h); padding: 0 20px; align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid var(--dash-line); z-index: 1040; overflow-x: auto; }
  body.panel-hidden .chips { right: 0; }
  .chip, .chip-select { box-shadow: none; border: 1px solid var(--dash-line); background: #fff; height: 34px; border-radius: 8px; font-size: 13px; color: var(--ink-2); }
  .chip:hover, .chip-select:hover { border-color: #c8d3cd; background: #fafbfa; }
  .chip.active { background: var(--green); border-color: var(--green); color: #fff; }

  /* ---------- map area ---------- */
  #map { inset: calc(var(--head-h) + var(--tool-h)) var(--panel-w) 0 var(--side-w); }
  body.panel-hidden #map { right: 0; }
  .map-controls { top: calc(var(--head-h) + var(--tool-h) + 16px); right: calc(var(--panel-w) + 16px); }
  body.panel-hidden .map-controls { right: 16px; }
  #btnPlaces, #btnHelp { display: none; }                       /* reachable from the sidebar */
  .map-btn { border-radius: 10px; box-shadow: 0 1px 3px rgba(16,24,20,.12), 0 1px 2px rgba(16,24,20,.06); border: 1px solid var(--dash-line); }
  .legend { left: calc(var(--side-w) + 16px); bottom: 16px; border: 1px solid var(--dash-line); box-shadow: 0 1px 3px rgba(16,24,20,.08); border-radius: 10px; padding: 8px 12px; }
  .leaflet-bottom.leaflet-right { right: 0; }
  .leaflet-control-zoom { border: 1px solid var(--dash-line) !important; border-radius: 10px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,20,.1) !important; }
  .guide-bar, .draw-bar { left: calc(var(--side-w) + (100% - var(--side-w) - var(--panel-w)) / 2); top: calc(var(--head-h) + var(--tool-h) + 16px); }
  .offline { top: calc(var(--head-h) + var(--tool-h) + 12px); }

  /* ---------- docked details panel ---------- */
  .sheet { top: var(--head-h); right: 0; bottom: 0; left: auto; width: var(--panel-w); border-radius: 0; box-shadow: none; border-left: 1px solid var(--dash-line); background: #fff; z-index: 1045; }
  .sheet-body { padding: 22px 22px 28px; }
  .sheet-close { top: 14px; right: 14px; background: transparent; border: 1px solid var(--dash-line); border-radius: 8px; }
  .sheet-open { top: calc(var(--head-h) + 12px); transform: none; right: 0; border-radius: 10px 0 0 10px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
  .sheet-title h2 { font-size: 19px; letter-spacing: -.01em; }
  .section-h { color: #6b7a73; font-size: 11.5px; letter-spacing: .07em; }
  body[data-route="admin"] { --panel-w: 640px; }               /* admin gets a wide workspace */

  /* ---------- cards, stats, buttons ---------- */
  .stats { gap: 10px; }
  .stat { background: #fff; border: 1px solid var(--dash-line); border-radius: 12px; padding: 14px 12px; text-align: left; box-shadow: 0 1px 2px rgba(16,24,20,.04); }
  .stat b { font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
  .stat small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
  .stat.warn { border-color: #f3c7c1; background: #fff8f7; }
  .card { border-radius: 12px; border-color: var(--dash-line); box-shadow: 0 1px 2px rgba(16,24,20,.04); }
  .card:hover { border-color: #b9cfc3; background: #fbfdfc; box-shadow: 0 4px 12px rgba(16,24,20,.06); }
  .tiles { gap: 10px; }
  .tile { border-radius: 12px; border-color: var(--dash-line); padding: 14px 4px; transition: box-shadow .15s, border-color .15s; }
  .tile:hover { box-shadow: 0 4px 12px rgba(16,24,20,.07); }
  .fact { background: #fff; border: 1px solid var(--dash-line); }
  .btn { border-radius: 10px; }
  .btn:not(.primary):not(.amber):not(.wa):not(.danger) { background: #fff; border: 1px solid var(--dash-line); }
  .btn:not(.primary):not(.amber):not(.wa):not(.danger):hover { background: #f6f8f7; }
  .notice { border-radius: 10px; }

  /* ---------- admin tabs and tables ---------- */
  .tabs { border-bottom: 1px solid var(--dash-line); gap: 2px; margin: 4px 0 16px; }
  .tabs button { background: transparent; border-radius: 8px 8px 0 0; padding: 9px 12px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .tabs button.on { background: transparent; color: var(--green); border-bottom-color: var(--green); }
  .table { border: 1px solid var(--dash-line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
  .table th { background: #f7f9f8; border-bottom: 1px solid var(--dash-line); padding: 10px; }
  .table td { padding: 10px; }
  .table tr:last-child td { border-bottom: 0; }
  .table tbody tr:hover td { background: #fafcfb; }

  /* ---------- dialogs ---------- */
  .modal-backdrop { background: rgba(10, 25, 18, .45); }
  .modal { border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
}
@media (min-width: 900px) and (max-width: 1180px) {
  :root { --panel-w: 380px; }
  .brand-text small { display: none; }
}

  /* guide bar buttons keep their translucent style on the blue bar */
@media (min-width: 900px) { .guide-btns .btn.sm { background: rgba(255,255,255,.2) !important; border: 0 !important; color: #fff !important; } }