:root {
  --navbar-height: 64px;
  --navbar-height-mobile: 56px;
  --appbar-title-font-size: 24px;
}

/* :where() keeps this whole rule at zero specificity, so a color utility
   class (.primary, .secondary, .surface, etc.) placed on the same element
   always wins over this base/fallback styling, no matter which rule comes
   later in the stylesheet. Without it, "background-color" here tied on
   specificity with ".primary" and (being later in source order) silently
   overrode the intended navbar color whenever both classes were present. */
:where(.nav-wrapper) {
  height: 100%;
  background-color: var(--md-sys-color-surface);
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  align-items: center;
}

.navbar {
  border: 0;
  border-radius: 0;
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-secondary-container);
  width: 100%;
  height: var(--navbar-height-mobile);
  line-height: var(--navbar-height-mobile);
}

.navbar.nav-extended {
  height: auto;
}

.navbar.nav-extended .nav-wrapper {
  min-height: var(--navbar-height-mobile);
  height: auto;
}

.navbar.nav-extended .nav-content {
  position: relative;
  line-height: normal;
}

.navbar ul:not(.dropdown-content) {
  list-style-type: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1em;
}

.navbar ul:not(.dropdown-content).left {
  float: left;
}

.navbar ul:not(.dropdown-content) > li {
  transition: background-color 0.3s;
  padding: 0;
}

.navbar ul:not(.dropdown-content) > li > a {
  transition: background-color 0.3s;
  color: var(--md-sys-color-on-surface);
  display: block;
  cursor: pointer;
}

.navbar ul:not(.dropdown-content) > li > a.btn,
.navbar ul:not(.dropdown-content) > li > a.btn-large,
.navbar ul:not(.dropdown-content) > li > a.btn-flat,
.navbar ul:not(.dropdown-content) > li > a.btn-floating {
  margin-top: -2px;
  margin-left: 15px;
  margin-right: 15px;
  /* Was inline-block, which overrides .btn's own inline-flex;
     align-items:center and breaks vertical centering of the button's
     text - visually harmless on .btn-large (tall enough that the
     misalignment doesn't stand out) but text nearly clips out the
     bottom on the smaller .btn/.btn-flat/.btn-floating sizes. */
  display: inline-flex;
  align-items: center;
}

.navbar ul:not(.dropdown-content) > li > a.btn > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-sharp,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-sharp,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-sharp,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-sharp {
  height: inherit;
  line-height: inherit;
}

.navbar a {
  color: var(--md-sys-color-on-primary);
}

.navbar i,
.navbar [class^='mdi-'],
.navbar [class*='mdi-'],
.navbar i.material-icons,
.navbar i.material-symbols-outlined,
.navbar i.material-symbols-rounded,
.navbar i.material-symbols-sharp {
  display: block;
  font-size: 24px;
  height: var(--navbar-height-mobile);
  line-height: var(--navbar-height-mobile);
}

/* Collapse button */
.navbar .sidenav-trigger {
  float: left;
  position: relative;
  z-index: 1;
  height: var(--navbar-height-mobile);
  margin: 0 18px;
}

.navbar .sidenav-trigger i {
  height: var(--navbar-height-mobile);
  line-height: var(--navbar-height-mobile);
}

/* Logo */
.navbar .brand-logo {
  color: var(--md-sys-color-on-surface);
  font-size: var(--appbar-title-font-size);
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.navbar .brand-logo.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Collision-safe centered app bar: the left link region and the generated
   right spacer share the available width, keeping the logo truly centered
   without taking it out of the flex layout. */
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered::after {
  content: '';
  order: 3;
  flex: 1 1 0;
  min-width: 0;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
  display: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul > li > a {
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
  position: static;
  order: 2;
  flex: 0 0 auto;
  left: auto;
  transform: none;
}

.navbar .brand-logo.right {
  right: 0.5rem;
  padding: 0;
}

.navbar .brand-logo i,
.navbar .brand-logo [class^='mdi-'],
.navbar .brand-logo [class*='mdi-'],
.navbar .brand-logo i.material-icons,
.navbar .brand-logo i.material-symbols-outlined,
.navbar .brand-logo i.material-symbols-rounded,
.navbar .brand-logo i.material-symbols-sharp {
  /* Was float:left, paired with an explicit height/line-height (from
     the general .navbar i rule) sized to the whole navbar row height,
     inside a brand-logo that's only ever as tall as its own text.
     Floating a block that tall out of a small inline-block parent
     with nothing to clear it let it render outside/clipped by the
     navbar row - invisible in practice. brand-logo is flex now, so
     this just needs to be a normal flex item. */
  margin-right: 15px;
}

/* Structured MD3 app-bar content. These hooks keep branded demos and app
   shells from falling back to bare, loosely spaced anchor elements. */
.navbar:is(.appbar, .appbar-bordered) {
  overflow: visible;
  background: var(--md-sys-color-surface-variant);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Retain the original class as an explicit outline option. */
.navbar.appbar-bordered {
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* Layout variants. `navbar-rounded` adds the inset treatment; use
   `navbar-full` for a flush, full-width rectangle. */
.navbar:is(.appbar, .appbar-bordered).navbar-rounded {
  margin: 8px 0;
  padding: 4px;
  border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
}

.navbar:is(.appbar, .appbar-bordered).navbar-full {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
   surface on its children, but let the FAB extend below the bar. */
.navbar:is(.appbar, .appbar-bordered).nav-extended {
  overflow: visible;
}

.navbar:is(.appbar, .appbar-bordered).nav-extended.navbar-rounded .nav-wrapper {
  border-radius: 15px 15px 0 0;
}

.navbar:is(.appbar, .appbar-bordered).nav-extended.navbar-rounded .nav-content {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-variant);
  border-radius: 0 0 15px 15px;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper {
  gap: 12px;
  padding-inline: 12px;
  background: var(--md-sys-color-surface-variant);
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > .brand-logo,
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul:not(.dropdown-content),
.navbar:is(.appbar, .appbar-bordered) .nav-actions > li {
  align-self: center;
}

.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > .brand-logo,
.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
  height: 40px;
}

.navbar:is(.appbar, .appbar-bordered) .nav-actions > li {
  display: flex;
  align-items: center;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper::-webkit-scrollbar {
  display: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul:not(.dropdown-content) {
  min-width: 0;
  flex-shrink: 1;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap .nav-wrapper {
  flex-wrap: wrap;
  height: auto;
  row-gap: 8px;
  overflow: visible;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
  flex-wrap: wrap;
  white-space: normal;
}

.navbar .brand-logo .brand-logo-image {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  padding: 8px;
  object-fit: contain;
  background: var(--md-sys-color-primary-container);
  border-radius: 12px;
}

.navbar .nav-separator {
  flex: 0 0 1px;
  width: 1px;
  height: 32px;
  margin-inline: 4px;
  background: var(--md-sys-color-outline-variant);
}

.navbar .nav-context {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  white-space: nowrap;
}

.navbar ul.nav-actions:not(.dropdown-content) {
  gap: 8px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating) {
  box-sizing: border-box;
  height: 40px;
  padding-inline: 12px;
  line-height: 40px;
  border-radius: 20px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating):hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li.active > a:not(.btn):not(.btn-floating) {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}

/* Text links use the same centred row as the app bar. The global navbar icon
   rule intentionally sizes standalone icons to the full bar; undo that for
   icons embedded beside link text. */
.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.left),
.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.right),
.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger:has(> .material-icons) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 16px;
  line-height: 1;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons:is(.left, .right) {
  width: 24px;
  height: 24px;
  margin: 0;
  line-height: 24px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons.right {
  order: 1;
}

/* Tabs retain their component geometry and click target instead of inheriting
   navigation-pill spacing. */
.navbar:is(.appbar, .appbar-bordered) .tabs {
  gap: 0;
  background: transparent;
}

.navbar:is(.appbar, .appbar-bordered) .tabs .tab > a {
  height: 48px;
  min-height: 48px;
  padding-inline: 24px;
  line-height: 48px;
  border-radius: 0;
}

/* Buttons must remain legible and vertically centred in the constrained app
   bar row, including legacy examples using btn-large. */
.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > :is(.btn, .btn-large) {
  box-sizing: border-box;
  max-height: 48px;
  margin: 0;
  color: var(--md-sys-color-on-primary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  line-height: 20px;
}

.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger {
  flex: 0 0 auto;
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) > .material-icons {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.navbar ul.nav-actions:not(.dropdown-content) > li > :is(.btn, .btn-floating) {
  margin: 0;
}

.navbar .nav-actions .btn-floating {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
}

.navbar .nav-actions .btn-floating > .material-icons {
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.navbar .nav-actions .btn > .material-icons {
  height: 16px;
  line-height: 16px;
}

/* Title */
.navbar .nav-title {
  display: inline-block;
  color: var(--md-sys-color-on-surface);
  font-size: 32px;
  padding: 20px 24px 28px;
}

/* Navbar Search Form */
.navbar form {
  height: 100%;
}

.navbar .input-field {
  margin: 0;
  height: 100%;
}

.navbar .input-field input[type='search'] {
  height: 100%;
  font-size: 1.2rem;
  border: none;
  padding-left: 2rem;
  color: var(--md-sys-color-on-primary);
}

.navbar .input-field input[type='search']:focus,
.navbar .input-field input[type='search'][type='text']:valid,
.navbar .input-field input[type='search'][type='password']:valid,
.navbar .input-field input[type='search'][type='email']:valid,
.navbar .input-field input[type='search'][type='url']:valid,
.navbar .input-field input[type='search'][type='date']:valid {
  border: none;
  box-shadow: none;
}

.navbar .input-field label {
  top: 0;
  left: 0;
}

.navbar .input-field label i {
  color: var(--font-on-primary-color-medium);
  transition: color 0.3s;
}

.navbar .input-field label.active i {
  color: var(--md-sys-color-on-primary);
}

/* Fixed Navbar */
.navbar-fixed {
  position: relative;
  height: var(--navbar-height-mobile);
  z-index: 997;
}

.navbar-fixed .navbar {
  position: fixed;
  right: 0;
}

@media only screen and (min-width: 601px) {
  .nav.nav-extended .nav-wrapper {
    min-height: var(--navbar-height-mobile);
  }

  .nav,
  .navbar,
  .navbar .nav-wrapper i,
  nav a.sidenav-trigger,
  .navbar a.sidenav-trigger i {
    height: var(--navbar-height);
    line-height: var(--navbar-height);
  }

  .navbar-fixed {
    height: var(--navbar-height);
  }
}