/* ==========================================================================
   GLOBAL SCROLLBAR CLEANUP (PC & GSM)
   ========================================================================== */

/* Verberg de scrollbar voor Chrome, Safari en Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Voor Firefox */
* {
    scrollbar-width: none !important;
}

/* Voor IE en Edge */
* {
    -ms-overflow-style: none !important;
}

/* Verberg de scrollbar voor Firefox en IE/Edge */
html, body, .app-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

/* ==========================================================================
   1. TOP NAVIGATION BAR (iOS Light Glassmorphic Style) - LAYER FIX
   ========================================================================== */

/* --- De Hoofd Container --- */
.dock-container-top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

/* --- DE GEÏSOLEERDE BLUR-LAAG --- */
/* Deze laag regelt nu puur de achtergrond. De knoppen zitten hier NIET meer in, 
   waardoor ze 100% massief wit blijven en niet mee-faden! */
.top-nav-blur-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* De hoogte van de blur-zone inclusief safe area */
  height: calc(env(safe-area-inset-top) + 110px); 
  
  background: rgba(248, 250, 252, 0.4); /* Subtiele Apple tint */
  backdrop-filter: blur(8px);            
  -webkit-backdrop-filter: blur(8px);
  
  /* De zachte verloop-easing toegepast op ALLEEN de achtergrond */
  -webkit-mask-image: linear-gradient(to bottom, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 1) 45%, 
    rgba(0, 0, 0, 0.85) 60%,
    rgba(0, 0, 0, 0.45) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(to bottom, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 1) 45%, 
    rgba(0, 0, 0, 0.85) 60%,
    rgba(0, 0, 0, 0.45) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
  pointer-events: none; /* Zorgt dat de laag geen klikken blokkeert op de content eronder */
}

/* --- De Binnenbalk (Nu met keiharde breedte-limiet en padding-fix) --- */
.top-nav-bar {
  width: 100%;
  max-width: 100vw; /* Voorkomt dat de balk buiten het scherm breekt */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  
  /* Perfecte uitlijning binnen de viewport */
  box-sizing: border-box !important;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  padding-left: 16px !important;
  padding-right: 16px !important; /* Garandeert de padding aan de rechterkant */
  
  background: transparent;
  box-shadow: none;
  border: none;
  z-index: 2; 
}

/* De dynamische paginatitel */
.dock-container-top .nav-title {
  color: var(--text-main);
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px); /* Perfect verticaal uitgelijnd met knoppen */
  text-transform: capitalize; 
}

/* --- De Massief Witte Knoppen (Nu gegarandeerd 100% ondoorzichtig) --- */
.dock-container-top .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 50px;
  height: 50px;
  border-radius: 16px; 
  
  background: #ffffff !important; 
  opacity: 1 !important; /* Voorkomt dat er overgeërfde transparantie optreedt */
  
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); 
  border: 1px solid rgba(15, 23, 42, 0.05);
  
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.1s ease, transform 0.1s ease;
}

.dock-container-top .action-btn i {
  font-size: 20px;
  color: var(--primary-accent);
}

.dock-container-top .action-btn:active,
.dock-container-top .action-btn.touching {
  background-color: #f1f5f9 !important; 
  transform: scale(0.92) !important;
}

.dock-container-top #userBtn {
  position: relative; /* Zorgt ervoor dat de badge zich positioneert ten opzichte van de knop */
}

.dock-container-top #userBtn.has-warning::after {
  content: "!" !important;
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  
  /* Kleurstelling */
  background-color: #f59e0b !important; /* Premium waarschuwingsoranje */
  color: #ffffff !important;             /* Spierwit uitroepteken */
  
  /* Vorm & Formaat */
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  
  /* Uitlijning van het uitroepteken exact in het midden */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Typografie */
  font-size: 11px !important;
  font-weight: 900 !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  
  /* Rand & Schaduw voor diepte over de knop heen */
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
  
  z-index: 9999 !important;
  pointer-events: none;
}

/* Offline Banner */
.offline-banner {
    display: none; /* Wordt getoond via JS classes */
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: #ffffff;
    color: #ef4444;
    border: 2px solid #ef4444;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
    white-space: nowrap;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
body.is-offline .offline-banner,
body.is-syncing .offline-banner { display: flex; }
body.is-syncing .offline-banner { color: #6366f1; border-color: #6366f1; box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2); }


/* ==========================================================================
   2. BOTTOM FLOATING DOCK (iOS Sliding Pill - JS Powered)
   ========================================================================== */

.bottom-dock-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; 
}

/* --- DE GEÏSOLEERDE BLUR-LAAG (Hoger gemaakt voor vroege blur-start) --- */
.bottom-nav-blur-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* VERHOOGD: De blur-zone is nu 160px hoog, waardoor hij ver boven het menu uitsteekt */
  height: calc(env(safe-area-inset-bottom) + 200px); 
  
  padding-bottom: calc(env(safe-area-inset-bottom) + 100px);

  /* Exact dezelfde milde blur en lichte tint als de top nav bar */
  background: rgba(248, 250, 252, 0.35); 
  backdrop-filter: blur(12px);            
  -webkit-backdrop-filter: blur(12px);
  
  /* GEOPTIMALISEERD VERLOOP: De mask start nu veel geleidelijker vanaf de bovenkant */
  -webkit-mask-image: linear-gradient(to top, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 1) 25%,     /* Volledig wazig achter en net boven het menu */
    rgba(0, 0, 0, 0.85) 45%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.15) 85%,  /* Hier begint de milde fading al ver boven het menu */
    rgba(0, 0, 0, 0) 100%     /* Volledig scherpe content */
  );
  mask-image: linear-gradient(to top, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 1) 25%, 
    rgba(0, 0, 0, 0.85) 45%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.15) 85%, 
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
}

/* --- Het daadwerkelijke zwevende menu --- */
.bottom-floating-menu {
  width: calc(100% - 32px);
  max-width: 460px;         
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px;
  border-radius: 24px; 
  margin-bottom: calc(env(safe-area-inset-bottom) + 16px); /* Perfect gepositioneerd boven de home-indicator */
  
  /* Nu puur een massieve, chique donkere achtergrond zonder eigen blur-ruis */
  background: rgba(15, 23, 42, 0.95); 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  
  pointer-events: auto; 
  z-index: 2; /* Zweeft bovenop de lichte blur-laag */
  position: relative; 
}
/* --- De bewegende pil (indicator) --- */
.bottom-floating-menu .dock-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: calc((100% - 12px) / 4); 
  background-color: rgba(255, 255, 255, 0.12); 
  border-radius: 18px;
  z-index: 1; 
  left: calc(6px + (var(--old-index) * ((100% - 12px) / 4)));
  transition: left 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.bottom-floating-menu.animate .dock-indicator {
  left: calc(6px + (var(--active-index) * ((100% - 12px) / 4)));
}

/* --- De losse navigatie-items --- */
.bottom-floating-menu .dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  flex: 1;
  height: 56px;
  border-radius: 18px;
  color: #94a3b8; 
  background-color: transparent; 
  z-index: 2; 
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.2s ease;
}

.bottom-floating-menu .dock-item i { font-size: 22px; }
.bottom-floating-menu .dock-item span { font-size: 10px; font-weight: 700; letter-spacing: 0.2px; }

.bottom-floating-menu .dock-item.active {
  color: #ffffff; 
}

.bottom-floating-menu .dock-item:active,
.bottom-floating-menu .dock-item.touching {
  transform: scale(0.92) !important;
}


/* ==========================================================================
   PREMIUM iOS DASHBOARD CONTENT STYLING (Prefix: dash-) - FIXED
   ========================================================================== */

/* --- 1. De Hoofd Inhoud Container --- */
.app-content {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  padding-right: 16px;
  
  /* Zorgt dat alles perfect ademt tussen de topbalk en bottom dock */
  padding-top: calc(env(safe-area-inset-top) + 84px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 105px);
  
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- 2. Statistieken Grid (Chique Apple 'Card' Look) --- */
.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0;
  margin-bottom: 28px;
}

.dash-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 14px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
  position: relative;
  overflow: hidden;
}

.dash-stat-item::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.15;
  z-index: 1;
}
.dash-stat-item:nth-child(1)::before { background-color: var(--warning-accent); }
.dash-stat-item:nth-child(2)::before { background-color: var(--primary-accent); }
.dash-stat-item:nth-child(3)::before { background-color: var(--danger-accent); }
.dash-stat-item:nth-child(4)::before { background-color: var(--success-accent); }

.dash-stat-item i {
  font-size: 18px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.dash-stat-item i.text-orange { color: var(--warning-accent); background: rgba(245, 158, 11, 0.08); }
.dash-stat-item i.text-blue   { color: var(--primary-accent); background: rgba(99, 102, 241, 0.08); }
.dash-stat-item i.text-red    { color: var(--danger-accent); background: rgba(239, 68, 68, 0.08); }
.dash-stat-item i.text-green  { color: var(--success-accent); background: rgba(16, 185, 129, 0.08); }

.dash-stat-number {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -0.5px;
  z-index: 2;
}

.dash-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 5px;
  z-index: 2;
}

/* --- 3. Recent Vluchten Kop --- */
.dash-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin: 12px 0 16px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.3px;
}

.dash-section-title i {
  font-size: 15px;
  color: #cbd5e1;
}

/* --- 4. Premium Logbook Vluchtkaarten --- */
.dash-logbook-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 6px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.dash-logbook-card:active {
  transform: scale(0.97);
  background-color: #f8fafc;
}

.dash-flight-row {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.dash-flight-grid-main {
  display: grid;
  grid-template-columns: 48px 1px 1fr auto;
  align-items: center; 
  width: 100%;
}

/* Datum */
.dash-flight-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dash-date-day {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  letter-spacing: -0.5px;
}

.dash-date-month {
  font-size: 10px;
  color: var(--primary-accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

.dash-flight-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(15, 23, 42, 0.06);
  justify-self: center;
}

/* Route Tijdlijn */
.dash-flight-timeline {
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.dash-airport-node {
  display: flex;
  flex-direction: column;
  min-width: 52px;
}

.dash-airport-code {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.dash-airport-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
}

.text-right {
  text-align: right;
}

/* Premium Tijdlijn connector met ingebouwd vliegtuigje */
.dash-timeline-line-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 12px;
  position: relative;
}

.dash-flight-duration {
  font-size: 11px;
  color: var(--primary-accent);
  font-weight: 700;
  background-color: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 2;
  margin-bottom: -6px;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.dash-timeline-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.05));
  z-index: 1;
  position: relative;
}

.dash-timeline-line::after {
  content: "➔";
  font-size: 8px;
  color: var(--primary-accent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 0 2px;
  opacity: 0.7;
}

.dash-flight-arrow {
  color: #cbd5e1;
  font-size: 16px;
  display: flex;
  align-items: center;
}

/* --- 5. Gesplitste Badges (DE POSITIONERINGS FIX) --- */
.dash-flight-sub-info {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
}

.dash-flight-badges {
  display: flex;
  justify-content: space-between; /* Links functies, rechts landingen */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  
  /* DE CRUCIALE FIX: We lijnen links uit met 65px (de datum-zone breedte) 
     en geven rechts 12px padding om te voorkomen dat de zon-badge tegen de pijl ramt */
  padding-left: 65px; 
  padding-right: 12px; 
}

.dash-badges-left,
.dash-badges-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dash-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-badge i {
  font-size: 11px;
}

/* --- COCKPIT: HOGERE CONTRAST/FELLERE PASTELLER VOOR GSM EN PC --- */
.dash-badge-purple { background-color: rgba(99, 102, 241, 0.16); color: #4f46e5; }
.dash-badge-green  { background-color: rgba(16, 185, 129, 0.16); color: #059669; }
.dash-badge-blue   { background-color: rgba(59, 130, 246, 0.16); color: #1d4ed8; }
.dash-badge-gray   { background-color: rgba(100, 116, 139, 0.16); color: #475569; }
.dash-badge-yellow { background-color: rgba(245, 158, 11, 0.2); color: #b45309; }

/* --- 6. Desktop / PC Optimalisatie --- */
@media (min-width: 768px) {
  .app-content {
    max-width: 740px; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .dash-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .dash-logbook-card, 
  .dash-section-title {
    max-width: 100%;
  }
}

/* ==========================================================================
   COLLAPSIBLE YEAR GROUPS (iOS Style)
   ========================================================================== */

/* Verberg de standaard lelijke browserpijl van details */
.year-group summary::-webkit-details-marker {
  display: none;
}
.year-group summary {
  list-style: none;
}

.year-group {
  margin-bottom: 16px;
  width: 100%;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  cursor: pointer;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.year-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.header-right-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Compacte iOS badge voor het aantal vluchten in dat jaar */
.year-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background-color: rgba(100, 116, 139, 0.08);
  padding: 3px 10px;
  border-radius: 20px;
}

.toggle-arrow {
  font-size: 16px;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- ANIMATIE: Draai het pijltje om als de groep dichtgeklapt is --- */
.year-group:not([open]) .toggle-arrow {
  transform: rotate(-90deg);
}

/* Ruimte tussen de geopende kop en de kaarten */
.year-content {
  padding-top: 8px;
  animation: fadeEffect 0.25s ease;
}

@keyframes fadeEffect {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}