:root {
  color-scheme: normal;
  --bg: #eef3f6;
  --page-bg-start: #dbe7ef;
  --page-bg-end: #f2f7fa;
  --surface: #ffffff;
  --surface-strong: #fff2e5;
  --border: #c48a58;
  --text: #111311;
  --muted: #47433d;
  --brand: #c85a0a;
  --brand-soft: #ffd7b2;
  --pool-accent: #2f79b7;
  --pool-accent-soft: #e8f6ff;
  --pool-accent-faint: #f8fcff;
  --pool-accent-border: #72add8;
  --hot-tub-accent: #bc5c1f;
  --hot-tub-accent-soft: #fff0e3;
  --hot-tub-accent-faint: #fff9f4;
  --hot-tub-accent-border: #d8955f;
  --secondary: #c8def0;
  --success: #1f6a34;
  --accent: #c85a0a;
  --danger: #a82b21;
  --shadow: 0 18px 40px rgba(17, 19, 17, 0.16);
  --report-row-height: 44px;
  --report-visible-rows: 5;
  --report-history-rows: 4;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
}

body {
  padding: 24px;
}

.app-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.app-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.header-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.header-right label {
  font-size: 1rem;
  color: var(--brand);
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.header-right select {
  min-width: 210px;
  max-width: 280px;
  padding: 7px 14px;
  min-height: 44px;
  border-radius: 12px;
  border: 2px solid var(--brand);
  background: white;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.header-right select.is-placeholder {
  color: var(--muted);
  border-color: var(--danger);
  background: #fff8f6;
}

.form-warden-row {
  display: none;
}

.app-header h1 {
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
}

.app-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.app-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 6px;
}

.app-title-separator.is-hidden {
  display: none;
}

.test-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 2px solid var(--danger);
  border-radius: 999px;
  background: #fff3f0;
  color: var(--danger);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-header p {
  margin: 8px 0 0;
  max-width: 46rem;
  line-height: 1.6;
  color: var(--muted);
}

.brand-pill {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 0.9rem;
  justify-self: end;
}

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

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 22px;
}

.tab-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.tab-group--admin {
  justify-content: flex-end;
}

.cloud-banner {
  display: none;
  margin-bottom: 22px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid rgba(168, 43, 33, 0.34);
  background: linear-gradient(180deg, rgba(255, 236, 220, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
  color: var(--danger);
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(168, 43, 33, 0.14);
}

.cloud-banner.is-visible {
  display: block;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  height: 48px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 0.95;
  min-width: 0;
}

.tab-button.tab-button--primary {
  width: 148px;
  min-width: 148px;
  padding-inline: 14px;
  font-weight: 700;
}

.tab-button.tab-button--primary[data-tab="poolTab"] {
  border-color: var(--pool-accent);
  color: var(--pool-accent);
  background: var(--pool-accent-faint);
}

.tab-button.tab-button--primary[data-tab="poolTab"].active,
.tab-button.tab-button--primary[data-tab="poolTab"]:hover {
  background: var(--pool-accent);
  color: #fff;
}

.tab-button.tab-button--primary[data-tab="hotTubTab"] {
  border-color: var(--hot-tub-accent);
  color: var(--hot-tub-accent);
  background: var(--hot-tub-accent-faint);
}

.tab-button.tab-button--primary[data-tab="hotTubTab"].active,
.tab-button.tab-button--primary[data-tab="hotTubTab"]:hover {
  background: var(--hot-tub-accent);
  color: #fff;
}

.tab-group--admin .tab-button:not(.tab-button--right) {
  width: 136px;
  min-width: 136px;
  padding-inline: 12px;
  font-size: 1.58rem;
}

.tab-button.tab-button--right {
  min-width: 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tab-button.tab-button--right:hover,
.tab-button.tab-button--right:focus {
  background: var(--brand);
  color: white;
  outline: none;
}

.tab-icon {
  width: 38px;
  height: 38px;
  display: block;
}

.tab-button.active,
.tab-button:hover {
  background: var(--brand);
  color: white;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.tab-panel {
  display: none;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--shadow);
}

#poolTab {
  background: linear-gradient(180deg, var(--pool-accent-soft) 0%, var(--pool-accent-faint) 58%, #ffffff 100%);
  border-color: var(--pool-accent);
}

#hotTubTab {
  background: linear-gradient(180deg, var(--hot-tub-accent-soft) 0%, var(--hot-tub-accent-faint) 58%, #ffffff 100%);
  border-color: var(--hot-tub-accent);
}

#poolTab .entry-card,
#poolTab .entry-next-card {
  background: linear-gradient(180deg, var(--pool-accent-faint) 0%, #ffffff 100%);
  border-color: var(--pool-accent-border);
}

#hotTubTab .entry-card,
#hotTubTab .entry-next-card {
  background: linear-gradient(180deg, var(--hot-tub-accent-faint) 0%, #ffffff 100%);
  border-color: var(--hot-tub-accent-border);
}

#poolTab .entry-card h3,
#poolTab .entry-next-card h3 {
  color: var(--pool-accent);
}

#hotTubTab .entry-card h3,
#hotTubTab .entry-next-card h3 {
  color: var(--hot-tub-accent);
}

#poolTab input,
#poolTab select,
#poolTab textarea {
  border-color: var(--pool-accent-border);
}

#hotTubTab input,
#hotTubTab select,
#hotTubTab textarea {
  border-color: var(--hot-tub-accent-border);
}

#poolTab button.primary-button {
  background: var(--pool-accent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--pool-accent) 22%, transparent);
}

#poolTab button.secondary-button {
  color: var(--pool-accent);
  border-color: var(--pool-accent);
}

#hotTubTab button.primary-button {
  background: var(--hot-tub-accent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--hot-tub-accent) 22%, transparent);
}

#hotTubTab button.secondary-button {
  color: var(--hot-tub-accent);
  border-color: var(--hot-tub-accent);
}

#poolTab .entry-form > button.primary-button.is-save-incomplete,
#poolTab .entry-form > button.primary-button[aria-disabled="true"],
#hotTubTab .entry-form > button.primary-button.is-save-incomplete,
#hotTubTab .entry-form > button.primary-button[aria-disabled="true"] {
  background: linear-gradient(180deg, #fffaf4 0%, #ddd5cb 100%);
  color: #24211e;
  border: 2px solid rgba(36, 33, 30, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 4px 10px rgba(17, 19, 17, 0.1);
}

#poolTab .entry-form > button.primary-button.is-save-confirmed,
#hotTubTab .entry-form > button.primary-button.is-save-confirmed {
  background: #1f6a34;
  color: #fff;
  border: 2px solid #174d27;
  box-shadow: 0 8px 18px rgba(31, 106, 52, 0.24);
}

#poolTab .entry-form > button.primary-button.is-save-sync-pending,
#hotTubTab .entry-form > button.primary-button.is-save-sync-pending {
  background: #4f4841;
  color: #fff;
  border-color: #322d28;
  box-shadow: 0 8px 18px rgba(17, 19, 17, 0.18);
}

.tab-panel.active {
  display: block;
}

.facility-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.selected-facility-heading {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 900;
}

.selected-facility-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.selected-facility-heading small {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.facility-closure-banner {
  display: grid;
  gap: 3px;
  border: 2px solid rgba(168, 43, 33, 0.62);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 238, 233, 0.98), rgba(255, 248, 244, 0.98));
  box-shadow: inset 5px 0 0 var(--danger);
}

.facility-closure-banner strong {
  color: var(--danger);
  font-size: 1.05rem;
  line-height: 1.18;
}

.facility-closure-banner span {
  color: #5c2b24;
  font-size: 0.98rem;
  line-height: 1.28;
  font-weight: 750;
}

.facility-tab-button {
  border: 2px solid var(--facility-accent, var(--border));
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 1.15rem;
  font-weight: 800;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.facility-tab-button.is-active,
.facility-tab-button:hover,
.facility-tab-button:focus {
  background: var(--facility-accent, var(--brand));
  color: #fff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--facility-accent, var(--brand)) 24%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.tab-panel h2 {
  font-size: 2.1rem;
  line-height: 1.2;
}

.role-hidden {
  display: none !important;
}

.is-hidden {
  display: none !important;
}

#adminToolsPanels {
  display: grid;
  gap: 24px;
}

.admin-tools-hidden {
  display: none !important;
}

.admin-section-hidden {
  display: none !important;
}

.admin-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}

.admin-section-button {
  appearance: none;
  border: 2px solid #c9854d;
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.admin-section-button.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.panel-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(280px, 1fr) 320px;
}

.setup-grid {
  grid-template-columns: 1fr;
}

.app-version-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: -8px 0 16px;
  padding: 7px 12px;
  border: 2px solid rgba(17, 19, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.app-version-note a {
  color: var(--brand);
  text-decoration: none;
}

.app-version-note a:hover,
.app-version-note a:focus {
  text-decoration: underline;
}

.entry-workflow {
  display: grid;
  gap: 22px;
  max-width: none;
}

.entry-form {
  display: grid;
  gap: 22px;
}

.entry-column {
  display: grid;
  gap: 22px;
  align-content: start;
}

.entry-form > .primary-button,
.entry-form > .action-feedback {
  grid-column: 1 / -1;
}

.entry-card,
.entry-next-card,
.setup-card,
.report-panel {
  background: var(--surface-strong);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}

.entry-card,
.entry-next-card {
  display: grid;
  gap: 16px;
}

.measurement-card {
  gap: 12px;
  padding: 18px 20px;
}

.entry-form .field-row,
.setup-card .field-row {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.entry-form .measurement-card .field-row {
  gap: 7px;
  margin-bottom: 10px;
}

.entry-card > .field-row:last-child,
.entry-card .chemical-stack > .field-row:last-child {
  margin-bottom: 0;
}

.field-row.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.field-row.split > div {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
}

.field-row label {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

input,
select,
textarea {
  min-width: 0;
  width: 100%;
  border: 2px solid #9f6f46;
  border-radius: 12px;
  padding: 8px 14px;
  background: white;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(17, 19, 17, 0.04);
}

input,
select {
  min-height: 48px;
}

.measurement-card input[type="datetime-local"] {
  width: min(100%, 20rem);
  font-size: 1.18rem;
  padding-inline: 10px;
}

textarea {
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.35;
}

.input-error {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
  background: rgba(255, 122, 30, 0.08);
  color: var(--danger);
}

.field-error {
  min-height: 1.2em;
  color: var(--danger);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-error:empty {
  display: none;
}

.measurement-card .field-error {
  display: block;
  min-height: 1.2em;
}

.action-feedback {
  min-height: 1.4em;
  margin-top: 12px;
  color: var(--success);
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.action-feedback.feedback-visible {
  opacity: 1;
}

.action-feedback.is-error {
  color: var(--danger);
}

textarea {
  min-height: 86px;
  resize: vertical;
}

button.primary-button,
button.secondary-button {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  min-height: 48px;
  padding: 8px 16px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 0.95;
}

button.primary-button {
  background: var(--brand);
  color: white;
  box-shadow: 0 10px 20px rgba(200, 90, 10, 0.22);
}

.entry-form > .primary-button {
  width: 100%;
  min-height: 52px;
  font-size: 2rem;
}

button.secondary-button {
  background: white;
  color: var(--brand);
  border: 2px solid var(--brand);
  width: 100%;
  margin-bottom: 10px;
}

button.primary-button:disabled,
button.secondary-button:disabled {
  cursor: not-allowed;
  background: #ece7e1;
  color: #8c857e;
  border-color: #d7d1ca;
  box-shadow: none;
  opacity: 1;
}

button.primary-button.is-save-incomplete,
button.primary-button[aria-disabled="true"] {
  cursor: not-allowed;
  background: linear-gradient(180deg, #f4f1ed 0%, #ded8d1 100%);
  color: #4f4841;
  border: 2px solid rgba(79, 72, 65, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 4px 10px rgba(17, 19, 17, 0.08);
}

button.secondary-button:last-child {
  margin-bottom: 0;
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  background: #f1ece7;
  color: #8c857e;
  border-color: #d7d1ca;
}

.summary-card,
.setup-card,
.report-panel {
  display: flex;
  flex-direction: column;
}

.entry-card h3,
.entry-next-card h3,
.summary-card h3,
.setup-card h3,
.report-panel h3 {
  margin-top: 0;
  color: var(--brand);
  font-size: 1.5rem;
  line-height: 1.2;
}

.entry-card h3,
.entry-next-card h3 {
  margin-bottom: 0;
}

.entry-next-card {
  background: linear-gradient(180deg, rgba(255, 248, 241, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  gap: 10px;
  padding: 16px 20px;
}

.workflow-hidden-control {
  display: none !important;
}

.entry-card.decision-card {
  border-color: var(--border);
  padding: 20px;
}

.treatment-card {
  gap: 18px;
}

.treatment-card .field-hint {
  margin-top: 0;
}

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

.filter-maintenance-list {
  grid-template-columns: minmax(0, 1fr);
}

.maintenance-item {
  display: grid;
  gap: 12px;
  align-content: space-between;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 14px;
}

.maintenance-item--wide {
  grid-column: 1 / -1;
}

.maintenance-item .filter-status {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  background: transparent;
}

.maintenance-action {
  width: 100%;
  margin-bottom: 0;
}

.field-row.split.lab-assurance-mode-row {
  grid-template-columns: 1fr;
}

.field-row.split.lab-assurance-detail-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lab-assurance-detail-row > .is-hidden,
.lab-assurance-mode-row > .is-hidden {
  display: none;
}

.lab-result-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lab-result-detail-grid.is-hidden {
  display: none;
}

@media (max-width: 720px) {
  .field-row.split.lab-assurance-mode-row,
  .field-row.split.lab-assurance-detail-row,
  .lab-result-detail-grid {
    grid-template-columns: 1fr;
  }
}

.water-change-card {
  gap: 14px;
}

.water-change-status {
  display: grid;
  gap: 8px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 14px;
}

.water-change-status.is-soon {
  border-color: rgba(200, 90, 10, 0.62);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, white 100%);
}

.water-change-status.is-due {
  border-color: rgba(168, 43, 33, 0.58);
  background: linear-gradient(180deg, rgba(255, 238, 233, 0.98) 0%, white 100%);
}

.water-change-meter {
  height: 10px;
  border-radius: 999px;
  background: rgba(200, 90, 10, 0.16);
  overflow: hidden;
}

.water-change-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.water-change-status.is-soon .water-change-meter span {
  background: var(--brand);
}

.water-change-status.is-due .water-change-meter span {
  background: var(--danger);
}

.water-change-summary {
  display: grid;
  gap: 3px;
}

.water-change-summary strong {
  color: var(--brand);
  font-size: 1.32rem;
  line-height: 1.1;
}

.water-change-status.is-due .water-change-summary strong {
  color: var(--danger);
}

.water-change-summary span,
.water-change-note {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.32;
}

.water-change-note.is-warning {
  color: var(--danger);
  font-weight: 800;
}

.base-load-status {
  display: grid;
  gap: 4px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  padding: 12px;
}

.base-load-status strong {
  color: var(--brand);
  font-size: 1.05rem;
  line-height: 1.15;
}

.base-load-status span {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.32;
}

.base-load-status.is-due,
.base-load-status.is-overdue,
.base-load-status.is-unresolved {
  border-color: rgba(168, 43, 33, 0.58);
  background: linear-gradient(180deg, rgba(255, 238, 233, 0.98) 0%, white 100%);
}

.base-load-status.is-due strong,
.base-load-status.is-overdue strong,
.base-load-status.is-unresolved strong {
  color: var(--danger);
}

.base-load-status.is-upcoming {
  border-color: rgba(46, 125, 85, 0.48);
  background: linear-gradient(180deg, rgba(237, 252, 243, 0.98) 0%, white 100%);
}

.base-load-status.is-upcoming strong {
  color: var(--success);
}

#poolTab .measurement-anomaly-card,
#hotTubTab .measurement-anomaly-card,
.measurement-anomaly-card {
  border-color: var(--danger);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(255, 238, 233, 0.96), rgba(255, 248, 244, 0.98));
  box-shadow: inset 5px 0 0 var(--danger), 0 10px 24px rgba(168, 43, 33, 0.1);
}

#poolTab .measurement-anomaly-card h3,
#hotTubTab .measurement-anomaly-card h3,
.measurement-anomaly-card h3 {
  color: var(--danger);
  font-size: 1.34rem;
}

.measurement-anomaly-summary {
  font-size: 1.08rem;
  line-height: 1.34;
  font-weight: 800;
  color: #5c2b24;
}

.measurement-anomaly-list {
  margin: 10px 0 14px;
  padding-left: 22px;
  color: #321f1b;
  font-size: 1.06rem;
  line-height: 1.34;
  font-weight: 800;
}

.measurement-anomaly-list li + li {
  margin-top: 6px;
}

.measurement-anomaly-card .treatment-decision-button {
  min-height: 48px;
  border-color: rgba(168, 43, 33, 0.55);
  background: #fff7f4;
  color: var(--danger);
  font-size: 1.08rem;
}

.measurement-anomaly-card .treatment-decision-button.is-active[data-anomaly-decision-value="retested"] {
  border-color: rgba(31, 106, 52, 0.7);
  background: rgba(236, 248, 238, 0.98);
  color: var(--success);
}

.measurement-anomaly-card .treatment-decision-button.is-active[data-anomaly-decision-value="notRetested"] {
  border-color: rgba(168, 43, 33, 0.76);
  background: rgba(255, 226, 218, 0.98);
  color: var(--danger);
}

.water-change-shock-card {
  margin: 0;
}

.water-change-shock-card .treatment-confirm-row {
  margin-top: 12px;
}

.filter-care-card {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.filter-care-card.is-hidden {
  display: none;
}

.filter-care-card .treatment-slot-card {
  padding-block: 14px;
}

.water-change-action {
  width: 100%;
  margin-bottom: 0;
}

.water-change-feedback {
  display: none;
  border: 2px solid rgba(31, 106, 52, 0.3);
  border-radius: 12px;
  background: rgba(236, 248, 238, 0.95);
  color: var(--success);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  padding: 10px 12px;
}

.water-change-feedback.is-visible {
  display: block;
}

.water-change-feedback.is-error {
  border-color: rgba(168, 43, 33, 0.32);
  background: rgba(255, 238, 233, 0.95);
  color: var(--danger);
}

.treatment-slot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.treatment-slot-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 16px 16px 16px 20px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.treatment-slot-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #c9a07c;
  opacity: 0.7;
}

.treatment-slot-card--needed {
  border-color: rgba(200, 90, 10, 0.74);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, white 100%);
  box-shadow: 0 14px 24px rgba(200, 90, 10, 0.14);
}

.treatment-slot-card--needed::before {
  background: var(--brand);
  opacity: 1;
}

.treatment-slot-card--blocked {
  border-color: rgba(168, 43, 33, 0.56);
  background: linear-gradient(180deg, rgba(255, 238, 233, 0.98) 0%, white 100%);
}

.treatment-slot-card--blocked::before {
  background: var(--danger);
  opacity: 1;
}

.treatment-slot-card--ok {
  border-color: rgba(31, 106, 52, 0.35);
  background: linear-gradient(180deg, rgba(236, 248, 238, 0.9) 0%, white 100%);
}

.treatment-slot-card--ok::before {
  background: var(--success);
  opacity: 1;
}

.treatment-slot-card--empty {
  background: rgba(255, 255, 255, 0.82);
}

.treatment-slot-header {
  display: grid;
  gap: 12px;
  padding-left: 8px;
}

.treatment-slot-header h4 {
  display: none;
  margin: 0;
  color: var(--brand);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.treatment-slot-status {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.3;
}

.treatment-slot-status .decision-treatment-heading {
  margin-bottom: 2px;
}

.treatment-slot-status .decision-treatment-label {
  font-size: 1.16rem;
}

.treatment-slot-status .decision-treatment-status {
  font-size: 1rem;
}

.treatment-slot-status .decision-treatment-reading {
  font-size: 1.72rem;
}

.treatment-slot-status .decision-treatment-action {
  font-size: 1.28rem;
}

.decision-treatment-action-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.decision-treatment-learned {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(17, 19, 17, 0.12);
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 650;
}

.decision-treatment-learned p {
  margin: 0;
}

.decision-treatment-learned--gathering {
  font-weight: 750;
}

.learned-guidance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.learned-guidance-confidence {
  color: var(--brand);
  font-size: 1rem;
  line-height: 1.25;
}

.learned-guidance-help {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  cursor: help;
}

.learned-dose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(17, 19, 17, 0.14);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.learned-dose-row.is-disabled {
  opacity: 0.62;
}

.learned-dose-row > div {
  display: grid;
  gap: 2px;
}

.learned-dose-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.learned-dose-row strong {
  color: var(--text);
  font-size: 1.2rem;
}

.learned-dose-button {
  min-height: 40px;
  padding: 7px 12px;
  font-size: 0.95rem;
  white-space: nowrap;
}

.learned-dose-button:disabled {
  cursor: not-allowed;
}

.learned-dose-note {
  font-size: 0.86rem;
  line-height: 1.4;
}

.treatment-slot-card--ok .decision-treatment-status,
.treatment-slot-card--ok .decision-treatment-action {
  color: var(--success);
}

.treatment-slot-card--blocked .decision-treatment-status,
.treatment-slot-card--blocked .decision-treatment-action {
  color: var(--danger);
}

.treatment-slot-suggestion-button {
  justify-self: start;
  margin-top: 4px;
  min-height: 40px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 1.06rem;
  font-weight: 800;
}

.entry-form .treatment-chemical-fields {
  display: none;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 90, 10, 0.22);
  margin-bottom: 0;
}

.entry-form .treatment-slot-card--actionable .treatment-chemical-fields {
  display: grid;
}

.treatment-confirm-row {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.treatment-confirm-row.is-visible {
  display: grid;
}

.treatment-not-applied-note {
  display: none;
  gap: 8px;
}

.treatment-not-applied-note.is-visible {
  display: grid;
}

.treatment-not-applied-note label {
  font-size: 1rem;
}

.treatment-not-applied-note textarea {
  min-height: 62px;
  font-size: 1.05rem;
}

.treatment-decision-button {
  min-height: 44px;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  background: white;
  color: var(--text);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 900;
  cursor: pointer;
}

.treatment-decision-button.is-active[data-treatment-decision-value="applied"],
.treatment-decision-button.is-active[data-filter-care-value="applied"],
.treatment-decision-button.is-active[data-water-change-shock-value="applied"],
.treatment-decision-button.is-active[data-water-change-filter-value="applied"] {
  border-color: rgba(31, 106, 52, 0.62);
  background: rgba(236, 248, 238, 0.98);
  color: var(--success);
}

.treatment-decision-button.is-active[data-treatment-decision-value="notApplied"],
.treatment-decision-button.is-active[data-filter-care-value="notApplied"],
.treatment-decision-button.is-active[data-water-change-shock-value="notApplied"],
.treatment-decision-button.is-active[data-water-change-filter-value="notApplied"] {
  border-color: rgba(168, 43, 33, 0.5);
  background: rgba(255, 238, 233, 0.98);
  color: var(--danger);
}

.treatment-decision-button:focus,
.treatment-decision-button:hover {
  outline: 2px solid rgba(17, 19, 17, 0.18);
  outline-offset: 2px;
}

.treatment-slot-card .chemical-suggestion {
  display: none;
}

.operational-response-card {
  grid-column: 1 / -1;
}

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

.operational-response-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(200, 90, 10, 0.22);
}

.operational-response-item--urgent {
  border-color: rgba(168, 43, 33, 0.35);
  background: rgba(255, 238, 233, 0.7);
}

.operational-response-item strong {
  font-weight: 900;
}

.operational-response-item span {
  color: var(--text);
  line-height: 1.35;
}

.routine-treatment-decision {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 90, 10, 0.22);
}

.treatment-controls-disabled .treatment-chemical-fields {
  display: none;
}

.treatment-controls-disabled .treatment-slot-card {
  min-height: 132px;
}

.treatment-controls-disabled .treatment-slot-card--needed {
  min-height: 148px;
}

.latest-check-list {
  display: grid;
  gap: 10px;
}

.latest-check-item {
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.latest-check-item.is-empty {
  background: rgba(255, 255, 255, 0.72);
}

.latest-check-period {
  color: var(--brand);
  font-size: 1.12rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.latest-check-meta,
.latest-check-readings,
.latest-check-note {
  font-size: 1.22rem;
  line-height: 1.45;
}

.latest-check-meta,
.latest-check-note {
  color: var(--muted);
}

.latest-check-readings {
  color: var(--text);
  font-weight: 700;
}

.latest-check-status {
  font-size: 1.18rem;
  font-weight: 700;
}

.latest-check-status--ok {
  color: var(--success);
}

.latest-check-status--warning {
  color: var(--danger);
}

.latest-check-status--note {
  color: var(--brand);
}

.latest-check-toggle {
  margin-top: 10px;
}

.latest-check-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.latest-check-toggle {
  margin-top: 0;
}

.latest-check-toggle--subtle {
  color: var(--muted);
  border-color: #c9a07c;
}

.decision-card {
  position: relative;
  gap: 12px;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 12px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.decision-card--needs-treatment {
  position: sticky;
  top: 16px;
  z-index: 4;
  border-width: 4px;
  border-color: rgba(200, 90, 10, 0.95);
  background: linear-gradient(180deg, rgba(255, 240, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0 24px 42px rgba(200, 90, 10, 0.34);
  padding: 16px 14px 16px 20px;
}

.decision-card--needs-treatment::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 8px;
  width: 7px;
  border-radius: 999px;
  background: var(--brand);
}

.decision-card--urgent.decision-card--needs-treatment {
  border-color: rgba(168, 43, 33, 0.98);
  background: linear-gradient(180deg, rgba(255, 231, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0 24px 42px rgba(168, 43, 33, 0.36);
}

.decision-card--urgent.decision-card--needs-treatment::before {
  background: var(--danger);
}

.decision-card--warning.decision-card--needs-treatment h3 {
  color: var(--brand);
}

.decision-card--urgent.decision-card--needs-treatment h3 {
  color: var(--danger);
}

.decision-panel {
  display: grid;
  gap: 12px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 16px;
}

.treatment-decision-summary .decision-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
}

.decision-card--needs-treatment .decision-panel {
  border-width: 3px;
  border-color: rgba(200, 90, 10, 0.74);
  padding: 18px;
}

.decision-card--urgent.decision-card--needs-treatment .decision-panel {
  border-color: rgba(168, 43, 33, 0.78);
}

.decision-panel--ok {
  border-color: rgba(31, 106, 52, 0.46);
  background: linear-gradient(180deg, rgba(236, 248, 238, 0.95) 0%, white 100%);
}

.decision-panel--warning {
  border-color: rgba(200, 90, 10, 0.52);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, white 100%);
}

.decision-panel--urgent {
  border-color: rgba(168, 43, 33, 0.56);
  background: linear-gradient(180deg, rgba(255, 238, 233, 0.98) 0%, white 100%);
}

.decision-status {
  color: var(--brand);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
}

.decision-card--needs-treatment .decision-status {
  font-size: 2rem;
  line-height: 1.05;
}

.decision-panel--urgent .decision-status {
  color: var(--danger);
}

.decision-panel--ok .decision-status {
  color: var(--success);
}

.decision-summary,
.decision-context,
.decision-list {
  font-size: 1.28rem;
  line-height: 1.45;
}

.decision-summary {
  font-size: 1.48rem;
  font-weight: 700;
}

.treatment-decision-summary .decision-status {
  font-size: 1.58rem;
}

.treatment-decision-summary .decision-summary {
  font-size: 1.28rem;
}

.weather-advisory-card {
  display: grid;
  gap: 8px;
  border: 2px solid rgba(184, 150, 118, 0.72);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.78);
}

.weather-summary-card {
  display: grid;
  gap: 10px;
  border: 2px solid rgba(184, 150, 118, 0.72);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.82);
}

.weather-summary-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.weather-summary-heading strong {
  font-size: 1.02rem;
  font-weight: 900;
}

.weather-summary-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.weather-summary-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weather-summary-day {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.weather-summary-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.weather-summary-day strong {
  font-size: 1.02rem;
  font-weight: 900;
}

.weather-summary-day span:last-child {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.3;
}

.weather-advisory-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.weather-advisory-heading strong {
  font-size: 1rem;
  font-weight: 900;
}

.weather-advisory-heading span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.weather-advisory-meta {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.weather-advisory-card p,
.weather-advisory-card ul {
  margin: 0;
}

.weather-advisory-card ul {
  display: grid;
  gap: 5px;
  padding-left: 18px;
  color: var(--muted);
}

.weather-risk-low {
  border-color: rgba(43, 133, 86, 0.45);
}

.weather-risk-moderate,
.weather-risk-loading {
  border-color: rgba(197, 90, 10, 0.64);
}

.weather-risk-high {
  border-color: rgba(180, 36, 36, 0.78);
  background: rgba(255, 246, 243, 0.88);
}

.decision-card--needs-treatment .decision-summary {
  font-size: 1.45rem;
}

.decision-context {
  color: var(--muted);
}

.decision-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.decision-list--actions {
  padding-left: 0;
  list-style: none;
  color: var(--text);
  font-size: 1.42rem;
  font-weight: 800;
}

.decision-card--needs-treatment .decision-list--actions {
  font-size: 1.7rem;
}

.decision-treatment-list {
  display: grid;
  gap: 10px;
}

.decision-treatment-item {
  display: grid;
  gap: 8px;
  border: 2px solid rgba(200, 90, 10, 0.38);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
}

.decision-panel--urgent .decision-treatment-item {
  border-color: rgba(168, 43, 33, 0.42);
}

.decision-treatment-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}

.decision-treatment-label {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
}

.decision-treatment-status {
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.decision-panel--urgent .decision-treatment-status {
  color: var(--danger);
}

.decision-treatment-reading {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.05;
}

.decision-treatment-target {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.decision-treatment-action {
  border-top: 1px solid rgba(200, 90, 10, 0.22);
  padding-top: 8px;
  color: var(--text);
  font-size: 1.26rem;
  font-weight: 900;
  line-height: 1.15;
}

.decision-panel--urgent .decision-treatment-action {
  border-top-color: rgba(168, 43, 33, 0.22);
}

.decision-apply-button {
  min-height: 52px;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.05;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(200, 90, 10, 0.2);
}

.decision-panel--urgent .decision-apply-button {
  background: var(--danger);
  box-shadow: 0 10px 20px rgba(168, 43, 33, 0.2);
}

.decision-apply-button:focus,
.decision-apply-button:hover {
  outline: 2px solid rgba(17, 19, 17, 0.28);
  outline-offset: 2px;
}

.entry-card.decision-card--needs-treatment {
  position: relative;
  top: auto;
}

.report-panel {
  background: linear-gradient(180deg, var(--surface) 0%, var(--secondary) 100%);
}

#wardenList {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.item-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.warden-list-item {
  gap: 10px;
}

.warden-edit-field {
  flex: 1;
  min-width: 0;
}

.warden-edit-field input {
  min-height: 42px;
  font-size: 1.05rem;
}

.warden-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.item-list-empty {
  color: var(--muted);
  justify-content: flex-start;
}

.item-list-copy {
  display: grid;
  gap: 4px;
}

.item-list-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.admin-user-list {
  display: grid;
  gap: 10px;
}

.admin-user-create {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-user-create .field-row.split {
  align-items: end;
}

.admin-user-create-action {
  display: flex;
  align-items: end;
  gap: 8px;
}

.admin-user-create-action .secondary-button {
  width: 100%;
}

.admin-user-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr) minmax(180px, auto);
  gap: 10px;
  align-items: center;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  padding: 10px 12px;
}

.admin-user-item .item-list-copy span {
  overflow-wrap: anywhere;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.platform-site-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.platform-site-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(100px, 0.75fr) minmax(100px, 0.75fr) minmax(100px, 0.75fr) minmax(130px, 0.9fr) minmax(150px, auto);
  gap: 8px;
  align-items: start;
  min-width: 980px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 10px;
  padding: 8px 10px;
}

.platform-site-row--header {
  background: transparent;
  border: 0;
  padding-block: 2px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.platform-site-row.is-archived {
  opacity: 0.68;
}

.platform-site-name-cell {
  display: grid;
  gap: 4px;
}

.platform-site-slug,
.platform-site-counts {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.platform-site-actions {
  justify-content: flex-start;
}

#siteAccentColor {
  min-height: 44px;
  padding: 4px;
}

.asset-accent-input {
  min-height: 48px;
  padding: 4px;
}

.admin-user-remove-button {
  border-color: var(--danger);
  color: var(--danger);
}

.item-list li button {
  border: 2px solid var(--danger);
  background: transparent;
  color: var(--danger);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
}

.item-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.item-list-actions button[data-action="send-now"] {
  border-color: var(--brand);
  color: var(--brand);
}

.reminder-list {
  display: grid;
  gap: 14px;
}

.reminder-item {
  display: grid;
  gap: 14px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 14px;
}

.reminder-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reminder-item-header button {
  border: 2px solid var(--danger);
  background: transparent;
  color: var(--danger);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
}

.reminder-main-fields,
.reminder-copy-fields {
  gap: 14px;
}

.reminder-days-row {
  margin-bottom: -2px;
}

.reminder-days {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.reminder-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 2px solid #d7c3ae;
  border-radius: 999px;
  font-size: 1.24rem;
  line-height: 1;
  background: #fff8f1;
}

.reminder-day-pill input {
  width: auto;
  margin: 0;
}

.reminder-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.reminder-toggle-fields {
  gap: 14px;
}

.reminder-status-list {
  display: grid;
  gap: 10px;
}

.reminder-status-item {
  display: grid;
  gap: 5px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  padding: 10px 12px;
}

.reminder-status-main,
.reminder-status-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.reminder-status-item.is-due,
.reminder-status-item.is-missed {
  border-color: rgba(168, 43, 33, 0.5);
  background: linear-gradient(180deg, rgba(255, 236, 220, 0.9) 0%, white 100%);
}

.reminder-status-item.is-upcoming {
  border-color: rgba(10, 109, 146, 0.34);
  background: linear-gradient(180deg, rgba(226, 242, 248, 0.95) 0%, white 100%);
}

.reminder-status-item.is-complete {
  border-color: rgba(31, 106, 52, 0.35);
}

.reminder-status-title {
  color: var(--brand);
  font-size: 1.12rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reminder-status-summary {
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.4;
}

.reminder-status-meta,
.reminder-status-note {
  color: var(--muted);
  font-size: 1.16rem;
  line-height: 1.45;
}

.reminder-status-badge {
  font-size: 1.14rem;
  font-weight: 700;
}

.entry-next-card .reminder-status-summary,
.entry-next-card .reminder-status-note,
.entry-next-card .reminder-status-meta {
  font-size: 1.04rem;
}

.entry-next-card .reminder-status-summary {
  line-height: 1.25;
}

.entry-next-card .reminder-status-note,
.entry-next-card .reminder-status-meta {
  line-height: 1.3;
}

.reminder-status-badge.is-due,
.reminder-status-badge.is-missed {
  color: var(--danger);
}

.reminder-status-badge.is-upcoming {
  color: #0a6d92;
}

.reminder-status-badge.is-complete {
  color: var(--success);
}

.reminder-compliance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.reminder-compliance-card {
  display: grid;
  gap: 8px;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 14px;
}

.reminder-compliance-card h4 {
  margin: 0;
  color: var(--brand);
}

.reminder-compliance-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.reminder-compliance-note {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.season-status-grid {
  display: grid;
  gap: 12px;
}

.season-status-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 12px;
  padding: 14px;
}

.season-status-copy {
  display: grid;
  gap: 4px;
}

.season-status-copy strong {
  color: var(--brand);
}

.season-status-copy span {
  color: var(--muted);
  line-height: 1.4;
}

.season-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.season-status-actions .secondary-button {
  margin: 0;
}

.inline-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.chemical-inline-action {
  grid-template-columns: 48px minmax(0, 1.2fr) minmax(112px, 0.8fr) auto;
}

.treatment-product-select {
  display: none;
}

.treatment-product-label {
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(176, 111, 56, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 8px 12px;
}

.treatment-product-label.is-muted {
  color: var(--muted);
  font-weight: 700;
}

.chemical-stack {
  display: grid;
  gap: 10px;
}

.chemical-suggestion {
  margin-top: -2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 600;
}

.field-hint {
  min-height: 1.2em;
  color: var(--brand);
}

.chemical-secondary-row.is-hidden {
  display: none !important;
}

.chemical-toggle-button {
  width: auto;
  justify-self: start;
  margin-bottom: 0;
}

.chemical-toggle-button.is-hidden {
  display: none;
}

.treatment-remove-button {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(168, 43, 33, 0.5);
  border-radius: 12px;
  background: white;
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.treatment-remove-button svg {
  width: 27px;
  height: 27px;
  display: block;
}

.treatment-remove-button:focus,
.treatment-remove-button:hover {
  border-color: var(--danger);
  background: rgba(168, 43, 33, 0.08);
  outline: 2px solid rgba(168, 43, 33, 0.2);
  outline-offset: 2px;
}

.suggestion-apply-button {
  border: 1px solid rgba(200, 90, 10, 0.35);
  background: rgba(200, 90, 10, 0.08);
  color: var(--brand);
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 28px;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.inline-action .secondary-button.inline-button {
  width: auto;
  margin-bottom: 0;
  white-space: nowrap;
}

.input-suffix {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 14px;
  border: 2px solid #9f6f46;
  border-radius: 12px;
  background: #fdf3ea;
  color: var(--brand);
  font-size: 1.8rem;
  font-weight: 700;
}

.product-config-list {
  display: grid;
  gap: 12px;
}

.product-config-item {
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.2fr) 90px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  background: white;
}

.product-config-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  color: var(--brand);
}

.product-config-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.product-config-copy {
  display: grid;
  gap: 2px;
}

.product-config-copy strong {
  font-size: 0.92rem;
  color: var(--text);
}

.product-config-copy span {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: capitalize;
}

.product-dose-config {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(159, 111, 70, 0.24);
}

.product-dose-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}

.product-dose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.product-dose-row input {
  width: 124px;
}

.product-dose-row .product-dose-volume-input {
  width: 164px;
}

.product-dose-row .product-dose-multiplier-input {
  width: 92px;
}

.product-dose-row .product-dose-effect-input {
  width: 172px;
}

.product-dose-effect-field {
  white-space: nowrap;
}

.product-dose-effect-field.is-hidden {
  display: none;
}

.product-dose-mode {
  width: min(100%, 320px);
}

.product-dose-mode-static {
  width: min(100%, 320px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 2px solid #9f6f46;
  border-radius: 12px;
  background: #fdf3ea;
  color: var(--brand);
  font-weight: 900;
}

.product-dose-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 86ch;
}

.report-row {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.analysis-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 20px;
}

.analysis-intro {
  margin-bottom: 0;
}

.analysis-range-controls {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.analysis-range-label {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.analysis-range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analysis-range-button.secondary-button {
  width: auto;
  margin-bottom: 0;
  min-width: 88px;
}

.analysis-range-button.is-active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.analysis-grid {
  display: grid;
  gap: 20px;
}

.analysis-panel {
  gap: 18px;
}

.analysis-location-content {
  display: grid;
  gap: 18px;
}

.analysis-facility-section {
  display: grid;
  gap: 18px;
}

.analysis-facility-section + .analysis-facility-section {
  padding-top: 18px;
  border-top: 2px solid rgba(17, 19, 17, 0.12);
}

.analysis-location-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.analysis-location-header h3,
.analysis-insights-card h4,
.analysis-chart-heading {
  margin: 0;
}

.analysis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.analysis-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.analysis-legend-label {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
}

.analysis-legend-item-markers {
  padding-left: 6px;
  border-left: 1px solid rgba(17, 19, 17, 0.12);
}

.analysis-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.analysis-legend-swatch-ph {
  background: #a82b21;
}

.analysis-legend-swatch-cl {
  background: #0a6d92;
}

.analysis-legend-swatch-alk {
  background: #6f5a12;
}

.analysis-legend-swatch-tds {
  background: #366c7d;
}

.analysis-legend-swatch-calcium {
  background: #4f6f32;
}

.analysis-legend-swatch-cya {
  background: #8a4c7d;
}

.analysis-legend-swatch-combined {
  background: #674ca0;
}

.analysis-legend-swatch-temp {
  background: #c85a0a;
}

.analysis-legend-swatch-marker {
  background: var(--analysis-marker-color, #c85a0a);
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--analysis-marker-color, #c85a0a) 45%, transparent);
}

.analysis-stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.analysis-stat-card,
.analysis-chart-card,
.analysis-insights-card {
  background: white;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 14px;
}

.analysis-stat-card {
  display: grid;
  gap: 6px;
}

.analysis-stat-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.analysis-stat-value {
  font-size: 1.35rem;
  color: var(--text);
}

.analysis-stat-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.analysis-chart-stack {
  display: grid;
  gap: 12px;
}

.analysis-chart-heading {
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.analysis-chart-visual {
  position: relative;
}

.analysis-chart-svg {
  width: 100%;
  height: 196px;
  display: block;
  overflow: visible;
}

.analysis-marker-layer {
  position: absolute;
  inset: 0 20px 30px 42px;
  pointer-events: none;
}

.analysis-marker {
  position: absolute;
  top: calc(28px + (var(--analysis-marker-lane, 0) * 7px));
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 2;
}

.analysis-marker-trigger {
  border: 1.5px solid #ffffff;
  background: var(--analysis-marker-color, #2d6a4f);
  color: transparent;
  border-radius: 999px;
  width: 13px;
  height: 13px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(17, 19, 17, 0.16);
}

.analysis-marker-trigger:hover,
.analysis-marker-trigger:focus-visible {
  background: var(--analysis-marker-color, #2d6a4f);
  outline: 2px solid color-mix(in srgb, var(--analysis-marker-color, #2d6a4f) 35%, white);
  outline-offset: 2px;
}

.analysis-marker-trigger-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.analysis-marker-popover {
  position: absolute;
  top: 26px;
  min-width: 180px;
  max-width: min(240px, 68vw);
  background: #ffffff;
  border: 2px solid #c9a07c;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(17, 19, 17, 0.14);
  display: none;
  z-index: 5;
}

.analysis-marker-popover-center {
  left: 50%;
  transform: translateX(-50%);
}

.analysis-marker-popover-left {
  left: 0;
}

.analysis-marker-popover-right {
  right: 0;
}

.analysis-marker:hover .analysis-marker-popover,
.analysis-marker:focus-within .analysis-marker-popover,
.analysis-marker.is-open .analysis-marker-popover {
  display: block;
}

.analysis-marker-popover-title {
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.analysis-marker-popover-meta,
.analysis-marker-popover-body,
.analysis-marker-popover-warning {
  font-size: 0.8rem;
  line-height: 1.45;
}

.analysis-marker-popover-meta,
.analysis-marker-popover-body {
  color: var(--text);
  margin-top: 3px;
}

.analysis-marker-popover-warning {
  color: var(--danger);
  font-weight: 700;
  margin-top: 6px;
}

.analysis-grid-line {
  stroke: rgba(17, 19, 17, 0.12);
  stroke-width: 1;
}

.analysis-grid-line-vertical {
  stroke-dasharray: 4 6;
}

.analysis-axis-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.analysis-marker-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.analysis-chart-empty,
.analysis-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  background: white;
  border: 2px dashed #c9a07c;
  border-radius: 14px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  padding: 14px;
}

.analysis-insights-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 8px;
}

#reportsTab > * + * {
  margin-top: 20px;
}

.report-wide {
  margin-top: 0;
}

.report-panel-heading {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.report-panel-heading h3 {
  margin: 0;
}

.report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.report-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.report-controls label:first-of-type {
  margin-left: auto;
}

.report-controls input[type="date"] {
  border: 2px solid #8aa6be;
  border-radius: 12px;
  padding: 8px 42px 8px 10px;
  background: white;
  color: var(--text);
  width: 190px;
}

.report-controls input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: -30px;
}

.report-controls button {
  white-space: nowrap;
  width: auto;
  min-width: 148px;
  padding-left: 18px;
  padding-right: 18px;
}

.report-controls button {
  min-width: 148px;
}

.log-list {
  height: calc(var(--report-row-height) * var(--report-visible-rows));
  min-height: calc(var(--report-row-height) * 3);
  max-height: calc(var(--report-row-height) * var(--report-visible-rows));
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 10px;
  background: white;
  border-radius: 14px;
  border: 2px solid #b89676;
}

#setupLog.log-list {
  height: calc(var(--report-row-height) * var(--report-history-rows));
  min-height: calc(var(--report-row-height) * 3);
  max-height: calc(var(--report-row-height) * var(--report-history-rows));
}

.log-list {
  scrollbar-width: thin;
}

.log-list--facility-cards {
  display: grid;
  gap: 12px;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  scrollbar-gutter: auto;
}

.facility-log-section {
  display: grid;
  gap: 0;
  padding: 12px;
  min-height: 0;
  background: white;
  border: 2px solid rgba(184, 150, 118, 0.72);
  border-radius: 12px;
}

.facility-log-section + .facility-log-section {
  margin-top: 0;
}

.facility-log-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(17, 19, 17, 0.1);
}

.facility-log-heading strong {
  font-size: 1rem;
  font-weight: 900;
}

.facility-log-heading span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.facility-log-entries {
  max-height: calc(var(--report-row-height) * 3);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.facility-log-section .log-item {
  padding-left: 2px;
  padding-right: 2px;
}

.treatment-outcome-analytics {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.treatment-outcome-card {
  display: grid;
  gap: 0;
  padding: 12px;
  background: white;
  border: 2px solid rgba(184, 150, 118, 0.72);
  border-radius: 12px;
}

.treatment-outcome-table-wrap {
  overflow-x: auto;
}

.treatment-outcome-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.treatment-outcome-table th,
.treatment-outcome-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(17, 19, 17, 0.1);
  vertical-align: top;
}

.treatment-outcome-table th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.treatment-outcome-table td strong,
.treatment-outcome-table td span {
  display: block;
}

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

.muted-inline {
  display: inline;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.treatment-outcome-table td .muted-inline {
  display: inline;
}

.log-list::-webkit-scrollbar {
  width: 10px;
}

.log-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}

.log-list::-webkit-scrollbar-thumb {
  background: rgba(31, 33, 29, 0.15);
  border-radius: 999px;
}

.log-list::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 33, 29, 0.28);
}

.log-item {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 12px;
  align-items: start;
}

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

.log-item-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.log-item-label {
  font-weight: 700;
  display: block;
  min-width: 0;
}

.log-item-asset {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.log-item-summary {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.log-item-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.log-flag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.log-flag-warning {
  background: rgba(200, 90, 10, 0.14);
  color: var(--brand);
  border: 1px solid rgba(200, 90, 10, 0.32);
}

.log-flag-danger {
  background: rgba(168, 43, 33, 0.12);
  color: var(--danger);
  border: 1px solid rgba(168, 43, 33, 0.3);
}

.log-item-meta {
  grid-column: 2 / span 1;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.log-item-meta div {
  margin-bottom: 4px;
}

.filter-status {
  background: white;
  border: 2px solid #b89676;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.setup-note {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 12px;
}

.setup-note-warning {
  color: var(--danger);
  font-weight: 800;
}

.filter-help-note {
  margin-top: -4px;
}

.help-tooltip {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
}

.setup-section-label {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.facility-add-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.facility-add-row .secondary-button {
  min-height: 48px;
  white-space: nowrap;
}

.role-access-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, 0.6fr) minmax(110px, 0.6fr);
  gap: 10px 12px;
  align-items: center;
  max-width: 620px;
}

.role-access-header,
.role-access-role {
  font-weight: 700;
}

.role-access-header {
  color: var(--muted);
}

.role-access-toggle {
  min-height: 38px;
  font-size: 1rem;
}

.role-access-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.asset-config-list {
  display: grid;
  gap: 12px;
}

.asset-config-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border: 2px solid rgba(184, 150, 118, 0.65);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 250, 245, 0.78);
}

.asset-config-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.asset-config-header::-webkit-details-marker {
  display: none;
}

.asset-config-copy {
  display: grid;
  gap: 4px;
  align-self: center;
}

.asset-config-copy strong {
  font-size: 1rem;
}

.asset-config-copy span {
  color: var(--muted);
  font-size: 0.9rem;
}

.asset-config-expand-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.asset-config-expand-label::after {
  content: "v";
  color: var(--text);
  font-size: 0.84rem;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.asset-config-item[open] .asset-config-expand-label::after {
  transform: rotate(0deg);
}

.asset-config-body {
  display: grid;
  gap: 14px;
}

.asset-setting-group {
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(159, 111, 70, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
}

.asset-setting-group-title {
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.asset-identity-config,
.asset-sanitation-config {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(240px, 1fr) minmax(140px, 0.32fr) minmax(120px, 0.28fr);
  gap: 10px;
  align-items: end;
}

.asset-sanitation-config {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.86fr);
  align-items: stretch;
}

.asset-sanitation-subgroup {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(159, 111, 70, 0.24);
  border-radius: 8px;
  background: rgba(255, 250, 245, 0.52);
}

.asset-sanitation-subgroup:only-child {
  grid-column: 1 / -1;
}

.asset-sanitation-subtitle {
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.asset-sanitation-fields {
  display: grid;
  gap: 10px;
  align-items: end;
}

.asset-sanitation-fields--sanitiser {
  grid-template-columns: minmax(160px, 0.44fr) minmax(280px, 1fr);
}

.asset-sanitation-fields--shock {
  grid-template-columns: minmax(170px, 1fr) minmax(120px, 0.48fr);
}

.asset-identity-config label,
.asset-sanitation-config label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.asset-identity-config label > span,
.asset-sanitation-config label > span,
.asset-shock-toggle > span:first-child {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}

.asset-identity-config input,
.asset-identity-config select,
.asset-sanitation-config input,
.asset-sanitation-config select {
  width: 100%;
  min-width: 0;
}

.asset-accent-input {
  min-height: 48px;
  padding: 4px;
}

.asset-chlorine-product-wrap.is-hidden {
  display: none;
}

.asset-shock-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 2px 0;
  color: var(--text);
  font-weight: 900;
}

.asset-shock-control input {
  width: 24px;
  height: 24px;
}

.asset-interval-control {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.asset-interval-control > span {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 900;
}

.asset-sanitation-note {
  margin-top: -2px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.asset-measurement-config {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(159, 111, 70, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
}

.asset-measurement-title {
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.asset-guidance-config,
.asset-environment-config {
  display: grid;
  grid-template-columns: minmax(170px, 0.3fr) minmax(290px, 0.55fr) minmax(320px, 1fr);
  gap: 10px;
  align-items: center;
}

.asset-environment-config {
  grid-template-columns: minmax(140px, 0.25fr) minmax(210px, 0.35fr) minmax(380px, 1fr);
  align-items: start;
}

.asset-guidance-config select,
.asset-environment-config select,
.asset-environment-config input {
  width: 100%;
  min-width: 0;
}

.asset-threshold-config {
  display: grid;
  grid-template-columns: minmax(240px, 0.52fr) minmax(420px, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 19, 17, 0.1);
}

.asset-operating-config,
.asset-filter-config {
  display: grid;
  grid-template-columns: minmax(240px, 0.52fr) minmax(420px, 1fr);
  gap: 12px;
  align-items: start;
}

.asset-threshold-copy {
  display: grid;
  gap: 4px;
}

.asset-threshold-copy span {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}

.asset-threshold-copy strong {
  font-size: 0.95rem;
}

.asset-threshold-copy small {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.asset-threshold-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 10px;
}

.asset-operating-fields,
.asset-filter-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 10px;
}

.asset-operating-fields {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.asset-filter-fields {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.asset-threshold-fields label,
.asset-operating-fields label,
.asset-filter-fields label {
  display: grid;
  gap: 5px;
}

.asset-threshold-fields label span,
.asset-operating-fields label span,
.asset-filter-fields label span {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}

.asset-threshold-fields input,
.asset-operating-fields input,
.asset-filter-fields input {
  width: 100%;
  min-width: 0;
}

.asset-filter-fields label.is-muted {
  opacity: 0.58;
}

.asset-filter-toggle {
  align-self: end;
}

.asset-filter-toggle input {
  width: 22px;
  height: 22px;
}

.asset-location-actions {
  grid-column: 3 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px;
  min-width: 0;
}

.asset-location-button {
  min-height: 44px;
  width: 100%;
  white-space: nowrap;
}

.asset-coordinate-group {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
}

.asset-coordinate-group label {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  border: 2px solid rgba(151, 94, 53, 0.55);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.asset-coordinate-group label span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.asset-coordinate-group input {
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.08rem;
  font-weight: 900;
}

.asset-coordinate-group input:read-only {
  color: var(--text);
}

.asset-guidance-config label,
.asset-environment-config label {
  font-size: 0.95rem;
  font-weight: 900;
}

.asset-guidance-config span,
.asset-environment-config span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.asset-environment-note {
  grid-column: 2 / -1;
}

.asset-config-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
  border-top: 1px solid rgba(17, 19, 17, 0.1);
}

.asset-remove-button {
  color: var(--danger);
  border-color: rgba(168, 43, 33, 0.5);
  background: rgba(255, 238, 233, 0.62);
}

.asset-measurement-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.asset-measurement-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 800;
}

.asset-measurement-toggle input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}

.asset-config-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  width: fit-content;
  max-width: 100%;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.asset-config-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 4px;
}

.asset-config-toggle span {
  min-width: 0;
}

.asset-remove-button {
  min-height: 48px;
  white-space: nowrap;
}

.setup-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 18px 0 0;
}

.setup-save-status {
  color: var(--success, #1f8a5f);
  font-weight: 600;
}

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

.auth-actions .secondary-button {
  width: 100%;
}

#authStatus {
  min-height: 3.8em;
  padding: 12px 14px;
  background: white;
  border: 2px solid #b89676;
  border-radius: 14px;
  margin-top: 4px;
}

.sync-diagnostics {
  display: none;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid rgba(184, 150, 118, 0.34);
}

.sync-diagnostics.is-visible {
  display: grid;
}

.sync-diagnostics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.sync-diagnostics-list li {
  padding: 10px 12px;
  border: 2px solid rgba(184, 150, 118, 0.4);
  border-radius: 12px;
  background: white;
}

.sync-diagnostics-list strong {
  display: block;
  color: var(--brand);
}

.sync-diagnostics-list span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 3px;
}

.sync-diagnostics-list .sync-error {
  color: var(--danger);
  font-weight: 700;
}



.log-item.out-of-bounds {
  background: rgba(255, 122, 30, 0.08);
}

.log-item.treatment-deferred {
  background: rgba(200, 90, 10, 0.07);
}

.log-item.out-of-bounds strong {
  color: var(--danger);
}

.log-item.out-of-bounds span {
  color: var(--danger);
}

@media (min-width: 1040px) {
  .entry-form {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    align-items: start;
  }

  .entry-column--measurements {
    grid-column: 1;
  }

  .entry-column--actions {
    grid-column: 2;
  }

}

@media (max-width: 960px) {
  .app-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .app-header h1 {
    font-size: 2.05rem;
  }

  .app-logo {
    width: 38px;
    height: 38px;
  }

  .test-badge {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .header-right {
    justify-content: flex-start;
    gap: 8px;
  }

  .header-right select {
    min-width: 170px;
    max-width: 210px;
    font-size: 1rem;
  }

  .panel-grid,
  .report-row,
  .setup-grid {
    grid-template-columns: 1fr;
  }

  .product-config-item {
    grid-template-columns: 1fr;
  }

  .asset-config-item {
    grid-template-columns: 1fr;
  }

  .asset-config-header {
    display: grid;
  }

  .asset-identity-config,
  .asset-sanitation-config {
    grid-template-columns: 1fr;
  }

  .asset-sanitation-fields--sanitiser,
  .asset-sanitation-fields--shock {
    grid-template-columns: 1fr;
  }

  .asset-guidance-config,
  .asset-environment-config,
  .asset-threshold-config,
  .asset-operating-config,
  .asset-filter-config {
    grid-template-columns: 1fr;
  }

  .asset-threshold-fields,
  .asset-operating-fields,
  .asset-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-location-actions,
  .asset-coordinate-group,
  .asset-environment-note {
    grid-column: auto;
  }

  .asset-location-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-coordinate-group {
    grid-template-columns: 1fr;
  }

  .weather-summary-days {
    grid-template-columns: 1fr;
  }

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

  .role-access-grid {
    grid-template-columns: 1fr 1fr;
  }

  .role-access-header:first-child {
    display: none;
  }

  .role-access-role {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .admin-user-item {
    grid-template-columns: 1fr;
  }

  .platform-site-row,
  .platform-site-row--header {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .platform-site-row--header {
    display: none;
  }

  .chemical-inline-action {
    grid-template-columns: 48px 1fr 1fr auto;
  }

  .analysis-header,
  .analysis-location-header {
    flex-direction: column;
    align-items: stretch;
  }

  .analysis-range-controls {
    justify-items: start;
  }

  .reminder-compliance-grid {
    grid-template-columns: 1fr;
  }

  .reminder-time-grid {
    grid-template-columns: 1fr;
  }

  .reminder-days {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .report-panel-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .report-controls {
    justify-content: flex-start;
  }

  .report-controls label:first-of-type {
    margin-left: 0;
  }

  .season-status-item {
    grid-template-columns: 1fr;
  }

  .season-status-actions {
    justify-content: flex-start;
  }

  .maintenance-grid {
    grid-template-columns: 1fr;
  }

  .treatment-slot-grid {
    grid-template-columns: 1fr;
  }

  .decision-card--needs-treatment {
    position: relative;
    top: auto;
  }
}

@media (max-width: 700px) {
  .tab-nav {
    align-items: stretch;
  }

  .tab-group {
    width: 100%;
  }

  .tab-group--admin {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  body {
    padding: 14px;
  }

  .app-header {
    grid-template-columns: 1fr;
  }

  .header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .header-right select {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  .tab-panel,
  .entry-card,
  .entry-next-card {
    padding: 16px;
  }

  .chemical-inline-action {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .chemical-inline-action select {
    grid-column: 2 / 4;
  }

  .chemical-inline-action input {
    grid-column: 1 / 3;
  }

  .input-suffix {
    grid-column: 3;
    justify-content: flex-start;
    min-height: 44px;
  }
}