/* Shared collapsible left sidebar for every NVSP Dashboard page. Loaded by
   every public/*.html page + the React hub. White/light content area is the
   page's own default; this file only styles the sidebar chrome (always dark
   navy, matches the Merlino brand) plus the body offset it creates. */

:root{
  --nvsp-sb-w: 240px;
  --nvsp-sb-w-collapsed: 64px;
  --nvsp-sb-bg: #0e1826;
  --nvsp-sb-bg-hi: #1b2740;
  --nvsp-sb-ink: #e9edf4;
  --nvsp-sb-muted: #96a3b8;
  --nvsp-sb-line: #22314a;
  --nvsp-sb-accent: #d9642f;
}

body.nvsp-has-sidebar{
  margin-left: var(--nvsp-sb-w);
  transition: margin-left .15s ease;
}
body.nvsp-has-sidebar.nvsp-collapsed{
  margin-left: var(--nvsp-sb-w-collapsed);
}

.nvsp-sidebar{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--nvsp-sb-w);
  background: var(--nvsp-sb-bg);
  color: var(--nvsp-sb-ink);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  transition: width .15s ease;
  overflow-x: hidden;
}
.nvsp-sidebar.collapsed{ width: var(--nvsp-sb-w-collapsed); }

.nvsp-sb-head{
  display:flex; align-items:center; gap:10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--nvsp-sb-line);
  min-height: 56px;
}
.nvsp-sb-head img{ height:20px; flex:none; background:#fff; padding:5px 8px; border-radius:7px; box-sizing:content-box; }
.nvsp-sb-title{ font-size:13px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.nvsp-sb-sub{ font-size:10.5px; color:var(--nvsp-sb-muted); white-space:nowrap; }
.nvsp-sb-toggle{
  margin-left:auto; flex:none;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--nvsp-sb-muted); border-radius:8px;
  cursor:pointer; font-size:15px;
}
.nvsp-sb-toggle:hover{ background:var(--nvsp-sb-bg-hi); color:#fff; }
.nvsp-sidebar.collapsed .nvsp-sb-head{ justify-content:center; padding:14px 8px; }
.nvsp-sidebar.collapsed .nvsp-sb-toggle{ margin-left:0; }

.nvsp-nav{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:2px; }
.nvsp-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px;
  color: var(--nvsp-sb-ink); text-decoration:none; font-size:13.5px; font-weight:500;
  white-space:nowrap;
}
.nvsp-nav-item:hover{ background: var(--nvsp-sb-bg-hi); }
.nvsp-nav-item.active{ background:#fff; color:#0e1826; font-weight:700; }
.nvsp-nav-icon{ flex:none; width:20px; text-align:center; font-size:15px; }
.nvsp-sidebar.collapsed .nvsp-nav-label{ display:none; }
.nvsp-sidebar.collapsed .nvsp-nav-item{ justify-content:center; padding:9px; }

.nvsp-sb-foot{ border-top:1px solid var(--nvsp-sb-line); padding:10px; }
.nvsp-sidebar #themebtn{
  width:100%; display:flex; align-items:center; gap:10px; justify-content:flex-start;
  background:transparent; border:1px solid var(--nvsp-sb-line); color:var(--nvsp-sb-ink);
  border-radius:9px; padding:8px 10px; font-size:13px; cursor:pointer; font-family:inherit;
}
.nvsp-sidebar #themebtn:hover{ background:var(--nvsp-sb-bg-hi); }
.nvsp-sidebar.collapsed #themebtn{ justify-content:center; padding:8px; }
.nvsp-sidebar.collapsed #themebtn .nvsp-nav-label{ display:none; }

@media (max-width:720px){
  body{ margin-left: var(--nvsp-sb-w-collapsed) !important; }
  .nvsp-sidebar{ width: var(--nvsp-sb-w-collapsed) !important; }
  .nvsp-sidebar .nvsp-nav-label,
  .nvsp-sidebar .nvsp-sb-title,
  .nvsp-sidebar .nvsp-sb-sub{ display:none; }
  .nvsp-sb-toggle{ display:none; }
}