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

/* ==========================================================================
   GLOBAL COLOR TOKENS (Original Theme - Only One)
   ========================================================================== */
: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);

  --primary-rgb: 13, 110, 253;
  /* untuk rgba() dan color-mix */
  --dark: #212529;
  /* untuk gradient di title */
}

/* ==========================================================================
   HEADER, SAFE AREA, SPACING (Desktop & Mobile)
   ========================================================================== */
:root {
  /* Header height */
  --head-h-desktop: 56px;
  --head-h-mobile: 50px;

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

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

  /* Base header height (akan berubah di mobile) */
  --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 navigation height (mobile) */
  --bottom-nav-h: 72px;
}

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

/* ==========================================================================
   Z-INDEX SYSTEM (Terstruktur)
   ========================================================================== */
:root {
  --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;
}

/* ==========================================================================
   GLOBAL STYLES & TYPOGRAPHY
   ========================================================================== */
html,
body {
  scroll-padding-top: var(--head-offset);
  overflow-x: hidden !important;
  max-width: 100%;
  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 punya scroll margin agar tidak ketutup header */
[id] {
  scroll-margin-top: var(--head-offset) !important;
}

/* ==========================================================================
   CONTENT AREA - Offset untuk Fixed Header & Bottom Nav
   ========================================================================== */
/* Kasus khusus: home tanpa gap */
body.home-no-gap.has-fixed-header main.app-content {
  padding-top: var(--head-offset) !important;
}

/* 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 {
  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 {
    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;
}

/* Container pertama tidak punya padding/margin tambahan */
.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;
}

/* ==========================================================================
   FIXED HEADER STYLE
   ========================================================================== */
.admin-header,
.app-header,
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding-top: var(--safe-t);
  height: var(--head-h);
  display: flex;
  align-items: center;
}

/* ==========================================================================
   BOTTOM NAVIGATION (Mobile Only)
   ========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-nav);
  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, SHADOW, CARD BACKGROUND
   ========================================================================== */
:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);
  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   GLOBAL CARD STYLE (Sesuai yang sudah ada)
   ========================================================================== */
.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;
}

.card-xl,
.card-rounded-xl {
  border-radius: var(--radius-xl);
}

.card-body,
.app-card-body {
  padding: 16px;
}

.card img,
.app-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   GLOBAL ICON BUTTON & AVATAR
   ========================================================================== */
.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;
}

.icon-btn-sm,
.btn-icon-sm {
  width: 32px;
  height: 32px;
}

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

.icon-btn>i,
.icon-btn>svg,
.btn-icon>i,
.btn-icon>svg {
  font-size: 18px;
}

.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;
}

.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);
}

/* ==========================================================================
   UTILITY EFFECTS
   ========================================================================== */
.app-shadow-soft {
  box-shadow: var(--shadow-soft);
}

.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 {
  border: 1px solid var(--card-border);
  background: #fff;
  color: inherit;
}

.progress .progress-bar {
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   MODAL OVERRIDES (Pastikan Modal di Atas Semua)
   ========================================================================== */
.modal {
  z-index: var(--z-modal) !important;
}

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

.modal-open {
  overflow: hidden !important;
}

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

/* Saat modal terbuka, elemen di bawah (bottom nav, header, dll) tidak bisa diinteraksi */
.modal-open .client-social-dial,
.modal-open .mobile-bottom-nav,
.modal-open .client-header {
  pointer-events: none;
}

.modal-open .client-header,
.modal-open .mobile-bottom-nav {
  opacity: 0.98;
}

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