/* SIMHSYNC compact interface layer — loaded last. */
body.simh-app {
  font-size: 14px !important;
}
body.simh-app .topbar {
  min-height: 62px !important;
  height: 62px !important;
  padding: 0 18px !important;
  gap: 12px !important;
}
body.simh-app .topbar-brand,
body.simh-app .brand {
  gap: 10px !important;
}
body.simh-app .topbar-brand img,
body.simh-app .brand img,
body.simh-app .brand-mark,
body.simh-app .topbar-logo {
  max-height: 38px !important;
  max-width: 46px !important;
}
body.simh-app .topbar-brand strong,
body.simh-app .brand strong,
body.simh-app .topbar-title {
  font-size: 16px !important;
  line-height: 1.2 !important;
}
body.simh-app .menu-button,
body.simh-app .account-button,
body.simh-app .topbar-action {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
}
body.simh-app .app-sidebar {
  width: 248px !important;
}
body.simh-app .sidebar-hero {
  padding: 14px 15px !important;
  margin: 10px 10px 8px !important;
  border-radius: 12px !important;
}
body.simh-app .sidebar-hero strong { font-size: 14px !important; }
body.simh-app .sidebar-hero span { font-size: 11px !important; }
body.simh-app .side-nav { padding: 5px 9px 14px !important; gap: 2px !important; }
body.simh-app .side-link {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  gap: 10px !important;
}
body.simh-app .side-icon { width: 19px !important; height: 19px !important; }
body.simh-app .nav-section-label {
  margin: 12px 9px 4px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}
body.simh-app .app-main { margin-left: 248px !important; }
body.simh-app .content-area {
  padding: 19px 20px 30px !important;
  max-width: 1600px !important;
}
body.simh-app .page-title {
  margin-bottom: 15px !important;
  padding: 14px 16px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
}
body.simh-app .page-title h1 {
  font-size: clamp(20px, 2vw, 25px) !important;
  line-height: 1.18 !important;
  margin: 0 0 3px !important;
}
body.simh-app .page-title p,
body.simh-app .page-title .page-context { font-size: 12px !important; }
body.simh-app .card,
body.simh-app .native-panel,
body.simh-app .panel,
body.simh-app .customer-action-section,
body.simh-app .customer-developer-snapshot,
body.simh-app .customer-recent-panel {
  padding: 16px !important;
  border-radius: 12px !important;
}
body.simh-app .grid { gap: 13px !important; }
body.simh-app .grid.stats { gap: 12px !important; margin-bottom: 14px !important; }
body.simh-app .stat,
body.simh-app .stat-card { min-height: 96px !important; padding: 14px !important; }
body.simh-app .stat strong,
body.simh-app .stat-card strong { font-size: clamp(20px, 2.3vw, 28px) !important; }
body.simh-app .stat span,
body.simh-app .stat-card span { font-size: 11px !important; }
body.simh-app h2 { font-size: clamp(17px, 1.7vw, 21px) !important; }
body.simh-app h3 { font-size: 16px !important; }
body.simh-app p,
body.simh-app .muted { line-height: 1.55 !important; }
body.simh-app label { font-size: 12px !important; margin-bottom: 5px !important; }
body.simh-app input,
body.simh-app select,
body.simh-app textarea {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
body.simh-app textarea { min-height: 96px !important; }
body.simh-app .btn,
body.simh-app button.btn,
body.simh-app a.btn {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
}
body.simh-app table th,
body.simh-app table td {
  padding: 10px 11px !important;
  font-size: 12.5px !important;
}
body.simh-app .section-head { margin-bottom: 12px !important; gap: 12px !important; }
body.simh-app .section-kicker,
body.simh-app .native-pill { font-size: 10px !important; }
body.simh-app .customer-action-grid { gap: 11px !important; }
body.simh-app .customer-action-card {
  min-height: 78px !important;
  padding: 13px 14px !important;
  border-radius: 12px !important;
}
body.simh-app .customer-action-card strong { font-size: 14px !important; }
body.simh-app .customer-action-card small { font-size: 11px !important; }
body.simh-app .customer-action-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}
body.simh-app .bank-card-grid { gap: 13px !important; }
body.simh-app .bank-card {
  min-height: 190px !important;
  padding: 18px !important;
  border-radius: 16px !important;
}
body.simh-app .bank-card-number { font-size: clamp(21px, 2.6vw, 28px) !important; }
body.simh-app .alert { padding: 11px 13px !important; border-radius: 9px !important; font-size: 13px !important; }
body.simh-app .auth-form-card { padding: 22px !important; border-radius: 14px !important; }
body.simh-app .auth-form-card h2 { margin-bottom: 7px !important; }
body.simh-app .auth-form-grid { gap: 12px !important; }
body.simh-app .site-footer { padding: 14px 20px !important; font-size: 11px !important; }

@media (max-width: 1160px) {
  body.simh-app .app-main { margin-left: 0 !important; }
  body.simh-app .app-sidebar { width: min(286px, 86vw) !important; }
}
@media (max-width: 720px) {
  body.simh-app { font-size: 13px !important; }
  body.simh-app .topbar {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 10px !important;
  }
  body.simh-app .topbar-brand strong,
  body.simh-app .brand strong,
  body.simh-app .topbar-title { font-size: 14px !important; }
  body.simh-app .menu-button,
  body.simh-app .account-button,
  body.simh-app .topbar-action { width: 38px !important; height: 38px !important; min-height: 38px !important; }
  body.simh-app .content-area { padding: 12px 10px 23px !important; }
  body.simh-app .page-title { padding: 11px 12px !important; margin-bottom: 10px !important; border-radius: 10px !important; }
  body.simh-app .page-title h1 { font-size: 19px !important; }
  body.simh-app .page-title p { font-size: 11px !important; }
  body.simh-app .card,
  body.simh-app .native-panel,
  body.simh-app .panel,
  body.simh-app .customer-action-section,
  body.simh-app .customer-developer-snapshot,
  body.simh-app .customer-recent-panel { padding: 12px !important; border-radius: 10px !important; }
  body.simh-app .grid { gap: 9px !important; }
  body.simh-app .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.simh-app .grid.stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.simh-app .stat,
  body.simh-app .stat-card { min-height: 82px !important; padding: 11px !important; }
  body.simh-app .stat strong,
  body.simh-app .stat-card strong { font-size: 20px !important; }
  body.simh-app .customer-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.simh-app .customer-action-card { min-height: 70px !important; padding: 10px !important; gap: 8px !important; }
  body.simh-app .customer-action-icon { width: 34px !important; height: 34px !important; }
  body.simh-app .customer-action-card em { display: none !important; }
  body.simh-app .bank-card { min-height: 168px !important; padding: 14px !important; border-radius: 13px !important; }
  body.simh-app input,
  body.simh-app select,
  body.simh-app textarea { min-height: 42px !important; padding: 9px 10px !important; }
  body.simh-app .btn,
  body.simh-app button.btn,
  body.simh-app a.btn { min-height: 38px !important; padding: 8px 11px !important; }
  body.simh-app table th,
  body.simh-app table td { padding: 8px 9px !important; }
  body.simh-app .auth-form-card { padding: 16px !important; border-radius: 11px !important; }
}
@media (max-width: 390px) {
  body.simh-app .grid.stats,
  body.simh-app .customer-action-grid { grid-template-columns: 1fr !important; }
  body.simh-app .grid.stats > :last-child:nth-child(odd) { grid-column: auto; }
}


/* --------------------------------------------------------------------------
   Global semantic-state contrast in dark mode
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.simh-app :is(
  .badge,.pill,.status,.status-badge,.status-pill,.status-tag,.native-pill,
  .event-chip,.route-chip,.execution-badge,.fintech-state-pill,.dev-pill,
  .developer-key-status,.customer-account-state,.sim-state,.sim-pill,.svc-state,
  .provider-state,.cloud-price-state,.cloud-workspace-state,.capacity-state,
  .mtn-share-badge,.mtn-ss-state,.mtn-session-pill,.mtn-wallet-status,
  .mtn-status-badge,.mtn-plan-status,.mtn-ds-statement-status,
  .airtel-status,.airtel-status-pill,.glo-status,.glo-status-pill,
  .recent-transaction-state,.service-badge,.wh-badge,.api-mode-badge,
  .method-badge,.update-type-badge,.admin-chip,.bank-card-chip,.nav-badge
) {
  border-color: #48617f !important;
  color: #eef5ff !important;
  background: #26364d !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body.simh-app :is(
  .badge,.pill,.status,.status-badge,.status-pill,.status-tag,.native-pill,
  .event-chip,.route-chip,.execution-badge,.fintech-state-pill,.dev-pill,
  .developer-key-status,.customer-account-state,.sim-state,.sim-pill,.svc-state,
  .provider-state,.cloud-price-state,.cloud-workspace-state,.capacity-state,
  .mtn-share-badge,.mtn-ss-state,.mtn-session-pill,.mtn-wallet-status,
  .mtn-status-badge,.mtn-plan-status,.mtn-ds-statement-status,
  .airtel-status,.airtel-status-pill,.glo-status,.glo-status-pill,
  .recent-transaction-state,.service-badge,.wh-badge
):is(.success,.successful,.active,.verified,.connected,.ready,.good,.enabled,.approved,.delivered,.completed),
html[data-theme="dark"] body.simh-app :is(.status-success,.status-successful,.status-connected,.fintech-status-dot-active,.fintech-status-dot-enabled,.mtn-status-active,.airtel-status-connected,.glo-ready-state) {
  border-color: #23876e !important;
  color: #d7fff2 !important;
  background: #124b40 !important;
}

html[data-theme="dark"] body.simh-app :is(
  .badge,.pill,.status,.status-badge,.status-pill,.status-tag,.native-pill,
  .event-chip,.route-chip,.execution-badge,.fintech-state-pill,.dev-pill,
  .developer-key-status,.customer-account-state,.sim-state,.sim-pill,.svc-state,
  .provider-state,.cloud-price-state,.cloud-workspace-state,.capacity-state,
  .mtn-share-badge,.mtn-ss-state,.mtn-session-pill,.mtn-wallet-status,
  .mtn-status-badge,.mtn-plan-status,.mtn-ds-statement-status,
  .airtel-status,.airtel-status-pill,.glo-status,.glo-status-pill,
  .recent-transaction-state,.service-badge,.wh-badge
):is(.pending,.processing,.queued,.review,.warning,.warn,.unknown,.awaiting_login,.cooldown),
html[data-theme="dark"] body.simh-app :is(.status-pending,.status-processing,.status-queued,.status-review,.fintech-status-dot-pending,.mtn-status-cooldown,.airtel-status-pending,.airtel-status-pending_otp) {
  border-color: #9a6d15 !important;
  color: #fff1b8 !important;
  background: #5a3d0e !important;
}

html[data-theme="dark"] body.simh-app :is(
  .badge,.pill,.status,.status-badge,.status-pill,.status-tag,.native-pill,
  .event-chip,.route-chip,.execution-badge,.fintech-state-pill,.dev-pill,
  .developer-key-status,.customer-account-state,.sim-state,.sim-pill,.svc-state,
  .provider-state,.cloud-price-state,.cloud-workspace-state,.capacity-state,
  .mtn-share-badge,.mtn-ss-state,.mtn-session-pill,.mtn-wallet-status,
  .mtn-status-badge,.mtn-plan-status,.mtn-ds-statement-status,
  .airtel-status,.airtel-status-pill,.glo-status,.glo-status-pill,
  .recent-transaction-state,.service-badge,.wh-badge
):is(.failed,.failure,.error,.danger,.rejected,.revoked,.expired,.cancelled,.reversed,.timeout,.exhausted),
html[data-theme="dark"] body.simh-app :is(.status-failed,.status-error,.status-revoked,.status-expired,.status-cancelled,.status-reversed,.status-timeout,.fintech-status-dot-error,.mtn-status-error,.mtn-status-exhausted,.airtel-status-error,.airtel-status-expired) {
  border-color: #a63d4d !important;
  color: #ffe1e6 !important;
  background: #5a1f2a !important;
}

html[data-theme="dark"] body.simh-app :is(
  .badge,.pill,.status,.status-badge,.status-pill,.status-tag,.native-pill,
  .event-chip,.route-chip,.execution-badge,.fintech-state-pill,.dev-pill,
  .developer-key-status,.customer-account-state,.sim-state,.sim-pill,.svc-state,
  .provider-state,.cloud-price-state,.cloud-workspace-state,.capacity-state,
  .mtn-share-badge,.mtn-ss-state,.mtn-session-pill,.mtn-wallet-status,
  .mtn-status-badge,.mtn-plan-status,.mtn-ds-statement-status,
  .airtel-status,.airtel-status-pill,.glo-status,.glo-status-pill,
  .recent-transaction-state,.service-badge,.wh-badge
):is(.disabled,.inactive,.neutral,.muted,.not-set,.not_ready),
html[data-theme="dark"] body.simh-app :is(.status-disabled,.fintech-status-dot-disabled,.mtn-status-disabled) {
  border-color: #596b83 !important;
  color: #e0e8f3 !important;
  background: #334155 !important;
}