/* Native section disclosures reuse disclosures.css: right when closed, down
   when open. The sidebar nodes also live inside the phone's navigation dialog. */
#sidebar .main-nav-group { min-width: 0; }
#sidebar .main-team-group { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--crm-line, var(--line)); }
#sidebar .main-nav-group > .main-nav-summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  color: var(--crm-muted, var(--muted));
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: 7px;
  list-style: none;
}
#sidebar .main-nav-group > .main-nav-summary:focus-visible { outline: 3px solid var(--crm-accent, var(--accent)); outline-offset: 2px; }
#sidebar .main-nav-group > .team-nav { margin: 0; padding: 0; border: 0; }
#sidebar .main-nav-group > #project-nav { margin: 0; }
.main-nav-toggle {
  position: absolute; top: 24px; right: -23px; z-index: 6;
  display: grid; place-items: center; width: 44px; height: 44px;
  min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0;
  border-radius: 8px; background: transparent;
  color: var(--crm-muted, var(--muted)); touch-action: manipulation;
}
/* Only the 24px tag is painted; its transparent button retains a 44px target.
   Scope these spans above .brand span so the logo caption cannot restyle them. */
#sidebar .main-nav-toggle .main-nav-toggle-icon {
  display: grid; place-items: center; width: 24px; height: 32px; margin: 0;
  border: 1px solid var(--crm-control, var(--muted)); border-radius: 6px;
  background: var(--crm-paper, var(--surface)); color: var(--crm-muted, var(--muted));
  box-shadow: 0 2px 5px rgb(48 46 40 / .10);
  font-size: 1.25rem; font-weight: 600; line-height: 1;
}
#sidebar .main-nav-toggle .main-nav-toggle-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}
.main-nav-toggle:focus-visible { outline: 3px solid var(--crm-accent, var(--accent)); outline-offset: 2px; }
.main-nav-toggle:active:not(:disabled) { box-shadow: none; }
#sidebar .main-nav-toggle:active .main-nav-toggle-icon { background: var(--crm-soft, var(--soft)); }
.main-nav-tooltip {
  position: fixed; z-index: 100; max-width: 280px; padding: 8px 12px;
  border: 1px solid var(--crm-line, var(--line)); border-radius: 8px;
  background: var(--crm-paper, var(--surface)); color: var(--crm-text, #252b36);
  box-shadow: var(--shadow); font-size: .8125rem; line-height: 1.4;
  overflow-wrap: anywhere; pointer-events: auto;
}
/* Desktop rows previously used at least 50px plus 6px gaps. Keep all icon,
   active-state and permission styles, but recover space for the actual list. */
@media (min-width: 821px) {
  /* The tag straddles the internal column boundary, inside the workspace's
     clipping rectangle. Keep it above the main pane in both rail widths. */
  #sidebar { position: relative; overflow: visible; padding-top: 24px; }
  #sidebar .brand { padding-bottom: 22px; }
  #sidebar #main-nav, #sidebar #project-nav, #sidebar .team-nav { gap: 2px; }
  #sidebar nav button { min-height: 40px; padding: 7px 10px; gap: 10px; }
  #sidebar .project-section { margin: 14px 0 0; padding-top: 8px; }
  /* A real grid-column change releases 166px at normal CRM desktop width.
     No nav nodes are cloned: active, hidden and disabled states stay owned by
     the original features, and native group disclosures remain usable. */
  html #workspace[data-nav-collapsed="true"] { grid-template-columns: 70px minmax(0, 1fr); }
  #sidebar[data-nav-collapsed="true"] { padding: 16px 8px 18px; }
  #sidebar[data-nav-collapsed="true"] .brand { justify-content: center; padding: 0 0 14px; }
  #sidebar[data-nav-collapsed="true"] .brand > div { display: none; }
  #sidebar[data-nav-collapsed="true"] .main-nav-toggle { top: 13px; }
  html #sidebar[data-nav-collapsed="true"] nav button { justify-content: center; width: 100%; min-height: 40px; gap: 0; padding: 7px; font-size: 0; }
  #sidebar[data-nav-collapsed="true"] nav button > :not(.nav-icon):not(.team-nav-icon) { display: none; }
  #sidebar[data-nav-collapsed="true"] .team-nav-icon { flex: 0 0 24px; font-size: 20px; }
  #sidebar[data-nav-collapsed="true"] .project-section { margin-inline: 0; }
  #sidebar[data-nav-collapsed="true"] .main-nav-summary { justify-content: center; gap: 5px; padding: 5px 3px; min-height: 36px; font-size: 0; letter-spacing: 0; }
  #sidebar[data-nav-collapsed="true"] .main-nav-summary::before { flex-basis: 6px; width: 6px; height: 6px; margin-inline-end: 0; }
  #sidebar[data-nav-collapsed="true"] .main-nav-summary::after { content: attr(data-nav-group-icon); order: -1; width: 24px; font-size: 20px; text-align: center; }
  #sidebar[data-nav-collapsed="true"] .aside-bottom { padding: 22px 0 0; text-align: center; }
  #sidebar[data-nav-collapsed="true"] .aside-bottom a { display: grid; place-items: center; min-height: 40px; border-radius: 8px; font-size: 0; }
  #sidebar[data-nav-collapsed="true"] .aside-bottom a::before { content: "⇩"; font-size: 24px; }
  #sidebar[data-nav-collapsed="true"] .aside-bottom p,
  #sidebar[data-nav-collapsed="true"] #app-version { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  #sidebar[data-nav-collapsed="true"] .team-account { justify-content: center; padding: 10px 0 0; }
  #sidebar[data-nav-collapsed="true"] .team-account > :not(button) { display: none; }
  #sidebar[data-nav-collapsed="true"] .team-account button { margin: 0; width: 44px; min-height: 40px; border-radius: 8px; }
}
@media (max-width: 820px) {
  #main-nav-toggle, .main-nav-tooltip { display: none; }
  #mobile-nav-dialog #sidebar .main-team-group { margin-top: 14px; padding-top: 8px; }
  #mobile-nav-dialog #sidebar .main-nav-group > .main-nav-summary { min-height: 44px; margin: 0; padding: 10px 12px; }
  #mobile-nav-dialog #sidebar .main-nav-group > .team-nav { margin: 0; padding: 0; border: 0; }
  #mobile-nav-dialog #sidebar nav button { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  #sidebar .main-nav-group > .main-nav-summary:hover { background: var(--crm-soft, var(--soft)); }
  #sidebar .main-nav-toggle:hover .main-nav-toggle-icon { background: var(--crm-soft, var(--soft)); color: var(--crm-text, #252b36); }
}
/* Keep the current section identifiable while its links are collapsed. */
html[data-color-variant="crm"] #sidebar .main-nav-group:not([open]):has(button.active) > .main-nav-summary {background:#e7efe9;color:#263e37;box-shadow:inset 3px 0 0 #39745b;font-weight:700}

/* DF-36: original task controls stay in their native disclosure and mobile drawer. */
#tasks-nav-items{display:flex;flex-direction:column;gap:2px;min-width:0}
#sidebar [data-nav-omitted],#sidebar [data-navigation-hidden]{display:none!important}
#sidebar .main-tasks-group{width:100%;min-width:0}
#sidebar #tasks-nav-items>.briefing-nav{margin:0;padding:0}
/* DF-48: restore the immediate 0.49.9 rail change. Labels and column widths
   appear together; original controls and saved group disclosures stay intact. */

/* Dashboard is the overview entry, separated from task views without changing
   navigation order, row sizing, permissions or the collapsed rail behavior. */
html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav{margin-block-end:10px;background-color:var(--crm-soft,var(--soft));border-color:var(--crm-line,var(--line));color:var(--crm-text,var(--text));font-weight:600}
html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav.active{background-color:var(--interface-sidebar,var(--crm-paper,var(--surface)));border-color:var(--accent-dark,var(--crm-accent,var(--accent)));font-weight:700}
html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav.active:not(:focus-visible){box-shadow:inset 3px 0 0 var(--accent-dark,var(--crm-accent,var(--accent)))}
html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav .nav-icon{color:var(--accent-dark,var(--crm-accent,var(--accent)))}
html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav:focus-visible{outline:3px solid var(--interface-focus,var(--accent-dark,var(--accent)));outline-offset:2px}
@media(hover:hover) and (pointer:fine){html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav:not(.active):hover:not(:disabled){border-color:var(--crm-control,var(--line))}}
@media(forced-colors:active){html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav{border-color:ButtonText}html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav.active{border-color:Highlight}html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav.active:not(:focus-visible){box-shadow:inset 3px 0 0 Highlight}html[data-color-variant="crm"] #sidebar #main-nav .dashboard-nav:focus-visible{outline-color:Highlight}}

/* DF-85: preserve the page's normal scrolling and the edge toggle, while the
   navigation below the logo owns its overflow. The original nodes still move
   together into the mobile drawer, which keeps its single existing scroller. */
#sidebar > .sidebar-scroll { display: block; }
@media (min-width: 821px) {
  #workspace > #sidebar {
    position: sticky;
    top: calc(var(--header-sticky-top, 0px) + var(--header-bar-height, 62px));
    height: calc(100dvh - var(--header-sticky-top, 0px) - var(--header-bar-height, 62px));
    min-height: 0;
    align-self: start;
    padding-bottom: 0;
  }
  #sidebar > .brand { flex: 0 0 auto; }
  #sidebar > .sidebar-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    padding: 3px 3px 22px;
    margin-inline: -3px;
  }
  #sidebar > .sidebar-scroll > * { flex-shrink: 0; }
  #sidebar > .sidebar-scroll:focus-visible {
    outline: 2px solid var(--interface-focus, var(--accent-dark, var(--accent)));
    outline-offset: -2px;
  }
}