/* Shared app sidebar (the home page's navigation). Every page loads this so the
   left panel is identical wherever you navigate. */
  /* ---------- app shell / left nav (shared across index.html, dashboard.html, factsheet.html) ---------- */
  .app-shell{ display:flex; align-items:stretch; min-height:100vh; }
  .app-sidebar{
    flex:none; width:222px; background:var(--navy); color:#fff;
    display:flex; flex-direction:column; padding:18px 0; position:sticky; top:0; height:100vh; z-index:30; overflow-y:auto;
  }
  .app-sidebar .side-brand{ display:flex; align-items:center; gap:10px; font-size:23px; font-weight:900; letter-spacing:.8px; padding:0 20px 24px; }
  .app-sidebar .side-brand .brand-mark{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:36px; height:36px; border-radius:10px; overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
  }
  .app-sidebar .side-brand .brand-mark img{
    width:100%; height:100%; object-fit:cover;
  }
  .app-sidebar .side-nav{ display:flex; flex-direction:column; gap:6px; }
  .app-sidebar .side-link{
    display:flex; align-items:center; gap:10px; margin:0 12px; padding:9px 14px; color:#c7d7ee; text-decoration:none;
    font-size:13px; font-weight:800; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.05);
    transition:background .15s,color .15s,border-color .15s;
  }
  .app-sidebar .side-link svg{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; }
  .app-sidebar .side-link:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.32); }
  .app-sidebar .side-link.active{ background:rgba(255,255,255,.18); color:#fff; border-color:var(--blue-4); box-shadow:0 2px 10px rgba(46,134,222,.35); }
  .app-sidebar .side-user{
    margin-top:auto; display:flex; align-items:center; gap:10px;
    padding:14px 20px; border-top:1px solid rgba(255,255,255,.14);
  }
  .app-sidebar .side-user .user-icon{
    flex:none; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
  }
  .app-sidebar .side-user .user-icon svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:1.8; }
  .app-sidebar .side-user .user-info{ min-width:0; overflow:hidden; }
  .app-sidebar .side-user .user-name{
    display:block; font-size:12.5px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .app-sidebar .side-user .user-meta{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:#9fb4d1; text-transform:capitalize; }
  .app-sidebar .side-user .user-meta .logout-link{
    background:none; border:none; color:#8fb8ee; font-weight:800; font-size:10.5px; cursor:pointer; padding:0; text-transform:none;
  }
  .app-sidebar .side-user .user-meta .logout-link:hover{ text-decoration:underline; color:#fff; }
  .app-main{ flex:1; min-width:0; }
  @media (max-width:820px){
    .app-shell{ flex-direction:column; }
    .app-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; align-items:center; padding:10px 14px; gap:14px; }
    .app-sidebar .side-brand{ padding:0; }
    .app-sidebar .side-nav{ flex-direction:row; }
    .app-sidebar .side-link{ margin:0; padding:6px 12px; border-radius:6px; }
    .app-sidebar .side-user{ margin-top:0; margin-left:auto; border-top:none; padding:6px 10px; }
  }
  .side-group-title{ font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; opacity:.6; margin:16px 0 6px 12px; }
  .side-group-title:first-child{ margin-top:4px; }