*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font: var(--md-body);
  color: var(--md-on-surface);
  background: var(--md-surface);
  font-family: var(--md-font);
}

h1, h2, h3, p { margin: 0; }

h1 { font: var(--md-headline); }
h2 { font: var(--md-title-lg); }
h3 { font: var(--md-title-md); }

a { color: var(--md-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--md-sidebar) 1fr;
  grid-template-rows: var(--md-topbar) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: grid-template-columns var(--md-duration) var(--md-ease);
}

.app-shell > .topbar { grid-area: topbar; }
.app-shell > .sidebar { grid-area: sidebar; }
.app-shell > .main { grid-area: main; min-height: 0; overflow: auto; }

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--md-surface-lowest);
  color: var(--md-on-surface);
  border-right: 1px solid var(--md-outline-variant);
  z-index: var(--md-z-sticky);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-space-3);
  height: var(--md-topbar);
  padding: 0 var(--md-space-4);
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-bottom: 1px solid var(--md-outline-variant);
  flex: 0 0 auto;
}

.sidebar__brand-mark {
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  min-width: 0;
  color: var(--md-on-primary);
  font: var(--md-title-md);
  text-decoration: none;
}

.sidebar__brand-mark:hover { text-decoration: none; color: var(--md-on-primary); }

.sidebar__brand-name,
.sidebar__drawer-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--md-title-md);
  color: var(--md-on-primary);
}

.sidebar__brand .md-icon-btn {
  color: var(--md-on-primary);
}

.sidebar__brand .md-icon-btn:hover {
  background: var(--md-state-on-dark);
}

.sidebar__drawer-title { display: none; }

.sidebar__collapse {
  margin-top: auto;
  padding: var(--md-space-3) var(--md-space-4) var(--md-space-4);
  border-top: 1px solid var(--md-outline-variant);
  flex: 0 0 auto;
}

.sidebar__collapse-btn {
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--md-space-3);
  border: 0;
  border-radius: var(--md-radius-sm);
  background: transparent;
  color: var(--md-on-surface-variant);
  font: var(--md-body);
  cursor: pointer;
}

.sidebar__collapse-btn:hover {
  background: var(--md-state-on-light);
  color: var(--md-on-surface);
}

.sidebar__collapse-btn .md-icon {
  transition: transform var(--md-duration) var(--md-ease);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-5);
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--md-space-3) var(--md-space-4) var(--md-space-4);
  overscroll-behavior: contain;
}

.sidebar__nav:has(> .sidebar__link) {
  gap: var(--md-space-1);
}

.sidebar__group {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2);
}

.sidebar__group-label {
  margin: 0;
  padding: var(--md-space-2) var(--md-space-3) var(--md-space-1);
  font: var(--md-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.sidebar__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-space-2);
  width: 100%;
  margin: 0;
  padding: var(--md-space-2) var(--md-space-3);
  border: 0;
  border-radius: var(--md-radius-sm);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  text-align: left;
}

.sidebar__group-toggle .sidebar__group-label {
  padding: 0;
  min-width: 0;
}

.sidebar__group-toggle .md-icon {
  flex: 0 0 auto;
  transition: transform var(--md-duration) var(--md-ease);
}

.sidebar__group-toggle:hover {
  background: var(--md-state-on-light);
  color: var(--md-on-surface);
}

.sidebar__group.is-current .sidebar__group-toggle,
.sidebar__group.is-current .sidebar__group-label {
  color: var(--md-primary);
}

.sidebar__group.is-collapsed .sidebar__group-toggle .md-icon {
  transform: rotate(-90deg);
}

.sidebar__group.is-collapsed > .sidebar__group-items {
  display: none;
}

.sidebar__group-items {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-1);
}

.sidebar__group .sidebar__group {
  gap: var(--md-space-1);
  margin-top: var(--md-space-2);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  min-height: 40px;
  padding: 0 var(--md-space-3);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  font: var(--md-body);
}

.sidebar__link .md-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: inherit;
}

.sidebar__link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__link:hover {
  background: var(--md-state-on-light);
  color: var(--md-on-surface);
  text-decoration: none;
}
.sidebar__link.is-active {
  background: var(--md-primary-container);
  color: var(--md-primary);
  font: var(--md-title-sm);
}

.md-icon-btn.sidebar__close,
.md-icon-btn.topbar__menu,
.sidebar-scrim,
.sidebar--drawer { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--md-topbar);
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  padding: 0 var(--md-space-5);
  background: var(--md-surface-lowest);
  border-bottom: 1px solid var(--md-outline-variant);
  z-index: var(--md-z-sticky);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  min-width: 0;
  flex: 1;
  color: var(--md-on-surface);
  font: var(--md-title-md);
  text-decoration: none;
}

.topbar__brand:hover { text-decoration: none; color: var(--md-on-surface); }

.topbar__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--md-radius-sm);
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.topbar__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.topbar__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--md-space-2);
  flex: 0 0 auto;
}

.topbar__nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--md-space-3);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface-variant);
  font: var(--md-title-sm);
  text-decoration: none;
}

.topbar__nav a:hover {
  background: var(--md-state-on-light);
  color: var(--md-on-surface);
  text-decoration: none;
}

.topbar__nav a.is-current {
  background: var(--md-primary-container);
  color: var(--md-primary);
  text-decoration: none;
}

.topbar__end {
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.app-shell .topbar .md-search { margin-right: auto; }

.app-shell .md-user-menu {
  padding-left: var(--md-space-3);
  border-left: 1px solid var(--md-outline-variant);
}

.md-search {
  display: flex;
  align-items: center;
  gap: var(--md-space-2);
  height: var(--md-control-h);
  min-width: 0;
  max-width: 400px;
  flex: 1 1 220px;
  padding: 0 var(--md-space-3);
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface-variant);
}

.md-search:focus-within {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  color: var(--md-on-surface);
}

.md-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: var(--md-body-lg);
  color: var(--md-on-surface);
}

.md-search__input:focus,
.md-search__input:focus-visible { outline: none; }

.md-search__menu {
  max-height: min(440px, calc(100vh - 88px));
  overflow-y: auto;
}

.md-search__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--md-radius-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font: var(--md-label-sm);
}

.md-search__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-space-1);
}

.md-search__top {
  display: flex;
  align-items: center;
  gap: var(--md-space-2);
  min-width: 0;
}

.md-search__title {
  flex: 1;
  min-width: 0;
  font: var(--md-title-sm);
  color: var(--md-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-search__hit .md-chip {
  flex: 0 0 auto;
}

.md-search__code {
  font: var(--md-label-sm);
  color: var(--md-on-surface);
}

.md-search__meta {
  font: var(--md-body-sm);
  color: var(--md-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-search__hit.is-selected .md-search__title,
.md-search__hit.is-selected .md-search__code {
  color: var(--md-on-primary-container);
}

.md-search__hit.is-selected .md-chip {
  background: var(--md-surface-lowest);
  color: var(--md-on-surface);
}

.md-search__hit.is-selected .md-chip--success {
  background: var(--md-success-container);
  color: var(--md-on-success-container);
}

.md-search__hit.is-selected .md-chip--error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.md-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-space-2);
  margin: 0;
  padding: var(--md-space-5) var(--md-space-4);
  text-align: center;
}

.md-search__empty-icon {
  width: var(--md-control-h);
  height: var(--md-control-h);
  display: grid;
  place-items: center;
  border-radius: var(--md-radius-full);
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
}

.md-search__empty-title {
  margin: 0;
  font: var(--md-title-sm);
  color: var(--md-on-surface);
}

.md-search__empty-hint {
  margin: 0;
  font: var(--md-body-sm);
  color: var(--md-on-surface-variant);
}

.md-search__more {
  font: var(--md-title-sm);
  color: var(--md-secondary);
}

.md-search__more .md-icon { color: var(--md-secondary); }

.md-tabs {
  display: flex;
  gap: var(--md-space-1);
  border-bottom: 1px solid var(--md-outline-variant);
}

.md-tabs__item {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--md-space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--md-on-surface-variant);
  font: var(--md-title-sm);
  text-decoration: none;
}

.md-tabs__item:hover { color: var(--md-on-surface); text-decoration: none; }
.md-tabs__item.is-active {
  color: var(--md-primary);
  border-bottom-color: var(--md-primary);
}

[data-tab-panel],
#res-stages {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

[data-tabs] {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

[data-tabs].is-ready [data-tab-panel] { display: none; }
[data-tabs].is-ready [data-tab-panel].is-active { display: flex; }

.content {
  flex: 1;
  padding: var(--md-space-5);
  min-width: 0;
}

.content__inner {
  max-width: var(--md-content-max);
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

.md-page {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2);
  padding-bottom: var(--md-space-1);
}

.md-page__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--md-space-4);
}

.md-page__heading {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-1);
  min-width: 0;
}

.md-page__title { font: var(--md-headline); }
.md-page__description { font: var(--md-body); color: var(--md-on-surface-variant); }
.md-page__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--md-space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.md-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--md-space-1);
  font: var(--md-body-sm);
}

.md-breadcrumb__link {
  color: var(--md-on-surface-variant);
  text-decoration: none;
}

.md-breadcrumb__link:hover { text-decoration: underline; }

.md-breadcrumb__sep {
  width: 16px;
  height: 16px;
  color: var(--md-on-surface-variant);
}

.md-breadcrumb__current { color: var(--md-on-surface); }

.card {
  background: var(--md-surface-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elev-1);
  padding: var(--md-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--md-space-5);
  background: var(--md-surface);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--md-surface-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elev-2);
  padding: var(--md-space-6) var(--md-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--md-space-5);
}

.auth-card__mark {
  width: 48px;
  height: 48px;
  border-radius: var(--md-radius-sm);
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.auth-card__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.auth-card__brand { display: flex; flex-direction: column; gap: var(--md-space-2); }
.auth-card__brand h1 { font: var(--md-headline); }
.auth-card__brand p { color: var(--md-on-surface-variant); font: var(--md-body); }

.auth-card .md-btn { width: 100%; }

@media (max-width: 1023px) {
  body.is-nav-open { overflow: hidden; }

  .app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }
  .main { flex: 1; width: 100%; min-height: 0; overflow: auto; }

  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: var(--md-topbar) 0 0 0;
    background: var(--md-scrim);
    z-index: var(--md-z-nav);
  }
  body.is-nav-open .sidebar-scrim { display: block; }

  .sidebar {
    position: fixed;
    inset: var(--md-topbar) auto 0 0;
    width: min(var(--md-sidebar), 100%);
    transform: translateX(-100%);
    transition: transform var(--md-duration) var(--md-ease);
    z-index: var(--md-z-nav);
  }
  body.is-nav-open .sidebar { transform: none; }

  .md-icon-btn.sidebar__close,
  .md-icon-btn.topbar__menu { display: grid; }
  .topbar { padding: 0 var(--md-space-4); flex: 0 0 auto; }
  .topbar__nav { display: none; }
  .sidebar--drawer { display: flex; }
  .sidebar__collapse { display: none; }
  .sidebar__drawer-title { display: block; }
  .content { padding: var(--md-space-4); }
  .app-shell .topbar__brand { flex: 1 1 auto; }
  .app-shell .topbar__end { flex: 1 1 140px; }
}

@media (max-width: 767px) {
  .md-page__row { flex-direction: column; }
  .md-page__actions {
    width: 100%;
    justify-content: stretch;
  }
  .md-page__actions .md-btn { flex: 1 1 auto; }

  .card { padding: var(--md-space-4); }

  .auth-screen { padding: var(--md-space-4); }

  .md-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .md-btn-row .md-btn { width: 100%; }
}

@media (min-width: 1024px) {
  .app-shell .topbar__brand { display: none; }
  .sidebar__close { display: none; }
  .sidebar__brand-mark { display: flex; }
}

@media (max-width: 1023px) {
  .sidebar__brand-mark { display: none; }
}

body.is-sidebar-collapsed .app-shell {
  grid-template-columns: var(--md-sidebar-collapsed) 1fr;
}
body.is-sidebar-collapsed .sidebar__group-label,
body.is-sidebar-collapsed .sidebar__group-toggle,
body.is-sidebar-collapsed .sidebar__link-label,
body.is-sidebar-collapsed .sidebar__brand-name,
body.is-sidebar-collapsed .sidebar__collapse-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
body.is-sidebar-collapsed .sidebar__link,
body.is-sidebar-collapsed .sidebar__collapse-btn {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
body.is-sidebar-collapsed .sidebar__brand {
  justify-content: center;
  padding-left: var(--md-space-2);
  padding-right: var(--md-space-2);
}
body.is-sidebar-collapsed .sidebar__brand-mark { justify-content: center; }
body.is-sidebar-collapsed .sidebar__nav,
body.is-sidebar-collapsed .sidebar__collapse {
  padding-left: var(--md-space-2);
  padding-right: var(--md-space-2);
}
body.is-sidebar-collapsed .sidebar__group .sidebar__group {
  margin-top: 0;
}
body.is-sidebar-collapsed .sidebar__group + .sidebar__group {
  border-top: 1px solid var(--md-outline-variant);
  padding-top: var(--md-space-3);
  margin-top: calc(var(--md-space-2) * -1);
}
body.is-sidebar-collapsed .sidebar__group.is-collapsed > .sidebar__group-items {
  display: flex;
}
body.is-sidebar-collapsed .sidebar__collapse-btn .md-icon {
  transform: scaleX(-1);
}

.md-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--md-space-4);
}

.md-dash-kpis {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

.md-dash-kpis .md-card-grid {
  grid-template-columns: 1fr;
}

.md-dash,
.md-dash__aside {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
  min-width: 0;
}

@media (min-width: 640px) {
  .md-dash-kpis .md-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .md-dash-kpis .md-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .md-dash {
    display: grid;
    grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.md-day-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-space-2);
}

@media print {
  .topbar,
  .sidebar,
  .sidebar-scrim,
  .md-toast-region,
  .md-print-hide {
    display: none !important;
  }
}