/* Phase 5 preview. Explicit opt-in; no production selectors or routing overrides. */
.ep-nav-v5 { color:var(--ep-ink); }
.ep-nav-v5 .ep-nav-group { display:grid; gap:4px; }
.ep-nav-v5 .ep-nav-group + .ep-nav-group { margin-top:24px; }
.ep-nav-v5 .ep-nav-label { margin:0 12px 8px; color:var(--ep-ink-3); font-size:12px; font-weight:500; }
.ep-nav-v5 .ep-nav-link {
 position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;
 border:1px solid transparent;border-radius:10px;color:var(--ep-ink-2);text-decoration:none;
 font:inherit;font-size:13px;text-align:start;background:transparent;
 transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease;
}
.ep-nav-v5 .ep-nav-link svg { width:19px;height:19px;flex:none;color:var(--ep-ink-3); }
.ep-nav-v5 .ep-nav-link[aria-current="page"] { color:var(--ep-accent-2);background:color-mix(in srgb,var(--ep-accent) 10%,transparent);border-color:color-mix(in srgb,var(--ep-accent) 22%,transparent);font-weight:700; }
.ep-nav-v5 .ep-nav-link[aria-current="page"]::before { content:"";position:absolute;inset-inline-start:-1px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--ep-accent); }
.ep-nav-v5 .ep-nav-link[aria-current="page"] svg { color:inherit; }
.ep-nav-v5 .ep-nav-tag { margin-inline-start:auto;padding:1px 7px;border-radius:6px;background:var(--ep-surface-2);color:var(--ep-ink-3);font-size:11px;font-weight:500; }
.ep-nav-v5 .ep-nav-external { margin-inline-start:auto; }
.ep-nav-v5 .ep-mobile-nav { display:none; }
.ep-nav-v5 .ep-nav-link:focus-visible,
.ep-nav-v5 .ep-mobile-nav a:focus-visible,
.ep-nav-v5 .ep-mobile-nav button:focus-visible,
.ep-nav-v5 .ep-nav-filter button:focus-visible { outline:2px solid var(--ep-accent);outline-offset:2px;transition:none; }
.ep-nav-v5 .ep-nav-filter { display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--ep-border);border-radius:12px;background:var(--ep-inset);width:fit-content;max-width:100%; }
.ep-nav-v5 .ep-nav-filter button { min-height:44px;min-width:64px;padding:8px 16px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ep-ink-2);font:inherit;font-size:13px;cursor:pointer; }
.ep-nav-v5 .ep-nav-filter button[aria-pressed="true"] { background:var(--ep-surface);border-color:var(--ep-border-2);color:var(--ep-ink);box-shadow:0 1px 2px var(--ep-border);font-weight:700; }
@media (hover:hover) and (pointer:fine) {
 .ep-nav-v5 .ep-nav-link:hover:not([aria-current]) { background:var(--ep-surface-2);color:var(--ep-ink); }
 .ep-nav-v5 .ep-nav-filter button:hover:not([aria-pressed="true"]) { background:var(--ep-surface-2); }
}
@media (max-width:767px) {
 .ep-nav-v5 .ep-mobile-nav { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;inset-inline:0;z-index:20;padding:8px 8px max(8px,env(safe-area-inset-bottom));background:linear-gradient(var(--ep-overlay),var(--ep-overlay)),var(--ep-bg);border-top:1px solid var(--ep-border);gap:4px; }
 .ep-nav-v5 .ep-mobile-nav a,.ep-nav-v5 .ep-mobile-nav button { position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:56px;padding:6px 2px;border:0;border-radius:10px;background:transparent;color:var(--ep-ink-2);font:inherit;font-size:11px;text-decoration:none;cursor:pointer; }
 .ep-nav-v5 .ep-mobile-nav svg { width:20px;height:20px; }
 .ep-nav-v5 .ep-mobile-nav [aria-current="page"],.ep-nav-v5 .ep-mobile-nav [data-current-section] { color:var(--ep-accent-2);background:color-mix(in srgb,var(--ep-accent) 10%,transparent);font-weight:700; }
 .ep-nav-v5 .ep-mobile-nav [aria-current="page"]::after,.ep-nav-v5 .ep-mobile-nav [data-current-section]::after { content:"";position:absolute;top:0;width:16px;height:2px;border-radius:2px;background:var(--ep-accent); }
}
@media(prefers-reduced-motion:reduce) { .ep-nav-v5 .ep-nav-link { transition:none; } }
/* Occasional pointer-open sheet only; no animation for keyboard or reduced motion. */
@keyframes ep-nav-enter { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) {
 .ep-nav-v5 .ep-nav-dialog[open][data-motion="true"] { animation:ep-nav-enter 180ms cubic-bezier(.23,1,.32,1); }
}
/* Keep the existing green hue readable on the light surface. */
html:not(.dark) .ep-nav-v5 .ep-nav-link[aria-current="page"],
html:not(.dark) .ep-nav-v5 .ep-mobile-nav [aria-current="page"],
html:not(.dark) .ep-nav-v5 .ep-mobile-nav [data-current-section] {
 color:color-mix(in srgb,var(--ep-accent) 72%,var(--ep-ink));
}

/* Inset content joins the header and sidebar into one continuous frame. */
.ep-nav-v5 .ep-panel-frame {
 min-width:0;min-height:calc(100dvh - 92px);margin-block-end:12px;margin-inline-end:12px;
 background:var(--ep-bg);border:1px solid var(--ep-border);border-radius:24px;
}
@media (max-width:767px) {
 .ep-nav-v5 .ep-panel-frame { min-height:calc(100dvh - 70px);margin-inline:8px;border-radius:20px; }
}

/* Real panel shell. Existing palette, data components and modal controllers stay intact. */
html body.ep-navigation-live .ep-shell { background:linear-gradient(var(--ep-surface),var(--ep-surface)),var(--ep-bg);min-height:0; }
html body.ep-navigation-live .side-bar { background:transparent;border:0;height:100%;padding-bottom:16px; }
html body.ep-navigation-live #ep-navigation-home { width:248px;flex-shrink:0;min-height:0; }
html body.ep-navigation-live .panel-header { background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0; }
html body.ep-navigation-live .ep-panel-frame { min-height:0;margin-bottom:12px;margin-inline-end:12px;overscroll-behavior:contain;outline:none; }
html body.ep-navigation-live .toggleable-section:focus { outline:none; }
html body.ep-navigation-live .ep-navigation-groups { padding:8px 16px 20px; }
html body.ep-navigation-live .ep-navigation-footer { margin-top:auto;padding:12px 16px 0; }
html body.ep-navigation-live .ep-nav-link { width:100%;cursor:pointer; }
html body.ep-navigation-live .ep-nav-link i { width:20px;text-align:center;flex:none;font-size:15px;color:var(--ep-ink-3); }
html body.ep-navigation-live .ep-nav-link[aria-current="page"] i { color:inherit; }
html body.ep-navigation-live .ep-nav-external { font-size:11px; }
html body.ep-navigation-live .ep-nav-dialog { padding:0;border:1px solid var(--ep-border);border-radius:20px 20px 0 0;background:linear-gradient(var(--ep-overlay),var(--ep-overlay)),var(--ep-bg);color:var(--ep-ink);width:100%;max-width:100%;max-height:85dvh;margin:auto 0 0;overflow:hidden; }
html body.ep-navigation-live .ep-nav-dialog[open] { display:flex;flex-direction:column; }
html body.ep-navigation-live .ep-nav-dialog::backdrop { background:rgba(0,0,0,.6);backdrop-filter:blur(5px); }
html body.ep-navigation-live .ep-nav-dialog-head { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--ep-border);flex:none; }
html body.ep-navigation-live .ep-nav-dialog-head h2 { font-size:16px;font-weight:700; }
html body.ep-navigation-live #ep-navigation-close { width:44px;height:44px;border-radius:10px;color:var(--ep-ink);background:transparent;border:1px solid var(--ep-border);cursor:pointer; }
html body.ep-navigation-live #ep-navigation-close:focus-visible { outline:2px solid var(--ep-accent);outline-offset:2px; }
html body.ep-navigation-live #ep-navigation-mount { overflow-y:auto;min-height:0;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom); }
html body.ep-navigation-live .ep-nav-dialog .side-bar { position:static;transform:none;width:100%;height:auto;z-index:auto;overflow:visible;transition:none; }
html body.ep-navigation-live .ep-nav-dialog .side-bar > .p-4 { display:none; }
html body.ep-navigation-live .ep-validity-total { display:block;flex-basis:100%;font-size:12px;font-weight:400;line-height:1.8;color:var(--ep-ink-3);text-align:end; }
html body.ep-navigation-live .ep-dash-meters > div:nth-child(2) .mr-auto { flex-wrap:wrap;justify-content:flex-end;max-width:70%; }
html body.ep-navigation-live .ep-nav-filter { gap:4px;padding:4px;border-radius:12px; }
html body.ep-navigation-live .ep-nav-filter > button { min-height:44px;min-width:64px;padding:8px 16px;border:1px solid transparent;border-radius:8px;font-size:13px; }
html body.ep-navigation-live .ep-nav-filter > button[aria-pressed="true"] { background:var(--ep-surface);border-color:var(--ep-border-2);color:var(--ep-ink); }
html body.ep-navigation-live:not(.ep-navigation-ready) .ep-mobile-nav { display:none; }
@media (max-width:1023px) {
 html body.ep-navigation-live.ep-navigation-ready #ep-navigation-home { display:none; }
 html body.ep-navigation-live.ep-navigation-ready .side-blur { display:none!important; }
 html body.ep-navigation-live .ep-shell-main { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
 html body.ep-navigation-live .ep-panel-frame { margin-inline:8px;margin-bottom:0;border-radius:20px; }
 html body.ep-navigation-live.ep-navigation-ready .ep-mobile-nav { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;inset-inline:0;z-index:20;padding:8px 8px max(8px,env(safe-area-inset-bottom));background:linear-gradient(var(--ep-overlay),var(--ep-overlay)),var(--ep-bg);border-top:1px solid var(--ep-border);gap:4px; }
 html body.ep-navigation-live .ep-mobile-nav button { position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:56px;padding:6px 2px;border:0;border-radius:10px;background:transparent;color:var(--ep-ink-2);font:inherit;font-size:11px;cursor:pointer; }
 html body.ep-navigation-live .ep-mobile-nav i { font-size:18px; }
 html body.ep-navigation-live .ep-mobile-nav [aria-current="page"],html body.ep-navigation-live .ep-mobile-nav [data-current-section] { color:var(--ep-accent-2);background:color-mix(in srgb,var(--ep-accent) 10%,transparent);font-weight:700; }
 html body.ep-navigation-live .ep-mobile-nav [aria-current="page"]::after,html body.ep-navigation-live .ep-mobile-nav [data-current-section]::after { content:"";position:absolute;top:0;width:16px;height:2px;border-radius:2px;background:var(--ep-accent); }
 html body.ep-navigation-live .ep-current-location #header-section-title { font-size:13px; }
 html body.ep-navigation-live .ep-current-location > div + div { display:none; }
 html body.ep-navigation-live .ep-nav-filter { flex-wrap:wrap; }
}
@media(max-width:479px) { html body.ep-navigation-live .ep-current-location { display:none; } }
@media(min-width:1024px) { html body.ep-navigation-live .ep-mobile-nav { display:none; } }
html:not(.dark) body.ep-navigation-live .ep-mobile-nav [aria-current="page"],
html:not(.dark) body.ep-navigation-live .ep-mobile-nav [data-current-section] { color:color-mix(in srgb,var(--ep-accent) 72%,var(--ep-ink)); }
/* Keep the chart's screen-reader data table from widening narrow RTL layouts. */
html body.ep-navigation-live #ug-chart-card .sr-only { display:block; }
html body.ep-navigation-live { height:100dvh; }
@media(max-width:1023px) {
 html body.ep-navigation-live #ep-navigation-home { width:0; }
 html body.ep-navigation-live:not(.ep-navigation-ready) .ep-shell-main { padding-bottom:0; }
}

/* Only the header/right sidebar frame the page; no left or bottom rail. */
html body.ep-navigation-live .ep-panel-frame {
 margin:0;border:0;border-block-start:1px solid var(--ep-border);border-inline-start:1px solid var(--ep-border);
 border-radius:0;border-start-start-radius:24px;
}
/* The scroll frame owns page gutters; outer component wrappers must not add a second set. */
html body.ep-navigation-live :is(#dashboard,#connections,#payments,#serverlist,#settings) > div.p-4,
html body.ep-navigation-live :is(#support,#affiliate,#leaderboard) > .ep-page { padding:0; }
@media(max-width:1023px) {
 html body.ep-navigation-live .ep-panel-frame { border-inline-start:0;border-start-start-radius:20px;border-start-end-radius:20px; }
}

/* Keep overflowing navigation reachable on short screens. Only the scroll
   containers are LTR to put native scrollbars on the physical right. */
html body.ep-navigation-live #ep-navigation-home > .side-bar,
html body.ep-navigation-live #ep-navigation-mount {
 direction:ltr;overflow-y:auto;overflow-x:hidden;
 scrollbar-width:thin;scrollbar-color:var(--ep-border-2) transparent;
 overscroll-behavior-y:contain;
}
html body.ep-navigation-live #ep-navigation-home > .side-bar > *,
html body.ep-navigation-live #ep-navigation-mount > .side-bar { direction:rtl; }
html body.ep-navigation-live :is(#ep-navigation-home > .side-bar,#ep-navigation-mount):is(:hover,:focus-within) {
 scrollbar-color:var(--ep-accent) transparent;
}
/* Fallback for browsers without the standard scrollbar properties. */
html body.ep-navigation-live :is(#ep-navigation-home > .side-bar,#ep-navigation-mount)::-webkit-scrollbar { width:6px; }
html body.ep-navigation-live :is(#ep-navigation-home > .side-bar,#ep-navigation-mount)::-webkit-scrollbar-track { background:transparent; }
html body.ep-navigation-live :is(#ep-navigation-home > .side-bar,#ep-navigation-mount)::-webkit-scrollbar-thumb { background:var(--ep-border-2);border-radius:8px; }
html body.ep-navigation-live :is(#ep-navigation-home > .side-bar,#ep-navigation-mount):is(:hover,:focus-within)::-webkit-scrollbar-thumb { background:var(--ep-accent); }
@media(forced-colors:active) {
 html body.ep-navigation-live :is(#ep-navigation-home > .side-bar,#ep-navigation-mount) { scrollbar-color:auto; }
}

/* Compact customer navigation: preserve labels, permissions and native scrolling. */
@media(min-width:1024px){
 html body.ep-navigation-live #ep-navigation-home,
 html body.ep-navigation-live #ep-navigation-home>.side-bar{width:212px}
 html body.ep-navigation-live #ep-main-navigation>.p-4{padding:12px 10px 8px}
 html body.ep-navigation-live #ep-main-navigation>.p-4>a{gap:9px;padding:8px 10px;border-radius:10px}
 html body.ep-navigation-live #ep-main-navigation>.p-4 img{height:30px;width:auto}
 html body.ep-navigation-live #ep-main-navigation>.p-4 a>span{font-size:15px}
 html body.ep-navigation-live .ep-navigation-groups{padding:6px 10px 10px}
 html body.ep-navigation-live .ep-nav-group{gap:2px}
 html body.ep-navigation-live .ep-nav-group+.ep-nav-group{margin-top:14px}
 html body.ep-navigation-live .ep-nav-label{font-size:11px;margin:0 10px 5px}
 html body.ep-navigation-live .ep-nav-link{min-height:40px;padding:8px 10px;gap:9px;font-size:12px;border-radius:8px;line-height:1.6}
 html body.ep-navigation-live .ep-nav-link i{width:18px;font-size:14px}
 html body.ep-navigation-live .ep-nav-link .ep-nav-external{font-size:10px}
 html body.ep-navigation-live .ep-nav-link[aria-current=page]::before{top:11px;bottom:11px}
 html body.ep-navigation-live .ep-navigation-footer{padding:8px 10px 0}
 html body.ep-navigation-live #ep-main-navigation>.side-item{min-height:40px;padding-block:8px}
 html body.ep-navigation-live .side-bar{padding-bottom:10px}
}
@media(min-width:1024px) and (pointer:coarse){html body.ep-navigation-live .ep-nav-link{min-height:44px}}
@media(max-width:1023px){
 html body.ep-navigation-live .ep-nav-dialog .ep-navigation-groups{padding:10px 14px 12px}
 html body.ep-navigation-live .ep-nav-dialog .ep-nav-group+.ep-nav-group{margin-top:16px}
 html body.ep-navigation-live .ep-nav-dialog .ep-nav-group{gap:2px}
 html body.ep-navigation-live .ep-nav-dialog .ep-nav-link{min-height:44px;padding:9px 12px}
}