/* Navigation built from platform_app/navigation.py: sidebar with descriptions,
   breadcrumb, section tabs, the five-button phone dock and the Copilot button. */

/* Sidebar: the label, and a one-line description shown in the phone menu. */
.sidebar-nav a .nav-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sidebar-nav .nav-desc{display:none;font-size:11.5px;line-height:1.35;font-weight:400;color:var(--muted);white-space:normal}
@media(max-width:800px){
  .app-sidebar.navigation-open .sidebar-nav a{align-items:flex-start;padding-top:9px;padding-bottom:9px}
  .app-sidebar.navigation-open .sidebar-nav a .ui-icon{margin-top:2px}
  .app-sidebar.navigation-open .sidebar-nav .nav-desc{display:block}
}

/* Breadcrumb: the real page, and the section as a link back to its first page. */
.workspace-breadcrumb{display:flex;align-items:center;gap:8px}
.workspace-breadcrumb a{color:inherit;text-decoration:none}
/* On a phone the dock already says where you are. */
@media(max-width:800px){.app-shell .workspace-breadcrumb{display:none!important}}
.workspace-breadcrumb a:hover{color:var(--text);text-decoration:underline}

/* Tabs of a section with several pages (Рынки, Боты, Настройки, Помощь). */
.section-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;border:1px solid var(--line);border-radius:12px;
  background:var(--field,var(--card));overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.section-tabs::-webkit-scrollbar{display:none}
.section-tabs a{flex:0 0 auto;min-height:36px;display:inline-flex;align-items:center;padding:6px 16px;border-radius:9px;
  color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.section-tabs a:hover{color:var(--text)}
.section-tabs a[aria-current="page"]{background:var(--text);color:var(--card)}
.section-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){.section-tabs{width:100%}.section-tabs a{flex:1 1 0;justify-content:center;padding:6px 10px;font-size:13px}}

/* Page heading shared by the sections: the name and one line on what the page is for. */
.page-intro{margin:0 0 14px}
.page-intro h1{margin:0 0 6px;font-size:clamp(24px,3vw,32px);letter-spacing:-.5px}
.page-intro p{margin:0;max-width:78ch;color:var(--muted);line-height:1.55;font-size:15px}

/* Phone dock: four sections and "Ещё", which opens the full menu. */
@media(max-width:800px){
  .app-shell .mobile-dock{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .app-shell .mobile-dock button[aria-current="page"]{color:var(--accent)}
  /* Copilot stays reachable on a phone: a round button above the dock. */
  .app-shell #siteCopilotFab{display:flex!important;right:14px!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
    width:48px;height:48px;padding:0!important;justify-content:center;border-radius:50%!important}
  .app-shell #siteCopilotFab>span:last-child{display:none}
  .app-shell #siteCopilotFab .copilot-mark{width:22px;height:22px}
}