/*
 * Tema override INA Digital Design System untuk Bootstrap 5, dimuat SETELAH
 * bootstrap.min.css. Bootstrap 5.3 resmi mendukung theming lewat CSS custom
 * property (--bs-*), jadi cukup override token di :root -- markup Blade yang
 * sudah ada (row/col/d-flex/dst) tetap jalan apa adanya, tidak perlu ditulis
 * ulang komponen per komponen.
 *
 * Token warna/tipografi/spacing/radius diambil LANGSUNG dari CSS custom
 * property situs resmi design.inadigital.co.id (bukan tebakan/perkiraan).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ina-neutral-25: #ffffff;
  --ina-neutral-50: #f8f8f7;
  --ina-neutral-100: #f2f2f2;
  --ina-neutral-200: #e5e5e5;
  --ina-neutral-400: #a3a3a3;
  --ina-neutral-600: #525252;
  --ina-neutral-800: #1f1f1f;

  --ina-blue-50: #fafcff;
  --ina-blue-100: #ecf3fe;
  --ina-blue-500: #0968f6;
  --ina-blue-600: #0049b8;
  --ina-blue-700: #002a69;

  --ina-green-100: #edfded;
  --ina-green-500: #3cc14e;
  --ina-green-600: #288034;

  --ina-orange-100: #fff5eb;
  --ina-orange-500: #ec7303;

  --ina-red-100: #fdeded;
  --ina-red-600: #d50b0b;

  --ina-radius-base: .25rem;
  --ina-radius-lg: .5rem;
  --ina-radius-xl: .75rem;

  --ina-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);

  /* Override token Bootstrap 5.3 -- cara resmi tema-ulang tanpa recompile Sass */
  --bs-primary: var(--ina-blue-600);
  --bs-primary-rgb: 0, 73, 184;
  --bs-link-color: var(--ina-blue-600);
  --bs-link-color-rgb: 0, 73, 184;
  --bs-link-hover-color: var(--ina-blue-700);
  --bs-body-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --bs-body-color: var(--ina-neutral-800);
  --bs-body-bg: var(--ina-neutral-50);
  --bs-border-color: var(--ina-neutral-200);
  --bs-border-radius: var(--ina-radius-base);
  --bs-border-radius-lg: var(--ina-radius-lg);
  --bs-border-radius-sm: .125rem;
  --bs-secondary-color: var(--ina-neutral-600);
}

body {
  font-family: var(--bs-body-font-family);
}

/* Navbar -- brand blue-700 INA Digital, bukan hitam bawaan Bootstrap */
.navbar.bg-dark {
  background-color: var(--ina-blue-700) !important;
}

/* Card -- radius lebih besar + shadow halus, khas pola card INA Digital */
.card {
  border-radius: var(--ina-radius-xl);
  border-color: var(--ina-neutral-200);
  box-shadow: var(--ina-shadow-md);
}
.card.text-bg-primary { background-color: var(--ina-blue-600) !important; }
.card.text-bg-secondary { background-color: var(--ina-neutral-600) !important; }
.card.text-bg-warning { background-color: var(--ina-orange-500) !important; color: #fff !important; }
.card.text-bg-success { background-color: var(--ina-green-600) !important; }

/* Button -- radius + weight ikut pola Button INA Digital (satu primary
   button per layar, lihat panduan Button design.inadigital.co.id) */
.btn {
  border-radius: var(--ina-radius-lg);
  font-weight: 600;
}
.btn-primary {
  background-color: var(--ina-blue-600);
  border-color: var(--ina-blue-600);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ina-blue-700);
  border-color: var(--ina-blue-700);
}
.btn-outline-secondary {
  color: var(--ina-neutral-600);
  border-color: var(--ina-neutral-200);
}
.btn-outline-danger {
  color: var(--ina-red-600);
  border-color: var(--ina-red-100);
}
.btn-outline-light {
  border-color: rgba(255, 255, 255, .35);
}

/* Form -- focus ring pakai warna guide/blue INA Digital */
.form-control, .form-select {
  border-radius: var(--ina-radius-base);
  border-color: var(--ina-neutral-200);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ina-blue-500);
  box-shadow: 0 0 0 .2rem var(--ina-blue-100);
}

.badge.text-bg-light {
  background-color: var(--ina-neutral-100) !important;
  color: var(--ina-neutral-800) !important;
  border-color: var(--ina-neutral-200) !important;
  font-weight: 500;
}

.alert-success {
  background-color: var(--ina-green-100);
  border-color: var(--ina-green-500);
  color: var(--ina-green-600);
  border-radius: var(--ina-radius-lg);
}
.alert-danger {
  background-color: var(--ina-red-100);
  border-color: #f02d2d;
  color: var(--ina-red-600);
  border-radius: var(--ina-radius-lg);
}

.table thead th {
  background-color: var(--ina-neutral-50);
  color: var(--ina-neutral-600);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom-width: 1px;
}

/* Halaman login -- kartu terpusat, identitas brand di atas form */
.login-page {
  background: linear-gradient(180deg, var(--ina-blue-50) 0%, var(--ina-neutral-50) 100%);
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: var(--ina-radius-xl);
  box-shadow: var(--ina-shadow-md);
  padding: 2.5rem 2rem;
  border: 1px solid var(--ina-neutral-200);
}
.login-card__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.login-card__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ina-radius-base);
  background: var(--ina-blue-600);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  flex-shrink: 0;
}
.login-card__brand-name {
  font-weight: 600;
  color: var(--ina-neutral-800);
}
.login-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ina-neutral-800);
  margin-bottom: .25rem;
}
.login-card__subtitle {
  color: var(--ina-neutral-600);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}
.login-card__alert {
  font-size: .875rem;
  padding: .625rem .875rem;
}
.login-card__hint {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ina-neutral-200);
  font-size: .8125rem;
  color: var(--ina-neutral-400);
  text-align: center;
}