/* IPEKA UI — tema bersama. Ubah hanya di _ipeka-ui, lalu sinkronkan ke semua situs. */

@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("../fonts/outfit-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }

:root {
  --ip-primary: #034EA2;
  --ip-primary-hover: #034187;
  --ip-primary-pressed: #022751;
  --ip-primary-surface: #CDDCEC;
  --ip-primary-border: #ABC4E0;
  --ip-navy: #102245;
  --ip-yellow: #FFCB05;
  --ip-sky: #2EA3DC;
  --ip-orange: #E96E24;
  --ip-text: #404040;
  --ip-text-muted: #616161;
  --ip-sidebar-width: 250px;

  --bs-primary: #034EA2;
  --bs-primary-rgb: 3, 78, 162;
  --bs-primary-text-emphasis: #034187;
  --bs-primary-bg-subtle: #CDDCEC;
  --bs-primary-border-subtle: #ABC4E0;
  --bs-warning: #FFCB05;
  --bs-warning-rgb: 255, 203, 5;
  --bs-warning-text-emphasis: #102245;
  --bs-info: #2EA3DC;
  --bs-info-rgb: 46, 163, 220;
  --bs-info-text-emphasis: #102245;
  --bs-success: #15803D;
  --bs-success-rgb: 21, 128, 61;
  --bs-success-text-emphasis: #15803D;
  --bs-danger: #B42318;
  --bs-danger-rgb: 180, 35, 24;
  --bs-danger-text-emphasis: #B42318;

  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-body-color: #404040;
  --bs-body-bg: #F5F5F5;
  --bs-secondary-color: #616161;
  --bs-link-color: #034EA2;
  --bs-link-color-rgb: 3, 78, 162;
  --bs-link-hover-color: #034187;
  --bs-link-hover-color-rgb: 3, 65, 135;
  --bs-border-radius: .5rem;
  --bs-focus-ring-color: rgba(3, 78, 162, .25);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 600;
  color: var(--ip-navy);
}

/* Tombol */
.btn { --bs-btn-font-weight: 500; }
.btn-primary {
  --bs-btn-bg: #034EA2; --bs-btn-border-color: #034EA2;
  --bs-btn-hover-bg: #034187; --bs-btn-hover-border-color: #034187;
  --bs-btn-active-bg: #022751; --bs-btn-active-border-color: #022751;
  --bs-btn-disabled-bg: #034EA2; --bs-btn-disabled-border-color: #034EA2;
  --bs-btn-focus-shadow-rgb: 3, 78, 162;
}
.btn-outline-primary {
  --bs-btn-color: #034EA2; --bs-btn-border-color: #034EA2;
  --bs-btn-hover-bg: #034EA2; --bs-btn-hover-border-color: #034EA2;
  --bs-btn-active-bg: #022751; --bs-btn-active-border-color: #022751;
  --bs-btn-focus-shadow-rgb: 3, 78, 162;
}
.btn-warning {
  --bs-btn-color: #102245; --bs-btn-bg: #FFCB05; --bs-btn-border-color: #FFCB05;
  --bs-btn-hover-color: #102245; --bs-btn-hover-bg: #E6B700; --bs-btn-hover-border-color: #E6B700;
  --bs-btn-active-color: #102245; --bs-btn-active-bg: #E6B700; --bs-btn-active-border-color: #E6B700;
  --bs-btn-focus-shadow-rgb: 255, 203, 5;
}
.btn-danger {
  --bs-btn-bg: #B42318; --bs-btn-border-color: #B42318;
  --bs-btn-hover-bg: #931C13; --bs-btn-hover-border-color: #931C13;
  --bs-btn-active-bg: #931C13; --bs-btn-active-border-color: #931C13;
}
.btn-success {
  --bs-btn-bg: #15803D; --bs-btn-border-color: #15803D;
  --bs-btn-hover-bg: #116A32; --bs-btn-hover-border-color: #116A32;
  --bs-btn-active-bg: #116A32; --bs-btn-active-border-color: #116A32;
}

/* Warna terang selalu memakai teks navy */
.text-bg-warning, .text-bg-info { color: #102245 !important; }
.bg-warning, .bg-info { color: #102245; }
.badge.bg-warning, .badge.bg-info { color: #102245; }

.form-control:focus, .form-select:focus {
  border-color: #ABC4E0;
  box-shadow: 0 0 0 .2rem rgba(3, 78, 162, .2);
}
.form-check-input:checked { background-color: #034EA2; border-color: #034EA2; }

.card {
  /* Bawaan Bootstrap memakai warna body, sehingga kartu menyatu dengan latar halaman. */
  --bs-card-bg: #fff;
  --bs-card-border-color: transparent;
  --bs-card-border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(16, 34, 69, .08);
}
.card-header {
  --bs-card-cap-bg: #fff;
  border-bottom-color: #EDEDED;
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 600;
  color: var(--ip-navy);
}
.table { --bs-table-bg: transparent; }
.table > thead th {
  color: var(--ip-text-muted);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.page-link { color: #034EA2; }
.active > .page-link, .page-link.active { background-color: #034EA2; border-color: #034EA2; }

/* Publik */
.ip-public { min-height: 100vh; display: flex; flex-direction: column; }
.ip-public > main { flex: 1 0 auto; }
.ip-header { background: #034EA2; color: #fff; }
.ip-header .navbar { --bs-navbar-padding-y: .625rem; }
.ip-brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.ip-brand:hover { color: #fff; }
.ip-brand img { height: 36px; width: auto; }
.ip-brand span {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  padding-left: .75rem;
  border-left: 1px solid rgba(255, 255, 255, .4);
}
.ip-header .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; }
.ip-header .nav-link:hover, .ip-header .nav-link.active { color: #fff; }
.ip-header .navbar-toggler { border-color: rgba(255, 255, 255, .4); color: #fff; }

.ip-footer { background: #102245; color: #fff; padding: 1.25rem 0; font-size: .875rem; }

/* Admin */
/* Admin lebih padat: semua ukuran rem (teks, input, tombol, tabel) ikut mengecil 87,5%. */
html.ip-admin-page { font-size: 14px; }
.ip-admin { min-height: 100vh; display: flex; }
/* !important: Bootstrap memaksa .offcanvas-lg transparan di layar lebar. */
.ip-sidebar { background-color: #034EA2 !important; color: #fff; }
.ip-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.ip-sidebar .btn-close { filter: invert(1) brightness(2); }
.ip-sidebar-brand { padding: 1rem 1.25rem; }
.ip-sidebar-brand .ip-brand { flex-direction: column; align-items: flex-start; gap: .375rem; }
.ip-sidebar-brand .ip-brand span { border-left: 0; padding-left: 0; font-size: 1rem; }
.ip-menu { list-style: none; margin: 0; padding: .5rem .75rem; }
.ip-menu a {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .75rem; border-radius: .5rem;
  color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 500;
}
.ip-menu a i { font-size: 1.125rem; }
.ip-menu a:hover { background: #034187; color: #fff; }
.ip-menu a.active { background: #022751; color: #fff; }

.ip-admin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ip-topbar {
  background: #fff; min-height: 64px; padding: .5rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: 0 1px 3px rgba(16, 34, 69, .08);
  position: sticky; top: 0; z-index: 1020;
}
.ip-topbar h1 { font-size: 1.25rem; margin: 0; }
.ip-content { flex: 1 0 auto; padding: 1.25rem; }

@media (min-width: 992px) {
  .ip-sidebar {
    width: var(--ip-sidebar-width); flex: 0 0 var(--ip-sidebar-width);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .ip-sidebar .offcanvas-body { display: block !important; padding: 0; background: transparent; }
}
@media (max-width: 991.98px) {
  .ip-sidebar.offcanvas-lg { --bs-offcanvas-bg: #034EA2; --bs-offcanvas-color: #fff; --bs-offcanvas-width: var(--ip-sidebar-width); }
  .ip-sidebar .offcanvas-body { padding: 0; }
}

.ip-stat { display: flex; align-items: center; gap: 1rem; }
.ip-stat-icon {
  width: 48px; height: 48px; border-radius: .5rem; flex: 0 0 48px;
  display: flex; align-items: center; justify-content: center;
  background: #CDDCEC; color: #034EA2; font-size: 1.5rem;
}
.ip-stat-value { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.625rem; color: var(--ip-navy); line-height: 1.1; }
.ip-stat-label { color: var(--ip-text-muted); font-size: .8125rem; }

/* Login PIN */
.ip-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: #034EA2; }
.ip-login-card { width: 100%; max-width: 380px; background: #fff; border-radius: .75rem; padding: 2rem; text-align: center; }
.ip-login-card img { height: 72px; width: auto; margin-bottom: 1rem; }
.ip-pin-input {
  text-align: center; font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: 1.75rem; letter-spacing: .5rem; padding-left: 1rem;
}

/* Display */
.ip-display {
  min-height: 100vh; background: #102245; color: #fff; padding: 3vh 3vw;
  font-size: clamp(1.25rem, 2.2vw, 3rem); overflow: hidden; cursor: none;
}
.ip-display h1, .ip-display h2 { color: #fff; }

/* Tabel */
.ip-table-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.ip-table-tools input { max-width: 260px; }
.ip-table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .75rem; color: var(--ip-text-muted); font-size: .875rem; }
th[data-sortable] { cursor: pointer; user-select: none; }
th[aria-sort="ascending"]::after { content: " \2191"; }
th[aria-sort="descending"]::after { content: " \2193"; }

.ip-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 2000; }