/* ══ Neon Center shell — the mockup top bar is the whole-portal chrome ══ */
    .app-neon{
      flex:1; min-height:0; display:flex; flex-direction:row; align-items:stretch;
      overflow:hidden;
      padding:0;
      background:#eef3f6;
      background-image:radial-gradient(900px 500px at 12% -8%,rgba(28,184,232,.10),transparent),radial-gradient(700px 420px at 100% 0%,rgba(31,157,91,.06),transparent);
    }
    html[data-theme="dark"] .app-neon{ background:#111214; }
    /* Left vertical sidebar (was the horizontal top bar). Permanently dark. */
    .app-neon > .tnav{ width:var(--sw); flex-shrink:0; position:relative; z-index:60; height:100vh; }
    .app-neon > .content{ flex:1; min-width:0; padding:0 !important; background:transparent !important; position:relative; z-index:1; display:flex; flex-direction:column; overflow-y:auto; }

    /* Sidebar — scoped tokens (prefixed) so nothing leaks to other tabs' content */
    .tnav{
      /* Light theme (default): light sidebar. */
      --pa:#ffffff; --pb:rgba(10,42,61,0.05); --ps:rgba(10,42,61,0.08);
      --bd:rgba(10,42,61,0.10); --t1:#0e2c3d; --t2:#4d6d7d; --t3:#8aa2ae;
      --cy:#16a8d3; --tl:#0d7fa0; --gr:#1f9d5b;
      display:flex; flex-direction:column; align-items:stretch; gap:14px;
      padding:18px 12px; border-right:1px solid var(--bd);
      background:var(--pa);
      font-family:'Inter',system-ui,sans-serif;
      overflow:visible;   /* let hover flyouts escape the rail */
    }
    html[data-theme="dark"] .tnav{
      --pa:#17181c; --pb:rgba(255,255,255,0.05); --ps:rgba(255,255,255,0.09);
      --bd:rgba(255,255,255,0.08); --t1:rgba(255,255,255,0.92); --t2:rgba(255,255,255,0.66); --t3:rgba(255,255,255,0.52);
    }
    .tnav-brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; padding:2px 8px 6px; }
    .tnav-mark{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }
    /* Logo follows the theme (sidebar is light in light mode, dark in dark mode). */
    .tnav-mark-dark{ display:none; }
    html[data-theme="dark"] .tnav-mark-light{ display:none; }
    html[data-theme="dark"] .tnav-mark-dark{ display:block; }
    .tnav-name{ font-size:15px; font-weight:700; color:var(--t1); line-height:1; letter-spacing:.1px; }
    .tnav-sub{ font-size:12px; letter-spacing:1.3px; text-transform:uppercase; color:var(--t3); margin-top:3px; }

    .tnav-menu{ display:flex; flex-direction:column; align-items:stretch; gap:2px; }
    .tnav-sec{ font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--t3); padding:14px 12px 5px; }
    .tnav-sec:first-child{ padding-top:4px; }
    .tnav-div{ height:1px; background:var(--sb-line); margin:10px 10px; }
    .tnav-grp{ position:relative; }
    .tnav-item{ display:flex; align-items:center; gap:11px; width:100%; font-size:13px; font-weight:500; color:var(--t2); padding:9px 12px; border-radius:var(--radius-control); cursor:pointer; background:transparent; border:none; font-family:inherit; white-space:nowrap; text-align:left; }
    .tnav-ic{ width:18px; height:18px; flex-shrink:0; }
    .tnav-grp > .tnav-item::after{ content:"›"; margin-left:auto; font-size:15px; color:var(--t3); }
    .tnav-item:hover{ color:var(--t1); background:var(--pb); }
    /* Active menu selector — exact client-portal selector colour (--brand #0891b2) */
    .tnav-item.active, .tnav-grp.active > .tnav-item{ background:#0891b2; color:#fff; }
    .tnav-item.active .tnav-ic, .tnav-grp.active > .tnav-item .tnav-ic{ color:#fff; }
    .tnav-item.active:hover, .tnav-grp.active > .tnav-item:hover{ background:#0a7fa0; color:#fff; }
    /* Hover flyout — pops the group's items out to the right of the rail. */
    .tnav-drop{ position:absolute; top:-4px; left:calc(100% + 8px); min-width:190px; background:#ffffff; border:1px solid var(--bd); border-radius:var(--radius-panel); box-shadow:var(--sh-md); padding:6px; display:none; z-index:1200; }
    /* Invisible bridge across the 8px gap so moving the cursor from the group
       into the flyout doesn't drop the hover and close it. */
    .tnav-drop::before{ content:""; position:absolute; top:0; bottom:0; left:-12px; width:12px; }
    html[data-theme="dark"] .tnav-drop{ background:#141414; }
    .tnav-grp.is-open .tnav-drop{ display:block; }
    .tnav-link{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; font-size:12.5px; font-weight:600; color:var(--t2); padding:9px 11px; border-radius:var(--radius-control); cursor:pointer; background:transparent; border:none; font-family:inherit; white-space:nowrap; }
    .tnav-link:hover{ background:var(--pb); color:var(--t1); }
    .tnav-link.active{ background:var(--ps); color:var(--t1); }

    /* Profile row pinned to the bottom of the sidebar (moved from the top bar). */
    .tnav-user{ margin-top:0; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-panel); cursor:pointer; position:relative; }
    .tnav-user:hover{ background:var(--pb); }
    .tnav-user .fg-av{ width:34px; height:34px; }
    .tnav-user-info{ flex:1; min-width:0; }
    .tnav-user .user-name{ font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tnav-user .user-role-el{ font-size:12px; color:var(--t3); margin-top:1px; }
    .tnav-user-cx{ width:16px; height:16px; color:var(--t3); flex-shrink:0; }
    .tnav .tb-user-menu{ top:auto; bottom:calc(100% + 8px); left:8px; right:8px; }

    /* Slim top bar in the content column — holds the utility controls. */
    .opsbar{
      --pa:rgba(255,255,255,0.86); --pb:rgba(10,42,61,0.06); --ps:#ffffff;
      --bd:rgba(10,42,61,0.10); --t1:#0e2c3d; --t2:#4d6d7d; --t3:#8aa2ae;
      --cy:#16a8d3; --tl:#0d7fa0; --gr:#1f9d5b;
      position:sticky; top:0; z-index:55; display:flex; align-items:center; gap:16px;
      padding:11px 22px; border-bottom:1px solid var(--bd);
      background:var(--pa); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
      font-family:'Inter',system-ui,sans-serif;
    }
    html[data-theme="dark"] .opsbar{
      --pa:#18191b; --pb:rgba(255,255,255,0.06); --ps:#1c1d20;
      --bd:rgba(255,255,255,0.08); --t1:#f2f2f2; --t2:#a8a8a8; --t3:#787878;
    }
    .opsbar-title{ font-size:15px; font-weight:700; color:var(--t1); letter-spacing:.1px; }

    .tnav-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:auto; position:relative; }
    .fg-sync{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--gr); background:rgba(31,157,91,.10); border:1px solid rgba(31,157,91,.22); padding:6px 12px; border-radius:var(--radius-pill); white-space:nowrap; }
    .fg-heart{ width:6px; height:6px; border-radius:50%; background:var(--gr); animation:fgbeat 2s ease-in-out infinite; }
    @keyframes fgbeat{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }
    .fg-toggle{ width:42px; height:24px; border-radius:var(--radius-pill); background:var(--pb); border:1px solid var(--bd); position:relative; cursor:pointer; flex-shrink:0; }
    .fg-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#c8ccd2; transition:left .2s ease; box-shadow:var(--sh-xs); }
    .tnav-theme{ display:flex; align-items:center; gap:11px; padding:12px 12px 9px; margin:auto 0 2px; border-radius:var(--radius-control); cursor:pointer; color:var(--t2); border-top:1px solid var(--sb-line); }
    .tnav-theme:hover{ color:var(--t1); background:var(--pb); }
    .tnav-theme .tnav-theme-lbl{ flex:1; font-size:13px; font-weight:500; }
    html[data-theme="dark"] .fg-toggle .fg-knob{ left:20px; }
    .fg-iconbtn{ width:34px; height:34px; border-radius:var(--radius-control); display:flex; align-items:center; justify-content:center; color:var(--t2); cursor:pointer; background:transparent; border:none; position:relative; }
    .fg-iconbtn:hover{ background:var(--pb); }
    .fg-iconbtn svg{ width:17px; height:17px; }
    .fg-av{ width:32px; height:32px; border-radius:50%; background:#3a3d42; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#e8eaed; cursor:pointer; border:none; }
    .opsbar .tb-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:var(--radius-control); background:#e5483c; color:#fff; font-size:12px; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--surface,#0b2733); }
    .opsbar .tb-user-menu{ right:0; left:auto; }

    /* dashboard aligns flush under the top bar: no double padding, full width, bg shows through */
    .app-neon .content .neon-dash{ padding:0 !important; background:transparent !important; }
    .app-neon .content .neon-dash > .wrap{ max-width:none !important; margin:0 !important; }
    /* Content gutter now that the outer page padding is gone (opsbar stays flush). */
    .app-neon > .content > .tab-content{ padding:20px 24px 28px; }
    /* Map popups follow the theme (were hardcoded light text → invisible on the dark popup). */
    .leaflet-popup-content-wrapper{ background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--border); box-shadow:var(--sh-md); }
    .leaflet-popup-tip{ background:var(--surface) !important; border:1px solid var(--border); }
    .leaflet-popup-close-button{ color:var(--ink-3) !important; }
    .leaflet-popup-content a{ color:var(--blue-hi); }

    /* On narrow screens the sidebar becomes a horizontal scrolling strip. */
    @media (max-width:820px){
      .app-neon{ flex-direction:column; }
      .app-neon > .tnav{ width:100%; height:auto; flex-direction:row; align-items:center; gap:10px; padding:10px 12px; border-right:none; border-bottom:1px solid var(--bd); overflow-x:auto; overflow-y:visible; }
      .tnav-brand{ padding:0; }
      .tnav-menu{ flex-direction:row; gap:4px; }
      .tnav-grp > .tnav-item::after{ display:none; }
      .tnav-drop{ top:calc(100% + 6px); left:0; }
      .tnav-sub{ display:none; }
      .app-neon > .content{ height:auto; }
    }
    @media (max-width:560px){
      .fg-sync{ display:none; }
      .opsbar{ padding:10px 14px; gap:10px; }
      .tnav-right{ gap:8px; }
    }