/* Agency dashboard shell: left sidebar (desktop) / off-canvas drawer (<1024px) and the
   56px top bar. Chrome only — page content is untouched. Colours here are fixed on
   purpose (the sidebar is brand chrome, not themed content). */

:root{--ag-w:232px;--ag-top:56px}
html.ag-collapsed{--ag-w:64px}

#portal-screen{padding-left:var(--ag-w);transition:padding-left .18s ease}
#portal-screen>.main{margin:0 auto;max-width:1320px;padding:28px 36px}
#portal-screen>#client-detail-screen{max-width:1320px!important}

/* ── sidebar ───────────────────────────────────────────── */
.ag-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--ag-w);z-index:150;display:flex;flex-direction:column;
  background:#0F172A;color:#A7B0C0;font-family:var(--font,'Montserrat'),sans-serif;transition:width .18s ease}
.ag-sidebar *{box-sizing:border-box}
.ag-side-head{height:var(--ag-top);flex-shrink:0;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #1E293B}
.ag-brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:#fff}
.ag-mark{width:30px;height:30px;border-radius:8px;background:#1AA3E6;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;flex-shrink:0;overflow:hidden}
.ag-mark img{width:100%;height:100%;object-fit:cover}
.ag-word{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-badge{font-size:10px;font-weight:600;color:#A7B0C0;background:#1E293B;border-radius:999px;padding:2px 8px;white-space:nowrap}
/* the horizontal custom logo stays in the DOM (the PDF report reads it) but isn't shown in the sidebar */
#ag-sidebar #tlogo-horizontal{display:none!important}
#ag-sidebar #tlogo-default{display:flex!important}
/* an uploaded horizontal logo replaces the mark + wordmark, drawn straight on the navy (made for dark backgrounds);
   the collapsed rail has no room for it and keeps the icon */
#ag-sidebar #tlogo-horizontal{align-items:center;min-width:0}
#ag-sidebar #tlogo-horizontal img{display:block;height:30px;max-width:190px;object-fit:contain}
html.ag-hlogo #ag-sidebar #tlogo-horizontal{display:flex!important}
html.ag-hlogo #ag-sidebar #tlogo-default{display:none!important}
html.ag-collapsed.ag-hlogo #ag-sidebar #tlogo-horizontal{display:none!important}
html.ag-collapsed.ag-hlogo #ag-sidebar #tlogo-default{display:flex!important}


.ag-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 12px;scrollbar-width:thin;scrollbar-color:#334155 transparent}
.ag-nav[data-ready="0"]{visibility:hidden}
.ag-glabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#64748B;padding:16px 12px 6px;white-space:nowrap}
.ag-nav.single .ag-glabel{display:none}
.ag-group[hidden],.ag-item[hidden]{display:none!important}
.ag-item{display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;margin:1px 0;border-radius:8px;text-decoration:none;
  font-size:14px;font-weight:500;color:#A7B0C0;white-space:nowrap;transition:background .12s,color .12s}
.ag-item svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ag-item:hover{background:rgba(255,255,255,.05);color:#E2E8F0}
.ag-item.active{background:#1E293B;color:#fff}
.ag-item:focus-visible,.ag-icon-btn:focus-visible,.ag-user-btn:focus-visible,.ag-brand:focus-visible,.ag-burger:focus-visible{outline:2px solid #1AA3E6;outline-offset:2px}

.ag-foot{flex-shrink:0;border-top:1px solid #1E293B;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.ag-sidebar .user-menu-wrap{position:relative}
.ag-user-btn{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:8px;border:none;background:transparent;cursor:pointer;
  color:#E2E8F0;font-family:inherit;text-align:left}
.ag-user-btn:hover{background:rgba(255,255,255,.05)}
.ag-sidebar .user-avatar-circle{width:30px;height:30px;font-size:12px;font-weight:700;background:#1AA3E6;color:#fff}
.ag-sidebar .user-email-label{flex:1;min-width:0;max-width:none;font-size:13px;font-weight:500;color:#E2E8F0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-chev{width:14px;height:14px;flex-shrink:0;opacity:.6}
.ag-sidebar .user-dropdown{top:auto;bottom:calc(100% + 8px);left:0;right:0;min-width:0;background:#1E293B;border:1px solid #334155;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.ag-sidebar .user-dropdown-header{border-bottom-color:#334155}
.ag-sidebar .user-dropdown-email{color:#A7B0C0}
.ag-sidebar .drop-btn{color:#CBD5E1}
.ag-sidebar .drop-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.ag-sidebar .drop-btn-danger:hover{background:rgba(239,68,68,.14)!important;color:#FCA5A5!important}
.ag-sidebar .user-dropdown div[style*="height:1px"]{background:#334155!important}
.ag-collapse{display:flex;align-items:center;gap:12px;width:100%;height:34px;padding:0 12px;border-radius:8px;border:none;background:transparent;cursor:pointer;
  color:#64748B;font-family:inherit;font-size:13px;font-weight:500}
.ag-collapse:hover{background:rgba(255,255,255,.05);color:#E2E8F0}
.ag-collapse svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.ag-collapse:focus-visible{outline:2px solid #1AA3E6;outline-offset:2px}

/* collapsed rail (desktop only) */
html.ag-collapsed .ag-word,html.ag-collapsed .ag-badge,html.ag-collapsed .ag-lbl,
html.ag-collapsed .ag-user-btn .user-email-label,html.ag-collapsed .ag-chev,html.ag-collapsed .ag-collapse span{display:none!important}
html.ag-collapsed .ag-side-head{padding:0;justify-content:center}
html.ag-collapsed .ag-glabel{height:1px;padding:0;margin:10px 8px 8px;background:#1E293B;font-size:0;overflow:hidden}
html.ag-collapsed .ag-nav.single .ag-glabel{display:none}
html.ag-collapsed .ag-nav{padding:6px 10px 12px}
html.ag-collapsed .ag-item{justify-content:center;padding:0}
html.ag-collapsed .ag-user-btn{justify-content:center;padding:6px 0}
html.ag-collapsed .ag-collapse{justify-content:center;padding:0}
html.ag-collapsed .ag-collapse svg{transform:rotate(180deg)}
html.ag-collapsed .ag-sidebar .user-dropdown{left:0;right:auto;min-width:220px}

.ag-tip{position:fixed;z-index:1100;background:#0F172A;color:#fff;font:600 12px/1 var(--font,'Montserrat'),sans-serif;padding:8px 10px;border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .1s,transform .1s}
.ag-tip.on{opacity:1;transform:none}

/* ── top bar ───────────────────────────────────────────── */
.ag-topbar{position:sticky;top:0;z-index:100;height:var(--ag-top);display:flex;align-items:center;gap:12px;padding:0 36px;
  background:#fff;border-bottom:1px solid #E5E7EB;color:#0F172A;font-family:var(--font,'Montserrat'),sans-serif}
.ag-crumbs{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#64748B;white-space:nowrap;overflow:hidden}
.ag-crumbs a{color:#64748B;text-decoration:none}
.ag-crumbs a:hover{color:#0F172A;text-decoration:underline}
.ag-crumbs .sep{color:#CBD5E1}
.ag-title{margin:0;font-size:15px;font-weight:700;color:#0F172A;overflow:hidden;text-overflow:ellipsis}
.ag-top-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ag-date{font-size:13px;font-weight:500;color:#64748B}
.ag-burger,.ag-top-logo,.ag-top-av{display:none}

/* ── mobile / tablet drawer ────────────────────────────── */
.ag-overlay{display:none}
@media (max-width:1023.98px){
  :root{--ag-w:0px}
  html.ag-collapsed{--ag-w:0px}
  #portal-screen{padding-left:0}
  #portal-screen>.main{padding:20px 16px!important}
  #portal-screen .theme-tabs{max-width:100%}

  .ag-sidebar{width:260px;z-index:210;transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:none}
  html.ag-nav-open .ag-sidebar{transform:none;visibility:visible;transition-delay:0s;box-shadow:8px 0 30px rgba(0,0,0,.35)}
  .ag-overlay{display:block;position:fixed;inset:0;z-index:205;background:rgba(15,23,42,.55);opacity:0;pointer-events:none;transition:opacity .22s}
  html.ag-nav-open .ag-overlay{opacity:1;pointer-events:auto}
  html.ag-nav-open,html.ag-nav-open body{overflow:hidden}
  .ag-sidebar .ag-collapse{display:none}
  /* the drawer ignores the desktop collapsed state */
  html.ag-collapsed .ag-word,html.ag-collapsed .ag-badge,html.ag-collapsed .ag-lbl,html.ag-collapsed .ag-user-btn .user-email-label,html.ag-collapsed .ag-chev{display:revert!important}
  html.ag-collapsed .ag-side-head{padding:0 16px;justify-content:flex-start}
  html.ag-collapsed .ag-item{justify-content:flex-start;padding:0 12px}
  html.ag-collapsed .ag-user-btn{justify-content:flex-start;padding:6px 8px}
  html.ag-collapsed .ag-glabel{height:auto;padding:16px 12px 6px;margin:0;background:none;font-size:11px}
  html.ag-collapsed .ag-nav{padding:6px 12px 12px}

  .ag-topbar{padding:0 8px;gap:0;justify-content:space-between}
  .ag-crumbs,.ag-date{display:none}
  .ag-burger,.ag-top-av{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;border-radius:10px;cursor:pointer;color:#0F172A}
  .ag-burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .ag-top-logo{display:flex;position:absolute;left:50%;transform:translateX(-50%);align-items:center;gap:8px;text-decoration:none;color:#0F172A;font-size:15px;font-weight:700}
  .ag-top-logo .ag-mark{width:28px;height:28px}
  /* the mobile top bar is white, so the dark-background logo gets a navy chip there */
  .ag-top-logo img.ag-hlogo-img{height:24px;max-width:150px;object-fit:contain;background:#0F172A;border-radius:8px;padding:6px 10px;box-sizing:content-box}
  html.ag-collapsed.ag-hlogo #ag-sidebar #tlogo-horizontal{display:flex!important}
  html.ag-collapsed.ag-hlogo #ag-sidebar #tlogo-default{display:none!important}
  .ag-top-av .user-avatar-circle{width:32px;height:32px;font-size:13px;font-weight:700;background:#1AA3E6;color:#fff}
  .ag-top-right{gap:0}
  /* secondary in-page crumbs come back on small screens, where the top bar has no title */
  .cs-crumb{display:block!important}
}
@media (min-width:1024px){.cs-crumb{display:none!important}}
@media (prefers-reduced-motion:reduce){.ag-sidebar,#portal-screen,.ag-overlay{transition:none}}
@media print{.ag-sidebar,.ag-topbar,.ag-overlay,.ag-tip{display:none!important}#portal-screen{padding-left:0}}

/* shown when the account has no dashboard tab at all (Onboarding-only or nothing) */
#ag-noaccess{position:fixed;inset:0;z-index:600;background:#0F172A;display:flex;align-items:center;justify-content:center;padding:20px;font-family:var(--font,'Montserrat'),sans-serif}
.ag-noaccess-card{max-width:440px;background:#1E293B;border:1px solid #334155;border-radius:14px;padding:28px;color:#E2E8F0;text-align:center}
.ag-noaccess-card h2{margin:0 0 10px;font-size:18px;color:#fff}
.ag-noaccess-card p{margin:0 0 20px;font-size:13.5px;line-height:1.55;color:#A7B0C0}
.ag-noaccess-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ag-noaccess-btn{display:inline-block;padding:10px 18px;border-radius:8px;border:1px solid #1AA3E6;background:#1AA3E6;color:#fff;font:600 13px inherit;font-family:inherit;text-decoration:none;cursor:pointer}
.ag-noaccess-btn.ghost{background:transparent;border-color:#475569;color:#CBD5E1}