/* IDRALOCK professional appearance. Existing controls and data stay in place. */
:root {
  --ui-bg: #f3f6fa;
  --ui-surface: #ffffff;
  --ui-ink: #172b46;
  --ui-muted: #53657b;
  --ui-line: #dce4ed;
  --ui-blue: #155bb6;
  --ui-blue-soft: #eaf2ff;
  --ui-green: #176748;
  --ui-green-soft: #e7f4ed;
  --ui-warn: #855005;
  --ui-warn-soft: #fff3df;
  --ui-orange: #8b450b;
  --ui-orange-soft: #fff0e5;
  --ui-red: #a82839;
  --ui-red-soft: #fdecef;
  --ui-on-blue: #ffffff;
  --ui-shadow: 0 12px 36px rgb(23 43 70 / 12%);
  --bg-1: var(--ui-bg);
  --bg-2: var(--ui-bg);
  --bg-3: var(--ui-bg);
  --panel: var(--ui-surface);
  --panel-strong: var(--ui-surface);
  --panel-soft: var(--ui-bg);
  --panel-line: var(--ui-line);
  --text-main: var(--ui-ink);
  --text-soft: var(--ui-muted);
  --text-muted: var(--ui-muted);
  --success: var(--ui-green);
  --warning: var(--ui-warn);
  --warning-strong: var(--ui-orange);
  --danger: var(--ui-red);
  --info: var(--ui-blue);
  --radius-panel: 18px;
  --radius-soft: 12px;
  --shadow-deep: none;
  --shadow-soft: none;
}

:root[data-theme="dark"] {
  --ui-bg: #0c1727;
  --ui-surface: #142237;
  --ui-ink: #edf3fc;
  --ui-muted: #acbdd1;
  --ui-line: #2c4058;
  --ui-blue: #a4cdff;
  --ui-blue-soft: #1c3657;
  --ui-green: #80d9af;
  --ui-green-soft: #163c32;
  --ui-warn: #ffce80;
  --ui-warn-soft: #45341c;
  --ui-orange: #ffbb89;
  --ui-orange-soft: #472c21;
  --ui-red: #ffaab3;
  --ui-red-soft: #422633;
  --ui-on-blue: #11243b;
  --ui-shadow: 0 12px 36px rgb(0 0 0 / 30%);
}

body.professional-ui {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: "Segoe UI", "Aptos", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body.professional-ui::before,
body.professional-ui::after,
.professional-ui .glass-panel::before,
.professional-ui .hero-panel::after,
.professional-ui .hero-subtitle::before {
  content: none;
}

.professional-ui .app-frame {
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 0 16px calc(100px + env(safe-area-inset-bottom, 0px));
}

.professional-ui :is(main, section, article, form, .hero-copy, .control-copy) {
  min-width: 0;
}

.professional-ui :is(button, input, select, textarea) {
  font-family: inherit;
}

.professional-ui button {
  min-height: 44px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
}

.professional-ui :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ui-blue);
  outline-offset: 3px;
}

.professional-ui button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.professional-ui :is(button, input, select, textarea) {
  scroll-margin-block: 100px;
}

.professional-ui .glass-panel {
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: none;
  backdrop-filter: none;
}

.professional-ui .content-card {
  height: auto;
  padding: 18px;
}

.professional-ui .section-head {
  gap: 12px;
  margin-bottom: 14px;
}

.professional-ui .section-title {
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.professional-ui .section-head-centered {
  justify-content: flex-start;
}

/* Compact brand, property and connection header. */
.professional-ui .dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0 -16px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 14px;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-surface);
}

.professional-ui .dashboard-hero .hero-topline {
  display: contents;
}

.professional-ui .dashboard-hero .hero-kicker-wrap {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 20px;
}

.professional-ui .hero-kicker-icon {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-blue);
  box-shadow: none;
}

.professional-ui .hero-kicker-icon svg {
  width: 23px;
  height: 23px;
}

.professional-ui .dashboard-hero .hero-main {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.professional-ui .brand-mark {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--ui-blue);
}

.professional-ui .brand-mark svg {
  width: 24px;
  height: 24px;
}

.professional-ui .dashboard-hero .account-menu {
  grid-area: 1 / 2;
  align-self: start;
  z-index: 40;
}

.professional-ui .dashboard-hero .hero-title,
.professional-ui .dashboard-hero .hero-title--single {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  color: var(--ui-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.professional-ui .dashboard-hero .hero-title-brand,
.professional-ui .dashboard-hero .hero-title--single .hero-title-brand {
  display: inline;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.055em;
}

.professional-ui .dashboard-hero .hero-title-model {
  display: inline;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.professional-ui .hero-subtitle {
  display: block;
  margin: 4px 0 0;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.professional-ui .dashboard-hero :is(.hero-kicker, .hero-technology-mark, .hero-state-divider, .hero-status-ornament, .menu-button-chevron),
.professional-ui .settings-button .menu-button-label {
  display: none;
}

.professional-ui .dashboard-hero .hero-state-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.professional-ui .dashboard-hero .hero-status-pill {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: none;
}

.professional-ui .hero-status-pill::before {
  width: 6px;
  height: 6px;
  background: currentColor;
  box-shadow: none;
}

.professional-ui .dashboard-hero .hero-live-chip {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 400;
  box-shadow: none;
}

.professional-ui .hero-live-chip::before {
  display: none;
}

.professional-ui .hero-utility-row {
  gap: 8px;
  margin-top: 12px;
}

.professional-ui .header-menu-button,
.professional-ui .settings-button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  box-shadow: none;
}

.professional-ui .settings-button-icon {
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
}

.professional-ui .settings-button-icon svg {
  width: 21px;
  height: 21px;
}

.professional-ui .account-menu-panel {
  right: 0;
  width: min(288px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100svh - 110px);
  overflow-y: auto;
  padding: 14px;
  border-color: var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
  backdrop-filter: none;
}

.professional-ui .tools-menu-panel {
  right: auto;
}

.professional-ui .account-menu-field {
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 500;
}

.professional-ui .account-menu-item {
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 500;
}

.professional-ui .account-menu-item:hover,
.professional-ui .header-menu-button:hover,
.professional-ui .header-menu-button[aria-expanded="true"],
.professional-ui .tools-menu .account-menu-item.is-active {
  background: var(--ui-blue-soft);
  color: var(--ui-blue);
  border-color: var(--ui-line);
  transform: none;
}

.professional-ui .device-switcher {
  margin-top: 14px;
  padding: 14px;
  gap: 12px;
}

.professional-ui .device-chip-label {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.professional-ui .device-chip-list {
  gap: 8px;
}

.professional-ui .device-chip-button {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: 14px;
  box-shadow: none;
}

.professional-ui .device-chip-button.is-active {
  background: var(--ui-blue-soft);
  color: var(--ui-blue);
  border-color: var(--ui-blue);
  box-shadow: none;
}

.professional-ui .dashboard-refresh-bar {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.professional-ui :is(.dashboard-refresh-label, .dashboard-refresh-value) {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.professional-ui .dashboard-refresh-warning {
  max-width: none;
  padding: 10px 12px;
  background: var(--ui-warn-soft);
  color: var(--ui-warn);
  border: 1px solid var(--ui-warn);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* Information comes first, controls remain separate from their state. */
.professional-ui .dashboard-grid,
.professional-ui .dashboard-grid.has-well-section {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.professional-ui .dashboard-grid > * {
  grid-area: auto;
}

.professional-ui .hero-card { order: 1; }
.professional-ui .consumption-combo-card { order: 2; }
.professional-ui .plant-card { order: 3; }
.professional-ui .well-water-card { order: 4; }
.professional-ui .irrigation-entry-card { order: 5; }
.professional-ui .tank-anomaly-card { order: 1; }
.professional-ui .tank-main-card { order: 2; }
.professional-ui .tank-status-card { order: 3; }
.professional-ui .tank-loads-card { order: 4; }
.professional-ui .tank-event-card { order: 5; }

.professional-ui .dashboard-grid > :is(.notifications-card, .consumption-summary-card, .tank-history-card) {
  display: none;
}

.professional-ui .status-pill {
  min-height: 26px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  box-shadow: none;
}

.professional-ui .tone-success {
  --status-ink: var(--ui-green);
  --status-bg: var(--ui-green-soft);
}
.professional-ui .tone-warning {
  --status-ink: var(--ui-warn);
  --status-bg: var(--ui-warn-soft);
}
.professional-ui .tone-warning-strong {
  --status-ink: var(--ui-orange);
  --status-bg: var(--ui-orange-soft);
}
.professional-ui .tone-danger {
  --status-ink: var(--ui-red);
  --status-bg: var(--ui-red-soft);
}
.professional-ui .tone-info {
  --status-ink: var(--ui-blue);
  --status-bg: var(--ui-blue-soft);
}
.professional-ui .tone-neutral {
  --status-ink: var(--ui-muted);
  --status-bg: var(--ui-bg);
}

.professional-ui .status-pill[class*="tone-"] {
  background: var(--status-bg);
  color: var(--status-ink);
  border-color: transparent;
}

.professional-ui :is(.hero-card, .tank-anomaly-card)[class*="tone-"] {
  background: var(--status-bg);
  color: var(--status-ink);
  border-color: transparent;
}

.professional-ui :is(.hero-card, .tank-anomaly-card) .section-head {
  margin-bottom: 6px;
}

.professional-ui :is(.hero-card, .tank-anomaly-card) .section-title {
  font-size: 18px;
}

.professional-ui :is(.hero-card, .tank-anomaly-card) .message-ribbon {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui .message-ribbon {
  background: var(--ui-bg);
  color: var(--ui-muted);
  border-color: var(--ui-line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui .status-list,
.professional-ui .consumption-list {
  gap: 0;
}

.professional-ui .status-row,
.professional-ui .consumption-row {
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.professional-ui .status-row:last-child,
.professional-ui .consumption-row:last-child {
  padding-bottom: 0;
}

.professional-ui :is(.status-label, .consumption-label, .tile-label) {
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.professional-ui :is(.status-value, .consumption-value, .tile-value) {
  color: var(--ui-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.professional-ui .control-copy {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
}

.professional-ui .control-copy .status-label {
  font-weight: 500;
}

.professional-ui .control-copy > :last-child:not(:first-child) {
  color: var(--status-ink, var(--ui-muted));
  background: transparent;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.professional-ui .status-control,
.professional-ui .status-pill.status-control[class*="tone-"] {
  flex: 0 0 auto;
  min-height: 44px;
  max-width: 52%;
  padding: 10px 12px;
  background: var(--ui-surface);
  color: var(--ui-blue);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
}

.professional-ui #water-valve.status-control {
  color: var(--ui-red);
}

.professional-ui .status-control:hover:not(:disabled) {
  background: var(--ui-bg);
  border-color: var(--ui-muted);
  filter: none;
  transform: none;
  box-shadow: none;
}

.professional-ui .consumption-card {
  text-align: left;
}

.professional-ui .consumption-combo-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.professional-ui .gauge-wrap {
  width: 100%;
  margin: 0;
}

/* Keep the original SVG measurable for the existing telemetry renderer. */
.professional-ui .gauge-svg {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.professional-ui :is(.gauge-meta, .gauge-label, .consumption-inline-label, .consumption-pill-wrap) {
  display: none;
}

.professional-ui .gauge-center {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  transform: none;
}

.professional-ui .gauge-value,
.professional-ui .tank-level-value {
  color: var(--ui-ink);
  font-family: inherit;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.professional-ui .gauge-unit,
.professional-ui .tank-level-unit {
  margin: 0;
  color: var(--ui-muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

.professional-ui .consumption-inline {
  padding: 0;
  border: 0;
}

.professional-ui .consumption-message {
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.professional-ui :is(.history-entry-copy, .notifications-copy, .average-note, .tank-event-copy) {
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui .history-cta-button {
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-blue);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.professional-ui .history-cta-button::after {
  content: "\2192";
  margin-left: 8px;
  font-size: 18px;
}

.professional-ui .tank-level-stack {
  gap: 14px;
}

.professional-ui .tank-level-caption {
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.professional-ui .tank-level-line {
  margin-top: 4px;
  gap: 8px;
}

.professional-ui .tank-level-track {
  height: 10px;
  background: var(--ui-line);
  border: 0;
}

.professional-ui .tank-level-fill {
  background: var(--ui-blue);
  box-shadow: none;
}

.professional-ui .tank-level-meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.professional-ui .tank-level-meta-value {
  font-size: 14px;
  font-weight: 500;
}

.professional-ui .tank-level-meta-caption {
  font-size: 12px;
}

/* Forms, administration and history share the same surfaces and contrast. */
.professional-ui .auth-screen {
  min-height: calc(100svh - 100px);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 0 20px;
}

.professional-ui .auth-card {
  max-width: 420px;
  padding: 24px 20px;
}

.professional-ui .auth-title {
  display: block;
  color: var(--ui-ink);
  font-family: inherit;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.035em;
  text-shadow: none;
}

.professional-ui .auth-card .hero-kicker {
  margin-bottom: 8px;
  color: var(--ui-blue);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.professional-ui .auth-card-copy {
  margin-bottom: 24px;
}

.professional-ui :is(.auth-form, .admin-form) {
  gap: 16px;
}

.professional-ui .auth-label {
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.professional-ui :is(.auth-input, .admin-select, .settings-section select, .app-dialog select, .app-dialog input:not([type="checkbox"]):not([type="radio"])) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}

.professional-ui select.auth-input,
.professional-ui select.admin-select,
.professional-ui .app-dialog select {
  appearance: auto;
  padding-right: 8px;
}

.professional-ui .auth-input-password {
  padding-right: 52px;
}

.professional-ui .auth-input::placeholder {
  color: var(--ui-muted);
  opacity: 0.8;
}

.professional-ui .auth-input:focus {
  border-color: var(--ui-blue);
  box-shadow: none;
}

.professional-ui .password-toggle {
  width: 44px;
  height: 44px;
  right: 2px;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-muted);
}

.professional-ui .password-toggle.is-active,
.professional-ui .password-toggle:hover:not(:disabled) {
  background: var(--ui-blue-soft);
  color: var(--ui-blue);
}

.professional-ui :is(.auth-submit, .retry-button, .notifications-button-primary) {
  min-height: 44px;
  padding: 11px 16px;
  background: var(--ui-blue);
  color: var(--ui-on-blue);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
}

.professional-ui :is(.ghost-action-button, .notifications-button-secondary, .history-range-button) {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--ui-surface);
  color: var(--ui-blue);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.professional-ui .history-range-button.is-active,
.professional-ui .ghost-action-button.is-active {
  background: var(--ui-blue-soft);
  color: var(--ui-blue);
  border-color: var(--ui-blue);
}

.professional-ui :is(.history-cta-button, .notifications-button, .auth-submit, .ghost-action-button):hover:not(:disabled) {
  transform: none;
  filter: none;
  box-shadow: none;
}

.professional-ui :is(.auth-error, .notifications-feedback.is-error, .admin-feedback.is-error, .error-badge) {
  background: var(--ui-red-soft);
  color: var(--ui-red);
  border-color: var(--ui-red);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui .notifications-feedback {
  background: var(--ui-bg);
  color: var(--ui-muted);
  border-color: var(--ui-line);
  font-size: 14px;
}

.professional-ui .notifications-feedback.is-success,
.professional-ui .admin-feedback:not(.is-error) {
  background: var(--ui-green-soft);
  color: var(--ui-green);
  border-color: var(--ui-green);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui :is(.history-view, .admin-view, .technical-view, .client-devices-view) {
  margin-top: 14px;
  gap: 14px;
}

.professional-ui :is(.history-panel, .history-content, .history-details-grid, .irrigation-panel, .irrigation-cycles) {
  gap: 16px;
}

.professional-ui :is(.history-detail-card, .history-chart-card, .history-list-card, .irrigation-cycle-card, .info-tile, .average-card-body, .technical-summary-item, .technical-device-card, .client-device-card, .admin-device-item) {
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: none;
}

.professional-ui :is(.admin-checkbox, .admin-device-option, .admin-meta-row, .irrigation-toggle, .history-list-row) {
  min-height: 44px;
  border-color: var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
  color: var(--ui-ink);
}

.professional-ui :is(.admin-checkbox input, .admin-device-option input, .irrigation-toggle input) {
  width: 20px;
  height: 20px;
  accent-color: var(--ui-blue);
}

.professional-ui :is(.admin-checkbox-label, .admin-device-option-title, .admin-meta-label, .admin-meta-value, .history-list-date, .history-list-value, .history-empty, .technical-anomaly-list, .admin-intro-text, .irrigation-toggle) {
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui :is(.admin-build-debug, .admin-device-property, .admin-device-option-meta, .technical-device-customer, .technical-summary-label, .irrigation-cycle-window, .history-legend-item, .history-bar-value, .history-bar-label, .metric-caption) {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

.professional-ui .admin-meta-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.professional-ui .admin-meta-value {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.professional-ui .admin-delete-button {
  background: var(--ui-red-soft);
  color: var(--ui-red);
  border-color: var(--ui-line);
}

.professional-ui .admin-empty-state {
  border-color: var(--ui-line);
  font-size: 14px;
}

.professional-ui .technical-actions .status-control {
  max-width: none;
}

.professional-ui .irrigation-cycle-card.is-active-now {
  background: var(--ui-blue-soft);
  border-color: var(--ui-blue);
}

.professional-ui .history-details-list .consumption-row {
  border-bottom-color: var(--ui-line);
}

.professional-ui .history-chart {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-auto-columns: minmax(46px, 46px);
  gap: 8px;
  padding-bottom: 8px;
  scrollbar-color: var(--ui-muted) var(--ui-bg);
}

.professional-ui .history-chart::-webkit-scrollbar-thumb {
  background: var(--ui-muted);
}

.professional-ui .history-bar-fill {
  background: var(--ui-blue);
  border-radius: 5px 5px 0 0;
  box-shadow: none;
}

.professional-ui .history-bar-fill-well {
  background: var(--ui-green);
}

.professional-ui .history-bar-stack {
  background: var(--ui-line);
  border-radius: 5px 5px 0 0;
  box-shadow: none;
}

.professional-ui :is(.history-bar-fill, .history-bar-stack).is-zero {
  background: var(--ui-line);
  box-shadow: none;
}

.professional-ui :is(.history-bar-fill, .history-bar-stack).is-missing {
  background: repeating-linear-gradient(135deg, var(--ui-line) 0 4px, var(--ui-bg) 4px 8px);
  box-shadow: none;
}

.professional-ui .loading-ring {
  border-color: var(--ui-line);
  border-top-color: var(--ui-blue);
  box-shadow: none;
}

.professional-ui :is(.loading-panel, .error-panel) {
  margin-top: 16px;
  padding: 24px 18px;
}

.professional-ui :is(.loading-title, .error-title) {
  color: var(--ui-ink);
  font-size: 18px;
  font-weight: 600;
}

.professional-ui :is(.loading-text, .error-text) {
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Persistent navigation and accessible settings/confirmation dialogs. */
.professional-ui .app-bottom-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 440px);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-muted);
}

.professional-ui .app-bottom-nav button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  padding: 7px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.professional-ui .app-bottom-nav button[aria-current="page"],
.professional-ui .app-bottom-nav button[aria-selected="true"],
.professional-ui .app-bottom-nav button.is-active {
  background: var(--ui-blue-soft);
  color: var(--ui-blue);
}

.professional-ui .app-bottom-nav svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.professional-ui .nav-attention {
  position: absolute;
  top: 2px;
  left: calc(50% + 10px);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ui-warn-soft);
  color: var(--ui-warn);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.professional-ui .app-dialog {
  width: min(480px, calc(100% - 24px));
  max-width: 480px;
  max-height: calc(100svh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: auto;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}

.professional-ui .app-dialog::backdrop {
  background: rgb(6 17 34 / 58%);
}

.professional-ui .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.professional-ui .dialog-header :is(h2, h3) {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.professional-ui .app-dialog > h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.professional-ui .dialog-header button,
.professional-ui .dialog-actions button,
.professional-ui .settings-section > button {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-blue);
  font-size: 14px;
}

.professional-ui .dialog-header button {
  flex: 0 0 auto;
  min-width: 44px;
}

.professional-ui .dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.professional-ui .dialog-actions button {
  flex: 1 1 auto;
}

.professional-ui .dialog-actions .auth-submit {
  background: var(--ui-blue);
  color: var(--ui-on-blue);
  border-color: transparent;
}

.professional-ui .dialog-actions .danger-button,
.professional-ui .dialog-actions [data-tone="danger"] {
  background: var(--ui-red);
  color: var(--ui-surface);
  border-color: transparent;
}

.professional-ui .settings-section {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-surface);
}

.professional-ui .settings-section:last-child {
  margin-bottom: 0;
}

.professional-ui .settings-section h3 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 600;
}

.professional-ui .app-dialog p,
.professional-ui .settings-section label,
.professional-ui .settings-section .settings-copy {
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.5;
}

.professional-ui .app-settings-dialog .notifications-card {
  display: grid;
  grid-area: auto;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 14px;
}

.professional-ui .app-settings-dialog .notifications-actions {
  grid-template-columns: minmax(0, 1fr);
}

.professional-ui .app-settings-dialog .notifications-head {
  flex-wrap: wrap;
}

.professional-ui .account-modal {
  z-index: 90;
  align-items: center;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: rgb(6 17 34 / 58%);
}

.professional-ui .account-modal-card {
  max-height: calc(100svh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  padding: 20px;
  background: var(--ui-surface);
  border-radius: 20px;
}

.professional-ui .update-notice {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: min(408px, calc(100% - 32px));
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--ui-shadow);
}

.professional-ui .update-notice p {
  flex: 1 1 180px;
  margin: 0;
}

.professional-ui .update-notice button {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--ui-blue);
  color: var(--ui-on-blue);
}

.professional-ui .update-notice .dialog-actions {
  width: 100%;
  margin-top: 0;
}

.professional-ui .update-notice .ghost-action-button {
  background: var(--ui-surface);
  color: var(--ui-blue);
  border: 1px solid var(--ui-line);
}

@media (min-width: 52rem) {
  .professional-ui .app-frame {
    width: min(100%, 1040px);
    padding: 24px 24px calc(114px + env(safe-area-inset-bottom, 0px));
  }

  .professional-ui .dashboard-hero {
    margin: 0;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 24px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
  }

  .professional-ui .dashboard-hero .hero-kicker-wrap {
    left: 24px;
    top: calc(22px + env(safe-area-inset-top, 0px));
  }

  .professional-ui .dashboard-grid,
  .professional-ui .dashboard-grid.has-well-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    grid-template-areas: none;
  }

  .professional-ui .dashboard-grid > :is(.hero-card, .tank-anomaly-card) {
    grid-column: 1 / -1;
  }

  .professional-ui .dashboard-grid > :is(.consumption-combo-card, .plant-card, .tank-main-card, .tank-status-card) {
    align-self: stretch;
  }

  .professional-ui .app-bottom-nav {
    width: min(100%, 1040px);
    padding-inline: 24px;
    border: 1px solid var(--ui-line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }

  .professional-ui .auth-screen {
    min-height: calc(100svh - 138px);
  }

  .professional-ui .irrigation-cycles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 359px) {
  .professional-ui .app-frame {
    padding-inline: 12px;
  }

  .professional-ui .dashboard-hero {
    margin-inline: -12px;
    padding-inline: 16px;
  }

  .professional-ui .dashboard-hero .hero-kicker-wrap {
    left: 16px;
  }

  .professional-ui .content-card {
    padding: 14px;
  }

  .professional-ui .status-row {
    gap: 8px;
  }

  .professional-ui .status-control {
    padding-inline: 8px;
  }

  .professional-ui .app-dialog {
    padding: 16px;
  }

  .professional-ui .history-range-button {
    padding-inline: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .professional-ui *,
  .professional-ui *::before,
  .professional-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}