/* ==========================================================================
   Global Font Import
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   GLOBAL COLOR TOKENS (Default Light Theme)
   ========================================================================== */
:root {
  /* Base colors */
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --border: #dee2e6;
  --text: #212529;
  --text-muted: #6c757d;

  /* Theme colors */
  --primary: #0d6efd;
  --primary-contrast: #ffffff;
  --secondary: #6c757d;
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;

  /* Subtle variants */
  --primary-subtle: #e7f1ff;
  --success-subtle: #d1e7dd;
  --warning-subtle: #fff3cd;
  --danger-subtle: #f8d7da;
  --info-subtle: #cff4fc;

  /* Motion & easing */
  --motion-hover: 180ms;
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Header, Safe Area, Spacing ===== */
:root {
  /* Header height base */
  --head-h-desktop: 56px;
  --head-h-mobile: 50px;

  /* Spasi konten */
  --content-gap-top: 12px;
  /* jarak konten dari bawah header */
  --content-gap-bottom: 16px;
  /* jarak konten ke bawah */

  /* Safe areas (untuk notch iOS, dsb) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Tinggi header murni (tanpa safe area) */
  --head-h-base: var(--head-h-desktop);
  --head-h: var(--head-h-base);

  /* Offset nyata konten (header + safe area) */
  --head-offset: calc(var(--head-h-base) + var(--safe-t));

  /* Bottom nav height (mobile) */
  --bottom-nav-h: 72px;
}

/* ========================================================================== */
/* Modal & Backdrop Z-index (pastikan lebih tinggi dari elemen fixed lain)   */
/* ========================================================================== */

:root {
  /* Z-index system yang terstruktur */
  --z-bottom-nav: 1000;
  --z-header: 1100;
  --z-fab: 1045;
  --z-social-backdrop: 1040;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* Mobile: kecilkan tinggi header base */
@media (max-width: 575.98px) {
  :root {
    --head-h-base: var(--head-h-mobile);
  }
}

/* ==========================================================================
   Global Offset & Typography (sama untuk semua device)
   ========================================================================== */

html,
body {
  /* Supaya anchor/section kalau di-scroll tidak ketutup header */
  scroll-padding-top: var(--head-offset);
  overflow-x: hidden !important;
  max-width: 100%;

  /* Global font */
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semua elemen dengan id, kalau di-scroll ke sana, offset-nya ikut header */
[id] {
  scroll-margin-top: var(--head-offset) !important;
}

/* ==========================================================================
   KONTEN AREA - offset untuk header & bottom nav
   ========================================================================== */

body.home-no-gap.has-fixed-header main.app-content {
  padding-top: var(--head-offset) !important;
  /* tanpa gap putih */
}

/* Layout dengan fixed header (admin, peserta, client) */
body.has-fixed-header main,
body.has-fixed-header .app-content,
body.has-fixed-header .app-main,
body.has-fixed-header .page-content,
body.has-fixed-header .container-main {
  /* Konten mulai sedikit di bawah header (header + safe area) */
  padding-top: calc(var(--head-offset) + var(--content-gap-top)) !important;
  padding-bottom: var(--content-gap-bottom);
}

/* Layout dengan bottom nav (mobile) */
@media (max-width: 991.98px) {

  body.has-bottom-nav main,
  body.has-bottom-nav .app-content,
  body.has-bottom-nav .app-main,
  body.has-bottom-nav .page-content,
  body.has-bottom-nav .container-main {
    /* Tambah ruang di bawah supaya konten berhenti di atas bottom nav */
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + var(--content-gap-bottom)) !important;
  }
}

/* Rapikan elemen pertama di konten */
.app-content> :first-child,
.app-main> :first-child,
.page-content> :first-child,
.container-main> :first-child {
  margin-top: 0 !important;
}

/* Kontainer pertama */
.app-content>.container,
.app-content>.container-fluid,
.app-main>.container,
.app-main>.container-fluid,
.page-content>.container,
.page-content>.container-fluid,
.container-main>.container,
.container-main>.container-fluid {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hanya positioning & ukuran */
.admin-header,
.app-header,
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding-top: var(--safe-t);
  height: var(--head-h);
  display: flex;
  align-items: center;
}

/* Bottom nav: hanya posisi & safe area */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  margin: 0 !important;
  padding-bottom: var(--safe-b);
  min-height: var(--bottom-nav-h);
}

@media (min-width: 992px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* ==========================================================================
   Global Radius & Elevation (Cards & Icons)
   ========================================================================== */

:root {
  /* Radius global */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow / elevasi lembut */
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* Warna dasar card & border (bisa di-override di theme lain) */
  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   Global Card Style
   ========================================================================== */

.card,
.card-rounded,
.app-card {
  border-radius: var(--radius-lg);
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  /* biar isi (gambar, dll) ikut rounded */
}

/* Kalau mau versi extra-rounded tinggal pakai class tambahan */
.card-xl,
.card-rounded-xl {
  border-radius: var(--radius-xl);
}

/* Konten di dalam card dikasih sedikit padding default */
.card-body,
.app-card-body {
  padding: 16px;
}

/* Biar gambar di dalam card ikut membulat di atas */
.card img,
.app-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Global Icon Button / Icon Circle
   ========================================================================== */

/* Icon bulat (buat action: edit, delete, dll) */
.icon-btn,
.btn-icon,
.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  background-color: #ffffff;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  flex-shrink: 0;
}

/* Ukuran kecil & besar kalau butuh */
.icon-btn-sm,
.btn-icon-sm {
  width: 32px;
  height: 32px;
}

.icon-btn-lg,
.btn-icon-lg {
  width: 48px;
  height: 48px;
}

/* Icon di dalamnya (misal <i> atau <svg>) */
.icon-btn>i,
.icon-btn>svg,
.btn-icon>i,
.btn-icon>svg {
  font-size: 18px;
}

/* Kalau dipakai untuk avatar / foto profile */
.avatar-rounded,
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-rounded img,
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* State hover/focus (aman untuk semua device) */
.icon-btn:hover,
.btn-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.icon-btn:active,
.btn-icon:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   EFFECT UTILITIES (Global)
   ========================================================================== */

/* Shadow soft yang konsisten */
.app-shadow-soft {
  box-shadow: var(--shadow-soft);
}

/* Hover lift (bisa dipakai semua card) */
.app-hover-lift {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}

.app-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  border-color: color-mix(in srgb, var(--card-border) 65%, rgba(15, 23, 42, 0.10));
}

.app-hover-lift:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

/* Badge "soft" yang rapi */
.badge-soft {
  border: 1px solid var(--card-border);
  background: #fff;
  color: inherit;
}

/* Progress bar biar halus (kalau JS set width, tetap smooth) */
.progress .progress-bar {
  transition: width 700ms cubic-bezier(.2, .8, .2, 1);
}

/* ========================================================================== */
/* Bootstrap Modal Overrides - Pastikan modal di atas semuanya                */
/* ========================================================================== */

.modal {
  z-index: var(--z-modal) !important;
}

.modal-backdrop {
  z-index: var(--z-modal-backdrop) !important;
}

/* Pastikan modal di atas semuanya */
.modal-open {
  overflow: hidden !important;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Non-interaktif element saat modal terbuka */
.modal-open .client-social-dial,
.modal-open .mobile-bottom-nav,
.modal-open .client-header {
  /* Kurangi interaktivitas tapi tetap visible */
  pointer-events: none;
}

/* Tapi tetap izinkan header dan bottom nav untuk transisi visual */
.modal-open .client-header,
.modal-open .mobile-bottom-nav {
  opacity: 0.98;
}

/* Kecuali elemen dalam modal harus bisa diklik */
.modal * {
  pointer-events: auto;
}