:root {
  --login-page: #eaf1f1;
  --login-panel: #ffffff;
  --login-panel-alt: #f6fbfa;
  --login-line: #dce6e6;
  --login-muted: #667477;
  --login-shadow: 0 28px 80px rgb(24 58 61 / 14%);
}

.login-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(circle at 12% 8%, rgb(0 126 122 / 10%), transparent 30%),
    radial-gradient(circle at 88% 92%, rgb(192 48 94 / 7%), transparent 30%),
    var(--login-page);
}

.login-card {
  width: min(1120px, 100%);
}

.login-page__card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
  min-height: min(740px, calc(100svh - 48px));
  overflow: hidden;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: var(--login-panel);
  box-shadow: var(--login-shadow);
}

.login-page__identity {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 5.5vw, 78px);
  background: linear-gradient(145deg, #ffffff, #edf7f6);
}

.login-page__identity::before,
.login-page__identity::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.login-page__identity::before {
  top: -180px;
  right: -160px;
  width: 390px;
  background: rgb(0 126 122 / 8%);
}

.login-page__identity::after {
  left: -150px;
  bottom: -160px;
  width: 310px;
  background: rgb(236 177 31 / 12%);
}

.login-page__identity-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  max-width: 560px;
}

.login-page__logo {
  width: clamp(132px, 15vw, 190px);
  height: auto;
  margin-bottom: 38px;
  object-fit: contain;
}

.login-page__identity h1 {
  margin: 0;
  color: var(--teal);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.login-page__subtitle {
  margin: 18px 0 0;
  color: #c0305e;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 620;
}

.login-page__accent {
  width: 74px;
  height: 5px;
  margin-top: 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) 0 40%, #ecb11f 40% 70%, #c0305e 70% 100%);
}

.login-page__content {
  display: grid;
  align-content: center;
  gap: 22px;
  min-width: 0;
  padding: clamp(32px, 5vw, 66px);
  background: linear-gradient(180deg, #ffffff, var(--login-panel-alt));
}

.login-page__mobile-brand {
  display: none;
}

.login-page__heading {
  display: grid;
  gap: 5px;
}

.login-page__heading h2,
.login-page__heading p {
  margin: 0;
}

.login-page__heading h2 {
  color: var(--text);
  font-size: 29px;
  font-weight: 760;
  line-height: 1.1;
}

.login-page__heading p {
  color: var(--text-2);
  font-size: 13px;
}

.login-page__auth-form {
  gap: 16px;
}

.login-field {
  gap: 8px;
}

.login-field label {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 740;
}

.login-input-wrap {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 0 14px;
  border: 1.5px solid var(--login-line);
  border-radius: 15px;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.login-input-wrap:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgb(0 126 122 / 13%);
  transform: translateY(-1px);
}

.login-input-wrap__icon {
  color: var(--teal);
  font-size: 20px;
}

.login-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.login-input-wrap input:focus {
  box-shadow: none;
}

.login-password-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  background: rgb(0 126 122 / 8%);
  color: var(--teal-dark);
}

.login-page__actions {
  display: grid;
  gap: 9px;
}

.login-page__submit,
.login-page__passkey {
  width: 100%;
  min-height: 54px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 760;
}

.login-page__submit {
  box-shadow: 0 14px 28px rgb(0 126 122 / 20%), inset 0 -3px 0 #ecb11f;
}

.login-page__submit:hover,
.login-page__submit:focus-visible {
  transform: translateY(-1px);
}

.login-page__passkey {
  background: #ffffff;
}

.login-page__footer {
  position: relative;
  z-index: 1;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.45;
}

.login-page__footer--desktop {
  position: absolute;
  right: clamp(42px, 5.5vw, 78px);
  bottom: 34px;
  left: clamp(42px, 5.5vw, 78px);
}

.login-page__footer--mobile {
  display: none;
  text-align: center;
}

html[data-theme="dark"] {
  --login-page: #0f1115;
  --login-panel: #1b2029;
  --login-panel-alt: #242b36;
  --login-line: #343c49;
  --login-muted: #c3cad4;
  --login-shadow: 0 28px 76px rgb(0 0 0 / 34%);
}

html[data-theme="dark"] .login-shell {
  background: var(--login-page);
}

html[data-theme="dark"] .login-page__card,
html[data-theme="dark"] .login-page__content,
html[data-theme="dark"] .login-input-wrap,
html[data-theme="dark"] .login-page__passkey {
  border-color: var(--login-line);
  background: var(--login-panel);
}

html[data-theme="dark"] .login-page__identity {
  background: linear-gradient(145deg, #1b2029, #18292a);
}

html[data-theme="dark"] .login-page__identity h1,
html[data-theme="dark"] .login-field label,
html[data-theme="dark"] .login-input-wrap__icon {
  color: var(--teal);
}

html[data-theme="dark"] .login-page__subtitle {
  color: #c0305e;
}

@media (max-width: 1023px) {
  .login-page__card {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
    min-height: auto;
  }

  .login-page__identity {
    min-height: 280px;
    justify-content: flex-start;
    padding: 38px 44px 42px;
  }

  .login-page__identity-content {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    align-items: center;
    max-width: none;
  }

  .login-page__logo {
    grid-row: 1 / span 4;
    width: 142px;
    margin: 0;
  }

  .login-page__identity h1 {
    font-size: clamp(34px, 7vw, 50px);
  }

  .login-page__subtitle {
    margin-top: 10px;
    font-size: 18px;
  }

  .login-page__accent {
    width: 64px;
    height: 4px;
    margin-top: 16px;
  }

  .login-page__footer--desktop {
    display: none;
  }

  .login-page__content {
    padding: 38px 44px 42px;
  }

  .login-page__footer--mobile {
    display: block;
  }
}

@media (max-width: 640px) {
  .login-shell {
    display: block;
    padding: 0;
    background: var(--login-panel-alt);
  }

  .login-page__card {
    width: 100%;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-page__identity {
    min-height: auto;
    padding: max(28px, env(safe-area-inset-top)) 20px 34px;
    text-align: center;
  }

  .login-page__identity-content {
    display: block;
  }

  .login-page__logo {
    width: 126px;
    margin: 0 auto 22px;
  }

  .login-page__identity h1 {
    font-size: clamp(25px, 7.2vw, 31px);
    white-space: nowrap;
  }

  .login-page__subtitle {
    font-size: 17px;
  }

  .login-page__accent {
    margin-inline: auto;
  }

  .login-page__content {
    display: block;
    padding: 0 16px max(24px, env(safe-area-inset-bottom));
    background: var(--login-panel-alt);
  }

  .login-page__heading,
  .login-page__auth-form {
    width: 100%;
    padding: 0;
  }

  .login-page__heading {
    margin-top: -10px;
    padding: 24px 18px 0;
    border: 1px solid var(--login-line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: var(--login-panel);
  }

  .login-page__auth-form {
    padding: 18px;
    border: 1px solid var(--login-line);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    background: var(--login-panel);
    box-shadow: 0 18px 45px rgb(24 58 61 / 12%);
  }

  .login-page__heading h2 {
    font-size: 25px;
  }

  .login-input-wrap {
    min-height: 54px;
    border-radius: 14px;
  }

  .login-input-wrap input {
    height: 50px;
  }

  .login-page__submit,
  .login-page__passkey {
    min-height: 52px;
  }

  .login-page__footer--mobile {
    margin-top: 20px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-input-wrap,
  .login-password-toggle,
  .login-page__submit {
    transition: none;
  }
}

.change-password-page__card {
  width: min(1040px, 100%);
  min-height: min(650px, calc(100svh - 48px));
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
}

.change-password-page__identity {
  background:
    radial-gradient(circle at 88% 12%, rgb(236 177 31 / 13%), transparent 27%),
    radial-gradient(circle at 12% 88%, rgb(192 48 94 / 8%), transparent 30%),
    linear-gradient(145deg, #ffffff, #edf7f6);
}

.change-password-page__identity-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 390px;
  margin-top: 34px;
  padding: 14px;
  border: 1px solid rgb(0 126 122 / 15%);
  border-radius: 16px;
  background: rgb(255 255 255 / 54%);
  box-shadow: 0 12px 28px rgb(24 58 61 / 7%);
}

.change-password-page__identity-note > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgb(0 126 122 / 10%);
  color: var(--teal-dark);
  font-size: 20px;
}

.change-password-page__identity-note > div {
  display: grid;
  gap: 3px;
}

.change-password-page__identity-note strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.change-password-page__identity-note span {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.45;
}

.change-password-page__content {
  gap: 20px;
}

.change-password-page__heading {
  gap: 6px;
}

.change-password-page__eyebrow {
  width: max-content;
  color: var(--team-accent);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.change-password-page__form {
  gap: 15px;
}

.change-password-page__field {
  gap: 7px;
}

.change-password-page__requirements {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid var(--login-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 4%, var(--login-panel-alt));
}

.change-password-page__requirements > strong {
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
}

.change-password-page__requirements ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-password-page__requirement {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.25;
}

.change-password-page__requirement:last-child {
  grid-column: 1 / -1;
}

.change-password-page__requirement i {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 14px;
}

.change-password-page__requirement.is-valid,
.change-password-page__requirement.is-valid i {
  color: var(--ic-ok-text);
}

.change-password-page__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 9px;
}

.change-password-page__submit,
.change-password-page__logout {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 740;
}

.change-password-page__submit {
  box-shadow: 0 12px 24px rgb(0 126 122 / 18%), inset 0 -3px 0 #ecb11f;
}

.change-password-page__submit:disabled,
.change-password-page__logout:disabled {
  cursor: not-allowed;
  opacity: .56;
  transform: none;
}

html[data-theme="dark"] .change-password-page__identity {
  background:
    radial-gradient(circle at 88% 12%, rgb(236 177 31 / 9%), transparent 28%),
    radial-gradient(circle at 12% 88%, rgb(240 125 160 / 7%), transparent 31%),
    linear-gradient(145deg, #1b2029, #18292a);
}

html[data-theme="dark"] .change-password-page__identity-note {
  border-color: rgb(154 219 214 / 14%);
  background: rgb(20 28 35 / 52%);
  box-shadow: 0 14px 30px rgb(0 0 0 / 20%);
}

html[data-theme="dark"] .change-password-page__identity-note > i {
  background: rgb(88 199 188 / 10%);
  color: var(--teal);
}

html[data-theme="dark"] .change-password-page__requirements {
  border-color: var(--login-line);
  background: color-mix(in srgb, var(--teal) 5%, var(--login-panel));
}

@media (max-width: 1023px) {
  .change-password-page__card {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
    min-height: auto;
  }

  .change-password-page__identity {
    min-height: 230px;
  }

  .change-password-page__identity-note {
    grid-column: 2;
    max-width: none;
    margin-top: 18px;
  }
}

@media (max-width: 640px) {
  .change-password-page__identity {
    padding-bottom: 28px;
  }

  .change-password-page__identity-note {
    display: none;
  }

  .change-password-page__content {
    display: block;
  }

  .change-password-page__heading {
    margin-top: -10px;
    padding: 24px 18px 10px;
  }

  .change-password-page__form {
    padding-top: 10px;
  }

  .change-password-page__requirements ul {
    grid-template-columns: 1fr;
  }

  .change-password-page__requirement:last-child {
    grid-column: auto;
  }

  .change-password-page__actions {
    grid-template-columns: 1fr;
  }

  .change-password-page__logout {
    order: 2;
  }
}

@media (max-width: 380px) {
  .change-password-page__heading {
    padding-inline: 15px;
  }

  .change-password-page__form {
    padding-inline: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .change-password-page__submit,
  .change-password-page__logout {
    transition: none;
  }
}

.login-layout,
.login-cover,
.stats-row {
  display: grid;
  gap: 12px;
}

.login-cover h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.login-cover p,
.hero-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 11.5px;
}

.stats-row {
  grid-template-columns: 1fr;
}


.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.page-header-toolbar {
  justify-content: flex-end;
}

.page-header-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.audit-date-filter {
  width: 160px;
  gap: 4px;
}

.audit-date-filter > span {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}

.audit-date-filter input {
  height: 32px;
  padding: 6px 9px;
}

.section-title h3,
.section-title h4 {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

.capsule-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.capsule {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-2);
  font-size: 10.5px;
}

.roster-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roster-desktop-context {
  display: none;
}

.roster-hero__copy {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 5px;
  row-gap: 4px;
  min-width: 0;
}

.roster-hero__date {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
}


.roster-hero__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.revez-duration-badge {
  --revez-duration-color: #C0305E;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 5px;
  color: var(--revez-duration-color);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

.revez-duration-badge__label {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 650;
}

.revez-duration-badge strong {
  color: var(--revez-duration-color);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}

.revez-duration-badge--hero-mobile {
  display: none;
}

@media (max-width: 1199px) {
  .roster-hero__title .revez-duration-badge {
    display: none;
  }

  .revez-duration-badge--hero-mobile {
    display: inline-flex;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 1px;
  }
}

.roster-hero__count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 11.5px;
}

.roster-hero__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.roster-header-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
  min-width: 0;
}

.roster-header-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  color: var(--text-2);
  font-size: 9.5px;
  white-space: nowrap;
}

.roster-header-stat {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.roster-header-stat:hover,
.roster-header-stat:focus-visible {
  color: var(--text);
}

.roster-header-stat:focus-visible {
  border-radius: var(--radius-control);
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.roster-header-stat strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1;
}

.roster-header-stat--pending strong {
  color: #C0305E;
}

.roster-header-stat--progress strong {
  color: #ECB11F;
}

.roster-header-stat--done strong {
  color: #007e7a;
}

.roster-header-stat__label {
  position: relative;
  padding-bottom: 5px;
}

.roster-header-stat__label::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--text-2);
  content: "";
}

.roster-header-stat--done .roster-header-stat__label::after { background: var(--ic-ok-text); }
.roster-header-stat--progress .roster-header-stat__label::after { background: var(--ic-wait-text); }
.roster-header-stat--pending .roster-header-stat__label::after { background: var(--danger-text); }
.roster-header-stat--neutral .roster-header-stat__label::after { background: var(--teal); }


.search-field {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 360px;
}

.search-field .ti {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 11px;
}

.search-field input {
  height: 32px;
  padding-left: 30px;
}


.roster-filter-bar {
  display: none;
  gap: 10px;
  padding: 12px 14px;
}

.roster-filter-bar.is-open {
  display: flex;
  flex-wrap: wrap;
}

.roster-filter-field {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.roster-filter-field > span {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
}

.roster-filter-field__control {
  min-width: 150px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.roster-filter-field__control:focus {
  border-color: var(--teal);
  outline: 2px solid color-mix(in srgb, var(--teal) 18%, transparent);
  outline-offset: 1px;
}

.roster-filter-actions {
  display: flex;
  align-items: end;
  gap: 7px;
}

.roster-filter-actions > * {
  min-height: 34px;
}

.roster-mobile-list-toolbar {
  display: none;
}

.roster-mobile-filter-dialog {
  width: min(430px, calc(100% - 24px));
  max-width: 430px;
  max-height: min(620px, calc(100dvh - 24px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 24px 70px rgb(15 23 42 / 24%);
}

.roster-mobile-filter-dialog::backdrop {
  background: rgb(9 18 24 / 46%);
}

.roster-mobile-filter-dialog__panel {
  display: grid;
  max-height: inherit;
  overflow: hidden;
}

.roster-mobile-filter-dialog__header,
.roster-mobile-filter-dialog__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
}

.roster-mobile-filter-dialog__header {
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.roster-mobile-filter-dialog__header h3,
.roster-mobile-filter-dialog__header p {
  margin: 0;
}

.roster-mobile-filter-dialog__header h3 {
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
}

.roster-mobile-filter-dialog__header p {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 10.5px;
}

.roster-mobile-filter-dialog__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text-2);
  cursor: pointer;
}

.roster-mobile-filter-dialog__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.roster-mobile-filter-dialog__body {
  display: grid;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
}

.roster-mobile-filter-dialog__group {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.roster-mobile-filter-dialog__group legend,
.roster-mobile-filter-dialog__field > span {
  padding: 0;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 720;
}

.roster-mobile-filter-dialog__status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.roster-mobile-filter-dialog__status-option {
  --roster-filter-status-color: var(--teal);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 10.75px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.roster-mobile-filter-dialog__status-option--pending {
  --roster-filter-status-color: var(--revez-pending-text, var(--danger-text));
}

.roster-mobile-filter-dialog__status-option--progress {
  --roster-filter-status-color: var(--revez-progress-text, var(--ic-wait-text));
}

.roster-mobile-filter-dialog__status-option--done {
  --roster-filter-status-color: var(--revez-done-text, var(--ic-ok-text));
}

.roster-mobile-filter-dialog__status-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--roster-filter-status-color) 52%, var(--border));
  background: color-mix(in srgb, var(--roster-filter-status-color) 12%, var(--field-bg));
  color: var(--roster-filter-status-color);
}

.roster-mobile-filter-dialog__status-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--roster-filter-status-color);
}

.roster-mobile-filter-dialog__field {
  display: grid;
  gap: 7px;
}

.roster-mobile-filter-dialog__select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.roster-mobile-filter-dialog__actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.roster-mobile-filter-dialog__actions > * {
  min-height: 36px;
}

html[data-theme="dark"] .roster-mobile-filter-dialog {
  box-shadow: 0 24px 70px rgb(0 0 0 / 46%);
}

html[data-theme="dark"] .roster-mobile-filter-dialog__status-option:has(input:checked) {
  color: var(--roster-filter-status-color);
}

.roster-filter-empty {
  display: none;
}

.roster-section-head {
  --roster-section-accent: var(--teal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.roster-section-head--official {
  --roster-section-accent: var(--gold);
}

.roster-section-head__title {
  display: flex;
  align-items: center;
  gap: 7px;
}


.roster-turma-control {
  display: none;
  align-items: center;
  gap: 5px;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
}

.roster-turma-control__select {
  min-width: 38px;
  height: 28px;
  padding: 0 20px 0 7px;
  border: 1px solid #cfe1e0;
  border-radius: var(--radius-control);
  background-color: var(--active-bg);
  color: var(--teal-dark);
  font: inherit;
  cursor: pointer;
}

.roster-turma-control--mobile {
  align-self: start;
  justify-self: end;
}

.roster-section-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-2);
  font-size: 13px;
}

.roster-section-head__label {
  display: inline-grid;
  gap: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.roster-section-head__label::after {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--roster-section-accent) 58%, transparent),
    var(--roster-section-accent) 48%,
    color-mix(in srgb, var(--roster-section-accent) 58%, transparent)
  );
  content: "";
  transform: scaleX(.28);
  transform-origin: left center;
  animation: roster-section-title-line 2.1s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}

@keyframes roster-section-title-line {
  0% {
    opacity: .62;
    transform: scaleX(.28);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roster-section-head__label::after {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
  }
}

.roster-list-card {
  overflow: hidden;
  padding: 0;
}

.roster-row {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  transition: var(--transition-ui);
}

.roster-row:last-child {
  border-bottom: none;
}

.roster-row:hover {
  background: var(--surface-hover);
}

.roster-row--pending {
  --roster-status-color: var(--danger-text);
  --roster-status-bg: var(--danger-bg);
}

.roster-row--progress {
  --roster-status-color: var(--ic-wait-text);
  --roster-status-bg: var(--ic-wait-bg);
}

.roster-row--done {
  --roster-status-color: var(--ic-ok-text);
  --roster-status-bg: var(--ic-ok-bg);
}

.roster-row .avatar {
  border-color: color-mix(in srgb, var(--roster-status-color, var(--border)) 64%, var(--border));
  box-shadow: 0 0 0 3px var(--roster-status-bg, transparent);
}

.roster-row .roster-time:nth-child(3) .roster-time__value,
.roster-row .roster-time:nth-child(4) .roster-time__value {
  color: var(--roster-status-color, var(--text));
}

.roster-row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
}

.roster-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  flex: 1 1 220px;
}

.roster-identity__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.roster-name {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

.roster-identity__copy > .status-pill {
  justify-self: start;
}

.roster-local-control {
  min-width: 68px;
}

.roster-local-control--readonly {
  display: grid;
  align-content: center;
  gap: 2px;
}

.roster-local-control--readonly .roster-local-picker__label {
  color: var(--text-2);
  font-size: 10.5px;
}

.roster-local-control--readonly .roster-local-picker__value {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 600;
}

.roster-local-select {
  width: 100%;
  min-width: 68px;
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.roster-local-select:hover { border-color: var(--text-3); }

.roster-local-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(0 126 123 / 12%);
  outline: none;
}

.roster-local-select:disabled {
  cursor: wait;
  opacity: 0.65;
}

.roster-local-picker {
  display: none;
}

.roster-time {
  display: grid;
  gap: 2px;
  min-width: 44px;
}

.roster-time__label {
  color: var(--text-2);
  font-size: 10.5px;
}

.roster-time__value {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 600;
}

.roster-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.roster-actions .secondary-button {
  min-width: 0;
  white-space: nowrap;
}

.roster-actions--readonly {
  align-items: center;
}

.roster-readonly-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--text-3) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 6%, transparent);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
}

.roster-readonly-label i {
  font-size: 12px;
}

.roster-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 11px 60px;
  color: var(--text-3);
  font-size: 10.5px;
}

.roster-note__message {
  min-width: 0;
  margin: 0;
  color: var(--text-2);
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.roster-note--empty .roster-note__message {
  color: var(--text-3);
  font-style: italic;
}

.roster-note.roster-note--active {
  border-radius: 7px;
  background: color-mix(in srgb, var(--gold) 7%, var(--card));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--gold) 88%, transparent);
}

.roster-note--active .roster-note__message {
  color: var(--text);
  font-weight: 620;
}

.roster-note__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand) 7%, var(--card));
  color: var(--brand);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.roster-note__edit:hover,
.roster-note__edit:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--border));
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  outline: none;
  transform: translateY(-1px);
}

.empty-card p,
.hero-card p,
.panel p {
  margin: 0;
}

@media (min-width: 1200px) {
  .roster-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: center;
    gap: 12px 18px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .roster-hero__copy {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .roster-desktop-context {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    min-width: 0;
    padding: 0 2px;
  }

  .roster-desktop-context__date {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 680;
    line-height: 1.2;
    white-space: nowrap;
  }

  .roster-desktop-context__separator {
    width: 1px;
    height: 20px;
    background: var(--border);
  }

  .roster-desktop-context__item {
    display: inline-grid;
    align-content: center;
    gap: 2px;
    min-width: 42px;
    padding: 0;
    color: var(--text-2);
    white-space: nowrap;
  }

  .roster-desktop-context__label {
    color: var(--text-3);
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .035em;
    line-height: 1;
  }

  .roster-desktop-context__item strong {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1.05;
  }

  .roster-desktop-context__item--cycle strong {
    color: var(--danger-text);
  }

  .roster-hero__date,
  .roster-hero__title,
  .roster-hero__count,
  .roster-hero__copy > .revez-duration-badge,
  .roster-hero__copy > .roster-turma-control {
    display: none;
  }

  .roster-hero__tools {
    display: contents;
  }

  .roster-hero__tools .search-field {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
  }

  .roster-hero__tools .search-field input {
    height: 38px;
    padding-right: 12px;
    border-color: var(--border);
    border-radius: 10px;
    background: var(--field-bg);
    box-shadow: 0 1px 2px rgb(15 23 42 / 3%);
  }

  .roster-hero__tools .roster-overview-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 700px) {

  .stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .login-layout,
  .content-columns {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }

}

@media (min-width: 1200px) {
  .roster-row__main {
    display: grid;
    grid-template-columns: minmax(160px, 1.6fr) minmax(64px, auto) repeat(4, minmax(42px, auto)) minmax(0, 160px);
    align-items: center;
  }

  .roster-actions {
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .roster-actions .secondary-button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .roster-actions .secondary-button .button-icon {
    flex-shrink: 0;
  }

  .roster-row--progress .roster-action-button--started {
    border-color: var(--ic-wait-text);
    background-color: var(--ic-wait-bg);
    color: var(--ic-wait-text);
    cursor: default;
  }

  .roster-row--done .roster-action-button--started {
    border-color: var(--ic-ok-text);
    background-color: var(--ic-ok-bg);
    color: var(--ic-ok-text);
    cursor: default;
  }
}




@media (max-width: 1199px) {
  .roster-row .roster-local-select {
    border-color: color-mix(in srgb, var(--roster-status-color, var(--border)) 34%, var(--border));
    background-color: color-mix(in srgb, var(--roster-status-bg, var(--field-bg)) 28%, var(--field-bg));
    color: var(--roster-status-color, var(--text-2));
  }

  .roster-row .roster-action-button {
    border-color: color-mix(in srgb, var(--roster-status-color, var(--border)) 36%, var(--border));
    color: var(--roster-status-color, var(--text-2));
  }

  .roster-row .roster-action-button--start {
    background-color: color-mix(in srgb, var(--roster-status-bg, var(--card)) 54%, var(--card));
  }

  .roster-row .roster-action-button--started {
    border-color: color-mix(in srgb, var(--roster-status-color, var(--border)) 24%, var(--border));
    background-color: color-mix(in srgb, var(--roster-status-bg, var(--card)) 34%, var(--card));
    cursor: default;
  }

  .roster-row .roster-action-button--edit {
    background-color: var(--card);
  }

  .roster-row .roster-action-button:hover,
  .roster-row .roster-action-button:focus-visible,
  .roster-row .roster-local-select:hover,
  .roster-row .roster-local-select:focus {
    border-color: var(--roster-status-color, var(--teal));
    background-color: var(--roster-status-bg, var(--card));
    color: var(--roster-status-color, var(--teal-dark));
  }

  .roster-header-stats {
    width: 100%;
    justify-content: center;
  }

  .roster-hero__copy {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .roster-hero__date,
  .roster-hero__count {
    grid-column: 1 / -1;
  }

  .roster-turma-control--mobile {
    display: inline-flex;
    grid-column: 3;
    grid-row: 2;
  }

  .roster-list-card {
    display: grid;
    gap: 8px;
    overflow: visible;
    background: transparent;
  }

  .roster-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
  }

  .roster-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  .roster-row__main {
    display: contents;
  }

  .roster-identity {
    grid-column: 1 / 9;
    grid-row: 1;
    min-width: 0;
  }

  .roster-identity .avatar {
    width: 44px;
    height: 44px;
  }

  .roster-identity__copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .roster-name {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-identity__copy > .status-pill {
    min-height: 16px;
    padding-inline: 5px;
    font-size: 8px;
  }

  .roster-local-control {
    grid-column: 6 / 9;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    width: calc(100% - 8px);
    min-width: 0;
  }

  .roster-note {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-3);
    font-size: 9px;
    line-height: 1.35;
  }


  .roster-actions {
    grid-column: 1 / 6;
    grid-row: 3;
    align-self: stretch;
    gap: 4px;
  }

  .roster-actions .secondary-button {
    flex: 0 0 auto;
    min-height: 28px;
    padding-inline: 7px;
    font-size: 8px;
  }

  .roster-actions .button-icon {
    font-size: 11px;
  }

  .roster-time {
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 0;
    text-align: center;
  }

  .roster-time:nth-child(3) {
    grid-column: 9 / 11;
    grid-row: 1;
    align-self: end;
    min-height: 30px;
  }

  .roster-time:nth-child(4) {
    grid-column: 11 / 13;
    grid-row: 1;
    align-self: end;
    min-height: 30px;
  }
  .roster-time:nth-child(5) { grid-column: 9 / 11; grid-row: 3; }
  .roster-time:nth-child(6) { grid-column: 11 / 13; grid-row: 3; }

  .roster-time__label {
    font-size: 8px;
    font-weight: 600;
  }

  .roster-time__value {
    font-size: 10px;
    font-weight: 700;
  }}

.central-page { gap: 14px; }

.central-page .central-toolbar,
.central-page .central-filters,
.central-page .central-summary {
  border-color: #e7eceb;
  box-shadow: 0 1px 2px rgb(15 23 42 / 3%);
}

.central-page .toggle-group {
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface);
}

.central-page .toggle-chip {
  border-color: transparent;
  background: transparent;
}

.central-page .toggle-chip.is-active {
  border-color: #d7e6e4;
  background: var(--card);
  box-shadow: 0 1px 3px rgb(15 23 42 / 7%);
}

.central-page .central-filter-submit {
  min-height: 36px;
}

.central-page .central-composer {
  border-color: #e4eae9;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.central-page .central-composer:hover {
  border-color: #ccd9d7;
  box-shadow: 0 4px 14px rgb(15 23 42 / 5%);
}

.central-page .central-directory {
  border-color: #e2e8e7;
  box-shadow: none;
}

.central-page .central-directory:has(.central-directory__toggle[aria-expanded="true"]) {
  border-color: #cfdedc;
  box-shadow: 0 4px 16px rgb(15 23 42 / 5%);
}

.central-page .central-directory__toggle[aria-expanded="true"] {
  color: var(--teal-dark);
}

.central-page .central-directory__toggle[aria-expanded="true"] i {
  color: var(--teal);
}

.central-page .central-role-pill {
  border-color: transparent;
  background: var(--surface);
  color: #455654;
}

.central-page .central-edit-button {
  min-height: 30px;
  padding-inline: 8px;
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}

.central-page .central-edit-button:hover,
.central-page .central-edit-button[aria-expanded="true"] {
  border-color: #d6e3e1;
  background: var(--active-bg);
  color: var(--teal-dark);
}

.central-page .danger-button {
  border-color: #f1d8d6;
  background: var(--danger-bg);
}

.central-page .danger-button:hover {
  border-color: #dfaaa5;
  background: var(--danger-bg);
  color: var(--danger-text);
}

.central-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.central-toolbar__scope,
.central-filter-field { display: grid; gap: 6px; }

.central-control-label,
.central-filter-field > label {
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
}

.central-toolbar__context {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--text-2);
  font-size: 10.5px;
}

.central-toolbar__context strong { color: var(--text); }

.central-filters {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.central-filter-field--search { min-width: 0; }
.central-search { width: 100%; max-width: none; }

.central-filter-field select {
  width: 100%;
  min-height: 36px;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.central-filter-field select:hover { border-color: var(--text-3); }

.central-filter-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(0 126 123 / 12%);
  outline: none;
}

.central-summary {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.central-summary__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 12px 14px;
}

.central-summary__item + .central-summary__item { border-top: 1px solid var(--border); }
.central-summary__item span, .central-summary__item small { color: var(--text-2); font-size: 10.5px; }
.central-summary__item strong { color: var(--text); font-size: 14px; font-weight: 650; }
.central-summary__item small { grid-column: 1 / -1; }

.central-create-section { display: grid; gap: 10px; }

.central-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.central-section-heading h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 650; }
.central-section-heading p { margin: 3px 0 0; color: var(--text-2); font-size: 10.5px; line-height: 1.45; }

.central-create-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

.central-composer {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.central-composer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
}

.central-composer__title { display: flex; align-items: center; gap: 10px; min-width: 0; }

.central-composer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--active-bg);
  color: var(--teal);
  flex-shrink: 0;
}

.central-composer__title h3 { margin: 0; color: var(--text); font-size: 12.5px; font-weight: 650; }
.central-composer__title p { margin: 2px 0 0; font-size: 10.5px; }
.central-composer__body { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.central-composer__body[hidden], .central-row__editor[hidden] { display: none; }

.central-directory { padding: 0; overflow: hidden; }
.central-directory__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.central-directory__toggle:hover {
  color: var(--teal);
}

.central-directory__toggle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.central-directory__toggle i {
  color: var(--text-2);
  font-size: 14px;
}

.central-directory__body[hidden] {
  display: none;
}

.central-section-heading--list { align-items: center; padding: 14px; border-bottom: 1px solid var(--border); }
.central-count { flex-shrink: 0; color: var(--text-2); font-size: 10.5px; font-weight: 600; }
.central-list { gap: 0; }
.central-row { border-bottom: 1px solid var(--border); }
.central-row:last-child { border-bottom: none; }

.central-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  transition: background-color 160ms ease;
}

.central-row__main:hover { background: var(--surface-hover); }
.central-row__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.central-row__editor { padding: 0 14px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.central-row__editor .inline-form, .central-composer__body .inline-form { padding-top: 14px; border-top: none; }

@media (min-width: 700px) {
  .central-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .central-toolbar__context { justify-content: flex-end; }
  .central-filters { grid-template-columns: minmax(260px, 1fr) minmax(140px, 180px) auto; }
  .central-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .central-summary__item + .central-summary__item { border-top: none; border-left: 1px solid var(--border); }
  .central-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central-row__main { grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.8fr) auto; }
}

.central-page--roles {
  gap: 10px;
}

.central-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.central-page-head > span,
.central-page-head > strong {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
}


.central-scope {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.central-scope__turmas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.central-scope__turmas::-webkit-scrollbar {
  display: none;
}

.central-scope__turmas .toggle-chip {
  flex: 0 0 auto;
  min-height: 30px;
  padding-inline: 10px;
}

.central-quick-search .search-field {
  width: 100%;
  max-width: none;
}

.central-quick-search input {
  height: 34px;
}

.central-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.central-role-card {
  appearance: none;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.central-role-card:hover,
.central-role-card:focus-visible,
.central-role-card.is-active {
  border-color: #cfe1e0;
  background: var(--surface);
  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
}

.central-role-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.central-role-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: var(--active-bg);
  color: var(--teal-dark);
  font-size: 15px;
}

.central-role-card__label {
  display: flex;
  align-items: center;
  align-self: center;
  min-width: 0;
  height: 24px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.central-role-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  color: var(--teal-dark);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  align-self: center;
  transform: translateY(-2px);
}

.central-role-panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.central-role-panel[hidden] {
  display: none;
}

.central-role-panel__header {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}

.central-role-panel__header h2 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.central-role-panel__header span {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 9px;
}

.central-role-panel__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.central-role-panel__actions .secondary-button {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 9px;
}

.central-role-panel__actions .secondary-button.is-active {
  border-color: #cfe1e0;
  background: var(--active-bg);
  color: var(--teal-dark);
}

.central-role-panel__close {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--text-2);
}

.central-role-panel__content:empty {
  display: none;
}

.central-photo-field {
  grid-column: 1 / -1;
}

.central-photo-field__title {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}

.central-photo-field__control {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: max-content;
  max-width: 100%;
  min-height: 58px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 32px 10px 10px 32px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.central-photo-field__control:hover,
.central-photo-field__control:focus-within {
  border-color: #bcd5d2;
  background: var(--surface);
  box-shadow: 0 0 0 3px rgb(0 126 123 / 8%);
}

.central-photo-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.central-photo-field__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #cfe1e0;
  border-radius: 50%;
  background: var(--active-bg);
  color: var(--teal-dark);
  font-size: 15px;
}

.central-photo-field__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.central-photo-field__preview[hidden],
.central-photo-field__placeholder[hidden] {
  display: none;
}

.central-photo-field__camera {
  position: absolute;
  bottom: 1px;
  left: 39px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--teal-dark);
  color: #ffffff;
  font-size: 10px;
}

.central-photo-field__copy {
  display: grid;
  gap: 2px;
  padding-right: 4px;
}

.central-photo-field__copy strong {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 600;
}

.central-photo-field__copy small {
  color: var(--text-2);
  font-size: 8.5px;
}

.central-role-panel__content > .inline-form {
  padding: 12px;
}

.central-role-panel__content .central-list {
  margin: 0;
}

@media (min-width: 700px) {
  .central-scope {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .central-quick-search {
    width: min(320px, 42%);
  }

  .central-role-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .central-role-panel__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.roster-status-panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
}

.roster-status-panel[hidden] {
  display: none;
}

.roster-status-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 10px;
}

.roster-status-panel__head strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.roster-status-panel__head span {
  color: var(--text-2);
}

.roster-status-table-wrap {
  overflow-x: auto;
}

.roster-status-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10px;
}

.roster-status-table th,
.roster-status-table td {
  padding: 7px 9px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.roster-status-table thead th {
  border-top: 0;
  color: var(--text-2);
  font-size: 9px;
  font-weight: 600;
}

.roster-status-table th:first-child,
.roster-status-table td:first-child {
  width: 34px;
  text-align: center;
}

.roster-status-table th:nth-child(2),
.roster-status-table td:nth-child(2) {
  width: 30%;
}

.roster-status-table th:nth-child(3),
.roster-status-table td:nth-child(3) {
  width: 120px;
}

.roster-status-table th:nth-child(4),
.roster-status-table td:nth-child(4) {
  width: 64px;
}

.roster-status-table th:nth-child(n + 3),
.roster-status-table td:nth-child(n + 3) {
  text-align: center;
}

.roster-status-table th:nth-child(5),
.roster-status-table td:nth-child(5),
.roster-status-table th:nth-child(6),
.roster-status-table td:nth-child(6) {
  width: 58px;
}

.roster-status-table .status-pill {
  min-height: 16px;
  gap: 3px;
  padding-inline: 5px;
  border-radius: 5px;
  font-size: 8px;
  line-height: 1;
}

.roster-status-table .status-pill__dot {
  width: 4px;
  height: 4px;
}

.roster-status-empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--text-2);
  font-size: 10px;
  text-align: center;
}

.roster-header-stat.is-active {
  color: var(--text);
}

@media (max-width: 699px) {
  .roster-status-panel {
    margin-inline: 2px;
  }

  .roster-status-table {
    min-width: 0;
    font-size: 8.5px;
  }

  .roster-status-table th,
  .roster-status-table td {
    padding: 6px 3px;
  }

  .roster-status-table th:first-child,
  .roster-status-table td:first-child {
    width: 24px;
  }

  .roster-status-table th:nth-child(2),
  .roster-status-table td:nth-child(2) {
    width: auto;
  }

  .roster-status-table th:nth-child(3),
  .roster-status-table td:nth-child(3) {
    width: 72px;
  }

  .roster-status-table th:nth-child(4),
  .roster-status-table td:nth-child(4) {
    width: 40px;
  }

  .roster-status-table th:nth-child(5),
  .roster-status-table td:nth-child(5),
  .roster-status-table th:nth-child(6),
  .roster-status-table td:nth-child(6) {
    width: 38px;
  }

  .roster-status-table .status-pill {
    max-width: 68px;
    min-height: 14px;
    padding-inline: 4px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
  }
}

.roster-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgb(15 17 21 / 58%);
  cursor: default;
}

.roster-add-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 41;
  display: grid;
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 24px 64px rgb(15 23 42 / 24%);
}

.roster-add-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.roster-add-modal__header h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.roster-add-modal__header p {
  max-width: 410px;
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.45;
}

.roster-add-form {
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.roster-add-list {
  display: grid;
  gap: 2px;
  max-height: 430px;
  overflow-y: auto;
  padding: 8px 12px;
}

.roster-add-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.roster-add-option:hover {
  background: var(--bg);
}

.roster-add-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--teal);
}

.roster-add-option__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.roster-add-option__copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-add-option__copy small {
  color: var(--text-2);
  font-size: 10px;
}

.roster-add-empty {
  margin: 24px 12px;
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}

.roster-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.profile-page {
  --profile-graphite: #26343a;
  --profile-graphite-deep: #202d33;
  --profile-navy: #0b2a67;
  --profile-yellow: #ECB11F;
  --profile-teal: #047e7d;
  --profile-success: #5b9d3b;
  --profile-surface: #ffffff;
  --profile-surface-soft: #fafbfb;
  --profile-ink: #10265f;
  --profile-text: #24323b;
  --profile-muted: #707b84;
  --profile-line: #e1e5e8;
  --profile-shadow: 0 4px 14px rgb(25 36 43 / 8%);
  display: grid;
  grid-template-areas:
    "brand"
    "person"
    "roster"
    "direction"
    "library"
    "quick";
  gap: 8px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 0 0 10px;
}

.profile-layout-sidebar,
.profile-layout-main {
  display: contents;
}

.profile-brandbar {
  grid-area: brand;
}

.profile-person {
  grid-area: person;
}

.profile-roster-card {
  grid-area: roster;
}

.profile-direction {
  grid-area: direction;
}

.profile-library {
  grid-area: library;
}

.profile-quick-link {
  grid-area: quick;
}

html[data-theme="dark"] .profile-page {
  --profile-graphite: #202b31;
  --profile-graphite-deep: #182329;
  --profile-navy: #dce6ff;
  --profile-surface: #1e252b;
  --profile-surface-soft: #252e35;
  --profile-ink: #eef3ff;
  --profile-text: #e6ebee;
  --profile-muted: #aeb7bd;
  --profile-line: #39444b;
  --profile-shadow: 0 5px 16px rgb(0 0 0 / 22%);
}

.profile-brandbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-height: 64px;
  padding: 9px 14px;
  border-radius: 0;
  background: linear-gradient(102deg, var(--profile-graphite), var(--profile-graphite-deep));
  box-shadow: none;
}

.profile-brandbar__brand {
  display: block;
  width: 96px;
  height: auto;
  object-fit: contain;
}

.profile-brandbar__menu {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #aeb5b8;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.profile-brandbar__menu:hover,
.profile-brandbar__menu:focus-visible {
  background: rgb(255 255 255 / 6%);
  color: #ffffff;
}

.profile-person,
.profile-roster-card,
.profile-library {
  border: 1px solid var(--profile-line);
  border-radius: 11px;
  background: var(--profile-surface);
  box-shadow: var(--profile-shadow);
}

.profile-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
}

.profile-person__photo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 2px;
  border: 1.5px solid var(--profile-yellow);
  border-radius: 50%;
  background: var(--profile-surface);
}

.profile-identity__avatar.avatar {
  width: 100%;
  height: 100%;
  border: 1px solid var(--profile-surface);
  background: var(--profile-surface-soft);
  color: var(--profile-navy);
  font-size: 18px;
  box-shadow: none;
}

.profile-person__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
}

.profile-person__copy h1 {
  overflow: hidden;
  margin: 0;
  color: var(--profile-navy);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-person__matricula {
  color: var(--profile-navy);
  font-size: 10.5px;
  font-weight: 520;
  letter-spacing: 0.02em;
}

.profile-person__copy p {
  margin: 0;
  color: var(--profile-navy);
  font-size: 10.5px;
  font-weight: 500;
}

.profile-person__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 29px;
  margin-top: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #e7a500, var(--profile-yellow));
  color: #20272b;
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}

.profile-person__edit .button-icon {
  font-size: 13px;
}

.profile-person__edit:hover,
.profile-person__edit:focus-visible {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.profile-section-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 0 10px;
  background: linear-gradient(102deg, var(--profile-graphite), var(--profile-graphite-deep));
}

.profile-section-heading > span {
  width: 4px;
  height: 17px;
  border-radius: 999px;
  background: var(--profile-yellow);
}

.profile-section-heading h2 {
  margin: 0;
  color: #f0f2f3;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.profile-roster-card {
  overflow: hidden;
}

.profile-roster-card__milestones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 7px 5px 6px;
  background: var(--profile-surface);
}

.profile-roster-milestone {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1px;
  min-width: 0;
  padding: 1px 3px 3px;
  text-align: center;
}

.profile-roster-milestone + .profile-roster-milestone::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 1px;
  background: var(--profile-line);
}

.profile-roster-milestone__icon {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-bottom: 1px;
  color: var(--profile-graphite);
  font-size: 16px;
}

html[data-theme="dark"] .profile-roster-milestone__icon {
  color: #dbe1e4;
}

.profile-roster-milestone--success .profile-roster-milestone__icon {
  border-radius: 50%;
  background: var(--profile-success);
  color: #ffffff;
  font-size: 14px;
}

.profile-roster-milestone strong {
  color: var(--profile-navy);
  font-size: 8px;
  font-weight: 720;
  line-height: 1.15;
  text-transform: uppercase;
}

.profile-roster-milestone span:not(.profile-roster-milestone__icon),
.profile-roster-milestone time {
  overflow: hidden;
  max-width: 100%;
  color: var(--profile-text);
  font-size: 7.2px;
  font-weight: 480;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-roster-milestone time {
  font-size: 8.5px;
  font-weight: 600;
}

.profile-roster-card__local {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0 9px 6px;
  padding: 5px 8px;
  border: 1px solid var(--profile-line);
  border-radius: 7px;
  background: var(--profile-surface-soft);
  color: var(--profile-graphite);
}

html[data-theme="dark"] .profile-roster-card__local {
  color: #dbe1e4;
}

.profile-roster-card__local > i {
  font-size: 18px;
}

.profile-roster-card__local div {
  display: grid;
  gap: 0;
}

.profile-roster-card__local span {
  color: var(--profile-navy);
  font-size: 7.8px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.profile-roster-card__local strong {
  color: var(--profile-ink);
  font-size: 9.5px;
  font-weight: 620;
  line-height: 1.2;
}

.profile-roster-card__justifications {
  display: grid;
  gap: 5px;
  padding: 0 9px 6px;
}

.profile-justification {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--profile-line);
  border-radius: 7px;
  background: var(--profile-surface-soft);
}

.profile-justification__icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--profile-graphite) 7%, transparent);
  color: var(--profile-graphite);
  font-size: 17px;
}

html[data-theme="dark"] .profile-justification__icon {
  background: rgb(255 255 255 / 7%);
  color: #e3e7e9;
}

.profile-justification div {
  display: grid;
  gap: 0;
  min-width: 0;
}

.profile-justification strong {
  color: var(--profile-navy);
  font-size: 7.7px;
  font-weight: 720;
  line-height: 1.2;
  text-transform: uppercase;
}

.profile-justification p {
  margin: 0;
  color: var(--profile-ink);
  font-size: 9.3px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.profile-justification small {
  color: var(--profile-muted);
  font-size: 7.2px;
  line-height: 1.2;
}


.profile-justification--empty p {
  color: var(--profile-muted);
  font-style: italic;
}

.profile-roster-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 9px 8px;
}

.profile-roster-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid var(--profile-navy);
  border-radius: 7px;
  background: transparent;
  color: var(--profile-navy);
  font: inherit;
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.profile-roster-card__action .button-icon {
  font-size: 13px;
}

.profile-roster-card__action--start:not(:disabled) {
  border-color: var(--profile-graphite);
  background: var(--profile-graphite);
  color: #ffffff;
}

.profile-roster-card__action:hover:not(:disabled),
.profile-roster-card__action:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--profile-navy) 8%, transparent);
}

.profile-roster-card__action--start:hover:not(:disabled),
.profile-roster-card__action--start:focus-visible:not(:disabled) {
  background: var(--profile-graphite-deep);
}

.profile-roster-card__action:disabled {
  cursor: default;
  opacity: 0.48;
}

.profile-roster-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 70px;
  padding: 10px 12px;
}

.profile-roster-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--profile-surface-soft);
  color: var(--profile-muted);
  font-size: 19px;
}

.profile-roster-empty div {
  display: grid;
  gap: 2px;
}

.profile-roster-empty strong {
  color: var(--profile-ink);
  font-size: 10.5px;
}

.profile-roster-empty span:not(.profile-roster-empty__icon) {
  color: var(--profile-muted);
  font-size: 9px;
  line-height: 1.35;
}

.profile-direction {
  overflow: hidden;
  border: 1px solid #344149;
  border-radius: 11px;
  background: linear-gradient(115deg, var(--profile-graphite), var(--profile-graphite-deep));
  box-shadow: var(--profile-shadow);
}

.profile-direction .profile-section-heading {
  min-height: 29px;
  padding-inline: 10px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: transparent;
}

.profile-direction__dispatch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0 8px 8px;
  padding: 8px 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 7px;
  background: rgb(255 255 255 / 2%);
}

.profile-direction__dispatch-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--profile-yellow);
  border-radius: 50%;
  color: var(--profile-yellow);
  font-size: 17px;
}

.profile-direction__dispatch div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-direction__dispatch p {
  margin: 0;
  color: #f5f6f7;
  font-size: 11.5px;
  font-weight: 470;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.profile-direction__dispatch small {
  color: #b8c0c5;
  font-size: 7.8px;
}

.profile-direction__details {
  margin: 0 8px 8px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #dce1e4;
}

.profile-direction__details summary {
  padding: 7px 1px;
  color: #d9dfe2;
  font-size: 8.5px;
  font-weight: 620;
  cursor: pointer;
}

.profile-direction__timeline {
  display: grid;
  gap: 6px;
  padding: 3px 0 8px;
}

.profile-direction-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.profile-direction-event__marker {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(236 177 31 / 48%);
  border-radius: 50%;
  color: var(--profile-yellow);
  font-size: 12px;
}

.profile-direction-event__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-direction-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.profile-direction-event__meta strong,
.profile-direction-event__meta small,
.profile-direction-event p {
  color: #d9dfe2;
  font-size: 8px;
}

.profile-direction-event p {
  margin: 0;
  font-size: 9px;
  line-height: 1.35;
}

.profile-direction__form {
  padding: 0 8px 8px;
}

.profile-direction__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
}

.profile-direction__composer textarea {
  min-height: 39px;
  max-height: 100px;
  resize: vertical;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 7px;
  background: rgb(255 255 255 / 6%);
  color: #ffffff;
  font-size: 9.5px;
}

.profile-direction__composer textarea::placeholder {
  color: #aab4b9;
}

.profile-direction__composer textarea:focus {
  border-color: var(--profile-yellow);
  box-shadow: 0 0 0 2px rgb(236 177 31 / 14%);
}

.profile-direction__send {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--profile-yellow);
  border-radius: 7px;
  background: transparent;
  color: var(--profile-yellow);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.profile-library {
  overflow: hidden;
}

.profile-library__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--profile-line);
}

.profile-library__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid var(--profile-line);
  background: var(--profile-surface);
  color: var(--profile-navy);
  font: inherit;
  font-size: 9.3px;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
}

.profile-library__tab:last-child {
  border-right: 0;
}

.profile-library__tab.is-active {
  background: linear-gradient(90deg, #e7a500, var(--profile-yellow));
  color: #20272b;
}

.profile-library__panel[hidden] {
  display: none;
}

.profile-history-list {
  display: grid;
}

.profile-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--profile-line);
}

.profile-history-row[hidden] {
  display: none;
}

.profile-history-row__icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #0b2a57;
  color: #ffffff;
  font-size: 15px;
}

html[data-theme="dark"] .profile-history-row__icon {
  background: #30466f;
}

.profile-history-row__copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.profile-history-row__copy strong {
  overflow: hidden;
  color: var(--profile-navy);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-history-row__copy span {
  color: var(--profile-text);
  font-size: 8.2px;
  line-height: 1.2;
}

.profile-history-row__chevron {
  color: #9da5aa;
  font-size: 15px;
}

.profile-history-more {
  display: block;
  width: 100%;
  min-height: 29px;
  border: 0;
  background: var(--profile-surface);
  color: var(--profile-navy);
  font: inherit;
  font-size: 8.8px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.profile-library__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 70px;
  padding: 14px;
  color: var(--profile-muted);
  font-size: 9px;
  text-align: center;
}

.profile-library__empty i {
  font-size: 18px;
}

.profile-help-list {
  display: grid;
  padding: 4px 10px 8px;
}

.profile-help-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--profile-line);
}

.profile-help-item:last-child {
  border-bottom: 0;
}

.profile-help-item > span {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--profile-yellow) 18%, transparent);
  color: #9b6c00;
  font-size: 8px;
  font-weight: 800;
}

html[data-theme="dark"] .profile-help-item > span {
  color: var(--profile-yellow);
}

.profile-help-item div {
  display: grid;
  gap: 1px;
}

.profile-help-item strong {
  color: var(--profile-navy);
  font-size: 9.5px;
}

.profile-help-item p {
  margin: 0;
  color: var(--profile-muted);
  font-size: 8.5px;
  line-height: 1.35;
}

.profile-quick-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 60px;
  padding: 9px 11px;
  border: 1px solid #344149;
  border-radius: 11px;
  background: linear-gradient(110deg, var(--profile-graphite), var(--profile-graphite-deep));
  color: #ffffff;
  font: inherit;
  text-align: left;
  box-shadow: var(--profile-shadow);
  cursor: pointer;
}

.profile-quick-link__icon {
  display: inline-grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1.5px solid var(--profile-yellow);
  border-radius: 50%;
  color: var(--profile-yellow);
  font-size: 18px;
}

.profile-quick-link div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-quick-link strong {
  color: var(--profile-yellow);
  font-size: 8.8px;
  font-weight: 620;
  text-transform: uppercase;
}

.profile-quick-link div span {
  color: #d8dde0;
  font-size: 8.8px;
  line-height: 1.3;
}

.profile-quick-link__arrow {
  color: var(--profile-yellow);
  font-size: 17px;
}

.profile-settings,
.profile-roster-edit {
  width: min(94vw, 620px);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 24px 60px rgb(15 23 42 / 26%);
}

.profile-settings::backdrop,
.profile-roster-edit::backdrop {
  background: rgb(15 32 31 / 48%);
}

.profile-settings__panel,
.profile-roster-edit__panel {
  overflow-y: auto;
  max-height: 90vh;
  border-radius: 16px;
  background: var(--surface);
}

.profile-settings__header,
.profile-roster-edit__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.profile-settings__header h2,
.profile-settings__heading h3,
.profile-roster-edit__header h3 {
  margin: 0;
  color: var(--text-1);
  font-weight: 650;
}

.profile-settings__header h2 {
  font-size: 16px;
}

.profile-settings__header p,
.profile-settings__heading p,
.profile-roster-edit__header p {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: 10px;
}

.profile-settings__section {
  display: grid;
  gap: 14px;
  margin: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--card);
}

.profile-settings__heading h3 {
  font-size: 13px;
}

.profile-settings__heading--action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-form,
.profile-form__fields {
  display: grid;
  gap: 12px;
}

.profile-email-field__hint {
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.4;
}

.profile-card__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 3px;
}

.profile-password-form__fields,
.profile-roster-edit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-roster-edit__grid {
  padding: 16px 18px;
}

.profile-roster-edit__grid label {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 10px;
}

.profile-roster-edit__grid select,
.profile-roster-edit__justifications textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
}

.profile-roster-edit__grid select {
  min-height: 36px;
  padding: 0 10px;
}

.profile-roster-edit__justifications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 16px;
}

.profile-roster-edit__justifications label {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 10px;
}

.profile-roster-edit__justifications textarea {
  min-height: 76px;
  padding: 9px 10px;
  line-height: 1.4;
  resize: vertical;
}

.profile-roster-edit__grid select:focus,
.profile-roster-edit__justifications textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
  outline: none;
}

.profile-roster-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 18px;
}

.profile-password-form > .secondary-button {
  justify-self: end;
}

.profile-passkey-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-passkey {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.profile-passkey__icon {
  color: var(--teal-dark);
  font-size: 18px;
}

.profile-passkey__copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.profile-passkey__copy strong {
  color: var(--text-1);
  font-size: 10.5px;
  font-weight: 650;
}

.profile-passkey__copy span {
  color: var(--text-2);
  font-size: 9.5px;
}

.profile-passkey__remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--danger-text);
  font: inherit;
  font-size: 9.5px;
  cursor: pointer;
}

.profile-security-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  color: var(--text-2);
  font-size: 10px;
}


@media (max-width: 699px) {
  .profile-page {
    gap: 0;
  }

  .profile-brandbar {
    display: flex;
    margin: -16px -12px 0;
  }

  .profile-person {
    margin: 0 -12px;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 12px rgb(25 36 43 / 6%);
  }

  .profile-roster-card,
  .profile-direction,
  .profile-library,
  .profile-quick-link {
    margin-top: 8px;
  }
}

@media (min-width: 560px) {
  .profile-page {
    gap: 10px;
    padding: 0 0 14px;
  }


  .profile-person {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    padding: 11px 14px;
  }

  .profile-person__photo {
    width: 78px;
    height: 78px;
  }

  .profile-person__copy h1 {
    font-size: 17.5px;
  }

  .profile-person__matricula,
  .profile-person__copy p {
    font-size: 11px;
  }

  .profile-person__edit {
    width: min(100%, 360px);
    min-height: 30px;
  }

  .profile-roster-card__milestones {
    padding: 8px 8px 7px;
  }

  .profile-roster-milestone__icon {
    width: 27px;
    height: 27px;
    font-size: 17px;
  }

  .profile-roster-milestone strong {
    font-size: 8.4px;
  }

  .profile-roster-milestone span:not(.profile-roster-milestone__icon),
  .profile-roster-milestone time {
    font-size: 7.6px;
  }

  .profile-roster-milestone time {
    font-size: 9px;
  }

  .profile-direction__dispatch p {
    font-size: 12px;
  }

  .profile-history-row__copy strong {
    font-size: 10px;
  }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .profile-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "person person"
      "roster roster"
      "direction library"
      "quick library";
    gap: 14px;
    width: min(100%, 1040px);
    padding: 2px 0 24px;
    align-items: start;
  }

  .profile-person,
  .profile-roster-card,
  .profile-direction,
  .profile-library,
  .profile-quick-link {
    border-radius: 14px;
  }

  .profile-person {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
    padding: 15px 18px;
  }

  .profile-person__photo {
    width: 88px;
    height: 88px;
    padding: 3px;
  }

  .profile-person__copy {
    align-content: center;
    gap: 2px;
  }

  .profile-person__copy h1 {
    font-size: 19px;
    line-height: 1.15;
  }

  .profile-person__matricula,
  .profile-person__copy p {
    font-size: 11.5px;
  }

  .profile-person__edit {
    width: min(100%, 220px);
    min-height: 34px;
    margin-top: 8px;
    font-size: 10px;
  }

  .profile-section-heading,
  .profile-direction .profile-section-heading {
    min-height: 34px;
    padding-inline: 13px;
  }

  .profile-section-heading > span {
    width: 4px;
    height: 18px;
  }

  .profile-section-heading h2 {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .profile-roster-card__milestones {
    padding: 11px 10px 9px;
  }

  .profile-roster-milestone {
    gap: 2px;
    padding-inline: 7px;
  }

  .profile-roster-milestone__icon {
    width: 31px;
    height: 31px;
    margin-bottom: 2px;
    font-size: 19px;
  }

  .profile-roster-milestone--success .profile-roster-milestone__icon {
    font-size: 16px;
  }

  .profile-roster-milestone strong {
    font-size: 9.6px;
  }

  .profile-roster-milestone span:not(.profile-roster-milestone__icon),
  .profile-roster-milestone time {
    font-size: 8.8px;
  }

  .profile-roster-milestone time {
    font-size: 11px;
  }

  .profile-roster-card__local {
    margin: 0 14px 10px;
    padding: 8px 10px;
  }

  .profile-roster-card__local > i {
    font-size: 20px;
  }

  .profile-roster-card__local span {
    font-size: 8.8px;
  }

  .profile-roster-card__local strong {
    font-size: 11.5px;
  }

  .profile-roster-card__justifications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 10px;
  }

  .profile-justification {
    align-items: start;
    min-height: 66px;
    gap: 9px;
    padding: 9px 10px;
  }

  .profile-justification__icon {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }

  .profile-justification strong {
    font-size: 8.8px;
  }

  .profile-justification p {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .profile-justification small {
    font-size: 8.2px;
  }

  .profile-roster-card__actions {
    gap: 9px;
    padding: 0 14px 12px;
  }

  .profile-roster-card__action {
    min-height: 34px;
    font-size: 10px;
  }

  .profile-direction__dispatch {
    align-items: start;
    margin: 0 11px 10px;
    padding: 10px 11px;
  }

  .profile-direction__dispatch-icon {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  .profile-direction__dispatch p {
    font-size: 12px;
    line-height: 1.38;
  }

  .profile-direction__dispatch small,
  .profile-direction-event__meta strong,
  .profile-direction-event__meta small {
    font-size: 8.8px;
  }

  .profile-direction-event p {
    font-size: 10px;
  }

  .profile-direction__details,
  .profile-direction__form {
    margin-inline: 11px;
  }

  .profile-direction__form {
    padding: 0 0 10px;
  }

  .profile-direction__composer textarea {
    min-height: 44px;
    font-size: 10.5px;
  }

  .profile-direction__send {
    width: 35px;
    height: 35px;
  }

  .profile-library__tab {
    min-height: 38px;
    font-size: 10px;
  }

  .profile-history-row {
    min-height: 49px;
    padding: 7px 11px;
  }

  .profile-history-row__icon {
    width: 32px;
    height: 32px;
  }

  .profile-history-row__copy strong {
    font-size: 10.5px;
  }

  .profile-history-row__copy span {
    font-size: 9.2px;
  }

  .profile-help-item strong {
    font-size: 10.5px;
  }

  .profile-help-item p {
    font-size: 9.2px;
  }

  .profile-quick-link {
    min-height: 64px;
    padding: 10px 12px;
  }

  .profile-quick-link strong,
  .profile-quick-link div span {
    font-size: 9.4px;
  }
}

@media (min-width: 1200px) {
  .profile-page {
    grid-template-columns: 286px minmax(0, 1fr);
    grid-template-areas: "sidebar main";
    gap: 18px;
    width: min(100%, 1160px);
    padding: 2px 0 28px;
    align-items: start;
  }

  .profile-layout-sidebar,
  .profile-layout-main {
    display: grid;
    align-content: start;
    gap: 14px;
  }

  .profile-layout-sidebar {
    grid-area: sidebar;
  }

  .profile-layout-main {
    grid-area: main;
  }

  .profile-layout-sidebar > *,
  .profile-layout-main > * {
    grid-area: auto;
  }

  .profile-person,
  .profile-roster-card,
  .profile-direction,
  .profile-library,
  .profile-quick-link {
    border-radius: 14px;
  }

  .profile-person {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 20px 18px 18px;
    text-align: center;
  }

  .profile-person__photo {
    width: 96px;
    height: 96px;
    padding: 3px;
  }

  .profile-person__copy {
    width: 100%;
    justify-items: center;
    gap: 3px;
  }

  .profile-person__copy h1 {
    width: 100%;
    font-size: 19px;
  }

  .profile-person__matricula,
  .profile-person__copy p {
    font-size: 11.5px;
  }

  .profile-person__edit {
    width: 100%;
    min-height: 35px;
    margin-top: 10px;
    font-size: 10px;
  }

  .profile-section-heading,
  .profile-direction .profile-section-heading {
    min-height: 36px;
    padding-inline: 14px;
  }

  .profile-section-heading h2 {
    font-size: 11.2px;
  }

  .profile-roster-card__milestones {
    padding: 13px 14px 11px;
  }

  .profile-roster-milestone {
    gap: 2px;
    padding-inline: 10px;
  }

  .profile-roster-milestone__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    font-size: 19px;
  }

  .profile-roster-milestone--success .profile-roster-milestone__icon {
    font-size: 16px;
  }

  .profile-roster-milestone strong {
    font-size: 9.8px;
  }

  .profile-roster-milestone span:not(.profile-roster-milestone__icon),
  .profile-roster-milestone time {
    font-size: 9px;
  }

  .profile-roster-milestone time {
    font-size: 11.5px;
  }

  .profile-roster-card__local {
    margin: 0 16px 11px;
    padding: 8px 11px;
  }

  .profile-roster-card__local > i {
    font-size: 21px;
  }

  .profile-roster-card__local span {
    font-size: 9px;
  }

  .profile-roster-card__local strong {
    font-size: 12px;
  }

  .profile-roster-card__justifications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 0 16px 11px;
  }

  .profile-justification {
    align-items: start;
    min-height: 70px;
    gap: 10px;
    padding: 10px 11px;
  }

  .profile-justification__icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .profile-justification strong {
    font-size: 9px;
  }

  .profile-justification p {
    font-size: 10.8px;
    line-height: 1.35;
  }

  .profile-justification small {
    font-size: 8.4px;
  }

  .profile-roster-card__actions {
    gap: 10px;
    padding: 0 16px 14px;
  }

  .profile-roster-card__action {
    min-height: 35px;
    font-size: 10px;
  }

  .profile-direction__dispatch {
    margin: 0 12px 11px;
    padding: 11px 12px;
  }

  .profile-direction__dispatch-icon {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .profile-direction__dispatch p {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .profile-direction__dispatch small {
    font-size: 9px;
  }

  .profile-direction__details {
    margin: 0 12px 10px;
  }

  .profile-direction__details summary {
    font-size: 9.5px;
  }

  .profile-direction-event__meta strong,
  .profile-direction-event__meta small {
    font-size: 9px;
  }

  .profile-direction-event p {
    font-size: 10.2px;
  }

  .profile-direction__form {
    padding: 0 12px 12px;
  }

  .profile-direction__composer textarea {
    min-height: 45px;
    font-size: 10.5px;
  }

  .profile-direction__send {
    width: 36px;
    height: 36px;
  }

  .profile-library__tab {
    min-height: 39px;
    font-size: 10.2px;
  }

  .profile-history-row {
    min-height: 51px;
    padding: 7px 12px;
  }

  .profile-history-row__icon {
    width: 33px;
    height: 33px;
  }

  .profile-history-row__copy strong {
    font-size: 10.8px;
  }

  .profile-history-row__copy span {
    font-size: 9.4px;
  }

  .profile-history-more {
    min-height: 32px;
    font-size: 9px;
  }

  .profile-help-item strong {
    font-size: 10.8px;
  }

  .profile-help-item p {
    font-size: 9.4px;
  }

  .profile-quick-link {
    min-height: 72px;
    padding: 12px 13px;
  }

  .profile-quick-link__icon {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .profile-quick-link strong {
    font-size: 9.2px;
  }

  .profile-quick-link div span {
    font-size: 9.4px;
  }
}

@media (max-width: 420px) {
  .profile-brandbar__brand {
    width: 90px;
  }

  .profile-person {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
  }

  .profile-person__photo {
    width: 68px;
    height: 68px;
  }

  .profile-person__copy h1 {
    font-size: 15px;
  }

  .profile-person__matricula,
  .profile-person__copy p {
    font-size: 10px;
  }

  .profile-person__edit {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 9px;
  }

  .profile-roster-card__milestones {
    padding-inline: 3px;
  }

  .profile-roster-milestone {
    padding-inline: 2px;
  }

  .profile-roster-milestone__icon {
    width: 24px;
    height: 24px;
    font-size: 15px;
  }

  .profile-roster-milestone strong {
    font-size: 7.6px;
  }

  .profile-roster-milestone span:not(.profile-roster-milestone__icon),
  .profile-roster-milestone time {
    font-size: 6.9px;
  }

  .profile-roster-milestone time {
    font-size: 8px;
  }

  .profile-library__tab {
    font-size: 8.9px;
  }

  .profile-settings,
  .profile-roster-edit {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .profile-settings__panel,
  .profile-roster-edit__panel {
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .profile-settings__heading--action {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-password-form__fields,
  .profile-roster-edit__grid,
  .profile-roster-edit__justifications {
    grid-template-columns: 1fr;
  }

  .profile-password-form > .secondary-button {
    width: 100%;
  }
}

.movements-table-card {
  padding: 0;
  overflow: hidden;
}

.movements-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.movements-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 10.5px;
  text-align: center;
}

.movements-table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.movements-table td {
  max-width: 320px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center;
}

.movements-table tbody tr:last-child td {
  border-bottom: 0;
}

.movements-table tbody tr {
  transition: background-color 160ms ease;
}

.movements-table tbody tr:hover {
  background: var(--surface-hover);
}

.movements-table__date {
  width: 132px;
  color: var(--text-2);
  white-space: nowrap;
}

.movements-table__action {
  width: 180px;
  font-weight: 650;
}

.movements-table__details {
  color: var(--text-2);
  line-height: 1.4;
}


.history-snapshots {
  display: grid;
  gap: 10px;
}

.history-snapshot {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.history-snapshot__header {
  padding: 12px 14px;
}

.history-snapshot__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.history-snapshot__toggle:hover,
.history-snapshot__toggle[aria-expanded="true"] {
  color: var(--teal-dark);
}

.history-snapshot__toggle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.history-snapshot__title {
  font-size: 12.5px;
  font-weight: 650;
}

.history-snapshot__meta {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 10.5px;
}

.history-snapshot__body {
  border-top: 1px solid var(--border);
}

.history-snapshot__body[hidden] {
  display: none;
}

.history-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.history-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 10.5px;
  text-align: center;
}

.history-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
}

.history-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.history-table tbody tr:last-child td {
  border-bottom: 0;
}

.history-table tbody tr:hover {
  background: var(--surface-hover);
}

.history-table__person {
  font-weight: 650;
}

html[data-theme="dark"] .roster-row:hover,
html[data-theme="dark"] .central-row__main:hover,
html[data-theme="dark"] .movements-table tbody tr:hover,
html[data-theme="dark"] .history-table tbody tr:hover {
  background: var(--surface-hover);
}

html[data-theme="dark"] .central-row__editor,
html[data-theme="dark"] .central-composer__body,
html[data-theme="dark"] .roster-filter-bar,
html[data-theme="dark"] .roster-status-panel,
html[data-theme="dark"] .roster-status-table-wrap {
  background: var(--surface);
}

html[data-theme="dark"] .roster-local-select,
html[data-theme="dark"] .roster-turma-control__select,
html[data-theme="dark"] .central-filter-field select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .search-field input {
  background: var(--field-bg);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .roster-status-table thead th,
html[data-theme="dark"] .movements-table th,
html[data-theme="dark"] .history-table th {
  background: var(--surface);
  color: var(--text-2);
}

html[data-theme="dark"] .roster-status-table td,
html[data-theme="dark"] .movements-table td,
html[data-theme="dark"] .history-table td {
  background: var(--card);
}

html[data-theme="dark"] .roster-add-modal,
html[data-theme="dark"] .confirmation-dialog,
html[data-theme="dark"] .mobile-nav-menu {
  background: var(--card);
  color: var(--text);
}

html[data-theme="dark"] .button {
  box-shadow: none;
}

@media (max-width: 1199px) {
  .roster-hero,
  .roster-hero__copy,
  .roster-header-stat,
  .search-field input,
  .roster-section-head,
  .roster-filter-bar,
  .roster-status-panel,
  .roster-status-table-wrap,
  .roster-row {
    border: 1px solid rgb(255 255 255 / 52%);
    background: rgb(255 255 255 / 68%);
    box-shadow: 0 14px 34px rgb(15 23 42 / 12%), inset 0 1px 0 rgb(255 255 255 / 70%);
    backdrop-filter: none;
  }

  html[data-theme="dark"] .roster-hero,
  html[data-theme="dark"] .roster-hero__copy,
  html[data-theme="dark"] .roster-header-stat,
  html[data-theme="dark"] .search-field input,
  html[data-theme="dark"] .roster-section-head,
  html[data-theme="dark"] .roster-filter-bar,
  html[data-theme="dark"] .roster-status-panel,
  html[data-theme="dark"] .roster-status-table-wrap,
  html[data-theme="dark"] .roster-row {
    border-color: rgb(255 255 255 / 14%);
    background: var(--card);
    box-shadow: 0 16px 36px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 10%);
  }

  .roster-hero {
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  html[data-theme="dark"] .roster-hero {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .roster-hero__copy {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    padding: 16px;
    border-radius: 18px;
  }

  .roster-hero__title-default {
    display: none;
  }

  .roster-hero__title-mobile {
    display: inline;
  }

  .roster-hero__title {
    grid-column: 1 / -1;
    color: var(--text);
    font-size: 22px;
    line-height: 1.12;
  }

  .roster-hero__date,
  .roster-hero__count {
    grid-column: 1;
    color: var(--text-2);
    font-size: 10.5px;
    line-height: 1.25;
  }

  .roster-hero__count {
    grid-row: 3;
  }

  .roster-turma-control--mobile {
    align-self: center;
    grid-column: 2;
    grid-row: 2 / 4;
  }

  .roster-hero__tools {
    gap: 10px;
  }

  .search-field {
    min-width: 0;
    max-width: none;
  }

  .search-field input {
    height: 46px;
    border-radius: 999px;
  }

  .roster-header-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .roster-header-stat {
    display: grid;
    justify-items: center;
    height: 78px;
    padding: 10px 6px;
    border-radius: 16px;
    color: var(--text-2);
    white-space: normal;
  }

  .roster-header-stat strong {
    color: var(--roster-stat-color, var(--teal-dark));
    font-size: 23px;
  }

  .roster-header-stat__label {
    padding-bottom: 0;
    font-size: 10px;
    text-align: center;
  }

  .roster-header-stat__label::after {
    display: none;
  }

  .roster-header-stat--neutral { --roster-stat-color: var(--teal-dark); }
  .roster-header-stat--pending { --roster-stat-color: var(--danger-text); }
  .roster-header-stat--progress { --roster-stat-color: var(--ic-wait-text); }
  .roster-header-stat--done { --roster-stat-color: var(--ic-ok-text); }

  .roster-section-head,
  .roster-filter-bar,
  .roster-status-panel,
  .roster-status-table-wrap,
  .roster-row {
    border-radius: 16px;
  }

  .roster-section-head {
    padding: 10px 12px;
  }

  .roster-list-card {
    gap: 10px;
  }

  .roster-row {
    border-bottom: 1px solid rgb(255 255 255 / 52%);
    content-visibility: auto;
    contain-intrinsic-size: 168px;
  }

  html[data-theme="dark"] .roster-row:last-child,
  html[data-theme="dark"] .roster-row {
    border-bottom-color: rgb(255 255 255 / 14%);
  }
}

.roster-hero__title-mobile {
  display: none;
}
@media (max-width: 1199px) {
  .roster-hero__title-mobile {
    display: inline;
  }
}
@media (max-width: 1199px) {
  .roster-hero {
    gap: 10px;
  }

  .roster-hero__copy {
    gap: 2px 8px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .roster-hero__title {
    margin-bottom: 1px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
  }

  .roster-hero__date,
  .roster-hero__count {
    font-size: 10.5px;
    line-height: 1.12;
  }

  .roster-hero__count {
    margin-top: -1px;
  }
}
@media (max-width: 1199px) {
  .roster-hero__copy {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 8px;
    padding: 9px 12px;
    background: rgb(255 255 255 / 46%);
    box-shadow: 0 12px 30px rgb(15 23 42 / 10%), inset 0 1px 0 rgb(255 255 255 / 54%);
  }

  html[data-theme="dark"] .roster-hero__copy {
    background: var(--card);
  }

  .roster-hero__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.12;
  }

  .roster-hero__date {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1px;
  }

  .roster-hero__count {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
  }

  .roster-turma-control--mobile {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .search-field input {
    background: rgb(255 255 255 / 58%);
  }

  html[data-theme="dark"] .search-field input {
    background: var(--field-bg);
  }

  .roster-header-stats {
    gap: 7px;
  }

  .roster-header-stat {
    height: 74px;
    padding: 8px 5px;
    border-radius: 15px;
    background: rgb(255 255 255 / 50%);
    box-shadow: 0 12px 28px rgb(15 23 42 / 10%), inset 0 1px 0 rgb(255 255 255 / 54%);
  }

  html[data-theme="dark"] .roster-header-stat {
    background: var(--surface);
  }

  .roster-header-stat strong {
    font-size: 21px;
  }
}
@media (max-width: 1199px) {
  .roster-hero__copy {
    background: rgb(255 255 255 / 42%);
  }

  html[data-theme="dark"] .roster-hero__copy {
    border-color: rgb(255 255 255 / 18%);
    background: var(--surface);
  }

  .roster-hero__date,
  .roster-hero__count {
    display: none;
  }

  .roster-hero__title {
    grid-row: 1;
    align-self: center;
  }

  .roster-turma-control--mobile {
    grid-row: 1;
  }

  .roster-header-stat {
    background: rgb(255 255 255 / 44%);
  }

  html[data-theme="dark"] .roster-header-stat {
    border-color: rgb(255 255 255 / 16%);
    background: var(--surface);
    color: rgb(225 238 240 / 88%);
  }

  html[data-theme="dark"] .roster-header-stat strong {
    color: var(--roster-stat-color, var(--teal-dark));
  }

  .search-field input {
    background: rgb(255 255 255 / 54%);
  }

  html[data-theme="dark"] .search-field input {
    border-color: rgb(255 255 255 / 18%);
    background: var(--surface);
    color: #f2fbfb;
  }

  .roster-list-card {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="dark"] .roster-row,
  html[data-theme="dark"] .roster-section-head,
  html[data-theme="dark"] .roster-filter-bar,
  html[data-theme="dark"] .roster-status-panel,
  html[data-theme="dark"] .roster-status-table-wrap {
    border-color: rgb(255 255 255 / 16%);
    background: var(--surface);
  }
}
/* Ajustes finais do dashboard mobile. */
@media (max-width: 1199px) {
  .roster-hero__tools .search-field {
    display: none;
  }

  .roster-header-stats {
    gap: 6px;
  }

  .roster-header-stat {
    height: 58px;
    min-height: 0;
    padding: 6px 4px;
    border-radius: 13px;
  }

  .roster-header-stat strong {
    font-size: 18px;
  }

  .roster-header-stat__label {
    font-size: 9px;
    line-height: 1.05;
  }

  .roster-section-head {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 13px;
  }

  .roster-section-head__title {
    gap: 5px;
  }

  .roster-section-head__icon {
    width: 18px;
    height: 18px;
    font-size: 14px;
  }

  .roster-section-head__label {
    font-size: 12px;
    line-height: 1.1;
  }

  .roster-section-head .secondary-button {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 11px;
  }
}

/* Celular: troca de lista separada dos filtros e filtros em modal. */
@media (max-width: 599px) {
  .revezamento-page .roster-content-section {
    gap: 8px;
  }

  .revezamento-page .roster-section-head--single {
    display: none;
  }

  .roster-mobile-list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 4px;
    border: 1px solid var(--revez-border, var(--border));
    border-radius: 11px;
    background: var(--revez-surface, var(--card));
    box-shadow: 0 2px 10px rgb(15 23 42 / 5%);
  }

  .roster-mobile-group-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    min-width: 0;
    padding: 2px;
    border: 1px solid var(--revez-border, var(--border));
    border-radius: 9px;
    background: var(--revez-surface-alt, var(--surface));
  }

  .roster-mobile-group-selector--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster-mobile-group-selector__item {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 30px;
    padding: 1px 8px 4px;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--revez-control-text, var(--text-2));
    font: inherit;
    font-size: 10.5px;
    font-weight: 680;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }

  .roster-mobile-group-selector__item.is-active {
    background: var(--revez-surface, var(--card));
    color: var(--revez-control-text, var(--text));
    box-shadow: inset 0 3px 0 var(--teal);
  }

  .roster-mobile-group-selector__item.is-active::after {
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--revez-duration-color, #C0305E);
    content: "";
    pointer-events: none;
    transform: translateX(-50%) translateX(-6px);
    animation: roster-mobile-group-active-line 1.55s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  }

  @keyframes roster-mobile-group-active-line {
    0% {
      opacity: .72;
      transform: translateX(-50%) translateX(-6px);
    }

    100% {
      opacity: 1;
      transform: translateX(-50%) translateX(6px);
    }
  }

  .roster-mobile-group-selector__item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal) 58%, transparent);
    outline-offset: 1px;
  }

  .roster-mobile-group-selector__item.is-readonly {
    cursor: default;
  }

  .roster-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--revez-border, var(--border));
    border-radius: 8px;
    background: var(--revez-control-bg, var(--field-bg));
    color: var(--revez-control-text, var(--text));
    font: inherit;
    font-size: 10.5px;
    font-weight: 680;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
  }

  .roster-mobile-filter-toggle__icon {
    font-size: 13px;
  }

  .roster-mobile-filter-toggle__badge {
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--teal);
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .roster-mobile-filter-toggle__badge[hidden] {
    display: none;
  }

  .roster-mobile-filter-toggle.is-active {
    border-color: color-mix(in srgb, var(--teal) 42%, var(--revez-border, var(--border)));
    background: color-mix(in srgb, var(--teal) 7%, var(--revez-control-bg, var(--field-bg)));
    color: var(--teal-dark);
  }

  .roster-mobile-filter-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal) 58%, transparent);
    outline-offset: 2px;
  }

  .roster-filter-empty:not([hidden]) {
    display: grid;
    margin-top: 8px;
  }

  .roster-mobile-filter-dialog {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: min(76dvh, 620px);
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }

  .roster-mobile-filter-dialog__panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .roster-mobile-filter-dialog__header {
    padding: 12px 14px;
  }

  .roster-mobile-filter-dialog__body {
    gap: 14px;
    padding: 14px;
  }

  .roster-mobile-filter-dialog__actions {
    padding: 10px 14px;
  }

  .roster-mobile-filter-dialog__actions > * {
    flex: 1 1 0;
    min-width: 0;
  }

  html[data-theme="dark"] .roster-mobile-list-toolbar {
    border-color: var(--revez-border, var(--border));
    background: var(--revez-surface, var(--card));
    box-shadow: 0 3px 14px rgb(0 0 0 / 18%);
  }

  html[data-theme="dark"] .roster-mobile-group-selector__item.is-active {
    background: var(--revez-surface, var(--card));
    color: var(--revez-control-text, var(--text));
    box-shadow: inset 0 3px 0 var(--teal);
  }

  html[data-theme="dark"] .roster-mobile-filter-toggle.is-active {
    color: var(--teal);
  }

  @media (prefers-reduced-motion: reduce) {
    .roster-mobile-group-selector__item.is-active::after {
      animation: none;
      transform: translateX(-50%);
    }
  }
}
/* Refinamento da lista de revezamento no modo escuro mobile. */
@media (max-width: 1199px) {
  html[data-theme="dark"] .roster-list-card {
    background: transparent;
  }

  html[data-theme="dark"] .roster-row {
    border-color: rgb(206 232 234 / 12%);
    background: var(--card);
    box-shadow: 0 14px 32px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 8%);
    backdrop-filter: none;
  }

  html[data-theme="dark"] .roster-row:hover {
    background: var(--surface-hover);
  }

  html[data-theme="dark"] .roster-row .avatar {
    border-color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 54%, rgb(255 255 255 / 22%));
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roster-status-color, #b9eee6) 18%, transparent), 0 8px 18px rgb(0 0 0 / 24%);
  }

  html[data-theme="dark"] .roster-name {
    color: #f4fbfb;
  }

  html[data-theme="dark"] .roster-note,
  html[data-theme="dark"] .roster-time__label {
    color: rgb(222 236 238 / 72%);
  }

  html[data-theme="dark"] .roster-time__value {
    color: rgb(241 249 249 / 92%);
  }

  html[data-theme="dark"] .roster-row .roster-time:nth-child(3) .roster-time__value,
  html[data-theme="dark"] .roster-row .roster-time:nth-child(4) .roster-time__value {
    color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 84%, #ffffff);
  }

  html[data-theme="dark"] .roster-row .roster-local-select {
    border-color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 34%, rgb(255 255 255 / 16%));
    background-color: var(--field-bg);
    color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 86%, #ffffff);
  }

  html[data-theme="dark"] .roster-row .roster-action-button {
    border-color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 28%, rgb(255 255 255 / 14%));
    background-color: var(--field-bg);
    color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 82%, #ffffff);
  }

  html[data-theme="dark"] .roster-row .roster-action-button--started {
    background-color: var(--surface);
  }
}
/* Controles neutros e divisórias da lista no mobile. */
@media (max-width: 1199px) {
  .roster-row .roster-local-select,
  .roster-row .roster-action-button,
  .roster-row .roster-action-button--start,
  .roster-row .roster-action-button--started,
  .roster-row .roster-action-button--edit {
    border-color: rgb(0 126 123 / 24%);
    background-color: rgb(255 255 255 / 46%);
    color: var(--teal-dark);
    box-shadow: 0 4px 12px rgb(15 23 42 / 8%), inset 0 1px 0 rgb(255 255 255 / 62%);
  }

  .roster-row .roster-action-button:hover,
  .roster-row .roster-action-button:focus-visible,
  .roster-row .roster-local-select:hover,
  .roster-row .roster-local-select:focus {
    border-color: rgb(0 126 123 / 38%);
    background-color: rgb(255 255 255 / 58%);
    color: var(--teal-dark);
    box-shadow: 0 6px 14px rgb(15 23 42 / 11%), 0 0 0 3px rgb(0 126 123 / 10%);
  }

  .roster-local-select,
  .roster-time:nth-child(3),
  .roster-time:nth-child(5) {
    position: relative;
  }

  .roster-local-select::after,
  .roster-time:nth-child(3)::after,
  .roster-time:nth-child(5)::after {
    position: absolute;
    top: 4px;
    right: -4px;
    bottom: 4px;
    width: 1px;
    background: rgb(15 23 42 / 12%);
    content: "";
  }

  html[data-theme="dark"] .roster-row .roster-local-select,
  html[data-theme="dark"] .roster-row .roster-action-button,
  html[data-theme="dark"] .roster-row .roster-action-button--start,
  html[data-theme="dark"] .roster-row .roster-action-button--started,
  html[data-theme="dark"] .roster-row .roster-action-button--edit {
    border-color: rgb(154 219 214 / 22%);
    background-color: rgb(255 255 255 / 8%);
    color: #eef6f5;
    box-shadow: 0 6px 14px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 8%);
  }

  html[data-theme="dark"] .roster-row .roster-action-button:hover,
  html[data-theme="dark"] .roster-row .roster-action-button:focus-visible,
  html[data-theme="dark"] .roster-row .roster-local-select:hover,
  html[data-theme="dark"] .roster-row .roster-local-select:focus {
    border-color: rgb(154 219 214 / 36%);
    background-color: rgb(154 219 214 / 12%);
    color: #eef6f5;
    box-shadow: 0 8px 18px rgb(0 0 0 / 26%), 0 0 0 3px rgb(154 219 214 / 8%);
  }

  html[data-theme="dark"] .roster-local-select::after,
  html[data-theme="dark"] .roster-time:nth-child(3)::after,
  html[data-theme="dark"] .roster-time:nth-child(5)::after {
    background: rgb(222 236 238 / 16%);
  }
}
/* Divisórias consistentes entre local e horários no mobile. */
@media (max-width: 1199px) {
  .roster-local-select::after,
  .roster-time:nth-child(3)::after,
  .roster-time:nth-child(5)::after {
    content: none;
  }

  .roster-time:nth-child(3),
  .roster-time:nth-child(4),
  .roster-time:nth-child(6) {
    position: relative;
  }

  .roster-time:nth-child(3)::before,
  .roster-time:nth-child(4)::before,
  .roster-time:nth-child(6)::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -4px;
    width: 1px;
    background: rgb(15 23 42 / 12%);
    content: "";
  }

  html[data-theme="dark"] .roster-time:nth-child(3)::before,
  html[data-theme="dark"] .roster-time:nth-child(4)::before,
  html[data-theme="dark"] .roster-time:nth-child(6)::before {
    background: rgb(222 236 238 / 16%);
  }
}
/* Neutralização final dos controles da lista mobile. */
@media (max-width: 1199px) {
  .roster-row .roster-local-select,
  .roster-row .roster-action-button,
  .roster-row .roster-action-button--start,
  .roster-row .roster-action-button--started,
  .roster-row .roster-action-button--edit {
    border-color: rgb(15 23 42 / 14%);
    background-color: rgb(255 255 255 / 50%);
    color: var(--text-2);
    box-shadow: 0 4px 12px rgb(15 23 42 / 8%), inset 0 1px 0 rgb(255 255 255 / 60%);
  }

  .roster-row .roster-action-button:hover,
  .roster-row .roster-action-button:focus-visible,
  .roster-row .roster-local-select:hover,
  .roster-row .roster-local-select:focus {
    border-color: rgb(15 23 42 / 22%);
    background-color: rgb(255 255 255 / 62%);
    color: var(--text);
    box-shadow: 0 6px 14px rgb(15 23 42 / 11%), 0 0 0 3px rgb(15 23 42 / 6%);
  }

  html[data-theme="dark"] .roster-row .roster-local-select,
  html[data-theme="dark"] .roster-row .roster-action-button,
  html[data-theme="dark"] .roster-row .roster-action-button--start,
  html[data-theme="dark"] .roster-row .roster-action-button--started,
  html[data-theme="dark"] .roster-row .roster-action-button--edit {
    border-color: rgb(222 236 238 / 14%);
    background-color: rgb(255 255 255 / 7%);
    color: rgb(222 236 238 / 82%);
    box-shadow: 0 6px 14px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 7%);
  }

  html[data-theme="dark"] .roster-row .roster-action-button:hover,
  html[data-theme="dark"] .roster-row .roster-action-button:focus-visible,
  html[data-theme="dark"] .roster-row .roster-local-select:hover,
  html[data-theme="dark"] .roster-row .roster-local-select:focus {
    border-color: rgb(222 236 238 / 24%);
    background-color: rgb(255 255 255 / 10%);
    color: #f2fbfb;
    box-shadow: 0 8px 18px rgb(0 0 0 / 26%), 0 0 0 3px rgb(222 236 238 / 6%);
  }
}


.roster-header-stat__copy {
  display: contents;
}

.roster-header-stat__icon,
.roster-header-stat__subtitle {
  display: none;
}





















.roster-status-panel {
  width: min(100%, 740px);
  margin-inline: auto;
  border-color: rgb(15 23 42 / 8%);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgb(15 23 42 / 6%), inset 0 1px 0 rgb(255 255 255 / 42%);
}

.roster-status-panel__head {
  min-height: 32px;
  padding: 6px 11px;
  background: rgb(255 255 255 / 48%);
  font-size: 9.5px;
}

.roster-status-panel__head strong {
  font-size: 11.5px;
  font-weight: 720;
}

.roster-status-panel__head span {
  font-weight: 600;
}

.roster-status-table {
  font-size: 9.75px;
}

.roster-status-table thead th {
  color: rgb(64 82 91 / 82%);
  font-size: 8.75px;
  font-weight: 720;
  letter-spacing: 0.015em;
}

.roster-status-table th,
.roster-status-table td {
  height: 31px;
  padding-block: 5px;
}

.roster-status-table td:nth-child(2) {
  color: var(--text);
  font-weight: 650;
}

html[data-theme="dark"] .roster-status-panel {
  border-color: rgb(154 219 214 / 12%);
  background: var(--card);
  box-shadow: 0 14px 32px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 7%);
}

html[data-theme="dark"] .roster-status-panel__head {
  background: rgb(255 255 255 / 5%);
}

html[data-theme="dark"] .roster-status-table thead th {
  color: rgb(222 236 238 / 72%);
}




@media (max-width: 699px) {
  .roster-status-panel {
    width: calc(100% - 12px);
    margin-inline: auto;
    border-radius: 15px;
    box-shadow: 0 10px 24px rgb(15 23 42 / 7%), inset 0 1px 0 rgb(255 255 255 / 36%);
  }

  .roster-status-panel__head {
    padding: 7px 9px;
    font-size: 9.5px;
  }

  .roster-status-panel__head strong {
    font-size: 10.5px;
  }

  .roster-status-table {
    font-size: 8.8px;
  }

  .roster-status-table thead th {
    font-size: 8px;
  }

  .roster-status-table th,
  .roster-status-table td {
    padding: 5px 3px;
  }
}








@media (max-width: 699px) {
  .page-container > .page-section > .roster-status-panel {
    width: calc(100% - 12px);
  }
}

@media (min-width: 700px) {
  .revezamento-page > .roster-status-panel {
    width: min(100%, 740px);
    margin: 9px auto 0;
  }

  .revezamento-page > .roster-status-panel .roster-status-table {
    min-width: 660px;
  }
}


.roster-edit-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.roster-edit-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 46;
  display: grid;
  width: min(560px, calc(100vw - 24px));
  max-height: min(760px, calc(100dvh - 24px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid #d8e4e1;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgb(15 23 42 / 24%);
  backdrop-filter: none;
}

.roster-edit-form {
  display: grid;
  min-height: 0;
}

.roster-edit-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #d8e4e1;
}

.roster-edit-modal__person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.roster-edit-modal__person .avatar {
  width: 46px;
  height: 46px;
  font-size: 15px;
}

.roster-edit-modal__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.roster-edit-modal__header h3 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 780;
  line-height: 1.08;
}

.roster-edit-modal__header p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.25;
}

.roster-edit-modal__close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
}

.roster-edit-modal__body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 16px;
}

.roster-edit-modal__time-grid,
.roster-edit-modal__justifications {
  display: grid;
  gap: 10px;
}

.roster-edit-modal__time-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roster-edit-modal__time-grid--primary {
  align-items: stretch;
}

.roster-edit-modal__field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.roster-edit-modal__field label,
.roster-edit-modal__computed span {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.roster-edit-modal__field input,
.roster-edit-modal__field textarea {
  width: 100%;
  border-color: #cadbd6;
  border-radius: 12px;
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

.roster-edit-modal__field input {
  height: 42px;
  padding-inline: 11px;
  font-size: 15px;
  font-weight: 700;
}

.roster-edit-modal__field textarea {
  min-height: 92px;
  resize: vertical;
  padding: 10px 11px;
  font-size: 12px;
  line-height: 1.35;
}

.roster-edit-modal__computed {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #cadbd6;
  border-radius: 12px;
  background: #f5faf8;
}

.roster-edit-modal__computed-value {
  color: #005f68;
  font-size: 20px;
  font-weight: 820;
  line-height: 1;
}

.roster-edit-modal__computed small {
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.15;
}

.roster-edit-modal__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid #d8e4e1;
  background: #f5faf8;
}

.roster-edit-modal__action {
  justify-content: center;
  min-height: 40px;
  padding-inline: 10px;
  white-space: nowrap;
}

html[data-theme="dark"] .roster-edit-modal {
  border-color: #343c49;
  background: #1b2029;
  box-shadow: 0 26px 70px rgb(0 0 0 / 42%);
}

html[data-theme="dark"] .roster-edit-modal__header,
html[data-theme="dark"] .roster-edit-modal__actions {
  border-color: #2c3440;
}

html[data-theme="dark"] .roster-edit-modal__actions {
  background: #242b36;
}

html[data-theme="dark"] .roster-edit-modal__field input,
html[data-theme="dark"] .roster-edit-modal__field textarea {
  border-color: #343c49;
  background: #151a22;
  color: #f2fbfb;
  box-shadow: none;
}

html[data-theme="dark"] .roster-edit-modal__computed {
  border-color: #343c49;
  background: #242b36;
}

html[data-theme="dark"] .roster-edit-modal__computed-value {
  color: #eef6f5;
}

@media (min-width: 700px) {
  .roster-edit-modal {
    width: min(760px, calc(100vw - 44px));
  }

  .roster-edit-modal__justifications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .roster-edit-modal {
    width: min(820px, calc(100vw - 64px));
  }

  .roster-edit-modal__body {
    gap: 14px;
    padding: 16px 18px 18px;
  }
}

@media (max-width: 699px) {
  .roster-edit-modal {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 20px);
    transform: none;
    border-radius: 18px;
  }

  .roster-edit-modal__header {
    padding: 14px 14px 12px;
  }

  .roster-edit-modal__person .avatar {
    width: 42px;
    height: 42px;
  }

  .roster-edit-modal__header h3 {
    font-size: 17px;
  }

  .roster-edit-modal__body {
    gap: 10px;
    padding: 12px;
  }

  .roster-edit-modal__time-grid,
  .roster-edit-modal__justifications {
    grid-template-columns: 1fr;
  }

  .roster-edit-modal__time-grid--primary {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 0.72fr);
  }

  .roster-edit-modal__field textarea {
    min-height: 78px;
  }

  .roster-edit-modal__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px 12px;
  }

  .roster-edit-modal__action {
    min-height: 38px;
    padding-inline: 6px;
    font-size: 11px;
  }

  .roster-edit-modal__action .button-icon {
    display: none;
  }
}


@media (min-width: 600px) and (min-height: 600px) and (max-width: 1199px),
       (min-width: 800px) and (min-height: 480px) and (max-width: 1199px) and (orientation: landscape) and (max-aspect-ratio: 2/1) {
  .roster-edit-modal {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(760px, calc(100vw - 56px));
    max-height: calc(100dvh - 48px);
    transform: translate(-50%, -50%);
    border-radius: 20px;
  }

  .roster-edit-modal__header {
    padding: 16px 18px 14px;
  }

  .roster-edit-modal__person .avatar {
    width: 48px;
    height: 48px;
  }

  .roster-edit-modal__header h3 {
    font-size: 19px;
  }

  .roster-edit-modal__body {
    gap: 12px;
    padding: 14px 16px 16px;
  }

  .roster-edit-modal__time-grid,
  .roster-edit-modal__justifications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-edit-modal__field textarea {
    min-height: 88px;
  }

  .roster-edit-modal__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px 14px;
  }

  .roster-edit-modal__action {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .roster-edit-modal__action .button-icon {
    display: inline-block;
  }
}


.roster-avatar-preview-trigger {
  cursor: zoom-in;
}

.roster-avatar-preview-trigger:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 3px;
}

.roster-avatar-preview-shell {
  --roster-avatar-preview-surface: #ffffff;
  --roster-avatar-preview-photo-surface: #edf4f2;
  --roster-avatar-preview-border: rgb(15 23 42 / 12%);
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 16px;
  isolation: isolate;
}

.roster-avatar-preview {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: min(360px, 100%);
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--roster-avatar-preview-border);
  border-radius: 18px;
  background-color: var(--roster-avatar-preview-surface);
  background-image: none;
  color: var(--text);
  opacity: 1;
  box-shadow: 0 24px 64px rgb(15 23 42 / 26%);
  isolation: isolate;
  backdrop-filter: none;
}

.roster-avatar-preview .avatar {
  width: min(240px, calc(100vw - 96px));
  height: min(240px, calc(100vw - 96px));
  border-radius: 22px;
  font-size: 52px;
  object-fit: cover;
}

.roster-avatar-preview figcaption {
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
  text-align: center;
}

.roster-avatar-preview__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

html[data-theme="dark"] .roster-avatar-preview-shell {
  --roster-avatar-preview-surface: #1b2029;
  --roster-avatar-preview-photo-surface: #151a22;
  --roster-avatar-preview-border: #343c49;
}

.roster-avatar-preview-shell .roster-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgb(9 17 20 / 68%);
  background-image: none;
  opacity: 1;
  backdrop-filter: none;
}

.roster-avatar-preview .avatar {
  background-color: var(--roster-avatar-preview-photo-surface);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 8%);
}

html[data-theme="dark"] .roster-avatar-preview-shell .roster-modal-backdrop {
  background-color: rgb(3 7 10 / 76%);
}

html[data-theme="dark"] .roster-avatar-preview {
  box-shadow: 0 26px 70px rgb(0 0 0 / 46%);
}

html[data-theme="dark"] .roster-avatar-preview .avatar {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

@media (min-width: 600px) and (min-height: 600px) and (max-width: 1199px),
       (min-width: 800px) and (min-height: 480px) and (max-width: 1199px) and (orientation: landscape) and (max-aspect-ratio: 2/1) {
  .roster-avatar-preview {
    width: min(430px, calc(100vw - 72px));
    gap: 14px;
    padding: 22px;
    border-radius: 20px;
    box-shadow: 0 28px 72px rgb(15 23 42 / 30%);
  }

  .roster-avatar-preview .avatar {
    width: min(300px, calc(100vw - 180px));
    height: min(300px, calc(100vw - 180px));
    border-radius: 24px;
  }

  .roster-avatar-preview figcaption {
    font-size: 16px;
  }
}

@media (min-width: 700px) {
  html[data-theme="dark"] .avatar:not(img) {
    border-color: rgb(154 219 214 / 18%);
    background: linear-gradient(135deg, rgb(154 219 214 / 14%), rgb(255 255 255 / 5%));
    color: rgb(217 245 243 / 86%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  }

  html[data-theme="dark"] .roster-row .avatar:not(img) {
    border-color: color-mix(in srgb, var(--roster-status-color, #b9eee6) 42%, rgb(154 219 214 / 16%));
    background: var(--surface);
    color: rgb(226 246 245 / 88%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roster-status-color, #b9eee6) 12%, transparent), inset 0 1px 0 rgb(255 255 255 / 6%);
  }

  html[data-theme="dark"] .mobile-dashboard-topbar__profile .avatar:not(img),
  html[data-theme="dark"] .sidebar-user .avatar:not(img) {
    border-color: rgb(154 219 214 / 18%);
    background: rgb(154 219 214 / 11%);
    color: rgb(217 245 243 / 88%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  }
}


.profile-photo-field {
  grid-column: 1 / -1;
}

.profile-photo-field__title {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}

.profile-photo-field__control {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
  min-height: 76px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--border);
  border-radius: 40px 12px 12px 40px;
  background: linear-gradient(135deg, rgb(255 255 255 / 86%), rgb(247 252 252 / 74%));
  box-shadow: 0 10px 24px rgb(15 23 42 / 7%);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.profile-photo-field__control:hover,
.profile-photo-field__control:focus-within {
  border-color: #bcd5d2;
  box-shadow: 0 14px 30px rgb(15 23 42 / 10%), 0 0 0 3px rgb(0 126 123 / 8%);
  transform: translateY(-1px);
}

.profile-photo-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.profile-photo-field__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid #cfe1e0;
  border-radius: 50%;
  background: var(--active-bg);
  color: var(--teal-dark);
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%);
}

.profile-photo-field__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile-photo-field__preview[hidden],
.profile-photo-field__placeholder[hidden] {
  display: none;
}

.profile-photo-field__camera {
  position: absolute;
  bottom: 6px;
  left: 50px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--teal-dark);
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0 6px 14px rgb(15 23 42 / 18%);
}

.profile-photo-field__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-photo-field__copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.profile-photo-field__copy small {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 600;
}

.photo-cropper {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.photo-cropper::backdrop {
  background: rgb(15 17 21 / 58%);
  backdrop-filter: none;
}

.photo-cropper__panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(15 23 42 / 10%);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 26px 70px rgb(15 23 42 / 28%);
}

.photo-cropper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-cropper__header h2,
.photo-cropper__header p {
  margin: 0;
}

.photo-cropper__header h2 {
  color: var(--text);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.1;
}

.photo-cropper__header p {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 11px;
}

.photo-cropper__stage {
  position: relative;
  width: min(312px, calc(100vw - 72px));
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgb(15 23 42 / 11%);
  border-radius: 50%;
  background: #edf5f4;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 76%), 0 14px 32px rgb(15 23 42 / 12%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.photo-cropper__stage.is-dragging {
  cursor: grabbing;
}

.photo-cropper__image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  translate: -50% -50%;
  will-change: transform;
  user-select: none;
  pointer-events: none;
}

.photo-cropper__mask,
.photo-cropper__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo-cropper__mask {
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 999px rgb(15 23 42 / 2%);
}

.photo-cropper__grid {
  background:
    linear-gradient(90deg, transparent 33%, rgb(255 255 255 / 42%) 33% 34%, transparent 34% 66%, rgb(255 255 255 / 42%) 66% 67%, transparent 67%),
    linear-gradient(0deg, transparent 33%, rgb(255 255 255 / 42%) 33% 34%, transparent 34% 66%, rgb(255 255 255 / 42%) 66% 67%, transparent 67%);
  opacity: 0.72;
}

.photo-cropper__tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.photo-cropper__tool-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--teal-dark);
  font-size: 14px;
}

.photo-cropper__zoom {
  width: 100%;
  accent-color: var(--teal-dark);
}

.photo-cropper__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.photo-cropper__actions .button,
.photo-cropper__actions .secondary-button {
  justify-content: center;
  min-height: 40px;
}

html[data-theme="dark"] .profile-photo-field__control,
html[data-theme="dark"] .photo-cropper__panel {
  border-color: #343c49;
  background: #1b2029;
  box-shadow: 0 22px 54px rgb(0 0 0 / 34%);
}

html[data-theme="dark"] .profile-photo-field__avatar,
html[data-theme="dark"] .photo-cropper__stage,
html[data-theme="dark"] .photo-cropper__tools {
  border-color: #343c49;
  background: #242b36;
}

@media (max-width: 420px) {
  .profile-photo-field__control {
    width: 100%;
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 68px;
    padding: 5px 10px 5px 5px;
  }

  .profile-photo-field__avatar {
    width: 56px;
    height: 56px;
  }

  .profile-photo-field__camera {
    left: 43px;
    bottom: 4px;
  }

  .photo-cropper__panel {
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }
}


/* Solid mobile Revezamento theme. */
.mobile-dashboard-topbar__logo-white {
  display: none;
}

@media (max-width: 1199px) {
  .app-main--revezamento {
    background: #eaf2ef;
  }

  html[data-theme="dark"] .app-main--revezamento {
    background: rgb(15 17 21 / 58%);
  }

  .revezamento-page {
    --revez-page: #eaf2ef;
    --revez-topbar: #007e7a;
    --revez-surface: #ffffff;
    --revez-surface-alt: #f5faf8;
    --revez-border: #cadbd6;
    --revez-divider: #d8e4e1;
    --revez-shadow: 0 10px 22px rgb(31 46 48 / 11%);
    --revez-control-bg: #ffffff;
    --revez-control-hover: #eef7f5;
    --revez-control-text: #17423f;
    --revez-neutral-bg: #ffffff;
    --revez-pending-bg: #ffffff;
    --revez-progress-bg: #ffffff;
    --revez-done-bg: #ffffff;
    --revez-neutral-text: #2563eb;
    --revez-pending-text: #C0305E;
    --revez-progress-text: #ECB11F;
    --revez-done-text: var(--revez-topbar);
    --revez-row-bg: #ffffff;
    --revez-row-pending-bg: #ffffff;
    --revez-row-progress-bg: #ffffff;
    --revez-row-done-bg: #ffffff;
    gap: 0;
  }

  html[data-theme="dark"] .revezamento-page {
    --revez-page: #0f1115;
    --revez-topbar: #151a22;
    --revez-surface: #1b2029;
    --revez-surface-alt: #242b36;
    --revez-border: #343c49;
    --revez-divider: #2c3440;
    --revez-shadow: 0 12px 26px rgb(0 0 0 / 30%);
    --revez-control-bg: #151a22;
    --revez-control-hover: #2d3643;
    --revez-control-text: #eef6f5;
    --revez-neutral-bg: #1b2029;
    --revez-pending-bg: #1b2029;
    --revez-progress-bg: #1b2029;
    --revez-done-bg: #1b2029;
    --revez-neutral-text: #8ab4ff;
    --revez-pending-text: #C0305E;
    --revez-progress-text: #ECB11F;
    --revez-done-text: #58c7bc;
    --revez-row-bg: #1b2029;
    --revez-row-pending-bg: #1b2029;
    --revez-row-progress-bg: #1b2029;
    --revez-row-done-bg: #1b2029;
  }

  .app-main--revezamento .page-container {
    padding-top: 0;
    background: var(--revez-page);
  }

  .app-main--revezamento .page-section {
    gap: 0;
  }

  .revezamento-page > .roster-hero {
    margin-top: 0;
  }

  .revezamento-page > .roster-hero ~ * {
    margin-top: 18px;
  }

  .page-container > .page-section > .mobile-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100vw;
    min-height: 56px;
    margin: 0 calc(50% - 50vw);
    padding: calc(env(safe-area-inset-top, 0px) + 2px) 20px 8px;
    border: 0;
    border-radius: 0;
    background: var(--revez-topbar);
    box-shadow: 0 1px 0 var(--revez-border);
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__logo {
    display: none;
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__logo-white {
    display: block;
    justify-self: end;
    width: auto;
    height: 28px;
    object-fit: contain;
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__copy {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0;
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__line strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 20px;
    font-weight: 760;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__profile {
    display: none;
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__meta {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    display: block;
    margin: 0;
    color: #d6f1ee;
    font-size: 10px;
    font-weight: 620;
    line-height: 1;
    white-space: nowrap;
  }
  html[data-theme="dark"] .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__line strong,
  html[data-theme="dark"] .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__meta {
    color: var(--teal);
  }

  html[data-theme="dark"] .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__logo-white {
    filter: brightness(0) saturate(100%) invert(72%) sepia(40%) saturate(568%) hue-rotate(125deg) brightness(91%) contrast(88%);
  }

  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__separator,
  .page-container > .page-section > .mobile-dashboard-topbar .mobile-dashboard-topbar__count {
    display: none;
  }

  .page-container > .page-section > .roster-hero {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .roster-hero,
  html[data-theme="dark"] .roster-hero {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .roster-hero__tools {
    gap: 2px;
  }

  .roster-hero__copy {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 10px;
    padding: 8px 20px 10px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: var(--revez-surface);
    border-color: var(--revez-border);
    box-shadow: none;
  }

  .roster-hero__title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 0;
    color: #314844;
    font-size: 14.5px;
    font-weight: 640;
    line-height: 1.08;
  }

  html[data-theme="dark"] .roster-hero__title {
    color: #eef6f5;
  }

  .revez-duration-badge--hero-mobile {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }

  .page-container > .page-section > .roster-hero .roster-turma-control--mobile {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--revez-control-text);
    transform: none;
  }

  .page-container > .page-section > .roster-hero .roster-turma-control--mobile .roster-turma-control__select {
    border-color: #b48610;
    background-color: #ecb11f;
    color: #153f3d;
    box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
  }

  html[data-theme="dark"] .page-container > .page-section > .roster-hero .roster-turma-control--mobile .roster-turma-control__select {
    border-color: #f3cc63;
    background-color: #d9a514;
    color: #0f1115;
    box-shadow: none;
  }

  .page-container > .page-section > .roster-hero .roster-hero__date {
    display: none;
  }

  .roster-header-stats {
    width: calc(100% - 32px);
    margin: 0 auto;
  }

  .roster-header-stat {
    min-height: 58px;
    height: 58px;
    padding-block: 5px;
    border-color: var(--revez-border);
    background: var(--revez-neutral-bg);
    color: var(--text);
    box-shadow: var(--revez-shadow);
  }

  .roster-header-stat--neutral {
    background: var(--revez-neutral-bg);
    --roster-stat-color: var(--revez-neutral-text);
  }

  .roster-header-stat--pending {
    background: var(--revez-pending-bg);
    --roster-stat-color: var(--revez-pending-text);
  }

  .roster-header-stat--progress {
    background: var(--revez-progress-bg);
    --roster-stat-color: var(--revez-progress-text);
  }

  .roster-header-stat--done {
    background: var(--revez-done-bg);
    --roster-stat-color: var(--revez-done-text);
  }

  .roster-header-stat strong,
  .roster-header-stats .roster-header-stat strong,
  html[data-theme="dark"] .roster-header-stat strong,
  html[data-theme="dark"] .roster-header-stats .roster-header-stat strong {
    color: var(--roster-stat-color);
  }

  .roster-section-head,
  .roster-filter-bar.is-open,
  .roster-status-panel,
  .roster-status-table-wrap {
    border-color: var(--revez-border);
    background: var(--revez-surface);
    box-shadow: var(--revez-shadow);
  }

  .roster-section-head__icon,
  .roster-section-head__label,
  html[data-theme="dark"] .roster-section-head__icon,
  html[data-theme="dark"] .roster-section-head__label {
    color: var(--text);
  }

  .roster-section-head .secondary-button {
    border-color: var(--revez-border);
    background: var(--revez-control-bg);
    color: var(--revez-control-text);
    box-shadow: none;
  }

  .roster-filter-bar {
    background: transparent;
    box-shadow: none;
  }

  .roster-list-card,
  html[data-theme="dark"] .roster-list-card {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .roster-row,
  html[data-theme="dark"] .roster-row {
    border-color: var(--revez-border);
    background: var(--revez-row-bg);
    box-shadow: var(--revez-shadow);
  }

  .roster-row--pending,
  html[data-theme="dark"] .roster-row--pending {
    background: var(--revez-row-pending-bg);
    --roster-status-color: var(--revez-pending-text);
  }

  .roster-row--progress,
  html[data-theme="dark"] .roster-row--progress {
    background: var(--revez-row-progress-bg);
    --roster-status-color: var(--revez-progress-text);
  }

  .roster-row--done,
  html[data-theme="dark"] .roster-row--done {
    background: var(--revez-row-done-bg);
    --roster-status-color: var(--revez-done-text);
  }

  .roster-row:hover,
  html[data-theme="dark"] .roster-row:hover {
    background: var(--revez-surface-alt);
  }

  .roster-name,
  html[data-theme="dark"] .roster-name {
    color: var(--text);
  }

  .roster-note,
  .roster-time__label,
  html[data-theme="dark"] .roster-note,
  html[data-theme="dark"] .roster-time__label {
    color: var(--text-2);
  }

  .roster-time__value,
  html[data-theme="dark"] .roster-time__value {
    color: var(--text);
  }

  .roster-row .roster-time:nth-child(3) .roster-time__value,
  .roster-row .roster-time:nth-child(4) .roster-time__value,
  html[data-theme="dark"] .roster-row .roster-time:nth-child(3) .roster-time__value,
  html[data-theme="dark"] .roster-row .roster-time:nth-child(4) .roster-time__value {
    color: var(--roster-status-color, var(--text));
  }

  .roster-time:nth-child(3)::before,
  .roster-time:nth-child(4)::before,
  .roster-time:nth-child(6)::before,
  html[data-theme="dark"] .roster-time:nth-child(3)::before,
  html[data-theme="dark"] .roster-time:nth-child(4)::before,
  html[data-theme="dark"] .roster-time:nth-child(6)::before {
    background: var(--revez-divider);
  }

  .roster-row .avatar,
  html[data-theme="dark"] .roster-row .avatar {
    border-color: var(--roster-status-color);
    background: var(--revez-surface);
    box-shadow: 0 0 0 3px var(--revez-surface-alt);
  }

  .roster-row .roster-local-select,
  .roster-row .roster-action-button,
  .roster-row .roster-action-button--start,
  .roster-row .roster-action-button--started,
  .roster-row .roster-action-button--edit,
  html[data-theme="dark"] .roster-row .roster-local-select,
  html[data-theme="dark"] .roster-row .roster-action-button,
  html[data-theme="dark"] .roster-row .roster-action-button--start,
  html[data-theme="dark"] .roster-row .roster-action-button--started,
  html[data-theme="dark"] .roster-row .roster-action-button--edit {
    border-color: var(--revez-border);
    background-color: var(--revez-control-bg);
    color: var(--revez-control-text);
    box-shadow: none;
  }

  .roster-row .roster-action-button--start,
  html[data-theme="dark"] .roster-row .roster-action-button--start {
    border-width: 2px;
    border-color: var(--revez-border);
    background-color: var(--revez-control-bg);
    color: var(--revez-control-text);
    font-weight: 760;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--revez-control-text) 10%, transparent);
  }

  .roster-row .roster-action-button--edit,
  html[data-theme="dark"] .roster-row .roster-action-button--edit {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--revez-control-text) 28%, var(--revez-border));
    font-weight: 660;
    box-shadow: none;
  }

  .roster-row--progress .roster-action-button--started,
  html[data-theme="dark"] .roster-row--progress .roster-action-button--started {
    border-color: var(--revez-progress-text);
    background-color: color-mix(in srgb, var(--revez-progress-text) 10%, var(--revez-control-bg));
    color: color-mix(in srgb, var(--revez-progress-text) 86%, #5f4600);
  }

  .roster-row--done .roster-action-button--started,
  html[data-theme="dark"] .roster-row--done .roster-action-button--started {
    border-color: var(--revez-done-text);
    background-color: var(--revez-done-bg);
    color: var(--revez-done-text);
  }

  .roster-row .roster-action-button:hover,
  .roster-row .roster-action-button:focus-visible,
  .roster-row .roster-local-select:hover,
  .roster-row .roster-local-select:focus,
  html[data-theme="dark"] .roster-row .roster-action-button:hover,
  html[data-theme="dark"] .roster-row .roster-action-button:focus-visible,
  html[data-theme="dark"] .roster-row .roster-local-select:hover,
  html[data-theme="dark"] .roster-row .roster-local-select:focus {
    border-color: var(--roster-status-color);
    background-color: var(--revez-control-hover);
    color: var(--revez-control-text);
    box-shadow: 0 0 0 3px var(--revez-surface-alt);
  }

  .roster-status-panel__head,
  html[data-theme="dark"] .roster-status-panel__head {
    background: var(--revez-surface-alt);
  }

  .roster-status-table thead th,
  html[data-theme="dark"] .roster-status-table thead th {
    background: var(--revez-surface-alt);
    color: var(--text-2);
  }

  .roster-status-table td,
  html[data-theme="dark"] .roster-status-table td {
    background: var(--revez-surface);
  }


  .roster-header-stat,
  .roster-header-stat--neutral,
  .roster-header-stat--pending,
  .roster-header-stat--progress,
  .roster-header-stat--done,
  html[data-theme="dark"] .roster-header-stat,
  html[data-theme="dark"] .roster-header-stat--neutral,
  html[data-theme="dark"] .roster-header-stat--pending,
  html[data-theme="dark"] .roster-header-stat--progress,
  html[data-theme="dark"] .roster-header-stat--done {
    background: var(--revez-surface);
  }

  .roster-header-stat,
  html[data-theme="dark"] .roster-header-stat {
    box-shadow: inset 0 3px 0 var(--roster-stat-color), var(--revez-shadow);
  }

  .roster-row,
  html[data-theme="dark"] .roster-row {
    box-shadow: var(--revez-shadow);
  }

  html[data-theme="dark"] .roster-row {
    color: #edf7f7;
  }
  .roster-add-modal,
  .roster-edit-modal,
  html[data-theme="dark"] .roster-add-modal,
  html[data-theme="dark"] .roster-edit-modal {
    border-color: var(--revez-border, var(--border));
    background: var(--revez-surface, var(--card));
    box-shadow: 0 24px 56px rgb(0 0 0 / 28%);
    backdrop-filter: none;
  }

  .roster-edit-modal__actions,
  html[data-theme="dark"] .roster-edit-modal__actions {
    background: var(--revez-surface-alt);
  }

  .roster-edit-modal__field input,
  .roster-edit-modal__field textarea,
  html[data-theme="dark"] .roster-edit-modal__field input,
  html[data-theme="dark"] .roster-edit-modal__field textarea {
    border-color: var(--revez-border);
    background: var(--revez-control-bg);
    color: var(--text);
    box-shadow: none;
  }

  .roster-edit-modal__computed,
  html[data-theme="dark"] .roster-edit-modal__computed {
    border-color: var(--revez-border);
    background: var(--revez-neutral-bg);
  }

  .roster-edit-modal__computed-value,
  html[data-theme="dark"] .roster-edit-modal__computed-value {
    color: var(--revez-neutral-text);
  }
}

/* Modal de edicao do revezamento sem transparencia. */
.roster-edit-modal-shell .roster-modal-backdrop {
  background: rgb(15 17 21 / 58%);
  opacity: 1;
}

.roster-edit-modal,
.roster-edit-form,
.roster-edit-modal__header,
.roster-edit-modal__body {
  background: #ffffff;
}

.roster-edit-modal__actions {
  background: #f5faf8;
}

html[data-theme="dark"] .roster-edit-modal-shell .roster-modal-backdrop {
  background: rgb(7 9 13 / 64%);
}

html[data-theme="dark"] .roster-edit-modal,
html[data-theme="dark"] .roster-edit-form,
html[data-theme="dark"] .roster-edit-modal__header,
html[data-theme="dark"] .roster-edit-modal__body {
  background: var(--card);
}

html[data-theme="dark"] .roster-edit-modal__actions {
  background: var(--surface);
}

/* Resumo operacional único: busca, status e progresso no mesmo componente. */
.roster-overview-panel {
  --roster-progress-track: #dfe8e6;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 8px 22px rgb(15 23 42 / 6%);
}

.roster-overview-panel__toolbar {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.roster-overview-panel__toolbar .search-field {
  order: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.roster-overview-panel__toolbar .roster-header-stats {
  order: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.roster-group-progress {
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 1px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.roster-group-progress__row {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(60px, 1fr) 34px 48px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 6px 0;
  animation: roster-progress-row-enter 360ms ease-out both;
}

.roster-group-progress__row:nth-child(2) {
  animation-delay: 70ms;
}

.roster-group-progress__row + .roster-group-progress__row {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.roster-group-progress__identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.roster-group-progress__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  color: var(--teal-dark);
  font-size: 14px;
}

.roster-group-progress__label {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-group-progress__bar-stack {
  width: 100%;
  height: 2px;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--roster-progress-track);
}

.roster-group-progress__graphic {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: roster-progress-reveal 680ms cubic-bezier(.22, 1, .36, 1) both;
}

.roster-group-progress__segment--completed {
  fill: var(--ic-ok-text);
}

.roster-group-progress__segment--active {
  fill: var(--ic-wait-text);
}

.roster-group-progress__percentage {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.roster-group-progress__ratio {
  display: inline-flex;
  justify-content: flex-end;
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
}

.roster-group-progress__ratio strong {
  color: var(--text);
  font-weight: 780;
}

html[data-theme="dark"] .roster-overview-panel {
  --roster-progress-track: #303a44;
  border-color: var(--border);
  background: var(--card);
  box-shadow: 0 10px 24px rgb(0 0 0 / 22%);
}

.roster-overview-panel--skeleton {
  pointer-events: none;
}

.roster-group-progress--skeleton .skeleton-line--progress-icon {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.roster-group-progress--skeleton .skeleton-line--progress-label {
  width: 82px;
  height: 11px;
}

.roster-group-progress--skeleton .skeleton-line--progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
}

.roster-group-progress--skeleton .skeleton-line--progress-percent {
  width: 34px;
  height: 12px;
  justify-self: end;
}

.roster-group-progress--skeleton .skeleton-line--progress-ratio {
  width: 46px;
  height: 12px;
  justify-self: end;
}

@keyframes roster-progress-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes roster-progress-row-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1199px) {
  .roster-overview-panel {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 10px 10px 5px;
    border-color: var(--revez-border, var(--border));
    border-radius: 16px;
    background: var(--revez-surface, var(--card));
    box-shadow: var(--revez-shadow, 0 8px 20px rgb(15 23 42 / 8%));
  }

  .roster-overview-panel .roster-header-stats {
    width: 100%;
    margin: 0;
  }

  .roster-group-progress {
    margin-top: 8px;
    padding: 6px 1px 0;
  }

  .roster-group-progress__row {
    grid-template-columns: minmax(86px, auto) minmax(60px, 1fr) 34px 48px;
    gap: 7px;
    min-height: 34px;
    padding: 6px 0;
  }

  .roster-group-progress__identity {
    gap: 6px;
  }

  .roster-group-progress__icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 14px;
  }

  .roster-group-progress__label {
    font-size: 11px;
  }

  .roster-group-progress__bar-stack {
    height: 2px;
  }

  .roster-group-progress__percentage,
  .roster-group-progress__ratio {
    font-size: 10.5px;
  }

  html[data-theme="dark"] .roster-overview-panel {
    border-color: var(--revez-border, var(--border));
    background: var(--revez-surface, var(--card));
    box-shadow: var(--revez-shadow, 0 10px 24px rgb(0 0 0 / 24%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .roster-group-progress__row,
  .roster-group-progress__graphic {
    animation: none;
  }
}

/* Loading state for the mobile Revezamento layout. */
.revezamento-page--loading {
  color: var(--text);
}

.revezamento-page--loading .roster-header-stat--skeleton {
  cursor: default;
  pointer-events: none;
}

.revezamento-page--loading .roster-header-stat__copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.revezamento-page--loading .roster-row--skeleton {
  cursor: default;
  pointer-events: none;
}

.revezamento-page--loading .roster-row--skeleton .roster-identity__copy {
  gap: 7px;
}

.revezamento-page--loading .roster-skeleton-search {
  min-height: 36px;
  min-width: min(260px, 100%);
  border: 1px solid var(--revez-border, var(--border));
  background: var(--revez-control-bg, var(--field-bg));
  color: var(--text-3);
}

.revezamento-page--loading .roster-actions {
  align-items: center;
}

@media (max-width: 1199px) {
  .revezamento-page--loading .roster-header-stats {
    width: calc(100% - 32px);
    margin: 0 auto;
  }

  .revezamento-page--loading .roster-row--skeleton .roster-row__main {
    align-items: center;
  }
}

.public-dashboard {
  min-height: 100vh;
  padding: 8px 6px;
  background: var(--bg);
  color: var(--text);
}

.public-dashboard--embedded {
  min-height: auto;
  padding: 0;
  background: transparent;
}

.public-dashboard-shell {
  display: grid;
  gap: 8px;
  width: min(100%, 940px);
  margin: 0 auto;
}

.public-dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--team-accent-bg) 42%, var(--card)) 0%, var(--card) 62%);
  box-shadow: none;
}

.public-dashboard-heading {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: baseline;
  justify-content: start;
  gap: 3px 9px;
  min-width: 0;
}

.public-dashboard-heading h1 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--teal-dark);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.08;
}

.public-dashboard-date {
  grid-column: 1 / -1;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 580;
  line-height: 1.15;
  text-transform: capitalize;
}

.public-dashboard-scope,
.public-dashboard-updated {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 620;
  line-height: 1.1;
  white-space: nowrap;
}

.public-dashboard-scope {
  color: var(--team-accent);
}

.public-dashboard-logo {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.public-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-dashboard-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 5px 6px;
  border: 0;
  border-radius: 5px;
  background: var(--surface);
}

.public-dashboard-stat--neutral {
  background: color-mix(in srgb, var(--ic-total-bg) 58%, var(--surface));
}

.public-dashboard-stat--pending {
  background: color-mix(in srgb, var(--ic-wait-bg) 62%, var(--surface));
}

.public-dashboard-stat--progress {
  background: color-mix(in srgb, var(--team-accent-bg) 66%, var(--surface));
}

.public-dashboard-stat--done {
  background: color-mix(in srgb, var(--ic-ok-bg) 62%, var(--surface));
}

.public-dashboard-stat__label {
  overflow: hidden;
  color: var(--text-2);
  font-size: 8px;
  font-weight: 720;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-dashboard-stat strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
}

.public-dashboard-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-dashboard-card--loading {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--surface);
}

.public-dashboard-status-panel {
  overflow: visible;
  border: 0;
  background: transparent;
}

.public-dashboard-status-panel .roster-status-panel__head {
  padding: 5px 2px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  background: transparent;
}

.public-dashboard-status-table-wrap {
  max-height: calc(100vh - 142px);
  overflow-x: clip;
  overflow-y: auto;
  border: 0;
  background: transparent;
}

.public-dashboard-status-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 7.5px;
}

.public-dashboard-status-table th,
.public-dashboard-status-table td {
  padding: 5px 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.public-dashboard-status-table thead th {
  border-top: 0;
  color: var(--text-2);
  font-size: 7px;
  font-weight: 680;
}

.public-dashboard-status-table th:first-child,
.public-dashboard-status-table td:first-child {
  width: 20px;
}

.public-dashboard-status-table th:nth-child(2),
.public-dashboard-status-table td:nth-child(2) {
  width: auto;
}

.public-dashboard-status-table th:nth-child(3),
.public-dashboard-status-table td:nth-child(3) {
  width: 58px;
}

.public-dashboard-status-table th:nth-child(4),
.public-dashboard-status-table td:nth-child(4) {
  width: 34px;
}

.public-dashboard-status-table th:nth-child(5),
.public-dashboard-status-table td:nth-child(5),
.public-dashboard-status-table th:nth-child(6),
.public-dashboard-status-table td:nth-child(6) {
  width: 34px;
}

.public-dashboard-status-table .status-pill {
  max-width: 54px;
  min-height: 13px;
  gap: 2px;
  padding-inline: 3px;
  overflow: hidden;
  border-radius: 4px;
  font-size: 6.3px;
  text-overflow: ellipsis;
}

.public-dashboard-status-table .status-pill__dot {
  width: 3px;
  height: 3px;
}

.public-dashboard .empty-card {
  border: 0;
  border-radius: 0;
  padding: 12px 4px;
  background: transparent;
}

html[data-theme="dark"] .public-dashboard-header {
  background: linear-gradient(90deg, color-mix(in srgb, var(--team-accent-bg) 28%, var(--card)) 0%, var(--card) 70%);
}

@media (min-width: 430px) {
  .public-dashboard {
    padding: 10px;
  }

  .public-dashboard-shell {
    gap: 9px;
  }

  .public-dashboard-header {
    min-height: 64px;
    padding: 11px 14px;
    border-radius: 6px;
  }

  .public-dashboard-heading h1 {
    font-size: 21px;
  }

  .public-dashboard-date {
    font-size: 11px;
  }

  .public-dashboard-scope,
  .public-dashboard-updated {
    font-size: 10px;
  }

  .public-dashboard-logo {
    width: 42px;
    height: 42px;
  }

  .public-dashboard-stat {
    min-height: 31px;
    padding-inline: 8px;
  }

  .public-dashboard-stat__label {
    font-size: 9px;
  }

  .public-dashboard-stat strong {
    font-size: 14px;
  }

  .public-dashboard-status-table {
    font-size: 8.5px;
  }

  .public-dashboard-status-table thead th {
    font-size: 8px;
  }
}

@media (min-width: 700px) {
  .public-dashboard {
    padding: 14px;
  }

  .public-dashboard-shell {
    gap: 10px;
  }

  .public-dashboard-header {
    min-height: 76px;
    padding: 14px 18px;
    border-radius: 7px;
  }

  .public-dashboard-heading {
    gap: 4px 12px;
  }

  .public-dashboard-heading h1 {
    font-size: 24px;
  }

  .public-dashboard-date {
    font-size: 12px;
  }

  .public-dashboard-scope,
  .public-dashboard-updated {
    font-size: 10.5px;
  }

  .public-dashboard-logo {
    width: 54px;
    height: 54px;
  }

  .public-dashboard-stats {
    gap: 6px;
    padding-inline: 0;
  }

  .public-dashboard-stat {
    min-height: 36px;
    padding: 7px 10px;
  }

  .public-dashboard-stat__label {
    font-size: 9.5px;
  }

  .public-dashboard-stat strong {
    font-size: 15px;
  }

  .public-dashboard-status-panel {
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 7px;
    background: var(--card);
    overflow: hidden;
  }

  .public-dashboard-status-panel .roster-status-panel__head {
    padding: 7px 10px;
    background: var(--surface);
  }

  .public-dashboard-status-table-wrap {
    max-height: calc(100vh - 172px);
    overflow-x: auto;
    background: var(--card);
  }

  .public-dashboard-status-table {
    min-width: 500px;
    font-size: 10px;
  }

  .public-dashboard-status-table th,
  .public-dashboard-status-table td {
    padding: 7px 9px;
  }

  .public-dashboard-status-table thead th {
    font-size: 9px;
  }

  .public-dashboard-status-table th:first-child,
  .public-dashboard-status-table td:first-child {
    width: 34px;
  }

  .public-dashboard-status-table th:nth-child(3),
  .public-dashboard-status-table td:nth-child(3) {
    width: 120px;
  }

  .public-dashboard-status-table th:nth-child(4),
  .public-dashboard-status-table td:nth-child(4) {
    width: 64px;
  }

  .public-dashboard-status-table th:nth-child(5),
  .public-dashboard-status-table td:nth-child(5),
  .public-dashboard-status-table th:nth-child(6),
  .public-dashboard-status-table td:nth-child(6) {
    width: 58px;
  }

  .public-dashboard-status-table .status-pill {
    max-width: none;
    min-height: 16px;
    gap: 3px;
    padding-inline: 5px;
    font-size: 8px;
  }

  .public-dashboard-status-table .status-pill__dot {
    width: 4px;
    height: 4px;
  }
}

@media (min-width: 1040px) {
  .public-dashboard {
    padding-top: 16px;
  }

  .public-dashboard-shell {
    width: min(100%, 980px);
  }

  .public-dashboard-header {
    min-height: 82px;
  }

  .public-dashboard-heading h1 {
    font-size: 26px;
  }
}

/* Direcionamento do Revezamento: leitura na lista e edição exclusiva do Controle. */
.roster-direction-modal-shell {
  --direction-modal-surface: #ffffff;
  --direction-modal-surface-muted: #f5f8f7;
  --direction-modal-control: #ffffff;
  --direction-modal-border: #d9e4e2;
  --direction-modal-overlay: rgb(12 24 29 / 52%);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  isolation: isolate;
}

html[data-theme="dark"] .roster-direction-modal-shell {
  --direction-modal-surface: #1b2029;
  --direction-modal-surface-muted: #232a34;
  --direction-modal-control: #151a22;
  --direction-modal-border: #343d49;
  --direction-modal-overlay: rgb(4 8 12 / 68%);
}

.roster-direction-modal-shell .roster-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--direction-modal-overlay);
  backdrop-filter: none;
}

.roster-direction-modal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(520px, 100%);
  max-height: min(680px, calc(100dvh - 36px));
  overflow: hidden;
  border: 1px solid var(--direction-modal-border);
  border-radius: 16px;
  background: var(--direction-modal-surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgb(15 40 45 / 24%);
}

.roster-direction-modal__header,
.roster-direction-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--direction-modal-surface);
}

.roster-direction-modal__header {
  border-bottom: 1px solid var(--direction-modal-border);
}

.roster-direction-modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.roster-direction-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--teal) 12%, var(--direction-modal-surface));
  color: var(--teal-dark);
  font-size: 17px;
}

.roster-direction-modal__title span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.roster-direction-modal__title h3 {
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-direction-modal__body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--direction-modal-surface);
}

.roster-direction-modal__body label {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}

.roster-direction-modal__body textarea {
  width: 100%;
  min-height: 132px;
  max-height: 320px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--direction-modal-border);
  border-radius: 10px;
  background: var(--direction-modal-control);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.roster-direction-modal__body textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(0 126 122 / 14%);
  outline: none;
}

.roster-direction-modal__body textarea:disabled {
  opacity: .72;
  cursor: wait;
}

.roster-direction-modal__help {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-3);
  font-size: 10px;
}

.roster-direction-modal__help small {
  line-height: 1.4;
}

.roster-direction-modal__counter {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.roster-direction-modal__error {
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--danger-text) 28%, var(--direction-modal-border));
  border-radius: 9px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
}

.roster-direction-modal__error[hidden] {
  display: none;
}

.roster-direction-modal__actions {
  justify-content: flex-end;
  border-top: 1px solid var(--direction-modal-border);
  background: var(--direction-modal-surface-muted);
}

.roster-direction-modal__submit[aria-busy="true"] {
  cursor: wait;
}

html[data-theme="dark"] .roster-note__edit,
html[data-theme="dark"] .roster-direction-modal__icon {
  background: color-mix(in srgb, var(--teal) 18%, var(--direction-modal-surface));
  color: #9adbd6;
}

html[data-theme="dark"] .roster-direction-modal {
  box-shadow: 0 24px 70px rgb(0 0 0 / 46%);
}

@media (max-width: 1199px) {
  .roster-note {
    align-items: flex-start;
    padding-left: 14px;
  }

  .roster-note__edit {
    min-width: 30px;
    padding-inline: 7px;
  }
}

@media (max-width: 599px), (max-height: 599px) {
  .roster-direction-modal-shell {
    align-items: end;
    padding: 10px;
  }

  .roster-direction-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 16px 16px 12px 12px;
  }

  .roster-direction-modal__body textarea {
    min-height: 116px;
    resize: none;
  }

  .roster-direction-modal__actions {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .roster-direction-modal__actions > * {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 600px) and (min-height: 600px) and (max-width: 1199px),
       (min-width: 800px) and (min-height: 480px) and (max-width: 1199px) and (orientation: landscape) and (max-aspect-ratio: 2/1) {
  .roster-direction-modal-shell {
    place-items: center;
    padding: 24px;
  }

  .roster-direction-modal {
    width: min(560px, calc(100vw - 48px));
    max-height: min(620px, calc(100dvh - 48px));
    border-radius: 18px;
  }

  .roster-direction-modal__header,
  .roster-direction-modal__actions {
    padding-inline: 18px;
  }

  .roster-direction-modal__body {
    padding: 18px;
  }

  .roster-direction-modal__body textarea {
    min-height: 154px;
  }
}

/* Tablet do Revezamento: visual mobile, duas listas independentes em paralelo. */
.roster-single-list {
  display: block;
}

.roster-tablet-board,
.roster-tablet-toolbar {
  display: none;
}

@keyframes roster-tablet-title-line {
  0% {
    opacity: .58;
    transform: scaleX(.34);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (min-width: 600px) and (min-height: 600px) and (max-width: 1199px),
       (min-width: 800px) and (min-height: 480px) and (max-width: 1199px) and (orientation: landscape) and (max-aspect-ratio: 2/1) {
  .page-container > .page-section > .mobile-dashboard-topbar {
    display: none;
  }

  .app-main--revezamento .page-container {
    width: 100%;
    max-width: none;
    padding: 0 0 26px;
  }

  .revezamento-page {
    gap: 0;
  }

  .revezamento-page .roster-overview-panel {
    box-sizing: border-box;
    width: min(calc(100% - 32px), 780px);
    max-width: 780px;
    margin-inline: auto;
  }

  .revezamento-page .roster-status-panel,
  .revezamento-page .roster-content-section {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1120px;
    margin-inline: auto;
  }

  .revezamento-page .roster-content-section {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 0;
  }

  .roster-section-head--single {
    display: none;
  }

  .roster-tablet-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 5px 6px 5px 10px;
    border: 1px solid var(--revez-border, var(--border));
    border-radius: 12px;
    background: var(--revez-surface, var(--card));
    box-shadow: 0 4px 14px rgb(15 23 42 / 6%);
  }

  .roster-tablet-toolbar__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  .roster-tablet-toolbar__group {
    --tablet-toolbar-accent: #007e7a;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .roster-tablet-toolbar__group--official {
    --tablet-toolbar-accent: #b78100;
  }

  .roster-tablet-toolbar__group:not(.is-readonly):hover,
  .roster-tablet-toolbar__group:not(.is-readonly):focus-visible,
  .roster-tablet-toolbar__group.is-active {
    background: color-mix(in srgb, var(--tablet-toolbar-accent) 8%, transparent);
    color: var(--text);
  }

  .roster-tablet-toolbar__group:not(.is-readonly):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tablet-toolbar-accent) 55%, transparent);
    outline-offset: 1px;
  }

  .roster-tablet-toolbar__group.is-readonly {
    cursor: default;
  }

  .roster-tablet-toolbar__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--tablet-toolbar-accent) 10%, var(--revez-surface, var(--card)));
    color: var(--tablet-toolbar-accent);
    font-size: 13px;
  }

  .roster-tablet-toolbar__label {
    position: relative;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    padding-bottom: 3px;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-tablet-toolbar__label::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--tablet-toolbar-accent) 52%, transparent),
      var(--tablet-toolbar-accent),
      color-mix(in srgb, var(--tablet-toolbar-accent) 52%, transparent)
    );
    content: "";
    transform: scaleX(.3);
    transform-origin: left center;
    animation: roster-section-title-line 2.1s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  }

  .roster-tablet-toolbar__count {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding-inline: 6px;
    border: 1px solid color-mix(in srgb, var(--tablet-toolbar-accent) 24%, var(--revez-border, var(--border)));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tablet-toolbar-accent) 7%, var(--revez-surface, var(--card)));
    color: var(--tablet-toolbar-accent);
    font-size: 9.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .roster-tablet-toolbar__filter {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--revez-control-bg, var(--field-bg));
    box-shadow: none;
    font-size: 10.5px;
  }

  .roster-filter-bar.is-open {
    margin: 0;
    border-radius: 12px;
  }

  .roster-single-list {
    display: none;
  }

  .roster-tablet-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(12px, 1.8vw, 20px);
    min-width: 0;
  }

  .roster-tablet-board--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster-tablet-column {
    --tablet-roster-accent: #007e7a;
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
  }

  .roster-tablet-column--official {
    --tablet-roster-accent: #b78100;
  }

  .roster-tablet-column__header {
    display: none;
  }

  .roster-tablet-column__selector {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 3px 4px 5px;
    border: 0;
    border-bottom: 1px solid var(--revez-divider, var(--border));
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
  }

  .roster-tablet-column__selector:not(.is-readonly):hover,
  .roster-tablet-column__selector:not(.is-readonly):focus-visible {
    border-bottom-color: color-mix(in srgb, var(--tablet-roster-accent) 58%, var(--revez-divider, var(--border)));
    background: color-mix(in srgb, var(--tablet-roster-accent) 5%, transparent);
    outline: none;
  }

  .roster-tablet-column.is-active .roster-tablet-column__selector {
    border-bottom-color: color-mix(in srgb, var(--tablet-roster-accent) 72%, var(--revez-divider, var(--border)));
  }

  .roster-tablet-column__selector.is-readonly {
    cursor: default;
  }

  .roster-tablet-column__icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: color-mix(in srgb, var(--tablet-roster-accent) 11%, var(--revez-surface, var(--card)));
    color: var(--tablet-roster-accent);
    font-size: 15px;
  }

  .roster-tablet-column__title {
    display: inline-grid;
    justify-self: start;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(12px, 1.55vw, 15px);
    font-weight: 760;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-tablet-column__title::after {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--tablet-roster-accent) 48%, transparent),
      var(--tablet-roster-accent),
      color-mix(in srgb, var(--tablet-roster-accent) 48%, transparent)
    );
    content: "";
    transform: scaleX(.34);
    transform-origin: left center;
    animation: roster-tablet-title-line 2s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  }

  .roster-tablet-column__count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 24px;
    padding-inline: 7px;
    border: 1px solid color-mix(in srgb, var(--tablet-roster-accent) 24%, var(--revez-border, var(--border)));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tablet-roster-accent) 8%, var(--revez-surface, var(--card)));
    color: var(--tablet-roster-accent);
    font-size: 10px;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .roster-tablet-column__list {
    display: grid;
    gap: 7px;
    min-width: 0;
  }

  .roster-tablet-column .roster-row,
  .roster-tablet-column .empty-card {
    min-width: 0;
  }

  .roster-tablet-column .roster-name,
  .roster-tablet-column .roster-note__message {
    overflow-wrap: anywhere;
  }

  .roster-tablet-column .roster-note {
    min-width: 0;
  }

  .roster-tablet-column .roster-name {
    font-size: 13.5px;
    font-weight: 760;
    line-height: 1.15;
  }

  .roster-tablet-column .status-badge {
    font-size: 9.5px;
    font-weight: 720;
  }

  .roster-tablet-column .roster-time__label,
  .roster-tablet-column .roster-local-picker__label {
    font-size: 9px;
    font-weight: 650;
  }

  .roster-tablet-column .roster-time__value,
  .roster-tablet-column .roster-local-picker__value {
    font-size: 11px;
    font-weight: 760;
  }

  .roster-tablet-column .roster-note__message {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .roster-tablet-column .roster-local-select,
  .roster-tablet-column .roster-action-button {
    font-size: 10.25px;
    font-weight: 680;
  }

  .revezamento-page .roster-overview-panel__toolbar {
    gap: 10px;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(104px, 128px));
    justify-content: center;
    gap: 12px;
    width: auto;
    margin-inline: auto;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat {
    width: 100%;
    min-height: 58px;
    height: 58px;
    padding: 6px 8px;
    border-right: 1px solid var(--revez-border, var(--border));
    border-radius: 12px;
    background: var(--revez-surface, var(--card));
    box-shadow: inset 0 3px 0 var(--roster-stat-color), 0 4px 12px rgb(15 23 42 / 7%);
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat:last-child {
    border-right: 1px solid var(--revez-border, var(--border));
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__copy {
    display: grid;
    justify-items: center;
    gap: 4px;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__label {
    max-width: 100%;
    font-size: 10px;
    text-align: center;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat strong {
    font-size: 17px;
  }

  .revezamento-page .roster-overview-panel__toolbar > .search-field {
    width: min(100%, 440px);
    max-width: 440px;
    margin-inline: auto;
    justify-self: center;
  }

  .revezamento-page .roster-overview-panel > .roster-group-progress {
    width: min(100%, 620px);
    margin: 8px auto 0;
    padding-inline: 4px;
  }

  .revezamento-page .roster-overview-panel .roster-group-progress__row {
    grid-template-columns: 104px minmax(140px, 300px) 38px 48px;
    justify-content: center;
    gap: 10px;
  }

  .revezamento-page .roster-overview-panel .roster-group-progress__bar-stack {
    width: 100%;
    max-width: 300px;
    justify-self: center;
  }

  html[data-theme="dark"] .roster-tablet-toolbar {
    border-color: var(--revez-border, var(--border));
    background: var(--revez-surface, var(--card));
    box-shadow: 0 5px 16px rgb(0 0 0 / 22%);
  }

  html[data-theme="dark"] .roster-tablet-column__selector:not(.is-readonly):hover,
  html[data-theme="dark"] .roster-tablet-column__selector:not(.is-readonly):focus-visible {
    background: color-mix(in srgb, var(--tablet-roster-accent) 9%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roster-tablet-column__selector {
    transition: none;
  }

  .roster-tablet-column__title::after,
  .roster-tablet-toolbar__label::after {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
    transition: none;
  }
}

/* Revezamento no desktop: um único resumo, compacto e alinhado à lista. */
@media (min-width: 1200px) {
  .app-main--revezamento .page-container {
    padding-top: 8px;
  }

  .revezamento-page {
    gap: 0;
  }

  .revezamento-page > .roster-hero {
    display: block;
    width: min(100%, 946px);
    margin: 0 auto;
    padding: 0;
  }

  .revezamento-page > .roster-hero .roster-hero__copy {
    display: none;
  }

  .revezamento-page > .roster-hero .roster-hero__tools {
    display: block;
    width: 100%;
  }

  .revezamento-page .roster-overview-panel {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .revezamento-page .roster-overview-panel__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 5px 8px 5px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card);
    box-shadow: 0 2px 10px rgb(15 23 42 / 4%);
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stats {
    order: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat {
    --roster-stat-color: var(--text-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-2);
    text-align: left;
    transform: none;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat--neutral {
    --roster-stat-color: var(--teal-dark);
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat--pending {
    --roster-stat-color: var(--danger-text);
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat--progress {
    --roster-stat-color: var(--ic-wait-text);
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat--done {
    --roster-stat-color: var(--ic-ok-text);
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat:last-child {
    border-right: 0;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat:hover,
  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat:focus-visible,
  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat.is-active {
    background: color-mix(in srgb, var(--roster-stat-color) 7%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--roster-stat-color) 70%, transparent);
    transform: none;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__icon,
  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__subtitle {
    display: none;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__copy {
    display: contents;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__label {
    overflow: hidden;
    padding: 0;
    color: var(--text-2);
    font-size: 9.75px;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat__label::after {
    display: none;
  }

  .revezamento-page .roster-overview-panel__toolbar .roster-header-stat strong {
    color: var(--roster-stat-color);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
  }

  .revezamento-page .roster-overview-panel__toolbar > .search-field {
    order: 2;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 240px;
    margin: 0;
    justify-self: end;
  }

  .revezamento-page .roster-overview-panel__toolbar > .search-field input {
    height: 34px;
    padding-right: 10px;
    border-radius: 8px;
    background: var(--field-bg);
    box-shadow: none;
  }

  .revezamento-page .roster-overview-panel > .roster-group-progress {
    width: min(100%, 700px);
    margin: 0 auto;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 2px 10px rgb(15 23 42 / 4%);
  }

  .revezamento-page .roster-overview-panel .roster-group-progress__row {
    grid-template-columns: minmax(108px, 126px) minmax(220px, 1fr) 40px 52px;
    gap: 9px;
    min-height: 28px;
    padding: 2px 0;
  }

  .revezamento-page .roster-overview-panel .roster-group-progress__icon {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 11px;
  }

  .revezamento-page .roster-overview-panel .roster-group-progress__label,
  .revezamento-page .roster-overview-panel .roster-group-progress__percentage,
  .revezamento-page .roster-overview-panel .roster-group-progress__ratio {
    font-size: 10.25px;
  }

  .revezamento-page .roster-overview-panel .roster-group-progress__bar-stack {
    height: 2px;
  }

  .revezamento-page > .roster-status-panel {
    width: min(100%, 740px);
    margin: 9px auto 0;
  }

  .revezamento-page .roster-content-section {
    width: min(100%, 946px);
    max-width: 946px;
    margin: 10px auto 0;
    gap: 8px;
  }

  .revezamento-page .roster-section-head--single {
    min-height: 40px;
    padding: 4px 7px 4px 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card);
    box-shadow: 0 2px 10px rgb(15 23 42 / 4%);
    flex-wrap: nowrap;
  }

  .revezamento-page .roster-section-head--single .roster-section-head__title {
    min-width: 0;
  }

  .revezamento-page .roster-section-head--single .roster-section-head__icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .revezamento-page .roster-section-head--single .roster-section-head__label {
    font-size: 12.5px;
    font-weight: 680;
  }

  .revezamento-page .roster-section-head--single .secondary-button {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    background: var(--field-bg);
    box-shadow: none;
  }

  html[data-theme="dark"] .revezamento-page .roster-overview-panel__toolbar,
  html[data-theme="dark"] .revezamento-page .roster-overview-panel > .roster-group-progress,
  html[data-theme="dark"] .revezamento-page .roster-section-head--single {
    border-color: var(--border);
    background: var(--card);
    box-shadow: 0 3px 14px rgb(0 0 0 / 18%);
  }
}

/* Seletor de local responsivo: acionador compacto no card e modal no mobile/tablet. */
@media (max-width: 1199px) {
  .roster-local-control .roster-local-select {
    display: none;
  }

  .roster-local-picker {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .roster-local-picker__trigger {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
  }

  .roster-local-picker__trigger:hover .roster-local-picker__value,
  .roster-local-picker__trigger:focus-visible .roster-local-picker__value {
    color: var(--roster-status-color, var(--teal-dark));
  }

  .roster-local-picker__trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--roster-status-color, var(--teal)) 48%, transparent);
    outline-offset: 3px;
  }

  .roster-local-picker__label {
    color: var(--text-2);
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
  }

  .roster-local-picker__content {
    display: block;
    width: 100%;
    min-width: 0;
    line-height: 1.1;
  }

  .roster-local-picker__value {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-local-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
  }

  .roster-local-modal-shell .roster-modal-backdrop {
    position: absolute;
    z-index: 0;
    background: rgb(15 23 42 / 48%);
  }

  .roster-local-modal {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(340px, 100%);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid var(--revez-border, var(--border));
    border-radius: 16px;
    background: var(--revez-surface, var(--card));
    color: var(--text);
    box-shadow: 0 22px 56px rgb(15 23 42 / 28%);
  }

  .roster-local-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid var(--revez-border, var(--border));
    background: var(--revez-surface, var(--card));
  }

  .roster-local-modal__heading {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .roster-local-modal__heading h3,
  .roster-local-modal__heading p {
    margin: 0;
  }

  .roster-local-modal__heading h3 {
    color: var(--text);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.15;
  }

  .roster-local-modal__heading p {
    overflow: hidden;
    color: var(--text-2);
    font-size: 10px;
    font-weight: 560;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-local-modal__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .roster-local-modal__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .roster-local-modal__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--revez-border, var(--border));
    border-radius: 10px;
    background: var(--revez-control-bg, var(--field-bg));
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 680;
    text-align: left;
    cursor: pointer;
  }

  .roster-local-modal__option:hover,
  .roster-local-modal__option:focus-visible {
    border-color: var(--teal);
    background: var(--revez-control-hover, var(--surface-hover));
    outline: none;
    box-shadow: 0 0 0 3px rgb(0 126 123 / 10%);
  }

  .roster-local-modal__option.is-current {
    border-color: color-mix(in srgb, var(--teal) 46%, var(--revez-border, var(--border)));
    background: var(--revez-surface-alt, var(--active-bg));
    color: var(--teal-dark);
    cursor: default;
    opacity: 1;
  }

  .roster-local-modal__option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-local-modal__option-state {
    color: var(--text-3);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  html[data-theme="dark"] .roster-local-picker__label {
    color: rgb(222 236 238 / 72%);
  }

  html[data-theme="dark"] .roster-local-picker__value {
    color: #f2fbfb;
  }

  html[data-theme="dark"] .roster-local-modal-shell .roster-modal-backdrop {
    background: rgb(2 6 12 / 66%);
  }

  html[data-theme="dark"] .roster-local-modal,
  html[data-theme="dark"] .roster-local-modal__header {
    border-color: var(--revez-border, rgb(222 236 238 / 14%));
    background: var(--revez-surface, var(--card));
  }

  html[data-theme="dark"] .roster-local-modal {
    box-shadow: 0 24px 60px rgb(0 0 0 / 46%);
  }

  html[data-theme="dark"] .roster-local-modal__option {
    border-color: var(--revez-border, rgb(222 236 238 / 14%));
    background: var(--revez-control-bg, rgb(255 255 255 / 7%));
    color: #f2fbfb;
  }

  html[data-theme="dark"] .roster-local-modal__option.is-current {
    border-color: rgb(154 219 214 / 28%);
    background: var(--active-bg);
    color: #9adbd6;
  }
}

@media (max-width: 360px) {
  .roster-local-modal__options {
    grid-template-columns: 1fr;
  }
}

/* Perfil — edição do revezamento alinhada à identidade visual atual */
.profile-roster-edit {
  --profile-edit-graphite: #26343a;
  --profile-edit-graphite-deep: #202d33;
  --profile-edit-navy: #0b2a67;
  --profile-edit-yellow: #ECB11F;
  --profile-edit-surface: #ffffff;
  --profile-edit-surface-soft: #f7f9fa;
  --profile-edit-text: #24323b;
  --profile-edit-muted: #737e86;
  --profile-edit-line: #e1e5e8;
  width: min(92vw, 560px);
  max-width: 560px;
  max-height: min(88vh, 720px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 24px 70px rgb(15 26 32 / 28%);
  color: var(--profile-edit-text);
}

html[data-theme="dark"] .profile-roster-edit {
  --profile-edit-graphite: #202b31;
  --profile-edit-graphite-deep: #182329;
  --profile-edit-navy: #e8efff;
  --profile-edit-surface: #1f272d;
  --profile-edit-surface-soft: #192127;
  --profile-edit-text: #e7ecef;
  --profile-edit-muted: #a7b1b7;
  --profile-edit-line: #39444b;
}

.profile-roster-edit::backdrop {
  background: rgb(13 24 29 / 58%);
  backdrop-filter: blur(2px);
}

.profile-roster-edit__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  width: 100%;
  max-height: min(88vh, 720px);
  border-radius: inherit;
  background: var(--profile-edit-surface);
}

.profile-roster-edit__header {
  position: relative;
  top: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 11px 12px 11px 14px;
  border: 0;
  background: linear-gradient(105deg, var(--profile-edit-graphite), var(--profile-edit-graphite-deep));
}

.profile-roster-edit__title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.profile-roster-edit__title-mark {
  width: 4px;
  height: 31px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--profile-edit-yellow);
}

.profile-roster-edit__title > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.profile-roster-edit__eyebrow {
  color: var(--profile-edit-yellow);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.1;
}

.profile-roster-edit__header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 630;
  line-height: 1.15;
}

.profile-roster-edit__header p {
  overflow: hidden;
  margin: 1px 0 0;
  color: #c0c8cc;
  font-size: 8.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-roster-edit__close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  color: #dbe1e4;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.profile-roster-edit__close:hover,
.profile-roster-edit__close:focus-visible {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 9%);
  color: #ffffff;
  outline: none;
}

.profile-roster-edit__body {
  overflow-y: auto;
  min-height: 0;
  padding: 9px;
  background: var(--profile-edit-surface-soft);
}

.profile-roster-edit__section {
  overflow: hidden;
  border: 1px solid var(--profile-edit-line);
  border-radius: 11px;
  background: var(--profile-edit-surface);
}

.profile-roster-edit__section + .profile-roster-edit__section {
  margin-top: 8px;
}

.profile-roster-edit__section-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--profile-edit-line);
  background: var(--profile-edit-surface);
}

.profile-roster-edit__section-heading > span {
  width: 3px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--profile-edit-yellow);
}

.profile-roster-edit__section-heading > div {
  display: grid;
  gap: 0;
}

.profile-roster-edit__section-heading strong {
  color: var(--profile-edit-navy);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.profile-roster-edit__section-heading small {
  margin-top: 1px;
  color: var(--profile-edit-muted);
  font-size: 7.5px;
  line-height: 1.2;
}

.profile-roster-edit__grid {
  display: grid;
  grid-template-columns: minmax(145px, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 9px 10px 10px;
}

.profile-roster-edit__field {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  color: var(--profile-edit-text);
  font-size: 9px;
}

.profile-roster-edit__label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--profile-edit-navy);
  font-size: 8.3px;
  font-weight: 650;
  line-height: 1.15;
}

.profile-roster-edit__label i {
  flex: 0 0 auto;
  color: var(--profile-edit-graphite);
  font-size: 12px;
}

html[data-theme="dark"] .profile-roster-edit__label i {
  color: #d6dde0;
}

.profile-roster-edit__field select,
.profile-roster-edit__field input,
.profile-roster-edit__field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--profile-edit-line);
  border-radius: 7px;
  background: var(--profile-edit-surface-soft);
  color: var(--profile-edit-text);
  font: inherit;
  font-size: 9.5px;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.profile-roster-edit__field select,
.profile-roster-edit__field input {
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
}

.profile-roster-edit__field input[type="time"] {
  padding-inline: 7px 4px;
  font-variant-numeric: tabular-nums;
}

.profile-roster-edit__field textarea {
  min-height: 64px;
  padding: 8px 9px;
  line-height: 1.35;
  resize: vertical;
}

.profile-roster-edit__field textarea::placeholder {
  color: color-mix(in srgb, var(--profile-edit-muted) 78%, transparent);
}

.profile-roster-edit__field select:hover,
.profile-roster-edit__field input:hover,
.profile-roster-edit__field textarea:hover {
  border-color: color-mix(in srgb, var(--profile-edit-graphite) 25%, var(--profile-edit-line));
}

.profile-roster-edit__field select:focus,
.profile-roster-edit__field input:focus,
.profile-roster-edit__field textarea:focus {
  border-color: var(--profile-edit-yellow);
  background: var(--profile-edit-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--profile-edit-yellow) 16%, transparent);
  outline: none;
}

.profile-roster-edit__justifications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 9px 10px 10px;
}

.profile-roster-edit__actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 7px;
  padding: 9px 10px 10px;
  border-top: 1px solid var(--profile-edit-line);
  background: var(--profile-edit-surface);
}

.profile-roster-edit__cancel,
.profile-roster-edit__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 9px;
  font-weight: 680;
  cursor: pointer;
  transition: filter 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.profile-roster-edit__cancel {
  border: 1px solid var(--profile-edit-line);
  background: transparent;
  color: var(--profile-edit-navy);
}

.profile-roster-edit__save {
  border: 1px solid var(--profile-edit-yellow);
  background: linear-gradient(90deg, #e7a500, var(--profile-edit-yellow));
  color: #22292d;
}

.profile-roster-edit__save .button-icon {
  font-size: 12px;
}

.profile-roster-edit__cancel:hover,
.profile-roster-edit__cancel:focus-visible {
  border-color: color-mix(in srgb, var(--profile-edit-navy) 36%, var(--profile-edit-line));
  background: color-mix(in srgb, var(--profile-edit-navy) 5%, transparent);
  outline: none;
}

.profile-roster-edit__save:hover:not(:disabled),
.profile-roster-edit__save:focus-visible:not(:disabled) {
  filter: brightness(1.025);
  transform: translateY(-1px);
  outline: none;
}

.profile-roster-edit__save:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

@media (max-width: 699px) {
  .profile-roster-edit {
    position: fixed;
    inset: auto 8px 8px;
    width: auto;
    max-width: none;
    max-height: min(88dvh, 680px);
    margin: 0;
    border-radius: 16px;
  }

  .profile-roster-edit__panel {
    min-height: 0;
    max-height: min(88dvh, 680px);
    border-radius: 16px;
  }

  .profile-roster-edit__header {
    min-height: 61px;
    padding: 10px 11px 10px 13px;
  }

  .profile-roster-edit__title-mark {
    height: 28px;
  }

  .profile-roster-edit__header h3 {
    font-size: 13px;
  }

  .profile-roster-edit__body {
    padding: 8px;
  }

  .profile-roster-edit__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .profile-roster-edit__field--local {
    grid-column: 1 / -1;
  }

  .profile-roster-edit__label {
    font-size: 7.9px;
  }

  .profile-roster-edit__field select,
  .profile-roster-edit__field input {
    height: 31px;
    min-height: 31px;
    font-size: 9px;
  }

  .profile-roster-edit__justifications {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
  }

  .profile-roster-edit__field textarea {
    min-height: 58px;
    font-size: 9px;
  }

  .profile-roster-edit__actions {
    gap: 6px;
    padding: 8px;
  }

  .profile-roster-edit__cancel,
  .profile-roster-edit__save {
    min-height: 31px;
    font-size: 8.7px;
  }
}

@media (max-width: 360px) {
  .profile-roster-edit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-roster-edit__field--local {
    grid-column: 1 / -1;
  }

  .profile-roster-edit__grid .profile-roster-edit__field:last-child {
    grid-column: 1 / -1;
  }
}

/* Recuperação de acesso e verificação de email */
.login-page__recovery {
  display: flex;
  justify-content: flex-end;
  margin-top: -5px;
}

.login-page__recovery-link,
.auth-recovery__back,
.profile-email-field__verify {
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.login-page__recovery-link {
  padding: 2px 0;
  font-size: 12px;
}

.login-page__recovery-link:hover,
.login-page__recovery-link:focus-visible,
.auth-recovery__back:hover,
.auth-recovery__back:focus-visible,
.profile-email-field__verify:hover,
.profile-email-field__verify:focus-visible {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-recovery__card {
  width: min(100%, 470px);
  overflow: hidden;
  border: 1px solid var(--login-line);
  border-radius: 22px;
  background: var(--login-panel);
  box-shadow: var(--login-shadow);
}

.auth-recovery__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--login-line);
  background: linear-gradient(135deg, #ffffff, #eff8f7);
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 760;
}

.auth-recovery__brand img {
  width: 72px;
  height: auto;
}

.auth-recovery__heading {
  display: grid;
  gap: 6px;
  padding: 24px 24px 8px;
}

.auth-recovery__heading h1,
.auth-recovery__heading p {
  margin: 0;
}

.auth-recovery__heading h1 {
  color: var(--text);
  font-size: 23px;
  line-height: 1.15;
}

.auth-recovery__heading p {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.auth-recovery__form,
.auth-recovery__dynamic,
.auth-recovery__result {
  margin: 0;
  padding: 18px 24px 24px;
}

.auth-recovery__form {
  display: grid;
  gap: 14px;
}

.auth-recovery__primary {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 760;
}

.auth-recovery__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 24px 22px;
  padding: 4px 0;
  font-size: 12px;
}

.auth-recovery__status {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgb(0 126 122 / 22%);
  border-radius: 10px;
  background: rgb(0 126 122 / 7%);
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
}

.auth-recovery__hint {
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.45;
}

.auth-recovery__checking {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
}

.auth-recovery__result {
  display: grid;
  justify-items: start;
  gap: 9px;
}

.auth-recovery__result > i {
  color: var(--teal);
  font-size: 28px;
}

.auth-recovery__result h2,
.auth-recovery__result p {
  margin: 0;
}

.auth-recovery__result h2 {
  font-size: 18px;
}

.auth-recovery__result p {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.auth-recovery__result .button,
.auth-recovery__result .secondary-button {
  margin-top: 8px;
}

.auth-recovery__result--error > i {
  color: var(--cherry, #c0305e);
}

.profile-email-field__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-email-field__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
}

.profile-email-field__badge--verified {
  background: rgb(0 126 122 / 10%);
  color: var(--teal-dark);
}

.profile-email-field__badge--pending {
  background: rgb(236 177 31 / 16%);
  color: #7b5b00;
}

.profile-email-field__verify {
  padding: 2px 0;
  font-size: 9.5px;
}

html[data-theme="dark"] .auth-recovery__brand {
  background: linear-gradient(135deg, #1b2029, #18292a);
}

html[data-theme="dark"] .profile-email-field__badge--verified {
  color: #71d5cf;
}

html[data-theme="dark"] .profile-email-field__badge--pending {
  color: #f1cf74;
}

html[data-theme="dark"] .login-page__recovery-link,
html[data-theme="dark"] .auth-recovery__back,
html[data-theme="dark"] .profile-email-field__verify {
  color: #71d5cf;
}

@media (max-width: 640px) {
  .auth-recovery {
    min-height: 100svh;
    padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
  }

  .auth-recovery__card {
    width: 100%;
    border-radius: 18px;
  }

  .auth-recovery__brand {
    padding: 15px 18px;
  }

  .auth-recovery__heading {
    padding: 20px 18px 6px;
  }

  .auth-recovery__heading h1 {
    font-size: 21px;
  }

  .auth-recovery__form,
  .auth-recovery__dynamic,
  .auth-recovery__result {
    padding: 16px 18px 20px;
  }

  .auth-recovery__back {
    margin: 0 18px 18px;
  }
}