/* ProTrenerov UI System 14 — navigation, mobile menu and consistent controls.
   Loaded last. Replaces the legacy dark/pill navigation treatment without touching page logic. */
:root{
  --ui14-surface:var(--paper,#fff);
  --ui14-surface-2:var(--paper-2,#edf2f6);
  --ui14-line:var(--line,#dbe4eb);
  --ui14-accent:var(--volt,#c8ff3d);
  --ui14-accent-ink:var(--volt-ink,#17220f);
}

/* Shared navigation card: light, quiet, segmented — no dark strip. */
.info-nav{
  display:flex!important;
  align-items:stretch;
  flex-wrap:wrap;
  gap:6px!important;
  padding:7px!important;
  margin:0 0 26px!important;
  border:1px solid var(--ui14-line)!important;
  border-radius:20px!important;
  background:color-mix(in srgb,var(--ui14-surface) 94%,transparent)!important;
  box-shadow:0 12px 34px rgba(22,38,29,.07)!important;
}
.info-nav a{
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 1 auto;
  padding:10px 16px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  color:var(--ink)!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:none!important;
  transform:none!important;
  white-space:nowrap;
}
.info-nav a:hover,.info-nav a:focus-visible{
  background:var(--ui14-surface-2)!important;
  border-color:var(--ui14-line)!important;
  box-shadow:none!important;
  transform:none!important;
}
.info-nav a.is-active,.info-nav a[aria-current="page"]{
  background:var(--ui14-accent)!important;
  border-color:var(--ui14-accent)!important;
  color:var(--ui14-accent-ink)!important;
  box-shadow:0 7px 18px rgba(180,225,55,.18)!important;
}

/* Primary internal/staff navigation: same system, never a black/navy bar. */
.workspace-primary-nav18{
  background:var(--ui14-surface)!important;
  border-color:var(--ui14-line)!important;
  box-shadow:0 14px 38px rgba(22,38,29,.08)!important;
}
.workspace-primary-nav18 a{
  background:transparent!important;
  color:var(--ink)!important;
  border-color:transparent!important;
}
.workspace-primary-nav18 a:hover,.workspace-primary-nav18 a:focus-visible{
  background:var(--ui14-surface-2)!important;
  color:var(--ink)!important;
}
.workspace-primary-nav18 a.is-active,.workspace-primary-nav18 a[aria-current="page"]{
  background:var(--ui14-accent)!important;
  color:var(--ui14-accent-ink)!important;
}
.workspace-links18{
  overflow-x:auto!important;
  flex-wrap:nowrap!important;
  scrollbar-width:thin;
}
.workspace-links18 a{flex:0 0 auto!important;}

/* Commercial navigation keeps its existing card language, but shares the same active treatment. */
.pro-commercial-nav18 a.active{background:var(--ui14-accent)!important;color:var(--ui14-accent-ink)!important;}

/* Mobile menu: one real close control (the header toggle); menu owns the viewport below the header. */
@media(max-width:860px){
  body.ui14-menu-open{overflow:hidden!important;overscroll-behavior:none!important;}
  body.ui14-menu-open .mobile-dock{display:none!important;}
  .mobile-menu{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    top:68px!important;
    width:auto!important;
    max-height:none!important;
    height:calc(100dvh - 68px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    display:none!important;
    padding:18px 20px calc(32px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-top:1px solid var(--ui14-line)!important;
    border-radius:0!important;
    background:var(--ui14-surface)!important;
    box-shadow:0 20px 60px rgba(15,30,22,.16)!important;
  }
  .mobile-menu.open{display:block!important;}
  .mobile-menu-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:4px 0 16px!important;
    margin:0 0 10px!important;
    border-bottom:1px solid var(--ui14-line)!important;
  }
  .mobile-menu-head b{font-size:24px!important;letter-spacing:-.04em;}
  .mobile-menu-head button{display:none!important;}
  .mobile-menu a,.mobile-menu .mobile-city-row{
    min-height:56px!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    margin:2px 0!important;
    padding:15px 14px!important;
    border:1px solid transparent!important;
    border-radius:16px!important;
    background:transparent!important;
    color:var(--ink)!important;
    font-size:17px!important;
    font-weight:800!important;
  }
  .mobile-menu a:hover,.mobile-menu a:focus-visible{background:var(--ui14-surface-2)!important;border-color:var(--ui14-line)!important;}
  .mobile-menu .mobile-city-row{
    margin:4px 0 14px!important;
    min-height:64px!important;
    background:color-mix(in srgb,var(--ui14-accent) 18%,var(--ui14-surface))!important;
    border-color:color-mix(in srgb,var(--ui14-accent) 42%,var(--ui14-line))!important;
    color:var(--ui14-accent-ink)!important;
    text-align:left!important;
  }
  .mobile-menu .mobile-city-row:before{content:'⌖';font-size:23px;line-height:1;}
  .mobile-menu .mobile-city-row span{margin-right:auto;}
  .mobile-menu .mobile-city-row b{font-size:16px!important;}
  .mobile-menu .danger-link{color:#b53c3c!important;border-top:1px solid var(--ui14-line)!important;margin-top:12px!important;padding-top:22px!important;}

  /* Header toggle is the only close affordance. */
  .top-actions .menu-button[aria-expanded="true"]{
    background:var(--ui14-accent)!important;
    border-color:var(--ui14-accent)!important;
    border-radius:50%!important;
  }
  .top-actions .menu-button[aria-expanded="true"] .menu-lines1864 i:nth-child(1){transform:translateY(4px) rotate(45deg);}
  .top-actions .menu-button[aria-expanded="true"] .menu-lines1864 i:nth-child(2){opacity:0;}
  .top-actions .menu-button[aria-expanded="true"] .menu-lines1864 i:nth-child(3){transform:translateY(-4px) rotate(-45deg);}
  .menu-lines1864 i{transition:transform .16s ease,opacity .16s ease;}

  /* Internal navs: two-column touch grid instead of pill soup. */
  .internal-workspace18 .info-nav,
  .internal-workspace18 .workspace-primary-nav18,
  .internal-workspace18 .workspace-links18{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px!important;
    overflow:visible!important;
  }
  .internal-workspace18 .info-nav a,
  .internal-workspace18 .workspace-primary-nav18 a,
  .internal-workspace18 .workspace-links18 a{
    min-width:0!important;
    min-height:52px!important;
    width:100%!important;
    padding:11px 10px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.15!important;
  }

  /* Generic public navigation such as compare/info: compact two-column card. */
  .info-nav:not(.workspace-primary-nav18):not(.workspace-links18):not(.trainer-pro-nav18){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .info-nav:not(.workspace-primary-nav18):not(.workspace-links18):not(.trainer-pro-nav18) a{
    min-width:0!important;
    width:100%!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

@media(max-width:430px){
  .mobile-menu{top:64px!important;height:calc(100dvh - 64px)!important;padding-left:16px!important;padding-right:16px!important;}
  .info-nav:not(.workspace-primary-nav18):not(.workspace-links18):not(.trainer-pro-nav18) a,
  .internal-workspace18 .info-nav a,
  .internal-workspace18 .workspace-primary-nav18 a,
  .internal-workspace18 .workspace-links18 a{font-size:13px!important;}
}

/* Bottom dock: normalize the icon box, so glyphs cannot appear optically at different sizes. */
.mobile-dock186 span.dock-svg{
  width:26px!important;height:26px!important;display:grid!important;place-items:center!important;
  font-size:0!important;font-weight:400!important;
}
.mobile-dock186 span.dock-svg svg{width:22px!important;height:22px!important;display:block!important;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mobile-dock186 a.is-active span.dock-svg svg{stroke-width:2.2;}

/* V15 — admin summary cards are actual controls, with the same calm card language. */
.admin-summary-links{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));}
.admin-summary-link{appearance:none;width:100%;min-height:64px;padding:14px 18px;border:0;border-right:1px solid var(--ui14-line);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;font:inherit;cursor:pointer;transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.admin-summary-link:last-child{border-right:0;}
.admin-summary-link span{font-size:13px;color:var(--muted);}
.admin-summary-link b{font-size:24px;line-height:1;color:var(--ink);}
.admin-summary-link:hover,.admin-summary-link:focus-visible{background:var(--paper-2);outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--volt-ink) 20%,transparent);}
.admin-summary-link:active{transform:translateY(1px);}
@media(max-width:760px){.admin-summary-links{grid-template-columns:1fr 1fr}.admin-summary-link:nth-child(2){border-right:0}.admin-summary-link:nth-child(-n+2){border-bottom:1px solid var(--ui14-line)}.admin-summary-link{min-height:60px;padding:13px 14px}.admin-summary-link b{font-size:21px}}
