:root {
  color-scheme: light;
  --app-ink: #18212a;
  --app-muted: #667381;
  --app-line: #dce2e7;
  --app-surface: #ffffff;
  --app-background: #f5f7f8;
  --app-navy: #17232d;
  --app-red: #b2222f;
  --app-green: #237a4b;
  --app-amber: #a4630a;
  --app-blue: #286b9b;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--app-background); color: var(--app-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button { font: inherit; }
.app-shell { min-height: 100vh; }
.app-header { min-height: 68px; padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--app-navy); color: white; }
.app-brand img { width: 215px; max-height: 46px; object-fit: contain; object-position: left center; }
.app-organization { flex: 1; min-width: 0; padding-left: 20px; border-left: 1px solid #53606b; }
.app-organization small, .app-organization strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-organization small { color: #aebbc5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-organization strong { margin-top: 2px; font-size: 15px; }
.app-user { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #dce4e9; }
.environment-badge { padding: 5px 8px; border-radius: 999px; background: #f2c14e; color: #312300; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.app-user form { margin: 0; }
.app-user button { color: white; border: 1px solid #66737e; background: transparent; border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.app-sign-in { padding: 6px 10px; border: 1px solid #66737e; border-radius: 7px; color: white; font-weight: 700; text-decoration: none; }
.app-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.app-navigation { padding: 24px 14px; background: var(--app-surface); border-right: 1px solid var(--app-line); }
.app-navigation a { display: block; padding: 11px 14px; margin-bottom: 4px; border-radius: 8px; color: #44515d; text-decoration: none; font-size: 14px; font-weight: 650; }
.app-navigation a.active { background: #f8e9eb; color: #8e1823; }
.app-navigation-label { display: block; margin: 24px 14px 8px; color: #87939e; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.app-content { display: flex; flex-direction: column; width: 100%; max-width: 1260px; min-height: calc(100vh - 68px); padding: 34px clamp(20px, 4vw, 54px) 32px; }
.app-content-body { width: 100%; padding-bottom: 48px; }
.app-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: 12px; }
.app-footer-copy strong, .app-footer-copy span { display: block; }
.app-footer-copy strong { color: #475569; font-size: 12px; }
.app-footer-copy span { margin-top: 4px; }
.app-footer-links { display: flex; align-items: center; gap: 18px; }
.app-footer-links a { color: var(--app-blue); font-weight: 700; text-decoration: none; }
.app-footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-footer-links a:focus-visible { border-radius: 3px; outline: 2px solid var(--app-blue); outline-offset: 3px; }
.public-document { width: min(100%, 860px); margin-inline: auto; padding: clamp(22px, 4vw, 38px); }
.public-document h1 { margin: 0 0 22px; font-size: clamp(27px, 4vw, 36px); letter-spacing: -.03em; }
.public-document h2 { margin: 28px 0 8px; color: #334155; font-size: 17px; }
.public-document p { max-width: 76ch; margin: 0 0 14px; color: #475569; line-height: 1.65; }
.public-document .public-document-intro { margin-top: -12px; margin-bottom: 24px; color: var(--app-muted); font-size: 15px; }
.public-document .public-document-updated { margin-top: 28px; color: var(--app-muted); font-size: 12px; }
.public-form-panel { max-width: 760px; }
.public-form { display: grid; gap: 17px; }
.public-form > label:not(.public-consent) { display: grid; gap: 7px; color: #475569; font-size: 12px; font-weight: 750; }
.public-form input[type="text"], .public-form input[type="tel"] { width: 100%; padding: 11px 12px; border: 1px solid #cbd4dc; border-radius: 8px; background: white; color: var(--app-ink); font: inherit; }
.public-form input:focus { border-color: var(--app-blue); outline: 3px solid rgba(40, 107, 155, .14); }
.public-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: #475569; font-size: 12px; line-height: 1.55; }
.public-consent input { margin-top: 3px; accent-color: var(--app-red); }
.public-form .public-form-terms { margin: 0; font-size: 12px; }
.public-form a, .public-policy-links a { color: var(--app-blue); font-weight: 700; text-decoration: none; }
.public-form .primary-action { justify-self: start; color: white; }
.public-result { max-width: 760px; }
.public-notice { margin-bottom: 18px; padding: 13px 15px; border: 1px solid #bfd9ca; border-radius: 9px; background: #f1f8f4; color: #205f3e; font-weight: 700; }
.public-notice.info { border-color: #bfd4e3; background: #f2f7fb; color: #285b7c; }
.public-notice.error { border-color: #e2a6ad; background: #fff7f8; color: #8e1823; }
.public-return-link { display: inline-block; margin: 4px 0 18px; }
.public-policy-links { display: flex; gap: 18px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--app-line); font-size: 12px; }
.help-heading { margin-bottom: 20px; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help-topic { display: flex; flex-direction: column; margin-bottom: 0; }
.help-topic h2 { margin: 0 0 7px; font-size: 18px; }
.help-topic p { margin: 0; color: var(--app-muted); line-height: 1.5; }
.help-topic ul { flex: 1; margin: 16px 0; padding-left: 20px; color: #475569; font-size: 13px; line-height: 1.55; }
.help-topic li + li { margin-top: 7px; }
.help-topic > a { align-self: flex-start; color: var(--app-blue); font-size: 12px; font-weight: 750; text-decoration: none; }
.help-faq { margin-top: 20px; }
.help-faq details { border-top: 1px solid var(--app-line); }
.help-faq details:last-child { border-bottom: 1px solid var(--app-line); }
.help-faq summary { padding: 14px 4px; color: #334155; cursor: pointer; font-size: 13px; font-weight: 750; }
.help-faq details p { margin: -2px 4px 15px 24px; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.help-admin-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; }
.help-admin-links a { padding: 13px; border: 1px solid var(--app-line); border-radius: 9px; background: #fafbfc; text-decoration: none; }
.help-admin-links strong, .help-admin-links span { display: block; }
.help-admin-links strong { color: #334155; font-size: 13px; }
.help-admin-links span { margin-top: 4px; color: var(--app-muted); font-size: 11px; line-height: 1.4; }
.help-support { margin-top: 20px; padding: 17px 20px; border: 1px solid #bfd4e3; border-radius: 11px; background: #f2f7fb; }
.help-support strong { color: #285b7c; }
.help-support p { margin: 4px 0 0; color: #475569; font-size: 13px; }
.help-disclaimer { margin: 18px 2px 0; color: var(--app-muted); font-size: 11px; line-height: 1.5; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.page-heading h1, .error-state h1 { margin: 2px 0 6px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--app-muted); }
.eyebrow { color: var(--app-red) !important; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.summary-card, .section-block, .asset-summary article { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 12px; }
.summary-card { padding: 18px; }
.summary-card span, .asset-summary span { display: block; color: var(--app-muted); font-size: 12px; }
.summary-card strong { display: block; margin-top: 7px; font-size: 28px; }
.summary-card.attention { border-color: #e2a6ad; }
.summary-card.attention strong { color: var(--app-red); }
.section-block { padding: 20px; margin-bottom: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; }
.section-heading h2 { margin: 0 0 3px; font-size: 18px; }
.section-heading p { margin: 0; color: var(--app-muted); font-size: 13px; }
.section-heading > a { color: var(--app-red); font-size: 13px; font-weight: 750; text-decoration: none; }
.item-list, .alert-list { border-top: 1px solid var(--app-line); }
.item-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--app-line); text-decoration: none; }
.item-row:hover { background: #fafbfc; }
.item-row.retired-asset { background: #f3f5f6; }
.item-row.retired-asset:hover { background: #e9edf0; }
.item-row.retired-asset .condition-dot { background: #8d98a1; }
.item-row.retired-asset .item-main strong { color: #5f6b75; }
.item-row.retired-asset .item-main small,
.item-row.retired-asset .item-state,
.item-row.retired-asset .overview-last-report { color: #6e7983; }
.condition-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--app-green); }
.condition-dot.warning { background: var(--app-amber); }
.condition-dot.not-communicating { background: #eab308; }
.condition-dot.critical { background: var(--app-red); }
.condition-dot.info { background: var(--app-blue); }
.condition-dot.offline { background: #7a8792; }
.item-main strong, .item-main small { display: block; }
.item-main small { color: var(--app-muted); margin-top: 3px; }
.item-state { color: var(--app-muted); font-size: 12px; font-weight: 700; }
.overview-asset-row { grid-template-columns: 12px minmax(0, 1fr) minmax(145px, .35fr) minmax(125px, .28fr); }
.overview-last-report small, .overview-last-report time, .overview-last-report span { display: block; }
.overview-last-report small { color: var(--app-muted); font-size: 11px; }
.overview-last-report time, .overview-last-report span { margin-top: 3px; font-size: 12px; font-weight: 700; }
.overview-asset-row .item-state { text-align: right; }
.overview-list-footnote { margin: 13px 0 0; color: var(--app-muted); font-size: 12px; }
.overview-list-footnote a { color: var(--app-red); font-weight: 700; }
.empty-state { padding: 38px 18px; text-align: center; background: #fafbfc; border: 1px dashed #cbd4dc; border-radius: 10px; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { margin-top: 5px; color: var(--app-muted); font-size: 13px; }
.empty-state.compact { padding: 25px 14px; }
.breadcrumbs { display: flex; gap: 8px; margin-bottom: 16px; color: var(--app-muted); font-size: 13px; }
.breadcrumbs a { color: var(--app-red); text-decoration: none; }
.asset-heading { align-items: center; margin-bottom: 16px; }
.asset-manage-menu { position: relative; flex: 0 0 auto; }
.asset-manage-menu summary { padding: 9px 14px; border: 1px solid var(--app-line); border-radius: 8px; background: white; color: var(--app-ink); font-size: 12px; font-weight: 750; cursor: pointer; list-style: none; }
.asset-manage-menu summary::-webkit-details-marker { display: none; }
.asset-manage-menu summary::after { content: ' ▾'; color: var(--app-muted); }
.asset-manage-menu[open] summary { border-color: #aebbc5; background: #f7f9fa; }
.asset-manage-menu > div { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; min-width: 170px; padding: 6px; border: 1px solid var(--app-line); border-radius: 9px; background: white; box-shadow: 0 12px 28px rgba(24, 37, 49, .14); }
.asset-manage-menu a { display: block; padding: 9px 10px; border-radius: 6px; color: var(--app-ink); font-size: 12px; font-weight: 700; text-decoration: none; }
.asset-manage-menu a:hover { background: #f3f6f8; }
.status-label { padding: 7px 10px; border-radius: 999px; background: #e8f4ed; color: var(--app-green); font-size: 12px; font-weight: 800; }
.status-label.offline { background: #edf0f2; color: #5f6c76; }
.asset-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.asset-summary article { padding: 17px; }
.asset-summary strong { display: block; margin-top: 6px; font-size: 15px; }
.asset-status-section { margin: 28px 0 20px; }
.asset-status-section > .section-heading { margin-bottom: 10px; }
.compact-status { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; }
.compact-status article { min-width: 0; padding: 12px 13px; border-radius: 9px; }
.compact-status .status-priority { border-color: #c8d3db; }
.compact-status .status-secondary { background: #fafbfc; }
.compact-status .status-secondary strong { color: #53606c; font-weight: 700; }
.compact-status strong { font-size: 13px; overflow-wrap: anywhere; }
.compact-status time { font-size: 12px; }
.operational-alerts { margin-top: 0; }
.text-alert { color: var(--app-red); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.custom-monitoring-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.custom-monitoring-grid > .signal-card { grid-column: span 3; }
.custom-monitoring-grid-remainder-1 > .signal-card:last-child { grid-column: span 6; }
.custom-monitoring-grid-remainder-2 > .signal-card:nth-last-child(-n + 2) { grid-column: span 6; }
.custom-monitoring-grid-remainder-3 > .signal-card:nth-last-child(-n + 3) { grid-column: span 4; }
.custom-monitoring-grid > .empty-state { grid-column: 1 / -1; }
.custom-monitoring-grid.custom-monitoring-functional-groups { grid-template-columns: 1fr; gap: 12px; }
.custom-monitoring-signal-group { padding: 10px; border: 1px solid #cfd9e2; border-radius: 11px; background: #edf3f7; }
.custom-monitoring-signal-group:nth-child(even) { background: #f1f4f6; }
.custom-monitoring-signal-group > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.custom-monitoring-signal-group .signal-card { min-width: 0; border-color: #cbd6df; border-left-width: 1px; border-top: 5px solid #71869a; background: #fff; }
.custom-monitoring-signal-group .signal-card.digital-state-normal { border-color: var(--app-line); border-left-width: 1px; border-top-color: #4c9b6a; background: #f7fcf9; }
.custom-monitoring-signal-group .signal-card.digital-state-normal strong { color: #2f855a; }
.custom-monitoring-signal-group .signal-card.digital-state-neutral { border-color: var(--app-line); border-left-width: 1px; border-top-color: #2563eb; background: #f5f9ff; }
.custom-monitoring-signal-group .signal-card.digital-state-neutral strong { color: #2563eb; }
.custom-monitoring-signal-group .signal-card.digital-state-attention { border-color: var(--app-line); border-left-width: 1px; border-top-color: #c58a26; background: #fffbf1; }
.custom-monitoring-signal-group .signal-card.digital-state-attention strong { color: #9a650f; }
.custom-monitoring-signal-group .signal-card.digital-state-alarm { border-color: var(--app-line); border-left-width: 1px; border-top-color: #b4232d; background: #fff7f7; }
.custom-monitoring-signal-group .signal-card.digital-state-alarm strong { color: #b4232d; }
.custom-monitoring-indicators { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; overflow: hidden; border: 1px solid #cbd6df; border-radius: 9px; background: #d6e0e8; }
.custom-monitoring-indicators > p { grid-column: 1 / -1; margin: 0; padding: 9px 16px 8px; border-bottom: 1px solid #cbd6df; background: #e8eff5; color: #405469; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.custom-monitoring-indicators > div { min-width: 0; padding: 11px 16px 12px; background: #fcfdfe; }
.custom-monitoring-indicators > div + div { border-left: 1px solid #cbd6df; }
.custom-monitoring-indicators span { display: block; color: #586b7c; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.custom-monitoring-indicators strong { display: block; margin-top: 4px; color: var(--app-ink); font-size: 15px; }
.signal-card { padding: 14px; background: #fafbfc; border: 1px solid var(--app-line); border-radius: 9px; }
.signal-card span, .signal-card strong, .signal-card small { display: block; }
.signal-card span { color: var(--app-muted); font-size: 12px; }
.custom-monitoring-grid .signal-card span { color: #3f5265; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.signal-card strong { margin: 5px 0; font-size: 21px; }
.signal-card small { color: var(--app-muted); }
.signal-card.digital-state-normal { border-left: 4px solid #2f855a; background: #f7fcf9; }
.signal-card.digital-state-attention { border-left: 4px solid #b7791f; background: #fffbf1; }
.signal-card.digital-state-alarm { border-left: 4px solid #b4232d; background: #fff7f7; }
.signal-card.digital-state-neutral { border-left: 4px solid #2563eb; background: #f5f9ff; }
.signal-history-link { display: inline-block; margin-top: 9px; color: var(--app-blue); font-size: 11px; font-weight: 750; text-decoration: none; }
.alert-row { display: flex; justify-content: space-between; gap: 18px; padding: 15px 12px; border-bottom: 1px solid var(--app-line); border-left: 3px solid var(--app-amber); text-decoration: none; }
.alert-row.critical { border-left-color: var(--app-red); }
.alert-row.info { border-left-color: var(--app-blue); }
.alert-row p, .alert-row small { margin: 4px 0 0; color: var(--app-muted); }
.alert-row > span { align-self: flex-start; text-transform: capitalize; color: var(--app-muted); font-size: 11px; font-weight: 800; }
.error-state { max-width: 600px; margin: 70px auto; padding: 30px; background: white; border: 1px solid var(--app-line); border-radius: 12px; text-align: center; }
.error-state > a { display: inline-block; margin-top: 12px; color: var(--app-red); font-weight: 750; }
.audit-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.audit-filters label { display: grid; gap: 5px; color: var(--app-muted); font-size: 11px; font-weight: 750; }
.audit-filters select { min-width: 150px; padding: 9px 30px 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-surface); color: var(--app-ink); font: inherit; }
.audit-filters button { padding: 9px 14px; border: 0; border-radius: 8px; background: var(--app-red); color: white; font-weight: 750; cursor: pointer; }
.audit-filters > a { padding: 9px 4px; color: var(--app-red); font-size: 12px; font-weight: 750; text-decoration: none; }
.audit-section { padding: 0; overflow: hidden; }
.audit-list { display: grid; }
.audit-event { border-bottom: 1px solid var(--app-line); }
.audit-event:last-child { border-bottom: 0; }
.audit-event summary { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; }
.audit-event summary::-webkit-details-marker { display: none; }
.audit-event[open] summary { background: #fafbfc; }
.audit-time { color: var(--app-muted); font-size: 12px; }
.audit-main strong, .audit-main small { display: block; }
.audit-main small { margin-top: 4px; color: var(--app-muted); font-size: 12px; }
.audit-outcome { padding: 5px 8px; border-radius: 999px; background: #e8f4ed; color: var(--app-green); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.audit-outcome.denied, .audit-outcome.failed { background: #f8e9eb; color: var(--app-red); }
.audit-detail { padding: 18px 20px 22px; background: #fafbfc; border-top: 1px solid var(--app-line); }
.audit-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.audit-detail dl > div { min-width: 0; }
.audit-detail dt { color: var(--app-muted); font-size: 11px; }
.audit-detail dd { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.audit-changes { margin-top: 18px; }
.audit-changes > strong { display: block; margin-bottom: 8px; font-size: 12px; }
.audit-changes > div { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--app-line); font-size: 12px; }
.audit-changes del { color: #7c4a4f; text-decoration: none; }
.audit-changes ins { color: var(--app-green); text-decoration: none; font-weight: 750; }
.people-list { border-top: 1px solid var(--app-line); }
.person-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 130px 80px; gap: 13px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--app-line); text-decoration: none; }
.person-row:hover { background: #fafbfc; }
.person-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f2dadd; color: #8e1823; font-weight: 850; }
.person-role { color: var(--app-muted); font-size: 12px; text-transform: capitalize; }
.people-detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.account-details { display: grid; gap: 12px; margin: 0; }
.account-details div { padding-bottom: 10px; border-bottom: 1px solid var(--app-line); }
.account-details dt { color: var(--app-muted); font-size: 11px; }
.account-details dd { margin: 3px 0 0; font-size: 13px; text-transform: capitalize; }
.section-copy { color: var(--app-muted); font-size: 13px; line-height: 1.5; }
.primary-action { padding: 10px 14px; border: 0; border-radius: 8px; background: var(--app-red); color: white; font-weight: 750; cursor: pointer; }
.primary-action:disabled { background: #aeb7be; cursor: not-allowed; }
.app-notice { margin: -5px 0 20px; padding: 12px 14px; border-radius: 9px; font-size: 13px; }
.app-notice.success { border: 1px solid #add6bd; background: #e8f4ed; color: #175d38; }
.app-notice.error { border: 1px solid #e2a6ad; background: #f8e9eb; color: #8e1823; }
.primary-link { align-self: center; padding: 10px 14px; border-radius: 8px; background: var(--app-red); color: white; font-size: 13px; font-weight: 750; text-decoration: none; }
.secondary-action { padding: 9px 13px; border: 1px solid var(--app-line); border-radius: 8px; background: white; color: var(--app-ink); font-weight: 750; cursor: pointer; }
.secondary-action.danger { border-color: #e2a6ad; color: var(--app-red); }
.section-divider { margin: 20px 0; border: 0; border-top: 1px solid var(--app-line); }
.form-section { max-width: 680px; }
.app-form { display: grid; gap: 16px; }
.app-form label { display: grid; gap: 6px; color: #485560; font-size: 12px; font-weight: 750; }
.app-form label[hidden] { display: none; }
.app-form input, .app-form select, .app-form textarea { width: 100%; padding: 10px 11px; border: 1px solid #cbd4dc; border-radius: 8px; background: white; color: var(--app-ink); font: inherit; }
.app-form textarea { resize: vertical; line-height: 1.5; }
.app-form label small { color: var(--app-muted); font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.action-row { display: flex; align-items: center; gap: 10px; }
.danger-panel { border-color: #e2a6ad; }
.danger-panel h2 { margin-top: 0; }
.danger-panel > p { color: var(--app-muted); line-height: 1.55; }
.danger-action { background: #8e1823; }
.retired-notice { border: 1px solid #cbd4dc; background: #edf0f2; color: #44515d; }
.asset-identity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.asset-administration { padding: 0; }
.asset-administration > summary { padding: 18px 20px; cursor: pointer; list-style: none; }
.asset-administration > summary::-webkit-details-marker { display: none; }
.asset-administration > summary::after { content: 'Show details'; float: right; color: var(--app-muted); font-size: 11px; font-weight: 750; }
.asset-administration[open] > summary { border-bottom: 1px solid var(--app-line); }
.asset-administration[open] > summary::after { content: 'Hide details'; }
.asset-administration > summary span, .asset-administration > summary small { display: block; }
.asset-administration > summary span { font-size: 16px; font-weight: 800; }
.asset-administration > summary small { margin-top: 3px; color: var(--app-muted); font-size: 12px; font-weight: 400; }
.asset-administration-body { padding: 20px; }
.asset-administration-body .compact-status { margin-bottom: 18px; }
.asset-identity div { min-width: 0; }
.asset-identity .wide { grid-column: 1 / -1; }
.asset-identity dt { color: var(--app-muted); font-size: 11px; }
.asset-identity dd { margin: 4px 0 0; overflow-wrap: anywhere; line-height: 1.45; }
.asset-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.asset-controls h2 { margin: 0 0 4px; font-size: 18px; }
.asset-controls p { margin: 0; color: var(--app-muted); font-size: 13px; }
.retire-link-row { margin-top: 8px; text-align: right; }
.retire-link-row a { color: var(--app-red); font-size: 12px; font-weight: 750; }
.secondary-link { padding: 8px 11px; border: 1px solid var(--app-line); border-radius: 8px; color: var(--app-ink); font-size: 12px; font-weight: 750; text-decoration: none; }
.site-overview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 20px; }
.map-placeholder { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; background: linear-gradient(135deg, #f5f7f8, #e8eef1); color: var(--app-muted); }
.map-placeholder strong { color: var(--app-ink); }
.map-pin { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f2dadd; color: var(--app-red); }
.inline-assignment-form { display: flex; align-items: flex-end; gap: 12px; }
.inline-assignment-form label { flex: 1; display: grid; gap: 6px; color: var(--app-muted); font-size: 11px; font-weight: 750; }
.inline-assignment-form select { width: 100%; padding: 10px; border: 1px solid var(--app-line); border-radius: 8px; background: white; color: var(--app-ink); font: inherit; }
.live-heading { align-items: flex-start; }
.pump-monitor-overview { padding: 0; overflow: hidden; }
.pump-monitor-overview .live-heading { margin: 0; padding: 18px 20px 16px; border-bottom: 1px solid #dce5eb; background: #f7fafc; }
.pump-monitor-overview .station-health-grid { padding: 18px 20px 20px; }
.pump-monitor-overview .health-tile { min-height: 82px; padding: 14px 15px; border-color: #d7e0e6; border-top-width: 3px; background: white; }
.pump-monitor-overview .health-tile.normal { border-color: #d7e0e6; border-top-color: #4c9b6a; background: #fbfdfc; }
.pump-monitor-overview .health-tile.metric { border-color: #d7e0e6; border-top-color: #7fa9c7; background: #fbfcfe; }
.live-state { display: grid; grid-template-columns: 8px auto; align-items: center; gap: 3px 7px; color: var(--app-muted); font-size: 12px; font-weight: 750; }
.live-state i { width: 8px; height: 8px; border-radius: 50%; background: #95a0a9; }
.live-state small { grid-column: 2; font-size: 10px; font-weight: 500; }
.live-state.connected i { background: var(--app-green); box-shadow: 0 0 0 3px #dcefe4; }
.live-state.late i, .live-state.reconnecting i { background: var(--app-amber); box-shadow: 0 0 0 3px #f7ead2; }
.live-state.disconnected i { background: var(--app-red); box-shadow: 0 0 0 3px #f2dadd; }
.station-health-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mini-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-signal-card { border: 1px solid #dbe2ea; border-top: 4px solid #94a3b8; border-radius: 12px; padding: 18px; background: #fff; display: grid; gap: 7px; }
.mini-signal-card[hidden] { display: none; }
.mini-stale-notice { margin: 0 0 12px; padding: 11px 14px; border: 1px solid #e7c77e; border-radius: 10px; background: #fff8e8; color: #7b560b; font-weight: 700; }
.mini-stale-notice[hidden] { display: none; }
.mini-signal-card em { display: none; font-size: .78rem; font-style: normal; font-weight: 700; color: #7b560b; }
.live-overview.mini-stale .mini-signal-card { border-top-color: #b7791f; background: #fffbf1; }
.live-overview.mini-stale .mini-signal-card.attention { border-top-color: #b4232d; }
.live-overview.mini-stale .mini-signal-card em { display: block; }
.live-overview.mini-stale .mini-health-strip { opacity: .7; }
.mini-signal-card span, .mini-health-strip span { color: #64748b; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mini-signal-card strong { color: #17212b; font-size: 1.05rem; }
.mini-signal-card small { color: #94a3b8; }
.mini-signal-card.normal { border-top-color: #2f855a; background: #f7fcf9; }
.mini-signal-card.attention { border-top-color: #b4232d; background: #fff7f7; }
.mini-health-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid #dbe2ea; border-radius: 12px; background: #dbe2ea; }
.mini-health-strip article { display: grid; gap: 5px; padding: 14px 16px; background: #f8fafc; }
.mini-health-strip strong { color: #17212b; }
.mini-health-strip .metric-assessment { font-size: .72rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.metric-assessment.normal { color: var(--app-green); }
.metric-assessment.caution { color: #9a6700; }
.metric-assessment.attention { color: var(--app-red); }
.metric-assessment.unknown { color: var(--app-muted); }
.health-tile { padding: 15px; border: 1px solid var(--app-line); border-radius: 10px; background: #fafbfc; }
.health-tile span, .health-tile strong { display: block; }
.health-tile span { color: var(--app-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.health-tile strong { margin-top: 7px; font-size: 16px; }
.health-tile.normal { border-color: #add6bd; background: #f3faf6; }
.health-tile.normal strong { color: var(--app-green); }
.health-tile.attention { border-color: #e2a6ad; background: #fdf4f5; }
.health-tile.attention strong { color: var(--app-red); }
.health-tile.unknown strong { color: #667381; }
.health-tile.metric { border-color: #c9d8e5; background: #f5f9fc; }
.health-tile.metric strong { color: #243746; }
.health-tile.metric .metric-assessment { margin-top: 4px; font-size: 11px; font-weight: 750; }
.pump-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pump-health-card { min-width: 0; }
.pump-heading { margin-bottom: 10px; }
.range-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 15px; }
.range-picker button { padding: 6px 9px; border: 1px solid var(--app-line); border-radius: 7px; background: white; color: var(--app-muted); cursor: pointer; font-size: 11px; font-weight: 800; }
.range-picker button.active { border-color: var(--app-red); background: #f8e9eb; color: #8e1823; }
.pump-protection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.pump-protection .health-tile { padding: 10px 12px; }
.pump-protection .health-tile strong { margin-top: 4px; font-size: 13px; }
.loading-state { min-height: 120px; display: grid; place-items: center; color: var(--app-muted); font-size: 13px; }
.loading-state.error { color: var(--app-red); }
.pump-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--app-line); border-radius: 10px; overflow: hidden; }
.pump-metrics > div { min-width: 0; padding: 13px; border-right: 1px solid var(--app-line); }
.pump-metrics > div:last-child { border-right: 0; }
.pump-metrics span, .pump-metrics strong, .pump-metrics em { display: block; }
.pump-metrics span { color: var(--app-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.pump-metrics strong { margin-top: 6px; font-size: 18px; }
.pump-metrics strong small { color: var(--app-muted); font-size: 11px; }
.pump-metrics em { margin-top: 5px; color: var(--app-blue); font-size: 10px; font-style: normal; }
.pump-trend { margin-top: 14px; border-top: 1px solid var(--app-line); }
.pump-trend summary, .recent-readings > summary { padding: 13px 0 0; cursor: pointer; color: #44515d; font-size: 12px; font-weight: 800; }
.pump-chart-legend { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 12px; color: var(--app-muted); font-size: 10px; font-weight: 700; }
.pump-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pump-chart-legend span::before { width: 16px; height: 3px; border-radius: 2px; background: var(--app-blue); content: ''; }
.pump-chart-legend .peak::before { background: #7b8791; }
.pump-chart-legend .start::before { height: 12px; border-left: 2px dashed var(--app-amber); border-radius: 0; background: transparent; }
.app-pump-chart { width: 100%; margin-top: 12px; overflow: visible; }
.app-pump-chart .pump-chart-scale line { stroke: #e1e6ea; stroke-width: 1; }
.app-pump-chart .pump-chart-scale text { fill: var(--app-muted); font-size: 10px; text-anchor: end; }
.app-pump-chart .pump-chart-x-scale line { stroke: #cbd4dc; stroke-width: 1; }
.app-pump-chart .pump-chart-x-scale text { fill: var(--app-muted); font-size: 10px; text-anchor: middle; }
.app-pump-chart .pump-chart-x-scale .tick-0 { text-anchor: start; }
.app-pump-chart .pump-chart-x-scale .tick-2 { text-anchor: end; }
.app-pump-chart path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.app-pump-chart .pump-average-series { stroke: var(--app-blue); stroke-width: 3; }
.app-pump-chart .pump-peak-series { stroke: #7b8791; stroke-width: 2; }
.app-pump-chart .pump-start-marker { stroke: var(--app-amber); stroke-width: 2; stroke-dasharray: 4 4; opacity: .8; }
.app-pump-chart .pump-average-point { fill: white; stroke: var(--app-blue); stroke-width: 2; }
.pump-detail-heading { align-items: flex-end; }
.pump-switcher { display: flex; gap: 6px; }
.pump-switcher a { padding: 8px 12px; border: 1px solid var(--app-line); border-radius: 8px; color: var(--app-muted); font-size: 12px; font-weight: 800; text-decoration: none; }
.pump-switcher a.active { border-color: var(--app-red); background: #f8e9eb; color: #8e1823; }
.pump-detail { display: grid; gap: 20px; }
.pump-detail > .section-block { margin-bottom: 0; }
.pump-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; }
.pump-detail-toolbar > div:first-child strong, .pump-detail-toolbar > div:first-child span { display: block; }
.pump-detail-toolbar > div:first-child span { margin-top: 3px; color: var(--app-muted); font-size: 12px; }
.pump-detail-toolbar .range-picker { margin: 0; }
.pump-detail-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pump-detail-state-grid article { padding: 16px 18px; border-top: 4px solid #94a3b8; }
.pump-detail-state-grid article.normal { border-top-color: var(--app-green); background: #f7fcf9; }
.pump-detail-state-grid article.attention { border-top-color: var(--app-red); background: #fff7f7; }
.pump-detail-state-grid span, .pump-detail-state-grid strong, .pump-detail-state-grid small { display: block; }
.pump-detail-state-grid span { color: var(--app-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.pump-detail-state-grid strong { margin-top: 5px; font-size: 18px; }
.pump-detail-state-grid small { margin-top: 4px; color: var(--app-muted); }
.pump-detail-metrics, .pump-maintenance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--app-line); border-radius: 11px; overflow: hidden; }
.pump-detail-metrics article, .pump-maintenance-summary article { min-width: 0; padding: 16px; border-right: 1px solid var(--app-line); }
.pump-detail-metrics article:last-child, .pump-maintenance-summary article:last-child { border-right: 0; }
.pump-detail-metrics span, .pump-detail-metrics strong, .pump-detail-metrics em, .pump-maintenance-summary span, .pump-maintenance-summary strong { display: block; }
.pump-detail-metrics span, .pump-maintenance-summary span { color: var(--app-muted); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.pump-detail-metrics strong, .pump-maintenance-summary strong { margin-top: 7px; font-size: 22px; }
.pump-detail-metrics strong small { color: var(--app-muted); font-size: 12px; }
.pump-detail-metrics em { margin-top: 6px; color: var(--app-blue); font-size: 11px; font-style: normal; }
.pump-findings { margin-top: 16px; padding: 14px 16px; border-left: 4px solid var(--app-blue); border-radius: 8px; background: #f5f9fc; }
.pump-findings strong { font-size: 12px; }
.pump-findings ul { display: flex; flex-wrap: wrap; gap: 5px 28px; margin: 8px 0 0; padding-left: 18px; color: #44515d; font-size: 12px; }
.pump-findings p { margin: 6px 0 0; color: var(--app-muted); font-size: 12px; }
.pump-detail-chart-legend { display: flex; gap: 22px; margin-bottom: 10px; color: var(--app-muted); font-size: 11px; font-weight: 700; }
.pump-detail-chart-legend span::before { display: inline-block; width: 18px; height: 3px; margin-right: 7px; border-radius: 2px; background: var(--app-blue); vertical-align: middle; content: ''; }
.pump-detail-chart-legend .range::before { height: 10px; background: #c9ddeb; }
.pump-detail-chart { width: 100%; overflow: visible; }
.pump-detail-chart .grid line { stroke: #e2e8ed; stroke-width: 1; }
.pump-detail-chart text { fill: var(--app-muted); font-size: 10px; }
.pump-detail-chart .range-band { fill: #c9ddeb; opacity: .72; }
.pump-detail-chart .average-line { fill: none; stroke: var(--app-blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.pump-detail-chart circle { fill: white; stroke: var(--app-blue); stroke-width: 2; }
.pump-start-timeline { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--app-line); font-size: 11px; }
.pump-start-timeline > div { position: relative; height: 34px; border-radius: 6px; background: #f3f5f7; }
.pump-start-timeline span { position: absolute; top: 5px; transform: translateX(-50%); text-align: center; }
.pump-start-timeline i { display: block; width: 2px; height: 14px; margin: auto; background: var(--app-amber); }
.pump-start-timeline small { display: block; color: #7b560b; font-size: 9px; font-weight: 800; }
.pump-start-timeline em { display: grid; height: 100%; place-items: center; color: var(--app-muted); font-style: normal; }
.pump-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pump-comparison article { padding: 14px; border: 1px solid var(--app-line); border-radius: 9px; }
.pump-comparison article.active { border-color: #99bcd4; background: #f5f9fc; }
.pump-comparison strong, .pump-comparison span, .pump-comparison small { display: block; }
.pump-comparison span { margin-top: 5px; color: #44515d; font-size: 12px; }
.pump-comparison article > div { height: 7px; margin: 10px 0 7px; overflow: hidden; border-radius: 5px; background: #e8edf1; }
.pump-comparison i { display: block; height: 100%; border-radius: inherit; background: var(--app-blue); }
.pump-comparison small { color: var(--app-muted); }
.pump-maintenance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pump-service-list { margin-top: 18px; }
.pump-service-list > strong { display: block; margin-bottom: 6px; font-size: 12px; }
.pump-service-list article { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--app-line); }
.pump-service-list article b, .pump-service-list article span { display: block; }
.pump-service-list article span, .pump-service-list article small { margin-top: 3px; color: var(--app-muted); font-size: 11px; }
.recent-readings > summary { padding: 0; font-size: 14px; }
.reading-list { margin-top: 14px; border-top: 1px solid var(--app-line); }
.reading-list > div { display: grid; grid-template-columns: minmax(0, 1fr) 120px 180px; gap: 16px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--app-line); font-size: 12px; }
.reading-list span strong, .reading-list span small { display: block; }
.reading-list span small, .reading-list time { margin-top: 2px; color: var(--app-muted); font-size: 10px; }
.reading-list b { font-weight: 750; }
.telemetry-history-link { display: inline-block; margin-top: 14px; color: var(--app-blue); font-size: 12px; font-weight: 750; text-decoration: none; }
.telemetry-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.telemetry-filters label { display: grid; gap: 5px; color: var(--app-muted); font-size: 10px; font-weight: 750; }
.telemetry-filters select { min-width: 190px; padding: 9px 30px 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: white; color: var(--app-ink); font: inherit; }
.telemetry-filters button { padding: 10px 14px; border: 0; border-radius: 8px; background: var(--app-red); color: white; font-weight: 750; cursor: pointer; }
.telemetry-filters > a { padding: 9px 3px; color: var(--app-red); font-size: 11px; font-weight: 750; text-decoration: none; }
.telemetry-history-section { padding: 20px 20px 0; }
.digital-trend { margin-bottom: 20px; }
.digital-trend-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.digital-trend-summary article { padding: 12px; border: 1px solid var(--app-line); border-radius: 9px; background: #fafbfc; }
.digital-trend-summary span, .digital-trend-summary strong { display: block; }
.digital-trend-summary span { color: var(--app-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.digital-trend-summary strong { margin-top: 5px; }
.digital-step-chart { position: relative; padding-left: 36px; }
.digital-step-chart svg { display: block; width: 100%; height: 170px; background: #fafbfc; border: 1px solid var(--app-line); border-radius: 9px; }
.chart-label { position: absolute; left: 0; color: var(--app-muted); font-size: 10px; font-weight: 750; }
.chart-label.on { top: 35px; }.chart-label.off { top: 120px; }
.chart-grid { stroke: #dbe2ea; stroke-width: 1; stroke-dasharray: 5 5; }
.trend-segment { stroke-width: 5; stroke-linecap: square; }.trend-segment.on { stroke: var(--app-green); }.trend-segment.off { stroke: #64748b; }
.trend-transition { stroke: #94a3b8; stroke-width: 3; }
.chart-axis { display: flex; justify-content: space-between; padding-top: 6px; color: var(--app-muted); font-size: 10px; }
.telemetry-table-wrap { overflow-x: auto; }
.telemetry-table { width: 100%; border-collapse: collapse; text-align: left; }
.telemetry-table th { padding: 10px 12px; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.telemetry-table td { padding: 13px 12px; border-bottom: 1px solid var(--app-line); font-size: 12px; white-space: nowrap; }
.telemetry-table td:nth-child(2) { min-width: 190px; white-space: normal; }
.telemetry-table td strong, .telemetry-table td small { display: block; }
.telemetry-table td small { margin-top: 3px; color: var(--app-muted); font-size: 10px; }
.telemetry-table time { color: var(--app-muted); }
.telemetry-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 16px; }
.telemetry-pagination > span { color: var(--app-muted); font-size: 11px; text-align: center; }
.telemetry-pagination a:last-child { justify-self: end; }
.notification-list { border-top: 1px solid var(--app-line); }
.notification-row { display: grid; grid-template-columns: 38px minmax(190px, 1.2fr) minmax(150px, .8fr) auto auto auto; gap: 14px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--app-line); text-decoration: none; }
.notification-row:hover { background: #fafbfc; }
.notification-row.inactive { opacity: .68; }
.notification-person strong, .notification-person small, .notification-scope strong, .notification-scope small { display: block; }
.notification-person small, .notification-scope small { margin-top: 3px; color: var(--app-muted); font-size: 11px; }
.notification-scope strong { font-size: 12px; }
.channel-list { display: flex; gap: 5px; flex-wrap: wrap; }
.channel-list i { padding: 4px 7px; border-radius: 999px; background: #edf3f7; color: #3f6178; font-size: 9px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.notification-priority { color: var(--app-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.notification-help h2 { margin: 0 0 6px; font-size: 16px; }
.notification-help p { max-width: 760px; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.notification-contact-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.notification-contact-actions h2 { margin: 0 0 4px; font-size: 17px; }
.notification-contact-actions p, .notification-delete-panel > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.notification-contact-actions form { margin: 0; }
.danger-link { border-color: #e2a6ad; color: var(--app-red); }
.notification-delete-panel { max-width: 680px; }
.notification-delete-panel > p { margin-bottom: 16px; }
.organization-transfer-panel { max-width: 720px; }
.organization-transfer-panel > p { color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.transfer-blockers { margin: 16px 0; }
.transfer-blockers strong, .transfer-blockers span { display: block; }
.transfer-blockers span { margin-top: 3px; }
.transfer-blockers ul { margin: 8px 0 0; padding-left: 20px; }
.notification-form-section { max-width: 820px; }
.preference-fieldset { margin: 6px 0 0; padding: 0; border: 0; }
.preference-fieldset legend { font-size: 14px; font-weight: 800; }
.preference-fieldset > p { margin: 4px 0 10px; color: var(--app-muted); font-size: 12px; }
.asset-placement-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 16px; border-top: 1px solid var(--app-line); }
.asset-placement-fields legend, .asset-placement-fields > p { grid-column: 1 / -1; }
.asset-placement-fields label { display: grid; gap: 6px; color: #485560; font-size: 12px; font-weight: 750; }
.preference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.preference-grid label, .active-contact { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--app-line); border-radius: 9px; background: #fafbfc; cursor: pointer; }
.preference-grid input, .active-contact input { width: auto; margin-top: 3px; accent-color: var(--app-red); }
.preference-grid span strong, .preference-grid span small, .active-contact span strong, .active-contact span small { display: block; }
.preference-grid span small, .active-contact span small { margin-top: 3px; color: var(--app-muted); font-size: 10px; font-weight: 400; line-height: 1.4; }
.active-contact { max-width: 420px; }
.rule-list { border-top: 1px solid var(--app-line); }
.rule-row { display: grid; grid-template-columns: 12px minmax(190px, 1.15fr) minmax(170px, .85fr) auto auto; gap: 14px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--app-line); text-decoration: none; }
.rule-row:hover { background: #fafbfc; }
.rule-row.inactive { opacity: .68; }
.rule-identity strong, .rule-identity small, .rule-condition strong, .rule-condition small { display: block; }
.rule-identity small, .rule-condition small { margin-top: 3px; color: var(--app-muted); font-size: 11px; }
.rule-condition strong { font-size: 12px; }
.severity-label { padding: 5px 8px; border-radius: 999px; background: #fff2de; color: var(--app-amber); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.severity-label.critical { background: #f8e9eb; color: var(--app-red); }
.rule-help h2 { margin: 0 0 6px; font-size: 16px; }
.rule-help p { max-width: 760px; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.rule-form-section { max-width: 760px; }
.locked-field { padding: 12px 13px; border: 1px solid var(--app-line); border-radius: 9px; background: #fafbfc; }
.locked-field span, .locked-field strong, .locked-field small { display: block; }
.locked-field span { color: var(--app-muted); font-size: 11px; font-weight: 750; }
.locked-field strong { margin-top: 4px; }
.locked-field small { margin-top: 4px; color: var(--app-muted); font-size: 10px; }
.severity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alert-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-tabs { display: flex; padding: 3px; border: 1px solid var(--app-line); border-radius: 9px; background: white; }
.filter-tabs a { padding: 7px 11px; border-radius: 6px; color: var(--app-muted); font-size: 11px; font-weight: 800; text-decoration: none; }
.filter-tabs a.active { background: #f8e9eb; color: #8e1823; }
.alert-filters label { display: grid; gap: 4px; color: var(--app-muted); font-size: 10px; font-weight: 750; }
.alert-filters select { min-width: 150px; padding: 8px 28px 8px 9px; border: 1px solid var(--app-line); border-radius: 8px; background: white; color: var(--app-ink); font: inherit; }
.alert-filters button { padding: 9px 13px; border: 0; border-radius: 8px; background: var(--app-red); color: white; font-weight: 750; cursor: pointer; }
.alert-filters > a { padding: 9px 3px; color: var(--app-red); font-size: 11px; font-weight: 750; text-decoration: none; }
.alert-history-section { padding: 0 20px; }
.alert-history-list { border-top: 1px solid var(--app-line); }
.alert-history-row { display: grid; grid-template-columns: 12px minmax(190px, 1.2fr) minmax(140px, .7fr) auto minmax(145px, auto); gap: 14px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--app-line); text-decoration: none; }
.alert-history-row:hover { background: #fafbfc; }
.alert-history-row.resolved { opacity: .72; }
.alert-history-main strong, .alert-history-main small, .alert-history-value strong, .alert-history-value small, .alert-history-time strong, .alert-history-time time { display: block; }
.alert-history-main small, .alert-history-value small, .alert-history-time time { margin-top: 3px; color: var(--app-muted); font-size: 10px; }
.alert-history-value strong, .alert-history-time strong { font-size: 11px; }
.alert-detail-heading a, .alert-facts a { color: var(--app-red); font-weight: 750; text-decoration: none; }
.alert-lifecycle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; padding: 17px 20px; border: 1px solid var(--app-line); border-radius: 12px; background: white; }
.alert-lifecycle article { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 3px 9px; color: var(--app-muted); }
.alert-lifecycle article:not(:last-child)::after { content: ''; position: absolute; left: calc(100% - 22px); right: 22px; top: 5px; height: 2px; background: var(--app-line); }
.alert-lifecycle i { width: 11px; height: 11px; margin-top: 2px; border: 2px solid #aeb7be; border-radius: 50%; background: white; }
.alert-lifecycle article.complete i { border-color: var(--app-green); background: var(--app-green); }
.alert-lifecycle span { font-size: 11px; font-weight: 800; }
.alert-lifecycle time, .alert-lifecycle small { grid-column: 2; font-size: 10px; }
.alert-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.alert-facts .wide { grid-column: 1 / -1; }
.alert-facts dt { color: var(--app-muted); font-size: 10px; }
.alert-facts dd { margin: 4px 0 0; line-height: 1.45; }
.alert-facts dd small { display: block; margin-top: 2px; color: var(--app-muted); }
.delivery-list { border-top: 1px solid var(--app-line); }
.delivery-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 3px; border-bottom: 1px solid var(--app-line); }
.delivery-list strong, .delivery-list small { display: block; }
.delivery-list small { margin-top: 3px; color: var(--app-muted); font-size: 10px; }
.delivery-note { margin: 13px 0 0; color: var(--app-muted); font-size: 10px; line-height: 1.45; }
.alert-response-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; align-items: center; border-color: #e1bd82; background: #fffaf1; }
.alert-response-panel h2 { margin: 0 0 4px; font-size: 17px; }
.alert-response-panel p { margin: 0; color: var(--app-muted); font-size: 12px; }
.alert-response-actions { display: flex; gap: 9px; }
.alert-response-actions form { margin: 0; }
.alert-response-panel .response-warning { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid #ecd8b7; color: #76531c; font-size: 10px; }
.alert-activity-section { max-width: 850px; }
.activity-timeline { margin: 0 0 18px 5px; padding-left: 18px; border-left: 2px solid var(--app-line); }
.activity-timeline article { position: relative; padding: 0 0 20px 12px; }
.activity-timeline article:last-child { padding-bottom: 2px; }
.activity-timeline article > i { position: absolute; left: -24px; top: 3px; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 0 1px var(--app-green); }
.activity-timeline strong, .activity-timeline small, .activity-timeline time { display: block; }
.activity-timeline small, .activity-timeline time { margin-top: 3px; color: var(--app-muted); font-size: 10px; }
.activity-timeline p { margin: 7px 0 0; padding: 9px 11px; border-radius: 7px; background: #f5f7f8; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.alert-note-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding-top: 16px; border-top: 1px solid var(--app-line); }
.alert-note-form label { display: grid; gap: 6px; color: var(--app-muted); font-size: 11px; font-weight: 750; }
.alert-note-form textarea { width: 100%; padding: 10px 11px; border: 1px solid #cbd4dc; border-radius: 8px; resize: vertical; color: var(--app-ink); font: inherit; line-height: 1.45; }

.rb-drive-performance { overflow: hidden; }
.rb-drive-frequency-panel { padding: 4px 0 16px; }
.rb-drive-empty { padding: 32px 16px; color: var(--app-muted); text-align: center; }
.rb-drive-empty > div:first-child { color: var(--app-ink); font-weight: 750; }
.rb-drive-primary-value { color: #0f172a; font-size: clamp(26px, 4vw, 36px); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; }
.rb-drive-primary-value span, .rb-drive-metric-value span { color: #64748b; font-size: .55em; font-weight: 600; letter-spacing: 0; }
.rb-drive-state { padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 750; line-height: 1; }
.rb-drive-state-running { background: #dcfce7; color: #166534; }
.rb-drive-state-stopped { background: #e2e8f0; color: #475569; }
.rb-drive-state-adjusting, .rb-drive-state-warning { background: #fef3c7; color: #92400e; }
.rb-drive-state-fault { background: #fee2e2; color: #b91c1c; }
.rb-drive-health { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 10px 13px; border: 1px solid; border-radius: 10px; font-size: 13px; }
.rb-drive-health > div:first-child { display: flex; align-items: center; gap: 7px; }
.rb-drive-health-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.rb-drive-health-healthy { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.rb-drive-health-stale { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.rb-drive-health-offline { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.rb-drive-last-updated { opacity: .85; }
.rb-drive-status-detail, .rb-drive-insight { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; padding: 11px 13px; border-radius: 10px; font-size: 13px; }
.rb-drive-status-detail-warning { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.rb-drive-status-detail-fault { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.rb-drive-insight { color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; }
.rb-drive-status-detail span, .rb-drive-insight span:last-child { flex: 1; }
.rb-drive-sparkline { display: block; width: 100%; height: 72px; overflow: visible; }
.rb-drive-sparkline-baseline { stroke: #e2e8f0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rb-drive-chart-scale { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 3px; color: #64748b; font-size: 10px; }
.rb-drive-chart-scale span:nth-child(2) { text-align: center; }
.rb-drive-chart-scale span:last-child { text-align: right; }
.rb-drive-thresholds, .rb-drive-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rb-drive-threshold { padding: 2px 6px; border-radius: 4px; background: #fffbeb; color: #a16207; font-size: 10px; font-weight: 650; text-transform: capitalize; }
.rb-drive-threshold-critical { background: #fef2f2; color: #b91c1c; }
.rb-drive-chart-legend { gap: 16px; color: #64748b; font-size: 12px; }
.rb-drive-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb-drive-chart-legend i { width: 16px; height: 3px; border-radius: 999px; background: var(--rb-legend-color); }
.rb-drive-frequency-panel > .d-flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rb-drive-frequency-panel .d-flex { display: flex; align-items: center; gap: 8px; }
.rb-drive-frequency-panel .text-end { text-align: right; }
.rb-drive-frequency-panel .small, .rb-drive-summary .small, .rb-drive-metric .small { color: #64748b; font-size: 11px; }
.rb-drive-frequency-panel .fw-semibold, .rb-drive-summary .fw-semibold, .rb-drive-metric .fw-semibold { font-weight: 750; }
.rb-drive-frequency-panel .text-success { color: var(--app-green); }
.rb-drive-frequency-panel .text-warning-emphasis { color: var(--app-amber); }
.rb-drive-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 16px; border-top: 1px solid #e9eef5; }
.rb-drive-metric { min-width: 0; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.rb-drive-metric-value { margin: 3px 0 8px; color: #0f172a; font-size: 20px; font-weight: 750; }
.rb-drive-metric .rb-drive-sparkline { height: 52px; }
.rb-drive-summary { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e9eef5; }
.rb-drive-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rb-drive-summary-grid div { padding: 10px; border-radius: 8px; background: #f8fafc; }
.rb-drive-summary-grid span, .rb-drive-summary-grid strong, .rb-drive-summary-grid small { display: block; }
.rb-drive-summary-grid span { color: #64748b; font-size: 12px; }
.rb-drive-summary-grid strong { margin-top: 2px; color: #0f172a; font-size: 21px; line-height: 1.2; }
.rb-drive-summary-grid small { color: #64748b; font-size: 10px; }
.rb-drive-tracking-good { background: #f0fdf4 !important; }
.rb-drive-tracking-good strong { color: #166534; }
.rb-drive-tracking-watch { background: #fffbeb !important; }
.rb-drive-tracking-watch strong { color: #a16207; }
.rb-drive-tracking-poor { background: #fef2f2 !important; }
.rb-drive-tracking-poor strong { color: #b91c1c; }
.signal-admin-list { display: grid; gap: 12px; }
.signal-admin-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--app-line); border-radius: 10px; background: #fafbfc; }
.signal-admin-row > label:nth-of-type(1) { grid-column: span 2; }
.signal-admin-row > label:nth-of-type(2) { grid-column: span 3; }
.signal-admin-row > label:nth-of-type(3), .signal-admin-row > label:nth-of-type(4), .signal-admin-row > label:nth-of-type(5) { grid-column: span 1; }
.signal-admin-row > label:nth-of-type(6), .signal-admin-row > label:nth-of-type(7) { grid-column: span 2; }
.signal-admin-row > label:nth-of-type(8) { grid-column: 1 / span 2; }
.signal-admin-row > label:nth-of-type(9) { grid-column: 3 / span 3; }
.signal-admin-row > label:nth-of-type(10) { grid-column: 6 / span 1; }
.signal-admin-row > .signal-switches { grid-column: 7 / span 3; }
.signal-admin-row > .secondary-action { grid-column: 11 / span 2; width: 100%; }
.signal-admin-row > label, .credential-panel > label { display: grid; gap: 6px; color: #485560; font-size: 11px; font-weight: 750; }
.signal-admin-row input, .signal-admin-row select { width: 100%; padding: 9px 10px; border: 1px solid #cbd4dc; border-radius: 8px; background: white; color: var(--app-ink); font: inherit; }
.signal-admin-row input:disabled { background: #edf0f2; color: #56636e; }
.signal-switches { display: flex; gap: 9px; padding-bottom: 9px; }
.signal-switches label { display: flex; align-items: center; gap: 4px; color: var(--app-muted); font-size: 11px; font-weight: 700; }
.signal-switches input { width: auto; }
.credential-panel { display: grid; gap: 18px; }
.credential-panel h2 { margin-top: 0; }
.credential-value { display: flex; align-items: center; gap: 10px; }
.credential-value code, .credential-payload code { flex: 1; padding: 11px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #f5f7f8; color: var(--app-ink); font-size: 14px; overflow-wrap: anywhere; }
.credential-password { max-width: 460px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.credential-payload { display: grid; gap: 7px; }
.credential-payload strong { font-size: 12px; }
.credential-panel > .primary-link { justify-self: start; }

@media (max-width: 820px) {
  .app-header { padding-inline: 18px; }
  .app-brand img { width: 175px; }
  .app-user > span { display: none; }
  .app-workspace { display: block; }
  .app-navigation { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 9px 14px; border-right: 0; border-bottom: 1px solid var(--app-line); overflow-x: auto; }
  .app-navigation a { margin: 0; padding: 9px 12px; white-space: nowrap; }
  .app-navigation-label { display: none; }
  .app-content { padding: 24px 16px 45px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-asset-row { grid-template-columns: 12px minmax(0, 1fr) minmax(125px, .4fr); }
  .overview-asset-row .item-state { grid-column: 2 / -1; text-align: left; }
  .detail-grid { grid-template-columns: 1fr; }
  .site-overview-grid { grid-template-columns: 1fr; }
  .pump-health-grid { grid-template-columns: 1fr; }
  .station-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pump-monitor-overview .station-health-grid { gap: 10px; }
  .help-grid { grid-template-columns: 1fr; }
  .custom-monitoring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-monitoring-grid > .signal-card,
  .custom-monitoring-grid-remainder-1 > .signal-card:last-child,
  .custom-monitoring-grid-remainder-2 > .signal-card:nth-last-child(-n + 2),
  .custom-monitoring-grid-remainder-3 > .signal-card:nth-last-child(-n + 3) { grid-column: span 1; }
  .custom-monitoring-signal-group > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asset-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .notification-scope, .channel-list, .notification-priority { grid-column: 2; }
  .notification-row .status-label { grid-column: 3; grid-row: 1; }
  .rule-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .rule-condition { grid-column: 2; }
  .rule-row .severity-label { grid-column: 2; justify-self: start; }
  .rule-row .status-label { grid-column: 3; grid-row: 1; }
  .alert-history-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .alert-history-value, .alert-history-time { grid-column: 2; }
  .alert-history-row .severity-label { grid-column: 3; grid-row: 1; }
}

@media (max-width: 520px) {
  .app-header { flex-wrap: wrap; gap: 8px 14px; }
  .app-brand img { width: 150px; }
  .app-organization { order: 3; flex-basis: 100%; padding: 7px 0 0; border-left: 0; border-top: 1px solid #53606b; }
  .app-content-body { padding-bottom: 36px; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
  .app-footer-links { flex-wrap: wrap; gap: 12px 18px; }
  .page-heading { display: block; }
  .pump-switcher { margin-top: 14px; }
  .pump-detail-toolbar { align-items: flex-start; flex-direction: column; }
  .pump-detail-state-grid, .pump-detail-metrics, .pump-maintenance-summary { grid-template-columns: 1fr; }
  .pump-detail-metrics article, .pump-maintenance-summary article { border-right: 0; border-bottom: 1px solid var(--app-line); }
  .pump-detail-metrics article:last-child, .pump-maintenance-summary article:last-child { border-bottom: 0; }
  .pump-findings ul { display: block; }
  .pump-start-timeline { grid-template-columns: 1fr; }
  .asset-heading .status-label { display: inline-block; margin-top: 14px; }
  .asset-manage-menu { margin-top: 14px; }
  .asset-manage-menu > div { right: auto; left: 0; }
  .summary-grid, .asset-summary, .signal-grid, .digital-trend-summary { grid-template-columns: 1fr; }
  .compact-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-row { grid-template-columns: 12px minmax(0, 1fr); }
  .overview-asset-row { grid-template-columns: 12px minmax(0, 1fr); }
  .overview-last-report { grid-column: 2; }
  .overview-asset-row .item-state { grid-column: 2; text-align: left; }
  .item-state { grid-column: 2; }
  .audit-event summary { grid-template-columns: 1fr auto; }
  .audit-time { grid-column: 1 / -1; }
  .audit-detail dl, .audit-changes > div { grid-template-columns: 1fr; }
  .person-row { grid-template-columns: 38px minmax(0, 1fr); }
  .person-role, .person-row .status-label { grid-column: 2; justify-self: start; }
  .form-grid { grid-template-columns: 1fr; }
  .asset-identity { grid-template-columns: 1fr; }
  .asset-controls { display: grid; }
  .station-health-grid, .pump-metrics, .mini-signal-grid, .mini-health-strip { grid-template-columns: 1fr; }
  .custom-monitoring-signal-group > div { grid-template-columns: 1fr; }
  .pump-monitor-overview .live-heading { gap: 12px; }
  .pump-metrics > div { border-right: 0; border-bottom: 1px solid var(--app-line); }
  .pump-metrics > div:last-child { border-bottom: 0; }
  .reading-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .reading-list time { grid-column: 1 / -1; }
  .preference-grid { grid-template-columns: 1fr; }
  .severity-grid { grid-template-columns: 1fr; }
  .alert-lifecycle { grid-template-columns: 1fr; gap: 14px; }
  .alert-lifecycle article:not(:last-child)::after { display: none; }
  .alert-facts { grid-template-columns: 1fr; }
  .alert-facts .wide { grid-column: auto; }
  .alert-response-panel { grid-template-columns: 1fr; }
  .alert-response-actions { flex-wrap: wrap; }
  .alert-response-panel .response-warning { grid-column: auto; }
  .alert-note-form { grid-template-columns: 1fr; }
  .rb-drive-health { align-items: flex-start; flex-direction: column; gap: 4px; }
  .rb-drive-metric-grid { grid-template-columns: 1fr; }
  .rb-drive-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-admin-row { grid-template-columns: 1fr 1fr; }
  .signal-admin-row > label, .signal-admin-row > .signal-switches, .signal-admin-row > .secondary-action { grid-column: auto; }
  .signal-label-field, .signal-switches { grid-column: 1 / -1; }
  .credential-password { grid-template-columns: 1fr; }
  .notification-contact-actions { align-items: flex-start; flex-direction: column; }
  .asset-placement-fields { grid-template-columns: 1fr; }
  .asset-placement-fields legend, .asset-placement-fields > p { grid-column: auto; }
}