/* TP Context unified product navigation V5. Presentation only.
   No changes to route handlers, subscriptions, monitors or authentication. */
:root {
  --tp-v5-blue:#61caff;
  --tp-v5-cyan:#81e0f2;
  --tp-v5-border:rgba(91,166,215,.27);
  --tp-v5-surface:#081826;
  --tp-v5-text:#eaf7ff;
  --tp-v5-muted:#93aec1;
}

/* Desktop application chrome: left rail */
@media (min-width:901px) {
  body:not(.tpx-home-active) .app-layout {grid-template-columns:252px minmax(0,1fr)}
  body:not(.tpx-home-active) .app-sidebar {
    background:
      radial-gradient(ellipse 280px 200px at 0% 0%,rgba(41,137,202,.135),transparent 79%),
      linear-gradient(180deg,#0a1b2a 0%,#06121e 57%,#050e18 100%);
    border-right:1px solid var(--tp-v5-border);
    box-shadow:inset -1px 0 rgba(166,222,255,.035),12px 0 48px rgba(0,7,17,.14);
    padding:25px 13px 22px;
  }
  body:not(.tpx-home-active) .app-brand {
    margin:0 2px 20px; padding:5px 9px 24px;
    border-bottom:1px solid rgba(104,178,226,.16);
  }
  body:not(.tpx-home-active) .desktop-nav {gap:5px}
  body:not(.tpx-home-active) .desktop-nav :is(button,a).nav-item {
    display:flex; width:100%; min-width:0; min-height:45px;
    padding:10px 12px; gap:12px; border-radius:11px;
    color:#a8bdcf; font-size:12px; font-weight:650;
    letter-spacing:.005em; border:1px solid transparent; text-align:left;
    transition:background-color .18s,border-color .18s,color .18s;
  }
  body:not(.tpx-home-active) .desktop-nav .nav-item svg {width:19px;height:19px;flex:0 0 auto;stroke-width:1.75}
  body:not(.tpx-home-active) .desktop-nav .nav-item:hover {
    color:#edf9ff; border-color:rgba(103,195,243,.27);
    background:linear-gradient(115deg,rgba(40,103,148,.28),rgba(8,26,43,.4));
  }
  body:not(.tpx-home-active) .desktop-nav .nav-item.active,
  body:not(.tpx-home-active) .desktop-nav .nav-item[aria-current="page"] {
    color:#f0fcff; border-color:rgba(100,202,243,.49);
    background:linear-gradient(110deg,rgba(44,134,189,.34),rgba(15,62,103,.36));
    box-shadow:inset 3px 0 #6cddfa,0 9px 26px rgba(10,79,145,.11);
  }
  body:not(.tpx-home-active) .desktop-nav .nav-item.active svg {color:#94e8ff}
}

body:not(.tpx-home-active) .app-brand .app-logo {
  width:45px;height:45px; border-radius:13px;
  background:linear-gradient(135deg,#75e7f4,#369fd8 58%,#297ce0);
  color:#03172a; border:1px solid rgba(170,243,255,.7);
  box-shadow:0 4px 22px rgba(39,163,230,.19),inset 0 1px rgba(255,255,255,.32);
  font-weight:900;font-size:15px;
}
body:not(.tpx-home-active) .app-brand strong {color:#f5fbff;font-size:15px;letter-spacing:-.02em}
body:not(.tpx-home-active) .app-brand span {color:#93b9d0;font-size:11px;letter-spacing:.03em}
body:not(.tpx-home-active) .sidebar-footer {
  border-top-color:var(--tp-v5-border);border-radius:10px;
  padding:18px 11px 10px;gap:11px;
}
body:not(.tpx-home-active) .sidebar-footer strong {color:#e7f9ff;font-size:12px}
body:not(.tpx-home-active) .sidebar-footer small {color:#9eb8ca;font-size:10px}
body:not(.tpx-home-active) .sidebar-footer .sidebar-status-dot {
  background:#6dd9f4;box-shadow:0 0 0 5px rgba(73,173,241,.085),0 0 14px rgba(61,201,251,.23);
}

/* App heading and account toolbar, replacing the previous green accent. */
body:not(.tpx-home-active) .app-topbar {
  border-bottom:1px solid var(--tp-v5-border);
  background:linear-gradient(110deg,rgba(10,28,44,.96),rgba(5,17,29,.95));
  box-shadow:0 10px 34px rgba(1,8,18,.11);
}
body:not(.tpx-home-active) .topbar-view-heading {min-width:0}
body:not(.tpx-home-active) #viewEyebrow {
  color:#7bcaed;font-size:10px;letter-spacing:.18em;font-weight:800;
}
body:not(.tpx-home-active) #viewTitle {
  color:#f3fbff;letter-spacing:-.035em;line-height:1.13;
}
body:not(.tpx-home-active) .tp-shell-plan {
  color:#a0eaf7;border-color:rgba(92,190,235,.37);
  background:linear-gradient(115deg,rgba(40,110,167,.22),rgba(16,55,101,.27));
  box-shadow:inset 0 1px rgba(166,221,255,.045);
}
body:not(.tpx-home-active) .tp-shell-plan:hover {background:rgba(46,117,179,.3);border-color:rgba(117,211,245,.68)}
body:not(.tpx-home-active) .tp-account-trigger {
  background:rgba(20,45,66,.65);border-color:rgba(110,170,213,.32);
  color:#e3f4ff;
}
body:not(.tpx-home-active) .tp-account-trigger:hover {border-color:rgba(110,208,245,.69);background:rgba(31,78,106,.72)}
body:not(.tpx-home-active) .tp-account-menu {border-color:rgba(96,177,226,.38);background:#0a2032}

/* Monitors internal introduction remains distinct from the app-wide breadcrumb. */
#view-monitors .tpm-heading {align-items:center}
#view-monitors .tpm-heading .eyebrow {color:#88d4f3!important;letter-spacing:.16em}
#view-monitors .tpm-heading h2 {color:#f0faff;letter-spacing:-.045em}
#view-monitors .tpm-heading p {color:#a2bdcf}
#view-monitors .tpm-heading .tpm-primary:focus-visible,
body:not(.tpx-home-active) .desktop-nav a:focus-visible,
body:not(.tpx-home-active) .desktop-nav button:focus-visible {outline:2px solid #82ddff;outline-offset:3px}

/* Home: an actual route, not a disabled placeholder. */
body.tpx-home-active .tpx-navlinks {gap:clamp(14px,1.7vw,26px)!important}
body.tpx-home-active .tpx-navlinks .tp-v5-top-monitors {
  color:#c1ecff!important;white-space:nowrap;
  border-bottom:1px solid rgba(98,195,243,.35);
}
body.tpx-home-active .tpx-navlinks .tp-v5-top-monitors:hover {
  color:#fff!important;border-bottom-color:#9ce5fb;
}
body.tpx-home-active .tp-v5-mobile-monitors {display:none}

/* Mobile: five useful actions, including Monitores. No horizontal carousel. */
@media (max-width:900px) {
  .mobile-nav button[data-view="monitors"] {display:flex!important;min-width:0}
  .mobile-nav {grid-template-columns:repeat(5,minmax(0,1fr))!important;
    border-color:rgba(90,174,229,.38)!important;
    background:linear-gradient(160deg,rgba(11,30,46,.98),rgba(5,19,33,.98))!important;
  }
  .mobile-nav button.active {color:#96e3fa!important;background:rgba(59,149,205,.2)!important}
  .mobile-nav button svg {width:20px;height:20px}
  .mobile-nav button span {font-size:9px;line-height:1.2;text-align:center}
  body:not(.tpx-home-active) .app-topbar {padding-inline:14px;gap:10px}
}
/* Home's desktop links intentionally collapse on mobile; retain a directly visible route. */
@media (max-width:900px) {
  body.tpx-home-active .tpx-topnav-inner {display:flex!important;flex-wrap:nowrap!important;gap:8px!important}
  body.tpx-home-active .tpx-navlinks {display:none!important}
  body.tpx-home-active .tpx-nav-spacer {display:block!important;flex:1 1 auto;min-width:4px}
  body.tpx-home-active .tp-v5-mobile-monitors {
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;min-height:38px;padding:0 12px;white-space:nowrap;
    border:1px solid rgba(88,193,245,.46);border-radius:10px;
    background:rgba(24,83,128,.33);color:#bceeff;font-size:12px;
    font-weight:750;text-decoration:none;box-shadow:inset 0 1px rgba(174,230,252,.09);
  }
  body.tpx-home-active .tp-v5-mobile-monitors:focus-visible {outline:2px solid #86e5ff;outline-offset:3px}
}
@media (max-width:380px) {
  body.tpx-home-active .tpx-brand strong {font-size:12px!important}
  body.tpx-home-active .tp-v5-mobile-monitors {padding-inline:9px;font-size:11px}
  body.tpx-home-active .tp-nav-account {padding:9px 10px;font-size:11px}
}
@media (prefers-reduced-motion:reduce) {
  body:not(.tpx-home-active) .desktop-nav .nav-item {transition:none}
}