/* public/stylesheets/sidebar.css */
/* Additive sidebar + shell styles (won't break legacy pages). */

:root{
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --sidebar-border: #e6e6e6;
  --sidebar-muted: #6b7280;
  --sidebar-bg: #ffffff;
  --sidebar-soft: #fafafa;
  --sidebar-chip: #f3f4f6;
  --sidebar-danger: #B45F34;
  --sidebar-radius: 12px;
  --sidebar-h: 40px;
}

/* Override legacy flex-column only in shell */
body.app-shell{
  display:flex !important;
  flex-direction:row !important;
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
}
.admin-requests-page{
  overflow-x:hidden;
  width:100%;
}

/* Main column */
.app-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  position:relative; /* prevents accidental stacking weirdness */
  margin-left:var(--sidebar-w);
  min-height:100vh;
  width:100%;
  max-width:100%;
}
.sidebar.collapsed ~ .app-main{
  margin-left:var(--sidebar-w-collapsed);
}

/* Sidebar */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  height:100vh;
  min-height:100vh;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex;
  flex-direction:column;
  z-index:999; /* ✅ raised so docs page can't cover it */
  transition: width .2s ease, transform .2s ease;
}

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--sidebar-border);
  background:var(--sidebar-bg);
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:700;
  color:inherit;
}
.brand img{ height:28px; width:auto; }
.brand-text{ font-size:16px; }

.sidebar-nav{
  display:flex;
  flex-direction:column;
  padding:10px 8px 12px;
  gap:6px;
  overflow:auto;
}

.sidebar-footer{
  margin-top:auto;
  padding:8px;
  border-top:1px solid var(--sidebar-border);
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--sidebar-bg);
}

.sidebar-group{
  display:block;
  margin:2px 0;
}

.sidebar-group-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:2px 0 8px 10px;
}

.nav-item{
  position:relative;
  height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.nav-item i{
  width:20px;
  text-align:center;
  font-size:16px;
  color:var(--sidebar-muted);
}
.nav-item img{
  width:18px;
  height:18px;
}
.nav-item span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.nav-item:hover{ background:var(--sidebar-soft); }
.nav-item.active{
  background:var(--sidebar-chip);
  font-weight:600;
}
.nav-item.active i{ color:inherit; }
.nav-item.danger,
.nav-item.danger i{ color:var(--sidebar-danger); }

.nav-item.has-unread::after{
  content: attr(data-badge);
  position:absolute;
  top:6px;
  right:12px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--sidebar-danger);
  color:#fff;
  font-size:10px;
  font-weight:600;
  display:none;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.9);
}

/* Collapsed desktop */
.sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span{ display:none; }
.sidebar.collapsed .nav-item .notif-badge{ display:none; }
.sidebar.collapsed .nav-item{
  justify-content:center;
  padding:0;
}
.sidebar.collapsed .nav-item.has-unread::after{
  display:flex;
}
.sidebar.collapsed .sidebar-group-body{
  padding-left:0;
}
.sidebar.collapsed .nav-section-label{
  justify-content:center;
  padding:6px 0;
}
.sidebar.collapsed .nav-section-label span,
.sidebar.collapsed .nav-section-label .chevron{
  display:none;
}

/* Icon buttons */
.icon-btn{
  height:var(--sidebar-h);
  width:var(--sidebar-h);
  border:1px solid var(--sidebar-border);
  background:var(--sidebar-bg);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{ background:var(--sidebar-soft); }

/* Mobile topbar */
.mobile-topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:50; /* above page content */
  background:var(--sidebar-bg);
  border-bottom:1px solid var(--sidebar-border);
  padding:8px 10px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Mobile overlay */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:900; /* below sidebar (999), above content */
  opacity:0;
  transition: opacity .2s ease;
}
.sidebar-overlay.show{
  display:block;
  opacity:1;
}
.no-scroll{ overflow:hidden; }

@media (max-width:900px){
  .mobile-topbar{ display:flex; }
  .app-main{
    margin-left:0; /* prevent offset on mobile when sidebar is off-canvas */
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .sidebar{
    position:fixed;
    left:0;
    top:0;
    transform:translateX(-100%);
    box-shadow:0 10px 30px rgba(0,0,0,.2);
  }
  .sidebar.open{ transform:translateX(0); }

  /* ✅ mobile always full text even if collapsed stored */
  .sidebar.collapsed{
    width:var(--sidebar-w);
  }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-item span{
    display:inline;
  }
  .sidebar.collapsed .nav-item{
    justify-content:flex-start;
    padding:0 12px;
  }

  .hide-mobile{ display:none !important; }
  .hide-desktop{ display:inline-flex !important; }
}

@media (min-width:901px){
  .hide-desktop{ display:none !important; }
}
.nav-section-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--sidebar-muted);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.nav-section-label:hover{
  background:var(--sidebar-soft);
  color:#111827;
}
.nav-section-label::-webkit-details-marker{
  display:none;
}
.nav-section-label::marker{
  content:'';
}
.nav-section-label .section-icon{
  width:18px;
  text-align:center;
  font-size:14px;
  color:var(--sidebar-muted);
}
.nav-section-label span{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-section-label .chevron{
  font-size:12px;
  color:var(--sidebar-muted);
  transition:transform .2s ease;
}
.sidebar-group[open] .nav-section-label .chevron{
  transform:rotate(180deg);
}

/* Sidebar badges (notifications, review queue) */
.sidebar-notif-badge,
.sidebar-review-badge {
  background: var(--sidebar-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: auto;
  line-height: 1;
}

/* Different color for review queue to distinguish from notifications */
.sidebar-review-badge {
  background: #b45f34;
}

/* Hide badges when sidebar is collapsed (show via ::after pseudo-element instead) */
.sidebar.collapsed .sidebar-notif-badge,
.sidebar.collapsed .sidebar-review-badge {
  display: none;
}