/* RegOnline design system — visual layer only, no logic here.
   Loaded after bootstrap.css so these overrides win on specificity ties. */

:root {
  /* Accent: muted clinical blue (replaces cadetblue / #17a2b8 / #27AE60 mix) */
  --accent: #2f6690;
  --accent-dark: #234d6e;
  --accent-soft: #e8f0f6;

  /* Warm neutral gray scale */
  --gray-50:  #faf9f7;
  --gray-100: #f2f0ec;
  --gray-200: #e6e2db;
  --gray-300: #d3cdc2;
  --gray-500: #8a8578;
  --gray-700: #57534a;
  --gray-900: #2e2c27;

  --success: #3f8f5f;
  --danger:  #b0453d;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(47, 102, 144, 0.12);
  --shadow-md: 0 6px 20px rgba(47, 102, 144, 0.14);

  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --tap-target-min: 44px;
}

body.app-body {
  background: var(--gray-50);
  font-family: var(--font-sans);
  color: var(--gray-900);
}

/* Navbar */
.app-body .navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.app-body .navbar-brand,
.app-body .navbar-brand span {
  color: var(--accent-dark) !important;
  font-weight: 600;
}

/* Progress bar step indicator (declarations only — selectors stay in layout.php) */

/* Buttons */
.app-body .btn {
  border-radius: var(--radius-md);
  min-height: var(--tap-target-min);
  font-weight: 500;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.app-body .btn:active {
  transform: scale(0.98);
}
.app-body .btn-primary,
.app-body .btn-info {
  background-color: var(--accent);
  border-color: var(--accent);
}
.app-body .btn-primary:hover,
.app-body .btn-info:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}
.app-body .btn-success {
  background-color: var(--success);
  border-color: var(--success);
}
.app-body .btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}

/* Form controls */
.app-body .form-control,
.app-body .custom-select {
  border-radius: var(--radius-sm);
  border-color: var(--gray-300);
  min-height: var(--tap-target-min);
  font-size: 15px;
}
.app-body .form-control:focus,
.app-body .custom-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

/* Cards / panels */
.app-body .card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.app-body .card-header {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-weight: 600;
}

/* Modals */
.app-body .modal-content {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-md);
}

/* Recap / summary tables (step3, verifikasi-rujukan) */
.app-body .recap-table td {
  padding: 0.65rem 0.75rem;
  border-color: var(--gray-200);
}
.app-body .recap-table td:first-child {
  width: 42%;
  font-weight: 600;
  color: var(--gray-700);
}