/* Baromètre RSE portal shell: thin top bar + left sidebar (SOW / Word-doc feel).
   Admin dropdown mirrors TPO PR #825 (Forvis Mazars staff only). */

:root{
  --portal-indigo:#171c8f;
  --portal-blue:#0072ce;
  --portal-ink:#25282a;
  --portal-grey:#5f6368;
  --portal-muted:#83878c;
  --portal-line:#e4e6ea;
  --portal-bg:#e9ebee;
  --portal-side:#f4f4f4;
  --sidebar-width:260px;
  --topbar-height:36px;
}

body.portal{
  margin:0;
  overflow:hidden;
  height:100vh;
  padding-top:var(--topbar-height);
  background:var(--portal-bg);
}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--topbar-height);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  background:#f3f3f3;
  border-bottom:1px solid #d0d0d0;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  font-family:"halyard-text",Arial,Helvetica,sans-serif;
  box-sizing:border-box;
}
.topbar img{height:20px;display:block}
.topbar .ttl{
  font-size:12px;font-weight:600;color:var(--portal-indigo);
  border-left:1px solid #d0d0d0;padding-left:10px;white-space:nowrap;
}
.topbar .spacer{flex:1}
.topbar .nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;margin:0;
  border:1px solid #d0d0d0;background:#fff;color:var(--portal-ink);
  font-size:16px;line-height:1;cursor:pointer;
}
.topbar .logout{
  background:var(--portal-blue);color:#fff;border:1px solid var(--portal-blue);
  padding:4px 10px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap;
}
.topbar .logout:hover{background:var(--portal-indigo);border-color:var(--portal-indigo)}

/* Admin dropdown (TPO PR #825 pattern, sized for the thin topbar) */
.topbar .nav-item{position:relative}
.topbar .nav-admin-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font:inherit;font-size:11.5px;font-weight:600;line-height:1;
  color:var(--portal-indigo);background:#fff;
  border:1px solid var(--portal-indigo);padding:4px 10px;
  cursor:pointer;white-space:nowrap;
}
.topbar .nav-admin-btn:hover,
.topbar .nav-item:focus-within .nav-admin-btn,
.topbar .nav-item.open .nav-admin-btn{
  background:#eef0fb;
}
.topbar .nav-admin-caret{font-size:9px;opacity:.7;margin-left:1px}
.topbar .nav-dropdown{
  display:none;position:absolute;top:100%;right:0;left:auto;
  background:#fff;border:1px solid #d0d0d0;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  min-width:220px;z-index:200;padding:4px 0;margin-top:4px;
}
.topbar .nav-item:hover .nav-dropdown,
.topbar .nav-item:focus-within .nav-dropdown,
.topbar .nav-item.open .nav-dropdown{display:block}
.topbar .nav-dropdown a,
.topbar .nav-dropdown button[role="menuitem"]{
  display:block;padding:8px 14px;font-size:12px;font-family:inherit;font-weight:400;
  line-height:1.35;color:#3a3f3f;
  text-decoration:none;white-space:nowrap;width:100%;
  border:0;background:transparent;text-align:left;cursor:pointer;
  box-sizing:border-box;
  appearance:none;-webkit-appearance:none;
}
.topbar .nav-dropdown a:hover,
.topbar .nav-dropdown button[role="menuitem"]:hover{
  background:#eef0fb;color:var(--portal-indigo);
}
.topbar .nav-dropdown a.active{font-weight:600;color:var(--portal-indigo);background:#f4f5fb}
.topbar .nav-dropdown .dropdown-divider{
  height:1px;background:#d0d0d0;margin:4px 0;
}

.app-shell{
  display:flex;
  height:calc(100vh - var(--topbar-height));
  width:100%;
}

.sidebar{
  width:var(--sidebar-width);
  flex:none;
  display:flex;flex-direction:column;
  background:var(--portal-side);
  border-right:1px solid #d0d0d0;
  font-family:"halyard-text",Arial,Helvetica,sans-serif;
  font-size:12px;
  z-index:40;
}
.sidebar-header{padding:12px 12px 8px;flex:none}
.sidebar-title{
  font-size:13px;font-weight:700;color:#2d2d2d;line-height:1.35;margin:0;
}
.sidebar-scroll{flex:1;overflow-y:auto;padding:0 8px 14px}
.sidebar-section{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--portal-muted);padding:10px 8px 4px;
}
.sidebar-link{
  display:block;padding:5px 8px;color:#464b4b;text-decoration:none;
  line-height:1.3;font-size:12px;border:0;background:none;width:100%;
  text-align:left;cursor:pointer;font:inherit;box-sizing:border-box;
}
.sidebar-link:hover{background:#e8e8e8;color:var(--portal-indigo)}
.sidebar-link.active{
  background:#dde8f7;color:var(--portal-indigo);font-weight:600;
}
.sidebar-link.part{
  font-weight:700;color:var(--portal-indigo);margin-top:6px;
}
.sidebar-link.sub{padding-left:18px;font-size:11.5px;color:#6b7280}
.sidebar-link.sub:hover,.sidebar-link.sub.active{color:var(--portal-indigo)}

.sidebar-backdrop{
  display:none;position:fixed;inset:var(--topbar-height) 0 0 0;
  background:rgba(37,40,42,.35);z-index:35;
}

.main-viewport{
  flex:1;min-width:0;min-height:0;
  overflow:auto;
  background:var(--portal-bg);
  display:flex;flex-direction:column;
}

/* Tool pages: fill the viewport (graph, sources, traceability) */
body.portal[data-page="sources"] .main-viewport,
body.portal[data-page="graph"] .main-viewport,
body.portal[data-page="traceability"] .main-viewport{
  overflow:hidden;
  background:#fff;
}

/* Tool pages: no Rapport TOC rail (no empty column, no collapsed ghost). */
body.portal.no-toc .sidebar,
body.portal.tool-page .sidebar,
body.portal.no-toc .sidebar-backdrop,
body.portal.tool-page .sidebar-backdrop,
body.portal.no-toc .topbar .nav-toggle,
body.portal.tool-page .topbar .nav-toggle{
  display:none!important;
}
body.portal.no-toc .app-shell,
body.portal.tool-page .app-shell{
  display:block;
}
body.portal.no-toc .main-viewport,
body.portal.tool-page .main-viewport{
  margin-left:0;
  width:100%;
  max-width:100%;
  height:calc(100vh - var(--topbar-height));
}

@media(max-width:900px){
  .topbar .nav-toggle{display:inline-flex}
  .topbar .ttl{font-size:11px;max-width:36vw;overflow:hidden;text-overflow:ellipsis}
  .sidebar{
    position:fixed;top:var(--topbar-height);left:0;bottom:0;
    transform:translateX(-105%);
    transition:transform .18s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.12);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .sidebar-backdrop{display:block}
  /* Admin: full-width expandable list in the topbar row area on small screens */
  .topbar .nav-item.admin-only{position:static}
  .topbar .nav-dropdown{
    position:fixed;top:var(--topbar-height);right:8px;left:auto;
    max-width:min(280px,92vw);
  }
}

@media print{
  body.portal{padding-top:0;height:auto;overflow:visible;background:#fff}
  .topbar,.sidebar,.sidebar-backdrop{display:none!important}
  .app-shell{display:block;height:auto}
  .main-viewport{overflow:visible;background:#fff}
}