/* Side menu — floating card, sections tinted, optional pins (desktop only; the phone tab bar is unchanged) */
@media (min-width:861px){
  .shell{background:linear-gradient(180deg,#e6f0f4 0,#eef5f7 320px)}
  .sidebar{margin:12px 0 12px 12px;height:calc(100vh - 24px);top:12px;border:0;border-radius:22px;
    box-shadow:0 16px 44px rgba(8,41,69,.10);padding:14px 10px 12px;box-sizing:border-box}
  .rtl .sidebar{margin:12px 12px 12px 0}
  .brand{padding:6px 6px 14px}
  .nav-jump{height:36px;border-radius:12px;font-size:12.5px;margin:0 2px 6px}

  #nav{gap:1px}
  #nav .nav-group{margin-top:8px}
  #nav .nav-gh{font-size:10px;letter-spacing:.1em;color:#47607a;padding:4px 10px}

  #nav .nav-row{display:flex;align-items:center;gap:2px;border-radius:12px;min-width:0}
  #nav .nav-row:has(>button[data-page][hidden]),#nav .nav-row:has(>button[data-page].hidden),#nav .nav-row:has(>button.nav-folded){display:none}
  #nav .nav-row>button[data-page]{flex:1 1 auto;min-width:0}

  #nav button[data-page]{height:36px;padding:0 6px;border-radius:12px;gap:10px;grid-template-columns:28px 1fr;font-size:14px;font-weight:600;color:#33495c}
  #nav .nav-row>button[data-page="iot"]:not(:has(.nav-badge)){grid-template-columns:28px 1fr}
  #nav .nav-row>button[data-page="iot"]:has(.nav-badge){grid-template-columns:28px 1fr auto}
  #nav button[data-page]:has(.nav-badge),#nav button[data-page]:has(.nav-cams){grid-template-columns:28px 1fr auto}
  #nav button[data-page] .nav-icon{width:28px;height:28px;border-radius:8px}
  #nav button[data-page] .nav-icon svg{width:16px;height:16px}
  #nav button[data-page]:hover{background:#f3f8fa}
  #nav .nav-row:hover{background:#f3f8fa}
  #nav .nav-row:hover>button[data-page]{background:transparent}

  /* section tints */
  #nav [data-tint="dash"] .nav-icon{background:#00a3a9;color:#04202e}
  #nav [data-tint="devices"] .nav-icon{background:#e3f4f6;color:#00718a}
  #nav [data-tint="watch"] .nav-icon{background:#e6f0fb;color:#1d4f91}
  #nav [data-tint="respond"] .nav-icon{background:#fde8eb;color:#a12639}
  #nav [data-tint="insights"] .nav-icon{background:#ece8fb;color:#5b3fb0}
  #nav [data-tint="admin"] .nav-icon{background:#eef1f4;color:#4d6478}

  /* current page */
  #nav button[data-page].active{background:#0f2c4d;color:#fff;box-shadow:none;font-weight:700}
  #nav .nav-row:has(>button.active){background:#0f2c4d}
  #nav .nav-row:has(>button.active)>button[data-page]{background:transparent}
  #nav button[data-page].active .nav-icon{background:#00a3a9;color:#04202e}
  #nav .nav-row:has(>button.active) .nav-pin{color:#9fc3dc}
  #nav button.active .nav-badge,#nav button.active .nav-cams{box-shadow:0 0 0 2px #0f2c4d}

  /* pin */
  #nav .nav-pin{flex:none;width:26px;height:26px;margin-right:4px;border:0;border-radius:8px;background:transparent;color:#8aa0b2;display:grid;place-items:center;padding:0;cursor:pointer;opacity:0}
  #nav .nav-row:hover .nav-pin,#nav .nav-pin:focus-visible,#nav .nav-pin.on{opacity:1}
  #nav .nav-pin.on{color:#00849a}
  #nav .nav-pin:hover{background:#e3eef3;color:#082945}
  .rtl #nav .nav-pin{margin-right:0;margin-left:4px}

  .nav-badge{font-size:10.5px;padding:2px 7px}
  .nav-badge.ok{background:#e3f6ec;color:#17663d}
  .nav-cams{font-size:10.5px}.nav-cams>span{padding:3px 7px}
  .nav-lora{display:none}

  .side-foot{border:0;border-radius:16px;background:#f3f8fa;padding:11px 12px;font-size:12px}

  /* collapsed: icons only */
  .shell.sidebar-collapsed .sidebar{padding-left:8px;padding-right:8px}
  .shell.sidebar-collapsed #nav .nav-row:has(>button.nav-folded){display:flex}
  .shell.sidebar-collapsed #nav .nav-pin{display:none}
  .shell.sidebar-collapsed #nav button[data-page]{grid-template-columns:1fr;justify-items:center;padding:0}
}