/* 2026-09-30: shared visual refresh for the weather and mail web UI.
   This file changes presentation only; page-specific state and controls stay in place. */

:root {
  --refresh-canvas: #f5f7f8;
  --refresh-paper: #fff;
  --refresh-ink: #142d3b;
  --refresh-text: #304b5b;
  --refresh-muted: #526675;
  --refresh-line: #dbe3e7;
  --refresh-line-strong: #bdcdd3;
  --refresh-accent: #0b6172;
  --refresh-accent-soft: #e8f2f3;
}

/* Shared application shell: one quiet, white navigation rail. */
body.app-ui--industrial {
  --industrial-ink: var(--refresh-ink);
  --industrial-muted: var(--refresh-muted);
  --industrial-line: var(--refresh-line);
  --industrial-line-strong: var(--refresh-line-strong);
  --industrial-canvas: var(--refresh-paper);
  --industrial-subtle: var(--refresh-canvas);
  --industrial-subtle-blue: var(--refresh-accent-soft);
  --industrial-teal-700: var(--refresh-accent);
  --industrial-teal-600: #147486;
  background: var(--refresh-canvas);
  color: var(--refresh-ink);
}

body.app-ui--industrial.has-app-shell .sidebar {
  border-right: 1px solid var(--refresh-line);
  background: var(--refresh-paper);
  color: var(--refresh-ink);
}

body.app-ui--industrial.has-app-shell .sidebar .sidebar-brand {
  border-bottom-color: var(--refresh-line);
}

body.app-ui--industrial.has-app-shell .sidebar :is(.nav > a, .nav a.live-active, .nav-tree-trigger, .nav a.nav-tree-child, .logout-button, .sidebar-contact-link) {
  color: var(--refresh-text);
  text-decoration: none;
}

body.app-ui--industrial.has-app-shell .sidebar :is(.nav > a, .nav-tree-trigger, .nav a.nav-tree-child, .logout-button, .sidebar-contact-link):is(:hover, :focus-visible) {
  border-color: transparent;
  background: #f1f5f6;
  color: #17485a;
}

body.app-ui--industrial.has-app-shell .sidebar :is(.nav > a.active, .nav > a.live-active.active, .nav-tree-trigger.active, .nav a.nav-tree-child.active, .sidebar-contact-link.active) {
  border-color: transparent;
  background: var(--refresh-accent-soft);
  color: var(--refresh-accent);
}

body.app-ui--industrial.has-app-shell .sidebar :is(.nav > a.active, .nav > a.live-active.active, .nav-tree-trigger.active)::before {
  background: var(--refresh-accent);
}

body.app-ui--industrial.has-app-shell .sidebar .nav a.nav-tree-child::before {
  border-color: #8fa4ad;
}

body.app-ui--industrial.has-app-shell .sidebar :is(.logout-button, .sidebar-account-footer .app-account-trigger) {
  border-color: var(--refresh-line);
  color: var(--refresh-text);
}

body.app-ui--industrial.has-app-shell .sidebar :is(.logout-button, .sidebar-account-footer .app-account-trigger):is(:hover, :focus-visible),
body.app-ui--industrial.has-app-shell .sidebar .sidebar-account-footer .app-account-trigger[aria-expanded="true"] {
  border-color: var(--refresh-line-strong);
  background: #f1f5f6;
  color: #17485a;
}

body.app-ui--industrial.has-app-shell .sidebar .sidebar-account-footer {
  border-top-color: var(--refresh-line);
}

body.app-ui--industrial.has-app-shell .sidebar .app-account-mark { border-color: #9aafb8; }
body.app-ui--industrial.has-app-shell .sidebar .app-account-chevron { color: var(--refresh-muted); }

body.app-ui--industrial.has-app-shell .mobile-app-bar {
  border-bottom-color: var(--refresh-line);
  background: var(--refresh-paper);
  box-shadow: none;
}

body.app-ui--industrial.has-app-shell:not(.page-live) .content {
  background: var(--refresh-canvas);
  color: var(--refresh-ink);
}

body.app-ui--industrial.has-app-shell:not(.page-live) .content > .topbar {
  min-height: 0;
  margin-bottom: 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--refresh-line);
  background: transparent;
}

body.app-ui--industrial.has-app-shell:not(.page-live) .content > .topbar h1 {
  color: var(--refresh-ink);
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.35;
}

body.app-ui--industrial.has-app-shell:not(.page-live) :is(.subtitle, .note, .hint) {
  color: var(--refresh-muted);
}

body.app-ui--industrial.has-app-shell:not(.page-live) :is(.panel, .viewer-management-panel, .jma-panel) {
  border-color: var(--refresh-line);
  border-radius: 4px;
  background: var(--refresh-paper);
  box-shadow: none;
}

body.app-ui--industrial.has-app-shell:not(.page-live) :is(button, input, select, textarea) {
  border-radius: 3px;
}

body.app-ui--industrial.has-app-shell:not(.page-live) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(:disabled) {
  border-color: var(--refresh-line-strong);
  background-color: #fff;
  color: var(--refresh-ink);
  box-shadow: none;
}

body.app-ui--industrial.has-app-shell:not(.page-live) :is(button.primary, .button.primary, .primary) {
  border-color: var(--refresh-accent);
  background: var(--refresh-accent);
  color: #fff;
}

body.app-ui--industrial.has-app-shell:not(.page-live) :is(button.primary, .button.primary, .primary):is(:hover, :focus-visible) {
  border-color: #084f5e;
  background: #084f5e;
}

/* Record lists and graphs: controls and data sit on a single paper surface. */
body.app-ui--industrial:is(.page-history, .page-graph) .content > .panel {
  border-color: var(--refresh-line);
  background: #fff;
}

body.app-ui--industrial:is(.page-history, .page-graph) :is(.panel-toolbar, .app-commandbar > .panel-toolbar) {
  border-bottom-color: var(--refresh-line);
  background: #fff;
  box-shadow: none;
}

body.app-ui--industrial:is(.page-history, .page-graph) :is(.record-tab, .layout-button, .date-step, .date-display, .date-shortcut, .export-button) {
  border-radius: 3px;
  box-shadow: none;
}

body.app-ui--industrial:is(.page-history, .page-graph) :is(.record-tab, .layout-button).active,
body.app-ui--industrial:is(.page-history, .page-graph) :is(.record-tab, .layout-button)[aria-pressed="true"] {
  background: var(--refresh-accent-soft);
  color: var(--refresh-accent);
  box-shadow: inset 0 -2px var(--refresh-accent);
}

body.app-ui--industrial:is(.page-history, .page-graph) :is(.table-wrap, .management-table-wrap, .chart-card, .graph-chart) {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}

body.app-ui--industrial table :is(th, td) { border-color: var(--refresh-line); }
body.app-ui--industrial table th {
  background: #f0f3f5;
  color: var(--refresh-text);
  font-weight: 750;
}
body.app-ui--industrial table td { color: var(--refresh-ink); }
body.app-ui--industrial table tbody tr:not(.alarm-row):not(.caution-row):nth-child(even) td:not(.alarm-value) { background: #fbfcfc; }
body.app-ui--industrial table tbody tr:not(.alarm-row):not(.caution-row):hover td:not(.alarm-value) { background: #f1f6f7; }

/* Settings, JMA and signage editors use one field ledger instead of nested cards. */
body.app-ui--industrial:is(.page-settings, .page-jma-settings, .page-signage) :is(.settings-ledger, .jma-settings-ledger, .signage-editor-pane) {
  background: #fff;
}

body.app-ui--industrial:is(.page-settings, .page-jma-settings, .page-signage) :is(.form-ledger-section, .form-ledger-group, .notification-card, .settings-group, .jma-panel, .signage-editor-section) {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}

body.app-ui--industrial:is(.page-settings, .page-jma-settings, .page-signage) :is(.settings-group-head, .mail-setting-group__heading, .jma-head) {
  border-bottom-color: var(--refresh-line);
  background: #fff;
}

body.app-ui--industrial.page-settings .form-ledger-section--alarms .metric-card {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}

body.app-ui--industrial.page-settings .form-ledger-section--alarms .metric-card::before,
body.app-ui--industrial.page-settings .notification-card::before,
body.app-ui--industrial.page-signage .signage-editor-section::before {
  display: none;
  content: none;
}

body.app-ui--industrial.page-settings .settings-tab.active,
body.app-ui--industrial.page-settings .alarm-section-navigation button.is-current-section,
body.app-ui--industrial.page-signage .signage-preset-button[aria-pressed="true"] {
  color: var(--refresh-accent);
}

/* The communication page keeps status colour only where it carries meaning. */
body.app-ui--industrial.page-lte :is(.communication-quality-hero, .communication-overview-panel, .boot-time-panel, .uptime-panel, .update-panel, .device-detail-panel, .upload-recovery-panel) {
  border-color: var(--refresh-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

body.app-ui--industrial.page-lte .communication-quality-hero::before,
body.app-ui--industrial.page-lte .communication-overview-panel::before {
  display: none;
  content: none;
}

body.app-ui--industrial.page-lte :is(.communication-quality-facts, .communication-detail-list, .communication-history-list) {
  border-color: var(--refresh-line);
}

/* Admin and viewer tables read as operational lists. */
body.app-ui--industrial:is(.page-admin, .page-viewer-accounts) :is(.management-list-panel, .management-operation-panel, .management-table-wrap, .admin-tab-panel) {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}

body.app-ui--industrial.page-admin .admin-tabs {
  border-bottom-color: var(--refresh-line);
  background: transparent;
}

body.app-ui--industrial.page-admin .admin-tab.active {
  border-bottom-color: var(--refresh-accent);
  background: transparent;
  color: var(--refresh-accent);
}

body.app-ui--industrial.page-admin :is(.admin-device-summary, .operations-strip) {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #f7f9fa;
  box-shadow: none;
}

body.app-ui--industrial.page-admin .admin-control-notice {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #f7f9fa;
}

/* Support and login are simple forms, with no decorative pretitle. */
body.app-ui--industrial.page-contact .contact-page {
  max-width: 900px;
  border-color: var(--refresh-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
body.app-ui--industrial.page-contact .contact-page-kicker { display: none; }
body.app-ui--industrial.page-contact .contact-page-header { border-bottom-color: var(--refresh-line); }
body.app-ui--industrial.page-contact .contact-page-header h1 { color: var(--refresh-ink); }
body.app-ui--industrial.page-contact .contact-form-actions { border-top-color: var(--refresh-line); }

body.app-ui--industrial.page-login {
  background: var(--refresh-canvas);
  color: var(--refresh-ink);
}
body.app-ui--industrial.page-login::before { content: none; }
body.app-ui--industrial.page-login .login-card {
  border: 1px solid var(--refresh-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
body.app-ui--industrial.page-login :is(.login-title, .login-card label) { color: var(--refresh-ink); }
body.app-ui--industrial.page-login .login-submit {
  border-radius: 3px;
  background: var(--refresh-accent);
  box-shadow: none;
}
body.app-ui--industrial.page-login .login-submit:is(:hover, :focus-visible) { background: #084f5e; }

/* Mail retains its own interactions and uses the same white navigation rail. */
body.mail-page {
  --mail-bg: var(--refresh-canvas);
  --mail-panel: #fff;
  --mail-ink: var(--refresh-ink);
  --mail-muted: var(--refresh-muted);
  --mail-line: var(--refresh-line);
  --mail-blue: var(--refresh-accent);
  --mail-blue-dark: var(--refresh-accent);
  background: var(--refresh-canvas);
  color: var(--refresh-ink);
}

body.mail-page .mail-sidebar {
  border-right: 1px solid var(--refresh-line);
  background: #fff;
  color: var(--refresh-ink);
}
body.mail-page .mail-brand-row { border-bottom: 1px solid var(--refresh-line); }
body.mail-page .mail-nav a { color: var(--refresh-text); }
body.mail-page .mail-nav a:is(:hover, :focus-visible) { background: #f1f5f6; color: #17485a; }
body.mail-page .mail-nav a.active { border-color: transparent; background: var(--refresh-accent-soft); color: var(--refresh-accent); }
body.mail-page .mail-account { border-top-color: var(--refresh-line); }
body.mail-page .mail-account summary { border-color: var(--refresh-line); color: var(--refresh-text); }
body.mail-page .mail-account summary:is(:hover, :focus-visible) { background: #f1f5f6; }
body.mail-page .mail-main { background: var(--refresh-canvas); }
body.mail-page .mail-panel {
  border-color: var(--refresh-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
body.mail-page .mail-setting-group {
  border: 0;
  border-top: 1px solid var(--refresh-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
body.mail-page .mail-setting-group__heading {
  border-bottom: 1px solid var(--refresh-line);
  border-radius: 0;
  background: #fff;
}
body.mail-page .mail-setting-group__heading h3 { color: var(--refresh-ink); }
body.mail-page .mail-channel-rail { border-bottom-color: var(--refresh-line); box-shadow: none; }
body.mail-page .mail-channel-rail a { border-color: var(--refresh-line); color: var(--refresh-text); }
body.mail-page .mail-channel-rail a[aria-current] { background: var(--refresh-accent); color: #fff; }
body.mail-page .mail-channel-rail a:is(:hover, :focus-visible):not([aria-current]) { background: var(--refresh-accent-soft); color: var(--refresh-accent); }
body.mail-page .mail-history-tabs a[aria-current] { border-bottom-color: var(--refresh-accent); color: var(--refresh-accent); }
body.mail-page .mail-history th { background: #f0f3f5; color: var(--refresh-text); }
body.mail-page .mail-history td { border-color: var(--refresh-line); }
body.mail-page :is(.mail-button, input, select, textarea) { border-radius: 3px; }
body.mail-page input:is([type="checkbox"], [type="radio"]) { accent-color: var(--refresh-accent); }

/* Service choice is a deliberate entry screen, not a set of floating tiles. */
body.service-home { background: var(--refresh-canvas); color: var(--refresh-ink); }
body.service-home .home-header,
body.service-home .home-footer { border-color: var(--refresh-line); }
body.service-home .home-heading p { color: var(--refresh-muted); }
body.service-home .home-card {
  border-color: var(--refresh-line);
  border-radius: 4px;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
body.service-home .home-card:hover { transform: none; border-color: var(--refresh-accent); box-shadow: none; }
body.service-home .home-open { border-radius: 3px; }
body.service-home .home-account a { border-color: var(--refresh-line-strong); border-radius: 3px; color: var(--refresh-accent); }

/* Public signage has user-configured backgrounds; refresh only the default. */
body.page-signage-display[data-background="default"] { background: var(--refresh-canvas); }
body.page-signage-display[data-background="default"] .topbar {
  border-color: var(--refresh-line);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}
body.page-signage-display[data-background="default"] .card:not(.metric-caution):not(.metric-warning) {
  background: #fff;
  box-shadow: none;
}

@media (max-width: 960px) {
  body.app-ui--industrial.has-app-shell .sidebar { border-right-color: var(--refresh-line); }
  body.app-ui--industrial.has-app-shell:not(.page-live) .content > .topbar h1 { font-size: 23px; }
  body.mail-page .mail-mobile-bar { border-bottom-color: var(--refresh-line); box-shadow: none; }
  body.mail-page .mail-sidebar { border-right-color: var(--refresh-line); }
}

@media (prefers-reduced-motion: reduce) {
  body.service-home .home-card { transition: none; }
}

/* Center both the native date text and the compact mobile pseudo-label. */
@media (max-width: 960px) {
  body.app-ui--industrial.has-app-commandbar:is(.page-history, .page-graph) .record-mobile-toolbar .date-display {
    display: grid !important;
    place-items: center;
    padding-inline: 0 !important;
    text-align: center;
  }
  body.app-ui--industrial.has-app-commandbar:is(.page-history, .page-graph) .record-mobile-toolbar .date-display > #date_label,
  body.app-ui--industrial.has-app-commandbar:is(.page-history, .page-graph) .record-mobile-toolbar .date-display > #date_label::after {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
  }
}