/* ===========================================================
   Dashboard Pendaftar HGN 2026 Provinsi NTB
   Tema kustom di atas Bootstrap 5.3
   =========================================================== */

:root {
  --hgn-navy: #0d4d8c;
  --hgn-navy-dark: #083560;
  --hgn-teal: #0f8f7a;
  --hgn-amber: #f2a93b;
  --hgn-surface: #f4f7fb;
  --hgn-border: #e2e8f0;
}

html, body { min-height: 100%; }

body {
  background: var(--hgn-surface);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* ---------------- Navbar ---------------- */
.app-navbar {
  background: linear-gradient(100deg, var(--hgn-navy-dark), var(--hgn-navy) 55%, #1668b5);
  box-shadow: 0 2px 14px rgba(8, 53, 96, .25);
}
.app-navbar .navbar-brand,
.app-navbar .nav-link { color: rgba(255, 255, 255, .88); }
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active { color: #fff; }
.app-navbar .nav-link.active {
  background: rgba(255, 255, 255, .16);
  border-radius: .5rem;
}
.app-navbar .nav-link { padding-inline: .75rem; border-radius: .5rem; }
.app-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .4);
  padding: .35rem .5rem;
}
.app-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.brand-badge {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .7rem;
  color: var(--hgn-amber);
  font-size: 1.15rem;
}
.brand-title { font-size: 1.02rem; letter-spacing: .2px; }
.brand-sub { font-size: .72rem; color: rgba(255, 255, 255, .7); }

/* ---------------- Hero ---------------- */
.hero {
  background: linear-gradient(135deg, var(--hgn-navy-dark), #10538f 60%, #1b74c4);
  color: #fff;
  padding: 2rem 0 5.5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: auto -10% -60% auto;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(242, 169, 59, .28), transparent 65%);
  pointer-events: none;
}
.hero h1 { font-weight: 700; letter-spacing: -.4px; }
/* Hero tanpa baris tombol di sisi kanan: butuh padding bawah ekstra agar
   jarak ke kartu sama dengan halaman Rekapitulasi. */
.hero-plain { padding-bottom: 6.5rem; }
.hero .hero-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  backdrop-filter: blur(4px);
}
.pull-up { margin-top: -4.25rem; position: relative; z-index: 2; }

/* ---------------- Kartu statistik ---------------- */
.card { border: 1px solid var(--hgn-border); border-radius: .85rem; }
.card-soft { background: #fff; box-shadow: 0 2px 10px rgba(16, 42, 73, .06); }

.stat-card { height: 100%; }
.stat-card .stat-icon {
  width: 42px; height: 42px;
  border-radius: .7rem;
  display: grid; place-items: center;
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.stat-card .card-body > div:last-child { min-width: 0; }   /* izinkan teks membungkus di flex */
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #10233c; }
.stat-card .stat-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #6b7a90;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ic-navy  { background: rgba(13, 77, 140, .1);  color: var(--hgn-navy); }
.ic-teal  { background: rgba(15, 143, 122, .12); color: var(--hgn-teal); }
.ic-amber { background: rgba(242, 169, 59, .16); color: #b97708; }
.ic-rose  { background: rgba(220, 53, 69, .1);   color: #c02a3a; }

/* ---------------- Judul seksi ---------------- */
.section-head { display: flex; align-items: center; gap: .6rem; }
.section-head > div { min-width: 0; }
.section-head .dot { width: 10px; height: 26px; border-radius: 99px; flex: 0 0 auto; }
.dot-primary { background: var(--hgn-navy); }
.dot-success { background: var(--hgn-teal); }

/* ---------------- Tabel rekap ---------------- */
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: .6rem;
  border: 1px solid var(--hgn-border);
  background: #fff;
}
.table-rekap {
  margin-bottom: 0;
  font-size: .86rem;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
}
.table-rekap th, .table-rekap td {
  border-bottom: 1px solid var(--hgn-border);
  padding: .5rem .6rem;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fff;
}
.table-rekap thead th {
  position: sticky; top: 0; z-index: 3;
  background-color: #eef3f9;
  color: #16324f;
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 2px solid #cfdcea;
  vertical-align: bottom;
}
.table-rekap thead th.th-vertical {
  min-width: 92px; max-width: 120px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
/* Kolom No + kolom label (Kabupaten/Kota atau Kategori) tetap terlihat saat tabel digeser */
.table-rekap .col-no {
  position: sticky; left: 0; z-index: 4;
  width: 44px; min-width: 44px;
  text-align: center;
  color: #7b8a9e;
}
.table-rekap .col-label {
  position: sticky; left: 44px; z-index: 4;
  min-width: 158px;
  font-weight: 600;
  color: #16324f;
  box-shadow: 6px 0 8px -6px rgba(16, 42, 73, .22);
}
.table-rekap thead .col-no,
.table-rekap thead .col-label { z-index: 6; background-color: #eef3f9; }

.table-rekap tbody tr:hover td { background-color: #f7fafd; }
.table-rekap tbody tr:hover .col-no,
.table-rekap tbody tr:hover .col-label { background-color: #eef4fa; }

.table-rekap td.cell-num { text-align: center; font-variant-numeric: tabular-nums; }
.cell-count {
  display: inline-block;
  min-width: 2rem;
  font-weight: 700;
  color: #0b4f8a;
}
.cell-empty {
  font-size: .72rem;
  color: #9aa7b8;
  font-style: italic;
  white-space: nowrap;
}
.table-rekap .col-total { background-color: #fbfcfe; font-weight: 700; }
.table-rekap tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background-color: #e8f0f8;
  font-weight: 700;
  color: #0e3a63;
  border-top: 2px solid #cfdcea;
}
.table-rekap tfoot td.col-no,
.table-rekap tfoot td.col-label { z-index: 5; background-color: #e8f0f8; }

.table-rekap tbody tr.row-empty .col-label { color: #93a2b5; font-weight: 500; }

/* ---------------- Tabel analisis kelayakan lomba ---------------- */
/* Nama kategori bisa panjang, jadi kolomnya dibiarkan membungkus */
.table-analisis .col-label {
  white-space: normal;
  min-width: 190px;
  max-width: 260px;
  line-height: 1.25;
}
/* Header bertingkat: baris atas nama indikator, baris bawah Sudah/Belum */
.table-analisis thead tr:first-child th {
  text-align: center;
  border-bottom: 1px solid #cfdcea;
  border-left: 1px solid #dde7f1;
}
.table-analisis thead tr:last-child th { top: 33px; font-size: .72rem; }
.table-analisis thead tr:first-child th.col-no,
.table-analisis thead tr:first-child th.col-label { border-left: 0; }
.table-analisis .grp-start { border-left: 1px solid #dde7f1; }
.table-analisis td.cell-sudah { font-weight: 700; color: #0f6b4f; }
.table-analisis td.cell-belum { color: #b23a48; }
.table-analisis td.cell-zero { color: #b7c1cd; }
.table-analisis .col-status { min-width: 150px; text-align: center; background-color: #fbfcfe; }
.table-analisis tbody tr.row-siap .col-label { color: #0f6b4f; }

@media (max-width: 575.98px) {
  .table-analisis .col-label { min-width: 150px; max-width: 180px; }
}

/* ---------------- Area grafik ---------------- */
.chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chart-canvas-wrap {
  position: relative;
  min-width: 760px;   /* di layar kecil grafik digeser, bukan dipadatkan */
  height: 380px;
}

.scroll-hint {
  font-size: .76rem;
  color: #7b8a9e;
  display: flex; align-items: center; gap: .35rem;
}

/* ---------------- Tabel peserta ---------------- */
.table-peserta { font-size: .86rem; }
.table-peserta th { background: #eef3f9; font-size: .76rem; text-transform: uppercase; letter-spacing: .3px; color: #16324f; white-space: nowrap; }
.table-peserta td { vertical-align: middle; }
.text-bg-teal { background-color: var(--hgn-teal) !important; color: #fff !important; }

/* ---------------- Komponen lain ---------------- */
.btn-to-top {
  position: fixed; right: 1rem; bottom: 1rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: none; place-items: center;
  z-index: 1030;
  padding: 0;
}
.btn-to-top.show { display: grid; }

.app-footer { background: #fff; border-top: 1px solid var(--hgn-border); }

.login-wrap { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 2rem 1rem; }
.login-card { width: 100%; max-width: 420px; }

.legend-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; color: #5a6b80;
}

.drop-zone {
  border: 2px dashed #c3d2e3;
  border-radius: .75rem;
  background: #f8fbfe;
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--hgn-navy); background: #eef5fc; }
.drop-zone .bi { font-size: 2rem; color: var(--hgn-navy); }

.step-badge {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--hgn-navy); color: #fff;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}

.table-sm-mobile { font-size: .82rem; }

/* ---------------- Penyesuaian layar kecil ---------------- */
@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse { padding-bottom: .5rem; }
  .app-navbar .nav-link { padding-block: .5rem; }
}
@media (max-width: 575.98px) {
  .hero { padding: 1.5rem 0 5rem; }
  .hero-plain { padding-bottom: 6rem; }
  .hero h1 { font-size: 1.3rem; }
  .stat-card .card-body { gap: .65rem !important; }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .stat-card .stat-value { font-size: 1.35rem; }
  .stat-card .stat-label { font-size: .68rem; letter-spacing: .2px; }
  .table-rekap { font-size: .8rem; }
  .table-rekap th, .table-rekap td { padding: .45rem .5rem; }
  .table-rekap .col-label { min-width: 132px; }
  .table-rekap thead th.th-vertical { min-width: 80px; }
  .chart-canvas-wrap { min-width: 680px; height: 340px; }
  .card-body { padding: 1rem; }
}

@media print {
  .app-navbar, .app-footer, .btn-to-top, .no-print { display: none !important; }
  body { background: #fff; }
  .table-scroll { overflow: visible; border: 0; }
  .hero { background: #fff !important; color: #000 !important; padding-bottom: 1rem; }
  .pull-up { margin-top: 1rem; }
}