/**
 * app.css - Design System & UI Styling untuk Khatib Jum'at 2027
 * Mengikuti PRD Bagian 17 (Token Desain, Pastel Cards, Responsif, Dark Mode, Aksesibilitas)
 */

/* 1. Font Lokal Plus Jakarta Sans */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

/* 2. Token Desain (Light Mode Default - Lampiran 2) */
:root {
  --font-family-base: 'Poppins', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --bg-page: #F6F8F7;
  --bg-gradient-corner: rgba(216, 238, 227, 0.45);
  --bg-card: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-bottom-nav: rgba(255, 255, 255, 0.94);

  /* Pastel Per Bulan (Persis dengan Lampiran 2) */
  --pastel-mint: #D8EEE3;
  --pastel-butter: #FEEFCB;
  --pastel-lavender: #EBE4F7;
  --pastel-sky: #DDF0F8;

  --text-main: #181A1C;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;

  --cta-bg: #181A1C;
  --cta-text: #FFFFFF;
  --cta-hover: #2E2E2E;

  --chip-free-bg: #FFFFFF;
  --chip-free-text: #181A1C;
  --chip-taken-bg: #EEF2F0;
  --chip-taken-text: #64748B;
  --chip-mine-bg: #181A1C;
  --chip-mine-text: #FFFFFF;
  --chip-blocked-bg: #FEF3C7;
  --chip-blocked-text: #92400E;

  --status-danger: #B3261E;
  --status-danger-bg: #FDEDED;

  --radius-card: 28px;
  --radius-chip: 16px;
  --radius-btn-round: 48px;
  --radius-pill: 9999px;

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.07);

  --tap-target-min: 44px;
  --tap-target-primary: 48px;

  --color-border: rgba(0, 0, 0, 0.06);
}

/* 3. Dark Mode Tokens (Hanya aktif bila eksplisit data-bs-theme="dark") */
[data-bs-theme="dark"] {
  --bg-page: #121815;
  --bg-gradient-corner: rgba(24, 45, 36, 0.35);
  --bg-card: #1B2420;
  --bg-panel: #18221D;
  --bg-bottom-nav: rgba(27, 36, 32, 0.94);

  --pastel-mint: #234038;
  --pastel-butter: #3F3820;
  --pastel-lavender: #332E45;
  --pastel-sky: #1E313B;

  --text-main: #E8EFEA;
  --text-muted: #9EB0A5;
  --text-inverse: #121815;

  --cta-bg: #F2F2F2;
  --cta-text: #1A1A1A;
  --cta-hover: #E0E0E0;

  --chip-free-bg: #1B4534;
  --chip-free-text: #A8E5C8;
  --chip-taken-bg: #2C3530;
  --chip-taken-text: #8A9A90;
  --chip-mine-bg: #F2F2F2;
  --chip-mine-text: #1A1A1A;
  --chip-blocked-bg: #403417;
  --chip-blocked-text: #FAD37D;

  --status-danger: #FF6B6B;
  --status-danger-bg: #381A1A;

  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.40);
  --color-border: rgba(255, 255, 255, 0.08);
}

/* 4. Reset & Layout Dasar */
*, *::before, *::after {
  box-sizing: border-box;
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-family-base);
  color: var(--text-main);
  background-color: var(--bg-page);
  background-image: radial-gradient(circle at 100% 0%, var(--bg-gradient-corner) 0%, transparent 45%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: visible;
}

body {
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

/* Accessibility: focus ring */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #1F6B4F;
  outline-offset: 2px;
}

/* Touch targets & input safety for iOS */
input, select, textarea {
  font-family: inherit;
  font-size: 16px !important; /* Mencegah iOS zoom */
}

button, .btn-action {
  cursor: pointer;
  border: none;
  font-family: inherit;
  min-height: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease, background-color 150ms ease, opacity 150ms ease;
}

button:active, .btn-action:active {
  transform: scale(0.97);
}

/* Rotasi Warna Pastel per Bulan */
.pastel-month-mint { background-color: var(--pastel-mint) !important; }
.pastel-month-butter { background-color: var(--pastel-butter) !important; }
.pastel-month-lavender { background-color: var(--pastel-lavender) !important; }

/* 5. Struktur Kontainer Utama (Master-Detail & Rail Navigation) */
.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* Status Bar Koneksi / Sync */
.sync-indicator-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(31, 107, 79, 0.12);
  color: #1F6B4F;
  transition: all 200ms ease;
}
.sync-indicator-bar.offline {
  background: #B3261E;
  color: #FFFFFF;
}
.sync-indicator-bar.retrying {
  background: #E58E00;
  color: #FFFFFF;
}

/* Offline Banner */
.offline-banner {
  background-color: #B3261E;
  color: #FFFFFF;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  display: none;
}
.offline-banner.active {
  display: block;
}

/* Header Aplikasi (SP-01, 17.3) */
.app-header {
  padding: 16px 20px 8px 20px;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.greeting-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--text-main);
  line-height: 1.25;
}
.user-avatar-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: var(--cta-bg, #181A1C);
  color: var(--cta-text, #FFFFFF);
  font-size: 18px;
  font-weight: 700;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.user-avatar-btn:hover {
  transform: scale(1.08);
  border-color: #d4af37 !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}
.user-avatar-btn:active {
  transform: scale(0.96);
}
.header-avatar-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}
.photo-dropzone-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.progress-card {
  background: #FFFFFF !important;
  border-radius: 24px;
  padding: 18px 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.progress-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}
.progress-bar-container {
  width: 100%;
  height: 8px;
  background: #EEF2F0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 10px;
}
.progress-bar-fill {
  height: 100%;
  background: #181A1C;
  border-radius: var(--radius-pill);
  transition: width 300ms ease;
}

/* Controls Bar (Pill Bulan, Filter Status, Tombol Info) */
.controls-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.controls-bar::-webkit-scrollbar {
  display: none;
}
.month-pill-btn {
  height: 44px;
  padding: 0 20px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.filter-pill-group {
  display: inline-flex;
  gap: 8px;
}
.filter-pill {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  color: #475569;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(14, 61, 47, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  white-space: nowrap;
  transition: all 150ms ease;
}
.filter-pill:hover {
  background: #F4F8F6;
  border-color: rgba(14, 61, 47, 0.15);
}
.filter-pill.active {
  background: #0E3D2F !important;
  color: #FFFFFF !important;
  border-color: #0E3D2F !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(14, 61, 47, 0.25) !important;
}
.btn-round-info {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--text-main);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Booking Closed Banner (SP-10) */
.booking-closed-banner {
  background: #FFF3CD;
  color: #856404;
  border: 1px solid #FFEEBA;
  border-radius: 16px;
  padding: 12px 16px;
  margin: 0 20px 16px 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 6. Daftar Kartu Jum'at (Section 17.3) */
.schedule-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 !important;
}

.friday-card {
  width: 100%;
  border-radius: var(--radius-card) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-card) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 136px;
  position: relative;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease !important;
  border: none !important;
}
.friday-card:active {
  transform: scale(0.985);
}
.friday-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated) !important;
}
.friday-card.is-processing {
  opacity: 0.7;
  pointer-events: none;
}
.friday-card.is-mine {
  box-shadow: 0 0 0 2px #181A1C, var(--shadow-elevated) !important;
}
.friday-card.is-taken {
  background-color: var(--chip-taken-bg) !important;
  color: var(--chip-taken-text);
}
.friday-card.is-past {
  opacity: 0.55;
  filter: grayscale(35%);
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.date-badge-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.date-square {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  color: var(--text-main);
  flex-shrink: 0;
}
.date-square-day {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: #181A1C;
}
.date-square-month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748B;
  margin-top: 2px;
}
.date-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  justify-content: center;
}
.date-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date-week-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.badge-next-chip {
  display: inline-flex;
  align-items: center;
  background: #0E3D2F;
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
}

.card-status-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.card-status-badge {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-pill) !important;
  background: #FFFFFF !important;
  color: #181A1C !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.card-status-badge.status-free {
  color: #1F6B4F !important;
}
.card-status-badge.status-mine {
  display: none !important;
}
.card-status-badge.status-taken {
  color: #64748B !important;
}
.card-status-badge.status-blocked {
  color: #B45309 !important;
}
.card-status-badge.status-past {
  color: #64748B !important;
}
.card-status-badge.status-open {
  background: #FFFFFF !important;
  color: #475569 !important;
}

.card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  margin-top: 4px;
}
.card-speaker-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.card-speaker-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-speaker-topic {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-card-arrow, .btn-card-arrow-circle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: #181A1C !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: none;
  flex-shrink: 0;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease;
}
.btn-card-arrow:hover, .btn-card-arrow-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1) !important;
}

/* Skeleton Loading */
.skeleton-card {
  width: 100%;
  height: 130px;
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, rgba(200,215,205,0.4) 25%, rgba(200,215,205,0.7) 50%, rgba(200,215,205,0.4) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s infinite;
}
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 7. Bottom Sheet / Modal Detail Tanggal (Section 17.4) */
.detail-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1040;
  display: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.detail-panel-backdrop.active {
  display: block;
  opacity: 1;
}

.detail-panel-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 90vh;
  max-height: 90dvh;
  background: var(--bg-card);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-elevated);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.detail-panel-container.active {
  transform: translateY(0);
}

.sheet-handle-bar {
  width: 44px;
  height: 5px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: 10px auto 4px auto;
}

.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}
.btn-round-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 40px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.detail-panel-body {
  padding: 0 20px 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Kartu Hero Pastel Terpadu (Lampiran 2 Screen 2) */
.detail-hero-card {
  background: linear-gradient(145deg, #DCEFE5 0%, #CDEBD8 100%) !important;
  border-radius: 28px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(14, 61, 47, 0.1) !important;
  box-shadow: 0 10px 30px rgba(14, 61, 47, 0.08) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease !important;
}
.detail-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(14, 61, 47, 0.12) !important;
}
.detail-hero-card:active {
  transform: scale(0.99);
}

.hero-date-large {
  font-size: 24px;
  font-weight: 800;
  color: #092B1F;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.hero-capsule-bar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 12px 18px;
  box-shadow: 0 4px 16px rgba(14, 61, 47, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}

.hero-capsule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.hero-capsule-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #181A1C;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-capsule-right {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #181A1C;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.prayer-loc-btn {
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  font-weight: 600;
  text-decoration: none;
  user-select: none;
}

.prayer-loc-btn:hover {
  background: #ffffff !important;
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.15);
  transform: translateY(-1px);
}

.prayer-loc-btn:active {
  transform: translateY(0);
}

.hero-capsule-bar .progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(14, 61, 47, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 8px;
  margin-bottom: 0;
}

.hero-capsule-bar .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0E3D2F 0%, #1F7556 100%);
  border-radius: var(--radius-pill);
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 360px) {
  .hero-capsule-left,
  .hero-capsule-right {
    font-size: 11.5px;
  }
}

/* Strip Jum'at Horisontal */
.fridays-strip-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.fridays-strip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.fridays-strip-scroll::-webkit-scrollbar {
  display: none;
}
.strip-chip-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.strip-chip-btn.selected {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-bg);
}

/* Grid Chip Tanggal */
.chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.slot-chip {
  padding: 10px 14px;
  border-radius: var(--radius-chip);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  background: var(--bg-card);
  color: var(--text-main);
}
.slot-chip.free {
  background: var(--chip-free-bg);
  color: var(--chip-free-text);
}
.slot-chip.selected {
  background: var(--cta-bg) !important;
  color: var(--cta-text) !important;
}
.slot-chip.taken {
  background: var(--chip-taken-bg);
  color: var(--chip-taken-text);
}

/* Form Topik */
.topic-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.topic-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.topic-input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--bg-card);
  color: var(--text-main);
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color 150ms ease;
}
.topic-input:focus {
  border-color: #1F6B4F;
}

/* Upload Foto Ustadz */
.photo-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.photo-upload-box {
  width: 100%;
}
.photo-dropzone-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 14px;
  background: var(--bg-card);
  border: 1.5px dashed rgba(31, 107, 79, 0.4);
  border-radius: 16px;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: center;
}
.photo-dropzone-label:hover {
  background: rgba(31, 107, 79, 0.05);
  border-color: #1F6B4F;
}
.photo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.photo-preview-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #1F6B4F;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.photo-preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.photo-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-change-photo {
  font-size: 12px;
  font-weight: 600;
  color: #1F6B4F;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.btn-change-photo:hover {
  text-decoration: underline;
}
.btn-remove-photo {
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #DC2626;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.btn-remove-photo:hover {
  text-decoration: underline;
}

/* Tombol CTA Bawah */
.detail-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.btn-cta-black {
  width: 100%;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-cta-black:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger-outline {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1.5px solid var(--status-danger);
  color: var(--status-danger);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 8. Bottom Sheet 12 Bulan (SP-02) */
.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
}
.month-tile-btn {
  height: 48px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
}
.month-tile-btn.active {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-bg);
}

/* 9. Bottom Navigation (Ponsel & Tablet Portrait) */
/* 9. Bottom Navigation (Ponsel & Tablet - Modern Native APK Experience) */
.bottom-nav-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)) 14px;
  background: linear-gradient(180deg, #007054 0%, #004d3a 100%) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.25) !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1040;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 11px;
  font-weight: 600;
  border: none;
  background: transparent;
  flex: 1;
  height: 100%;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 4px 6px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:active {
  transform: scale(0.92);
}
.bottom-nav-item .nav-icon-wrap,
.bottom-nav-item .bottom-nav-icon-wrap {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  max-width: 38px;
  max-height: 38px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}
.bottom-nav-item i {
  font-size: 19px;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}
.bottom-nav-item span,
.bottom-nav-item .bottom-nav-label {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.15px;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease, font-weight 0.2s ease;
}
.bottom-nav-item:hover,
.bottom-nav-item:focus {
  color: #c6ea56 !important;
  text-decoration: none !important;
}
.bottom-nav-item:hover span,
.bottom-nav-item:hover .bottom-nav-label {
  color: #c6ea56 !important;
}
.bottom-nav-item.active {
  color: #c6ea56 !important;
}
.bottom-nav-item.active .nav-icon-wrap,
.bottom-nav-item.active .bottom-nav-icon-wrap {
  background: linear-gradient(135deg, #c6ea56 0%, #b5db44 100%) !important;
  box-shadow: 0 4px 16px rgba(198, 234, 86, 0.45) !important;
  color: #004d3a !important;
  transform: translateY(-1px);
  border-radius: 14px !important;
}
.bottom-nav-item.active i {
  color: #004d3a !important;
  font-size: 20px;
}
.bottom-nav-item.active span,
.bottom-nav-item.active .bottom-nav-label {
  color: #c6ea56 !important;
  font-weight: 800 !important;
}

/* Bottom Navigation is strictly immune to dark mode overrides across all themes */
[data-bs-theme="dark"] .bottom-nav-bar,
.night-mode .bottom-nav-bar,
body.night-mode .bottom-nav-bar,
html.night-mode .bottom-nav-bar {
  background: linear-gradient(180deg, #007054 0%, #004d3a 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme="dark"] .bottom-nav-item,
.night-mode .bottom-nav-item,
body.night-mode .bottom-nav-item,
html.night-mode .bottom-nav-item {
  color: rgba(255, 255, 255, 0.75) !important;
}
[data-bs-theme="dark"] .bottom-nav-item:hover,
[data-bs-theme="dark"] .bottom-nav-item:focus,
.night-mode .bottom-nav-item:hover,
.night-mode .bottom-nav-item:focus {
  color: #c6ea56 !important;
}
[data-bs-theme="dark"] .bottom-nav-item.active,
.night-mode .bottom-nav-item.active,
body.night-mode .bottom-nav-item.active,
html.night-mode .bottom-nav-item.active {
  color: #c6ea56 !important;
}
[data-bs-theme="dark"] .bottom-nav-item.active .nav-icon-wrap,
[data-bs-theme="dark"] .bottom-nav-item.active .bottom-nav-icon-wrap,
.night-mode .bottom-nav-item.active .nav-icon-wrap,
.night-mode .bottom-nav-item.active .bottom-nav-icon-wrap {
  background: linear-gradient(135deg, #c6ea56 0%, #b5db44 100%) !important;
  box-shadow: 0 4px 16px rgba(198, 234, 86, 0.45) !important;
  color: #004d3a !important;
  transform: translateY(-1px);
  border-radius: 14px !important;
}
[data-bs-theme="dark"] .bottom-nav-item.active i,
.night-mode .bottom-nav-item.active i,
body.night-mode .bottom-nav-item.active i,
html.night-mode .bottom-nav-item.active i {
  color: #004d3a !important;
  font-size: 20px;
}
[data-bs-theme="dark"] .bottom-nav-item.active span,
[data-bs-theme="dark"] .bottom-nav-item.active .bottom-nav-label,
.night-mode .bottom-nav-item.active span,
.night-mode .bottom-nav-item.active .bottom-nav-label,
body.night-mode .bottom-nav-item.active span,
html.night-mode .bottom-nav-item.active span {
  color: #c6ea56 !important;
  font-weight: 800 !important;
}

@media (min-width: 992px) {
  .bottom-nav-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 10. Layar Lengkapi Data (Modal Penuh Tidak Bisa Dilewati, SP-12, 18.4) */
.profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, #062b1e 0%, #031810 50%, #020e09 100%);
  background-attachment: fixed;
  z-index: 2000;
  display: none;
  overflow-y: auto;
  padding: 36px 18px;
}
.profile-modal-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(4, 164, 118, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  pointer-events: none;
  opacity: 0.7;
}
.profile-modal-overlay.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.profile-card-box {
  width: 100%;
  max-width: 480px;
  margin: auto;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-card-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #03402a 0%, #046342 35%, #d4af37 70%, #f1c84e 100%);
}
@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.profile-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 800;
  color: #061a12;
  margin: 0;
  letter-spacing: -0.3px;
}
.profile-desc {
  font-size: 13.5px;
  color: #4B5563;
  line-height: 1.55;
  margin: 0;
}
.profile-mosque-badge {
  background: rgba(4, 99, 66, 0.08);
  border: 1px solid rgba(4, 99, 66, 0.15);
}
.profile-mosque-logo-img {
  height: 18px;
  width: auto;
  object-fit: contain;
}
.profile-mosque-icon {
  font-size: 13px;
}
.profile-mosque-name {
  font-size: 0.78rem;
}
.profile-avatar-hint {
  font-size: 0.72rem;
}
.profile-avatar-upload-wrapper {
  width: 92px;
  height: 92px;
  position: relative;
  margin: 0 auto;
}
.profile-avatar-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 14px rgba(4, 99, 66, 0.18), 0 0 0 2px #046342;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar-placeholder {
  font-size: 42px;
  color: #046342;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-btn-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #046342 0%, #0d8359 100%);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}
.profile-avatar-btn-edit:hover {
  background: #d4af37;
  color: #061a12;
  transform: scale(1.08);
}
.btn-avatar-action {
  font-size: 0.75rem;
  font-weight: 600;
  color: #046342;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-avatar-action:hover {
  background: #E2E8F0;
  color: #061a12;
}
.input-icon-wrapper-modern {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-wrapper-modern i {
  position: absolute;
  left: 14px;
  font-size: 18px;
  pointer-events: none;
  z-index: 2;
}
.topic-input-modern {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-size: 14.5px;
  color: #0F172A;
  background: #F8FAFC;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.topic-input-modern:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #046342;
  box-shadow: 0 0 0 3.5px rgba(4, 99, 66, 0.14);
}
.btn-cta-luxury {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #03402a 0%, #046342 60%, #0d8359 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px -4px rgba(4, 99, 66, 0.45);
  transition: all 0.25s ease;
  margin-top: 8px;
}
.btn-cta-luxury:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(4, 99, 66, 0.55);
  background: linear-gradient(135deg, #03402a 0%, #057a52 100%);
}
.btn-cta-luxury:active {
  transform: translateY(0);
}
.btn-cta-luxury:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.field-error-msg {
  font-size: 13px;
  color: var(--status-danger);
  font-weight: 600;
  margin-top: 4px;
  display: none;
}
.field-error-msg.active {
  display: block;
}

/* 11. Tab Jadwal Saya (Modern Luxury Executive Layout) */
.tab-content-panel {
  display: none;
  padding: 0 !important;
}
.tab-content-panel.active {
  display: block;
}

/* Kartu Ringkasan Penugasan Ustadz (Kiri) */
.my-schedules-summary-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: 0 10px 30px rgba(3, 64, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(155, 109, 31, 0.18);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.my-schedules-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #03402a 0%, #046342 35%, #d4af37 70%, #f1c84e 100%);
}

.my-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.my-summary-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(4, 99, 66, 0.08);
  color: #046342;
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(4, 99, 66, 0.15);
  letter-spacing: 0.3px;
}

.my-summary-year {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

/* Box Jadwal Khutbah Terdekat */
.my-next-schedule-card {
  background: linear-gradient(135deg, #061a12 0%, #03402a 100%);
  border-radius: 20px;
  padding: 20px;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(3, 64, 42, 0.22);
  border: 1px solid rgba(212, 175, 55, 0.25);
  position: relative;
  overflow: hidden;
}

.my-next-schedule-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.my-card-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #f1c84e;
  margin-bottom: 6px;
}

.pulse-dot-gold {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #f1c84e;
  box-shadow: 0 0 8px #f1c84e;
  display: inline-block;
  animation: goldPulse 2s infinite;
}

@keyframes goldPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.my-next-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 4px;
}

.my-next-topic {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
  font-style: italic;
  line-height: 1.4;
}

/* Box Kuota Penugasan */
.my-quota-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px 18px;
}

.my-quota-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
}

.my-quota-number {
  font-size: 13.5px;
  font-weight: 800;
  color: #046342;
}

.my-quota-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 0;
}

.my-quota-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #046342 0%, #d4af37 100%);
  border-radius: 50px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.my-quota-subtext {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Tombol CTA Pilih Jadwal */
.btn-my-pick-cta {
  width: 100%;
  padding: 13px 20px;
  background: var(--istiqlal-gold-gradient);
  color: #061a12;
  font-weight: 800;
  font-size: 13.5px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(155, 109, 31, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-my-pick-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #f1c84e 0%, #d4af37 100%);
  box-shadow: 0 10px 25px rgba(155, 109, 31, 0.45);
  color: #000000;
}
.btn-my-pick-cta:active {
  transform: scale(0.98);
}

/* Header Timeline Kanan */
.my-timeline-group {
  margin-bottom: 24px;
}
.my-timeline-group:last-child,
.my-timeline-group:last-of-type {
  margin-bottom: 0 !important;
}

.my-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.my-timeline-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.my-timeline-icon-box.icon-emerald {
  background: rgba(4, 99, 66, 0.1);
  color: #046342;
}
.my-timeline-icon-box.icon-secondary {
  background: #f1f5f9;
  color: #64748b;
}

.my-timeline-title {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.my-timeline-desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.my-count-pill {
  background: rgba(4, 99, 66, 0.1);
  color: #046342;
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 14px;
  border-radius: 50px;
  border: 1px solid rgba(4, 99, 66, 0.2);
  white-space: nowrap;
}
.my-count-pill.pill-muted {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

/* Kartu Kosong (Empty State) Elegan & Berkelas */
.my-empty-state-card {
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 22px;
  padding: 34px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}
.my-empty-state-card.is-muted {
  border-style: solid;
  border-color: #e2e8f0;
  background: #fbfdfc;
  padding: 26px 20px;
}

.empty-state-circle-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}
.empty-state-circle-icon.icon-gold {
  background: rgba(241, 200, 78, 0.15);
  color: #9b6d1f;
  border: 1.5px solid rgba(241, 200, 78, 0.35);
}
.empty-state-circle-icon.icon-muted {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}

.empty-state-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.empty-state-desc {
  font-size: 13px;
  color: #64748b;
  max-width: 440px;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.btn-empty-action {
  background: #061a12;
  color: #ffffff;
  font-weight: 750;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 50px;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(3, 64, 42, 0.15);
}
.btn-empty-action:hover {
  background: #03402a;
  border-color: #d4af37;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 64, 42, 0.25);
  color: #ffffff;
}

/* Kartu Jadwal Saya Modern (Schedule Row Item) */
.my-schedule-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.my-schedule-card-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.my-schedule-card-row:hover {
  transform: translateY(-2px);
  border-color: #d4af37;
  box-shadow: 0 8px 25px rgba(3, 64, 42, 0.08);
}
.my-schedule-card-row.is-past {
  opacity: 0.78;
  background: #fbfdfc;
}

.my-card-left-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.my-card-date-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #03402a 0%, #061a12 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 12px rgba(3, 64, 42, 0.18);
}
.my-schedule-card-row.is-past .my-card-date-badge {
  background: #475569;
  border-color: #94a3b8;
}

.my-card-day {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.my-card-month {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.5px;
  color: #f1c84e;
  margin-top: 2px;
}
.my-schedule-card-row.is-past .my-card-month {
  color: #cbd5e1;
}

.my-card-info {
  flex: 1;
  min-width: 0;
}

.my-card-top-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.my-card-date-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.my-card-week-chip {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.my-card-topic {
  font-size: 13px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-card-topic.has-topic {
  color: #046342;
  font-weight: 600;
  font-style: italic;
}
.my-card-topic.no-topic {
  color: #94a3b8;
  font-style: italic;
}

.my-card-actions {
  flex-shrink: 0;
}

.btn-manage-my-schedule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-manage-my-schedule.btn-edit {
  background: rgba(4, 99, 66, 0.08);
  color: #046342;
  border: 1px solid rgba(4, 99, 66, 0.2);
}
.btn-manage-my-schedule.btn-edit:hover {
  background: #046342;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(4, 99, 66, 0.3);
  transform: translateY(-1px);
}

.btn-manage-my-schedule.btn-view {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.btn-manage-my-schedule.btn-view:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Styling Tambahan UI/UX Tab Jadwal Dipilih (Mendukung Khutbah Jum'at & Tarwih) */
.my-summary-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.my-next-schedule-card[role="button"] {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.my-next-schedule-card[role="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3, 64, 42, 0.3);
}

.bg-tarwih-fill {
  background: linear-gradient(90deg, #d4af37 0%, #f1c84e 100%) !important;
}

.btn-my-pick-cta.btn-my-pick-tarwih {
  background: linear-gradient(135deg, #044b32 0%, #033624 100%);
  color: #f1c84e;
  border: 1px solid rgba(241, 200, 78, 0.35);
  box-shadow: 0 4px 15px rgba(3, 64, 42, 0.2);
}
.btn-my-pick-cta.btn-my-pick-tarwih:hover {
  background: linear-gradient(135deg, #056644 0%, #044b32 100%);
  color: #ffffff;
  border-color: #f1c84e;
  box-shadow: 0 8px 22px rgba(3, 64, 42, 0.3);
}

/* Sub-Filter Bar Tab Dipilih */
.my-schedules-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}
.my-schedules-filter-bar::-webkit-scrollbar {
  display: none;
}

.my-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.my-filter-chip i {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.my-filter-chip span {
  line-height: 1.2;
}
.my-filter-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.my-filter-chip.active {
  background: #061a12;
  color: #ffffff;
  border-color: #d4af37;
  box-shadow: 0 4px 14px rgba(6, 26, 18, 0.2);
}
.my-filter-chip.active .badge-count-mini {
  background: rgba(241, 200, 78, 0.25);
  color: #f1c84e;
  border-color: rgba(241, 200, 78, 0.4);
}

.badge-count-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

/* Badge Tipe Jadwal (Khutbah vs Tarwih) */
.badge-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 50px;
  letter-spacing: 0.2px;
}
.badge-type-pill i {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}
.badge-type-pill.badge-type-jumat {
  background: rgba(4, 99, 66, 0.1);
  color: #046342;
  border: 1px solid rgba(4, 99, 66, 0.22);
}
.badge-type-pill.badge-type-tarwih {
  background: rgba(212, 175, 55, 0.16);
  color: #9b6d1f;
  border: 1px solid rgba(212, 175, 55, 0.35);
}

/* Date Badge Khusus Tarwih */
.my-card-date-badge.is-tarwih-badge {
  background: linear-gradient(135deg, #0d2818 0%, #03402a 60%, #0a4332 100%);
  border-color: rgba(241, 200, 78, 0.45);
  box-shadow: 0 4px 14px rgba(3, 64, 42, 0.25);
}
.my-card-date-badge.is-tarwih-badge .my-card-month {
  color: #f1c84e;
  font-weight: 800;
  letter-spacing: 0.8px;
}
.my-schedule-card-row.is-past .my-card-date-badge.is-tarwih-badge {
  background: #475569;
  border-color: #94a3b8;
}
.my-schedule-card-row.is-past .my-card-date-badge.is-tarwih-badge .my-card-month {
  color: #cbd5e1;
}

.my-card-imam-chip,
.my-card-date-chip {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.my-card-imam-chip i,
.my-card-date-chip i {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

/* Grup Kategori Jadwal & Pemisah Khutbah vs Tarwih */
.my-category-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.my-category-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 8px 2px;
  margin-top: 2px;
}

.my-category-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.2px;
}

.my-category-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.my-category-icon-box.tarwih {
  background: rgba(212, 175, 55, 0.16);
  color: #9b6d1f;
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.my-category-icon-box.jumat {
  background: rgba(4, 99, 66, 0.12);
  color: #046342;
  border: 1px solid rgba(4, 99, 66, 0.25);
}

.my-category-count-badge {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 50px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.my-category-count-badge.tarwih {
  background: rgba(212, 175, 55, 0.12);
  color: #9b6d1f;
  border-color: rgba(212, 175, 55, 0.25);
}
.my-category-count-badge.jumat {
  background: rgba(4, 99, 66, 0.08);
  color: #046342;
  border-color: rgba(4, 99, 66, 0.2);
}

/* Pemisah Antara Jadwal Khutbah & Tarwih (Garis Minimalis Elegan) */
.my-schedule-type-separator {
  display: flex;
  align-items: center;
  margin: 22px 0 16px 0;
  padding: 0 4px;
}

.separator-line {
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(4, 99, 66, 0.15) 20%, rgba(212, 175, 55, 0.35) 50%, rgba(4, 99, 66, 0.15) 80%, transparent 100%);
}

.empty-state-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Dark Mode Overrides untuk Tab Dipilih */
html[data-bs-theme="dark"] .my-summary-title,
body.night-mode .my-summary-title {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .my-filter-chip,
body.night-mode .my-filter-chip {
  background: rgba(15, 30, 24, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .my-filter-chip:hover,
body.night-mode .my-filter-chip:hover {
  background: rgba(20, 42, 34, 0.95) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .my-filter-chip.active,
body.night-mode .my-filter-chip.active {
  background: #044b32 !important;
  color: #f1c84e !important;
  border-color: #d4af37 !important;
}
html[data-bs-theme="dark"] .badge-count-mini,
body.night-mode .badge-count-mini {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-bs-theme="dark"] .my-category-header-title,
body.night-mode .my-category-header-title {
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .separator-line,
body.night-mode .separator-line {
  background: linear-gradient(90deg, transparent 0%, rgba(52, 211, 153, 0.18) 20%, rgba(241, 200, 78, 0.35) 50%, rgba(52, 211, 153, 0.18) 80%, transparent 100%) !important;
}
html[data-bs-theme="dark"] .my-category-icon-box.tarwih,
body.night-mode .my-category-icon-box.tarwih {
  background: rgba(241, 200, 78, 0.2) !important;
  color: #f1c84e !important;
  border-color: rgba(241, 200, 78, 0.35) !important;
}
html[data-bs-theme="dark"] .my-category-icon-box.jumat,
body.night-mode .my-category-icon-box.jumat {
  background: rgba(4, 120, 87, 0.25) !important;
  color: #34d399 !important;
  border-color: rgba(4, 120, 87, 0.4) !important;
}
html[data-bs-theme="dark"] .my-category-count-badge.tarwih,
body.night-mode .my-category-count-badge.tarwih {
  background: rgba(241, 200, 78, 0.15) !important;
  color: #f1c84e !important;
  border-color: rgba(241, 200, 78, 0.3) !important;
}
html[data-bs-theme="dark"] .my-category-count-badge.jumat,
body.night-mode .my-category-count-badge.jumat {
  background: rgba(4, 120, 87, 0.2) !important;
  color: #34d399 !important;
  border-color: rgba(4, 120, 87, 0.35) !important;
}
html[data-bs-theme="dark"] .badge-type-pill.badge-type-jumat,
body.night-mode .badge-type-pill.badge-type-jumat {
  background: rgba(4, 120, 87, 0.25) !important;
  color: #34d399 !important;
  border-color: rgba(4, 120, 87, 0.45) !important;
}
html[data-bs-theme="dark"] .badge-type-pill.badge-type-tarwih,
body.night-mode .badge-type-pill.badge-type-tarwih {
  background: rgba(241, 200, 78, 0.18) !important;
  color: #f1c84e !important;
  border-color: rgba(241, 200, 78, 0.35) !important;
}
html[data-bs-theme="dark"] .my-card-imam-chip,
html[data-bs-theme="dark"] .my-card-date-chip,
body.night-mode .my-card-imam-chip,
body.night-mode .my-card-date-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .quota-block-tarwih,
body.night-mode .quota-block-tarwih {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-bs-theme="dark"] .my-empty-state-card,
body.night-mode .my-empty-state-card {
  background: rgba(8, 28, 20, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Toast Notifikasi (SY-01) */
.toast-container-custom {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: 90%;
  max-width: 420px;
}
.toast-msg {
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: slideDownToast 200ms ease;
}
.toast-msg.toast-success {
  background: #1F6B4F;
  color: #FFFFFF;
}
.toast-msg.toast-error {
  background: #B3261E;
  color: #FFFFFF;
}
@keyframes slideDownToast {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 12. BREAKPOINTS RESPONSIVE (17.5) */

/* A. Ponsel (<600px): sudah default di atas (1 kolom, bottom nav, full height sheet) */

/* B. Tablet Portrait (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .schedule-cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-panel-container {
    max-width: 560px;
    left: 50%;
    transform: translate(-50%, 100%);
    border-radius: 28px;
    bottom: 24px;
  }
  .detail-panel-container.active {
    transform: translate(-50%, 0);
  }
}

/* C. Tablet & Desktop (>=768px) - Clean Centered Mobile-App Viewport */
@media (min-width: 768px) {
  body {
    background: radial-gradient(circle at 50% 0%, #E8EFEA 0%, #D8DFDB 100%);
    min-height: 100vh;
  }

  [data-bs-theme="dark"] body {
    background: radial-gradient(circle at 50% 0%, #151D19 0%, #0D1210 100%);
  }

  .app-container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page);
    box-shadow: 0 0 50px rgba(14, 61, 47, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .bottom-nav-bar {
    max-width: 480px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 0 0 36px 36px;
    border-left: 1px solid rgba(14, 61, 47, 0.08);
    border-right: 1px solid rgba(14, 61, 47, 0.08);
  }

  .detail-panel-container {
    max-width: 480px;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 100%);
    border-radius: 28px 28px 0 0;
  }
  .detail-panel-container.active {
    transform: translate(-50%, 0) !important;
  }

  .profile-modal-overlay {
    backdrop-filter: blur(8px);
  }

  .detail-panel-backdrop {
    backdrop-filter: blur(4px);
  }
}

/* 13. Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 14. Halaman Publik (/jadwal) - PRD Bagian 20 & Lampiran 2 */
.public-page-container {
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 80px 20px;
}

.app-mosque-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #181A1C;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.search-input-pill {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(14, 61, 47, 0.1);
  background: #FFFFFF;
  color: var(--text-main);
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(14, 61, 47, 0.03);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.search-input-pill:focus {
  border-color: #0E3D2F;
  box-shadow: 0 0 0 3.5px rgba(14, 61, 47, 0.12);
}

/* Bilah Aksi Utama: Bagikan WA & Bagikan Link (Native iOS/Android Dual Action) */
.schedule-actions-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.btn-action-native {
  height: 44px;
  border-radius: var(--radius-pill) !important;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  padding: 0 14px;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  user-select: none;
}
.btn-action-native:hover {
  transform: translateY(-1px);
}
.btn-action-native:active {
  transform: scale(0.975);
}

.btn-action-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28) !important;
}
.btn-action-wa:hover {
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.36) !important;
}

.btn-action-share {
  background: #FFFFFF !important;
  color: #181A1C !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
.btn-action-share:hover {
  background: #F8FAFC !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.public-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Multi-kolom saat di Mode Desktop */
.native-app-shell.desktop-mode .public-grid,
body.is-desktop-mode .public-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .native-app-shell.desktop-mode .public-grid,
  body.is-desktop-mode .public-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1040px) {
  .native-app-shell.desktop-mode .public-grid,
  body.is-desktop-mode .public-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Saat di Mode Simulasi Ponsel di Layar Lebar: paksa 1 kolom agar tidak meluap keluar cangkang HP */
.native-app-shell:not(.desktop-mode) .public-grid {
  grid-template-columns: 1fr !important;
  gap: 14px;
}

.public-friday-card {
  width: 100%;
  cursor: pointer;
}

.public-friday-card.d-none,
.month-section.d-none {
  display: none !important;
}

.public-friday-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.public-friday-card:active {
  transform: scale(0.985);
}

.public-friday-card.is-past {
  opacity: 0.55;
  filter: grayscale(35%);
}

.public-friday-card.is-next {
  box-shadow: 0 4px 18px rgba(31, 107, 79, 0.12), inset 0 0 0 1.5px rgba(31, 107, 79, 0.22) !important;
}

.shadow-xs {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.text-theme-main {
  color: var(--text-main) !important;
}

.text-theme-muted {
  color: var(--text-muted) !important;
}

.bg-theme-card {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
}

.month-section {
  scroll-margin-top: 130px;
}

.month-section summary {
  cursor: pointer;
  user-select: none;
}

@media (max-width: 679px) {
  .month-section {
    scroll-margin-top: calc(122px + env(safe-area-inset-top, 0px));
  }
}

/* 15. Native App Experience & Clean Fluid Responsive Body */
.native-app-body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Plus Jakarta Sans", sans-serif;
  background-color: var(--istiqlal-bg-soft, #F4F7F5);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
 * 15. Tampilan UI/UX Khas Masjid Istiqlal (https://www.istiqlal.or.id/)
 * Liquid Glass Navbar, Hero Luxury, Impact Cards, Playfair Serif,
 * Gold-Emerald Palette, & Curved Luxury Footer
 * ============================================================ */

:root {
  --istiqlal-accent: #f1c84e;
  --istiqlal-forest: #061a12;
  --istiqlal-green-dark: #03402a;
  --istiqlal-green-primary: #046342;
  --istiqlal-green-medium: #047857;
  --istiqlal-green-light: #04a476;
  --istiqlal-green-gradient: linear-gradient(135deg, #03402a 0%, #04a476 100%);
  --istiqlal-gold-dark: #9b6d1f;
  --istiqlal-gold-primary: #d4af37;
  --istiqlal-gold-light: #f1c84e;
  --istiqlal-gold-gradient: linear-gradient(135deg, #9b6d1f 0%, #f1c84e 100%);
  --istiqlal-bg-soft: #fcfdfc;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body.istiqlal-theme {
  font-family: var(--font-sans);
  background-color: var(--istiqlal-bg-soft);
  color: #333333;
  margin: 0;
  overflow-x: hidden;
}

/* --- 1. LIQUID GLASS NAVBAR (Istiqlal Style) --- */
.navbar-container {
  position: sticky;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1040;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  margin-bottom: 24px;
}

.navbar-glass {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(155, 109, 31, 0.2);
  border-radius: 60px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 24px rgba(3, 64, 42, 0.08);
  width: 100%;
  max-width: 1240px;
  gap: 16px;
  transition: box-shadow 0.2s ease;
}

.navbar-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-brand-logo {
  min-width: 44px;
  height: 44px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.navbar-brand-logo i {
  color: var(--istiqlal-green-primary, #046342);
  font-size: 26px;
  line-height: 1;
}

.navbar-brand-text {
  display: flex;
  flex-direction: column;
}

.navbar-mosque-name {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--istiqlal-green-dark);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.navbar-mosque-tagline {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--istiqlal-gold-dark);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --- Floating Segmented Tabs Navbar (Jadwal Jum'at / Jadwal Tarwih) --- */
.navbar-schedule-tabs {
  display: inline-flex;
  align-items: center;
  background: rgba(4, 99, 66, 0.06);
  border: 1px solid rgba(4, 99, 66, 0.12);
  border-radius: 50px;
  padding: 3px;
  gap: 4px;
}

.nav-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nav-tab-pill i {
  font-size: 0.95rem;
  color: #6B7280;
  transition: color 0.2s ease;
}

.nav-tab-pill:hover {
  color: #046342;
  background: rgba(255, 255, 255, 0.85);
}

.nav-tab-pill:hover i {
  color: #046342;
}

.nav-tab-pill.active {
  background: #046342;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(4, 99, 66, 0.25);
}

.nav-tab-pill.active i {
  color: #F1C84E !important;
}

/* Night Mode Support for Tabs */
html[data-bs-theme="dark"] .navbar-schedule-tabs,
body.night-mode .navbar-schedule-tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(241, 200, 78, 0.2);
}

html[data-bs-theme="dark"] .nav-tab-pill,
body.night-mode .nav-tab-pill {
  color: #94A3B8;
}

html[data-bs-theme="dark"] .nav-tab-pill:hover,
body.night-mode .nav-tab-pill:hover {
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] .nav-tab-pill.active,
body.night-mode .nav-tab-pill.active {
  background: linear-gradient(135deg, #064e3b 0%, #046342 100%);
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.navbar-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tombol Nav Standar Istiqlal */
.btn-nav {
  background: var(--istiqlal-green-gradient);
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 14px rgba(3, 64, 42, 0.2);
}
.btn-nav:hover {
  background: var(--istiqlal-gold-gradient);
  color: #061a12 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(155, 109, 31, 0.35);
}

.btn-nav-outline {
  background: #ffffff !important;
  color: var(--istiqlal-green-dark) !important;
  border: 1.5px solid rgba(3, 64, 42, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.btn-nav-outline:hover {
  border-color: var(--istiqlal-gold-light) !important;
  color: var(--istiqlal-gold-dark) !important;
  background: rgba(241, 200, 78, 0.08) !important;
  transform: translateY(-2px);
}

.btn-nav-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  flex: 0 0 40px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

#btn-desktop-share {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
}

/* Responsive Action Buttons (Night Mode & Share) pada Mode Tablet (max-width: 991.98px): Bulat Sempurna 38px */
@media (max-width: 991.98px) {
  .navbar-nav-actions {
    gap: 8px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .navbar-nav-actions .btn-nav,
  .navbar-nav-actions .btn-nav-icon,
  .navbar-nav-actions #btn-desktop-share,
  .navbar-nav-actions #btn-toggle-nightmode {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    flex: 0 0 38px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }
  #btn-desktop-share span {
    display: none !important;
  }
  .navbar-nav-actions .btn-nav i {
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Tombol Istiqlal Donasi / Kontak Emas */
.btn-nav-donasi {
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  border-radius: 50px;
  font-weight: 800;
  border: none;
  padding: 8px 20px !important;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 5px 15px rgba(155, 109, 31, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none !important;
  white-space: nowrap;
}
.btn-nav-donasi:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(155, 109, 31, 0.5);
  color: #000000 !important;
}
.btn-nav-donasi i {
  animation: istiqlalHeartbeat 1.6s infinite;
}

@keyframes istiqlalHeartbeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}



@media (max-width: 991.98px) {
  .navbar-container {
    display: none !important;
  }
  .navbar-glass {
    border-radius: 50px;
    padding: 6px 10px;
    box-shadow: 0 4px 14px rgba(3, 64, 42, 0.06);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px;
  }
  .navbar-brand-wrap {
    gap: 0 !important;
    flex-shrink: 0 !important;
  }
  .navbar-brand-logo {
    min-width: 34px;
    height: 34px;
    width: 34px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .navbar-brand-logo i {
    font-size: 20px;
  }
  .navbar-logo-img {
    max-height: 34px !important;
    width: 34px !important;
    object-fit: contain;
  }
  .navbar-schedule-tabs {
    padding: 2px 3px;
    gap: 3px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  .nav-tab-pill {
    padding: 6px 10px;
    font-size: 0.78rem;
    gap: 5px;
    white-space: nowrap;
    justify-content: center;
  }
  .nav-tab-pill i {
    font-size: 0.85rem;
  }
  .navbar-nav-actions {
    gap: 5px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .navbar-nav-actions .btn-nav,
  .navbar-nav-actions .btn-nav-icon,
  .navbar-nav-actions #btn-desktop-share,
  .navbar-nav-actions #btn-toggle-nightmode {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }
  .navbar-nav-actions .btn-nav i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Sembunyikan Text Nama Masjid Pada Mode Responsive Tablet dan Smartphone (max-width: 991.98px) */
@media (max-width: 991.98px) {
  .navbar-brand-text,
  .navbar-mosque-name,
  .navbar-mosque-tagline,
  .navbar-badge-sub {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .navbar-container {
    padding: 6px 8px !important;
  }
  .navbar-glass {
    padding: 5px 8px !important;
    gap: 5px !important;
  }
  .navbar-brand-logo {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .navbar-logo-img {
    max-height: 30px !important;
    width: 30px !important;
  }
  .navbar-schedule-tabs {
    padding: 2px !important;
    gap: 2px !important;
  }
  .nav-tab-pill {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
  }
  .nav-tab-pill i {
    font-size: 0.82rem !important;
  }
  .navbar-nav-actions {
    gap: 4px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .navbar-nav-actions .btn-nav,
  .navbar-nav-actions .btn-nav-icon,
  .navbar-nav-actions #btn-desktop-share,
  .navbar-nav-actions #btn-toggle-nightmode {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }
  .navbar-nav-actions .btn-nav i {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* --- 2. HERO LUXURY SECTION (Khas Istiqlal) --- */
.hero-luxury {
  position: relative;
  background-color: #007054;
  background-image: 
    /* Cinematic Emerald Vignette: bright, rich emerald with high-contrast text */
    linear-gradient(90deg, 
      rgba(0, 85, 64, 0.96) 0%, 
      rgba(0, 96, 72, 0.90) 38%, 
      rgba(0, 112, 84, 0.74) 65%, 
      rgba(0, 112, 84, 0.38) 100%
    ),
    linear-gradient(180deg, 
      rgba(0, 85, 64, 0.45) 0%, 
      transparent 20%, 
      transparent 70%, 
      rgba(0, 70, 52, 0.85) 100%
    ),
    var(--hero-bg-url, url('../images/gallery/outdoor_hd.png'));
  background-position: right 10% center, center center, right 12% center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  border-radius: 0 0 36px 36px;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  padding: 58px 48px;
  margin-bottom: 36px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 112, 84, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.hero-luxury::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/user-pattern-gold.png');
  background-repeat: repeat;
  background-size: 160px auto;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

.hero-luxury-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(4, 164, 118, 0.15) 0%, transparent 60%),
              radial-gradient(circle at 90% 80%, rgba(241, 200, 78, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.hero-luxury-ambient-gold {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(241, 200, 78, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.hero-luxury-content {
  position: relative;
  z-index: 2;
}

.hero-tagline {
  color: var(--istiqlal-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-tagline-line {
  width: 36px;
  height: 2px;
  background: var(--istiqlal-accent);
  border-radius: 2px;
  display: inline-block;
}

.hero-luxury-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.hero-title-highlight {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800;
}

.hero-subtitle-motto {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  color: #F8FAFC;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.text-gold-accent {
  background: var(--istiqlal-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.hero-luxury-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 90%;
  margin-bottom: 0;
}

.btn-nav-gold {
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(155, 109, 31, 0.4);
}
.btn-nav-gold:hover {
  background: linear-gradient(135deg, #f1c84e 0%, #d4af37 100%) !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

/* Hijri Calendar Badges & Indicators (Kemenag RI MABIMS) */
.hero-hijri-badge-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.hero-hijri-pill,
.hero-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(4, 99, 66, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 6px 14px;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.2px;
}

.badge-kemenag-tag {
  background: rgba(212, 175, 55, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #f1c84e;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 2px;
}

.vip-card-date-hijri {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1c84e;
  display: block;
  margin-top: 0;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
  line-height: 1.35;
}

.vip-badge-tag-hijri {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f1c84e;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
}

.date-hijri-sublabel {
  font-size: 0.76rem;
  font-weight: 700;
  color: #046342;
  margin-top: 4px;
  display: block;
  line-height: 1.25;
}

[data-bs-theme="dark"] .date-hijri-sublabel {
  color: #34d399;
}

/* Modal Rincian Jadwal Khatib Avatar (Pas Foto 3 x 4 Rounded) */
.sheet-khatib-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
}

.sheet-khatib-avatar-img {
  width: 150px;
  height: 200px;
  max-width: 60vw;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  object-fit: cover;
  object-position: center top;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 28px rgba(14, 61, 47, 0.18), 0 3px 8px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 768px) {
  .sheet-khatib-avatar-img {
    width: 165px;
    height: 220px;
    border-radius: 22px;
  }
}

@media (max-height: 680px) {
  .sheet-khatib-avatar-img {
    width: 120px;
    height: 160px;
    border-radius: 16px;
  }
}

[data-bs-theme="dark"] .sheet-khatib-avatar-img,
body.night-mode .sheet-khatib-avatar-img {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  background: #112d22;
}

.btn-nav-glass {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s;
}
.btn-nav-glass:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--istiqlal-gold-light) !important;
  border-color: var(--istiqlal-gold-light) !important;
  transform: translateY(-2px);
}

/* Tombol Unduh Format PDF: Hover Merah Acrobat Reader & Ikon/Teks Putih */
.btn-hero-pdf {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-hero-pdf:hover {
  background: linear-gradient(135deg, #E5252A 0%, #B3181D 100%) !important;
  color: #FFFFFF !important;
  border-color: #E5252A !important;
  box-shadow: 0 8px 24px rgba(229, 37, 42, 0.45) !important;
  transform: translateY(-2px);
}
.btn-hero-pdf:hover i,
.btn-hero-pdf:hover .text-danger {
  color: #FFFFFF !important;
}

.istiqlal-notice-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(241, 200, 78, 0.3);
  border-radius: 16px;
  padding: 10px 16px;
  color: #ffffff;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
}

/* VIP Card Jum'at Berikutnya (Hero Kanan Khas Istiqlal - Lampiran 1) */
.hero-vip-card {
  background: linear-gradient(145deg, rgba(6, 26, 18, 0.94) 0%, rgba(3, 64, 42, 0.88) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(241, 200, 78, 0.45) !important;
  border-radius: 28px !important;
  padding: 26px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  will-change: transform;
}
.hero-vip-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--istiqlal-gold-light) !important;
  box-shadow: 0 20px 50px rgba(241, 200, 78, 0.25) !important;
}

.vip-card-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.vip-badge-tag {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vip-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(4, 164, 118, 0.35) !important;
  border: 1.5px solid rgba(4, 164, 118, 0.7) !important;
  color: var(--istiqlal-accent) !important;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--istiqlal-accent);
  box-shadow: 0 0 10px var(--istiqlal-accent);
  animation: istiqlalPulse 1.5s infinite;
}
@keyframes istiqlalPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.vip-card-date {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.25;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.vip-card-date.has-hijri {
  margin-bottom: 6px;
}

.vip-khatib-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.vip-khatib-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(155, 109, 31, 0.35);
}
.vip-khatib-avatar.has-photo {
  overflow: hidden;
  padding: 0;
}
.vip-khatib-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.vip-khatib-meta {
  min-width: 0;
}
.vip-khatib-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.75) !important;
}
.vip-khatib-name {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-arrow-cue {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(241, 200, 78, 0.16);
  border: 1px solid rgba(241, 200, 78, 0.35);
  color: #F1C84E;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font-size: 13px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.hero-vip-card:hover .vip-arrow-cue {
  background: var(--istiqlal-gold-gradient);
  color: #061a12;
  transform: scale(1.1) rotate(-10deg);
}

.vip-topic-quote {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 14px;
  padding: 0 4px;
}

.vip-capsule-bar {
  background: rgba(0, 0, 0, 0.32) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-bottom: 12px !important;
}

.vip-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 100px;
  overflow: hidden;
  margin-top: 6px;
}
.vip-progress-fill {
  height: 100%;
  background: var(--istiqlal-gold-gradient) !important;
  border-radius: 100px;
  transition: width 0.6s ease;
}

.vip-card-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--istiqlal-accent) !important;
  padding: 4px 6px 0 6px;
}

@media (max-width: 991px) {
  .hero-luxury {
    padding: 36px 24px;
    border-radius: 0 0 28px 28px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
  }
  .hero-luxury-title {
    font-size: 2rem;
  }
}

/* --- 3. IMPACT SECTION (Khas Istiqlal) --- */
.impact-section {
  margin-bottom: 40px;
}
.impact-container {
  max-width: 1240px;
  margin: 0 auto;
}

.impact-card {
  background: #ffffff;
  border: 1px solid rgba(155, 109, 31, 0.15);
  border-radius: 28px;
  padding: 28px 18px;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.03);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.impact-card:hover {
  transform: translateY(-8px);
  border-color: var(--istiqlal-gold-light);
  box-shadow: 0 20px 45px rgba(3, 64, 42, 0.1);
}

.impact-icon {
  width: 58px;
  height: 58px;
  background: var(--istiqlal-gold-gradient);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #ffffff;
  font-size: 24px;
  box-shadow: 0 8px 20px rgba(155, 109, 31, 0.3);
  transition: transform 0.3s ease;
}
.impact-card:hover .impact-icon {
  transform: scale(1.08) rotate(5deg);
}

.impact-icon.icon-emerald {
  background: var(--istiqlal-green-gradient);
  box-shadow: 0 8px 20px rgba(3, 64, 42, 0.3);
}
.impact-icon.icon-amber {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
}
.impact-icon.icon-gold {
  background: var(--istiqlal-gold-gradient);
  box-shadow: 0 8px 20px rgba(155, 109, 31, 0.3);
}

.impact-number {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.85rem;
  color: var(--istiqlal-green-dark);
  margin-bottom: 4px;
}
.impact-number.text-emerald {
  color: var(--istiqlal-green-primary) !important;
}
.impact-number.text-amber {
  color: #b45309 !important;
}
.impact-number.text-gold {
  color: var(--istiqlal-gold-dark) !important;
}

.impact-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 0;
}

/* --- 4. SECTION TITLE KHAS ISTIQLAL --- */
.section-title {
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--istiqlal-green-dark);
  font-size: 2.15rem;
  text-align: center;
  margin-bottom: 12px;
}
.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  background: var(--istiqlal-gold-gradient);
  margin: 14px auto 0;
  border-radius: 4px;
}

/* --- 5. STICKY CONTROLS BAR (Istiqlal Style) --- */
.sticky-controls-bar {
  position: sticky;
  top: 90px;
  z-index: 1010;
  background: #FFFFFF;
  border: 1px solid rgba(155, 109, 31, 0.18);
  border-radius: 26px;
  padding: 14px 22px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(3, 64, 42, 0.08);
}

.sticky-controls-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.controls-chips-container {
  display: flex;
  align-items: center;
  position: relative;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.controls-chips-wrap {
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  scrollbar-width: none;
}
.controls-chips-wrap::-webkit-scrollbar {
  display: none !important;
}

.btn-chips-scroll {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: #ffffff;
  border: 1.5px solid rgba(3, 64, 42, 0.15);
  color: var(--istiqlal-green-dark, #03402a);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.btn-chips-scroll i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  pointer-events: none;
}
.btn-chips-scroll:hover:not(:disabled) {
  background: rgba(241, 200, 78, 0.15);
  color: var(--istiqlal-gold-dark, #9b6d1f);
  border-color: var(--istiqlal-gold-light, #d4af37);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(155, 109, 31, 0.2);
}
.btn-chips-scroll:active:not(:disabled) {
  transform: scale(0.95);
}
.btn-chips-scroll:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

@media (min-width: 820px) {
  .sticky-controls-inner {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .controls-search-wrap {
    width: 340px;
    flex-shrink: 0;
  }
  .controls-chips-container {
    flex: 1;
    width: auto;
  }
}

.search-input-pill {
  width: 100%;
  height: 46px;
  border-radius: 50px;
  border: 1.5px solid rgba(3, 64, 42, 0.15);
  background: #ffffff;
  color: #181A1C;
  font-size: 13.5px;
  padding-left: 44px;
  outline: none;
  transition: all 0.25s ease;
}
.search-input-pill:focus {
  border-color: var(--istiqlal-gold-primary);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

.btn-clear-search {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #94A3B8;
  font-size: 17px;
  cursor: pointer;
  padding: 0;
}

/* Month Filter Chips (Istiqlal Style) */
.filter-pill {
  background: #ffffff;
  border: 1px solid rgba(3, 64, 42, 0.12);
  color: var(--istiqlal-green-dark);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.filter-pill:hover:not(.active) {
  background: rgba(241, 200, 78, 0.12);
  color: var(--istiqlal-gold-dark);
  border-color: var(--istiqlal-gold-light);
  transform: translateY(-1px);
}
.filter-pill.active {
  background: var(--istiqlal-green-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(3, 64, 42, 0.25);
  font-weight: 800;
}

.search-result-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--istiqlal-green-dark);
  background: rgba(4, 164, 118, 0.12);
  border: 1px solid rgba(4, 164, 118, 0.25);
  padding: 4px 14px;
  border-radius: 50px;
  margin-top: 10px;
}

/* --- 6. SCHEDULE CARDS (Unified Istiqlal Luxury Card) --- */
.public-friday-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(4, 99, 66, 0.12) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 16px rgba(4, 99, 66, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
  position: relative;
  overflow: hidden;
  will-change: transform;
  cursor: pointer;
}

/* Luxury Top Accent Line on hover & next */
.public-friday-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2.5px;
  background: linear-gradient(90deg, #046342 0%, #0D9488 50%, #F1C84E 100%);
  opacity: 0;
  transform: scaleX(0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

.public-friday-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(4, 99, 66, 0.28) !important;
  box-shadow: 0 12px 28px rgba(4, 99, 66, 0.1) !important;
}

.public-friday-card:hover::before,
.public-friday-card.is-next::before {
  opacity: 1;
  transform: scaleX(1);
}

/* --- Highlight Mewah untuk Kartu Terisi (Khutbah / Tarwih) --- */
.public-friday-card.is-filled,
.public-friday-card:has(.speaker-spotlight-box.is-filled) {
  background: linear-gradient(160deg, #FFFFFF 0%, #F2FAF5 45%, #EBF7F0 100%) !important;
  border: 1.5px solid rgba(4, 99, 66, 0.22) !important;
  box-shadow: 0 4px 18px rgba(4, 99, 66, 0.06), 0 1px 3px rgba(4, 99, 66, 0.03) !important;
}

.public-friday-card.is-filled::before,
.public-friday-card:has(.speaker-spotlight-box.is-filled)::before {
  opacity: 0.85;
  transform: scaleX(0.7);
}

.public-friday-card.is-filled:hover::before,
.public-friday-card:has(.speaker-spotlight-box.is-filled):hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.public-friday-card.is-filled:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #ECF8F1 40%, #DEF3E6 100%) !important;
  border-color: rgba(4, 99, 66, 0.38) !important;
  box-shadow: 0 12px 30px rgba(4, 99, 66, 0.12) !important;
}

/* Kartu Belum Terisi (Empty Slot) - Netral Bersih & Ringan */
.public-friday-card.is-state-open,
.public-friday-card.is-state-free,
.public-friday-card:has(.speaker-spotlight-box.is-empty) {
  background: #FFFFFF !important;
  border: 1.5px dashed rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.public-friday-card.is-state-open:hover,
.public-friday-card.is-state-free:hover,
.public-friday-card:has(.speaker-spotlight-box.is-empty):hover {
  background: #F8FAFC !important;
  border-color: rgba(4, 99, 66, 0.25) !important;
  border-style: solid !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
}

.public-friday-card.is-mine {
  border: 2px solid #046342 !important;
  box-shadow: 0 0 0 1px rgba(4, 99, 66, 0.18), 0 8px 24px rgba(4, 99, 66, 0.1) !important;
}

.public-friday-card.is-next {
  box-shadow: 0 6px 20px rgba(4, 99, 66, 0.12), inset 0 0 0 1px rgba(241, 200, 78, 0.35) !important;
  border-color: rgba(4, 99, 66, 0.25) !important;
}

.public-friday-card.is-past {
  opacity: 0.6;
  filter: grayscale(25%);
}

/* --- Row 1: Date & Status Badge (Sejajar Presisi) --- */
.public-friday-card .card-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  padding-bottom: 11px !important;
}

.public-friday-card .date-badge-box {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Date Square: 46px x 46px - exactly matching speaker avatar */
.date-square {
  background: var(--istiqlal-green-gradient, linear-gradient(135deg, #046342 0%, #02402A 100%)) !important;
  border-radius: 13px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(3, 64, 42, 0.18) !important;
  border: 1px solid rgba(241, 200, 78, 0.35) !important;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.public-friday-card:hover .date-square {
  transform: scale(1.03);
}

.date-square-day {
  color: var(--istiqlal-gold-light, #F1C84E) !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.05;
}

.date-square-month {
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.public-friday-card .date-meta {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.date-title {
  font-family: var(--font-serif, "Cinzel Decorative", serif);
  font-weight: 750;
  font-size: 15.5px;
  color: var(--istiqlal-green-dark, #046342) !important;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.25;
  margin: 0;
}

.public-friday-card .date-week-label {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 3px !important;
  font-size: 11.5px !important;
  color: #64748B !important;
  white-space: normal !important;
}

.public-friday-card .date-hijri-sublabel {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  margin-top: 2px !important;
  line-height: 1.2;
}

.public-friday-card .card-status-wrap {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.badge-next-chip {
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 2.5px 9px !important;
  border-radius: 50px !important;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center;
}

/* Status Badges */
.card-status-badge {
  font-size: 11px !important;
  font-weight: 750 !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4.5px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Sembunyikan label 'Terisi', 'Belum terisi', 'Milik Saya', serta status badge kosong / d-none agar tidak menyisakan kapsul putih */
.card-status-badge.status-free,
.card-status-badge.status-open,
.card-status-badge.status-mine,
.card-status-badge.d-none,
.card-status-badge:empty,
#detail-hero-status.d-none,
#detail-hero-status:empty,
#tarwih-detail-status-badge.d-none,
#tarwih-detail-status-badge:empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

.card-status-badge.status-blocked {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1px solid #FCD34D !important;
  font-weight: 700 !important;
}

.card-status-badge.status-past {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
}

/* --- Row 2: Speaker Spotlight Section (Menyatu dalam Satu Kesatuan & Sejajar Presisi) --- */
.public-friday-card .card-bottom-row {
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 11px !important;
  border-top: 1px solid rgba(4, 99, 66, 0.08) !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Remove awkward nested box - make it part of unified card canvas */
.speaker-spotlight-box {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 1 auto;
}

/* Avatar Badge: 46px x 46px - EXACTLY matches .date-square geometry & position */
.speaker-avatar-wrap {
  flex-shrink: 0;
  width: 46px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speaker-avatar-badge {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 13px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--istiqlal-green-dark, #046342) 0%, #03452E 100%) !important;
  color: #F1C84E !important;
  font-size: 19px;
  box-shadow: 0 3px 10px rgba(4, 99, 66, 0.16);
  border: 1px solid rgba(241, 200, 78, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.public-friday-card:hover .speaker-avatar-badge {
  transform: scale(1.04);
  box-shadow: 0 5px 14px rgba(4, 99, 66, 0.22);
}

.speaker-avatar-badge.has-photo {
  overflow: hidden;
  padding: 0;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(4, 99, 66, 0.18);
}

.speaker-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.speaker-avatar-badge.is-blocked-icon {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.18);
  border: 1px solid rgba(254, 243, 199, 0.5);
}

.speaker-avatar-badge.is-empty-icon {
  background: #F8FAFC !important;
  color: #94A3B8 !important;
  box-shadow: none;
  border: 1.5px dashed #CBD5E1;
}

/* Speaker Content Column: Starts at identical X-offset as .date-meta */
.card-speaker-info {
  flex: 1 1 auto;
  min-width: 0;
}

.speaker-role-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0D9488 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  line-height: 1;
}

.public-friday-card .card-speaker-name {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: var(--istiqlal-green-dark, #046342) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px;
  display: block !important;
  white-space: normal !important;
  word-break: break-word;
  transition: color 0.18s ease;
  margin: 0;
}

.public-friday-card:hover .card-speaker-name {
  color: #02402A !important;
}

.public-friday-card .card-speaker-topic {
  font-size: 11.5px !important;
  color: #64748B !important;
  font-style: italic !important;
  margin-top: 3px !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Action Button: Aligned to exact same right margin as status badge */
.btn-card-arrow-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: #F8FAFC !important;
  color: var(--istiqlal-green-dark, #046342) !important;
  border: 1px solid rgba(4, 99, 66, 0.12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  font-size: 14px !important;
}

.public-friday-card:hover .btn-card-arrow-circle,
.public-friday-card.is-next .btn-card-arrow-circle {
  background: var(--istiqlal-gold-gradient, linear-gradient(135deg, #F1C84E 0%, #D8A524 100%)) !important;
  color: #061a12 !important;
  border-color: transparent !important;
  transform: scale(1.08) rotate(-10deg);
  box-shadow: 0 4px 12px rgba(155, 109, 31, 0.3) !important;
}

/* --- 6. UNIFIED MONTH SECTION CARD (Menyatu & Berwarna Khas Istiqlal) --- */
.month-section {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(3, 64, 42, 0.12) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 32px rgba(3, 64, 42, 0.05) !important;
  margin-bottom: 34px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  scroll-margin-top: 140px;
  content-visibility: auto;
  contain-intrinsic-size: 0 450px;
}
.month-section:hover {
  box-shadow: 0 16px 45px rgba(3, 64, 42, 0.09) !important;
}

/* Header Card Bulan Berwarna Hijau Khas Istiqlal */
.month-section-header {
  background: linear-gradient(135deg, #03402a 0%, #046342 60%, #047857 100%) !important;
  color: #FFFFFF !important;
  padding: 18px 28px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2.5px solid rgba(241, 200, 78, 0.4) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: static !important;
}

.month-title-wrap {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.45rem;
  color: #FFFFFF !important;
  margin: 0;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
}

.badge-month-current {
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  box-shadow: 0 3px 10px rgba(155, 109, 31, 0.35);
}

/* Bagian Body yang Menyatu di Bawah Header */
.month-section-body {
  padding: 24px;
  background: #FBFDFB;
}

/* Bulan Berjalan (Current Month): Border Emas & Header Lebih Bersinar */
.month-section.current-month {
  border: 2px solid rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 14px 45px rgba(155, 109, 31, 0.15) !important;
}
.month-section.current-month .month-section-header {
  background: linear-gradient(135deg, #061a12 0%, #03402a 50%, #046342 100%) !important;
  border-bottom: 3px solid var(--istiqlal-gold-light) !important;
}

/* Bulan yang Sudah Lewat */
.month-section.is-all-past {
  opacity: 0.85;
}
.month-section details summary.month-section-header {
  cursor: pointer;
  user-select: none;
}
.month-section.is-all-past .month-section-header {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}

/* Responsif Mobile (<680px) */
@media (max-width: 679px) {
  .month-section {
    border-radius: 20px !important;
    margin-bottom: 24px !important;
  }
  .month-section-header {
    padding: 14px 18px !important;
  }
  .month-title-wrap {
    font-size: 1.2rem;
  }
  .month-section-body {
    padding: 16px;
  }
}

/* --- 7. FOOTER LUXURY KHAS ISTIQLAL (Menempel Penuh ke Dasar Layar / Edge-to-Edge) --- */
footer.istiqlal-footer {
  width: 100% !important;
  background: linear-gradient(180deg, #007054 0%, #005a44 45%, #003e2e 100%) !important;
  color: #ffffff;
  padding: 44px 0 24px;
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 0 0;
  margin-top: 36px;
  margin-bottom: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 -14px 45px rgba(0, 112, 84, 0.22);
}
footer.istiqlal-footer::before {
  content: '';
  position: absolute;
  top: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
footer.istiqlal-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/user-pattern-gold.png');
  background-repeat: repeat;
  background-size: 160px auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}
footer.istiqlal-footer > .container {
  position: relative;
  z-index: 2;
}

.footer-logo-text {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--istiqlal-gold-light);
  text-shadow: 0 0 20px rgba(184, 134, 11, 0.3);
  font-size: 1.28rem;
  margin-bottom: 2px;
}

.footer-gold-accent {
  color: var(--istiqlal-gold-light);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  margin: 20px 0;
}

/* --- 8. FLUID RESPONSIVE SHELL (No Mockup Frame Border) --- */
.native-app-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background-color: transparent !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
}

.public-page-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

/* Kontainer Konten Utama (Hero, Stats, Kalender) Terpusat 1240px */
.istiqlal-content-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Detail Modal Responsif (Dialog Tengah pada Desktop, Bottom Sheet pada Mobile) */
.detail-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 26, 18, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.detail-panel-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.detail-panel-container {
  position: fixed !important;
  z-index: 1060 !important;
  background: #FFFFFF !important;
  box-shadow: 0 25px 80px rgba(3, 64, 42, 0.35) !important;
  border: 1.5px solid rgba(241, 200, 78, 0.4) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease !important;
}

@media (min-width: 768px) {
  .detail-panel-container {
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -46%) scale(0.96) !important;
    width: 92% !important;
    max-width: 520px !important;
    border-radius: 28px !important;
    opacity: 0;
    pointer-events: none;
  }
  .detail-panel-container.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .detail-panel-container .sheet-handle-bar {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .detail-panel-container {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 28px 28px 0 0 !important;
    transform: translateY(100%) !important;
    opacity: 0;
    pointer-events: none;
    max-height: 90vh;
    overflow-y: auto;
  }
  .detail-panel-container.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* Tombol Aksi di Modal */
.btn-cta-black {
  background: var(--istiqlal-green-gradient) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(3, 64, 42, 0.25) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}
.btn-cta-black:hover {
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(155, 109, 31, 0.4) !important;
}

/* Tombol Aksi Simpan di Modal (Ustadz Mandiri - Premium Istiqlal Green & Gold) */
.btn-save-topic-action {
  width: 100% !important;
  height: 52px !important;
  background: var(--istiqlal-green-gradient) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(3, 64, 42, 0.28) !important;
  border: 1.5px solid rgba(241, 200, 78, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-save-topic-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 0.6s ease;
}
.btn-save-topic-action:hover::before {
  left: 100%;
}
.btn-save-topic-action:hover {
  background: var(--istiqlal-gold-gradient) !important;
  color: #061a12 !important;
  border-color: rgba(241, 200, 78, 0.85) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(155, 109, 31, 0.4) !important;
}
.btn-save-topic-action:hover i {
  color: #061a12 !important;
  transform: scale(1.15);
}
.btn-save-topic-action:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(3, 64, 42, 0.2) !important;
}
.btn-save-topic-action i {
  font-size: 18px !important;
  color: #f1c84e !important;
  transition: all 0.2s ease !important;
}
.btn-save-topic-action:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-save-topic-action.d-none {
  display: none !important;
}

/* --- 9. NATIVE APK LOOK MOBILE REFINEMENTS (<768px) --- */
@media (max-width: 767px) {
  .istiqlal-content-container {
    padding: 0 14px !important;
  }

  /* Hero Section (Modern Native App Dashboard Style) */
  .hero-luxury {
    padding: 20px 16px !important;
    border-radius: 0 0 24px 24px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    margin-bottom: 16px !important;
    background-image: 
      linear-gradient(180deg, 
        rgba(4, 18, 12, 0.95) 0%, 
        rgba(4, 18, 12, 0.90) 50%, 
        rgba(4, 18, 12, 0.97) 100%
      ),
      var(--hero-bg-url, url('../images/gallery/outdoor_hd.png')) !important;
    background-position: center top !important;
    box-shadow: 0 12px 36px rgba(3, 64, 42, 0.22), 0 0 0 1px rgba(229, 184, 105, 0.16) !important;
  }
  .hero-tagline {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
  }
  .hero-tagline-line {
    width: 24px !important;
  }
  .hero-luxury-title {
    font-size: 1.6rem !important;
    line-height: 1.22 !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  .hero-subtitle-motto {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  .hero-hijri-badge-wrap {
    margin-bottom: 12px !important;
  }
  .hero-hijri-pill,
  .hero-date-pill {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(241, 200, 78, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .hero-luxury-content .d-flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .btn-nav-gold, .btn-hero-pdf, .btn-nav-glass {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    min-height: 40px !important;
  }

  /* Hero VIP Card (Card Utama Versi Mobile Smartphone Modern & Native) */
  .hero-vip-card {
    background: linear-gradient(150deg, #061a12 0%, #033a25 55%, #044d32 100%) !important;
    border: 1px solid rgba(241, 200, 78, 0.35) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    border-radius: 22px !important;
    padding: 16px 14px !important;
    margin-top: 14px !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
  }
  .hero-vip-card:active {
    transform: scale(0.985) !important;
  }
  .vip-card-badge-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }
  .vip-badge-tag {
    font-size: 11px !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    font-weight: 750 !important;
    letter-spacing: 0.3px !important;
    color: #ffffff !important;
  }
  .vip-pulse-badge {
    font-size: 11px !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    background: rgba(4, 164, 118, 0.25) !important;
    border: 1px solid rgba(4, 164, 118, 0.6) !important;
    color: #4ade80 !important;
    font-weight: 800 !important;
  }
  .vip-card-date {
    font-family: var(--font-serif) !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    color: #ffffff !important;
  }
  .vip-card-date.has-hijri {
    margin-bottom: 2px !important;
  }
  .vip-card-date-hijri {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #F1C84E !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .vip-khatib-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(241, 200, 78, 0.2) !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .vip-khatib-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #046342 0%, #03402a 100%) !important;
    border: 1.5px solid rgba(241, 200, 78, 0.35) !important;
    color: #F1C84E !important;
    font-size: 18px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .vip-khatib-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .vip-khatib-label {
    font-size: 10.5px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #F1C84E !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  .vip-khatib-name {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .vip-arrow-cue {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: rgba(241, 200, 78, 0.16) !important;
    border: 1px solid rgba(241, 200, 78, 0.35) !important;
    color: #F1C84E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .vip-topic-quote {
    background: rgba(0, 0, 0, 0.25) !important;
    border-left: 3px solid #F1C84E !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: #f1f5f9 !important;
    margin-bottom: 12px !important;
  }
  .vip-capsule-bar {
    margin-top: 4px !important;
  }
  .vip-progress-track {
    height: 7px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    margin-top: 5px !important;
  }
  .vip-progress-fill {
    background: linear-gradient(90deg, #F1C84E 0%, #E5B842 50%, #10B981 100%) !important;
    border-radius: 100px !important;
    height: 100% !important;
  }

  /* Impact Cards (2x2 Grid) */
  .impact-section {
    margin-bottom: 20px !important;
  }
  .impact-card {
    padding: 16px 10px !important;
    border-radius: 20px !important;
  }
  .impact-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  .impact-number {
    font-size: 1.5rem !important;
    margin-bottom: 2px !important;
  }
  .impact-label {
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
  }

  /* Sticky Controls Bar & Touch Horizontal Chips */
  .sticky-controls-bar {
    top: 60px !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
  }
  .search-input-pill {
    height: 42px !important;
    font-size: 13px !important;
  }
  .filter-pill {
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .btn-chips-scroll,
  .speaker-controls-bar .btn-chips-scroll {
    display: none !important;
  }
  .controls-chips-container {
    width: 100% !important;
    gap: 0 !important;
  }
  .controls-chips-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 3px 0 !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .controls-chips-wrap::-webkit-scrollbar {
    display: none !important;
  }

  /* Month Section Card */
  .month-section {
    border-radius: 22px !important;
    margin-bottom: 20px !important;
  }
  .month-section-header {
    padding: 14px 18px !important;
  }
  .month-title-wrap {
    font-size: 1.25rem !important;
  }
  .month-section-body {
    padding: 12px !important;
  }

  /* Friday Cards Inside Month */
  .public-friday-card {
    padding: 13px 15px !important;
    border-radius: 18px !important;
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .public-friday-card .card-top-row {
    gap: 12px !important;
    padding-bottom: 9px !important;
  }
  .public-friday-card .date-badge-box {
    gap: 12px !important;
  }
  .public-friday-card .date-square {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
  }
  .public-friday-card .date-square-day {
    font-size: 18px !important;
  }
  .public-friday-card .date-square-month {
    font-size: 8.5px !important;
  }
  .public-friday-card .date-title {
    font-size: 14px !important;
  }
  .public-friday-card .card-status-badge {
    font-size: 10.5px !important;
    padding: 3.5px 8.5px !important;
  }
  .public-friday-card .card-bottom-row {
    margin-top: 0 !important;
    padding-top: 9px !important;
    border-top: 1px solid rgba(4, 99, 66, 0.08) !important;
  }
  .speaker-spotlight-box {
    padding: 0 !important;
    gap: 12px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .speaker-avatar-wrap {
    width: 44px !important;
  }
  .speaker-avatar-badge {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
  .public-friday-card .card-speaker-name {
    font-size: 14.5px !important;
    font-weight: 800 !important;
  }
  .public-friday-card .card-speaker-topic {
    font-size: 11px !important;
  }
  .public-friday-card .btn-card-arrow-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 13px !important;
  }

  /* Footer (Versi Mobile Modern Native App Card) */
  footer.istiqlal-footer {
    background: transparent !important;
    border: none !important;
    padding: 0 14px calc(94px + env(safe-area-inset-bottom, 0px)) 14px !important;
    margin-top: 14px !important;
  }

  .native-footer-card {
    background: linear-gradient(145deg, rgba(0, 112, 84, 0.96) 0%, rgba(0, 85, 64, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 28px !important;
    padding: 22px 18px 20px 18px !important;
    box-shadow: 0 16px 44px rgba(0, 80, 60, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  [data-bs-theme="dark"] .native-footer-card,
  .night-mode .native-footer-card {
    background: linear-gradient(145deg, rgba(0, 95, 72, 0.98) 0%, rgba(0, 65, 48, 1) 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
  }

  .footer-mosque-emblem {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(241, 200, 78, 0.18) !important;
    border: 1px solid rgba(241, 200, 78, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  .footer-logo-text {
    font-size: 1.25rem !important;
    font-weight: 850 !important;
    color: #FFFFFF !important;
    font-family: var(--font-serif) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0 !important;
  }

  .badge-portal-tag {
    font-size: 9.5px !important;
    font-weight: 750 !important;
    color: #F1C84E !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
  }

  .footer-address-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 50px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .footer-social-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }

  .footer-social-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 50px !important;
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
    transition: transform 0.18s ease !important;
  }

  .footer-social-btn:active {
    transform: scale(0.95) !important;
  }

  .footer-contact-card {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 18px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 6px 18px rgba(0, 60, 45, 0.25) !important;
    width: 100% !important;
    max-width: 320px !important;
    text-decoration: none !important;
    transition: transform 0.18s ease !important;
  }

  .footer-contact-card:active {
    transform: scale(0.97) !important;
  }

  .footer-wa-icon-box {
    background: #25D366 !important;
    color: #FFFFFF !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4) !important;
    flex-shrink: 0 !important;
  }

  .footer-sub-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #A7F3D0 !important;
    line-height: 1.1 !important;
  }

  .footer-wa-number {
    font-size: 14.5px !important;
    font-weight: 850 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.5px !important;
    line-height: 1.25 !important;
  }

  .footer-map-card {
    background: rgba(0, 48, 36, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 50, 38, 0.25) !important;
  }

  .footer-map-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  .footer-map-btn {
    font-size: 11px !important;
    font-weight: 750 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #F1C84E !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-map-embed {
    height: 140px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-copyright-text {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }

  .footer-back-to-top {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #F1C84E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: transform 0.18s ease !important;
  }

  .footer-back-to-top:active {
    transform: scale(0.92) !important;
  }
}

/* --- FOOTER WIDGETS (TAKMIN WA & GOOGLE MAPS) --- */
.footer-desc {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
@media (min-width: 992px) {
  .footer-desc {
    margin-left: 0;
    margin-right: 0;
  }
}

.footer-contact-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(241, 200, 78, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 100%;
  padding: 9px 18px;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.footer-contact-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(37, 211, 102, 0.5);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.22);
  transform: translateY(-2px);
}
.footer-wa-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45);
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.footer-contact-card:hover .footer-wa-icon-box {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.65);
}
.footer-sub-label {
  font-size: 0.72rem;
}
.footer-wa-number {
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer-contact-card:hover .footer-wa-number {
  color: #25D366 !important;
}

.footer-map-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px;
}
.footer-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.footer-map-btn {
  font-size: 0.74rem;
  padding: 4px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer-map-embed {
  height: 165px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-map-embed iframe {
  border: 0;
}
.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none !important;
  border-radius: 50%;
  transition: color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.footer-back-to-top:hover,
.footer-back-to-top:focus {
  color: var(--istiqlal-gold-light, #F1C84E) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* Social Media Buttons in Footer */
.footer-social-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 4px;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 34px;
}
.footer-social-btn i {
  font-size: 1.1rem;
  transition: transform 0.25s ease;
}
.footer-social-fb:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.45);
  transform: translateY(-2px);
}
.footer-social-fb:hover i {
  transform: scale(1.15);
}
.footer-social-yt:hover {
  background: #FF0000;
  border-color: #FF0000;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.45);
  transform: translateY(-2px);
}
.footer-social-yt:hover i {
  transform: scale(1.15);
}
.footer-social-ig:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: #dc2743;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(220, 39, 67, 0.45);
  transform: translateY(-2px);
}
.footer-social-ig:hover i {
  transform: scale(1.15);
}
.footer-social-tiktok:hover {
  background: #000000;
  border-color: #00f2fe;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.35);
  transform: translateY(-2px);
}
.footer-social-tiktok:hover i {
  transform: scale(1.15);
}
.footer-social-tw:hover {
  background: #111111;
  border-color: #333333;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.footer-social-tw:hover i {
  transform: scale(1.15);
}

.navbar-logo-img {
  max-width: 52px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block;
}

@media (max-width: 767px) {
  .navbar-logo-img {
    max-width: 40px;
    max-height: 36px;
  }
}

/* ==========================================================================
   LIGHTBOX GALERI FOTO (LIGHTSHOT / LUXURY LIGHTBOX)
   ========================================================================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
  display: flex !important;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 8, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
}

/* Lightbox Header */
.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(10, 24, 17, 0.7);
  border-bottom: 1px solid rgba(229, 184, 105, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.lightbox-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F8FAFC;
}

.lightbox-counter {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #E5B869;
  background: rgba(229, 184, 105, 0.15);
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(229, 184, 105, 0.35);
  letter-spacing: 0.5px;
}

.lightbox-divider {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
}

.lightbox-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  max-width: 50vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lightbox-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #F8FAFC;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.lightbox-tool-btn:hover {
  background: rgba(229, 184, 105, 0.22);
  border-color: #E5B869;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.lightbox-tool-btn.lightbox-btn-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #EF4444;
}

/* Lightbox Stage */
.lightbox-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px 20px;
}

.lightbox-viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 70vh;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-viewport.is-zoomed {
  max-width: none;
  max-height: none;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(229, 184, 105, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  cursor: zoom-in;
}

.lightbox-viewport.is-zoomed .lightbox-img {
  max-width: 96vw;
  max-height: 86vh;
  transform: scale(1.35);
  cursor: zoom-out;
}

.lightbox-spinner {
  position: absolute;
  z-index: 5;
}

/* Navigation Arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(8, 20, 14, 0.65);
  border: 1px solid rgba(229, 184, 105, 0.35);
  color: #E5B869;
  font-size: 1.45rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-arrow:hover {
  background: #E5B869;
  color: #061A12;
  border-color: #E5B869;
  box-shadow: 0 0 24px rgba(229, 184, 105, 0.5);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-arrow-prev {
  left: 24px;
}

.lightbox-arrow-next {
  right: 24px;
}

/* Lightbox Footer */
.lightbox-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 18px;
  background: rgba(10, 24, 17, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.lightbox-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.lightbox-thumbnails-wrap {
  overflow-x: auto;
  max-width: 100%;
  padding: 4px 6px;
  -webkit-overflow-scrolling: touch;
}

.lightbox-thumbnails {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.lightbox-thumb-item {
  width: 76px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.45;
  cursor: pointer;
  transition: all 0.22s ease;
  flex-shrink: 0;
  background: #000;
}

.lightbox-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-thumb-item:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.lightbox-thumb-item.active {
  opacity: 1;
  border-color: #E5B869;
  box-shadow: 0 0 16px rgba(229, 184, 105, 0.65);
  transform: translateY(-2px) scale(1.05);
}

/* Mobile Responsive Lightbox */
@media (max-width: 768px) {
  .lightbox-header {
    padding: 10px 16px;
  }
  .lightbox-title {
    max-width: 38vw;
    font-size: 0.92rem;
  }
  .lightbox-tool-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .lightbox-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .lightbox-arrow-prev {
    left: 10px;
  }
  .lightbox-arrow-next {
    right: 10px;
  }
  .lightbox-viewport {
    max-width: 96vw;
    max-height: 62vh;
  }
  .lightbox-img {
    max-width: 96vw;
    max-height: 62vh;
  }
  .lightbox-thumb-item {
    width: 58px;
    height: 42px;
  }
}

/* ============================================================
 * 16. NIGHT MODE / DARK THEME (Khas Istiqlal Luxury Obsidian)
 * ============================================================ */
html[data-bs-theme="dark"],
body.night-mode,
html.night-mode {
  color-scheme: dark;
}

html[data-bs-theme="dark"] body.istiqlal-theme,
body.night-mode.istiqlal-theme,
html.night-mode body.istiqlal-theme {
  background-color: #04120a !important;
  color: #E2E8F0 !important;
}

/* Navbar in Night Mode */
html[data-bs-theme="dark"] .navbar-glass,
body.night-mode .navbar-glass {
  background: rgba(6, 22, 16, 0.92) !important;
  border-color: rgba(241, 200, 78, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

html[data-bs-theme="dark"] .navbar-mosque-name,
body.night-mode .navbar-mosque-name {
  color: #F8FAFC !important;
}

html[data-bs-theme="dark"] .navbar-brand-logo i,
body.night-mode .navbar-brand-logo i {
  color: var(--istiqlal-gold-light, #F1C84E) !important;
}

@media (max-width: 767px) {
  html[data-bs-theme="dark"] .navbar-container,
  body.night-mode .navbar-container {
    background: rgba(4, 18, 12, 0.95) !important;
  }
}

/* Nav Outline Buttons (Night Mode Button & Share Button) */
html[data-bs-theme="dark"] .btn-nav-outline,
body.night-mode .btn-nav-outline {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(241, 200, 78, 0.3) !important;
  color: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
html[data-bs-theme="dark"] .btn-nav-outline:hover,
body.night-mode .btn-nav-outline:hover {
  background: rgba(241, 200, 78, 0.2) !important;
  border-color: var(--istiqlal-gold-light, #f1c84e) !important;
  color: #F1C84E !important;
}

/* Impact Cards in Night Mode */
html[data-bs-theme="dark"] .impact-card,
body.night-mode .impact-card {
  background: rgba(8, 28, 20, 0.88) !important;
  border-color: rgba(241, 200, 78, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
html[data-bs-theme="dark"] .impact-card:hover,
body.night-mode .impact-card:hover {
  border-color: var(--istiqlal-gold-light, #f1c84e) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
html[data-bs-theme="dark"] .impact-number,
body.night-mode .impact-number {
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .impact-label,
body.night-mode .impact-label {
  color: #94A3B8 !important;
}

/* Section Title in Night Mode */
html[data-bs-theme="dark"] .section-title,
body.night-mode .section-title {
  color: #F8FAFC !important;
}

/* Sticky Controls Bar in Night Mode */
html[data-bs-theme="dark"] .sticky-controls-bar,
body.night-mode .sticky-controls-bar {
  background: rgba(6, 22, 16, 0.94) !important;
  border-color: rgba(241, 200, 78, 0.25) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Search Input Pill in Night Mode */
html[data-bs-theme="dark"] .search-input-pill,
body.night-mode .search-input-pill {
  background: rgba(4, 16, 11, 0.9) !important;
  border-color: rgba(241, 200, 78, 0.25) !important;
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .search-input-pill:focus,
body.night-mode .search-input-pill:focus {
  border-color: var(--istiqlal-gold-primary, #d4af37) !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25) !important;
}
html[data-bs-theme="dark"] .search-input-pill::placeholder,
body.night-mode .search-input-pill::placeholder {
  color: rgba(226, 232, 240, 0.5) !important;
}

/* Filter Chips in Night Mode */
html[data-bs-theme="dark"] .filter-pill,
body.night-mode .filter-pill {
  background: rgba(4, 16, 11, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
}
html[data-bs-theme="dark"] .filter-pill:hover:not(.active),
body.night-mode .filter-pill:hover:not(.active) {
  background: rgba(241, 200, 78, 0.18) !important;
  border-color: var(--istiqlal-gold-light, #f1c84e) !important;
  color: var(--istiqlal-gold-light, #f1c84e) !important;
}
html[data-bs-theme="dark"] .filter-pill.active,
body.night-mode .filter-pill.active {
  background: var(--istiqlal-green-gradient) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(4, 164, 118, 0.35) !important;
}

/* Chips Scroll Buttons in Night Mode */
html[data-bs-theme="dark"] .btn-chips-scroll,
body.night-mode .btn-chips-scroll {
  background: rgba(4, 16, 11, 0.95) !important;
  border-color: rgba(241, 200, 78, 0.3) !important;
  color: #F1C84E !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
html[data-bs-theme="dark"] .btn-chips-scroll:hover:not(:disabled),
body.night-mode .btn-chips-scroll:hover:not(:disabled) {
  background: rgba(241, 200, 78, 0.25) !important;
  border-color: var(--istiqlal-gold-light, #f1c84e) !important;
  color: #FFFFFF !important;
}
html[data-bs-theme="dark"] .btn-chips-scroll:disabled,
body.night-mode .btn-chips-scroll:disabled {
  opacity: 0.25 !important;
}

/* Month Section Container & Body in Night Mode */
html[data-bs-theme="dark"] .month-section,
body.night-mode .month-section {
  background: rgba(7, 24, 17, 0.95) !important;
  border-color: rgba(241, 200, 78, 0.22) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
}
html[data-bs-theme="dark"] .month-section-body,
body.night-mode .month-section-body {
  background: transparent !important;
}
html[data-bs-theme="dark"] .month-past-details,
body.night-mode .month-past-details {
  background: transparent !important;
}
html[data-bs-theme="dark"] .month-section:hover,
body.night-mode .month-section:hover {
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(241, 200, 78, 0.35) !important;
}

/* Public Friday Card in Night Mode */
html[data-bs-theme="dark"] .public-friday-card,
body.night-mode .public-friday-card {
  background: rgba(11, 33, 24, 0.9) !important;
  border-color: rgba(241, 200, 78, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html[data-bs-theme="dark"] .public-friday-card.is-filled,
body.night-mode .public-friday-card.is-filled,
html[data-bs-theme="dark"] .public-friday-card:has(.speaker-spotlight-box.is-filled),
body.night-mode .public-friday-card:has(.speaker-spotlight-box.is-filled) {
  background: linear-gradient(160deg, rgba(14, 40, 30, 0.95) 0%, rgba(10, 30, 22, 0.98) 100%) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

html[data-bs-theme="dark"] .public-friday-card.is-state-open,
body.night-mode .public-friday-card.is-state-open,
html[data-bs-theme="dark"] .public-friday-card.is-state-free,
body.night-mode .public-friday-card.is-state-free {
  background: rgba(11, 33, 24, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-bs-theme="dark"] .public-friday-card:hover,
body.night-mode .public-friday-card:hover {
  background: rgba(14, 40, 30, 0.95) !important;
  border-color: rgba(241, 200, 78, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

html[data-bs-theme="dark"] .public-friday-card .card-bottom-row,
body.night-mode .public-friday-card .card-bottom-row {
  border-top-color: rgba(241, 200, 78, 0.12) !important;
}

html[data-bs-theme="dark"] .date-title,
body.night-mode .date-title {
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .public-friday-card .date-week-label,
body.night-mode .public-friday-card .date-week-label,
html[data-bs-theme="dark"] .public-friday-card .date-hijri-sublabel,
body.night-mode .public-friday-card .date-hijri-sublabel {
  color: #94A3B8 !important;
}

/* Speaker Spotlight Box in Night Mode - Seamless Unified Canvas */
html[data-bs-theme="dark"] .speaker-spotlight-box,
body.night-mode .speaker-spotlight-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .public-friday-card .card-speaker-name,
body.night-mode .public-friday-card .card-speaker-name {
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .public-friday-card:hover .card-speaker-name,
body.night-mode .public-friday-card:hover .card-speaker-name {
  color: #F1C84E !important;
}
html[data-bs-theme="dark"] .public-friday-card .card-speaker-topic,
body.night-mode .public-friday-card .card-speaker-topic {
  color: #94A3B8 !important;
}
html[data-bs-theme="dark"] .speaker-role-label,
body.night-mode .speaker-role-label {
  color: #F1C84E !important;
}

/* Arrow Circle Button in Night Mode */
html[data-bs-theme="dark"] .btn-card-arrow-circle,
body.night-mode .btn-card-arrow-circle {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F1C84E !important;
  border-color: rgba(241, 200, 78, 0.3) !important;
}

/* Detail Modal Sheet in Night Mode */
html[data-bs-theme="dark"] .detail-panel-container,
body.night-mode .detail-panel-container {
  background: #061d13 !important;
  border-color: rgba(241, 200, 78, 0.3) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
}
html[data-bs-theme="dark"] .detail-panel-header,
body.night-mode .detail-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-bs-theme="dark"] #detail-sheet-title,
body.night-mode #detail-sheet-title {
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .btn-round-close,
body.night-mode .btn-round-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .detail-hero-card,
body.night-mode .detail-hero-card {
  background: rgba(10, 34, 25, 0.95) !important;
  border-color: rgba(241, 200, 78, 0.25) !important;
}
html[data-bs-theme="dark"] .hero-capsule-bar,
body.night-mode .hero-capsule-bar {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-bs-theme="dark"] .hero-capsule-bar span,
body.night-mode .hero-capsule-bar span {
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] .hero-date-large,
body.night-mode .hero-date-large {
  color: #F1C84E !important;
}
html[data-bs-theme="dark"] #sheet-speaker-text,
body.night-mode #sheet-speaker-text {
  color: #F8FAFC !important;
}
html[data-bs-theme="dark"] #sheet-topic-text,
body.night-mode #sheet-topic-text {
  color: #94A3B8 !important;
}
html[data-bs-theme="dark"] .btn-copy-action,
body.night-mode .btn-copy-action {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-bs-theme="dark"] .prayer-loc-btn,
body.night-mode .prayer-loc-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-bs-theme="dark"] .prayer-loc-btn:hover,
body.night-mode .prayer-loc-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #F1C84E !important;
  border-color: #F1C84E !important;
}

/* Komponen Portal Khatib dalam Mode Malam / Dark Theme */
html[data-bs-theme="dark"] .speaker-navbar-glass,
body.night-mode .speaker-navbar-glass {
  background: rgba(6, 22, 16, 0.94) !important;
  border-color: rgba(241, 200, 78, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

html[data-bs-theme="dark"] .top-nav-tab,
body.night-mode .top-nav-tab {
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-bs-theme="dark"] .top-nav-tab.active,
body.night-mode .top-nav-tab.active {
  background: rgba(241, 200, 78, 0.18) !important;
  color: #F1C84E !important;
  border-color: rgba(241, 200, 78, 0.35) !important;
}

html[data-bs-theme="dark"] .speaker-controls-bar,
body.night-mode .speaker-controls-bar {
  background: rgba(6, 22, 16, 0.94) !important;
  border-color: rgba(241, 200, 78, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

html[data-bs-theme="dark"] .friday-card,
body.night-mode .friday-card {
  background: rgba(8, 28, 20, 0.88) !important;
  border-color: rgba(241, 200, 78, 0.22) !important;
  color: #F8FAFC !important;
}

html[data-bs-theme="dark"] .friday-card.is-mine,
body.night-mode .friday-card.is-mine {
  box-shadow: 0 0 0 2px #047857, 0 10px 28px rgba(4, 120, 87, 0.35) !important;
}

html[data-bs-theme="dark"] .my-schedules-summary-card,
body.night-mode .my-schedules-summary-card {
  background: rgba(8, 28, 20, 0.92) !important;
  border-color: rgba(241, 200, 78, 0.22) !important;
  color: #F8FAFC !important;
}

html[data-bs-theme="dark"] .my-schedule-card-row,
body.night-mode .my-schedule-card-row {
  background: rgba(8, 28, 20, 0.88) !important;
  border-color: rgba(241, 200, 78, 0.22) !important;
  color: #F8FAFC !important;
}

html[data-bs-theme="dark"] .my-card-date-title,
body.night-mode .my-card-date-title {
  color: #F8FAFC !important;
}

html[data-bs-theme="dark"] .my-timeline-title,
body.night-mode .my-timeline-title {
  color: #F8FAFC !important;
}

/* ==========================================================================
 * 16. DESKTOP & RESPONSIVE PORTAL STYLING (Sesuai Style Halaman Umum /jadwal)
 * ========================================================================== */

/* Body & Kontainer Utama Portal */
.speaker-portal-body {
  font-family: var(--font-sans, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  background-color: var(--istiqlal-bg-soft, #fcfdfc);
  color: #1e293b;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.speaker-page-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  min-height: 100vh;
}

/* Navbar Glass Speaker */
.speaker-navbar-glass {
  width: 100%;
  max-width: 1240px;
  border-radius: 60px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(155, 109, 31, 0.2);
  box-shadow: 0 6px 24px rgba(3, 64, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.navbar-badge-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #047857;
  background: rgba(4, 120, 87, 0.1);
  padding: 2px 10px;
  border-radius: 50px;
  margin-top: 2px;
  display: inline-block;
  width: fit-content;
}

/* Desktop Navigation Tabs */
.desktop-nav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(4, 99, 66, 0.05);
  padding: 4px 6px;
  border-radius: 50px;
  border: 1px solid rgba(4, 99, 66, 0.08);
}

.top-nav-tab {
  border: none;
  background: transparent;
  color: #475569;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 50px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}

.top-nav-tab:hover {
  color: #03402a;
  background: rgba(255, 255, 255, 0.7);
}

.top-nav-tab.active {
  background: var(--istiqlal-green-gradient, linear-gradient(135deg, #03402a 0%, #04a476 100%));
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(3, 64, 42, 0.25);
}

/* Sync Indicator Pill */
.sync-indicator-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  background: rgba(4, 120, 87, 0.1);
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(4, 120, 87, 0.18);
  white-space: nowrap;
}

.sync-indicator-pill.offline {
  background: rgba(179, 38, 30, 0.12);
  color: #b3261e;
  border-color: rgba(179, 38, 30, 0.2);
}

.sync-indicator-pill.retrying {
  background: rgba(229, 142, 0, 0.12);
  color: #b45309;
  border-color: rgba(229, 142, 0, 0.2);
}

/* Sticky Controls Bar Speaker */
.speaker-controls-bar {
  position: sticky;
  top: 86px;
  z-index: 1010;
  background: #ffffff;
  border: 1px solid rgba(155, 109, 31, 0.18);
  border-radius: 26px;
  padding: 12px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(3, 64, 42, 0.08);
}

.speaker-controls-bar .sticky-controls-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.speaker-controls-bar .controls-search-wrap {
  width: 100%;
}

.speaker-controls-bar .controls-chips-container {
  width: 100%;
  min-width: 0;
}

@media (min-width: 820px) {
  .speaker-controls-bar .sticky-controls-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .speaker-controls-bar .controls-search-wrap {
    width: 340px;
    flex-shrink: 0;
  }

  .speaker-controls-bar .controls-chips-container {
    flex: 1;
    width: auto;
  }
}

/* Kontainer Daftar Bulan */
.schedule-months-container {
  width: 100%;
  display: block;
}

/* Hilangkan margin-bottom berlebih pada section bulan terakhir agar jarak ke footer rapat persis halaman publik */
.schedule-months-container > .month-section:last-of-type,
.schedule-months-container > .month-section:last-child {
  margin-bottom: 0 !important;
}

.speaker-portal-body .speaker-main-content {
  margin-bottom: 24px;
  padding-bottom: 0 !important;
}

.speaker-portal-body .istiqlal-content-container {
  padding-bottom: 0 !important;
}

.speaker-portal-body footer.istiqlal-footer {
  margin-top: 14px !important;
}

.month-section-body .schedule-cards-list {
  padding: 0 !important;
}

/* Multi-Column Grid untuk Daftar Jadwal Khutbah (Desktop & Mobile) */
.schedule-cards-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px;
  padding: 0 !important;
}

@media (min-width: 680px) {
  .schedule-cards-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

@media (min-width: 1040px) {
  .schedule-cards-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px;
  }
}

/* Friday Card Mewah Istiqlal */
.friday-card {
  width: 100%;
  border-radius: 24px !important;
  padding: 20px 22px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 144px;
  position: relative;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease, border-color 180ms ease !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  cursor: pointer;
}

.friday-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(3, 64, 42, 0.12) !important;
  border-color: rgba(4, 120, 87, 0.25) !important;
}

.friday-card:active {
  transform: scale(0.985);
}

.friday-card.is-mine {
  box-shadow: 0 0 0 2px #047857, 0 10px 28px rgba(4, 120, 87, 0.18) !important;
  border-color: #047857 !important;
}

/* Tab Panels Switching */
.tab-content-panel {
  display: none;
}

.tab-content-panel.active {
  display: block;
  animation: fadeInPanel 0.25s ease-out;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Desktop Modal Dialogs (≥ 768px) */
@media (min-width: 992px) {
  #bottom-nav-bar,
  .bottom-nav-bar,
  .hero-native-bar,
  .native-featured-banner,
  .native-quick-actions-grid,
  .native-status-card {
    display: none !important;
  }

  #detail-panel,
  #month-picker-modal,
  #profile-edit-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -46%) scale(0.96) !important;
    width: 92% !important;
    max-width: 520px !important;
    border-radius: 28px !important;
    opacity: 0;
    pointer-events: none;
    z-index: 1060 !important;
    max-height: 88vh;
    overflow-y: auto;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease !important;
  }

  #detail-panel.active,
  #month-picker-modal.active,
  #profile-edit-modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  #detail-panel .sheet-handle-bar,
  #month-picker-modal .sheet-handle-bar,
  #profile-edit-modal .sheet-handle-bar {
    display: none !important;
  }
}

/* Responsivitas Layar Ponsel & Tablet (< 992px) */
@media (max-width: 991.98px) {
  .navbar-container {
    display: none !important;
  }

  .speaker-page-container {
    padding: 0 !important;
  }
  .speaker-portal-body footer.istiqlal-footer,
  body.native-app-body footer.istiqlal-footer,
  footer.istiqlal-footer {
    padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .desktop-nav-tabs {
    display: none !important;
  }

  /* Bottom Navigation Bar (Docked Native Tab Bar di Bagian Bawah) */
  #bottom-nav-bar,
  .bottom-nav-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1040 !important;
    background: linear-gradient(180deg, rgba(14, 57, 40, 0.96) 0%, rgba(10, 46, 32, 0.99) 100%) !important;
    border-top: 1px solid rgba(198, 234, 86, 0.25) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(5, 25, 17, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: space-around !important;
    align-items: center !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  }

  [data-bs-theme="dark"] #bottom-nav-bar,
  [data-bs-theme="dark"] .bottom-nav-bar,
  .night-mode #bottom-nav-bar,
  .night-mode .bottom-nav-bar {
    background: linear-gradient(180deg, rgba(8, 36, 25, 0.98) 0%, rgba(5, 24, 16, 1) 100%) !important;
    border-top: 1px solid rgba(198, 234, 86, 0.30) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
  }

  .bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 2px 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 1 1 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    min-height: 48px !important;
  }

  .bottom-nav-item .nav-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 19px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .bottom-nav-item i,
  .bottom-nav-item .nav-icon-wrap i {
    font-size: 19px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
  }

  .bottom-nav-item span {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    transition: color 0.2s ease, font-weight 0.2s ease !important;
  }

  .bottom-nav-item:hover .nav-icon-wrap {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.35) !important;
  }

  .bottom-nav-item:hover i,
  .bottom-nav-item:hover .nav-icon-wrap i {
    color: #FFFFFF !important;
  }

  .bottom-nav-item:hover span {
    color: #FFFFFF !important;
  }

  .bottom-nav-item:active {
    transform: scale(0.92) !important;
  }

  .bottom-nav-item.active .nav-icon-wrap,
  .bottom-nav-item.active .bottom-nav-icon-wrap {
    background: linear-gradient(135deg, #c6ea56 0%, #b5db44 100%) !important;
    color: #0a2e20 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 16px rgba(198, 234, 86, 0.4), 0 0 14px rgba(198, 234, 86, 0.25) !important;
    transform: translateY(-2px) scale(1.04) !important;
    font-size: 19px !important;
  }

  .bottom-nav-item.active i,
  .bottom-nav-item.active .nav-icon-wrap i,
  .bottom-nav-item.active .bottom-nav-icon-wrap i {
    color: #0a2e20 !important;
  }

  .bottom-nav-item.active span,
  .bottom-nav-item.active .bottom-nav-label {
    color: #c6ea56 !important;
    font-weight: 850 !important;
    text-shadow: 0 0 10px rgba(198, 234, 86, 0.35) !important;
  }

  [data-bs-theme="dark"] .bottom-nav-item .nav-icon-wrap,
  .night-mode .bottom-nav-item .nav-icon-wrap {
    color: rgba(255, 255, 255, 0.78) !important;
  }
  [data-bs-theme="dark"] .bottom-nav-item span,
  .night-mode .bottom-nav-item span {
    color: rgba(255, 255, 255, 0.78) !important;
  }
  [data-bs-theme="dark"] .bottom-nav-item.active span,
  .night-mode .bottom-nav-item.active span {
    color: #c6ea56 !important;
  }

  /* Top Bar Native APK Sesuai Referensi */
  .hero-native-bar {
    display: flex !important;
    width: 100%;
    margin-bottom: 16px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 2px);
  }

  .hero-native-user-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .hero-native-user-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hero-native-greeting {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.2px !important;
  }

  .hero-native-name {
    font-size: 15px !important;
    font-weight: 850 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.2px !important;
  }

  .hero-native-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .hero-native-actions .btn-native-action,
  .btn-native-action {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #F1C84E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
    transition: transform 0.2s ease !important;
    font-size: 17px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .btn-native-action i,
  .btn-native-action .icon-nightmode {
    font-size: 17px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-native-user-wrap .user-avatar-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(245, 166, 35, 0.85) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease !important;
  }

  .hero-native-user-wrap .user-avatar-btn:active,
  .hero-native-actions .user-avatar-btn:active {
    transform: scale(0.92) !important;
  }

  .hero-native-user-wrap .user-avatar-btn.has-logo,
  .hero-native-user-wrap .user-avatar-btn:has(.header-avatar-img) {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 3px !important;
  }

  .user-avatar-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .user-avatar-btn .header-avatar-img {
    object-fit: contain !important;
  }

  .user-avatar-btn .header-avatar-initial {
    color: #f1c84e !important;
    font-weight: 800 !important;
    font-size: 15px !important;
  }

  /* 1. Mobile Featured Amber Card Sesuai Screen 1 */
  .native-featured-banner {
    width: 100%;
    margin-bottom: 14px !important;
  }

  .native-banner-card {
    background: linear-gradient(135deg, #FFB74D 0%, #FFA726 40%, #FB8C00 100%) !important;
    border-radius: 24px !important;
    padding: 16px 18px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 28px rgba(251, 140, 0, 0.28) !important;
    color: #18221B !important;
    display: flex !important;
    align-items: center !important;
    min-height: 72px !important;
  }

  .native-banner-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 72% !important;
  }

  .native-banner-subtitle {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    color: #583307 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 4px !important;
  }

  .native-banner-title {
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    color: #19201B !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
  }

  .native-banner-btn-row {
    display: flex !important;
    align-items: center !important;
    margin-top: 10px !important;
  }

  .native-banner-btn {
    background: #112820 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.18s ease !important;
    cursor: pointer !important;
  }

  .native-banner-btn:active {
    transform: scale(0.95) !important;
  }

  .native-banner-illustration {
    position: absolute !important;
    right: 4px !important;
    bottom: -6px !important;
    font-size: 76px !important;
    color: rgba(255, 255, 255, 0.28) !important;
    pointer-events: none !important;
    line-height: 1 !important;
    transform: rotate(-6deg) !important;
    z-index: 1 !important;
  }

  .native-banner-indicators {
    display: none !important;
  }

  .native-dot {
    height: 4px !important;
    width: 6px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    transition: all 0.25s ease !important;
  }

  .native-dot.active {
    width: 22px !important;
    background: #F5A623 !important;
  }

  /* 2. Mobile Quick Actions Grid Sesuai Screen 1 */
  .native-quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .native-quick-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 13px 6px !important;
    text-align: center !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
  }

  .native-quick-card:active {
    transform: scale(0.94) !important;
  }

  [data-bs-theme="dark"] .native-quick-card,
  .night-mode .native-quick-card {
    background: #11342B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  }

  .native-quick-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    margin-bottom: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
  }

  .native-quick-icon-box.icon-khutbah {
    background: linear-gradient(135deg, #FFF3D6 0%, #FFE2A4 100%) !important;
    color: #D97706 !important;
  }
  .native-quick-icon-box.icon-tarwih {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%) !important;
    color: #059669 !important;
  }
  .native-quick-icon-box.icon-myschedules {
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%) !important;
    color: #7C3AED !important;
  }
  .native-quick-icon-box.icon-gallery {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
    color: #0284C7 !important;
  }
  .native-quick-icon-box.icon-pdf {
    background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%) !important;
    color: #E11D48 !important;
  }
  .native-quick-icon-box.icon-takmir {
    background: linear-gradient(135deg, #DCFCE7 0%, #D1FAE5 100%) !important;
    color: #16A34A !important;
  }

  .native-quick-label {
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: #1E292B !important;
    letter-spacing: 0.1px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  [data-bs-theme="dark"] .native-quick-label,
  .night-mode .native-quick-label {
    color: #F1F5F9 !important;
  }

  /* 3. Mobile Masjid & Status Card Sesuai Screen 1 */
  .native-status-card {
    background: linear-gradient(135deg, rgba(0, 112, 84, 0.94) 0%, rgba(0, 85, 64, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 22px !important;
    padding: 14px 16px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 10px 28px rgba(0, 80, 60, 0.30) !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .native-status-mosque {
    font-size: 13px !important;
    font-weight: 750 !important;
    color: #FFFFFF !important;
  }

  .native-status-badge {
    display: none !important;
  }

  .native-status-badge.open {
    display: none !important;
  }

  .native-status-badge.closed {
    display: none !important;
  }

  .status-pulse-dot {
    display: none !important;
  }

  .native-status-date {
    font-size: clamp(9.5px, 2.7vw, 10.5px) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    letter-spacing: -0.15px !important;
    line-height: 1.25 !important;
  }

  .native-status-date i {
    font-size: 11px !important;
    flex-shrink: 0 !important;
    margin-right: 5px !important;
  }

  .native-status-date span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .native-timings-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
    margin-top: 6px !important;
  }

  .native-timing-item {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 7px 3px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .timing-time {
    font-size: 13px !important;
    font-weight: 850 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
  }

  .timing-icon {
    font-size: 13px !important;
    opacity: 0.9 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1px !important;
  }

  .timing-label {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
  }

  .hero-luxury {
    background-color: #007054 !important;
    background-image: 
      linear-gradient(180deg, 
        rgba(0, 112, 84, 0.94) 0%, 
        rgba(0, 85, 64, 0.98) 100%
      ),
      var(--hero-bg-url, url('../images/gallery/outdoor_hd.png')) !important;
    padding: 16px 16px 22px 16px !important;
    border-radius: 0 0 26px 26px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    margin-bottom: 16px !important;
    box-shadow: 0 14px 40px rgba(0, 112, 84, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  .hero-luxury-title {
    font-size: 1.6rem !important;
    line-height: 1.22 !important;
  }

  .hero-vip-card {
    padding: 16px 14px !important;
    border-radius: 22px !important;
  }

  .speaker-controls-bar {
    top: 10px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }

  .speaker-controls-bar .sticky-controls-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .speaker-controls-bar .controls-search-wrap {
    width: 100% !important;
  }

  .speaker-controls-bar .controls-chips-container {
    width: 100% !important;
    gap: 6px !important;
  }

  .speaker-controls-bar .search-input-pill {
    height: 42px !important;
    font-size: 13px !important;
    padding-left: 42px !important;
  }

  .speaker-controls-bar .filter-pill {
    padding: 6px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .speaker-controls-bar .btn-chips-scroll {
    display: none !important;
  }

  .filter-pill-group {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .schedule-cards-list {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding-bottom: 0 !important;
  }

  /* Kartu Jadwal Dipilih (Tab 2) Responsif */
  .my-schedules-summary-card {
    padding: 18px 16px !important;
    border-radius: 20px !important;
    gap: 14px !important;
  }

  .my-next-schedule-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .my-schedule-card-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  .my-card-actions {
    display: flex !important;
    justify-content: flex-end !important;
  }

  .btn-manage-my-schedule {
    width: 100% !important;
    justify-content: center !important;
  }

  .my-card-date-badge {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  .my-card-day {
    font-size: 17px !important;
  }

  .speaker-portal-body .speaker-main-content {
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
  }

  .speaker-portal-body .istiqlal-content-container {
    padding-bottom: 0 !important;
  }

  .speaker-portal-body footer.istiqlal-footer {
    margin-top: 10px !important;
  }
}

/* Footer Portal Khatib */
.speaker-portal-footer {
  margin-top: 40px;
  padding: 24px 0 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.footer-link-action {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-link-action:hover {
  color: #047857;
  text-decoration: underline;
}

/* ==========================================================================
   PORTAL TARWIH RAMADHAN STYLING (Executive Luxury & Mobile-First)
   ========================================================================== */
.tarwih-portal-card {
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-color, #E2E8F0);
  border-radius: 18px !important;
  padding: 18px 20px !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.tarwih-portal-card:hover {
  transform: translateY(-3px);
  border-color: #10B981;
  box-shadow: 0 10px 24px -4px rgba(16, 185, 129, 0.16);
}

.tarwih-portal-card.is-mine {
  border-color: #046342 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%) !important;
  box-shadow: 0 4px 14px rgba(4, 99, 66, 0.12) !important;
}

.tarwih-portal-card.is-taken {
  background: #FAFAFA;
  border-color: #E2E8F0;
}

.tarwih-portal-card.is-no-lecture {
  background: #F8FAFC;
  border-color: #E2E8F0;
  opacity: 0.85;
}

.tarwih-night-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  background: #ECFDF5;
  color: #046342;
  border: 1px solid #A7F3D0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tarwih-night-badge.lailatul-qadr {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid #FCD34D;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

.tarwih-card-date {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main, #0F172A);
  letter-spacing: -0.015em;
}

.tarwih-card-speaker-box {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Dark Mode Overrides for Tarwih */
.night-mode .tarwih-portal-card {
  background: #061a12 !important;
  border-color: #103828 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.night-mode .tarwih-portal-card.is-mine {
  background: linear-gradient(180deg, #072418 0%, #03180f 100%) !important;
  border-color: #10b981 !important;
}

.night-mode .tarwih-portal-card.is-taken {
  background: #04120a !important;
  border-color: #0c2b1e !important;
}

.night-mode .tarwih-portal-card.is-no-lecture {
  background: #05160e !important;
  opacity: 0.75;
}

.night-mode .tarwih-card-date {
  color: #f1f5f9 !important;
}

.night-mode .tarwih-card-speaker-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tarwih Sub-hero & Badges in Speaker Portal */
.tarwih-portal-hero {
  background: radial-gradient(100% 150% at 90% 10%, rgba(212, 175, 55, 0.16) 0%, transparent 60%), linear-gradient(135deg, #022016 0%, #054832 55%, #022b1e 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 30px -8px rgba(2, 32, 22, 0.3) !important;
}

.tarwih-badge-gold {
  background: rgba(212, 175, 55, 0.16) !important;
  border: 1px solid rgba(241, 200, 78, 0.45) !important;
  color: #f7df8b !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tarwih-badge-glass {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.74rem !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tarwih-quota-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.tarwih-progress-track {
  height: 6px !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.tarwih-progress-fill {
  width: 0%;
}

.tarwih-status-label {
  font-size: 0.72rem !important;
}

.tarwih-search-wrap {
  min-width: 240px;
}

.tarwih-search-input {
  padding-left: 2rem !important;
}

/* Tombol Pilih Ustadz Ramadhan Slot */
.btn-slot-assign {
  color: #181A1C !important;
  border-color: #ffc107 !important;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.btn-slot-assign i {
  color: #d97706;
  transition: color 0.15s ease-in-out;
}

.btn-slot-assign:hover,
.btn-slot-assign:focus,
.btn-slot-assign:active {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.35);
}

.btn-slot-assign:hover i,
.btn-slot-assign:focus i,
.btn-slot-assign:active i {
  color: #000000 !important;
}

.btn-slot-assign:hover .slot-text,
.btn-slot-assign:focus .slot-text,
.btn-slot-assign:active .slot-text {
  color: #000000 !important;
}

@media print {
  #bottom-nav-bar,
  .bottom-nav-bar,
  .hero-native-bar,
  .native-featured-banner,
  .native-quick-actions-grid,
  .native-status-card {
    display: none !important;
  }
}

/* Global Circular Navbar Dark Mode Toggle Button */
.btn-toggle-nightmode-pill {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Day Iftar Cards Dark Mode */
html[data-bs-theme="dark"] .day-iftar-card,
body.night-mode .day-iftar-card,
.night-mode .day-iftar-card {
  background: linear-gradient(160deg, rgba(14, 40, 30, 0.95) 0%, rgba(10, 30, 22, 0.98) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}
html[data-bs-theme="dark"] .day-iftar-card:hover,
body.night-mode .day-iftar-card:hover,
.night-mode .day-iftar-card:hover {
  background: rgba(14, 40, 30, 0.98) !important;
  border-color: rgba(241, 200, 78, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}
html[data-bs-theme="dark"] .day-iftar-card.is-today,
body.night-mode .day-iftar-card.is-today,
.night-mode .day-iftar-card.is-today {
  border-color: #10b981 !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.3) !important;
}
html[data-bs-theme="dark"] .day-iftar-card.is-lailatul,
body.night-mode .day-iftar-card.is-lailatul,
.night-mode .day-iftar-card.is-lailatul {
  border-color: rgba(212, 175, 55, 0.35) !important;
}
html[data-bs-theme="dark"] .day-date-display,
body.night-mode .day-date-display,
.night-mode .day-date-display {
  color: #f8fafc !important;
}
html[data-bs-theme="dark"] .day-date-sub,
body.night-mode .day-date-sub,
.night-mode .day-date-sub {
  color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .empty-state-card,
body.night-mode .empty-state-card,
.night-mode .empty-state-card {
  background: radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.08) 0%, rgba(0, 0, 0, 0.28) 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-bs-theme="dark"] .empty-icon-circle,
body.night-mode .empty-icon-circle,
.night-mode .empty-icon-circle {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #34d399 !important;
}
html[data-bs-theme="dark"] .empty-title-text,
body.night-mode .empty-title-text,
.night-mode .empty-title-text {
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .empty-desc-text,
body.night-mode .empty-desc-text,
.night-mode .empty-desc-text {
  color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .donor-item-row,
body.night-mode .donor-item-row,
.night-mode .donor-item-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-bs-theme="dark"] .donor-item-row .text-dark,
body.night-mode .donor-item-row .text-dark,
.night-mode .donor-item-row .text-dark,
html[data-bs-theme="dark"] .donor-name-text,
body.night-mode .donor-name-text,
.night-mode .donor-name-text {
  color: #f8fafc !important;
}
html[data-bs-theme="dark"] .donor-item-row .text-muted,
body.night-mode .donor-item-row .text-muted,
.night-mode .donor-item-row .text-muted,
html[data-bs-theme="dark"] .donor-menu-text,
body.night-mode .donor-menu-text,
.night-mode .donor-menu-text {
  color: #94a3b8 !important;
}