:root {
  --ink-950: #201d1f;
  --ink-900: #2a2628;
  --ink-850: #322e30;
  --ink-800: #3b3538;
  --ink-700: #473f43;
  --ink-600: #5c5257;

  --sidebar-bg: #4a4250;

  --rust-700: #7a4436;
  --rust-600: #92594a;
  --rust-500: #a8654f;
  --rust-100: #f1e1d8;

  --tan-700: #8a5a28;
  --tan-500: #e2bf95;
  --tan-100: #faf0e0;

  --lavender-700: #6b5980;
  --lavender-500: #baacc6;
  --lavender-100: #f0ebf5;

  --sage-700: #4c6345;
  --sage-500: #a7b9a1;
  --sage-100: #e8efe5;

  --bg-app: #f7f3e7;
  --surface: #ffffff;
  --surface-alt: #fbf8f1;
  --border: #e6dfcd;
  --border-strong: #d9cfb6;

  --text-primary: #1f1b1d;
  --text-secondary: #5d6062;
  --text-muted: #8d888f;
  --text-on-navy: #f3eee6;
  --text-on-navy-muted: #b0a8ac;

  --success-bg: var(--sage-100);
  --success-text: var(--sage-700);
  --warning-bg: var(--tan-100);
  --warning-text: var(--tan-700);
  --danger-bg: var(--rust-100);
  --danger-text: var(--rust-700);
  --info-bg: var(--lavender-100);
  --info-text: var(--lavender-700);

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 3.5px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 13.5px;
  --space-5: 17px;
  --space-6: 20.5px;
  --space-8: 27px;
  --space-10: 34px;
  --space-12: 41px;
  --space-16: 54.5px;

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 13.5px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 1.5px rgba(43, 39, 41, 0.06);
  --shadow-md: 0 3.5px 10px rgba(43, 39, 41, 0.08);
  --shadow-lg: 0 13.5px 30.5px rgba(43, 39, 41, 0.12);
  --shadow-brand: 0 7px 17px rgba(146, 89, 74, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  margin: 0;
  color: inherit;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--rust-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- View shell ---------- */

.view {
  display: none;
  min-height: 100vh;
}

.view--active {
  display: flex;
}

.view-enter {
  animation: view-in var(--duration-base) var(--ease-out);
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-enter {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Login ---------- */

#view-login,
#view-set-password {
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--bg-app);
  padding: var(--space-6);
}

.login-shell {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.brand-mark--hero {
  margin-bottom: var(--space-8);
}

.brand-logo-full {
  height: 29px;
  width: auto;
  display: block;
}

.brand-logo-full--hero {
  height: 61px;
}

.login-card h1 {
  font-size: 18.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.login-card__subtitle {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.field-group {
  margin-top: var(--space-6);
}

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.field-input-wrap {
  position: relative;
}

.field-input {
  width: 100%;
  padding: 9.5px var(--space-4);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.field-input::placeholder {
  color: var(--text-muted);
}

.field-input:focus-visible {
  outline: none;
  border-color: var(--rust-600);
  background: var(--surface);
}

.field-input--password {
  padding-right: 35.5px;
}

.field-toggle {
  position: absolute;
  right: 3.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

.field-toggle:hover {
  color: var(--text-primary);
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  font-size: 11px;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-field input {
  width: 13.5px;
  height: 13.5px;
  accent-color: var(--rust-600);
}

.link-muted {
  color: var(--text-secondary);
  text-decoration: none;
}

.link-muted:hover {
  color: var(--rust-600);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0 var(--space-5);
  height: 37.5px;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
  filter: brightness(1.06);
}

.btn--outline {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn--outline:hover {
  border-color: var(--rust-500);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn--block {
  width: 100%;
  margin-top: var(--space-6);
}

.login-footnote {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
}

.login-footnote .icon {
  margin-top: 1px;
  color: var(--rust-600);
}

/* ---------- Workspace select ---------- */

#view-workspaces {
  width: 100%;
  flex-direction: column;
  background:
    radial-gradient(765px 425px at 84% 6%, rgba(167, 185, 161, 0.28), transparent 60%),
    radial-gradient(646px 442px at 6% 92%, rgba(226, 191, 149, 0.3), transparent 60%),
    var(--bg-app);
}

.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-8);
  border-bottom: 1px solid var(--border);
}

.session-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.session-chip strong {
  color: var(--text-primary);
  font-weight: 600;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  height: 30.5px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--rust-500);
}

.workspace-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6) var(--space-16);
}

.workspace-heading {
  text-align: center;
  margin-bottom: var(--space-10);
}

.workspace-heading h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.workspace-heading p {
  margin-top: var(--space-2);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 204px));
  gap: var(--space-5);
  width: 100%;
  max-width: 680px;
}

.workspace-card {
  position: relative;
  text-align: left;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.workspace-card--active {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.workspace-card--active:hover {
  transform: translateY(-3.5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rust-500);
}

.workspace-card__logo {
  width: 112px;
  height: auto;
  display: block;
  margin-bottom: var(--space-4);
}

.workspace-card__meta {
  margin-top: var(--space-1);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
}

.workspace-card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--rust-600);
  font-weight: 600;
}

.workspace-card__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-700);
  box-shadow: 0 0 0 2.5px rgba(76, 99, 69, 0.2);
}

.workspace-card--empty {
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  color: var(--text-muted);
}

.workspace-card--empty .icon {
  width: 18.5px;
  height: 18.5px;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
}

.workspace-card--empty__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.workspace-card--empty__meta {
  margin-top: var(--space-1);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 272px;
  }
}

/* ---------- Dashboard shell ---------- */

#view-dashboard {
  width: 100%;
}

.app-shell {
  display: grid;
  grid-template-columns: 64.5px 1fr;
  width: 100%;
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--text-on-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-2);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0 var(--space-6);
}

.sidebar-brand__mark {
  width: 44px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand__mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-brand__logo {
  display: none;
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37.5px;
  height: 37.5px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-on-navy-muted);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.sidebar-nav a .icon {
  width: 15.5px;
  height: 15.5px;
}

.sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-on-navy);
}

.sidebar-nav a.is-active {
  background: var(--rust-600);
  color: var(--text-on-navy);
}

.sidebar-nav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.sidebar-foot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37.5px;
  height: 37.5px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-on-navy-muted);
}

.sidebar-foot-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-on-navy);
}

.sidebar-foot-btn .icon {
  width: 15.5px;
  height: 15.5px;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 5px var(--space-8);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb strong {
  color: var(--text-primary);
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.icon-btn {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: var(--surface-alt);
  border-color: var(--border);
}

.icon-btn .icon {
  width: 15.5px;
  height: 15.5px;
}

.icon-btn__dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger-text);
  border: 1.5px solid var(--surface);
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.user-menu-trigger:hover {
  background: var(--surface-alt);
  border-color: var(--border);
}

.avatar-sm {
  width: 20.5px;
  height: 20.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-menu-trigger .icon {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: none;
}

.user-menu-panel.is-open {
  display: block;
}

.user-menu-panel__label {
  padding: var(--space-2) var(--space-3);
  font-size: 10px;
  color: var(--text-muted);
}

.user-menu-panel__label strong {
  display: block;
  font-size: 11.5px;
  color: var(--text-primary);
  font-weight: 600;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
}

.user-menu-item:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.user-menu-item .icon {
  width: 13.5px;
  height: 13.5px;
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) 0;
}

/* ---------- Dashboard content ---------- */

.dashboard-content {
  flex: 1;
  padding: var(--space-8);
  max-width: 1088px;
  width: 100%;
  margin: 0 auto;
}

.dashboard-page {
  display: none;
}

.dashboard-page--active {
  display: block;
}

.dashboard-greeting h1 {
  font-size: 20.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dashboard-greeting p {
  margin-top: var(--space-1);
  font-size: 12.5px;
  color: var(--text-secondary);
}

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

.page-title-row .btn {
  height: 34px;
  padding: 0 var(--space-5);
  font-size: 11.5px;
  flex-shrink: 0;
}

/* Properties */

.property-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.property-card + .property-card {
  margin-top: var(--space-5);
}

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

.property-card__name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.property-card__address {
  margin-top: 1.5px;
  font-size: 11px;
  color: var(--text-muted);
}

.property-card__summary {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.property-card__head-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.property-card__summary strong {
  color: var(--text-primary);
}

.property-card__warning {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--rust-100);
  border: 1px solid var(--rust-500);
  border-radius: var(--radius-sm);
  color: var(--rust-700);
  font-size: 10.5px;
  font-weight: 500;
}

.property-card__warning--tan {
  background: var(--tan-100);
  border-color: var(--tan-500);
  color: var(--tan-700);
}

.property-card__warning .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.unit-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: var(--space-3);
}

.unit-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--surface-alt);
}

.unit-tile--conflict {
  border-color: var(--rust-500);
  background: var(--rust-100);
}

.unit-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.unit-tile__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.unit-tile__tenant {
  display: block;
  margin-top: var(--space-2);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rust-700);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.unit-tile__tenant:hover {
  text-decoration: underline;
}

.unit-tile__meta {
  margin-top: 1.5px;
  font-size: 10px;
  color: var(--text-muted);
}

.unit-tile--addable {
  cursor: pointer;
  border-style: dashed;
  text-align: left;
  width: 100%;
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.unit-tile--addable:hover {
  border-color: var(--rust-500);
  background: var(--rust-100);
}

.unit-tile--addable .unit-tile__meta {
  color: var(--rust-700);
  font-weight: 600;
}

.popup-field .checkbox-field + .checkbox-field,
.panel-body .checkbox-field + .checkbox-field {
  margin-top: var(--space-2);
}

.checkbox-field[hidden] {
  display: none;
}

.settings-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.settings-tab {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.is-active {
  color: var(--rust-700);
  border-bottom-color: var(--rust-600);
}

.settings-role-card {
  margin-bottom: var(--space-5);
}

.settings-role-card__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-5) 0;
}

.settings-role-card__group h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.settings-role-card__group .checkbox-field {
  margin-bottom: var(--space-2);
}

.settings-role-card__meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.settings-new-credentials {
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 11.5px;
}

.settings-new-credentials p {
  margin-bottom: var(--space-2);
}

.settings-new-credentials__password {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-new-credentials__password code {
  font-family: monospace;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

@media (max-width: 1080px) {
  .settings-role-card__groups {
    grid-template-columns: 1fr;
  }
}

.verify-summary__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: var(--space-1) 0;
}

.verify-amount-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.properties-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  font-size: 11.5px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* Housing assistance agencies */

.agency-groups {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(187px, 1fr));
  gap: var(--space-5);
}

.agency-group__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.agency-group__label .icon {
  width: 12px;
  height: 12px;
}

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

.agency-group__empty {
  font-size: 11px;
  color: var(--text-muted);
}














.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.stat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card__label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-card__icon {
  width: 25.5px;
  height: 25.5px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon .icon {
  width: 13.5px;
  height: 13.5px;
}

.stat-card__icon--gold {
  background: var(--tan-100);
  color: var(--tan-700);
}

.stat-card__icon--danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.stat-card__icon--success {
  background: var(--success-bg);
  color: var(--success-text);
}

.stat-card__icon--info {
  background: var(--info-bg);
  color: var(--info-text);
}

.stat-card__value {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stat-card__sub {
  margin-top: var(--space-1);
  font-size: 10.5px;
  color: var(--text-muted);
}

.stat-card__sub strong {
  color: var(--success-text);
  font-weight: 600;
}

.stat-card__sub--warn strong {
  color: var(--danger-text);
}

.content-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  align-items: start;
}

.dashboard-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
  align-items: start;
}

.stat-card--button {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-card--button:hover {
  border-color: var(--border-strong);
}

.stat-card--button:focus-visible {
  outline: 2px solid var(--rust-500);
  outline-offset: 2px;
}

.stat-card--button.is-active {
  border-color: var(--rust-500);
  box-shadow: inset 0 0 0 1px var(--rust-500);
}

.inspections-active-label {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.stat-card--compact {
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
}

.stat-card--compact .stat-card__value {
  margin-top: var(--space-2);
  font-size: 16px;
}

.payments-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(127.5px, 1fr));
}

.stat-card--line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
}

.stat-card--line .stat-card__label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-card--line .stat-card__value {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
}

.panel-head__meta {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.panel-head h2 {
  font-size: 13px;
  font-weight: 600;
}

.panel-head__link {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rust-700);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
}

.panel-head__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Progress ring */

.progress-ring {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.progress-ring__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.progress-ring__value {
  fill: none;
  stroke: var(--rust-600);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 81.68;
  stroke-dashoffset: 81.68;
  transition: stroke-dashoffset var(--duration-base) var(--ease-out);
}









/* Donut chart */

.panel-head__link:hover {
  color: var(--rust-600);
}

.panel + .panel {
  margin-top: var(--space-5);
}











.badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 2.5px 7.5px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.badge--warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.badge--info {
  background: var(--info-bg);
  color: var(--info-text);
}

.badge--success {
  background: var(--success-bg);
  color: var(--success-text);
}

/* Table */

.table-wrap {
  padding: 0 var(--space-5) var(--space-5);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

.cell-primary {
  color: var(--text-primary);
  font-weight: 600;
}


.cell-tenant {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: 17px;
}

.copy-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.copy-btn {
  width: 20.5px;
  height: 20.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

.copy-btn:hover {
  background: var(--surface-alt);
  color: var(--rust-600);
}

.copy-btn .icon {
  width: 11px;
  height: 11px;
}

.tenant-row {
  cursor: pointer;
}

.tenant-row:hover,
.tenant-row:focus-visible {
  background: var(--surface-alt);
}

.tenant-row.is-hidden {
  display: none;
}

/* Tasks */

.task-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 353.5px;
  overflow-y: auto;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.task-item:hover {
  background: var(--surface-alt);
}

.task-checkbox {
  width: 15.5px;
  height: 15.5px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.task-checkbox .icon {
  width: 9.5px;
  height: 9.5px;
  color: white;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.task-item.is-done .task-checkbox {
  background: var(--rust-600);
  border-color: var(--rust-600);
}

.task-item.is-done .task-checkbox .icon {
  opacity: 1;
}

.task-item__text {
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.5;
}

.task-item.is-done .task-item__text {
  color: var(--text-muted);
}

.task-item__remove {
  margin-left: auto;
  flex-shrink: 0;
}

.task-add-row {
  padding: 0 var(--space-5) var(--space-4);
}

.task-add-row--top {
  padding: 0 var(--space-5) var(--space-3);
}

/* Vacant units */

/* Activity feed */

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.activity-item {
  display: flex;
  gap: var(--space-3);
}

.activity-avatar {
  width: 25.5px;
  height: 25.5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-on-navy);
}

.activity-item__text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.activity-item__text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.activity-item__time {
  margin-top: 1.5px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Toast */

.toast-region {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.toast {
  background: var(--ink-950);
  color: var(--text-on-navy);
  font-size: 11px;
  font-weight: 500;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(7px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tenant detail page */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: var(--space-5);
}

.back-link:hover {
  color: var(--rust-700);
}

.back-link .icon {
  width: 13.5px;
  height: 13.5px;
}

.tenant-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tenant-detail-header h1 {
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tenant-detail-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tenant-detail-header p {
  margin-top: 1.5px;
  font-size: 12px;
  color: var(--text-secondary);
}

.tenant-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.tenant-status-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tenant-status-item[hidden] {
  display: none;
}

.tenant-status-item .icon {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}

.panel-body {
  padding: 0 var(--space-5) var(--space-5);
}

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

/* Quick note card */

.tenant-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.quick-note-card {
  width: 100%;
  max-width: 272px;
  background: var(--tan-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}

.quick-note-card__label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tan-700);
  margin-bottom: var(--space-1);
}

.quick-note-textarea {
  width: 100%;
  resize: vertical;
  min-height: 34px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-primary);
  padding: 0;
}

.quick-note-textarea::placeholder {
  color: var(--text-muted);
}

.quick-note-textarea:focus-visible {
  outline: none;
}

/* Popup */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 29, 31, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 200;
}

.popup-overlay.is-open {
  display: flex;
}

.popup {
  position: relative;
  width: 100%;
  max-width: 391px;
  max-height: calc(100vh - var(--space-12));
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}

.popup-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.popup-close:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.popup h2 {
  font-size: 14.5px;
  font-weight: 600;
  padding-right: var(--space-8);
}

.popup-body {
  margin-top: var(--space-5);
}

.popup-placeholder {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Popup form */

.popup-field {
  margin-bottom: var(--space-5);
}

.popup-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.popup-field-row {
  display: flex;
  gap: var(--space-4);
}

.popup-field-row .popup-field {
  flex: 1;
}

.popup-input,
.popup-select {
  width: 100%;
  padding: 8.5px var(--space-3);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.popup-input:focus-visible,
.popup-select:focus-visible {
  outline: none;
  border-color: var(--rust-600);
  background: var(--surface);
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.tenant-combobox {
  position: relative;
}

.tenant-combobox__list {
  position: absolute;
  top: calc(100% + 3.5px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 187px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.tenant-combobox__option {
  padding: var(--space-2) var(--space-3);
  font-size: 11.5px;
  color: var(--text-primary);
  cursor: pointer;
}

.tenant-combobox__option:hover {
  background: var(--surface-alt);
}

.tenant-combobox__empty {
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
}

/* Checklist */

.checklist {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checklist-item {
  padding: 5px 0;
}

.checklist-item__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.checklist-item input[type="checkbox"] {
  margin-top: 2.5px;
  width: 13px;
  height: 13px;
  accent-color: var(--rust-600);
  flex-shrink: 0;
}

.checklist-item__text {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.4;
}

.checklist-item__num {
  flex-shrink: 0;
  min-width: 15px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

.checklist-item.is-done .checklist-item__text {
  color: var(--text-muted);
}

.checklist-item__note {
  margin: 2.5px 0 0 19.5px;
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
}

.checklist-item__note-input {
  display: block;
  width: calc(100% - 19.5px);
  margin: 3.5px 0 0 19.5px;
  padding: 4px 7px;
  font-family: inherit;
  font-size: 10px;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.checklist-item__note-input:focus-visible {
  outline: none;
  border-color: var(--rust-600);
  background: var(--surface);
}

.checklist-item--editable {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.checklist-item--editable:last-child {
  border-bottom: none;
}

.checklist-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 18.5px;
  height: 18.5px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.checklist-remove:hover {
  background: var(--rust-100);
  color: var(--rust-700);
}

.checklist-add-row {
  display: flex;
  gap: var(--space-2);
}

.checklist-add-row .popup-input {
  flex: 1;
}

.checklist-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.checklist-add-btn:hover {
  border-color: var(--rust-500);
  color: var(--rust-700);
}

.checklist--readonly {
  margin-bottom: 0;
}

.checklist-item--readonly {
  padding: 2.5px 0;
}

/* Maintenance cards */

.maintenance-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.maintenance-card + .maintenance-card {
  margin-top: var(--space-3);
}

.maintenance-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.maintenance-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.maintenance-card__meta {
  margin-top: 1.5px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--text-muted);
}

.maintenance-card__checklist {
  margin-top: var(--space-3);
}

.maintenance-card__general-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.maintenance-card__general-note .history-detail-text {
  margin: 0;
}

.maintenance-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* History — expandable maintenance entries */

.history-item--expandable {
  flex-direction: column;
  cursor: pointer;
}

.history-item--expandable .history-item__row {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

.history-item--expandable .history-item__chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.history-item--expandable.is-expanded .history-item__chevron {
  transform: rotate(90deg);
}

.history-item__details {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  cursor: default;
}

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

.inspection-failitems-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.inspection-failitems-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.inspection-failitems-chevron .icon {
  width: 12px;
  height: 12px;
}

.inspection-failitems-toggle.is-expanded .inspection-failitems-chevron {
  transform: rotate(180deg);
}

.inspection-failitems-action {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--rust-700);
  font-size: 10px;
  font-weight: 700;
}

.inspection-failitems-toggle:hover .inspection-failitems-action {
  border-color: var(--rust-500);
}

.popup-body .is-disabled {
  opacity: 0.5;
}

.inspection-failitems-details {
  margin-top: var(--space-3);
}

.inspection-failitems-details[hidden] {
  display: none;
}

.reopen-btn {
  margin-top: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 8.5px;
  border-radius: var(--radius-sm);
}

.reopen-btn:hover {
  border-color: var(--rust-500);
  color: var(--rust-700);
  background: var(--rust-100);
}

/* Reports */

.report-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.maintenance-card__notes {
  margin: var(--space-3) 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.history-detail-text {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.history-detail-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.report-list__empty {
  padding: var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.assistance-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--lavender-700);
  font-weight: 600;
}

.assistance-badge .icon {
  color: var(--lavender-700);
}

.maintenance-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.resolve-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 8.5px;
  border-radius: var(--radius-sm);
}

.resolve-btn:hover {
  border-color: var(--sage-700);
  color: var(--sage-700);
  background: var(--sage-100);
}

/* History */

.history-panel {
  margin-top: var(--space-5);
}

.inspections-panel {
  margin-top: var(--space-5);
}

.maintenance-card--critical {
  border-color: var(--rust-500);
  background: var(--rust-100);
}

.inspection-attempt + .inspection-attempt {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.history-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.history-item__icon {
  width: 25.5px;
  height: 25.5px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.history-item__icon .icon {
  width: 13px;
  height: 13px;
}

.history-item__icon--note {
  background: var(--lavender-100);
  color: var(--lavender-700);
}

.history-item__icon--report {
  background: var(--tan-100);
  color: var(--tan-700);
}

.history-item__icon--maintenance {
  background: var(--sage-100);
  color: var(--sage-700);
}

.history-item__body {
  flex: 1;
  min-width: 0;
}

.history-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.history-item__title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.history-item__date {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-item__text {
  margin-top: 1.5px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.history-list__empty {
  padding: var(--space-3) var(--space-5) var(--space-5);
  font-size: 11px;
  color: var(--text-muted);
}

.maintenance-note--empty {
  padding: var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.notes-textarea {
  width: 100%;
  min-height: 119px;
  resize: vertical;
  padding: var(--space-3);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.notes-textarea:focus-visible {
  outline: none;
  border-color: var(--rust-600);
  background: var(--surface);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .content-grid,
  .dashboard-cols {
    grid-template-columns: 1fr;
  }
}

.topbar-menu-btn {
  display: none;
}

.sidebar-close-btn {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .topbar-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
  }
  .topbar-menu-btn:hover {
    background: var(--surface-alt);
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 211px;
    z-index: 300;
    align-items: stretch;
    padding: var(--space-5) var(--space-4);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar-brand {
    justify-content: space-between;
    padding: var(--space-4) var(--space-2) var(--space-8);
  }
  .sidebar-brand__mark {
    display: none;
  }
  .sidebar-brand__logo {
    display: block;
    width: 143px;
    height: auto;
  }
  .sidebar-nav {
    align-items: stretch;
  }
  .sidebar-nav a {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 8.5px var(--space-3);
    border-radius: var(--radius-sm);
  }
  .sidebar-nav a.is-active {
    background: rgba(226, 191, 149, 0.14);
    color: var(--tan-500);
  }
  .sidebar-nav__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .sidebar-foot {
    align-items: stretch;
  }
  .sidebar-foot-btn {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 8.5px var(--space-3);
    text-align: left;
  }
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-on-navy);
    cursor: pointer;
  }
  .sidebar-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(32, 29, 31, 0.5);
    z-index: 290;
  }
  .dashboard-content {
    padding: var(--space-5);
  }
  .topbar {
    padding: 5px var(--space-5);
  }
}

@media (max-width: 520px) {
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .login-card {
    padding: var(--space-8) var(--space-5);
  }
}

/* ==========================================================================
   Consistency fixes (Sep 2026)
   Keeps spacing, type sizes and element styles the same across every page.
   ========================================================================== */

/* Same gap under every page title (was 0–24px depending on the page). */
.dashboard-greeting {
  margin-bottom: var(--space-6);
}
.dashboard-greeting + .stat-grid {
  margin-top: 0;
}

/* Filter tiles (Inspections, Payments) no longer touch the card below. */
.stat-grid + .panel {
  margin-top: var(--space-5);
}

/* Page title focus: no outline box around headings after switching pages. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* One size for buttons inside the app (was 44px/14.5px on Settings, 40px/13.5px elsewhere). */
.dashboard-content .btn {
  height: 34px;
  padding: 0 var(--space-5);
  font-size: 11.5px;
}

/* Settings cards: same inner padding as every other card. */
.settings-role-card {
  padding-bottom: var(--space-5);
}
.settings-role-card > :not(.panel-head) {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}
.settings-role-card > .popup-field:first-of-type {
  margin-top: 0;
}
.settings-role-card .checkbox-field {
  font-size: 11.5px;
}

/* Housing Assistance: addresses, phones and emails use body text size (was 16px). */
.agency-group__list {
  font-size: 11.5px;
  color: var(--text-primary);
}

/* Property / agency cards: same padding and title size as other cards. */
.property-card {
  padding: var(--space-5);
}
.property-card__name {
  font-size: 13px;
}

/* Cards placed inside a card get the card's inner padding (Upcoming Move-ins). */
#move-ins-available {
  padding: 0 var(--space-5) var(--space-5);
}

/* Tables inside property cards line up with the card title. */
.property-card .table-wrap {
  padding: 0;
  margin-top: var(--space-4);
}

/* Secondary lines sit under their title instead of running into it
   ("Kitchen sink leakRiverbend Apartments", "Unit 2ARiverbend Apartments"). */
.activity-item__time {
  display: block;
}


/* Phones: dashboard columns no longer push the page wider than the screen. */
.dashboard-cols > * {
  min-width: 0;
}

/* Page titles without descriptions: keep the title and its button on one line. */
.page-title-row {
  align-items: center;
}

/* Phones: summary cards sit in a 2 × 2 grid of square boxes instead of
   four full-width cards stacked down the screen. */
@media (max-width: 520px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .stat-card--compact {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
  }
  .stat-card--compact .stat-card__top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .stat-card--compact .stat-card__label {
    font-size: 10.5px;
    line-height: 1.3;
  }
  .stat-card--compact .stat-card__value {
    margin-top: auto;
    font-size: 18.5px;
  }
  .stat-card--compact .stat-card__sub {
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Filter tiles on Inspections and Payments: two per row as well. */
  .stat-card--line {
    padding: var(--space-3) var(--space-4);
  }
}

/* Dashboard summary: 3 cards on the top row, 2 on the row below.
   Each row shares its width among the cards that are visible, so a card
   hidden for a staff member doesn't leave a gap. */
.stat-grid--row,
.stat-grid.stat-grid--row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.stat-grid--bottom {
  margin-top: var(--space-4);
}
.stat-grid--bottom:not(:has(> .stat-card:not([style*="none"]))) {
  display: none;
}

@media (max-width: 520px) {
  .stat-grid.stat-grid--row {
    grid-template-columns: none;
    gap: var(--space-3);
  }
  .stat-grid--bottom {
    margin-top: var(--space-3);
  }
  /* Top row: three near-square boxes. */
  
  
  
  
  
  /* Bottom row: two wider boxes, about the same height as the top row. */
  .stat-grid--bottom .stat-card--compact {
    aspect-ratio: 3 / 2;
  }
}

/* Compact summary cards (Sep 2026): shorter boxes on every screen size. */
.stat-grid--row .stat-card--compact {
  padding: var(--space-3) var(--space-4);
}
.stat-grid--row .stat-card__icon {
  width: 22px;
  height: 22px;
}
.stat-grid--row .stat-card__icon .icon {
  width: 12px;
  height: 12px;
}
.stat-grid--row .stat-card--compact .stat-card__value {
  margin-top: var(--space-1);
}
.stat-grid--row .stat-card__sub {
  margin-top: 1.5px;
}

@media (max-width: 520px) {
  /* No more squares: label and icon share one line, then the number,
     then a single short note. */
  .stat-grid--row .stat-card--compact,
  .stat-grid--bottom .stat-card--compact {
    aspect-ratio: auto;
    display: block;
    padding: var(--space-2) var(--space-3);
  }
  .stat-grid--row .stat-card--compact .stat-card__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
  }
  .stat-grid--row .stat-card--compact .stat-card__label {
    font-size: 10px;
    line-height: 1.25;
    min-width: 0;
  }
  .stat-grid--row .stat-card__icon {
    width: 18.5px;
    height: 18.5px;
    flex-shrink: 0;
  }
  .stat-grid--row .stat-card__icon .icon {
    width: 10px;
    height: 10px;
  }
  .stat-grid--row .stat-card--compact .stat-card__value {
    margin-top: 1.5px;
    font-size: 15.5px;
  }
  .stat-grid--row .stat-card--compact .stat-card__sub {
    font-size: 9.5px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stat-grid.stat-grid--row {
    gap: var(--space-2);
  }
  .stat-grid--bottom {
    margin-top: var(--space-2);
  }
}

/* Single-column dashboard (tablet & phone): My tasks sits right under
   Main tasks instead of after Today's schedule. */
@media (max-width: 1080px) {
  .dashboard-cols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }
  .dashboard-col {
    display: contents;
  }
  .dashboard-cols .panel {
    margin-top: 0;
    min-width: 0;
  }
  .dashboard-cols [data-dash-widget="main-tasks"] { order: 1; }
  .dashboard-cols [data-dash-panel="my-tasks"] { order: 2; }
  .dashboard-cols [data-dash-panel="schedule"] { order: 3; }
  .dashboard-cols [data-dash-panel="activity"] { order: 4; }
}

/* Dashboard summary: Occupied units, Moving in and Moving out share one card,
   side by side with thin dividers — just label, icon and number. */
.summary-card {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.summary-card + .stat-grid--bottom {
  margin-top: var(--space-4);
}
.summary-card__item {
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}
.summary-card__item + .summary-card__item {
  border-left: 1px solid var(--border);
}
.summary-card .stat-card__icon {
  width: 22px;
  height: 22px;
}
.summary-card .stat-card__icon .icon {
  width: 12px;
  height: 12px;
}
.summary-card .stat-card__value {
  margin-top: var(--space-1);
  font-size: 16px;
}
@media (max-width: 520px) {
  .summary-card {
    margin-top: var(--space-4);
  }
  .summary-card + .stat-grid--bottom {
    margin-top: var(--space-2);
  }
  .summary-card__item {
    padding: var(--space-2) var(--space-3);
  }
  .summary-card .stat-card__top {
    gap: var(--space-1);
  }
  .summary-card .stat-card__label {
    font-size: 10px;
    line-height: 1.25;
    min-width: 0;
  }
  .summary-card .stat-card__icon {
    width: 18.5px;
    height: 18.5px;
    flex-shrink: 0;
  }
  .summary-card .stat-card__icon .icon {
    width: 10px;
    height: 10px;
  }
  .summary-card .stat-card__value {
    margin-top: 1.5px;
    font-size: 15.5px;
  }
}

/* Main tasks / My tasks: long entries wrap onto the next line inside the
   card instead of running past the edge of the screen. */
.task-item {
  min-width: 0;
}
.task-item__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Recent activity: long task text wraps inside the card. */
.activity-item__body {
  flex: 1;
  min-width: 0;
}
.activity-item__text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tenants page: search card above the tenant list (all screen sizes). */
.tenant-search-card {
  position: relative;
  margin: var(--space-5) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
}
.tenant-search-card .icon {
  position: absolute;
  left: calc(var(--space-3) + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 13.5px;
  height: 13.5px;
  color: var(--text-muted);
  pointer-events: none;
}
.tenant-search-card input {
  width: 100%;
  height: 35.5px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  padding: 0 var(--space-4) 0 32.5px;
  font-size: 16px; /* 16px stops iPhones zooming in when you tap the box */
  color: var(--text-primary);
}
.tenant-search-card input::placeholder {
  color: var(--text-muted);
}
.tenant-search-card input:focus-visible {
  outline: none;
  border-color: var(--rust-600);
  background: var(--surface);
}
.tenant-search-empty {
  padding: var(--space-4) var(--space-3);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Tasks: the box checks, the words edit. */
.task-item {
  cursor: default;
}
.task-checkbox {
  padding: 0;
  margin-top: 1.5px;
  cursor: pointer;
  position: relative;
}
/* Bigger invisible tap area around the small box for fingers. */
.task-checkbox::after {
  content: "";
  position: absolute;
  inset: -8.5px;
}
.task-item__text {
  cursor: text;
  border-radius: 3.5px;
}
.task-item__text:hover {
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 2.5px;
}
.task-item__editor {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow: hidden;
  font: inherit;
  font-size: 16px; /* no iPhone zoom-in while typing */
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--rust-600);
  border-radius: var(--radius-sm);
  padding: 1.5px var(--space-2);
  margin: -2.5px 0;
  outline: none;
}
.task-item.is-editing {
  background: var(--surface-alt);
}

/* Checked tasks are clearly greyed out. */
.task-item.is-done .task-checkbox {
  background: var(--text-muted);
  border-color: var(--text-muted);
}
/* Greyed out only — no strike-through, so it stays easy to read. */
.task-item.is-done .task-item__text {
  color: var(--text-muted);
  text-decoration: none;
}
.task-item.is-done .task-item__text:hover {
  text-decoration: underline dotted var(--border-strong);
}
.task-item.is-done.is-editing {
  opacity: 1;
}

/* Delete-task confirmation: shows which task is about to go. */
.task-delete-quote {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3);
  background: var(--surface-alt);
  border-left: 2.5px solid var(--rust-500);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* =====================================================================
   Themes
   The default (SharkWorkspace) uses the colours at the top of this file.
   Each extra theme overrides them on html[data-theme="..."].
   ===================================================================== */

/* RB Management — slate navy + sky blue, taken from the RB logo
   (#3a5766 navy, #8cbad9 sky). */
html[data-theme="rb"] {
  --sidebar-bg: #2c4250;

  /* Main accent (buttons, active tabs, links, checked boxes). */
  --rust-700: #2c4654;
  --rust-600: #3a5766;
  --rust-500: #5a8199;
  --rust-100: #e4eef5;

  /* Secondary accent. */
  --lavender-700: #3f6f8f;
  --lavender-500: #8cbad9;
  --lavender-100: #e7f1f8;

  /* Warm highlight (today, move-ins) — a muted gold that sits well on navy. */
  --tan-700: #8a6420;
  --tan-500: #d9bf8a;
  --tan-100: #f7f0e1;

  --sage-700: #3f6b52;
  --sage-500: #9fc0ab;
  --sage-100: #e5f0e9;

  --bg-app: #f1f4f7;
  --surface: #ffffff;
  --surface-alt: #f6f8fa;
  --border: #dce4ea;
  --border-strong: #c6d2db;

  --text-primary: #17232c;
  --text-secondary: #4f5e69;
  --text-muted: #85929c;
  --text-on-navy: #f2f7fb;
  --text-on-navy-muted: #a7bccb;

  /* Keep problems red so they still stand out from the blue accent. */
  --danger-bg: #f9e4e2;
  --danger-text: #a3392f;

  --shadow-brand: 0 7px 17px rgba(44, 70, 84, 0.3);
}

html[data-theme="rb"] .btn--primary {
  background: linear-gradient(135deg, #5a8199, #2c4654);
}

html[data-theme="rb"] .unit-tile--conflict,
html[data-theme="rb"] .property-card__warning {
  background: var(--danger-bg);
  border-color: #d98a82;
  color: var(--danger-text);
}
html[data-theme="rb"] #view-workspaces {
  background:
    radial-gradient(765px 425px at 84% 6%, rgba(140, 186, 217, 0.3), transparent 60%),
    radial-gradient(646px 442px at 6% 92%, rgba(58, 87, 102, 0.14), transparent 60%),
    var(--bg-app);
}

/* Theme picker (Settings → Theme) */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
  gap: var(--space-4);
}
.theme-card {
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.theme-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.theme-card.is-active {
  border-color: var(--rust-600);
  box-shadow: inset 0 0 0 1px var(--rust-600);
}
.theme-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.theme-card__logo {
  width: 37.5px;
  height: 37.5px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3.5px;
}
.theme-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.theme-card__desc {
  margin-top: 1.5px;
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.theme-card__swatches {
  display: flex;
  height: 22px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.theme-card__swatches span {
  flex: 1;
}
.theme-card__foot {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rust-700);
}
.settings-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tab {
  white-space: nowrap;
}

/* Small helper line under a form row (e.g. rent split check). */
.popup-hint {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

.popup-hint[hidden],
.popup-field-row[hidden] {
  display: none;
}

/* Money boxes: a "$" sits inside the left edge of every amount field. */
.money-input {
  position: relative;
}
.money-input__sign {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  pointer-events: none;
}
.money-input > .popup-input {
  padding-left: 22px;
}

/* Main tasks: "Completed by …" under a checked task. */
.task-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.task-item__by {
  margin-top: 1px;
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* Red trash-bin button (sits before "Update"). */
.delete-icon-btn {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fbeceb;
  border: 1px solid #e8b4ae;
  border-radius: var(--radius-sm);
  color: #c0392b;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.delete-icon-btn:hover {
  background: #f6d9d6;
  border-color: #c0392b;
}
.delete-icon-btn .icon {
  width: 13.5px;
  height: 13.5px;
}
.maintenance-card__foot {
  align-items: center;
}
.btn--danger {
  background: #c0392b;
  color: #fff;
  box-shadow: 0 5px 13.5px rgba(192, 57, 43, 0.25);
}
.btn--danger:hover {
  filter: brightness(1.06);
}
.btn--danger .icon {
  width: 13.5px;
  height: 13.5px;
}
.popup-body .property-card__warning,
#popup-body .property-card__warning {
  margin-bottom: var(--space-4);
}

/* ---------- Plus-sign "Add" buttons ---------- */
.add-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.add-icon-btn .icon {
  width: 15.5px;
  height: 15.5px;
  stroke-width: 2.25;
}
/* Next to an input (tasks, checklists, units): square, same height as the box. */
.checklist-add-btn.add-icon-btn {
  width: 35.5px;
  min-height: 34px;
  padding: 0;
  color: var(--rust-700);
}
/* In a card header (Add tenant, Add inspection…): small outlined circle. */
.add-icon-btn--round {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--rust-700);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.add-icon-btn--round:hover {
  background: var(--rust-100);
  border-color: var(--rust-500);
}
/* Page-title buttons (Add property, Add payment issue…): filled circle. */
.add-icon-btn--primary {
  width: 35.5px;
  height: 35.5px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  box-shadow: var(--shadow-brand);
}
.add-icon-btn--primary:hover {
  filter: brightness(1.06);
}
.add-icon-btn--primary .icon {
  width: 17px;
  height: 17px;
}
html[data-theme="rb"] .add-icon-btn--primary {
  background: linear-gradient(135deg, #5a8199, #2c4654);
}
.page-title-row .add-icon-btn--primary {
  height: 35.5px;
  padding: 0;
}

/* ---------- Settings: users as ID cards ---------- */
.user-id-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(221px, 1fr));
  gap: var(--space-4);
}
.user-id-card {
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.user-id-card:hover {
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-md);
  border-color: var(--rust-500);
}
.user-id-card__band {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--sidebar-bg);
  color: var(--text-on-navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.user-id-card__band-logo {
  height: 15.5px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.user-id-card__body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}
.user-id-card__avatar {
  width: 47.5px;
  height: 47.5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.user-id-card__info {
  min-width: 0;
}
.user-id-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.user-id-card__username {
  margin-top: 1.5px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.user-id-card__role {
  margin-top: 3.5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rust-700);
}
.user-id-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px dashed var(--border-strong);
  background: var(--surface-alt);
  font-size: 10px;
  color: var(--text-muted);
}
.user-id-card--pending .user-id-card__avatar {
  background: var(--border-strong);
  color: var(--text-secondary);
}
.user-id-card--add {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 144.5px;
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  box-shadow: none;
  color: var(--text-secondary);
}
.user-id-card--add:hover {
  background: var(--surface);
}
.user-id-card__add-icon {
  width: 37.5px;
  height: 37.5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  box-shadow: var(--shadow-brand);
}
.user-id-card__add-icon .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.25;
}
.user-id-card__add-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}

/* User pop-ups */
.user-popup__section {
  margin: var(--space-5) 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.settings-role-card__groups--popup {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
}
.popup-actions--split {
  justify-content: space-between;
  align-items: center;
}
.popup .settings-new-credentials {
  margin-bottom: 0;
}

/* Inspections: five status tabs in one row (Critical · Failed · No results ·
   To schedule · Scheduled). Tapping one filters the list below. */
.inspection-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-5);
}
.inspection-tab {
  font: inherit;
  color: var(--text-secondary);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  min-width: 0;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.inspection-tab:hover {
  border-color: var(--border-strong);
}
.inspection-tab__label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}
.inspection-tab__value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.inspection-tab.is-active {
  background: var(--rust-600);
  border-color: var(--rust-600);
  color: var(--text-on-navy);
  box-shadow: var(--shadow-brand);
}
.inspection-tab.is-active .inspection-tab__value {
  color: var(--text-on-navy);
}
/* Critical keeps a red look so it always stands out. */
.inspection-tab--critical {
  border-color: #e3a79f;
  background: #fbeceb;
  color: #a3392f;
}
.inspection-tab--critical .inspection-tab__value {
  color: #a3392f;
}
.inspection-tab--critical.is-active {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
  box-shadow: 0 5px 13.5px rgba(192, 57, 43, 0.25);
}
.inspection-tab--critical.is-active .inspection-tab__value {
  color: #fff;
}
@media (max-width: 520px) {
  .inspection-tabs {
    gap: 5px;
    margin: var(--space-4) 0;
  }
  .inspection-tab {
    padding: var(--space-2) 3.5px;
    border-radius: var(--radius-sm);
  }
  .inspection-tab__label {
    font-size: 9px;
  }
  .inspection-tab__value {
    font-size: 14.5px;
  }
}

/* Payments: five status cards in one row, styled like the Inspections tabs
   (CSS only — no HTML changes). */
.stat-grid.payments-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-5);
}
.payments-stat-grid .stat-card--line {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  min-width: 0;
  box-shadow: none;
}
.payments-stat-grid .stat-card--line .stat-card__label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
}
.payments-stat-grid .stat-card--line .stat-card__value {
  font-size: 17px;
  color: var(--text-primary);
}
.payments-stat-grid .stat-card--button.is-active {
  background: var(--rust-600);
  border-color: var(--rust-600);
  box-shadow: var(--shadow-brand);
}
.payments-stat-grid .stat-card--button.is-active .stat-card__label,
.payments-stat-grid .stat-card--button.is-active .stat-card__value {
  color: var(--text-on-navy);
}
@media (max-width: 520px) {
  .stat-grid.payments-stat-grid {
    gap: 5px;
    margin: var(--space-4) 0;
  }
  .payments-stat-grid .stat-card--line {
    padding: var(--space-2) 3.5px;
    border-radius: var(--radius-sm);
  }
  .payments-stat-grid .stat-card--line .stat-card__label {
    font-size: 9px;
  }
  .payments-stat-grid .stat-card--line .stat-card__value {
    font-size: 14.5px;
  }
}

/* Payments panel: the selected tab's name is the heading. */
.payments-panel .panel-head h2:empty {
  display: none;
}











/* Same row heights on both sides so rows line up. */


















/* ===== Payment plans & stipulations: promise tracker cards =====
   One block for the whole tracker (it used to be spread over several
   "v2…v5" blocks that overrode each other).
   Card header layout:   name ........ status  ˅
                         address ..... missed
                         ▬▬▬▬▬▬▬▬▬▬▬ $x of $y paid                      */
.promise-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.promise-card + .promise-card {
  margin-top: var(--space-3);
}
.promise-card--breached .promise-card__summary,
.promise-card--behind .promise-card__summary {
  box-shadow: inset 2.5px 0 0 #c0392b;
}

.promise-card__summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "name status chev"
    "addr why chev"
    "prog prog prog";
  column-gap: var(--space-3);
  row-gap: 2.5px;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.promise-card__summary::-webkit-details-marker {
  display: none;
}
.promise-card[open] .promise-card__summary {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.promise-card__name {
  grid-area: name;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.promise-card__status {
  grid-area: status;
  justify-self: end;
}
.promise-card__chev {
  grid-area: chev;
  align-self: start;
  margin-top: 1.5px;
  display: flex;
  color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-out);
}
.promise-card__chev .icon {
  width: 13.5px;
  height: 13.5px;
}
.promise-card[open] .promise-card__chev {
  transform: rotate(180deg);
}
.promise-card__addr {
  grid-area: addr;
  font-size: 10.5px;
  color: var(--text-muted);
}
.promise-card__why {
  grid-area: why;
  justify-self: end;
  text-align: right;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tan-700);
}
.promise-card__why--breach {
  color: #c0392b;
}
.promise-card__why:empty {
  display: none;
}
.promise-card__progress {
  grid-area: prog;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: 5px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.promise-card__progress > span:last-child {
  flex-shrink: 0;
}
.promise-card__bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}
.promise-card__bar span {
  display: block;
  height: 100%;
  background: var(--sage-700);
  border-radius: inherit;
}
.promise-card__body {
  padding: var(--space-4);
}

/* Tenant portion / rent · Total balance · Remaining balance */
.promise-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.promise-terms > div {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  min-width: 0;
}
.promise-terms span {
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.promise-terms strong {
  font-size: 12px;
  color: var(--text-primary);
}

/* Installment rows. Each field carries its own label, so there's no
   heading row. Desktop:  due date      | amount due      | status | ×
                          date received | amount received | status | ×
                          "Due this date …" across the whole row          */
.promise-table {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.promise-table--scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.promise-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 161.5px 24px;
  grid-template-areas:
    "due promised status end"
    "paiddate paid status end"
    "diff diff diff diff";
  gap: var(--space-2);
  row-gap: 5px;
  align-items: center;
  padding: 5px var(--space-3);
  border-bottom: 1px solid var(--border);
}
.promise-row:last-child {
  border-bottom: none;
}
.promise-row--head {
  display: none;
}
.promise-row--paid {
  background: rgba(76, 99, 69, 0.06);
}
.promise-row--credit {
  background: rgba(76, 99, 69, 0.08);
}
.promise-row--partial,
.promise-row--missed {
  background: #fdf1f0;
}
.promise-row--none {
  opacity: 0.6;
}
.promise-cell {
  min-width: 0;
}
.promise-cell--due { grid-area: due; }
.promise-cell--paiddate { grid-area: paiddate; }
.promise-cell--promised { grid-area: promised; }
.promise-cell--paid { grid-area: paid; }
.promise-cell--status { grid-area: status; align-self: center; }
.promise-cell--diff { grid-area: diff; align-self: center; }
.promise-cell--end { grid-area: end; align-self: center; }
.promise-cell[data-label] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.promise-cell[data-label]::before {
  content: attr(data-label);
  flex: 0 0 88.5px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
}
.promise-cell[data-label] > .popup-input,
.promise-cell[data-label] > .money-input {
  flex: 1;
  min-width: 0;
}
.promise-cell--status .badge {
  white-space: normal;
  text-align: left;
}
.promise-cell--diff {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.promise-cell--end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3.5px;
}
.promise-input.popup-input {
  height: 29px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 11.5px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.promise-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}
.money-input > .promise-input.popup-input {
  padding-left: 18.5px;
}
.promise-cell .money-input {
  min-width: 0;
  max-width: 100%;
}
.promise-cell .money-input__sign {
  left: 7.5px;
  font-size: 11px;
}
.promise-remove {
  width: 22px;
  height: 22px;
}

/* "Due this date $600 — $300 portion + $300 installment + $x prior short" */
.promise-duenow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3.5px 7px;
  font-size: 10px;
}
.promise-duenow strong {
  color: var(--text-primary);
  font-size: 10.5px;
}
.promise-duenow span {
  color: var(--text-muted);
}
.promise-duenow--short strong {
  color: #c0392b;
}
.promise-duenow--credit strong {
  color: var(--sage-700);
}

.promise-empty {
  padding: var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
}
.promise-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.promise-add .add-icon-btn {
  width: 29px;
  min-height: 29px;
}
.promise-note {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.45;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.promise-note--warn {
  background: var(--tan-100);
  border-color: var(--tan-500);
  color: var(--tan-700);
  font-weight: 500;
}
.promise-note--good {
  background: var(--success-bg);
  border-color: var(--sage-500);
  color: var(--success-text);
  font-weight: 600;
}
.promise-resolve {
  height: 29px;
  font-size: 11px;
  padding: 0 var(--space-4);
}
.promise-form[hidden] {
  display: none;
}

/* Phone: dates | amounts side by side, then status | ×, then "Due this date". */
@media (max-width: 640px) {
  .promise-card__why {
    font-size: 10px;
  }
  .promise-terms {
    gap: 3.5px;
  }
  .promise-terms > div {
    padding: 4px 5px;
  }
  .promise-terms span {
    font-size: 8px;
    line-height: 1.15;
  }
  .promise-terms strong {
    font-size: 10.5px;
  }
  .promise-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "due promised"
      "paiddate paid"
      "status end"
      "diff diff";
    padding: var(--space-3);
  }
  .promise-cell[data-label] {
    display: block;
  }
  .promise-cell[data-label]::before {
    display: block;
    font-size: 9px;
    margin-bottom: 1.5px;
  }
  .promise-cell--diff {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3.5px;
  }
  .promise-cell--end {
    justify-self: end;
  }
  .promise-input.popup-input {
    font-size: 16px; /* no iPhone zoom-in while typing */
    padding-left: 5px;
    padding-right: 3px;
  }
  .promise-input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 0;
    padding: 0;
    width: 13px;
  }
  .money-input > .promise-input.popup-input {
    padding-left: 17px;
  }
}

.badge--muted {
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.detail-plan-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.detail-plan-badges:empty {
  display: none;
}

/* Tenant info: hidden tags stay hidden, and tags wrap onto the next line on phones. */
.badge[hidden] {
  display: none;
}
.tenant-detail-name-row {
  flex-wrap: wrap;
  row-gap: 5px;
}

/* Tenant history: small red trash bin on each entry. */
.history-delete-btn {
  width: 25.5px;
  height: 25.5px;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}
.history-delete-btn .icon {
  width: 12px;
  height: 12px;
}
.history-item__body {
  min-width: 0;
}





















/* Compact Unit / Tenant columns; phones show "A. Lastname". */




@media (max-width: 640px) {
  /* Long last names wrap instead of being cut off. */


}



/* Months scroll on their own; a thin scrollbar shows only under the months. */



/* Confirmation pop-ups: question, then the reminder line underneath — no overlap. */
.popup-placeholder {
  line-height: 1.5;
}
.popup-placeholder + .popup-hint {
  margin: var(--space-2) 0 0;
  font-size: 10.5px;
  line-height: 1.45;
}
.popup-placeholder + .popup-hint + .popup-actions {
  margin-top: var(--space-5);
}


/* Locked logins: red "Locked" tag + Unlock button on the ID card. */
.user-id-card {
  cursor: pointer;
}
.user-id-card--locked {
  border-color: #e3a79f;
}
.user-id-card__lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.user-unlock-btn {
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #c0392b;
  border: none;
  border-radius: var(--radius-full);
  padding: 3.5px 10px;
  cursor: pointer;
}
.user-unlock-btn:hover {
  filter: brightness(1.08);
}
.user-unlock-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.user-lock-note {
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.user-lock-note .user-unlock-btn {
  margin-left: auto;
}
.user-lock-note {
  flex-wrap: nowrap;
  align-items: center;
}
.user-lock-note > span {
  flex: 1;
  min-width: 0;
}
.user-lock-note .user-unlock-btn {
  flex-shrink: 0;
  margin-left: var(--space-2);
}

/* ===== Sidebar runs the full height of the screen (desktop & phone) =====
   100dvh = the visible screen height on phones (ignores the browser's
   collapsing address bar); 100vh is the fallback for older browsers. */
.view--active,
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 861px) {
  .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 860px) {
  .sidebar {
    height: 100vh;
    height: 100dvh;
    bottom: auto;
    overflow-y: auto;
  }
  .sidebar-backdrop {
    height: 100vh;
    height: 100dvh;
  }
}

/* ===== Bell: "Needs attention" list ===== */
.notif-panel {
  min-width: 246.5px;
  max-width: min(306px, calc(100vw - 27px));
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-item {
  align-items: flex-start;
  line-height: 1.4;
}

.notif-item .icon {
  margin-top: 1.5px;
}

.notif-item--urgent .icon {
  color: var(--danger-text);
}

.notif-empty {
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
}

/* ===== Roles: System admin / Lead / Contributor ===== */
.user-id-card--static {
  cursor: default;
}
.user-id-card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}
.user-id-card__role--owner {
  color: var(--rust-700);
  font-weight: 700;
}
.user-id-card__role--lead {
  color: var(--lavender-700);
  font-weight: 600;
}
.checkbox-field--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.settings-role-card__group--admin {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--border-strong);
  padding-top: var(--space-4);
}
.settings-role-card__group--admin h3 {
  color: var(--rust-700);
}

/* ===== Templates page: tabs, template list, email form ===== */
.tpl-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin: var(--space-5) 0 var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tpl-tabs::-webkit-scrollbar {
  display: none;
}
.tpl-tab {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.tpl-tab:hover {
  color: var(--text-primary);
}
.tpl-tab.is-active {
  color: var(--rust-700);
  border-bottom-color: var(--rust-600);
}
.tpl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
}
.tpl-layout .panel + .panel {
  margin-top: 0;
}
.tpl-list {
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tpl-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.tpl-item:hover {
  border-color: var(--border-strong);
}
.tpl-item > .icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--text-muted);
}
.tpl-item.is-active {
  background: var(--rust-100);
  border-color: var(--rust-500);
}
.tpl-item.is-active > .icon {
  color: var(--rust-700);
}
.tpl-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tpl-item__name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.tpl-item__desc {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.tpl-copy-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.tpl-copy-row .popup-input {
  flex: 1;
  min-width: 0;
}
.tpl-copy-btn.btn {
  height: auto;
  min-height: 34px;
  padding: 0 var(--space-4);
  font-size: 11.5px;
  gap: var(--space-1);
}
.tpl-copy-btn .icon {
  width: 12px;
  height: 12px;
}
.tpl-message {
  min-height: 200px;
  padding: var(--space-3) var(--space-4);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  cursor: text;
}
.tpl-message:focus-visible {
  outline: none;
  border-color: var(--rust-600);
  background: var(--surface);
}
.tpl-message p {
  margin: 0 0 var(--space-4);
}
.tpl-message ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.tpl-message > :last-child {
  margin-bottom: 0;
}
.popup-field[hidden] {
  display: none;
}
.tpl-actions {
  flex-wrap: wrap;
  align-items: center;
}
.tpl-actions .btn {
  height: 34px;
  font-size: 11.5px;
}
@media (max-width: 860px) {
  .tpl-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .tpl-message,
  .tpl-input.popup-input,
  .tpl-input.popup-select {
    font-size: 16px; /* no iPhone zoom-in while typing */
  }
  .tpl-actions .btn {
    flex: 1;
  }
}

/* Payment Options tab: per-property message with a small toolbar */
.tpl-item__desc--warn {
  color: var(--warning-text);
  font-weight: 600;
}
.tpl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.tpl-tool-sep {
  width: 1px;
  height: 18px;
  margin: 0 var(--space-1);
  background: var(--border-strong);
}
.tpl-tool.is-on {
  color: var(--rust-700);
  background: var(--rust-100);
  border-color: var(--rust-500);
}
.tpl-message ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.tpl-tool {
  height: 28px;
  min-width: 32px;
  padding: 0 var(--space-3);
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.tpl-tool:hover {
  color: var(--text-primary);
  border-color: var(--rust-500);
}
.tpl-message--readonly {
  cursor: default;
  background: var(--surface);
}

/* Templates: "+" to add a tab, "Add email", rename / delete tab */
.tpl-tabs {
  align-items: center;
  overflow: visible;
}
.tpl-tabs__list {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tpl-tabs__list::-webkit-scrollbar {
  display: none;
}
.tpl-tab-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-left: var(--space-3);
}
.tpl-tab-edit .icon {
  width: 13px;
  height: 13px;
}
.tpl-tab-edit:disabled {
  opacity: 0.45;
  cursor: default;
}
.tpl-tab-input {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rust-700);
  min-width: 8ch;
  max-width: 100%;
  padding: 5px var(--space-2);
  margin: 2px 0;
  background: var(--surface);
  border: 1px solid var(--rust-600);
  border-radius: var(--radius-sm);
}
.tpl-tab-input:focus-visible {
  outline: none;
}
.tpl-tab-editing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 2px 3px 2px 0;
}
.tpl-tab-editing .tpl-tab-input {
  margin: 0;
}
.tpl-tab-bin {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  background: #fbeceb;
  border: 1px solid #e8b4ae;
  border-radius: var(--radius-sm);
  color: #c0392b;
}
.tpl-tab-bin:hover {
  background: #f6d9d6;
  border-color: #c0392b;
}
.tpl-tab-bin .icon {
  width: 12px;
  height: 12px;
}
.tpl-tab-bin.is-blocked {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 520px) {
  .tpl-tab-input {
    font-size: 16px; /* no iPhone zoom-in while typing */
    max-width: 42vw;
  }
}
.tpl-actions .btn {
  white-space: nowrap;
}
.tpl-add-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rust-700);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.tpl-add-email:hover {
  border-color: var(--rust-500);
  background: var(--rust-100);
}
.tpl-add-email .icon {
  width: 13px;
  height: 13px;
}
.tpl-message[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}
.tpl-editor {
  padding-top: var(--space-5);
}
.tpl-actions .delete-icon-btn {
  height: 34px;
  width: 34px;
}

/* Security deposit: "1.5 × rent = $X  Use this" under the box */
.deposit-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: 10px;
  color: var(--text-muted);
}
.deposit-hint[hidden] {
  display: none;
}
.deposit-hint__use {
  padding: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--rust-700);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* Property card: address, landlord, management, payment method */
.property-card__info {
  flex: 1 1 260px;
  min-width: 0;
}
.property-card__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 2px;
  margin: var(--space-2) 0 0;
  font-size: 11px;
  line-height: 1.45;
}
.property-card__details dt {
  color: var(--text-muted);
  font-weight: 500;
}
.property-card__details dd {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.property-card__details dd.is-missing {
  color: var(--text-muted);
  font-style: italic;
}
.property-payment-input {
  min-height: 64px;
}

/* Unit cards: green check = occupied, red X = vacant */
.unit-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.unit-status .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
.unit-status--occupied {
  color: var(--sage-700);
}
.unit-status--vacant,
.unit-status--conflict {
  color: #c0392b;
}
/* Clickable (vacant) unit cards line up with the others */
.unit-tile--addable {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Templates: titles / headings inside messages */
.tpl-message h2 {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tpl-message h3 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Fill in the blanks */
.tpl-fillbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--info-bg);
  border: 1px solid var(--lavender-500);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--info-text);
}
.tpl-fillbar.is-filled {
  background: var(--success-bg);
  border-color: var(--sage-500);
  color: var(--success-text);
}
.tpl-fillbar__text {
  flex: 1 1 200px;
  font-weight: 500;
}
.tpl-fillbar__btns {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.tpl-fill-btn.btn {
  height: 30px;
  padding: 0 var(--space-6);
  font-size: 11.5px;
}
.tpl-message--filled u {
  text-decoration-color: var(--rust-500);
  text-underline-offset: 2px;
  font-weight: 600;
}
.tpl-blank-missing {
  background: #fff1c2;
  border-radius: 3px;
  padding: 0 2px;
}
.tpl-fill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}
.tpl-fill-hint {
  margin: var(--space-2) 0 0;
}
@media (max-width: 520px) {
  .tpl-fill-grid {
    grid-template-columns: 1fr;
  }
}
.tpl-actions .tpl-print {
  white-space: nowrap;
}

/* Templates: alignment and page breaks inside messages */
.tpl-message .al-center {
  text-align: center;
}
.tpl-message .al-right {
  text-align: right;
}
.tpl-message hr,
.tpl-message hr.page-break {
  border: 0;
  border-top: 1.5px dashed var(--border-strong);
  margin: var(--space-5) 0;
  height: 0;
}

/* Leases tab: just the lease, full width */
.tpl-layout--single {
  grid-template-columns: minmax(0, 1fr);
}
.tpl-layout--single .tpl-list-panel {
  display: none;
}

/* Leases tab: "Saved leases" heading and empty note in the left list */
.tpl-list-label {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tpl-list-empty {
  padding: var(--space-3);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

/* ===== Lease signing (Templates → Leases → a saved lease) ===== */
.tpl-signbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-sm);
}
.tpl-signbar[data-status="sent"] {
  background: var(--info-bg);
  border-color: var(--lavender-500);
  border-left-color: var(--lavender-700);
}
.tpl-signbar[data-status="signed"] {
  background: var(--warning-bg);
  border-color: var(--tan-500);
  border-left-color: var(--tan-700);
}
.tpl-signbar[data-status="completed"] {
  background: var(--success-bg);
  border-color: var(--sage-500);
  border-left-color: var(--sage-700);
}
.tpl-signbar__text {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tpl-signbar__text strong {
  font-size: 12.5px;
  color: var(--text-primary);
}
.tpl-signbar[data-status="sent"] .tpl-signbar__text strong { color: var(--info-text); }
.tpl-signbar[data-status="signed"] .tpl-signbar__text strong { color: var(--warning-text); }
.tpl-signbar[data-status="completed"] .tpl-signbar__text strong { color: var(--success-text); }
.tpl-signbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.tpl-signbar__btns .btn,
.tpl-signbar__btns .resolve-btn {
  min-height: 32px;
  font-size: 11.5px;
  white-space: nowrap;
}
.tpl-signbar__main.btn {
  height: auto;
  padding: 7px var(--space-4);
}
/* Status dot on saved leases in the left list */
.tpl-item[data-sign] .tpl-item__desc::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 0;
  background: var(--text-muted);
}
.tpl-item[data-sign="sent"] .tpl-item__desc::before { background: var(--lavender-700); }
.tpl-item[data-sign="signed"] .tpl-item__desc::before { background: var(--tan-700); }
.tpl-item[data-sign="completed"] .tpl-item__desc::before { background: var(--sage-700); }

/* Send for signing / link pop-ups */
.popup-hint.tpl-sign-hint {
  margin: 6px 0 var(--space-4);
  line-height: 1.45;
}
.tpl-sign-intro {
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}
.tpl-sign-mail {
  resize: vertical;
  line-height: 1.5;
  font-size: 11px;
}
.tpl-rep-agree {
  margin-top: var(--space-2);
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tpl-rep-agree input {
  margin-top: 2px;
  flex: 0 0 auto;
}

/* Type / Draw signature box */
.tpl-sigpad__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  margin-bottom: var(--space-2);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tpl-sigpad__tab {
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.tpl-sigpad__tab.is-on {
  background: var(--surface);
  color: var(--rust-700);
  box-shadow: var(--shadow-sm);
}
.tpl-sigpad__typed {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  overflow: hidden;
  white-space: nowrap;
  font-family: "Segoe Script", "Snell Roundhand", "Apple Chancery", "Brush Script MT", "URW Chancery L", cursive;
  font-size: 28px;
  color: #000000;
  background: linear-gradient(transparent 64px, #444 64px, #444 65px, transparent 65px), var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.tpl-sigpad__draw {
  position: relative;
}
.tpl-sigpad__draw[hidden],
.tpl-sigpad__typed[hidden] {
  display: none;
}
.tpl-sigpad__canvas {
  display: block;
  width: 100%;
  height: 130px;
  touch-action: none;
  background: linear-gradient(transparent 100px, #999 100px, #999 101px, transparent 101px), var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: crosshair;
}
.tpl-sigpad__clear {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 9px;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* Audit record pop-up */
.tpl-audit {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 5px var(--space-3);
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}
.tpl-audit dt {
  color: var(--text-muted);
}
.tpl-audit dd {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.tpl-audit__head {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.tpl-audit__head:first-child {
  margin-top: 0;
}
.tpl-audit__sig {
  display: block;
  max-width: 220px;
  max-height: 60px;
  margin: var(--space-3) 0 0;
  padding: 4px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--text-primary);
}
.tpl-audit__events {
  margin-top: var(--space-3);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.tpl-audit__events summary {
  cursor: pointer;
  font-weight: 600;
}
.tpl-audit__events ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  line-height: 1.5;
}
.tpl-archive-head {
  margin-bottom: var(--space-4);
}
.tpl-archive-head h2 {
  font-size: 14px;
  margin-bottom: var(--space-1);
}
@media (max-width: 520px) {
  .tpl-signbar__btns {
    width: 100%;
  }
  .tpl-signbar__btns .btn,
  .tpl-signbar__btns .resolve-btn {
    flex: 1 1 auto;
  }
  .tpl-sign-mail {
    font-size: 16px;
  }
  .tpl-audit {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .tpl-audit dd {
    margin-bottom: 6px;
  }
}

/* Several signers: rows in Send for signing / Edit signers */
.tpl-signers {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.tpl-signer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: var(--space-2);
  align-items: end;
  padding: var(--space-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tpl-signer .popup-field {
  margin: 0;
}
.tpl-signer__n,
.tpl-signer__name,
.tpl-signer__fixed {
  grid-column: 1 / -1;
}
.tpl-signer__n {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tpl-signer__fixed {
  font-size: 12px;
  font-weight: 600;
  color: var(--success-text);
}
.tpl-signer.is-locked {
  background: var(--success-bg);
  border-color: var(--sage-500);
}
.tpl-signer.is-locked .tpl-signer__n {
  color: var(--success-text);
}
.tpl-signer.is-blocked {
  border-color: var(--danger-text);
}
.tpl-signer.is-blocked .tpl-signer__n span + span {
  color: var(--danger-text);
}
.tpl-signer__x {
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}
.tpl-signer__x:hover {
  color: var(--danger-text);
  border-color: var(--danger-text);
}
.tpl-signer__x[hidden] {
  visibility: hidden;
  display: block;
}
.tpl-addsigner {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rust-700);
}
.tpl-addsigner[hidden] {
  display: none;
}
.tpl-shared {
  margin: var(--space-1) 0 var(--space-3);
  padding: 8px 10px;
  background: var(--warning-bg);
  border: 1px solid var(--tan-500);
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--warning-text);
}
.tpl-shared[hidden] {
  display: none;
}
.tpl-signbar__people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tpl-signbar__people span {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.tpl-signbar__people span.ok {
  color: var(--success-text);
  border-color: var(--sage-500);
  background: var(--success-bg);
}
.tpl-signbar__people span.wait {
  color: var(--warning-text);
  border-color: var(--tan-500);
}
.tpl-signbar__people span.bad {
  color: var(--danger-text);
  border-color: var(--danger-text);
  background: var(--danger-bg);
}
.tpl-item[data-sign="sent"] .tpl-item__desc {
  overflow-wrap: anywhere;
}

/* Delete lease button (bottom of a saved lease) */
.tpl-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 var(--space-4);
  margin-right: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--danger-text);
  background: var(--surface);
  border: 1px solid var(--danger-text);
  border-radius: var(--radius-sm);
}
.tpl-delete-btn:hover {
  background: var(--danger-bg);
}
.tpl-delete-btn .icon {
  width: 13px;
  height: 13px;
}

/* ---------- PDF leases (Templates → Leases) ---------- */
.tpl-pdf-steps { margin-top: var(--space-3); }
.tpl-pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  margin-bottom: var(--space-2);
}
.tpl-pdf-toolbar__who { margin: 0; flex: 0 1 240px; }
.tpl-pdf-types { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tpl-pdf-type {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
}
.tpl-pdf-type:hover { border-color: var(--rust-500); }
.tpl-pdf-type.is-on { background: var(--rust-600); border-color: var(--rust-600); color: var(--text-on-navy); }
.tpl-pdf-hint { flex: 1 1 100%; margin: 0; }
.tpl-pdf-summary { margin: 0 0 var(--space-3); }

.tpl-pdf-info {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.tpl-pdf-info__head { font-size: 12px; margin-bottom: var(--space-2); }
.tpl-pdf-info__fill { margin: 0 0 var(--space-3); max-width: 420px; }
.tpl-pdf-info__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2) var(--space-4); }
.tpl-pdf-info__row { display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-sm); padding: 3px; }
.tpl-pdf-info__row.is-selected { background: var(--warning-bg); }
.tpl-pdf-info__row > input { flex: 1; min-width: 0; }
.tpl-pdf-info__num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--tan-500);
}
.tpl-pdf-info__value { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tpl-pdf-info__label { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }

.tpl-pdf-pages { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.lpdf-page { position: relative; width: 100%; background: #fff; box-shadow: var(--shadow-md); margin: 0 0 var(--space-4); overflow: hidden; }
.lpdf-page:last-child { margin-bottom: 0; }
.lpdf-page__img { display: block; width: 100%; height: 100%; }
.lpdf-page__layer { position: absolute; inset: 0; }
.tpl-pdf-pages.is-editing .lpdf-page__layer { cursor: crosshair; }
.lpdf-page__num { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--text-muted); background: rgba(255, 255, 255, 0.85); padding: 1px 6px; border-radius: 4px; pointer-events: none; }

.lpdf-box {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border: 1.5px solid #5a8199;
  background: rgba(140, 186, 217, 0.28);
  color: #1d3c50;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.lpdf-box__text { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.lpdf-box--staff { border-color: var(--tan-700); background: rgba(226, 191, 149, 0.35); color: #5c3a14; font-weight: 500; }
.lpdf-box--staff.is-empty { border-style: dashed; color: var(--tan-700); font-style: italic; }
.lpdf-box--rep { border-color: var(--sage-700); background: rgba(167, 185, 161, 0.35); color: #2f4229; }
.lpdf-box[data-who="t2"] { border-color: #6b5980; background: rgba(186, 172, 198, 0.35); color: #3e3050; }
.lpdf-box[data-who="t3"] { border-color: #a8654f; background: rgba(241, 225, 216, 0.6); color: #6a3527; }
.lpdf-box[data-who="t4"] { border-color: #3f6b6b; background: rgba(160, 205, 205, 0.35); color: #234545; }
.lpdf-box.is-selected { outline: 2px solid var(--rust-600); outline-offset: 1px; z-index: 2; }
.lpdf-box--ghost { border-style: dashed; background: rgba(140, 186, 217, 0.18); pointer-events: none; }
.tpl-pdf-pages.is-editing .lpdf-box { cursor: move; touch-action: none; }
.lpdf-box__x,
.lpdf-box__resize { display: none; }
.tpl-pdf-pages.is-editing .lpdf-box:hover .lpdf-box__x,
.tpl-pdf-pages.is-editing .lpdf-box.is-selected .lpdf-box__x,
.tpl-pdf-pages.is-editing .lpdf-box.is-selected .lpdf-box__resize,
.tpl-pdf-pages.is-editing .lpdf-box:hover .lpdf-box__resize { display: block; }
.lpdf-box__x {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0 0 0 4px;
  background: var(--danger-text);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}
.lpdf-box__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, transparent 50%, currentColor 50%);
  cursor: nwse-resize;
}
@media (max-width: 640px) {
  .tpl-pdf-pages { padding: var(--space-2); }
  .tpl-pdf-toolbar__who { flex-basis: 100%; }
  .lpdf-box { font-size: 8.5px; }
}
/* Leases tab: "Upload your lease" screen */
.tpl-upload-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
}

/* ---------- Button hover animation ----------
   Every clickable button lifts a little on hover and settles back when
   pressed. Uses the separate "translate" property so it never fights with
   a button's own transform. Off for touch screens (no sticky hover) and for
   people who ask their device for less motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button,
  [role="button"],
  .btn,
  .sidebar-nav a {
    transition:
      translate var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out),
      filter var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      background var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      opacity var(--duration-fast) var(--ease-out);
  }

  button:not(:disabled):not([role="tab"]):not(.settings-tab):hover,
  [role="button"]:hover,
  .btn:not(:disabled):hover,
  .sidebar-nav a:hover {
    translate: 0 -1.5px;
    filter: brightness(1.05);
  }

  button:not(:disabled):not([role="tab"]):not(.settings-tab):active,
  [role="button"]:active,
  .btn:not(:disabled):active,
  .sidebar-nav a:active {
    translate: 0 0;
    filter: brightness(0.97);
  }

  .btn--primary:not(:disabled):hover,
  .add-icon-btn--primary:not(:disabled):hover {
    box-shadow: 0 10px 22px rgba(146, 89, 74, 0.34);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--rust-600) 38%, transparent);
  }

  .btn--outline:not(:disabled):hover,
  .resolve-btn:not(:disabled):hover,
  .btn-ghost:not(:disabled):hover,
  .user-unlock-btn:not(:disabled):hover,
  .tpl-add-email:not(:disabled):hover {
    box-shadow: 0 4px 10px rgba(43, 39, 41, 0.1);
  }
}

/* ---------- Eye-comfort themes ----------
   Soft off-white or dark-gray backgrounds, dark-gray (never pure black) text
   and muted accents, to keep glare and eye strain down. Text on the page
   measures about 11 to 13 out of 21 for contrast. */

/* Sage Calm — soft gray-green */
html[data-theme="sage"] {
  --sidebar-bg: #3a4a44;
  --rust-700: #345a4b;
  --rust-600: #43705f;
  --rust-500: #6a9a88;
  --rust-100: #dcebe2;
  --lavender-700: #4a6a80;
  --lavender-500: #9db4c4;
  --lavender-100: #e3ebf0;
  --tan-700: #7a5a1f;
  --tan-500: #d9c48e;
  --tan-100: #f1e8d3;
  --sage-700: #3b6b53;
  --sage-500: #9fc0ab;
  --sage-100: #dcebe2;
  --bg-app: #edf0ea;
  --surface: #f7f9f5;
  --surface-alt: #f1f4ee;
  --border: #d9dfd5;
  --border-strong: #c4ccc0;
  --text-primary: #27302b;
  --text-secondary: #55625b;
  --text-muted: #6c7871;
  --text-on-navy: #f2f6f3;
  --text-on-navy-muted: #a9b8b0;
  --danger-bg: #f0dcd6;
  --danger-text: #8a3f33;
  --shadow-brand: 0 7px 17px rgba(52, 90, 75, 0.28);
}

/* Dusk — dark gray with soft light text */
html[data-theme="dusk"] {
  color-scheme: dark;
  --sidebar-bg: #14171a;
  --rust-700: #8fc4b2;
  --rust-600: #3f7a68;
  --rust-500: #5a9884;
  --rust-100: #26382f;
  --lavender-700: #9fb7cb;
  --lavender-500: #5f7d96;
  --lavender-100: #263340;
  --tan-700: #e2c37a;
  --tan-500: #8a7340;
  --tan-100: #3d3520;
  --sage-700: #9fd3bd;
  --sage-500: #4f7f6a;
  --sage-100: #26402f;
  --bg-app: #1d2124;
  --surface: #272c30;
  --surface-alt: #2d3338;
  --border: #363d42;
  --border-strong: #4a5359;
  --text-primary: #dde2e5;
  --text-secondary: #b4bec4;
  --text-muted: #8d989f;
  --text-on-navy: #eef4f1;
  --text-on-navy-muted: #9fb0aa;
  --danger-bg: #4a2b27;
  --danger-text: #f0a99d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.45);
  --shadow-brand: 0 7px 17px rgba(0, 0, 0, 0.4);
}

/* Warnings and clashes stay red, even though the accent is no longer rust. */
html[data-theme="sage"] .unit-tile--conflict,
html[data-theme="sage"] .property-card__warning:not(.property-card__warning--tan) {
  background: var(--danger-bg);
  border-color: #d19a90;
  color: var(--danger-text);
}
html[data-theme="dusk"] .unit-tile--conflict,
html[data-theme="dusk"] .property-card__warning:not(.property-card__warning--tan) {
  background: var(--danger-bg);
  border-color: #7a4a43;
  color: var(--danger-text);
}

/* Main buttons use the theme's accent. */
html[data-theme="sage"] .btn--primary,
html[data-theme="sage"] .add-icon-btn--primary { background: linear-gradient(135deg, #5a8f7c, #345a4b); }
html[data-theme="dusk"] .btn--primary,
html[data-theme="dusk"] .add-icon-btn--primary { background: linear-gradient(135deg, #4f8d79, #356b5a); }

/* Workspace picker backdrop */
html[data-theme="sage"] #view-workspaces {
  background:
    radial-gradient(765px 425px at 84% 6%, rgba(106, 154, 136, 0.22), transparent 60%),
    radial-gradient(646px 442px at 6% 92%, rgba(217, 196, 142, 0.22), transparent 60%),
    var(--bg-app);
}
html[data-theme="dusk"] #view-workspaces {
  background:
    radial-gradient(765px 425px at 84% 6%, rgba(90, 152, 132, 0.16), transparent 60%),
    radial-gradient(646px 442px at 6% 92%, rgba(159, 183, 203, 0.1), transparent 60%),
    var(--bg-app);
}

/* Dusk: the few colours written straight into the stylesheet, and the
   logo that has dark lettering gets a light chip so it stays readable. */
html[data-theme="dusk"] .delete-icon-btn {
  background: #4a2b27;
  border-color: #7a4a43;
  color: #f0a99d;
}
html[data-theme="dusk"] .delete-icon-btn:hover {
  background: #5a332e;
  border-color: #f0a99d;
}
html[data-theme="dusk"] .promise-row--partial,
html[data-theme="dusk"] .promise-row--missed {
  background: rgba(240, 169, 157, 0.12);
}
html[data-theme="dusk"] .tpl-blank-missing {
  background: rgba(226, 195, 122, 0.28);
}
html[data-theme="dusk"] .brand-logo-full {
  background: #f7f3e7;
  border-radius: 8px;
  padding: 4px 10px;
}
html[data-theme="dusk"] .promise-card__why--breach,
html[data-theme="dusk"] .promise-duenow--short strong,
html[data-theme="dusk"] .unit-status--conflict {
  color: #f0a99d;
}
html[data-theme="dusk"] .inspection-tab--critical {
  background: #4a2b27;
  border-color: #7a4a43;
  color: #f0a99d;
}
html[data-theme="dusk"] .inspection-tab--critical .inspection-tab__value {
  color: #f0a99d;
}
html[data-theme="dusk"] .tpl-tab-bin {
  background: #4a2b27;
  border-color: #7a4a43;
  color: #f0a99d;
}
html[data-theme="dusk"] .tpl-tab-bin:hover {
  background: #5a332e;
  border-color: #f0a99d;
}



/* ---------- Repair team phone screens ---------- */
#view-repair {
  width: 100%;
  background: var(--bg-app);
}
#view-repair.view--active {
  display: block;
}
.repair-shell {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
}
.repair-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 50px;
  box-sizing: border-box;
  padding: 0 var(--space-4);
  background: var(--sidebar-bg);
  color: var(--text-on-navy);
}
.repair-top__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.repair-top__mark {
  width: 24px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.repair-top__co {
  font-size: 13.5px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-on-navy);
}
.repair-top__who {
  font-size: 11px;
  line-height: 1.15;
  color: var(--text-on-navy-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repair-top__menu {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.repair-top__menu .icon {
  width: 20px;
  height: 20px;
}




.repair-main {
  padding: var(--space-3) var(--space-4) var(--space-5);
}
.repair-hello {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.repair-sub {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}





.repair-job,
.repair-fix,
.repair-compact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 6px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}



.repair-fix {
  border-left-color: var(--lavender-700);
}
.repair-job__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.repair-job__where {
  margin: 2px 0 var(--space-2);
  font-size: 13.5px;
  color: var(--text-secondary);
}



.repair-entry {
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.repair-entry b {
  color: var(--text-primary);
}


.repair-acts {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.repair-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.repair-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.repair-btn--wide {
  width: 100%;
}
.repair-btn--main {
  border: 0;
  background: linear-gradient(135deg, var(--rust-500), var(--rust-700));
  color: var(--text-on-navy);
  min-height: 52px;
  font-size: 16px;
}
.repair-btn--go {
  border: 0;
  background: linear-gradient(135deg, var(--sage-500), var(--sage-700));
  color: var(--text-on-navy);
  min-height: 52px;
  font-size: 16px;
}
.repair-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}




.repair-critical {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--danger-text);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 13.5px;
  font-weight: 700;
}
.repair-countdown {
  font-size: 14px;
  font-weight: 700;
}
.repair-countdown.is-hot {
  color: var(--danger-text);
}
.repair-countdown--none {
  color: var(--tan-700);
}
.repair-bar {
  height: 9px;
  margin: var(--space-4) 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}
.repair-bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--sage-500), var(--sage-700));
  transition: width var(--duration-base) var(--ease-out);
}
.repair-items {
  margin-top: var(--space-2);
}
.repair-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  min-height: 52px;
}
.repair-item__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.repair-item__main input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--sage-700);
}
.repair-item__n {
  min-width: 22px;
  font-weight: 700;
  color: var(--text-muted);
}
.repair-item__text {
  font-size: 15px;
  line-height: 1.35;
}
.repair-item.is-done .repair-item__text {
  color: var(--text-muted);
  text-decoration: line-through;
}
.repair-item__sub {
  flex-basis: 100%;
  padding-left: 58px;
  font-size: 12.5px;
  color: var(--sage-700);
}
.repair-item__sub--note {
  color: var(--text-secondary);
}
.repair-linkbtn {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--rust-700);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.repair-linkbtn--center {
  width: 100%;
  margin-top: var(--space-3);
}
.repair-allfixed {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--sage-100);
  color: var(--sage-700);
  font-size: 14px;
  font-weight: 700;
}
.repair-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(31, 27, 29, 0.5);
}
.repair-sheet[hidden] {
  display: none;
}
.repair-sheet__card {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  color: var(--text-primary);
}
.repair-sheet__title {
  font-size: 18px;
  font-weight: 700;
}
.repair-sheet__sub,
.repair-sheet__hint {
  margin: var(--space-1) 0 var(--space-4);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.repair-sheet__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.repair-sheet__card > .repair-btn {
  margin-top: var(--space-3);
}
.repair-textarea,
.repair-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
}
.repair-textarea {
  min-height: 84px;
  resize: vertical;
}
.repair-input {
  margin-bottom: var(--space-3);
}
.repair-reasons {
  margin-bottom: var(--space-3);
}
.repair-reason {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  border-top: 1px solid var(--border);
  font-size: 15.5px;
  cursor: pointer;
}
.repair-reason input {
  width: 22px;
  height: 22px;
  accent-color: var(--rust-600);
}
.repair-toast {
  position: fixed;
  left: var(--space-5);
  right: var(--space-5);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: 80;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: #2a2628;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.repair-toast.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Work orders: priority, assignment, status board ---------- */
.maintenance-card__badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}






.user-id-card__role--repair {
  color: var(--sage-700);
  font-weight: 600;
}
.settings-repair-note {
  margin: 0 0 var(--space-4);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.settings-repair-options .checkbox-field {
  margin-top: var(--space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-repair-hint {
  margin: 3px 0 0 calc(13.5px + var(--space-2));
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- Failed inspections: progress, confirm, work orders ---------- */
.inspection-failitems-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.inspection-failitem-wo {
  margin: var(--space-1) 0 var(--space-2) 33px;
}
.inspection-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--success-text);
  font-size: 11.5px;
  font-weight: 700;
}
.inspection-confirm__btn {
  margin: var(--space-3) 0;
}

/* Choosing the Repair team role hides the permission checkboxes. */
.settings-role-card__groups[hidden],
.user-popup__section[hidden],
.settings-repair-options[hidden] {
  display: none;
}












/* colors */





































/* editor */



































/* Back-button "Leave?" box */
.back-dialog { position: fixed; inset: 0; z-index: 2000; background: rgba(20,16,18,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.back-dialog[hidden] { display: none; }
.back-dialog__card { background: var(--surface); color: var(--text-primary); border-radius: 14px; padding: 22px; max-width: 340px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.back-dialog__card h2 { margin: 0 0 6px; font-size: 18px; }
.back-dialog__card p { margin: 0 0 18px; font-size: 14px; color: var(--text-secondary); }
.back-dialog__btns { display: flex; gap: 10px; justify-content: flex-end; }

/* Repair phone: compact greeting row, bold readable job cards, one-line actions */
.repair-greet { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.repair-greet .repair-hello { font-size: 18px; margin: 0; }
.repair-greet .repair-sub { font-size: 13px; font-weight: 600; text-align: right; }


.repair-job .repair-job__title { margin-top: 3px; margin-bottom: var(--space-2); font-size: 16px; font-weight: 700; }



















.activity-day { list-style: none; margin: 14px 0 6px; padding: 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.activity-day:first-child { margin-top: 0; }
.activity-more { list-style: none; text-align: center; margin-top: 10px; }

.content-grid--single { grid-template-columns: 1fr; }
.col-main[hidden] { display: none; }
.panel-head__link[hidden] { display: none; }

.stat-card[hidden] { display: none; }
.panel[hidden] { display: none; }
.dashboard-cols + .panel { margin-top: var(--space-5); }


.resolve-btn[hidden] { display: none; }

/* ===== Inspections Monitoring ===== */
.im-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.im-search, .im-select { height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); padding: 0 10px; font: inherit; font-size: 13px; }
.im-search { min-width: 240px; }
.im-spacer { flex: 1; }
.im-btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.im-btn--sq { width: 34px; padding: 0; }
.im-btn--danger { color: #a33a2d; }
.im-btn:disabled { opacity: .45; cursor: default; }
.im-empty { padding: 40px 12px; text-align: center; color: var(--text-muted); }
.im-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.im-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1180px; font-size: 13px; }
.im-table th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 9px 8px; background: var(--surface-alt); border-bottom: 1px solid var(--border); white-space: nowrap; }
.im-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.im-prop td { background: var(--sidebar-bg); color: #fff; padding: 9px 12px; border: 0; }
.im-prop__name { font-weight: 800; font-size: 14px; }
.im-prop small { font-weight: 500; opacity: .75; margin-left: 8px; }
.im-hbtn { float: right; border: 0; background: transparent; color: #e3dbea; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.im-sub td { background: var(--surface-alt); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px; }
.im-row:hover td { background: var(--surface-alt); }
.im-row.is-abated td { background: #fde4e1; }
.im-row.is-abated td:first-child { box-shadow: inset 5px 0 #c0392b; }
.im-row.is-hold td { background: #eeece6; color: var(--text-muted); }
.im-row.is-passed td { background: #f1f7f1; }
.im-apt { font-weight: 800; }
.im-tname { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.im-nm { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; }
.im-nm.is-muted { font-weight: 500; color: var(--text-muted); font-style: italic; }
span.im-nm { cursor: default; }
.im-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.im-badge--wait { background: #1d6fe0; color: #fff; }
.im-badge--warn { background: #fff3cd; color: #8a5a00; border: 1px solid #f0d27a; }
.im-badge--abated { background: #c0392b; color: #fff; }
.im-inspcell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.im-sel { border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text-primary); padding: 4px 6px; font: inherit; font-size: 12.5px; max-width: 120px; }
.im-date { border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text-primary); padding: 3px 5px; font: inherit; font-size: 12.5px; font-weight: 700; width: 128px; }
.im-date.is-upcoming { background: #dff1e1; color: #256b36; border-color: #b6d7a6; }
.im-date.is-past { background: #fbe0dc; color: #a3281b; border-color: #e9b3ab; }
.im-date--bare { border: 0; background: transparent; width: 118px; padding: 2px; color: inherit; }
.im-date:disabled { opacity: 1; cursor: default; }
.im-req { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 3px 8px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.im-req.is-no { background: #fbe0dc; color: #a3281b; }
.im-req.is-yes { background: #dff1e1; color: #256b36; }
.im-req input[type=checkbox], .im-req-edit input[type=checkbox] { width: 17px; height: 17px; accent-color: currentColor; }
.im-round { min-width: 34px; height: 30px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); border-radius: 8px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.im-round.is-plain { cursor: default; opacity: 1; border-color: var(--border); background: transparent; }
.im-notice { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.im-link { color: var(--rust-700); font-weight: 700; text-decoration: underline; font-size: 12.5px; border: 0; background: transparent; padding: 0; font-family: inherit; cursor: pointer; }
.im-link--add { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.im-none { color: var(--text-muted); }
.im-notes-td { min-width: 190px; }
.im-notes { width: 100%; min-width: 170px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; resize: vertical; padding: 3px 4px; border-radius: 6px; }
.im-notes:hover, .im-notes:focus { border-color: var(--border-strong); background: var(--surface); }
.im-result { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 9px; font: inherit; font-weight: 800; font-size: 12px; background: var(--surface); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.im-result:disabled { opacity: 1; cursor: default; }
.im-result.is-failed { background: #fbe0dc; color: #a3281b; border-color: #e9b3ab; }
.im-result.is-passed { background: #dff1e1; color: #256b36; border-color: #b6d7a6; }
.im-result.is-abated { background: #c0392b; color: #fff; border-color: #c0392b; }
.im-result.is-hold { background: #e4e1dc; color: #555; }
.im-result.is-static { cursor: default; padding: 2px 9px; font-size: 11px; }
.im-menu { position: fixed; z-index: 3000; width: 230px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; }
.im-menu__item { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; width: 100%; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font: inherit; cursor: pointer; text-align: left; }
.im-menu__item b { font-size: 13px; }
.im-menu__item small { color: var(--text-muted); font-size: 11px; text-align: right; }
.im-menu__item:hover { background: var(--surface-alt); }
.im-menu__item.is-failed b { color: #a3281b; }
.im-menu__item.is-passed b { color: #256b36; }
.im-menu__item.is-abated b { color: #c0392b; }
.im-menu__item.is-hold b { color: #555; }
.im-menu__item.is-clear b { font-weight: 600; color: var(--text-secondary); }
.im-cards { display: none; }
.im-report { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.im-report h2 { margin: 0 0 2px; font-size: 17px; }
.im-report__sub { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.im-rrow { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 12px; }
.im-rg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.im-rrow .im-rg { margin-bottom: 0; }
.im-rg__l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.im-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.im-seg button { border: 0; background: var(--surface); color: var(--text-primary); padding: 7px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.im-seg button.is-on { background: var(--rust-600); color: #fff; }
.im-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.im-chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.im-chip.is-on { background: #e8efe5; border-color: #a7b9a1; color: #4c6345; }
.im-incl { display: flex; flex-wrap: wrap; gap: 16px; }
.im-chk { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.im-go { margin-top: 4px; }
/* pop-ups */
#detail-popup-overlay.im-wide .popup { max-width: 760px; width: calc(100% - 32px); max-height: 92vh; overflow-y: auto; }
.im-pcard { border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.im-pcard__h { margin: 0 0 8px; font-size: 14px; }
.im-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.im-pf label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 3px; }
.im-pf--wide { grid-column: 1 / -1; }
.im-req-edit { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 3px 8px; }
.im-req-edit.is-no { background: #fbe0dc; color: #a3281b; }
.im-req-edit.is-yes { background: #dff1e1; color: #256b36; }
.im-req-edit .popup-input { border: 0; background: transparent; flex: 1; }
.im-nf__row { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.im-nf__status { font-size: 12px; font-weight: 700; color: var(--sage-700); }
.im-mrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.im-mrow .popup-input { flex: 1; }
/* tenant page */
.im-tenant-panel { margin-bottom: var(--space-5); }
.im-tstat { border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; border: 1px solid var(--border); background: var(--surface-alt); }
.im-tstat.is-blue { background: #e3eefc; border-color: #b5d0f5; color: #153a6b; }
.im-tstat.is-green { background: #dff1e1; border-color: #b6d7a6; color: #1d4d2a; }
.im-tstat.is-red { background: #fde4e1; border-color: #e9b3ab; color: #7d2a20; }
.im-thead { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 4px; }
.im-hrow { border-top: 1px solid var(--border); padding: 9px 0; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.im-hrow__notes { flex-basis: 100%; color: var(--text-secondary); font-size: 12.5px; }
html[data-theme="dusk"] .im-row.is-abated td { background: #4a2a27; }
html[data-theme="dusk"] .im-row.is-passed td { background: #263229; }
html[data-theme="dusk"] .im-date.is-upcoming, html[data-theme="dusk"] .im-req.is-yes, html[data-theme="dusk"] .im-req-edit.is-yes { background: #2c4a35; color: #b9e0c1; border-color: #3f6a4b; }
html[data-theme="dusk"] .im-date.is-past, html[data-theme="dusk"] .im-req.is-no, html[data-theme="dusk"] .im-req-edit.is-no { background: #55302d; color: #f2b8b0; border-color: #7a4a43; }
html[data-theme="dusk"] .im-result.is-failed { background: #55302d; color: #f2b8b0; }
html[data-theme="dusk"] .im-result.is-passed { background: #2c4a35; color: #b9e0c1; }
html[data-theme="dusk"] .im-tstat.is-blue { background: #20344d; color: #bcd5f5; border-color: #35557c; }
html[data-theme="dusk"] .im-tstat.is-green { background: #263c2d; color: #b9e0c1; border-color: #3f6a4b; }
html[data-theme="dusk"] .im-tstat.is-red { background: #4a2a27; color: #f2b8b0; border-color: #7a4a43; }
@media (max-width: 760px) {
  .im-tablewrap { display: none; }
  .im-cards { display: block; }
  .im-search { flex: 1 1 100%; min-width: 0; }
  .im-prop--card { background: var(--sidebar-bg); color: #fff; border-radius: 8px; padding: 9px 12px; margin: 14px 0 8px; display: flex; align-items: baseline; gap: 8px; }
  .im-prop--card small { opacity: .75; }
  .im-prop--card .im-hbtn { margin-left: auto; }
  .im-sub--card { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 10px 2px 6px; }
  .im-card { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid #2e8b57; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
  .im-card.is-abated { background: #fde4e1; border-left-color: #c0392b; }
  .im-card.is-hold { background: #eeece6; opacity: .85; }
  .im-card.is-passed { background: #f1f7f1; }
  .im-card__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .im-card__round { margin-left: auto; }
  .im-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 10px 0; }
  .im-card__l { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; }
  .im-card__result { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
  .im-card__result .im-card__l { margin: 0; }
  .im-pgrid { grid-template-columns: 1fr; }
  #detail-popup-overlay.im-wide { padding: 0; align-items: stretch; }
  #detail-popup-overlay.im-wide .popup { max-width: none; width: 100%; max-height: none; height: 100%; border-radius: 0; }
}
@media (min-width: 761px) { .im-prop--card, .im-sub--card { display: none; } }
.dashboard-content:has(#page-inspection-monitor.dashboard-page--active) { max-width: 1560px; }
.im-date { width: 122px; font-size: 12px; }
.im-date--bare { width: 112px; }
.im-table { min-width: 0; table-layout: auto; }
.im-table th, .im-table td { padding-left: 6px; padding-right: 6px; }
.im-date { width: 108px; font-size: 11.5px; padding: 3px 3px; letter-spacing: -0.01em; }
.im-date--bare { width: 104px; }
.im-sel { max-width: 98px; }
.im-notes { min-width: 150px; }
.im-notes-td { min-width: 150px; }
.im-table input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; padding: 0; }
.im-notes, .im-notes-td { min-width: 120px; }
.im-sel { max-width: 92px; }
.im-table th, .im-table td { padding-left: 5px; padding-right: 5px; }
.im-table th small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: none; color: var(--text-muted); opacity: .85; }
.im-roundcell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.im-result.is-noshow { background: #ffe8cf; color: #b45a00; border-color: #f2bd85; }
.im-menu__item.is-noshow b { color: #b45a00; }
html[data-theme="dusk"] .im-result.is-noshow { background: #5a3a1c; color: #f5c58f; border-color: #8a5a2c; }
html[data-theme="dusk"] .im-row.is-hold td { background: #2a2a2a; }
.im-card__block { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.im-card__block--now { border-style: solid; background: var(--surface-alt); }
.im-card__bh { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.im-card__f--wide { grid-column: 1 / -1; }
.im-table td { vertical-align: top; }
.im-table { font-size: 12.5px; }
.im-sel { max-width: 88px; }
.im-date { width: 104px; font-size: 11px; }
.im-date--bare { width: 100px; }
.im-notes, .im-notes-td { min-width: 110px; }
/* Date boxes: no calendar icon taking up room; click the small icon for the calendar, or click the date and type it. */
.im-table input[type="date"], .im-pcard input[type="date"] { position: relative; }
.im-table input[type="date"]::-webkit-calendar-picker-indicator { position: static; width: 12px; height: 12px; margin: 0 0 0 2px; padding: 0; opacity: .6; cursor: pointer; }
.im-table .im-date { width: 88px; padding: 3px 16px 3px 4px; font-size: 11px; }
.im-table .im-date--bare { width: 84px; }
.im-table .im-req { padding: 3px 6px; gap: 4px; }
.im-table .im-badge--wait, .im-table .im-badge--warn { white-space: normal; }
.im-table .im-result { padding: 4px 7px; font-size: 11.5px; }
.im-table .im-sel { max-width: 84px; font-size: 12px; }
.im-table th, .im-table td { padding-left: 4px; padding-right: 4px; }
.dashboard-content:has(#page-inspection-monitor.dashboard-page--active) { padding-left: var(--space-4); padding-right: var(--space-4); }
.im-table .im-sel { max-width: 78px; }
.im-table .im-date { width: 88px; }
.im-table .im-date--bare { width: 86px; }
.im-table .im-badge--wait { font-size: 10px; max-width: 110px; }
.im-badge--wait { text-transform: uppercase; }
.im-table .im-badge--wait { white-space: nowrap; max-width: none; font-size: 10.5px; }

/* ===== Inspections group in the sidebar ===== */
.sidebar-group { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.sidebar-group__caret { display: none; }
.sidebar-flyout { display: none; list-style: none; margin: 0; padding: 6px; position: fixed; z-index: 300; min-width: 220px; background: var(--sidebar-bg); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); }
.sidebar-group.is-open .sidebar-flyout { display: block; }
.sidebar-flyout li { list-style: none; }
.sidebar-nav .sidebar-flyout a { width: auto; height: auto; justify-content: flex-start; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-on-navy); white-space: nowrap; border-radius: 8px; }
.sidebar-nav .sidebar-flyout a:hover { background: rgba(255, 255, 255, 0.08); }
.sidebar-nav .sidebar-flyout a.is-active { background: var(--rust-600); color: #fff; }
/* Phone drawer: Inspections opens as a dropdown under its name. */
@media (max-width: 860px) {
  .sidebar-group { align-items: stretch; }
  .sidebar-group__toggle { justify-content: flex-start; }
  .sidebar-group__caret { display: block; margin-left: auto; transition: transform .15s ease; }
  .sidebar-group.is-open .sidebar-group__caret { transform: rotate(180deg); }
  .sidebar-flyout { position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 2px 0 4px 26px; }
  .sidebar-nav .sidebar-flyout a { padding: 8px 10px; white-space: normal; font-size: 13px; font-weight: 500; }
  .sidebar-nav .sidebar-flyout a.is-active { background: rgba(226, 191, 149, 0.14); color: var(--tan-500); }
}

/* ===== Expanded menu (computer & tablet): names show, Inspections is a dropdown =====
   The arrow button switches it on and off (shell.js adds or removes "sb-wide").
   With no choice saved, wide screens (1200px+) start expanded. */
@media (min-width: 861px) {
  .app-shell.sb-wide { grid-template-columns: 211px 1fr; }
  .sb-wide .sidebar { align-items: stretch; padding: var(--space-5) var(--space-4); }
  .sb-wide .sidebar-brand { justify-content: flex-start; padding: var(--space-4) var(--space-2) var(--space-8); }
  .sb-wide .sidebar-brand__mark { display: none; }
  .sb-wide .sidebar-brand__logo { display: block; width: 143px; height: auto; }
  .sb-wide .sidebar-nav { align-items: stretch; }
  .sb-wide .sidebar-nav a { width: auto; height: auto; justify-content: flex-start; gap: var(--space-3); padding: 8.5px var(--space-3); border-radius: var(--radius-sm); }
  .sb-wide .sidebar-nav a.is-active { background: rgba(226, 191, 149, 0.14); color: var(--tan-500); }
  .sb-wide .sidebar-nav__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  .sb-wide .sidebar-foot { align-items: stretch; }
  .sb-wide .sidebar-foot-btn { width: auto; height: auto; justify-content: flex-start; gap: var(--space-3); padding: 8.5px var(--space-3); text-align: left; }
  .sb-wide .sidebar-group { align-items: stretch; }
  .sb-wide .sidebar-group__toggle { justify-content: flex-start; }
  .sb-wide .sidebar-group__caret { display: block; margin-left: auto; transition: transform .15s ease; }
  .sb-wide .sidebar-group.is-open .sidebar-group__caret { transform: rotate(180deg); }
  .sb-wide .sidebar-flyout { position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 2px 0 4px 26px; }
  .sb-wide .sidebar-nav .sidebar-flyout a { padding: 8px 10px; white-space: normal; font-size: 13px; font-weight: 500; }
  .sb-wide .sidebar-nav .sidebar-flyout a.is-active { background: rgba(226, 191, 149, 0.14); color: var(--tan-500); }
}

/* ===== Collapse / expand arrow on the menu's right edge ===== */
.sidebar-collapse-btn { display: none; }
@media (min-width: 861px) {
  .sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 72px;
    left: calc(64.5px - 12px);
    z-index: 20;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
  }
  .sb-wide .sidebar-collapse-btn { left: calc(211px - 12px); }
  .sidebar-collapse-btn:hover { color: var(--rust-700); border-color: var(--rust-500); }
  .sidebar-collapse-btn .icon {
    width: 13px;
    height: 13px;
    stroke-width: 2.25;
    transform: rotate(180deg); /* collapsed: points right ("open me") */
    transition: transform var(--duration-base) var(--ease-out);
  }
  .sb-wide .sidebar-collapse-btn .icon { transform: none; } /* expanded: points left */
}

.dashboard-content:has(#page-inspection-monitor.dashboard-page--active) { padding-left: var(--space-3); padding-right: var(--space-3); }
.im-table .im-date { width: 82px; font-size: 10.5px; padding: 3px 2px; }
.im-table .im-date--bare { width: 80px; }
.im-table .im-sel { max-width: 70px; font-size: 11.5px; padding: 4px 2px; }
.im-table .im-req { padding: 3px 4px; gap: 3px; }
.im-table .im-notes, .im-table .im-notes-td { min-width: 96px; }
.im-table th, .im-table td { padding-left: 3px; padding-right: 3px; }
.im-table .im-result { padding: 4px 5px; font-size: 11px; }
.im-table .im-link, .im-table .im-notice { font-size: 11.5px; }
.im-table .im-round { min-width: 30px; }
.im-addlist { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.im-addrow { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; }
.im-addrow small { margin-left: auto; opacity: .7; }
.popup-field .im-addrow { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: inherit; margin: 0; }
.popup-field .im-addrow small { text-transform: none; font-size: 12px; font-weight: 600; margin-left: auto; }
.im-addrow input { width: auto; margin: 0; }

/* Dates are typed into the boxes, so keep them wide enough for mm/dd/yyyy plus the small calendar icon. */
.im-table .im-date { width: 98px; font-size: 11px; padding: 3px 3px; }
.im-table .im-date--bare { width: 96px; }

/* Tracker rows: everything centred vertically. */
.im-table td { vertical-align: middle; }
.im-table td.im-notes-td { vertical-align: middle; }
.im-nf__title { margin-bottom: 8px; }
/* Typed date boxes and their drop-down calendar. */
.im-date-box { cursor: text; }
.im-cal { position: fixed; z-index: 400; width: 236px; padding: 10px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: 13px; }
.im-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.im-cal__nav { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.im-cal__nav:hover, .im-cal__day:hover { background: rgba(140, 100, 80, .16); }
.im-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.im-cal__dow { font-size: 11px; opacity: .6; padding: 2px 0; }
.im-cal__day { border: 0; background: transparent; color: inherit; height: 28px; border-radius: 6px; cursor: pointer; font: inherit; }
.im-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--rust-500); }
.im-cal__day.is-sel { background: var(--rust-500); color: #fff; }
.im-cal__foot { display: flex; justify-content: space-between; margin-top: 6px; }

/* ---------- "A new version is ready" bar (js/version-check.js) ---------- */
.update-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100% - 32px);
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--ink-950); color: var(--text-on-navy);
  box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.4;
}
.update-bar[hidden] { display: none; }
.update-bar__text b { font-weight: 600; }
.update-bar__btn {
  flex: 0 0 auto; height: 32px; padding: 0 14px; border: 0; border-radius: 8px;
  background: var(--rust-500); color: #fff; font: inherit; font-weight: 700; white-space: nowrap;
}
.update-bar__btn:hover { background: var(--rust-600); }
.update-bar__later {
  flex: 0 0 auto; height: 32px; padding: 0 8px; border: 0; background: transparent;
  color: var(--text-on-navy-muted); font: inherit; font-weight: 600;
}
.update-bar__later:hover { color: var(--text-on-navy); }
@media (max-width: 520px) {
  .update-bar { flex-wrap: wrap; bottom: 12px; gap: 8px 10px; padding: 12px 14px; }
  .update-bar__text { flex: 1 1 100%; }
  .update-bar__btn { flex: 1 1 auto; height: 40px; }
  .update-bar__later { height: 40px; }
}