/**
 * Phone-only UI polish (max-width: 768px).
 * Desktop layouts must remain unchanged — all rules are media-scoped.
 * ACXA_MOBILE_UI_POLISH_V5
 */

/* ── Reports modal: date containment + centered shift text ── */
@media (max-width: 768px) {
  #rptFilterModal {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  #rptFilterModal .ar-shell {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
  }

  #rptFilterModal .ar-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  #rptFilterModal .ar-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #rptFilterModal .ar-panel {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  #rptFilterModal .ar-panel:has(.rpt-ms-root.open) {
    overflow: visible !important;
  }

  #rptFilterModal .ar-field-grid,
  #rptFilterModal #rptMFiltersInner.ar-field-grid,
  #rptFilterModal #rptMFiltersInner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  #rptFilterModal .ar-field,
  #rptFilterModal .ar-field.ar-span-2,
  #rptFilterModal #rptMFiltersInner > .ar-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #rptFilterModal .ar-input,
  #rptFilterModal input.ar-input,
  #rptFilterModal input[type="date"],
  #rptFilterModal input[type="time"],
  #rptFilterModal select.ar-input,
  #rptFilterModal #rptF_date,
  #rptFilterModal #rptF_date_a,
  #rptFilterModal #rptF_date_b,
  #rptFilterModal #rptF_shift_index,
  #rptFilterModal #rptF_shift_index_a,
  #rptFilterModal #rptF_shift_index_b {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Center shift (and date) field text on phone */
  #rptFilterModal #rptF_shift_index,
  #rptFilterModal #rptF_shift_index_a,
  #rptFilterModal #rptF_shift_index_b,
  #rptFilterModal select.ar-input {
    text-align: center !important;
    text-align-last: center !important;
  }

  #rptFilterModal #rptF_date,
  #rptFilterModal #rptF_date_a,
  #rptFilterModal #rptF_date_b,
  #rptFilterModal input[type="date"].ar-input {
    text-align: center !important;
  }

  #rptFilterModal input[type="date"]::-webkit-datetime-edit,
  #rptFilterModal input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  #rptFilterModal input[type="date"]::-webkit-datetime-edit-text,
  #rptFilterModal input[type="date"]::-webkit-datetime-edit-month-field,
  #rptFilterModal input[type="date"]::-webkit-datetime-edit-day-field,
  #rptFilterModal input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #rptFilterModal input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 2px !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    opacity: 0.65;
  }
}

/* ── Fault / Rolls modal: title left, X top-right, clear of URL bar ── */
@media (max-width: 768px) {
  #faultDetailModal.fm-overlay,
  #faultDetailModal {
    padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 14px)) !important;
    padding-right: 12px !important;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    padding-left: 12px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #faultDetailModal .fm-shell,
  #faultDetailModal > .fm-shell {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 36px) !important;
    margin: 0 !important;
  }

  #faultDetailModal > .fm-shell > .fm-header,
  #faultDetailModal .fm-header,
  #faultDetailModal > div > .fm-header {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 14px 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }

  #faultDetailModal .fm-header-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
  }

  #faultDetailModal .fm-header-icon {
    flex-shrink: 0 !important;
  }

  #faultDetailModal .fm-header-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  #faultDetailModal .fm-kicker,
  #faultDetailModal .fm-title {
    text-align: left !important;
  }

  #faultDetailModal .fm-close {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
    order: 3 !important;
    z-index: 21 !important;
  }
}

/* ── Machine Details: kill mid-screen gap; picker under field; maint same row ── */
@media (max-width: 768px) {
  body.nodes-page-active .main-content,
  body.nodes-page-active #mainContent {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.nodes-page-active #page-nodes.page-visible,
  #page-nodes.page-visible,
  #page-nodes {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  #page-nodes > .mb-5 > div:first-child,
  #page-nodes > .mb-5.flex > div:first-child {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #page-nodes > .mb-5 > div > h2,
  #page-nodes > .mb-5 > div > p {
    margin-inline: 0 !important;
    max-width: none !important;
  }

  /* Header must stay content-sized — never absorb leftover viewport height */
  #page-nodes > .mb-5.flex,
  #page-nodes > .mb-5.flex.flex-col.sm\:flex-row.sm\:items-center.sm\:justify-between {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 60 !important;
  }

  /* Critical: phone column layout — do NOT let flex-basis become wrap HEIGHT */
  #page-nodes .machine-picker-wrap,
  #page-nodes #machinePickerWrap,
  #page-nodes .machine-picker-wrap.machine-picker-wrap--wide {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 70 !important;
    overflow: visible !important;
    align-self: stretch !important;
  }

  #page-nodes .machine-picker-btn {
    width: 100% !important;
    height: auto !important;
  }

  #page-nodes .machine-picker-wrap.open {
    z-index: 80 !important;
  }

  /* Keep dropdown attached under the search field (not mid-screen / bottom sheet) */
  #page-nodes .machine-picker-dropdown,
  #page-nodes #machinePickerDropdown {
    position: absolute !important;
    inset: auto 0 auto 0 !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: min(52vh, 360px) !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 90 !important;
    box-sizing: border-box !important;
  }

  #page-nodes .machine-picker-list {
    max-height: min(40vh, 280px) !important;
  }

  #page-nodes #nodeDetailEmpty {
    min-height: 0 !important;
    flex: none !important;
    margin-top: 8px !important;
    padding: 24px 16px !important;
  }

  #page-nodes #nodeDetailEmpty:not([style*="display: none"]):not([style*="display:none"]) {
    justify-content: flex-start !important;
    padding-top: 24px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #page-nodes #nodeDetailEmpty[style*="display: none"],
  #page-nodes #nodeDetailEmpty[style*="display:none"] {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: none !important;
  }

  #page-nodes #nodeDetailPanel {
    margin-top: 4px !important;
    padding-top: 0 !important;
    position: relative !important;
  }

  #page-nodes #nodeDetailPanel > .mb-5:first-child,
  #page-nodes #nodeDetailPanel > .mb-5:first-of-type {
    margin-top: 0 !important;
  }

  /* Skeleton covers panel only — do not invent extra top offset */
  #page-nodes #nodeDetailPanel .node-detail-skeleton-overlay,
  #page-nodes #nodeDetailSkeletonOverlay {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* Maintenance title + Open button MUST stay one row (beats premium column stack) */
  #page-nodes #nodeMaintSection .node-maint-head,
  #page-nodes #nodeDetailPanel .node-maint-head,
  #page-nodes #nodeDetailPanel .node-maint-head.flex.items-center.justify-between.mb-3,
  #page-nodes #nodeDetailPanel #nodeMaintSection .node-maint-head.flex.items-center.justify-between.gap-2.mb-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #page-nodes #nodeMaintSection .node-maint-head h4,
  #page-nodes #nodeDetailPanel .node-maint-head h4 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #page-nodes #nodeMaintSection .node-maint-open-btn,
  #page-nodes #nodeDetailPanel .node-maint-open-btn,
  #page-nodes #nodeDetailPanel #nodeMaintSection .node-maint-open-btn {
    flex: 0 0 auto !important;
    align-self: center !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
  }
}

/* ── Workers: left titles; subtitle prefers 1 line, wraps to 2 if needed ── */
@media (max-width: 768px) {
  #page-operators > .max-w-6xl > .flex:first-child > div:first-child {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  #page-operators h2 {
    text-align: left !important;
    margin-inline: 0 !important;
    max-width: none !important;
  }

  /* Prefer one line; allow natural wrap to two when the phone is too narrow */
  #page-operators h2 + p {
    text-align: left !important;
    margin-inline: 0 !important;
    margin-top: 4px !important;
    max-width: none !important;
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-wrap: pretty !important;
    overflow-wrap: anywhere !important;
    hyphens: manual !important;
  }

  #page-operators > .max-w-6xl > .flex:first-child > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "search search"
      "bulk add" !important;
    gap: 10px !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  #page-operators #operatorSearchWrap,
  #page-operators .operators-search-form {
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #page-operators #operatorBulkBtn {
    grid-area: bulk !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  #page-operators #operatorAddBtn {
    grid-area: add !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 420px) {
  #page-operators > .max-w-6xl > .flex:first-child > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "search search"
      "bulk add" !important;
  }
}

/* ── Settings: shift times wrap, no overflow ── */
@media (max-width: 768px) {
  .settings-shift-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .settings-shift-row-main {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    min-width: 0 !important;
  }

  .settings-shift-row .shift-name {
    flex: 1 1 calc(100% - 24px) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .settings-shift-row .shift-time-field {
    flex: 1 1 calc(50% - 18px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .settings-shift-row .shift-time-face {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .settings-shift-card,
  #shiftEditorRows {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* ── Alerts: hide clock; Read-all flush to same right edge as cards ── */
@media (max-width: 768px) {
  #page-alerts > .flex.flex-col.sm\:flex-row.items-start.sm\:items-center.justify-between.gap-4.mb-6 {
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #page-alerts .alerts-header-copy {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  #page-alerts .alerts-title-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* Same right edge as Active/Archived pills and alert cards.
     ACXA_ALERTS_READ_ALL_HEADER_V1: Read all now lives in the header actions row
     next to the scope pills, where the old view-mode icon used to sit. */
  #page-alerts #alertsMarkAllReadBtn {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  #page-alerts .alerts-mark-all-read-label {
    display: none !important;
  }

  #page-alerts > .flex.flex-col.sm\:flex-row.items-start.sm\:items-center.justify-between.gap-4.mb-6 > .alerts-header-actions,
  #page-alerts .alerts-header-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #page-alerts #alertsScopeToggle {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #page-alerts .alerts-scope-btn {
    justify-content: center !important;
    padding: 9px 6px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #page-alerts #alertsResetBtn {
    margin-left: auto !important;
  }

  #page-alerts #notifCategoryPillsContainer {
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  /* Phone: category dropdown instead of pill grid */
  #page-alerts .notif-category-pills {
    display: none !important;
  }

  #page-alerts .notif-cat-filter-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #page-alerts .notif-cat-select-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #615d59 !important;
  }

  html.dark #page-alerts .notif-cat-select-label {
    color: #a39e98 !important;
  }

  #page-alerts .notif-cat-select,
  #page-alerts #notifCategorySelect {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 36px 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    background: #efefef !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    box-sizing: border-box !important;
  }

  html.dark #page-alerts .notif-cat-select,
  html.dark #page-alerts #notifCategorySelect {
    background-color: #191a1b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f6f5f4 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f6f5f4' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }
}

/* Desktop keeps pills; hide phone select */
@media (min-width: 769px) {
  #page-alerts .notif-cat-select-label,
  #page-alerts .notif-cat-select,
  #page-alerts #notifCategorySelect {
    display: none !important;
  }
}

/* ── Machine Details V4: subtitle, info grid, worker, data tiles, chart ── */
@media (max-width: 768px) {
  /* Subtitle: prefer one line; wrap only when needed */
  #page-nodes > .mb-5 > div:first-child {
    align-items: flex-start !important;
    text-align: left !important;
  }

  #page-nodes > .mb-5 > div > h2 {
    text-align: left !important;
  }

  #page-nodes > .mb-5 > div > p {
    text-align: left !important;
    margin-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-wrap: pretty !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Machine Info: Live Inspector same row as title (beats older column stack) */
  #page-nodes #nodeDetailPanel .node-info-head,
  #page-nodes #nodeDetailPanel > .mb-5:first-of-type .flex.items-center.justify-between.mb-3:not(.node-maint-head),
  #page-nodes #nodeDetailPanel .flex.items-center.justify-between.mb-3.node-info-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #page-nodes #detailInspectorBtn {
    align-self: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 0 0 auto !important;
  }

  /* Live Data label left-aligned (not centered) */
  #page-nodes #nodeDetailPanel p[class*="text-emerald-400"],
  #page-nodes #nodeDetailPanel .text-emerald-400\/70 {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Machine Info grid: Machine full; pairs for the rest */
  #page-nodes #nodeInfoGrid,
  #page-nodes #nodeInfoGrid[data-node-info-grid="1"],
  #page-nodes [data-node-info-grid="1"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #page-nodes #nodeInfoGrid > div,
  #page-nodes [data-node-info-grid="1"] > div {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #page-nodes #nodeInfoGrid > div:nth-child(1),
  #page-nodes [data-node-info-grid="1"] > div:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  /* Current Worker: Shift Start full width */
  #page-nodes #nodeRfidPanel .grid,
  #page-nodes #nodeRfidPanel .node-worker-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #page-nodes #nodeRfidPanel .node-worker-shift-start,
  #page-nodes #nodeRfidPanel .grid > .node-metric-tile:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /* Machine Data tiles — live RPM/Counter/Set BEFORE B Shift heading */
  #page-nodes #nodeVarGrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #page-nodes #nodeVarGrid > [data-var-key="rpm"] { order: 1 !important; }
  #page-nodes #nodeVarGrid > [data-var-key="result1"] { order: 2 !important; }
  #page-nodes #nodeVarGrid > [data-var-key="preset1"] {
    order: 3 !important;
    grid-column: 1 / -1 !important;
  }

  /* Shift heading must not sit above live tiles (default order:0 beat order:1–3) */
  #page-nodes #nodeVarGrid > .node-shift-section-head,
  #page-nodes #nodeVarGrid > [data-shift-section-head="1"] {
    order: 9 !important;
    grid-column: 1 / -1 !important;
  }

  #page-nodes #nodeVarGrid > .col-span-full,
  #page-nodes #nodeVarGrid > #shiftRollProgressWrap,
  #page-nodes #nodeVarGrid > #efficiencyBarWrap {
    grid-column: 1 / -1 !important;
  }

  #page-nodes #nodeVarGrid > #tile24h-shift_max_rpm { order: 10 !important; }
  #page-nodes #nodeVarGrid > #tile24h-completed_rolls { order: 11 !important; }
  #page-nodes #nodeVarGrid > #shiftRollProgressWrap { order: 12 !important; }
  #page-nodes #nodeVarGrid > #tile24h-shift_0 { order: 20 !important; }
  #page-nodes #nodeVarGrid > #tile24h-shift_1 { order: 21 !important; }
  #page-nodes #nodeVarGrid > #tile24h-shift_2 { order: 22 !important; }
  #page-nodes #nodeVarGrid > #tile24h-shift_total { order: 23 !important; }

  /* 2 shifts: Total spans full width under A|B. 3 shifts: C|Total share a row. */
  #page-nodes #nodeVarGrid:not(:has(#tile24h-shift_2)) > #tile24h-shift_total {
    grid-column: 1 / -1 !important;
  }

  #page-nodes #nodeVarGrid > #efficiencyBarWrap { order: 30 !important; }
  #page-nodes #nodeVarGrid > #tile24h-shift_power_on {
    order: 31 !important;
    grid-column: 1 / -1 !important;
  }
  #page-nodes #nodeVarGrid > #tile24h-shift_run_time { order: 32 !important; }
  #page-nodes #nodeVarGrid > #tile24h-shift_stop_time { order: 33 !important; }

  /* RPM chart phone layout */
  #page-nodes .node-chart-section {
    display: flex !important;
    flex-direction: column !important;
  }

  #page-nodes .node-history-title-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  #page-nodes .node-history-title-row h4 {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  /* Live badge removed — View Access sits in its place */
  #page-nodes .node-history-live-badge,
  #page-nodes #rpmChartLiveBadge {
    display: none !important;
  }

  #page-nodes .node-history-access-slot,
  #page-nodes #chartDateRangeHintTarget {
    margin-left: auto !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 62% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  #page-nodes .node-history-access-slot .dag-hint,
  #page-nodes #chartDateRangeHintTarget > * {
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
  }

  #page-nodes .hist-date-row,
  #page-nodes #chartShiftPickers {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #page-nodes .hist-date-icon {
    display: none !important;
  }

  #page-nodes .hist-date-field,
  #page-nodes .hist-date-field--date,
  #page-nodes .hist-date-field--shift {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  #page-nodes .hist-date-label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  #page-nodes .hist-date-input,
  #page-nodes #chartShiftDate,
  #page-nodes #chartShiftSelect {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  #page-nodes .node-history-tools {
    order: 99 !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 14px !important;
    gap: 10px !important;
  }

  #page-nodes .chart-nav-wrap {
    order: 50 !important;
  }
}

/* Reports CTA readable on phone (and reinforce light/dark) */
@media (max-width: 768px) {
  #page-reports .rpt-card .rpt-card-cta,
  #reportsPageContent .rpt-card .rpt-card-cta,
  #page-reports .rpt-card .text-brand-400,
  #reportsPageContent .rpt-card .text-brand-400 {
    opacity: 1 !important;
    color: #0075de !important;
    font-weight: 700 !important;
    font-size: 11px !important;
  }

  html.dark #page-reports .rpt-card .rpt-card-cta,
  html.dark #reportsPageContent .rpt-card .rpt-card-cta {
    color: #62aef0 !important;
  }
}

/* Always-visible report CTA (desktop hover used to hide it — keep readable) */
#page-reports .rpt-card .rpt-card-cta,
#reportsPageContent .rpt-card .rpt-card-cta {
  opacity: 1 !important;
  color: #0075de !important;
  font-weight: 700 !important;
}
html.dark #page-reports .rpt-card .rpt-card-cta,
html.dark #reportsPageContent .rpt-card .rpt-card-cta {
  color: #62aef0 !important;
}
html:not(.dark) #page-reports .rpt-card .rpt-card-cta,
html:not(.dark) #reportsPageContent .rpt-card .rpt-card-cta {
  color: #0075de !important;
}