/* GC Sales Support - tema mengikuti identitas Global Chemindo (navy + cyan) */
:root {
  --gc-navy: #2b3190;
  --gc-navy-dark: #1e2370;
  --gc-cyan: #1ba6e1;
  --gc-cyan-soft: #e6f5fc;
  --gc-bg: #f0f5fa;
  --gc-surface: #ffffff;
  --gc-text: #111827;
  --gc-muted: #64748b;
  --gc-border: #e5eaf1;
  --gc-radius: 14px;
  --gc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(43, 49, 144, .06);
  --gc-sidebar-w: 264px;

  --bs-primary: var(--gc-navy);
  --bs-primary-rgb: 43, 49, 144;
  --bs-link-color: var(--gc-navy);
  --bs-link-hover-color: var(--gc-cyan);
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--gc-text);
  --bs-body-bg: var(--gc-bg);
  --bs-border-radius: 10px;
}

body { -webkit-font-smoothing: antialiased; }

/* ---------- Tombol & form ---------- */
.btn { font-weight: 600; border-radius: 10px; padding: .6rem 1.1rem; transition: all .15s ease; }
.btn-primary { --bs-btn-bg: var(--gc-navy); --bs-btn-border-color: var(--gc-navy);
  --bs-btn-hover-bg: var(--gc-navy-dark); --bs-btn-hover-border-color: var(--gc-navy-dark);
  --bs-btn-active-bg: var(--gc-navy-dark); --bs-btn-active-border-color: var(--gc-navy-dark);
  box-shadow: 0 6px 16px rgba(43, 49, 144, .22); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-accent { background: var(--gc-cyan); border-color: var(--gc-cyan); color: #fff; }
.btn-accent:hover { background: #1291c8; border-color: #1291c8; color: #fff; }
.form-control, .form-select { border-radius: 10px; border-color: var(--gc-border); padding: .65rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--gc-cyan); box-shadow: 0 0 0 .25rem rgba(27, 166, 225, .18); }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--gc-muted); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.6rem; }
.input-icon > .toggle-pass { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--gc-muted); padding: .35rem; }

/* ---------- Sidebar ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--gc-sidebar-w); background: var(--gc-surface);
  border-right: 1px solid var(--gc-border); display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease; }
.sidebar-brand { padding: 1.4rem 1.5rem 1rem; }
.sidebar-brand img { height: 46px; width: auto; display: block; }
.sidebar-label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; font-weight: 700; padding: 1rem 1.5rem .4rem; }
.sidebar-nav { padding: 0 .9rem; overflow-y: auto; flex: 1; }
.nav-item-gc { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; margin-bottom: 2px; border-radius: 10px;
  color: #475569; font-weight: 500; font-size: .92rem; text-decoration: none; transition: all .15s ease; }
.nav-item-gc i { font-size: 1.15rem; }
.nav-item-gc:hover { background: var(--gc-bg); color: var(--gc-navy); }
.nav-item-gc.active { background: linear-gradient(135deg, var(--gc-navy), #3a41b3); color: #fff; box-shadow: 0 6px 14px rgba(43, 49, 144, .25); }
.nav-item-gc.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.nav-item-gc .soon { margin-left: auto; font-size: .62rem; font-weight: 700; background: var(--gc-cyan-soft); color: var(--gc-cyan); padding: .15rem .45rem; border-radius: 6px; }
.sidebar-foot { padding: 1rem 1.2rem; border-top: 1px solid var(--gc-border); font-size: .75rem; color: var(--gc-muted); }
.sidebar-backdrop { display: none; }

/* ---------- Layout utama ---------- */
.app-main { margin-left: var(--gc-sidebar-w); min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 1030; background: rgba(240, 245, 250, .85); backdrop-filter: blur(10px);
  padding: .9rem 1.75rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid transparent; }
.topbar h1 { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.topbar .crumb { font-size: .8rem; color: var(--gc-muted); }
.avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--gc-cyan), var(--gc-navy));
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.user-chip { display: flex; align-items: center; gap: .65rem; background: var(--gc-surface); border: 1px solid var(--gc-border);
  border-radius: 14px; padding: .3rem .85rem .3rem .3rem; box-shadow: var(--gc-shadow); }
.user-chip small { display: block; color: var(--gc-muted); font-size: .7rem; line-height: 1; }
.user-chip strong { font-size: .85rem; line-height: 1.2; }
.page { padding: .5rem 1.75rem 2.5rem; }

/* ---------- Kartu ---------- */
.card-gc { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); box-shadow: var(--gc-shadow); }
.card-gc .card-head { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--gc-border); display: flex; align-items: center; justify-content: space-between; }
.card-gc .card-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.card-gc .card-body-gc { padding: 1.4rem; }

.stat-card { padding: 1.25rem 1.35rem; display: flex; align-items: center; gap: 1rem; height: 100%; }
.stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; }
.stat-icon.navy { background: rgba(43, 49, 144, .1); color: var(--gc-navy); }
.stat-icon.cyan { background: var(--gc-cyan-soft); color: var(--gc-cyan); }
.stat-icon.red { background: #fee2e2; color: #dc2626; }
.stat-icon.green { background: #dcfce7; color: #16a34a; }
.stat-label { font-size: .8rem; color: var(--gc-muted); font-weight: 500; }
.stat-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stat-value.sm { font-size: 1.3rem; }

.welcome-banner { background: linear-gradient(120deg, var(--gc-navy) 0%, #3a41b3 55%, var(--gc-cyan) 140%); color: #fff;
  border-radius: var(--gc-radius); padding: 1.6rem 1.8rem; position: relative; overflow: hidden; }
.welcome-banner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.welcome-banner h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .25rem; }
.welcome-banner p { margin: 0; opacity: .85; font-size: .92rem; }

/* ---------- Tabel & badge ---------- */
.table-gc { margin: 0; }
.table-gc thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gc-muted); font-weight: 700;
  background: #f8fafc; border-bottom: 1px solid var(--gc-border); padding: .8rem 1.4rem; }
.table-gc td { padding: .9rem 1.4rem; vertical-align: middle; border-color: var(--gc-border); font-size: .9rem; }
.badge-soft { display: inline-block; padding: .28rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-soft-success { background: #dcfce7; color: #15803d; }
.badge-soft-danger { background: #fee2e2; color: #b91c1c; }
.badge-soft-warning { background: #fef3c7; color: #b45309; }
.badge-soft-primary { background: rgba(43, 49, 144, .1); color: var(--gc-navy); }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--gc-muted); }
.empty-state i { font-size: 2.4rem; color: #cbd5e1; display: block; margin-bottom: .5rem; }
.alert { border: 0; border-radius: 12px; font-size: .9rem; }

/* ---------- Halaman login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }

/* Panel kiri: gradien + blob bergerak + kartu kaca melayang */
.auth-hero { position: relative; overflow: hidden; color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  background: linear-gradient(145deg, #161a5c 0%, var(--gc-navy) 48%, #2f7fd0 115%); isolation: isolate; }
.auth-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%); mask-image: linear-gradient(160deg, #000 0%, transparent 70%); }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; will-change: transform; }
.blob-1 { width: 420px; height: 420px; background: rgba(27, 166, 225, .55); top: -120px; left: -100px; animation: drift1 16s ease-in-out infinite alternate; }
.blob-2 { width: 360px; height: 360px; background: rgba(90, 100, 240, .5); bottom: -120px; right: -60px; animation: drift2 19s ease-in-out infinite alternate; }
.blob-3 { width: 240px; height: 240px; background: rgba(27, 166, 225, .35); top: 42%; left: 46%; animation: drift3 22s ease-in-out infinite alternate; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); z-index: -1; }
.ring-1 { width: 560px; height: 560px; right: -200px; bottom: -220px; animation: spin 60s linear infinite; border-style: dashed; }
.ring-2 { width: 340px; height: 340px; right: -80px; bottom: -100px; animation: spin 40s linear infinite reverse; }

.hero-badge { display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start; padding: .45rem .95rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 0 rgba(94, 234, 212, .7); animation: pulse 2s infinite; }
.hero-body h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; max-width: 520px; margin: 0 0 1rem; }
.hero-body h2 span { background: linear-gradient(90deg, #7dd3fc, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-body p { opacity: .82; max-width: 440px; font-size: 1.02rem; margin: 0; }

/* Kartu kaca yang melayang pelan */
.hero-cards { position: relative; height: 230px; max-width: 520px; }
.glass { position: absolute; display: flex; align-items: center; gap: .85rem; padding: .85rem 1.1rem; border-radius: 16px; min-width: 230px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(8, 12, 60, .28); animation: float 6s ease-in-out infinite; }
.glass .g-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.glass small { display: block; opacity: .75; font-size: .72rem; }
.glass strong { font-size: .95rem; font-weight: 700; }
.glass-1 { top: 0; left: 0; animation-delay: 0s; }
.glass-1 .g-ico { background: rgba(27, 166, 225, .35); }
.glass-2 { top: 78px; left: 150px; animation-delay: -2s; }
.glass-2 .g-ico { background: rgba(94, 234, 212, .3); }
.glass-3 { top: 156px; left: 30px; animation-delay: -4s; }
.glass-3 .g-ico { background: rgba(251, 191, 36, .3); }

.hero-foot { font-size: .82rem; opacity: .7; }

/* Animasi masuk bertahap */
.reveal { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 1s); }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-100px, -90px) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-80px, 60px) scale(.85); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(94, 234, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); } }

/* Sisi kanan: logo besar + form */
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--gc-surface); }
.auth-card { width: 100%; max-width: 410px; }
.auth-logo { display: block; height: 150px; width: auto; max-width: 100%; margin: 0 auto 1.75rem; }
.auth-card h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.auth-card .auth-sub { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .blob, .ring, .glass, .hero-badge .dot { animation: none; }
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ---------- Responsif ---------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1035; }
  .app-main { margin-left: 0; }
  .topbar, .page { padding-left: 1rem; padding-right: 1rem; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-logo { height: 120px; }
}

/* ---------- Fase 1: tab master, tombol ikon, hasil uji ---------- */
.nav-pills-gc { list-style: none; padding: 4px; margin: 0; display: flex; gap: 2px; overflow-x: auto; background: var(--gc-surface);
  border: 1px solid var(--gc-border); border-radius: 14px; box-shadow: var(--gc-shadow); width: fit-content; max-width: 100%; }
.nav-pills-gc a { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 10px; color: #475569;
  font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .15s ease; }
.nav-pills-gc a:hover { background: var(--gc-bg); color: var(--gc-navy); }
.nav-pills-gc a.active { background: var(--gc-navy); color: #fff; }
.btn-icon { background: none; border: 0; width: 34px; height: 34px; border-radius: 9px; color: #475569; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.05rem; transition: background .15s ease; text-decoration: none; }
.btn-icon:hover { background: var(--gc-bg); color: var(--gc-navy); }
.result-card { border: 1px solid var(--gc-border); border-left: 4px solid var(--gc-cyan); border-radius: 12px; padding: 1rem; background: var(--gc-cyan-soft); height: 100%; }
.tester .card-head { background: linear-gradient(90deg, rgba(27, 166, 225, .08), transparent); border-radius: var(--gc-radius) var(--gc-radius) 0 0; }
.modal-content { border-radius: var(--gc-radius); }

/* ---------- Fase 2: customer & impor ---------- */
.detail-list { margin: 0; display: grid; grid-template-columns: 110px 1fr; row-gap: .75rem; font-size: .9rem; }
.detail-list dt { color: var(--gc-muted); font-weight: 500; }
.detail-list dd { margin: 0; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 2.4rem 1rem; cursor: pointer;
  border: 2px dashed #c7d2e3; border-radius: var(--gc-radius); background: #f8fafc; color: var(--gc-muted); transition: all .15s ease; }
.dropzone i { font-size: 2.6rem; color: var(--gc-cyan); }
.dropzone strong { color: var(--gc-text); }
.dropzone:hover, .dropzone.drag { border-color: var(--gc-cyan); background: var(--gc-cyan-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--gc-navy); background: rgba(43, 49, 144, .04); }
.table-row-error td { background: #fff7f7; }
.pagination .page-link { border-radius: 8px; margin: 0 2px; color: var(--gc-navy); border-color: var(--gc-border); }
.pagination .active .page-link { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; }

/* ---------- Fase 4: monitoring kunjungan ---------- */
.stat-icon.amber { background: #fef3c7; color: #d97706; }
.count-pill { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--gc-bg); color: var(--gc-muted); font-size: .72rem; text-align: center; }
.nav-pills-gc a.active .count-pill { background: rgba(255, 255, 255, .2); color: #fff; }
.visit-row td:first-child { box-shadow: inset 4px 0 0 transparent; }
.visit-pending td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.visit-in_progress td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.visit-done td:first-child { box-shadow: inset 4px 0 0 var(--gc-navy); }
.visit-none td:first-child { box-shadow: inset 4px 0 0 #22c55e; }
.visit-pending td { background: #fffafa; }
.visit-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid var(--gc-border); }
.visit-photo { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.visit-map { height: 280px; z-index: 0; }
.map-pin { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.status-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.status-opt { border: 1px solid var(--gc-border); border-radius: 10px; padding: .6rem .5rem; text-align: center; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s ease; color: #475569; }
.status-opt:hover { background: var(--gc-bg); }
.btn-check:checked + .status-opt-danger { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }
.btn-check:checked + .status-opt-warning { background: #fef3c7; border-color: #f59e0b; color: #b45309; }
.btn-check:checked + .status-opt-primary { background: rgba(43, 49, 144, .1); border-color: var(--gc-navy); color: var(--gc-navy); }
.btn-check:checked + .status-opt-success { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.btn-check:focus-visible + .status-opt { outline: 3px solid rgba(27, 166, 225, .35); }
.stat-link { transition: transform .15s ease, box-shadow .15s ease; } .stat-link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43,49,144,.12); }
.data-asof { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: 12px; padding: .6rem 1rem; font-size: .88rem; box-shadow: var(--gc-shadow); }

/* ---------- Fase 6: laporan ---------- */
.report-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.5rem; background: var(--gc-surface); border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius); box-shadow: var(--gc-shadow); color: var(--gc-text); transition: all .15s ease; }
.report-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43, 49, 144, .14); border-color: rgba(27, 166, 225, .5); color: var(--gc-text); }
.report-card h2 { font-size: 1.1rem; font-weight: 700; margin: .5rem 0 0; }
.report-card p { color: var(--gc-muted); font-size: .9rem; margin: 0; flex: 1; }
.report-link { color: var(--gc-navy); font-weight: 600; font-size: .88rem; }
.chart-wrap { position: relative; height: 260px; }
.table-total td { background: #f8fafc; font-weight: 700; border-top: 2px solid var(--gc-border); }
.aging-pill { display: inline-block; padding: .15rem .55rem; border-radius: 8px; font-size: .8rem; font-weight: 600; }
.aging-pill.age-1 { background: #fef9c3; color: #854d0e; }
.aging-pill.age-2 { background: #fed7aa; color: #9a3412; }
.aging-pill.age-3 { background: #fecaca; color: #b91c1c; }
.aging-pill.age-4 { background: #dc2626; color: #fff; }

/* ---------- Pemilih rentang tanggal ---------- */
.daterange { position: relative; min-width: 310px; }
.daterange .daterange-alt, .daterange .js-daterange { padding-left: 2.5rem; padding-right: 2.2rem; cursor: pointer; background-color: #fff; }
.daterange-icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--gc-muted); pointer-events: none; z-index: 2; }
.daterange-clear { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--gc-muted); width: 28px; height: 28px; border-radius: 8px; z-index: 2; font-size: .8rem; }
.daterange-clear:hover { background: var(--gc-bg); color: var(--gc-navy); }
.flatpickr-calendar { font-family: var(--bs-body-font-family); border-radius: 16px; box-shadow: 0 18px 50px rgba(30, 35, 112, .22); border: 1px solid var(--gc-border); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; }
.flatpickr-day.inRange { background: var(--gc-cyan-soft); border-color: var(--gc-cyan-soft); box-shadow: -5px 0 0 var(--gc-cyan-soft), 5px 0 0 var(--gc-cyan-soft); color: var(--gc-navy); }
.flatpickr-day.today { border-color: var(--gc-cyan); }
.flatpickr-day.today:hover { background: var(--gc-cyan-soft); border-color: var(--gc-cyan); color: var(--gc-navy); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday { color: var(--gc-text); fill: var(--gc-text); font-weight: 600; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gc-cyan); }
@media (max-width: 575.98px) { .daterange { min-width: 100%; } }

/* ---------- Kinerja & target ---------- */
.progress-gc { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-bottom: .3rem; }
.progress-gc.progress-lg { height: 16px; margin: 0; }
.progress-gc .bar { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.bar-achieved { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bar-near { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.bar-below { background: linear-gradient(90deg, #f87171, #dc2626); }
.bar-none { background: #cbd5e1; }

/* ---------- Pemilih lokasi (peta) ---------- */
.map-picker { border: 1px solid var(--gc-border); border-radius: var(--gc-radius); padding: 1rem; background: #f8fafc; }
.map-search { display: flex; gap: .5rem; align-items: stretch; }
.map-search .input-icon { position: relative; flex: 1; }
.map-suggest { position: absolute; z-index: 1100; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--gc-border);
  border-radius: 14px; box-shadow: 0 18px 40px rgba(30, 35, 112, .18); max-height: 320px; overflow-y: auto; padding: .35rem; }
.map-suggest-item { display: flex; gap: .7rem; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: .6rem .7rem; border-radius: 10px; }
.map-suggest-item:hover, .map-suggest-item:focus { background: var(--gc-cyan-soft); outline: 0; }
.map-suggest-item i { color: var(--gc-cyan); margin-top: .2rem; }
.map-suggest-item strong { display: block; font-size: .9rem; color: var(--gc-text); }
.map-suggest-item small { display: block; color: var(--gc-muted); font-size: .78rem; line-height: 1.3; }
.map-suggest-empty { padding: .9rem; color: var(--gc-muted); font-size: .88rem; }
.map-box { position: relative; margin-top: .75rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--gc-border); }
#pickerMap { height: 340px; z-index: 0; cursor: crosshair; }
.map-hint { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: .35rem .8rem;
  font-size: .78rem; font-weight: 600; color: var(--gc-textSecondary, #475569); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); max-width: calc(100% - 24px); }
.map-hint.ok { color: #15803d; }
.map-hint.warn { color: #b45309; background: #fffbeb; }
.leaflet-container { font-family: var(--bs-body-font-family); }
@media (max-width: 575.98px) { #pickerMap { height: 280px; } }