/* SIMHSYCN Phase 6 — forms and administrative configuration foundation */
body.simh-app .phase6-form-grid,
body.simh-app .service-form-grid,
body.simh-app .compact-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: start !important;
}

body.simh-app .phase6-field,
body.simh-app .service-form-grid > label,
body.simh-app .service-form-grid > input,
body.simh-app .service-form-grid > select,
body.simh-app .service-form-grid > textarea {
  min-width: 0;
}

body.simh-app .phase6-field {
  display: grid;
  gap: 7px;
}

body.simh-app .phase6-field.is-wide,
body.simh-app .service-form-grid > textarea,
body.simh-app .service-form-grid > button,
body.simh-app .service-form-grid > .actions {
  grid-column: 1 / -1;
}

body.simh-app .form-section,
body.simh-app .configuration-section {
  padding: 20px !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .055), transparent 13rem),
    var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-sm) !important;
}

body.simh-app .form-section-head {
  margin-bottom: 17px;
  padding-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--simh-border);
}

body.simh-app .form-section-head h2,
body.simh-app .form-section-head h3 {
  margin: 0 0 4px !important;
}

body.simh-app .advanced-assignment,
body.simh-app details.form-advanced {
  margin: 16px 0 !important;
  padding: 15px !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: 14px !important;
  background: var(--simh-surface-muted) !important;
}

body.simh-app .advanced-assignment summary,
body.simh-app details.form-advanced summary {
  color: var(--simh-text-strong) !important;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
}

body.role-admin .config-grid,
body.role-admin .catalog-manage-layout {
  align-items: start !important;
}

body.role-admin .config-stack,
body.role-admin .catalog-manage-layout {
  gap: 18px !important;
}

body.role-admin .config-stack > .actions,
body.role-admin .page-sim_inventory_new .actions,
body.role-admin .page-sim_inventory_edit .actions,
body.role-admin .page-sim_inventory_assignment_edit .actions,
body.role-admin .page-nodes_new .actions,
body.role-admin .page-nodes_edit .actions {
  position: sticky;
  bottom: 12px;
  z-index: 8;
  padding: 12px;
  border: 1px solid var(--simh-border);
  border-radius: 14px;
  background: var(--simh-surface);
  box-shadow: var(--simh-shadow-sm);
  backdrop-filter: blur(12px);
}

/* Fixed, synchronized horizontal scrollbar for wide desktop tables. */
.simh-horizontal-scrollbar {
  position: fixed;
  left: calc(var(--simh-sidebar-width) + 20px);
  right: 20px;
  bottom: 8px;
  z-index: 70;
  height: 17px;
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--simh-border-strong);
  border-radius: 999px;
  background: var(--simh-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  backdrop-filter: blur(12px);
}

.simh-horizontal-scrollbar.is-visible { display: block; }
.simh-horizontal-scrollbar > div { height: 1px; }
.simh-horizontal-scrollbar::-webkit-scrollbar { height: 13px; }
.simh-horizontal-scrollbar::-webkit-scrollbar-track { background: transparent; }
.simh-horizontal-scrollbar::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--simh-primary);
  background-clip: padding-box;
}

body.role-customer .simh-horizontal-scrollbar {
  left: calc(var(--simh-sidebar-width) + 20px);
}

@media (max-width: 1160px) {
  body.simh-app .phase6-form-grid,
  body.simh-app .service-form-grid,
  body.simh-app .compact-form-grid {
    grid-template-columns: 1fr !important;
  }

  .simh-horizontal-scrollbar { display: none !important; }
}

@media (min-width: 1161px) {
  body.menu-open .simh-horizontal-scrollbar { display: none !important; }
}


/* Long administrative forms: calm single-column rhythm with grouped cards. */
body.role-admin.page-nodes_new .content-area > .grid.two,
body.role-admin.page-nodes_edit .content-area > .grid.two,
body.role-admin.page-sim_inventory_new .content-area > .grid.two,
body.role-admin.page-sim_inventory_edit .content-area > .grid.two,
body.role-admin.page-sim_inventory_assignment_edit .content-area > .grid.two,
body.role-admin.page-payment_gateways_edit .content-area > .grid.two {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .65fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

body.role-admin.page-nodes_new .card,
body.role-admin.page-nodes_edit .card,
body.role-admin.page-sim_inventory_new .card,
body.role-admin.page-sim_inventory_edit .card,
body.role-admin.page-sim_inventory_assignment_edit .card,
body.role-admin.page-payment_gateways_edit .card,
body.role-admin.page-settings .card,
body.role-admin.page-edit_profile .card,
body.role-admin.page-change_password .card,
body.role-admin.page-service_codes_new .card,
body.role-admin.page-service_codes_edit .card {
  border-radius: 18px !important;
  box-shadow: var(--simh-shadow-sm) !important;
}

body.role-admin.page-nodes_new .card > form,
body.role-admin.page-nodes_edit .card > form,
body.role-admin.page-payment_gateways_edit .card > form,
body.role-admin.page-edit_profile .card > form,
body.role-admin.page-change_password .card > form,
body.role-admin.page-service_codes_new .card > form,
body.role-admin.page-service_codes_edit .card > form {
  display: grid;
  gap: 9px;
}

body.role-admin.page-settings .config-preview,
body.role-admin.page-settings .api-preview {
  padding: 14px;
  border: 1px solid var(--simh-border);
  border-radius: 14px;
  background: var(--simh-surface-muted);
}

body.role-admin.page-settings .preview-card {
  position: sticky;
  top: calc(var(--simh-topbar-height) + 18px);
}

@media (max-width: 1080px) {
  body.role-admin.page-nodes_new .content-area > .grid.two,
  body.role-admin.page-nodes_edit .content-area > .grid.two,
  body.role-admin.page-sim_inventory_new .content-area > .grid.two,
  body.role-admin.page-sim_inventory_edit .content-area > .grid.two,
  body.role-admin.page-sim_inventory_assignment_edit .content-area > .grid.two,
  body.role-admin.page-payment_gateways_edit .content-area > .grid.two {
    grid-template-columns: 1fr !important;
  }
  body.role-admin.page-settings .preview-card { position: static; }
}