/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --color-page: #f4f3f8;
  --color-surface: #ffffff;
  --color-ink: #211d38;
  --color-muted: #676178;
  --color-border: #ded9cd;
  --color-primary: #241f59;
  --color-primary-strong: #17123f;
  --color-accent: #9d7c37;
  --color-alert-bg: #fff0f0;
  --color-alert-border: #edb8b8;
  --color-alert-text: #9b2727;
  --color-notice-bg: #f8f4e9;
  --color-notice-border: #d9c48f;
  --color-notice-text: #6f5521;
  --shadow-panel: 0 24px 70px rgba(36, 31, 89, 0.16);
}

/* Central account inventory */
.inventory-page {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 18px;
}

@media (min-width: 761px) {
  .inventory-page {
    padding: 28px;
  }
}

.inventory-header,
.inventory-section-heading,
.inventory-type-section__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

@media (min-width: 761px) {
  .inventory-header,
  .inventory-section-heading,
  .inventory-type-section__heading {
    flex-direction: row;
  }
}

.inventory-header {
  margin-bottom: 18px;
}

.inventory-header h1,
.inventory-section-heading h2,
.inventory-type-section h2,
.inventory-empty h2 {
  margin: 0;
  line-height: 1.12;
}

.inventory-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.inventory-header p:last-child,
.inventory-section-heading p,
.inventory-type-section__heading p,
.inventory-empty p {
  color: var(--color-muted);
  line-height: 1.55;
}

.inventory-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.inventory-header__actions {
  width: 100%;
}

@media (min-width: 761px) {
  .inventory-header__actions {
    width: auto;
  }
}

.inventory-overview,
.inventory-filters,
.inventory-type-section,
.inventory-empty {
  margin-top: 18px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(36, 31, 89, 0.07);
}

@media (min-width: 761px) {
  .inventory-overview,
  .inventory-filters,
  .inventory-type-section,
  .inventory-empty {
    padding: 24px;
  }
}

.inventory-section-heading {
  margin-bottom: 20px;
}

.inventory-section-heading > p {
  margin: 0;
  font-weight: 700;
}

.inventory-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}

@media (min-width: 521px) {
  .inventory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .inventory-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.inventory-stats div {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  background: rgba(36, 31, 89, 0.045);
  border: 1px solid rgba(36, 31, 89, 0.12);
  border-radius: 8px;
}

.inventory-stats dt {
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.inventory-stats dd {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
}

.inventory-reset-link,
.inventory-inline-link,
.inventory-pagination a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inventory-filter-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 761px) {
  .inventory-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .inventory-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.inventory-filter-form__field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.inventory-filter-form__field label {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
}

.inventory-filter-form__search {
  grid-column: 1;
  width: 100%;
}

@media (min-width: 761px) {
  .inventory-filter-form__search {
    grid-column: span 2;
  }
}

.inventory-filter-form__actions {
  display: flex;
  align-items: end;
  width: 100%;
}

.inventory-filter-form__actions .properties-button {
  width: 100%;
}

.inventory-filter-form select:disabled {
  color: var(--color-muted);
  cursor: not-allowed;
  background: #eeecf1;
}

.inventory-sections {
  display: grid;
  gap: 18px;
}

.inventory-type-section {
  overflow: hidden;
}

.inventory-type-section__heading {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.inventory-type-section__heading h2 {
  margin-top: 10px;
}

.inventory-type-section__heading p {
  max-width: 720px;
  margin: 8px 0 0;
}

.inventory-type-section__heading > strong {
  white-space: nowrap;
}

.inventory-type-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  border: 1px solid transparent;
  border-radius: 999px;
}

.inventory-type-badge--asset {
  color: #ffffff;
  background: var(--color-primary);
}

.inventory-type-badge--quantity {
  color: #4f3a0f;
  background: #f2dfaa;
  border-color: #d5b866;
}

.inventory-table-shell {
  overflow: visible;
  border: 0;
  border-radius: 10px;
}

@media (min-width: 1121px) {
  .inventory-table-shell {
    overflow: hidden;
    border: 1px solid var(--color-border);
  }
}

.inventory-table,
.inventory-table tbody {
  display: block;
}

@media (min-width: 1121px) {
  .inventory-table {
    display: table;
  }

  .inventory-table tbody {
    display: table-row-group;
  }
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.inventory-table thead {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  position: absolute;
  background: rgba(36, 31, 89, 0.055);
}

@media (min-width: 1121px) {
  .inventory-table thead {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    position: static;
  }
}

.inventory-table thead th {
  padding: 11px 14px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}

.inventory-table th[scope="row"],
.inventory-table td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: middle;
}

.inventory-table__row > th,
.inventory-table__row > td {
  display: grid;
  grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

@media (min-width: 1121px) {
  .inventory-table__row > th,
  .inventory-table__row > td {
    display: table-cell;
    grid-template-columns: none;
    padding: 13px 14px;
  }
}

.inventory-table__row > * + * {
  border-top: 1px solid rgba(36, 31, 89, 0.08);
}

@media (min-width: 1121px) {
  .inventory-table__row > * + * {
    border-top: 0;
  }
}

.inventory-table__row > th::before,
.inventory-table__row > td::before {
  content: attr(data-label);
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 1121px) {
  .inventory-table__row > th::before,
  .inventory-table__row > td::before {
    content: none;
  }
}

.inventory-table__row {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  overflow: hidden;
  transition: background 150ms ease;
}

@media (min-width: 1121px) {
  .inventory-table__row {
    display: table-row;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
}

.inventory-table__row + .inventory-table__details-row,
.inventory-table__details-row + .inventory-table__row {
  border-top: 0;
}

@media (min-width: 1121px) {
  .inventory-table__row + .inventory-table__details-row,
  .inventory-table__details-row + .inventory-table__row {
    border-top: 1px solid var(--color-border);
  }
}

.inventory-table__row:hover {
  background: rgba(36, 31, 89, 0.025);
}

.inventory-table__item,
.inventory-table__coverage,
.inventory-table__tracking {
  display: grid;
  gap: 4px;
}

.inventory-table__item {
  min-width: 0;
}

@media (min-width: 1121px) {
  .inventory-table__item {
    min-width: 190px;
  }
}

.inventory-table__item .inventory-type-badge {
  width: fit-content;
  margin-bottom: 2px;
}

.inventory-table__item > strong {
  color: var(--color-primary-strong);
  font-size: 0.96rem;
}

.inventory-table__category,
.inventory-table__coverage span,
.inventory-table__tracking span {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.inventory-table__category {
  display: block;
}

.inventory-record__category {
  display: block;
  margin-top: 5px;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.inventory-table__coverage {
  min-width: 0;
}

@media (min-width: 1121px) {
  .inventory-table__coverage {
    min-width: 135px;
  }
}

.inventory-table__coverage strong,
.inventory-table__tracking strong {
  font-size: 0.875rem;
}

.inventory-table__tracking {
  min-width: 0;
}

@media (min-width: 1121px) {
  .inventory-table__tracking {
    min-width: 105px;
  }
}

.inventory-table__toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--color-primary);
  font-weight: 800;
  cursor: pointer;
  background: rgba(36, 31, 89, 0.055);
  border: 1px solid rgba(36, 31, 89, 0.16);
  border-radius: 7px;
}

.inventory-table__toggle:hover {
  background: rgba(36, 31, 89, 0.1);
}

.inventory-table__toggle-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.inventory-table__toggle[aria-expanded="true"] .inventory-table__toggle-icon {
  transform: rotate(180deg);
}

.inventory-table__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

@media (min-width: 1121px) {
  .inventory-table__actions {
    min-width: 175px;
  }
}

.inventory-table__action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 2px;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.inventory-table__action--danger {
  color: var(--color-alert-text);
}

.inventory-table__remove {
  margin: 0;
}

.inventory-table__details-row {
  display: block;
  margin: -12px 0 12px;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}

@media (min-width: 1121px) {
  .inventory-table__details-row {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
}

.inventory-table__details-row[hidden] {
  display: none;
}

.inventory-table__details-row td {
  display: block;
  padding: 0;
  background: #f8f7fa;
}

@media (min-width: 1121px) {
  .inventory-table__details-row td {
    display: table-cell;
  }
}

.inventory-table__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-top: 1px solid rgba(36, 31, 89, 0.08);
  animation: inventory-table-details-enter 160ms ease-out;
}

@media (min-width: 521px) {
  .inventory-table__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .inventory-table__details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.inventory-table__details div {
  min-width: 0;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid rgba(36, 31, 89, 0.08);
  border-radius: 7px;
}

.inventory-table__details dt {
  margin-bottom: 4px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.inventory-table__details dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  font-weight: 700;
}

.inventory-table__last-check {
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid rgba(36, 31, 89, 0.08);
  border-radius: 7px;
}

.inventory-table__last-check-title {
  margin: 0 0 10px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.inventory-table__last-check-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.inventory-table__last-check-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 0;
}

@media (min-width: 521px) {
  .inventory-table__last-check-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inventory-table__last-check-meta dt {
  margin-bottom: 4px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.inventory-table__last-check-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  font-weight: 700;
}

.inventory-table__last-check-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.inventory-table__toggle:focus-visible,
.inventory-table__action:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 2px;
}

@keyframes inventory-table-details-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inventory-type-section__empty {
  margin: 0;
  padding: 18px;
  color: var(--color-muted);
  background: #f8f7fa;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.inventory-empty {
  text-align: center;
}

.inventory-empty p {
  max-width: 620px;
  margin: 10px auto 18px;
}

.inventory-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}

.inventory-reset-link:focus-visible,
.inventory-inline-link:focus-visible,
.inventory-pagination a:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.settings-collection__header,
.settings-collection__card header,
.settings-collection__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-collection__actions > * {
  width: 100%;
}

@media (min-width: 761px) {
  .settings-collection__actions > * {
    width: auto;
  }
}

.settings-collection {
  display: grid;
  gap: 14px;
}

.settings-collection__card,
.settings-empty {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.settings-collection__card h2,
.settings-collection__card p {
  margin: 0;
}

.settings-collection__card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

@media (min-width: 761px) {
  .settings-collection__card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.settings-collection__card dl div {
  display: grid;
  gap: 4px;
}

.settings-collection__card dt {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.membership-badge {
  width: fit-content;
  padding: 5px 10px;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(157, 124, 55, 0.14);
  border-radius: 999px;
}

.membership-badge--active {
  color: #17663a;
  background: #e7f7ed;
}

.membership-badge--suspended {
  color: #8b2635;
  background: #fcebed;
}

.settings-link--danger {
  color: #8b2635;
}

.permission-groups {
  display: grid;
  gap: 16px;
}

.permission-group {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.permission-group legend {
  padding: 0 6px;
  color: var(--color-primary);
  font-weight: 800;
}

.permission-option {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
}

.permission-option:has(input:checked) {
  background: rgba(36, 31, 89, 0.06);
}

.permission-option input {
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.permission-option span {
  display: grid;
  gap: 3px;
}

.permission-option small {
  color: var(--color-muted);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--color-page);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-ink);
  font-family: Arial, Helvetica, sans-serif;
  background:
    linear-gradient(90deg, rgba(36, 31, 89, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(157, 124, 55, 0.08) 1px, transparent 1px),
    var(--color-page);
  background-size: 44px 44px;
}

.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 246, 250, 0.94);
  border-bottom: 1px solid rgba(222, 217, 205, 0.92);
  box-shadow: 0 10px 30px rgba(36, 31, 89, 0.08);
  backdrop-filter: blur(14px);
}

.layout-toolbar--entering {
  animation: layout-toolbar-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes layout-toolbar-enter {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.layout-toolbar__row {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
}

@media (min-width: 761px) {
  .layout-toolbar__row {
    padding: 12px 28px;
  }
}

.layout-toolbar__primary {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

@media (min-width: 761px) {
  .layout-toolbar__primary {
    gap: 14px;
  }
}

.layout-toolbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.layout-toolbar__settings,
.layout-toolbar__signout {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.layout-toolbar__settings {
  width: 40px;
  padding: 0;
  gap: 6px;
  color: var(--color-primary);
  background: rgba(36, 31, 89, 0.06);
  border: 1px solid rgba(36, 31, 89, 0.12);
}

@media (min-width: 761px) {
  .layout-toolbar__settings {
    width: auto;
    padding: 0 13px;
  }
}

.layout-toolbar__settings-label {
  display: none;
}

@media (min-width: 761px) {
  .layout-toolbar__settings-label {
    display: inline;
  }
}

.layout-toolbar__settings:hover {
  background: rgba(36, 31, 89, 0.12);
}

.layout-toolbar__signout-form {
  display: flex;
  margin: 0;
}

.layout-toolbar__signout {
  color: #ffffff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.layout-toolbar__signout:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

.layout-toolbar__settings:focus-visible,
.layout-toolbar__signout:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 2px;
}

.breadcrumbs {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 14px 18px 0;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (min-width: 761px) {
  .breadcrumbs {
    padding: 16px 28px 0;
  }
}

.breadcrumbs__list {
  width: max-content;
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.breadcrumbs__separator {
  color: rgba(92, 86, 128, 0.58);
}

.breadcrumbs__link {
  color: var(--color-primary-strong);
  font-weight: 700;
  text-decoration: none;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumbs__link:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

.breadcrumbs__label {
  color: var(--color-muted);
  font-weight: 700;
}

.breadcrumbs__current {
  color: var(--color-ink);
  font-weight: 800;
}

.home-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(36, 31, 89, 0.12);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.home-link:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

.home-link:active {
  transform: translateY(1px);
}

.home-link:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.home-link {
  width: fit-content;
}

.primary-navigation {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (min-width: 761px) {
  .primary-navigation {
    width: auto;
    padding: 4px;
  }
}

.primary-navigation__link {
  min-height: 40px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 13px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}

.primary-navigation__link:hover {
  color: #ffffff;
  background: var(--color-primary);
}

.primary-navigation__link:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 2px;
}

.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

button,
input {
  font: inherit;
}

.sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  position: absolute;
}

.locale-switcher {
  position: relative;
  width: fit-content;
  flex: 0 0 auto;
}

@media (min-width: 761px) {
  .locale-switcher {
    flex: 0 1 auto;
  }
}

.locale-switcher__trigger {
  min-width: 76px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(222, 217, 205, 0.92);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(36, 31, 89, 0.07);
  transition: background 160ms ease, border-color 160ms ease;
}

.locale-switcher__trigger::-webkit-details-marker {
  display: none;
}

.locale-switcher__trigger:hover,
.locale-switcher[open] .locale-switcher__trigger {
  background: #ffffff;
  border-color: rgba(36, 31, 89, 0.22);
}

.locale-switcher__trigger:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 2px;
}

.locale-switcher__icon {
  color: var(--color-accent);
  font-size: 1rem;
}

.locale-switcher__chevron {
  color: var(--color-muted);
  transition: transform 160ms ease;
}

.locale-switcher[open] .locale-switcher__chevron {
  transform: rotate(180deg);
}

.locale-switcher__popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  min-width: 244px;
  display: grid;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 20px 46px rgba(36, 31, 89, 0.18);
  backdrop-filter: blur(14px);
}

.locale-switcher__option {
  min-height: 46px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--color-primary);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 8px;
  transition: background 160ms ease;
}

.locale-switcher__option:hover {
  background: rgba(36, 31, 89, 0.08);
}

.locale-switcher__option:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 1px;
}

.locale-switcher__option strong {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.locale-switcher__option span {
  color: var(--color-muted);
}

.locale-switcher__option--current {
  background: rgba(157, 124, 55, 0.12);
}

.locale-switcher__option--current strong,
.locale-switcher__option--current span {
  color: var(--color-primary);
}

/* The auth page owns viewport centering while the form keeps predictable spacing. */
.auth-page {
  min-height: 100%;
  flex: 1;
  display: grid;
  place-items: center;
  align-items: stretch;
  padding: 0;
}

@media (min-width: 761px) {
  .auth-page {
    align-items: center;
    padding: 32px 16px;
  }
}

.auth-shell {
  width: min(100%, 980px);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--color-surface);
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-panel);
}

@media (min-width: 761px) {
  .auth-shell {
    min-height: 620px;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }
}

.auth-intro {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 48px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(157, 124, 55, 0.34), transparent 42%),
    var(--color-primary);
}

@media (min-width: 761px) {
  .auth-intro {
    display: flex;
  }
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.auth-brand__mark {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: 8px;
}

.auth-brand__name {
  font-size: 1.125rem;
}

.auth-intro__copy {
  max-width: 520px;
}

.auth-eyebrow {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-intro .auth-eyebrow {
  color: #d7bd78;
}

.auth-intro h2,
.auth-heading h1 {
  margin: 0;
  line-height: 1.08;
}

.auth-intro h2 {
  max-width: 560px;
  font-size: 2.5rem;
}

.auth-intro p,
.auth-heading p {
  line-height: 1.6;
}

.auth-intro__copy p:last-child {
  max-width: 480px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
}

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 20px;
}

@media (min-width: 761px) {
  .auth-card {
    justify-content: center;
    padding: 48px;
  }
}

.auth-heading {
  margin-bottom: 30px;
}

.auth-heading h1 {
  font-size: 1.875rem;
}

@media (min-width: 761px) {
  .auth-heading h1 {
    font-size: 2rem;
  }
}

.auth-heading p:last-child {
  margin: 14px 0 0;
  color: var(--color-muted);
}

.auth-flash {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 8px;
  line-height: 1.4;
}

.auth-flash--alert {
  color: var(--color-alert-text);
  background: var(--color-alert-bg);
  border-color: var(--color-alert-border);
}

.auth-flash--notice {
  color: var(--color-notice-text);
  background: var(--color-notice-bg);
  border-color: var(--color-notice-border);
}

.app-flashes {
  position: fixed;
  top: 154px;
  left: 50%;
  z-index: 80;
  width: min(calc(100% - 32px), 620px);
  display: grid;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (min-width: 761px) {
  .app-flashes {
    top: 78px;
  }
}

.app-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 14px 18px;
  border: 1px solid;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(36, 31, 89, 0.18);
  line-height: 1.4;
  pointer-events: auto;
  animation: app-flash-enter 240ms ease-out both;
}

.app-flash--leaving {
  animation: app-flash-leave 200ms ease-in both;
}

.app-flash__message {
  min-width: 0;
}

.app-flash__dismiss {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: currentColor;
  font-size: 1.25rem;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.app-flash__dismiss:hover {
  background: rgba(36, 31, 89, 0.08);
}

.app-flash__dismiss:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 2px;
}

@keyframes app-flash-enter {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes app-flash-leave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }
}

.app-flash--alert {
  color: var(--color-alert-text);
  background: var(--color-alert-bg);
  border-color: var(--color-alert-border);
}

.app-flash--notice {
  color: var(--color-notice-text);
  background: var(--color-notice-bg);
  border-color: var(--color-notice-border);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field label {
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.auth-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--color-ink);
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.auth-input:focus {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(157, 124, 55, 0.24);
}

.auth-actions {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}

.auth-submit {
  min-height: 48px;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-primary);
  border: 0;
  border-radius: 8px;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.auth-submit:hover {
  background: var(--color-primary-strong);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit:focus-visible,
.auth-link:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.auth-link {
  width: fit-content;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.property-session {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 14px;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

@media (min-width: 761px) {
  .property-session {
    width: auto;
    align-items: center;
    flex-direction: row;
  }
}

.property-account-switcher__submit {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  background: rgba(36, 31, 89, 0.08);
  border: 1px solid rgba(36, 31, 89, 0.12);
  border-radius: 8px;
}

@media (min-width: 761px) {
  .property-account-switcher__submit {
    width: auto;
    justify-content: flex-start;
  }
}

.property-account-switcher__submit:hover {
  background: rgba(36, 31, 89, 0.14);
}

.property-account-switcher__submit:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.property-session-footer {
  margin-top: 24px;
  margin-inline: -18px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 761px) {
  .property-session-footer {
    margin-inline: -28px;
    padding: 9px 28px;
  }
}

.property-session-footer__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

@media (min-width: 761px) {
  .property-session-footer__inner {
    align-items: center;
    flex-direction: row;
    gap: 24px;
  }
}

.property-session-summary dt {
  color: var(--color-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.property-session-summary dd {
  color: var(--color-ink);
  font-size: 0.8125rem;
}

.property-session-summary {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

@media (min-width: 761px) {
  .property-session-summary {
    align-items: center;
    flex-direction: row;
    gap: 0;
  }
}

.property-session-summary div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  border-left: 0;
}

.property-session-summary div:nth-child(3) {
  display: none;
}

@media (min-width: 761px) {
  .property-session-summary div {
    padding: 0 14px;
    border-left: 1px solid var(--color-border);
  }

  .property-session-summary div:nth-child(3) {
    display: flex;
  }
}

.property-session-summary dd {
  margin: 0;
  font-weight: 700;
}

.unit-panel__empty,
.property-detail__empty,
.property-detail__section-copy {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.property-account-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.property-account-switcher__select {
  min-height: 40px;
  padding: 0 10px;
  color: var(--color-primary);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.property-detail__empty--action {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.property-detail__empty--action p {
  margin: 0;
}

.properties-page {
  min-height: 100%;
  flex: 1;
  padding: 18px;
}

@media (min-width: 761px) {
  .properties-page {
    padding: 28px;
  }
}

.properties-header,
.properties-sort-toggle,
.properties-grid,
.properties-empty,
.properties-form-shell,
.property-detail {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.property-detail {
  display: grid;
  gap: 34px;
}

.properties-header,
.property-detail__header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 761px) {
  .properties-header,
  .property-detail__header {
    flex-direction: row;
  }
}

.properties-header {
  align-items: stretch;
  margin-bottom: 24px;
}

@media (min-width: 761px) {
  .properties-header {
    align-items: flex-start;
  }
}

.properties-header h1,
.properties-form-shell h1,
.property-detail h1,
.properties-empty h2,
.property-card h2,
.property-form__errors h2 {
  margin: 0;
  line-height: 1.08;
}

.properties-header h1,
.properties-form-shell h1,
.property-detail h1 {
  font-size: 2rem;
}

.properties-header p:last-child,
.properties-form-shell__intro p:last-child,
.property-detail__header p:last-child,
.properties-empty p:last-child,
.property-card__address {
  margin: 14px 0 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.properties-eyebrow {
  margin: 0 0 10px;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.properties-header__actions,
.property-detail__actions,
.property-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.properties-header__actions {
  width: 100%;
}

@media (min-width: 761px) {
  .properties-header__actions {
    width: auto;
  }
}

.property-form__actions {
  flex-direction: column;
}

@media (min-width: 761px) {
  .property-form__actions {
    flex-direction: row;
  }
}

.property-detail__actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-sizing: border-box;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(36, 31, 89, 0.1);
}

@media (min-width: 761px) {
  .property-detail__actions {
    flex-direction: row;
    padding: 12px;
  }
}

.property-detail__actions > * {
  flex: 0 0 auto;
  min-width: 0;
}

@media (min-width: 761px) {
  .property-detail__actions > * {
    flex: 1 1 180px;
  }
}

.property-detail__actions .properties-button,
.property-detail__actions .properties-button--secondary,
.property-detail__actions form {
  width:  auto;
}

@media (min-width: 761px) {
  .property-detail__actions .properties-button,
  .property-detail__actions form {
    width: auto;
  }
}

.property-detail__actions .properties-button {
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.9rem;
  border-radius: 10px;
}

.properties-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-primary);
  border: 0;
  border-radius: 8px;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.properties-button:hover {
  background: var(--color-primary-strong);
}

.properties-button:active {
  transform: translateY(1px);
}

.properties-button__icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 900;
  background: rgba(36, 31, 89, 0.08);
  border: 1px solid rgba(36, 31, 89, 0.12);
  border-radius: 999px;
}

.properties-button:focus-visible,
.properties-link:focus-visible,
.properties-input:focus {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.properties-button--secondary {
  color: var(--color-primary);
  background: rgba(36, 31, 89, 0.08);
  border: 1px solid rgba(36, 31, 89, 0.12);
}

.properties-button,
.properties-button--secondary {
  width: 100%;
}

@media (min-width: 761px) {
  .properties-button,
  .properties-button--secondary {
    width: auto;
  }
}

.properties-button--secondary:hover {
  background: rgba(36, 31, 89, 0.14);
}

.properties-button--back {
  gap: 6px;
  padding-left: 10px;
  padding-right: 12px;
}

.properties-button--danger {
  background: #8a1f38;
}

.properties-button--danger:hover {
  background: #70172c;
}

.properties-sort-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.properties-sort-toggle__label {
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.properties-sort-toggle__options {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.properties-sort-toggle__option {
  padding: 8px 16px;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.properties-sort-toggle__option:hover {
  color: var(--color-ink);
}

.properties-sort-toggle__option.is-active {
  color: #ffffff;
  background: var(--color-primary);
}

.properties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 761px) {
  .properties-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.property-card,
.properties-empty,
.properties-form-shell,
.property-detail__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(36, 31, 89, 0.08);
}

.property-card {
  grid-column: 1;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 24px;
}

@media (min-width: 761px) {
  .property-card {
    grid-column: span 4;
  }
}

.property-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.property-card__heading .properties-eyebrow {
  margin-bottom: 0;
}

.property-card__edit-link {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(36, 31, 89, 0.04);
  border: 1px solid rgba(36, 31, 89, 0.1);
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.property-card__edit-link:hover {
  color: var(--color-primary);
  background: rgba(36, 31, 89, 0.09);
  border-color: rgba(36, 31, 89, 0.16);
}

.property-card__edit-link:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 2px;
}

.property-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.property-card__actions > * {
  flex: 1 1 160px;
}

.property-card__actions form {
  display: flex;
}

.property-card__link {
  width: 100%;
}

.property-card__meta,
.property-detail__list {
  display: grid;
  gap: 18px;
  margin: 0;
}

.property-card__meta div,
.property-detail__list div {
  display: grid;
  gap: 6px;
}

.property-card__meta dt,
.property-detail__list dt {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.property-card__meta dd,
.property-detail__list dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.properties-link {
  width: fit-content;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.properties-link:hover {
  text-decoration: underline;
}

.properties-link--inline {
  margin-top: 18px;
}

.properties-empty,
.properties-form-shell,
.property-detail__card {
  padding: 30px;
}

.property-detail__card + .property-detail__card {
  margin-top: 34px;
}

.property-detail__columns {
  display: grid;
  gap: 34px;
}

.property-detail__columns > .property-detail__card + .property-detail__card {
  margin-top: 0;
}

@media (min-width: 901px) {
  .property-detail__columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    align-items: start;
  }
}

.properties-empty {
  max-width: 720px;
}

.properties-archived {
  width: min(100%, 1180px);
  box-sizing: border-box;
  margin: 28px auto 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.properties-archived__header h2,
.archived-property-card h3 {
  margin: 0;
}

.properties-archived__header p:last-child {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.properties-archived__list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.archived-property-card {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

@media (min-width: 761px) {
  .archived-property-card {
    align-items: center;
    flex-direction: row;
  }
}

.archived-property-card form {
  width: 100%;
}

@media (min-width: 761px) {
  .archived-property-card form {
    width: auto;
  }
}

.archived-property-card h3 {
  margin-top: 8px;
}

.archived-property-card p {
  margin: 6px 0 0;
  color: var(--color-muted);
}

.archived-property-card__badge {
  display: inline-flex;
  padding: 4px 8px;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(36, 31, 89, 0.08);
  border-radius: 999px;
}

.units-form-shell__header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 761px) {
  .units-form-shell__header {
    flex-direction: row;
  }
}

.units-form-shell__header-actions {
  flex: 0 0 auto;
}

.units-form-shell__back-link {
  width: 100%;
  min-width: 180px;
}

@media (min-width: 761px) {
  .units-form-shell__back-link {
    width: auto;
  }
}

.units-form-shell__context {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0;
}

@media (min-width: 761px) {
  .units-form-shell__context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.units-form-shell__context-item,
.property-units-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.property-unit-card {
  padding: 16px 18px;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.units-form-shell__context-item {
  display: grid;
  gap: 6px;
}

.units-form-shell__context-item span {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.units-form-shell__context-item strong,
.property-unit-card strong {
  color: var(--color-ink);
}

.property-form {
  display: grid;
  gap: 18px;
}

.property-form__field {
  display: grid;
  gap: 8px;
}

.property-form__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.property-form__field label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.property-form__field-error {
  margin: 0;
  color: var(--color-alert-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.camera-capture__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.camera-capture__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.camera-capture__clear {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

.camera-capture__limit-message {
  margin: 0;
  color: var(--color-alert-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.camera-capture__file-names {
  margin: 0;
  font-size: 0.875rem;
  word-break: break-all;
}

.camera-capture__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.camera-capture__thumb {
  max-width: 160px;
  border-radius: 12px;
  border: 1px solid rgba(36, 31, 89, 0.12);
}

.item-image {
  position: relative;
  display: inline-flex;
}

.item-image__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-alert-border);
  color: var(--color-alert-text);
  cursor: pointer;
  transition: opacity 120ms ease;
}

/* Only devices with a mouse/trackpad get the hover reveal; everything
   else (phones, tablets, hybrids) always shows the remove button. */
@media (hover: hover) and (pointer: fine) {
  .item-image__remove {
    opacity: 0;
  }

  .item-image:hover .item-image__remove,
  .item-image:focus-within .item-image__remove,
  .item-image--removing .item-image__remove {
    opacity: 1;
  }
}

.item-image__remove:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.item-image__remove svg {
  width: 18px;
  height: 18px;
}

.item-image__remove-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.item-image--removing .camera-capture__thumb {
  opacity: 0.35;
}

.item-image__removing-note {
  display: none;
  position: absolute;
  inset-inline: 0;
  bottom: 8px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-alert-text);
}

.item-image--removing .item-image__removing-note {
  display: block;
}

/* Devices with a mouse/trackpad open a file dialog regardless of the
   `capture` attribute, so the camera button is only shown on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .camera-capture__take-photo {
    display: none;
  }
}

.qr-scanner__hint {
  display: block;
  margin: 0 0 8px;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.qr-scanner__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qr-scanner__row .properties-input {
  flex: 1 1 220px;
}

.qr-scanner__dialog {
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

/* `dialog` is only laid out as a grid while open; the browser's own
   `dialog:not([open]) { display: none }` rule would otherwise be
   overridden by this stylesheet regardless of selector specificity. */
.qr-scanner__dialog[open] {
  display: grid;
}

.qr-scanner__dialog::backdrop {
  background: rgba(20, 16, 46, 0.6);
}

.qr-scanner__viewport {
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.qr-scanner__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.qr-scanner__status {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.unit-inventory-import {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.unit-inventory-import[hidden] {
  display: none;
}

.unit-inventory-import h2 {
  margin: 0;
  line-height: 1.15;
  font-size: 1.125rem;
}

.unit-inventory-import__option {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid rgba(222, 217, 205, 0.78);
  border-radius: 8px;
}

.unit-inventory-import__option input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.properties-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--color-ink);
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.properties-input--textarea {
  min-height: 96px;
  padding-top: 12px;
  resize: vertical;
}

.properties-input:focus {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(157, 124, 55, 0.24);
}

.property-form__errors {
  padding: 16px 18px;
  color: var(--color-alert-text);
  background: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  border-radius: 8px;
}

.property-form__errors ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.property-detail__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: 20px;
  margin-bottom: 0;
}

.property-detail__intro {
  display: grid;
  gap: 6px;
  width: 100%;
}

.property-detail__section-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

@media (min-width: 761px) {
  .property-detail__section-header {
    flex-direction: row;
  }
}

.property-detail__section-header h2 {
  margin: 0;
  line-height: 1.08;
  font-size: 1.5rem;
}

.property-detail__section-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
}

@media (min-width: 761px) {
  .property-detail__section-actions {
    flex-direction: row;
  }
}

.property-detail__section-header .property-detail__badge {
  margin-bottom: 0;
}

.property-detail__card-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 761px) {
  .property-detail__card-actions {
    flex-direction: row;
  }
}

.property-detail__actions form {
  display: flex;
  width: auto;
}

.property-detail__actions form .properties-button {
  width: 100%;
}

.property-detail__badge {
  width: fit-content;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 24px;
  padding: 0 12px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
  background: rgba(157, 124, 55, 0.16);
  border-radius: 8px;
}

.property-units-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.property-units-search .properties-input {
  flex: 1 1 14rem;
}

.property-units-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.property-unit-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (min-width: 761px) {
  .property-unit-card {
    align-items: center;
    flex-direction: row;
  }
}

.property-unit-card:hover {
  border-color: rgba(36, 31, 89, 0.22);
  box-shadow: 0 10px 26px rgba(36, 31, 89, 0.08);
  transform: translateY(-1px);
}

.property-unit-card:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.property-unit-card__meta {
  display: grid;
  gap: 6px;
}

.property-unit-card__cta {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
}

.property-unit-card__meta span {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.unit-checklist {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unit-checklist__item {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.unit-checklist__heading {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 761px) {
  .unit-checklist__heading {
    display: flex;
  }
}

.unit-checklist__heading div {
  display: grid;
  gap: 4px;
}

.unit-checklist__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  text-align: left;
}

@media (min-width: 761px) {
  .unit-checklist__result {
    align-items: flex-end;
    margin-left: auto;
    width: max-content;
    text-align: right;
  }
}

.unit-checklist__status {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 999px;
}

.unit-checklist__missing-count {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5a2a75;
}

.unit-checklist__status--good {
  color: #17603a;
  background: #e8f7ef;
}

.unit-checklist__status--fair {
  color: #6f4e00;
  background: #fff4cc;
}

.unit-checklist__status--damaged {
  color: #8a1f38;
  background: #fde8ee;
}

.unit-checklist__status--missing {
  color: #5a2a75;
  background: #f3e8ff;
}

.unit-checklist__heading small,
.unit-checklist__item p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.unit-check-form {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.unit-check-form__toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.unit-check-form__toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.unit-check-form__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.unit-check-form__toggle:has(input:checked) {
  border-color: rgba(36, 31, 89, 0.3);
  box-shadow: 0 0 0 3px rgba(157, 124, 55, 0.18);
}

.unit-check-form__toggle--good:has(input:checked) {
  color: #17603a;
  background: #e8f7ef;
}

.unit-check-form__toggle--fair:has(input:checked) {
  color: #6f4e00;
  background: #fff4cc;
}

.unit-check-form__toggle--damaged:has(input:checked) {
  color: #8a1f38;
  background: #fde8ee;
}

.unit-check-form__toggle--missing:has(input:checked) {
  color: #5a2a75;
  background: #f3e8ff;
}

.unit-check-form__condition-fields {
  display: none;
  gap: 12px;
}

.unit-check-form:has(.unit-check-form__toggle--fair input:checked) .unit-check-form__condition-fields,
.unit-check-form:has(.unit-check-form__toggle--damaged input:checked) .unit-check-form__condition-fields,
.unit-check-form:has(.unit-check-form__toggle--missing input:checked) .unit-check-form__condition-fields {
  display: grid;
}

.unit-check-form__submit {
  width: 100%;
}

@media (min-width: 761px) {
  .unit-check-form__submit {
    width: fit-content;
  }
}

/* Area navigation and the operational unit checklist. */
#unit-checklist {
  display: block;
  min-width: 0;
  scroll-margin-top: 24px;
}

#unit-checklist[busy] .checklist-filter {
  opacity: 0.65;
  pointer-events: none;
}

.checklist-panel .property-detail__section-header {
  gap: 16px;
}

.checklist-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.checklist-filter .property-form__field {
  flex: 1 1 100%;
  min-width: 0;
}

.checklist-filter .properties-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.checklist-filter__clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary);
  font-weight: 700;
  text-underline-offset: 3px;
}

.checklist-panel__count {
  margin: 16px 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.checklist-groups {
  display: grid;
  gap: 28px;
}

.checklist-area {
  min-width: 0;
}

.checklist-area__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--color-accent);
}

.checklist-area__header h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.checklist-area__header p {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.checklist-area__header .property-detail__badge {
  flex-shrink: 0;
}

.checklist-area .unit-checklist__item {
  min-width: 0;
  padding: 14px;
  background: var(--color-surface);
  scroll-margin-top: 24px;
  overflow-wrap: anywhere;
}

.unit-checklist__unrecorded {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.checklist-item-details summary,
.unit-area-settings > summary {
  padding: 12px 0;
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.checklist-item-details summary {
  font-size: 0.875rem;
}

.checklist-item-details .inventory-item-summary {
  margin: 8px 0 12px;
}

.unit-check-form__outcome {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.unit-check-form__outcome legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.checklist-area .unit-check-form__toggles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checklist-area .unit-check-form__toggle {
  min-height: 44px;
  padding: 6px 8px;
  font-size: 0.875rem;
}

.unit-check-form__toggle:has(input:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.unit-check-form__condition-fields--errors {
  display: grid;
}

.unit-area-settings {
  min-width: 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 521px) {
  .checklist-filter .property-form__field {
    flex: 1 1 240px;
  }

  .checklist-area .unit-check-form__toggles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .checklist-area .unit-checklist__item {
    padding: 18px;
  }
}

.unit-inventory-form {
  grid-template-columns: 1fr;
}

@media (min-width: 761px) {
  .unit-inventory-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.unit-inventory-form__wide {
  grid-column: 1 / -1;
}

.unit-inventory-form--edit {
  padding-top: 6px;
  border-top: 1px solid rgba(222, 217, 205, 0.78);
}

.inventory-item-summary {
  display: grid;
  gap: 10px;
}

.inventory-item-summary__type {
  width: fit-content;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 999px;
}

.inventory-item-summary__type--asset {
  color: #24446b;
  background: #e7f0fb;
}

.inventory-item-summary__type--quantity {
  color: #5f4814;
  background: #fbf2d9;
}

.inventory-item-summary__details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}

.inventory-item-summary__details div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
}

.inventory-item-summary__details dt,
.inventory-item-summary__details dd {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.inventory-item-summary__details dt {
  font-weight: 800;
}

.inventory-item-summary__details dt::after {
  content: ":";
}

.unit-categories {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.unit-categories + .unit-categories {
  margin-top: 24px;
}

.unit-categories--form {
  background: var(--color-surface);
}

.unit-categories__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unit-categories__item {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(222, 217, 205, 0.78);
  border-radius: 8px;
}

@media (min-width: 761px) {
  .unit-categories__item {
    align-items: center;
    flex-direction: row;
  }
}

.unit-categories__item-form {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 761px) {
  .unit-categories__item-form {
    grid-template-columns: minmax(0, 1fr) auto;
    width: auto;
  }
}

.unit-categories__item form {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 761px) {
  .unit-categories__item form {
    width: auto;
  }
}

.property-detail__image {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  margin-bottom: 24px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.property-card > .property-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 700;
  background: #e9e7ee;
}

.property-card > .property-image {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
}

.settings-page {
  min-height: 100%;
  flex: 1;
  padding: 18px;
}

@media (min-width: 761px) {
  .settings-page {
    padding: 28px;
  }
}

.settings-header,
.settings-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.settings-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

@media (min-width: 761px) {
  .settings-header {
    flex-direction: row;
  }
}

.settings-header h1,
.settings-panel h2,
.settings-form__errors h2,
.settings-form__section-heading h2 {
  margin: 0;
  line-height: 1.08;
}

.settings-header h1 {
  font-size: 2rem;
}

.settings-header p:last-child,
.settings-form__section-heading p {
  margin: 14px 0 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.settings-eyebrow {
  margin: 0 0 10px;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 761px) {
  .settings-shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

.settings-nav,
.settings-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(36, 31, 89, 0.08);
}

.settings-nav {
  align-self: start;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  overflow-x: auto;
  gap: 6px;
  padding: 12px;
}

@media (min-width: 761px) {
  .settings-nav {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
  }
}

.settings-nav__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 14px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}

@media (min-width: 761px) {
  .settings-nav__link {
    justify-content: flex-start;
    white-space: normal;
  }
}

.settings-nav__link:hover {
  background: rgba(36, 31, 89, 0.08);
}

.settings-nav__link--active {
  color: #ffffff;
  background: var(--color-primary);
}

.settings-nav__link--active:hover {
  background: var(--color-primary-strong);
}

.settings-panel {
  min-width: 0;
  padding: 22px;
}

@media (min-width: 761px) {
  .settings-panel {
    padding: 30px;
  }
}

.settings-form {
  display: grid;
  gap: 24px;
}

.settings-form__section {
  display: grid;
  gap: 18px;
}

.settings-form__section-heading h2 {
  font-size: 1.375rem;
}

.settings-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 761px) {
  .settings-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-field {
  display: grid;
  gap: 8px;
}

.settings-field label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.settings-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--color-ink);
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

select.settings-input {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23676178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.settings-input:focus {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(157, 124, 55, 0.24);
}

.settings-field__hint,
.settings-field__error {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.settings-field__hint {
  color: var(--color-muted);
}

.settings-field__error {
  color: var(--color-alert-text);
  font-weight: 700;
}

.settings-form__errors {
  padding: 16px 18px;
  color: var(--color-alert-text);
  background: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  border-radius: 8px;
}

.settings-form__errors ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.settings-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-primary);
  border: 0;
  border-radius: 8px;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.settings-button:hover {
  background: var(--color-primary-strong);
}

.settings-button:active {
  transform: translateY(1px);
}

.settings-button--secondary {
  color: var(--color-primary);
  background: rgba(36, 31, 89, 0.08);
  border: 1px solid rgba(36, 31, 89, 0.12);
}

.settings-button,
.settings-button--secondary {
  width: 100%;
}

@media (min-width: 761px) {
  .settings-button,
  .settings-button--secondary {
    width: auto;
  }
}

.settings-button--secondary:hover {
  background: rgba(36, 31, 89, 0.14);
}

.settings-button:focus-visible,
.settings-link:focus-visible,
.settings-nav__link:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

.settings-link {
  width: fit-content;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.settings-link:hover {
  text-decoration: underline;
}

.settings-summary {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.settings-summary span {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.settings-summary strong {
  overflow-wrap: anywhere;
}

.inventory-item-shell {
  max-width: 1040px;
}

.inventory-item-form {
  display: grid;
  gap: 20px;
}

.inventory-item-form__errors {
  margin: 0;
}

.inventory-item-form__section {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.inventory-item-form__section legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 800;
}

.inventory-item-form__section legend span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--color-primary);
  border-radius: 999px;
}

.inventory-item-form__section > p,
.inventory-item-form__hint {
  margin: 0;
  color: var(--color-muted);
}

.inventory-item-form [hidden] {
  display: none;
}

.inventory-item-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 761px) {
  .inventory-item-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inventory-item-form__wide {
  grid-column: 1 / -1;
}

.inventory-item-form__label {
  color: var(--color-primary);
  font-weight: 700;
}

.inventory-item-form__scope-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 761px) {
  .inventory-item-form__scope-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inventory-item-form__scope-option {
  display: flex;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.inventory-item-form__scope-option:has(input:checked) {
  background: rgba(36, 31, 89, 0.08);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(157, 124, 55, 0.2);
}

.inventory-item-form__scope-option input {
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.inventory-item-form__scope-option span {
  display: grid;
  gap: 4px;
}

.inventory-item-form__scope-option small {
  color: var(--color-muted);
}

.inventory-item-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.inventory-item-form__actions > * {
  width: 100%;
}

/* Property event log */
.event-log-page {
  width: min(100%, 1180px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 28px;
}

.event-log-header {
  margin-bottom: 24px;
}

.event-log-header h1,
.event-log-section-heading h2,
.event-log-empty h3,
.event-card h4,
.event-card h5,
.event-day h3,
.event-log-form-errors h3 {
  margin: 0;
}

.event-log-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.event-log-header > div > p:last-child,
.event-log-section-heading p:last-child,
.event-log-empty p,
.event-card__description p {
  color: var(--color-muted);
  line-height: 1.6;
}

.event-log-header__title,
.event-log-section-heading,
.event-card__header,
.event-log-pagination,
.archived-property-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.event-log-header__badge,
.event-card__source {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
}

.event-log-header__badge {
  color: var(--color-muted);
  background: rgba(36, 31, 89, 0.08);
  border-color: rgba(36, 31, 89, 0.12);
}

.event-log-filter-panel,
.event-log-manual,
.event-log-results {
  margin-top: 18px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(36, 31, 89, 0.07);
}

.event-log-section-heading {
  align-items: flex-start;
  margin-bottom: 20px;
}

.event-log-section-heading .properties-eyebrow {
  margin-bottom: 7px;
}

.event-log-section-heading p:last-child {
  max-width: 700px;
  margin: 9px 0 0;
}

.event-log-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.event-log-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.event-log-field label {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
}

.event-log-field select,
.event-log-field textarea {
  font: inherit;
}

.event-log-filter-actions {
  display: flex;
  align-items: end;
}

.event-log-filter-actions .properties-button {
  width: 100%;
}

.event-log-clear,
.event-log-pagination a,
.event-log-form-errors a {
  color: var(--color-primary);
  font-weight: 700;
  text-underline-offset: 3px;
}

.event-log-clear,
.event-log-pagination a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.event-log-manual-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.event-log-manual-form__title,
.event-log-manual-form__description {
  grid-column: 1 / -1;
}

.event-log-manual-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.event-log-form-errors {
  margin-bottom: 20px;
  padding: 16px 18px;
  color: var(--color-alert-text);
  background: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  border-radius: 8px;
}

.event-log-form-errors ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 22px;
}

.event-log-form-errors a {
  color: inherit;
}

.event-timeline,
.event-day__events {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-day {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 20px;
}

.event-day > h3 {
  padding-top: 18px;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.event-card {
  padding: 20px;
  background: #fbfaff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
}

.event-card h4 {
  color: var(--color-ink);
  font-size: 1.125rem;
  line-height: 1.35;
}

.event-card h5 {
  color: var(--color-primary);
  font-size: 0.875rem;
}

.event-card__title {
  margin: 7px 0 0;
  color: var(--color-primary);
  font-weight: 700;
}

.event-card__source--automatic {
  color: var(--color-primary);
  background: rgba(36, 31, 89, 0.08);
  border-color: rgba(36, 31, 89, 0.12);
}

.event-card__source--manual {
  color: #4f3a0f;
  background: #f2dfaa;
  border-color: #d5b866;
}

.event-card__metadata,
.event-card__changes,
.event-card__details {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

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

.event-card__metadata > div,
.event-card__details > div {
  min-width: 0;
  padding: 11px 12px;
  background: rgba(36, 31, 89, 0.045);
  border-radius: 6px;
}

.event-card dt {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.event-card dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.event-card__section,
.event-card__description {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.event-card__changes > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.event-card__changes dd {
  display: flex;
  align-items: center;
  gap: 9px;
}

.event-card__details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-card__description p {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.event-log-empty {
  padding: 26px;
  text-align: center;
  background: #fbfaff;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.event-log-empty p {
  max-width: 620px;
  margin: 10px auto;
}

.event-log-pagination {
  justify-content: center;
  margin-top: 22px;
}

.event-log-pagination__status {
  color: var(--color-muted);
  font-weight: 700;
}

.archived-property-card__actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.archived-property-card__actions form {
  display: flex;
}

.event-log-clear:focus-visible,
.event-log-pagination a:focus-visible,
.event-log-form-errors a:focus-visible {
  outline: 3px solid rgba(157, 124, 55, 0.45);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .event-log-filters,
  .event-card__metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .event-log-page {
    padding: 18px;
  }

  .event-log-filter-panel,
  .event-log-manual,
  .event-log-results {
    padding: 18px;
  }

  .event-log-header__title,
  .event-log-section-heading,
  .event-card__header,
  .event-day {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .event-log-filters,
  .event-log-manual-form__grid,
  .event-card__metadata,
  .event-card__details {
    grid-template-columns: 1fr;
  }

  .event-log-manual-form__title,
  .event-log-manual-form__description {
    grid-column: 1;
  }

  .event-log-manual-form__actions,
  .event-log-manual-form__actions .properties-button {
    width: 100%;
  }

  .event-day {
    display: grid;
    gap: 10px;
  }

  .event-day > h3 {
    padding-top: 0;
  }

  .event-card__changes > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .event-card__changes dd {
    flex-wrap: wrap;
  }

  .event-log-pagination {
    flex-wrap: wrap;
  }

  .archived-property-card__actions,
  .archived-property-card__actions form,
  .archived-property-card__actions .properties-button {
    width: 100%;
  }
}

@media (min-width: 761px) {
  .inventory-item-form__actions > * {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-toolbar--entering,
  .app-flash,
  .app-flash--leaving,
  .inventory-table__details {
    animation: none;
  }

  .inventory-table__row,
  .inventory-table__toggle-icon {
    transition: none;
  }

  .event-log-page *,
  .archived-property-card__actions * {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}

.unit-areas__list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.unit-areas__row,
.unit-areas__edit,
.unit-areas__add {
  display: grid;
  gap: 0.65rem;
  align-items: end;
  min-width: 0;
}

.unit-areas__row {
  padding-block: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.unit-areas__edit .properties-input,
.unit-areas__add .properties-input {
  width: 100%;
  min-width: 0;
}

.unit-areas__add {
  margin-top: 1.5rem;
}

@media (min-width: 761px) {
  .unit-areas__row { grid-template-columns: minmax(0, 1fr) auto; }
  .unit-areas__edit,
  .unit-areas__add { grid-template-columns: minmax(0, 1fr) auto; }
  .unit-areas__edit label,
  .unit-areas__add label { grid-column: 1 / -1; }
}