.vesta-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--vesta-sidebar-w); height: 100vh; background:var(--vesta-sidebar-bg); color:var(--vesta-sidebar-text); padding:18px 14px; border-right:1px solid rgba(255,255,255,.04); overflow:auto; transition:width .22s ease, padding .22s ease, transform .24s ease; z-index: 220; -webkit-overflow-scrolling: touch; }
.vesta-sidebar__brand { display:flex; gap:12px; align-items:center; padding:6px 8px 18px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.vesta-sidebar__logo-mark { width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,#d08a49 0%,#9a5720 100%); color:#fff; display:grid; place-items:center; font-weight:700; }
.vesta-sidebar__brand-copy strong { display:block; font-size:14px; }
.vesta-sidebar__brand-copy span { display:block; color:var(--vesta-sidebar-muted); font-size:11px; margin-top:2px; }
.vesta-sidebar__group { margin-bottom:18px; }
.vesta-sidebar__group-label { padding:8px 10px; color:var(--vesta-sidebar-muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.vesta-sidebar__item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--vesta-sidebar-text); margin-bottom:4px; }
.vesta-sidebar__item.is-active { background:var(--vesta-sidebar-active-bg); color:var(--vesta-sidebar-active-text); }
.vesta-sidebar__label { font-size:13px; font-weight:500; }
.vesta-icon-pill, .vesta-sidebar__item .vesta-icon { width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar { width: var(--vesta-sidebar-w-collapsed); padding-left:10px; padding-right:10px; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__brand { justify-content:center; padding-left:0; padding-right:0; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__brand-copy,
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__group-label,
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__label { display:none; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__item { justify-content:center; padding-left:0; padding-right:0; }
@media (max-width: 1023px) {
  .vesta-sidebar { width:min(280px, 84vw); transform:translateX(-100%); z-index:9997; box-shadow: 18px 0 38px rgba(0,0,0,.22); }
  .vesta-sidebar.is-open { transform:none; }
  .vesta-app-shell.is-sidebar-open::after { content:''; position:fixed; inset:0; background:rgba(0,0,0,.34); z-index:9996; }
}
@media (max-width: 767px) {
  .vesta-sidebar { width: min(300px, 88vw); padding: 16px 12px 24px; }
  .vesta-sidebar__brand { padding-bottom: 16px; }
}
.vesta-sidebar__logo-img { width:36px; height:36px; border-radius:12px; object-fit:cover; background:#fff; flex:0 0 auto; }
.vesta-app-shell.is-sidebar-collapsed .vesta-sidebar__logo-img { width:36px; height:36px; }


/* Clock In System: sidebar network status for mobile/PWA reliability */
.clockin-sidebar-network-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 10px 10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--vesta-sidebar-text);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}
.clockin-sidebar-network-status__dot{
  width:10px;
  height:10px;
  min-width:10px;
  border-radius:999px;
  background:#9ca3af;
  box-shadow:0 0 0 4px rgba(156,163,175,.16);
}
.clockin-sidebar-network-status[data-state="online"] .clockin-sidebar-network-status__dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.20);}
.clockin-sidebar-network-status[data-state="offline"] .clockin-sidebar-network-status__dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.20);}
.clockin-sidebar-network-status[data-state="pending"] .clockin-sidebar-network-status__dot{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.22);}
.clockin-sidebar-network-status[data-state="online"]{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28);}
.clockin-sidebar-network-status[data-state="offline"]{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28);}
.clockin-sidebar-network-status[data-state="pending"]{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.30);}
.vesta-app-shell.is-sidebar-collapsed .clockin-sidebar-network-status{display:none;}
@media (min-width:1024px){
  .clockin-sidebar-network-status{display:none;}
}


/* v2.3.12: make the sidebar network state a clear mobile/PWA pill, not plain text. */
.clockin-sidebar-network-status{
  min-height:38px;
  width:calc(100% - 20px);
  box-sizing:border-box;
  justify-content:flex-start;
}
.clockin-sidebar-network-status__text{
  display:inline-block;
  color:#f8fafc;
  letter-spacing:.01em;
}
.clockin-sidebar-network-status[data-state="online"] .clockin-sidebar-network-status__text{color:#bbf7d0;}
.clockin-sidebar-network-status[data-state="offline"] .clockin-sidebar-network-status__text{color:#fecaca;}
.clockin-sidebar-network-status[data-state="pending"] .clockin-sidebar-network-status__text{color:#fde68a;}
@media (max-width:1023px){
  .clockin-sidebar-network-status{display:flex !important;}
}