/* ================================================================
   app-shell.css — WOW UI V5 (layout architecture)
   - Desktop/landscape: left sidebar + top header + content
   - Mobile/portrait: keep existing header + bottom nav + slide menu
   - Density modes: data-density="comfort" | "compact"
   ================================================================ */

:root{
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 74px;
  --topbar-h: 64px;
}

html[data-density="compact"]{
  --radius: 14px;
  --card-pad: 12px;
  --gap: 12px;
}

html[data-density="comfort"]{
  --radius: 16px;
  --card-pad: 16px;
  --gap: 16px;
}

.app-shell{ min-height: 100vh; }

@media (min-width: 1024px){
  .app-shell{ display:flex; align-items:stretch; }

  /* Hide legacy desktop nav when sidebar present */
  .desktop-nav{ display:none !important; }

  .app-sidebar{
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 14px;
    border-right: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: blur(16px);
  }

  body.sidebar-collapsed .app-sidebar{
    width: var(--sidebar-w-collapsed);
    flex-basis: var(--sidebar-w-collapsed);
  }

  .app-main{ flex:1; min-width:0; }

  #appHeader{
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: blur(16px);
    height: var(--topbar-h);
  }

  #appContent{ padding: 18px; }
  .page-titlebar{ display:none; }
}

@media (max-width: 1023px){
  .app-sidebar{ display:none; }
  .app-shell, .app-main{ display:block; }
}

/* ================= Sidebar UI ================= */
.app-sidebar{ color: var(--text); }

.sb-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
}
html[data-theme="dark"] .sb-brand{ background: rgba(10,14,20,.35); }

.sb-logo{
  width: 40px; height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #00e5ff);
  box-shadow: 0 12px 30px rgba(0, 180, 255, .25);
}

.sb-brand-text{ min-width:0; }
.sb-company{ font-weight:800; line-height:1.1; }
.sb-user{ font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sb-collapse{
  margin-left:auto;
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .sb-collapse{ background: rgba(10,14,20,.25); }
.sb-collapse:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.sb-collapse svg{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:2; }

body.sidebar-collapsed .sb-brand-text,
body.sidebar-collapsed .sb-theme-label,
body.sidebar-collapsed .sb-label,
body.sidebar-collapsed .sb-footer span:last-child{ display:none; }
body.sidebar-collapsed .sb-collapse svg{ transform: rotate(180deg); }

.sb-controls{ margin: 12px 0 10px; }
.sb-density{
  display:flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.35);
}
html[data-theme="dark"] .sb-density{ background: rgba(10,14,20,.22); }

.sb-density .seg-btn{
  flex:1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.sb-density .seg-btn.active{
  background: linear-gradient(135deg, rgba(0, 180, 255, .25), rgba(0, 255, 209, .18));
  box-shadow: 0 10px 24px rgba(0, 180, 255, .15);
}

.sb-nav{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.sb-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.sb-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.28);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
html[data-theme="dark"] .sb-item:hover{ background: rgba(255,255,255,.06); box-shadow: 0 12px 26px rgba(0,0,0,.35); }

.sb-item.active{
  background: linear-gradient(135deg, rgba(0, 180, 255, .28), rgba(0, 255, 209, .18));
  border-color: rgba(0, 180, 255, .25);
}

.sb-icon{ width: 22px; height: 22px; display:flex; }
.sb-icon svg{ width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:2; }
.sb-label{ font-weight: 700; }

.sb-badge{
  margin-left:auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 64, 129, .18);
  color: var(--danger);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255, 64, 129, .22);
}

.sb-footer{
  margin-top:auto;
  padding-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.sb-theme, .sb-logout{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.35);
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .sb-theme, html[data-theme="dark"] .sb-logout{ background: rgba(10,14,20,.22); }
.sb-theme:hover, .sb-logout:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.sb-theme svg, .sb-logout svg{ width: 20px; height: 20px; stroke: currentColor; fill:none; stroke-width:2; }

/* Content area: keep footer from covering bottom nav on mobile */
.app-footer{ padding: 18px 0 28px; text-align:center; opacity:.75; }
