/* SIMHSYCN Phase 1 — Shared components */
body.simh-app .card,
body.simh-app .panel,
body.simh-app .stat,
body.simh-app .login-card,
body.simh-app .form-card,
body.simh-app .detail-card,
body.simh-app .native-card,
body.simh-app .bank-card {
  border: 1px solid var(--simh-border) !important;
  border-radius: var(--simh-radius-md) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-xs) !important;
}

body.simh-app .card,
body.simh-app .panel,
body.simh-app .form-card,
body.simh-app .detail-card { padding: 20px !important; }

body.simh-app .card:hover,
body.simh-app .panel:hover {
  border-color: var(--simh-border-strong) !important;
  box-shadow: var(--simh-shadow-sm) !important;
}

body.simh-app .grid {
  display: grid;
  gap: 16px !important;
}

body.simh-app .stats {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

body.simh-app .stat {
  min-height: 112px !important;
  padding: 18px !important;
}

body.simh-app .stat span,
body.simh-app .stat small,
body.simh-app .muted { color: var(--simh-muted) !important; }

body.simh-app .stat strong {
  color: var(--simh-text-strong) !important;
  font-size: clamp(21px, 2.2vw, 30px) !important;
  font-weight: 760 !important;
  letter-spacing: -.035em !important;
}

body.simh-app .section-head {
  margin-bottom: 15px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.simh-app .section-head h2,
body.simh-app .card h2 {
  margin-bottom: 5px !important;
  font-size: 17px !important;
  font-weight: 730 !important;
}

body.simh-app .native-hero {
  min-height: 150px !important;
  margin: 0 0 18px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 118, 110, .15) !important;
  border-radius: var(--simh-radius-lg) !important;
  color: var(--simh-text) !important;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, .10), rgba(37, 99, 235, .055)),
    var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-xs) !important;
}

body.simh-app .native-hero h2 {
  margin: 8px 0 6px !important;
  color: var(--simh-text-strong) !important;
  font-size: clamp(23px, 3vw, 36px) !important;
  font-weight: 780 !important;
}

body.simh-app .native-hero p { color: var(--simh-muted) !important; }

body.simh-app .native-pill {
  min-height: 26px !important;
  padding: 5px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(15, 118, 110, .17) !important;
  border-radius: var(--simh-radius-pill) !important;
  color: var(--simh-primary) !important;
  background: var(--simh-primary-soft) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.simh-app .native-hero-icon {
  min-width: 76px !important;
  width: 76px !important;
  height: 76px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(15, 118, 110, .13) !important;
  border-radius: 20px !important;
  color: var(--simh-primary) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-sm) !important;
  font-size: 32px !important;
  font-weight: 780 !important;
}

body.simh-app .btn,
body.simh-app button.btn,
body.simh-app input[type="submit"],
body.simh-app input[type="button"] {
  min-height: 40px !important;
  padding: 9px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid var(--simh-border-strong) !important;
  border-radius: var(--simh-radius-sm) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-xs) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

body.simh-app .btn:hover,
body.simh-app button.btn:hover {
  border-color: var(--simh-border-strong) !important;
  color: var(--simh-text-strong) !important;
  background: var(--simh-surface-muted) !important;
  box-shadow: var(--simh-shadow-sm) !important;
  transform: translateY(-1px);
}

body.simh-app .btn.primary,
body.simh-app .btn.btn-primary,
body.simh-app button.primary,
body.simh-app button[type="submit"].primary {
  border-color: var(--simh-primary) !important;
  color: #ffffff !important;
  background: var(--simh-primary) !important;
}

body.simh-app .btn.primary:hover,
body.simh-app .btn.btn-primary:hover,
body.simh-app button.primary:hover {
  border-color: var(--simh-primary-hover) !important;
  color: #ffffff !important;
  background: var(--simh-primary-hover) !important;
}

body.simh-app .btn.danger,
body.simh-app .btn.btn-danger,
body.simh-app button.danger {
  border-color: var(--simh-danger) !important;
  color: #ffffff !important;
  background: var(--simh-danger) !important;
}

body.simh-app .btn.small,
body.simh-app .btn-sm {
  min-height: 34px !important;
  padding: 7px 10px !important;
  font-size: 11.5px !important;
}

body.simh-app label {
  margin-bottom: 6px !important;
  display: inline-block;
  color: var(--simh-text) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

body.simh-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.simh-app select,
body.simh-app textarea {
  width: 100%;
  min-height: 42px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--simh-border-strong) !important;
  border-radius: var(--simh-radius-sm) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

body.simh-app textarea { min-height: 104px !important; resize: vertical; }

body.simh-app input:focus,
body.simh-app select:focus,
body.simh-app textarea:focus {
  border-color: var(--simh-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
  outline: none !important;
}

body.simh-app input::placeholder,
body.simh-app textarea::placeholder { color: var(--simh-faint) !important; }

body.simh-app .form-grid { gap: 15px !important; }
body.simh-app .form-group { margin-bottom: 14px !important; }

body.simh-app table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--simh-text) !important;
  background: transparent !important;
  font-size: 12.5px !important;
}

body.simh-app table thead th {
  padding: 11px 12px !important;
  border-top: 1px solid var(--simh-border) !important;
  border-bottom: 1px solid var(--simh-border) !important;
  color: var(--simh-muted) !important;
  background: var(--simh-surface-muted) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body.simh-app table thead th:first-child {
  border-left: 1px solid var(--simh-border) !important;
  border-radius: var(--simh-radius-sm) 0 0 0 !important;
}

body.simh-app table thead th:last-child {
  border-right: 1px solid var(--simh-border) !important;
  border-radius: 0 var(--simh-radius-sm) 0 0 !important;
}

body.simh-app table tbody td {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--simh-border) !important;
  color: var(--simh-text) !important;
  vertical-align: middle !important;
}

body.simh-app table tbody tr { background: var(--simh-surface) !important; }
body.simh-app table tbody tr:hover { background: var(--simh-surface-muted) !important; }

body.simh-app .badge,
body.simh-app .status-badge,
body.simh-app .pill {
  min-height: 25px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: var(--simh-radius-pill) !important;
  color: var(--simh-muted) !important;
  background: var(--simh-surface-muted) !important;
  font-size: 10.5px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-transform: capitalize !important;
}

body.simh-app .badge.success,
body.simh-app .badge.successful,
body.simh-app .badge.active,
body.simh-app .status-badge.success,
body.simh-app .status-badge.successful,
body.simh-app .status-badge.active {
  border-color: rgba(21, 128, 61, .18) !important;
  color: var(--simh-success) !important;
  background: var(--simh-success-soft) !important;
}

body.simh-app .badge.pending,
body.simh-app .badge.processing,
body.simh-app .badge.queued,
body.simh-app .status-badge.pending,
body.simh-app .status-badge.processing,
body.simh-app .status-badge.queued {
  border-color: rgba(180, 83, 9, .18) !important;
  color: var(--simh-warning) !important;
  background: var(--simh-warning-soft) !important;
}

body.simh-app .badge.failed,
body.simh-app .badge.error,
body.simh-app .badge.disabled,
body.simh-app .badge.refunded,
body.simh-app .status-badge.failed,
body.simh-app .status-badge.error,
body.simh-app .status-badge.disabled {
  border-color: rgba(194, 65, 59, .18) !important;
  color: var(--simh-danger) !important;
  background: var(--simh-danger-soft) !important;
}

body.simh-app .alert {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--simh-border) !important;
  border-left: 4px solid var(--simh-info) !important;
  border-radius: var(--simh-radius-sm) !important;
  color: var(--simh-text) !important;
  background: var(--simh-info-soft) !important;
  box-shadow: none !important;
}

body.simh-app .alert.success,
body.simh-app .alert-success {
  border-left-color: var(--simh-success) !important;
  background: var(--simh-success-soft) !important;
}

body.simh-app .alert.error,
body.simh-app .alert-danger {
  border-left-color: var(--simh-danger) !important;
  background: var(--simh-danger-soft) !important;
}

body.simh-app .alert.warning,
body.simh-app .alert-warning {
  border-left-color: var(--simh-warning) !important;
  background: var(--simh-warning-soft) !important;
}

body.simh-app code {
  padding: 2px 5px;
  border: 1px solid var(--simh-border);
  border-radius: 6px;
  color: var(--simh-primary);
  background: var(--simh-surface-muted);
  font-size: .92em;
}

body.simh-app pre {
  max-width: 100%;
  overflow: auto;
  padding: 14px !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: var(--simh-radius-sm) !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface-muted) !important;
}

body.simh-app .view-link,
body.simh-app .tiny-view-link {
  color: var(--simh-primary) !important;
  font-weight: 700 !important;
}

body.simh-app hr {
  border: 0 !important;
  border-top: 1px solid var(--simh-border) !important;
}

body.simh-app .pagination,
body.simh-app .pager {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

body.simh-app .pagination a,
body.simh-app .pagination span,
body.simh-app .pager a {
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: 9px !important;
  color: var(--simh-text) !important;
  background: var(--simh-surface) !important;
}

body.simh-app .pagination .active,
body.simh-app .pager .active {
  border-color: var(--simh-primary) !important;
  color: #ffffff !important;
  background: var(--simh-primary) !important;
}


/* --------------------------------------------------------------------------
   SIMHSYCN Phase 2 — Typography and coloured-surface correction
   -------------------------------------------------------------------------- */
body.simh-app .card h1,
body.simh-app .card h2,
body.simh-app .card h3,
body.simh-app .card h4,
body.simh-app .panel h1,
body.simh-app .panel h2,
body.simh-app .panel h3,
body.simh-app .section-head h2,
body.simh-app .flow-card strong {
  color: var(--simh-heading) !important;
}

body.simh-app .stats .stat {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  color: var(--simh-text-on-color) !important;
  background:
    radial-gradient(circle at 96% 8%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, #148f88 0%, #2674c8 100%) !important;
  box-shadow: 0 14px 34px rgba(37, 96, 132, .16) !important;
}

body.simh-app .stats .stat:nth-child(2) {
  background:
    radial-gradient(circle at 96% 8%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, #168fbd 0%, #5368d9 100%) !important;
}

body.simh-app .stats .stat:nth-child(3) {
  background:
    radial-gradient(circle at 96% 8%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, #d98935 0%, #d9586c 100%) !important;
}

body.simh-app .stats .stat:nth-child(4) {
  background:
    radial-gradient(circle at 96% 8%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, #188a72 0%, #197b70 100%) !important;
}

body.simh-app .stats .stat::before {
  opacity: 0 !important;
}

body.simh-app .stats .stat::after {
  width: 36px !important;
  height: 36px !important;
  right: 13px !important;
  bottom: 13px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.23) !important;
}

body.simh-app .stats .stat span,
body.simh-app .stats .stat small,
body.simh-app .stats .stat strong,
body.simh-app .stats .stat a {
  position: relative;
  z-index: 2;
  color: var(--simh-text-on-color) !important;
  text-shadow: 0 1px 2px rgba(12, 40, 59, .12);
}

body.simh-app .stats .stat span,
body.simh-app .stats .stat small {
  color: var(--simh-text-on-color-muted) !important;
  opacity: 1 !important;
  font-weight: 760 !important;
}

body.simh-app .stats .stat strong {
  font-weight: 760 !important;
}

body.simh-app .stat.stat-pair > div {
  border-right-color: rgba(255,255,255,.20) !important;
}

body.simh-app .native-hero h2,
body.simh-app .native-hero strong {
  color: var(--simh-heading) !important;
}

body.simh-app .btn:not(.primary):not(.danger):not(.blue) {
  color: #28465f !important;
}

body.simh-app label {
  color: #49647c !important;
}


/* --------------------------------------------------------------------------
   Phase 2 dashboard metric correction
   -------------------------------------------------------------------------- */
body.simh-app .stats .stat::after {
  content: none !important;
  display: none !important;
}

body.simh-app .stat.stat-pair {
  min-height: 112px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

body.simh-app .stat.stat-pair > div {
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

body.simh-app .stat.stat-pair > div:last-child {
  border-right: 0 !important;
}

body.simh-app .stat.stat-pair span {
  width: 100% !important;
  margin: 0 0 9px !important;
  display: block !important;
  text-align: left !important;
}

body.simh-app .stat.stat-pair strong {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: block !important;
  text-align: left !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 560px) {
  body.simh-app .stat.stat-pair > div {
    min-height: 96px !important;
    padding: 15px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   SIMHSYCN Phase 5 — server-side pagination controls
   -------------------------------------------------------------------------- */
body.simh-app .pagination-toolbar {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--simh-border);
}

body.simh-app .pagination-meta {
  margin: 0;
  color: var(--simh-muted);
  font-size: 12px;
}

body.simh-app .pagination-meta strong {
  color: var(--simh-text-strong) !important;
}

body.simh-app .pagination-nav {
  justify-content: flex-end;
}

body.simh-app .pagination .pagination-control {
  min-width: auto !important;
  padding-inline: 13px !important;
  font-weight: 720 !important;
}

body.simh-app .pagination .disabled {
  cursor: not-allowed;
  opacity: .48;
}

body.simh-app .pagination .pagination-ellipsis {
  min-width: 24px !important;
  border-color: transparent !important;
  background: transparent !important;
}

body.simh-app .review-page-size {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

body.simh-app .review-page-size label {
  color: var(--simh-muted);
  font-size: 11px;
  font-weight: 720;
}

body.simh-app .review-page-size select {
  width: auto !important;
  min-width: 92px;
}

@media (max-width: 760px) {
  body.simh-app .pagination-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  body.simh-app .pagination-nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 3px;
    flex-wrap: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   SIMHSYCN Phase 5 — SIM and node management components
   -------------------------------------------------------------------------- */
body.simh-app .management-stats {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.simh-app .management-stats > div {
  min-height: 92px;
  padding: 17px 18px;
  display: grid;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--simh-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .09), transparent 8rem),
    var(--simh-surface);
  box-shadow: var(--simh-shadow-xs);
}

body.simh-app .management-stats > div:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, .11), transparent 8rem),
    var(--simh-surface);
}

body.simh-app .management-stats > div:nth-child(3) {
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, .10), transparent 8rem),
    var(--simh-surface);
}

body.simh-app .management-stats > div:nth-child(4) {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, .10), transparent 8rem),
    var(--simh-surface);
}

body.simh-app .management-stats span {
  color: var(--simh-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.simh-app .management-stats strong {
  color: var(--simh-text-strong) !important;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.04em;
}

body.simh-app .management-table-card,
body.simh-app .device-registry-card {
  padding: 20px !important;
  overflow: hidden;
}

body.simh-app .management-form-card .grid.two,
body.simh-app .compact-form-grid {
  gap: 16px !important;
}

body.simh-app .management-form-card label,
body.simh-app .compact-form-grid label {
  color: var(--simh-text-strong);
  font-size: 11px;
  font-weight: 760;
}

body.simh-app .management-description {
  max-width: 760px;
  color: var(--simh-muted);
}

@media (max-width: 980px) {
  body.simh-app .management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.simh-app .management-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.simh-app .management-stats > div {
    min-height: 78px;
  }
}