/* ==========================================================================
   HELMONDSE STRATEN — Professional Mobile UI
   Native App Feel · Bottom Navigation · Slide-Up Sheets · Safe Area Support
   ========================================================================== */

/* ============================================================
   SAFE AREA & MOBILE VARS
   ============================================================ */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --mobile-nav-h: 64px;
}

/* BOTTOM NAV: hidden on desktop */
.mobile-bottom-nav { display: none; }
.side-drawer-backdrop { display: none; }

/* ============================================================
   MOBILE BASE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  html, body {
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* TOP NAV */
  .top-nav {
    padding: calc(var(--safe-top) + 8px) 10px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-default);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    height: calc(var(--safe-top) + var(--mobile-nav-h));
    position: relative;
    gap: 6px;
    box-sizing: border-box;
  }

  .nav-brand-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    pointer-events: auto;
  }

  .brand-icon-wrap { 
    width: 24px; 
    height: 24px; 
    min-width: 24px; 
    flex-shrink: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .brand-titles {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
  }

  .brand-title { 
    font-family: 'Syne', sans-serif;
    font-size: clamp(0.76rem, 3.4vw, 0.88rem); 
    font-weight: 800; 
    letter-spacing: -0.04em;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.1;
  }
  .brand-subtitle { display: none; }
  .nav-pill-group { display: none; }
  .stat-pill.watched-pill { display: none; }

  .nav-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    pointer-events: auto;
  }

  .btn-jens-home,
  .btn-random-street,
  .btn-story {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .btn-jens-home .jens-home-text { display: none; }
  .btn-jens-home .jens-home-avatar { width: 18px; height: 18px; }
  .btn-random-street span { display: none; }
  .btn-story span { display: none; }
  .btn-random-street svg,
  .btn-story svg {
    width: 14px;
    height: 14px;
  }

  @media (max-width: 360px) {
    .top-nav { padding: calc(var(--safe-top) + 6px) 6px 6px; gap: 4px; }
    .nav-brand-card { gap: 4px; }
    .brand-icon-wrap { width: 20px; height: 20px; min-width: 20px; }
    .brand-title { font-size: 0.74rem; letter-spacing: -0.045em; }
    .nav-actions { gap: 2px; }
    .btn-jens-home, .btn-random-street, .btn-story { width: 28px; height: 28px; min-width: 28px; }
    .btn-jens-home .jens-home-avatar { width: 16px; height: 16px; }
    .btn-random-street svg, .btn-story svg { width: 12px; height: 12px; }
  }

  /* SEARCH PANEL (Mobile) */
  .map-floating-panel {
    position: absolute;
    top: calc(var(--safe-top) + var(--mobile-nav-h) + 10px);
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    z-index: 900;
    animation: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .search-card {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--r-xl);
    padding: 3px 8px 3px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    max-width: none;
    flex: none;
  }

  .search-icon {
    width: 36px;
    height: 36px;
  }

  .search-input {
    font-size: 16px;
    padding: 8px 6px;
  }

  /* HIDE ALL DESKTOP DROPDOWNS & PANELS ON MOBILE (Mobile uses dedicated bottom sheets) */
  .desktop-dropdown-toggle,
  .filter-dropdown-container,
  .filter-dropdown-content,
  .layers-dropdown-container,
  .layers-card,
  .map-layers-panel {
    display: none !important;
  }

  /* ZOOM CONTROLS */
  .leaflet-control-zoom {
    margin-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 16px) !important;
    margin-right: 12px !important;
  }

  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
  }

  /* BOTTOM NAVIGATION BAR */
  .mobile-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: calc(var(--mobile-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }

  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px 0;
    color: var(--text-muted);
    transition: color var(--t-fast);
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .mobile-nav-btn.active { color: var(--accent); }

  .mobile-nav-btn .nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background var(--t-fast), transform var(--t-fast);
  }

  .mobile-nav-btn.active .nav-icon {
    background: var(--accent-faint);
    transform: translateY(-1px);
  }

  .mobile-nav-btn .nav-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .mobile-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2.5px;
    background: var(--accent);
    border-radius: 0 0 var(--r-full) var(--r-full);
  }

  /* HUD — Volledig verborgen op mobiel/touch (desktop-only feature) */
  #street-hover-hud,
  .street-hover-hud,
  .street-hover-hud.visible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  /* BACKDROP */
  .side-drawer-backdrop {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .side-drawer-backdrop.visible {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
  }

  /* SIDE DRAWER — Bottom Sheet */
  .side-drawer {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 72vh;
    max-height: calc(100vh - var(--safe-top) - var(--mobile-nav-h) - 60px);
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--border-default);
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
    box-shadow: 0 -8px 40px rgba(0,0,0,0.14);
  }

  .side-drawer:not(.hidden) {
    transform: translateY(0);
  }

  /* Drag handle */
  .side-drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-default);
    border-radius: var(--r-full);
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  .drawer-close {
    width: 34px;
    height: 34px;
    background: var(--bg-card-hover);
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
  }

  .drawer-toggle-btn { display: none; }

  /* STREET LIST ITEMS */
  .street-item-card { padding: 13px 16px; border-radius: var(--r-lg); min-height: 56px; }
  .street-name { font-size: 0.9rem; }
  .street-location { font-size: 0.72rem; }

  /* VIDEO MODAL — Bottom Sheet */
  .video-modal-overlay {
    padding: 0;
    align-items: flex-end;
    background: rgba(0,0,0,0.7);
  }

  .video-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    border-top: 2px solid var(--accent);
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(40px);
    margin: 0;
    padding-bottom: var(--safe-bottom);
    display: flex;
    flex-direction: column;
  }

  .video-modal-overlay.active .video-modal-card {
    transform: translateY(0);
  }

  /* Drag handle on modal */
  .video-modal-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0,0,0,0.12);
    border-radius: var(--r-full);
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  .video-modal-header {
    padding: 12px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .modal-header-main {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .modal-header-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .modal-title-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .modal-street-title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
  }
  .modal-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .modal-header-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 4px;
  }
  .btn-modal-map {
    padding: 7px 12px;
    font-size: 0.76rem;
  }
  .modal-action-btn,
  .modal-close-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
  }

  .video-stage-container {
    flex: 1;
    aspect-ratio: unset;
    min-height: 200px;
  }

  /* PROJECT INFO MODAL — Bottom Sheet */
  .story-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px;
    padding-bottom: calc(var(--safe-bottom) + 24px);
    position: relative;
  }

  .story-modal-close {
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    background: var(--bg-card);
  }

  #story-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .story-stats-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 6px; 
    padding: 14px 6px;
    box-sizing: border-box;
    width: 100%;
  }
  .story-stat-card { 
    padding: 4px 2px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .story-stat-num { 
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.02rem, 4.4vw, 1.25rem); 
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--accent);
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
  }
  .story-stat-txt {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;
    margin-top: 3px;
  }

  /* MAP LABELS (WIJKEN & BUURTEN) — Subtiel & Compact op Mobiel */
  .map-wijk-label-inner {
    padding: 2px 6px;
    font-size: 0.58rem;
    font-weight: 700;
    border-width: 1px;
    border-radius: var(--r-full);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    letter-spacing: -0.01em;
    gap: 3px;
  }

  .map-buurt-label-inner {
    padding: 1.5px 5px;
    font-size: 0.52rem;
    font-weight: 600;
    border-width: 1px;
    border-radius: var(--r-full);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    letter-spacing: -0.01em;
  }

  #map { touch-action: none; }
}

/* LANDSCAPE */
@media (max-width: 768px) and (orientation: landscape) {
  :root { --mobile-nav-h: 52px; }

  .side-drawer { height: 80vh; }

  .video-modal-card {
    max-height: 98vh;
    flex-direction: row;
    border-radius: 0;
    max-width: 100%;
  }

  .video-modal-card::before { display: none; }

  .video-modal-header {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-subtle);
    border-bottom: none;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: auto;
  }

  .video-stage-container { flex: 1; aspect-ratio: unset; height: 100%; }
}

/* ============================================================
   MOBILE LAYERS BOTTOM SHEET
   ============================================================ */
.mobile-layers-sheet {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  .mobile-layers-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.14);
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
  }

  .mobile-layers-sheet:not(.hidden) {
    transform: translateY(0);
  }

  /* Drag handle */
  .mobile-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border-default);
    border-radius: var(--r-full);
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Header row */
  .mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .mobile-sheet-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }

  .mobile-sheet-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-card-hover);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--t-fast);
  }

  .mobile-sheet-close:active {
    background: var(--bg-surface);
    color: var(--accent);
  }

  /* Description text */
  .mobile-sheet-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 4px;
  }

  /* Body */
  .mobile-sheet-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Each layer row */
  .mobile-layer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .mobile-layer-row:last-child {
    border-bottom: none;
  }

  .mobile-layer-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }

  .mobile-layer-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .mobile-layer-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }

  .mobile-layer-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
  }

  /* iOS-style toggle switch */
  .mobile-layer-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }

  .toggle-track {
    display: block;
    width: 51px;
    height: 31px;
    border-radius: 16px;
    background: var(--bg-deep);
    border: 1.5px solid rgba(0,0,0,0.08);
    position: relative;
    transition: background 0.22s ease, border-color 0.22s ease;
  }

  .toggle-thumb {
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-layer-toggle.active .toggle-track {
    background: var(--accent);
    border-color: var(--accent-dim);
  }

  .mobile-layer-toggle.active .toggle-thumb {
    transform: translateX(20px);
  }

  /* Wijken: blue when active */
  #mobile-layer-btn-wijken.active .toggle-track {
    background: #2563eb;
    border-color: #1d4ed8;
  }

  /* Buurten: green when active */
  #mobile-layer-btn-buurten.active .toggle-track {
    background: #059669;
    border-color: #047857;
  }
}