/*
 * Page layout: top app bar (top menu + header), primary tabs (project menu),
 * sidebar card, content, footer, menus.
 *
 * State layers: M3 draws hover/focus/press as a translucent layer of the content
 * color. Here that is a background-image of currentColor mixed at the state opacity,
 * so it works on top of any background color.
 */

:root {
  --nm-state-hover: linear-gradient(color-mix(in srgb, currentColor var(--md-sys-state-hover-state-layer-opacity), transparent) 0 0);
  --nm-state-pressed: linear-gradient(color-mix(in srgb, currentColor var(--md-sys-state-pressed-state-layer-opacity), transparent) 0 0);
  --nm-transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

#wrapper { background: var(--md-sys-color-surface); }

/***** Top app bar *****/
nav.top-menu {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  padding-block: 4px;
  padding-inline: 12px;
}

.top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited, #account .dropdown-trigger {
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  padding-block: 6px;
  padding-inline: 12px;
  transition: var(--nm-transition);
}

.top-menu__links a:hover, #account .dropdown-trigger:hover {
  color: var(--md-sys-color-on-surface);
  background-color: transparent;
  background-image: var(--nm-state-hover);
}

.top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg,
.top-menu__links a:hover svg.icon-svg, #account .dropdown-trigger:hover .icon-svg {
  stroke: currentColor;
}

#header {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding-block: 4px 0;
  padding-inline: 24px;
}
body.has-main-menu #header { padding-block-end: 48px; }
#header a, #header a:hover { color: var(--md-sys-color-on-surface); }

#header h1 {
  font: var(--md-sys-typescale-title-large);
  min-block-size: 3rem;
}
#header h1 .breadcrumbs {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
#header h1 .breadcrumbs a { color: var(--md-sys-color-on-surface-variant); }

#quick-search { min-block-size: 3rem; color: var(--md-sys-color-on-surface-variant); }
#quick-search #q {
  inline-size: 220px;
  block-size: 40px;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
}
#quick-search #q:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; }
#quick-search form label { font: var(--md-sys-typescale-label-large); }

#project-jump.drdn { margin-inline-start: 8px; }
#project-jump .drdn-trigger {
  block-size: 40px;
  padding-inline: 16px 36px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large);
  line-height: 38px;
}
#project-jump .drdn-trigger:hover { background-image: var(--nm-state-hover); }

/***** Primary tabs (project menu) *****/
#main-menu {
  background: var(--md-sys-color-surface-container);
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  padding-block: 0;
  padding-inline: 16px;
}
#main-menu ul { min-block-size: 48px; }
#main-menu li a {
  position: relative;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  padding-block: 14px;
  padding-inline: 16px;
  line-height: 20px;
  transition: var(--nm-transition);
}
#main-menu li a:hover {
  background-color: transparent;
  background-image: var(--nm-state-hover);
  color: var(--md-sys-color-on-surface);
}
#main-menu li a.selected, #main-menu li a.selected:hover {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  font-weight: 500;
  box-shadow: none;
}
#main-menu li a.selected::after {
  content: "";
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 0;
  block-size: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--md-sys-color-primary);
}

/* "+" new object: tonal icon button */
#main-menu li a.new-object {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  margin-block: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
#main-menu li a.new-object:hover {
  background-color: var(--md-sys-color-secondary-container);
  background-image: var(--nm-state-hover);
  color: var(--md-sys-color-on-secondary-container);
}

/* Scroll arrows when the menu overflows: icon buttons on the bar's colour, so menu items
   slide under them instead of showing through (button styles in components.css) */
#main-menu div.tabs-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  inline-size: auto;
  block-size: 48px;
  inset-inline-end: 0;
  padding-inline: 8px;
  border: 0;
  background-color: var(--md-sys-color-surface-container);
}

/***** Menus: project menu children, dropdowns, profile menu *****/
#main-menu .menu-children,
html .drdn-content,
html .dropdown-content {
  background-color: var(--md-sys-color-surface-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-level2);
  color: var(--md-sys-color-on-surface);
  padding-block: 8px;
  overflow: hidden;
}
#main-menu .menu-children li a,
html .dropdown-content li a,
html .dropdown-content .dropdown-items a,
.drdn-items > * {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  padding-block: 10px;
  padding-inline: 12px;
}
#main-menu .menu-children li a:hover,
html .dropdown-content li a:hover,
html .dropdown-content .dropdown-items a:hover,
.drdn-items > a:hover,
.drdn-items > a:focus {
  background-color: transparent;
  background-image: var(--nm-state-hover);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}
#main-menu .menu-children li a:hover::after { display: none; }
.drdn-items > .selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
#project-jump .drdn-items > a:hover { background-color: transparent; color: var(--md-sys-color-on-surface) !important; }
div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { border-color: var(--md-sys-color-outline-variant); }
#account .dropdown-content .user-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
#account .dropdown-content .user-info .user-name { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-small); }

/***** Content and sidebar *****/
#main { background: var(--md-sys-color-surface); }

#content {
  background-color: var(--md-sys-color-surface);
  padding-block: 24px 16px;
  padding-inline: 24px;
}

#sidebar {
  background: var(--md-sys-color-surface-container-low);
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  margin-block: 16px;
  margin-inline-end: 16px;
  padding-block: 16px;
  padding-inline: 16px;
  box-sizing: border-box;
  align-self: flex-start;
}
/* Collapsed: only the switch button remains, in a small rounded surface */
#main.collapsedsidebar #sidebar { inline-size: auto; margin-block: 16px; margin-inline-end: 16px; padding: 4px; }
#main.collapsedsidebar #sidebar-switch-panel { float: none; margin: 0; }
#sidebar h3 {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  margin-block: 16px 8px;
}
#sidebar hr { background: var(--md-sys-color-outline-variant); margin-block: 12px; }

/* Collapse button: 32px icon button in the top corner, level with the first heading */
#sidebar-switch-panel { float: inline-end; inline-size: auto; margin-block: -6px 0; margin-inline: 8px -6px; padding: 0; }
#sidebar-switch-button {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
}
#sidebar-switch-button svg { stroke: var(--md-sys-color-on-surface-variant); color: inherit; }
#sidebar-switch-button:hover { background-color: transparent; background-image: var(--nm-state-hover); }

/* Sidebar forms (activity, roadmap, …): label above a full-width field */
#sidebar form > p:has(> input:not([type="submit"], [type="hidden"], [type="checkbox"]), > select) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 0 12px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
#sidebar form > p > :is(input:not([type="submit"], [type="checkbox"]), select) { inline-size: 100%; max-inline-size: none; margin: 0; }
/* First heading sits level with the collapse button, also after hidden form inputs */
#sidebar-wrapper > form:first-child > h3:first-of-type,
#sidebar-wrapper > .contextual:first-child + h3 { margin-block-start: 0; }
#sidebar-wrapper > .contextual:first-child { margin-block: 0; }
/* Watchers opening the sidebar: "Add" sits next to the collapse button, heading level with it */
#sidebar-wrapper > #watchers:first-child > .contextual { margin-block: 0; margin-inline-end: 0; }
#sidebar-wrapper > #watchers:first-child > .contextual + h3 { margin-block-start: 0; }
#sidebar form > p:empty { display: none; }

/* Checkbox lists: even 32px rows, text-colored labels */
#sidebar li:has(input[type="checkbox"]),
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]),
#sidebar form > p:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 32px;
}
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]) { flex: 1; }
#sidebar input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin: 0; flex-shrink: 0; }
#sidebar li label, #sidebar li label a, #sidebar form > p > label { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-medium); }
#sidebar ul + ul, #sidebar ul + p { margin-block-start: 12px; }

/* Navigation-drawer style items for plain link lists in the sidebar (queries, sort order,
   versions, wiki index, …): a link that is alone in its list item */
#sidebar li > a:only-child, #admin-menu li a {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 12px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  transition: var(--nm-transition);
}
#sidebar li > a:only-child:hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; }
#sidebar li > a.selected:only-child, #admin-menu li a.selected {
  margin-inline-start: 0; /* core: -6px, inset marker bar */
  padding-block: 0;
  box-shadow: none;
  line-height: normal;
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
#admin-menu li { padding-block-end: 2px; }

/***** Footer *****/
#footer {
  background: var(--md-sys-color-surface);
  border: 0;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-small);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  padding: 16px;
}

/***** Login *****/
#login-form {
  inline-size: 400px;
  padding: 24px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-large);
}
#login-form label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
#login-form input { block-size: 40px; }