/* SIMHSYCN Phase 5 — system light/dark compatibility hardening.
   Loaded after every page stylesheet so legacy literals cannot hide content. */

html[data-theme="dark"] body.simh-app {
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .075), transparent 28rem),
    radial-gradient(circle at 96% 6%, rgba(59, 130, 246, .07), transparent 30rem),
    var(--simh-bg) !important;
  color: var(--simh-text) !important;
}

html[data-theme="dark"] body.simh-app h1,
html[data-theme="dark"] body.simh-app h2,
html[data-theme="dark"] body.simh-app h3,
html[data-theme="dark"] body.simh-app h4,
html[data-theme="dark"] body.simh-app h5,
html[data-theme="dark"] body.simh-app h6,
html[data-theme="dark"] body.simh-app strong {
  color: var(--simh-heading) !important;
}

html[data-theme="dark"] body.simh-app .muted,
html[data-theme="dark"] body.simh-app small,
html[data-theme="dark"] body.simh-app .caption,
html[data-theme="dark"] body.simh-app .description,
html[data-theme="dark"] body.simh-app .pagination-meta {
  color: var(--simh-muted) !important;
}

/* Shared surfaces and page containers. */
html[data-theme="dark"] body.simh-app .card:not(.stat),
html[data-theme="dark"] body.simh-app .panel,
html[data-theme="dark"] body.simh-app .native-panel,
html[data-theme="dark"] body.simh-app .native-card,
html[data-theme="dark"] body.simh-app .form-card,
html[data-theme="dark"] body.simh-app .detail-card,
html[data-theme="dark"] body.simh-app .dashboard-table-card,
html[data-theme="dark"] body.simh-app .customer-recent-panel,
html[data-theme="dark"] body.simh-app .native-table-scroll,
html[data-theme="dark"] body.simh-app .table-scroll-wrapper,
html[data-theme="dark"] body.simh-app .transaction-summary-strip > div,
html[data-theme="dark"] body.simh-app .customer-transaction-row,
html[data-theme="dark"] body.simh-app .transaction-list-empty,
html[data-theme="dark"] body.simh-app .recent-transaction-item,
html[data-theme="dark"] body.simh-app .recent-transaction-empty,
html[data-theme="dark"] body.simh-app .provider-card,
html[data-theme="dark"] body.simh-app .provider-message,
html[data-theme="dark"] body.simh-app .job-mini,
html[data-theme="dark"] body.simh-app .health-card,
html[data-theme="dark"] body.simh-app .flow-card,
html[data-theme="dark"] body.simh-app .ops-strip,
html[data-theme="dark"] body.simh-app .ops-hero,
html[data-theme="dark"] body.simh-app .monitor-stat,
html[data-theme="dark"] body.simh-app .engine-metric,
html[data-theme="dark"] body.simh-app .stat-card,
html[data-theme="dark"] body.simh-app .capacity-box,
html[data-theme="dark"] body.simh-app .route-card,
html[data-theme="dark"] body.simh-app .event-item,
html[data-theme="dark"] body.simh-app .audit-item,
html[data-theme="dark"] body.simh-app .assignment-summary,
html[data-theme="dark"] body.simh-app .assignment-stat,
html[data-theme="dark"] body.simh-app .assignment-settings,
html[data-theme="dark"] body.simh-app .assignment-connection,
html[data-theme="dark"] body.simh-app .modal,
html[data-theme="dark"] body.simh-app .modal-card,
html[data-theme="dark"] body.simh-app .dialog,
html[data-theme="dark"] body.simh-app .dropdown-menu {
  border-color: var(--simh-border) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-sm) !important;
}

html[data-theme="dark"] body.simh-app .native-hero,
html[data-theme="dark"] body.simh-app .transaction-hero,
html[data-theme="dark"] body.simh-app .transaction-status-card,
html[data-theme="dark"] body.simh-app .sim-registry-hero {
  border-color: rgba(94, 234, 212, .15) !important;
  color: var(--simh-text) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(59, 130, 246, .12), transparent 18rem),
    linear-gradient(135deg, rgba(17, 60, 58, .72), rgba(23, 44, 85, .64)),
    var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-sm) !important;
}

html[data-theme="dark"] body.simh-app .native-hero-icon {
  color: #9ff7e8 !important;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .2) !important;
}

/* Inputs and searchable/filter controls. */
html[data-theme="dark"] body.simh-app input,
html[data-theme="dark"] body.simh-app select,
html[data-theme="dark"] body.simh-app textarea,
html[data-theme="dark"] body.simh-app .search-row,
html[data-theme="dark"] body.simh-app .native-search,
html[data-theme="dark"] body.simh-app .transaction-filter-bar,
html[data-theme="dark"] body.simh-app .filter-form,
html[data-theme="dark"] body.simh-app .controls-form {
  border-color: var(--simh-border) !important;
  color: var(--simh-text-strong) !important;
  background: var(--simh-surface-muted) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.simh-app input::placeholder,
html[data-theme="dark"] body.simh-app textarea::placeholder {
  color: var(--simh-faint) !important;
  opacity: 1;
}

html[data-theme="dark"] body.simh-app option {
  color: var(--simh-text-strong);
  background: var(--simh-surface);
}

/* Data tables and detail tables. */
html[data-theme="dark"] body.simh-app table,
html[data-theme="dark"] body.simh-app .native-data-table,
html[data-theme="dark"] body.simh-app .monitor-table,
html[data-theme="dark"] body.simh-app .engine-table,
html[data-theme="dark"] body.simh-app .colourful-table,
html[data-theme="dark"] body.simh-app .detail-table {
  color: var(--simh-text) !important;
  background: transparent !important;
}

html[data-theme="dark"] body.simh-app table thead th,
html[data-theme="dark"] body.simh-app .native-data-table thead th,
html[data-theme="dark"] body.simh-app .monitor-table thead th,
html[data-theme="dark"] body.simh-app .engine-table thead th,
html[data-theme="dark"] body.simh-app .colourful-table thead th {
  border-color: var(--simh-border) !important;
  color: #dbeafe !important;
  background: #17243a !important;
}

html[data-theme="dark"] body.simh-app table tbody td,
html[data-theme="dark"] body.simh-app .native-data-table tbody td,
html[data-theme="dark"] body.simh-app .monitor-table tbody td,
html[data-theme="dark"] body.simh-app .engine-table tbody td,
html[data-theme="dark"] body.simh-app .colourful-table tbody td,
html[data-theme="dark"] body.simh-app .detail-table th,
html[data-theme="dark"] body.simh-app .detail-table td {
  border-color: var(--simh-border) !important;
  color: var(--simh-text) !important;
  background: rgba(17, 27, 45, .72) !important;
}

html[data-theme="dark"] body.simh-app table tbody tr:nth-child(even) td {
  background: rgba(21, 33, 54, .86) !important;
}

html[data-theme="dark"] body.simh-app table tbody tr:hover td,
html[data-theme="dark"] body.simh-app .customer-transaction-row:hover,
html[data-theme="dark"] body.simh-app .recent-transaction-item:hover {
  color: var(--simh-text-strong) !important;
  background: rgba(30, 55, 77, .96) !important;
}

/* Text that had hard-coded dark colours in page CSS. */
html[data-theme="dark"] body.simh-app .customer-transaction-main strong,
html[data-theme="dark"] body.simh-app .customer-transaction-destination strong,
html[data-theme="dark"] body.simh-app .customer-transaction-money strong,
html[data-theme="dark"] body.simh-app .recent-transaction-primary strong,
html[data-theme="dark"] body.simh-app .recent-transaction-recipient strong,
html[data-theme="dark"] body.simh-app .recent-transaction-value strong,
html[data-theme="dark"] body.simh-app .customer-recent-head h2,
html[data-theme="dark"] body.simh-app .transaction-status-card > strong,
html[data-theme="dark"] body.simh-app .detail-table td,
html[data-theme="dark"] body.simh-app .provider-message,
html[data-theme="dark"] body.simh-app .flow-card strong,
html[data-theme="dark"] body.simh-app .health-card strong {
  color: var(--simh-text-strong) !important;
}

html[data-theme="dark"] body.simh-app .customer-transaction-main code,
html[data-theme="dark"] body.simh-app .recent-transaction-primary code,
html[data-theme="dark"] body.simh-app code {
  border-color: var(--simh-border) !important;
  color: #8fe9dd !important;
  background: #0a1424 !important;
}

html[data-theme="dark"] body.simh-app .section-kicker,
html[data-theme="dark"] body.simh-app .native-pill,
html[data-theme="dark"] body.simh-app .view-link,
html[data-theme="dark"] body.simh-app .customer-transaction-open,
html[data-theme="dark"] body.simh-app .recent-transaction-arrow {
  color: #7dded2 !important;
}

html[data-theme="dark"] body.simh-app .view-link,
html[data-theme="dark"] body.simh-app .recent-transaction-arrow,
html[data-theme="dark"] body.simh-app .customer-recent-head .view-link {
  border-color: rgba(94, 234, 212, .18) !important;
  background: rgba(17, 60, 58, .58) !important;
}

/* Pagination remains visible in both modes. */
html[data-theme="dark"] body.simh-app .pagination a,
html[data-theme="dark"] body.simh-app .pagination span,
html[data-theme="dark"] body.simh-app .page-size-control select {
  border-color: var(--simh-border) !important;
  color: var(--simh-text-strong) !important;
  background: var(--simh-surface-muted) !important;
}

html[data-theme="dark"] body.simh-app .pagination .active {
  border-color: #2dd4bf !important;
  color: #062a27 !important;
  background: #5eead4 !important;
}

html[data-theme="dark"] body.simh-app .pagination .disabled,
html[data-theme="dark"] body.simh-app .pagination-ellipsis {
  color: var(--simh-faint) !important;
  opacity: .7;
}

/* Keep intentional coloured cards readable rather than flattening them. */
html[data-theme="dark"] body.simh-app .stats .stat,
html[data-theme="dark"] body.simh-app .bank-card,
html[data-theme="dark"] body.simh-app .bank-card strong,
html[data-theme="dark"] body.simh-app .bank-card span,
html[data-theme="dark"] body.simh-app .bank-card small {
  color: #ffffff !important;
}

html[data-theme="dark"] body.simh-app .alert {
  color: var(--simh-text-strong) !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
  }
}

/* Phase 5 management surfaces. */
html[data-theme="dark"] body.simh-app .management-stats > div,
html[data-theme="dark"] body.simh-app .device-registry-card,
html[data-theme="dark"] body.simh-app .management-table-card,
html[data-theme="dark"] body.simh-app .advanced-assignment,
html[data-theme="dark"] body.simh-app .review-page-size {
  border-color: var(--simh-border) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-xs) !important;
}

html[data-theme="dark"] body.simh-app .ops-strip {
  background:
    radial-gradient(circle at 92% 10%, rgba(59, 130, 246, .12), transparent 17rem),
    radial-gradient(circle at 8% 110%, rgba(45, 212, 191, .10), transparent 18rem),
    var(--simh-surface) !important;
}

html[data-theme="dark"] body.simh-app .capacity-bar,
html[data-theme="dark"] body.simh-app .capacity-line {
  background: #0a1424 !important;
}


/* --------------------------------------------------------------------------
   Phase 6 — final dark-mode surfaces, header menu and footer corrections
   -------------------------------------------------------------------------- */
body.simh-app .account-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 160 !important;
  min-width: 220px !important;
  padding: 8px !important;
  display: none !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  overflow: hidden !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: 15px !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-md) !important;
}

body.simh-app .account-menu.is-open { display: grid !important; }
body.simh-app .account-menu strong,
body.simh-app .account-menu a {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--simh-text) !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: nowrap !important;
}
body.simh-app .account-menu strong {
  color: var(--simh-text-strong) !important;
  background: var(--simh-surface-muted) !important;
}
body.simh-app .account-menu a:hover { background: var(--simh-surface-muted) !important; }
body.simh-app .account-menu .danger-link { color: var(--simh-danger) !important; }

html[data-theme="dark"] body.simh-app .page-title {
  border-color: var(--simh-border) !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(45, 212, 191, .12), transparent 13rem),
    linear-gradient(135deg, rgba(17, 27, 45, .98), rgba(20, 38, 58, .98)) !important;
  box-shadow: var(--simh-shadow-sm) !important;
}
html[data-theme="dark"] body.simh-app .page-title h1,
html[data-theme="dark"] body.simh-app .page-title p,
html[data-theme="dark"] body.simh-app .page-title .page-context {
  color: var(--simh-text-strong) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body.simh-app .page-title p { color: var(--simh-muted) !important; }
html[data-theme="dark"] body.simh-app .page-title .page-context { color: #75e8d8 !important; }

html[data-theme="dark"] body.simh-app .site-footer,
html[data-theme="dark"] body.simh-app .auth-footer {
  border-color: var(--simh-border) !important;
  color: var(--simh-muted) !important;
  background: #0e1829 !important;
}
html[data-theme="dark"] body.simh-app .site-footer span,
html[data-theme="dark"] body.simh-app .auth-footer span {
  color: var(--simh-muted) !important;
}

html[data-theme="dark"] body.simh-app .service-card-shell,
html[data-theme="dark"] body.simh-app .catalog-card,
html[data-theme="dark"] body.simh-app .catalog-bottom,
html[data-theme="dark"] body.simh-app .service-logo,
html[data-theme="dark"] body.simh-app .no-services,
html[data-theme="dark"] body.simh-app .service-search,
html[data-theme="dark"] body.simh-app .assignment-card,
html[data-theme="dark"] body.simh-app .customer-action-card {
  border-color: var(--simh-border) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-sm) !important;
}
html[data-theme="dark"] body.simh-app .service-top h1,
html[data-theme="dark"] body.simh-app .service-card-head h2,
html[data-theme="dark"] body.simh-app .catalog-card h3,
html[data-theme="dark"] body.simh-app .catalog-card strong,
html[data-theme="dark"] body.simh-app .assignment-card strong,
html[data-theme="dark"] body.simh-app .customer-action-card strong {
  color: var(--simh-text-strong) !important;
}
html[data-theme="dark"] body.simh-app .service-top p,
html[data-theme="dark"] body.simh-app .service-card-head p,
html[data-theme="dark"] body.simh-app .catalog-meta,
html[data-theme="dark"] body.simh-app .catalog-card p,
html[data-theme="dark"] body.simh-app .assignment-card small,
html[data-theme="dark"] body.simh-app .customer-action-card small {
  color: var(--simh-muted) !important;
}

html[data-theme="dark"] body.simh-app .ops-hero,
html[data-theme="dark"] body.simh-app .bank-card,
html[data-theme="dark"] body.simh-app .stat.stat-pair {
  color: var(--simh-text-on-color) !important;
}
html[data-theme="dark"] body.simh-app .ops-hero h2,
html[data-theme="dark"] body.simh-app .ops-hero p,
html[data-theme="dark"] body.simh-app .stat.stat-pair span,
html[data-theme="dark"] body.simh-app .stat.stat-pair strong,
html[data-theme="dark"] body.simh-app .bank-card strong,
html[data-theme="dark"] body.simh-app .bank-card span,
html[data-theme="dark"] body.simh-app .bank-card small {
  color: var(--simh-text-on-color) !important;
}