/* ===========================
   THEME / TOKENS
=========================== */
:root{
  --bg: #94b7d3bc;
  --panel: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --stroke: rgba(255,255,255,0.12);
  --accent: #7dd3fc;
  --accent-2: #a78bfa;
  --shadow: 0 12px 35px rgba(0,0,0,0.45);
  --radius: 16px;
}

/* ===========================
   BASE
=========================== */
*{ box-sizing: border-box; }
html, body {
  height: 100%;
  min-height: 100dvh; /* voorkomt “verspringen” op mobiel/landscape */
}

.app{
  height: 100%;
  min-height: 100dvh; /* idem */
  display:flex;
  flex-direction: column;
}


body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgb(183, 255, 221), transparent 55%),
    radial-gradient(1000px 600px at 80% 10%, rgb(170, 228, 255), transparent 55%),
    var(--bg);
}


/* ===========================
   TOPBAR
=========================== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 4000;
  padding: 14px 14px 10px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  backdrop-filter: blur(10px);
  isolation: isolate;
}

/* Hamburger/menu icon button */
.iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

/* Brand block (desktop) */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 100px;
}
.logoimg{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: var(--shadow);
}

.title{ font-size: 16px; font-weight: 750; }
.subtitle{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Controls group */
.controls{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Tabs */
.floor-tabs, .view-tabs{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  flex: 0 0 auto;
}

.tab{
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 650;
  white-space: nowrap;
}
.tab[aria-selected="true"]{
  color: var(--text);
  background: linear-gradient(135deg, rgba(125,211,252,0.25), rgba(167,139,250,0.25));
  border-color: rgba(255,255,255,0.14);
}

/* Floor tab labels: long vs short */
.tab-short { display: none; }

@media (max-width: 720px){
  .tab-long { display: none; }
  .tab-short { display: inline; }
}

/* Search pill */
.search{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  flex: 0 0 auto;
}

.search-input{
  width: min(320px, 52vw);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
.search-input::placeholder{ color: rgba(255,255,255,0.55); }

/* Buttons */
.btn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  font-weight: 700;
  white-space: nowrap;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(125,211,252,0.28), rgba(167,139,250,0.22));
}

/* ===========================
   MAIN / MAP
=========================== */
.main{
  position: relative;
  flex: 1;
  min-height: 0;
}
.map{
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

/* ===========================
   TOAST (TOP OF MAP)
=========================== */
.toast{
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1200;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

/* ===========================
   NOTICE / BANNER (CARD OVER MAP)
=========================== */
.notice{
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  width: min(740px, calc(100% - 20px));
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  z-index: 1300;
}
.notice[hidden]{ display:none; }

.notice__row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.notice__text{
  font-weight: 850;
  line-height: 1.35;
  padding-right: 6px;
}
.notice__close{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  display:grid;
  place-items:center;
}
.notice__actions{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===========================
   LEAFLET TWEAKS
=========================== */
.leaflet-control-zoom a{
  background: rgba(0,0,0,0.45);
  color: white;
  border: 1px solid rgba(255,255,255,0.16);
}
.leaflet-container{
  background: rgba(255,255,255,0.03);
}

/* ===========================
   TOURS DRAWER
=========================== */
.tour-drawer{
  position: absolute;
  right: 14px;
  top: 14px;
  width: min(420px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 999;
  display: none;
}
.tour-drawer.open{ display:flex; flex-direction: column; }

.tour-drawer__header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tour-drawer__title{ font-weight: 900; }
.tour-drawer__subtitle{ font-size: 12px; color: var(--muted); margin-top: 3px; }
.tour-drawer__content{ padding: 12px; overflow: auto; }

/* Subtabs + actions (Kiezen / Mijn tours) */
.tour-subtabs{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
  justify-content: center;
}
.tour-subactions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.user-tour-card{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
}
.user-tour-card__title{ font-weight: 900; }
.user-tour-card__meta{ margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.user-tour-card__row{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }

.tour-editor{
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
.tour-editor__title{ font-weight: 900; margin-bottom: 8px; }
.tour-stops{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tour-stop{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.tour-stop__top{ display:flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tour-stop__name{ font-weight: 900; }
.tour-stop__floor{ font-size: 12px; color: var(--muted); font-weight: 800; }
.tour-stop__body{ margin-top: 8px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.88); white-space: pre-wrap; }
.tour-stop__btns{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }

.tour-card{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
}
.tour-card__title{ font-weight: 850; }
.tour-card__meta{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.tour-card__row{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }

/* Tour badges / drukte */
.tour-pills{
  margin-top: 8px;
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tour-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.308);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

/* Editor choices */
.tour-choices{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tour-choice{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  user-select: none;
}
.tour-choice input{
  transform: translateY(1px);
}

.tour-active__name{ font-weight: 900; }
.tour-active__meta{ margin-top: 4px; color: var(--muted); font-size: 12px; }

.tour-actions{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }

.tour-cp{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
.tour-cp__title{ font-weight: 900; }
.tour-cp__body{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
}

/* Badge tooltip */
.tour-tooltip {
  position: fixed;
  z-index: 20000;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(20,20,30,0.95);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tour-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}


/* ===========================
   MENU DRAWER
=========================== */
.menu-drawer{
  position:absolute;
  left: 14px;
  top: 14px;
  width: min(520px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 1000;
  display:none;
}
.menu-drawer.open{ display:flex; flex-direction: column; }

.menu-drawer__header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.menu-drawer__title{ font-weight: 900; }

.menu-drawer__tabs{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.menu-tab{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}
.menu-tab[aria-selected="true"]{
  background: linear-gradient(135deg, rgba(125,211,252,0.22), rgba(167,139,250,0.18));
}
.menu-drawer__content{
  padding: 12px;
  overflow:auto;
}
.menu-page h3{ margin: 0 0 8px; }
.menu-page p, .menu-page li{
  color: rgba(255,255,255,0.88);
  line-height: 1.45;
}

/* ===========================
   GENERIC FORM / PANELS
=========================== */
.panel{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.field span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text);
}
.row{ display:flex; gap: 8px; flex-wrap: wrap; }

.hint{
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  padding: 10px 0;
}

.sep{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 12px 0;
}


/* ===========================
   MARKERS UI (LIST + INPUT)
=========================== */
.mark-textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
  resize: vertical;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.marks-list{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mark-card{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.mark-card__top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
}
.mark-card__title{ font-weight: 900; }

.mark-card__body{
  margin-top: 8px;
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.mark-card__btns{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===========================
   POPUPS (MARK POPUP)
=========================== */
.mark-popup .leaflet-popup-content-wrapper{
  background: rgba(255,255,255,0.97);
  color: #111;
  border-radius: 16px;
}
.mark-popup .leaflet-popup-tip{
  background: rgba(255,255,255,0.97);
}
.mark-popup .leaflet-popup-content{
  margin: 12px 14px;
  width: min(360px, 74vw);
  max-height: 45vh;
  overflow: auto;
}
.mark-popup .leaflet-popup-content::-webkit-scrollbar{ width: 10px; }
.mark-popup .leaflet-popup-content::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}

/* ===========================
   MOBILE (ONE CLEAN BLOCK)
=========================== */
@media (max-width: 720px){
  /* Hide brand to save space */
  .brand{ display:none; }

  /* Topbar terug naar flex (geen grid/contents) => stabiel */
  .topbar{
  position: sticky;
  top: 0;
  z-index: 4000;
    padding: 8px 10px;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  /* Menu knop links, controls nemen de rest van rij 1 */
  .iconbtn{
    width: 44px;
    height: 44px;
    font-size: 20px;
    flex: 0 0 auto;
  }

  .toast {
    /* Maak de toast breder: bijv. 90% van het scherm */
    width: calc(100% - 40px); 
    
    /* Zorg dat de hoeken minder extreem rond zijn als er veel tekst is */
    border-radius: 12px; 
    
    /* Optioneel: lijn de tekst links uit als er veel info is */
    text-align: center; 
    
    /* Zorg dat de toast niet te hoog wordt bij veel tekst */
    max-height: 150px;
    overflow: hidden;
  }


  /* Controls wordt een kolom: rij 1 tabs, rij 2 search */
  .controls{
    flex: 1 1 auto;
    min-width: 0;          /* essentieel zodat floor-tabs kan krimpen */
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* Rij 1: verdiepingen (scrollen) + Tours (altijd zichtbaar) */
  .tabs-row{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;     /* nooit naar 2e rij */
    justify-content: center;
    min-width: 0;
  }

  /* Alleen floor-tabs mogen scrollen */
  .floor-tabs{
    flex: 1 1 auto;
    width: max-content;
    max-width: 150px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .floor-tabs::-webkit-scrollbar{ display:none; }

  /* Tours knop blijft rechts staan */
  .view-tabs{
    flex: 0 0 auto;
    padding: 4px;
    gap: 6px;
  }

  /* Compacte pills */
  .floor-tabs{ padding: 4px; gap: 6px; }
  .tab{
    padding: 7px 10px;
    font-size: 13px;
  }

  /* Rij 2: zoekbalk altijd volledige breedte */
  .search{
    width: 100%;
    padding: 6px;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;     /* geen derde rij */
  }

  .search-input{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 9px 10px;
  }

  .btn{
    padding: 9px 10px;
    font-size: 13px;
  }

  /* Notice iets lager */
  .notice{
    top: 56px;
    padding: 10px;
  }
  .notice__actions{ justify-content: center; }

  /* Drawers als bottom-sheet */
  .tour-drawer{
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    max-height: 45vh;
  }
  .menu-drawer{
    left: 10px;
    right: 10px;
    top: 10px;
    width: auto;
    max-height: 75vh;
  }

  .mark-popup .leaflet-popup-content{
    width: min(360px, 86vw);
    max-height: 52vh;
  }
}



/* ===========================
   LAYOUT IMPROVEMENTS (2025-12)
   - Topbar: desktop overzichtelijk, mobiel max 2 rijen
   - Mark popup: moderne "glass" kaart
=========================== */

/* Desktop & general: keep everything on 1 lijn waar mogelijk */
@media (min-width: 721px){
  .topbar{ flex-wrap: nowrap; }
}
.brand{ display:none; }

.controls{
  flex-wrap: nowrap;
  min-width: 0;
}
.tabs-row{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}
.search{
  flex-wrap: nowrap;
  min-width: 0;
}
.search-input{
  width: min(320px, 26vw);
  min-width: 180px;
}

/* Tussen-breakpoint: laat controls netjes in 2 rijen vallen (tabs boven, search onder) */
@media (max-width: 980px){
  .topbar{
  position: sticky;
  top: 0;
  z-index: 4000;
    flex-wrap: wrap;
  }
  .controls{
    width: 100%;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-content: stretch;
  }
  .tabs-row{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .search{
    width: 100%;
    justify-content: center;
  }
  .search-input{
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (min-width: 1130px){
  .brand{
    display: flex;
  }
}

/* LANDSCAPE PHONE: weinig hoogte -> drawers als zijpanelen */
@media (max-width: 900px) and (max-height: 450px){
  /* Topbar blijft ok, maar geef iets minder padding */
  .topbar{ padding: 6px 10px; }

  /* Tours drawer: rechts als side panel */
  .tour-drawer{
    top: 10px;
    bottom: 10px;
    left: auto;
    right: 10px;
    width: min(420px, 46vw);
    max-height: calc(100% - 20px);
  }

  /* Menu drawer: links als side panel */
  .menu-drawer{
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: auto;
    width: min(520px, 54vw);
    max-height: calc(100% - 20px);
  }

  /* Notice iets lager zodat het niet “tegen” de topbar zit */
  .notice{ top: 52px; }
}



/* ===========================
   MARK POPUP (mooier)
=========================== */
.mark-popup .leaflet-popup-content-wrapper{
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.92);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
}
.mark-popup .leaflet-popup-tip{
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.14);
}
.mark-popup .leaflet-popup-content{
  margin: 12px 14px;
  width: min(380px, 78vw);
  max-height: 46vh;
  overflow: auto;
}
.mark-popup .leaflet-popup-close-button{
  color: rgba(255,255,255,0.85) !important;
  font-size: 20px !important;
  padding: 6px 8px 0 0 !important;
}
.mark-popup .leaflet-popup-close-button:hover{
  color: rgba(255,255,255,1) !important;
}
.mark-popup .mark-pop{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.mark-popup .mark-pop__title{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .2px;
}
.mark-popup .mark-pop__room{
  font-size: 16px;
}
.mark-popup .mark-pop__floor{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.65);
}
.mark-popup .mark-pop__body{
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  white-space: pre-wrap;
}
.mark-popup .mark-pop__badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(125,211,252,0.22), rgba(167,139,250,0.18));
  font-size: 12px;
  font-weight: 850;
}


/* ===========================
   ROOM DRAWER (ZAALINFO)
=========================== */
.room-drawer{
  position: absolute;
  right: 14px;
  top: 86px; /* net onder tours op desktop */
  width: min(420px, calc(100% - 28px));
  max-height: calc(100% - 100px);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 998;
  display: none;
}
.room-drawer.open{ display:flex; flex-direction: column; }

.room-drawer__header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.room-drawer__title{ font-weight: 950; }
.room-drawer__roomname{
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
  margin-top: 4px;
  line-height: 1.25;
}

.room-drawer__status{
  display: inline-block;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.22);
  color: rgba(255,255,255,0.92);
}

/* Status-badge: nooit een lege/verborgen “box” tonen */
.room-drawer__status[hidden]{
  display: none !important;
}
.room-drawer__status:empty{
  display: none !important;
}

.room-drawer__status[data-kind="maintenance"]{
  background: rgba(255, 160, 0, 0.12);
  border-color: rgba(255, 160, 0, 0.24);
}
.room-drawer__status[data-kind="closed"]{
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 80, 80, 0.24);
}
.room-drawer__subtitle{ font-size: 12px; color: var(--muted); margin-top: 3px; }

.room-drawer__content{ padding: 12px; overflow:auto; }
.room-drawer__search{ margin-bottom: 10px; }

/* Zaal-foto (thumbnail) */
.room-photo{
  margin: 2px 0 10px;
}
.room-photo__btn{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.room-photo__img{
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.room-photo__credit{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.68);
}

@media (max-width: 720px){
  .room-photo__img{ max-height: 200px; }
}

.room-section{ margin-top: 12px; }
.room-section__title{
  font-weight: 900;
  margin-bottom: 8px;
}

.room-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.room-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight: 850;
  font-size: 12.5px;
}
.room-chip b{ font-weight: 950; }

.room-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.room-item{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  line-height: 1.35;
}

/* Mark-form: werkenpanel */
.works-panel__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.works-panel__title{ font-weight: 950; }
.works-panel__hint{ color: rgba(255,255,255,0.70); font-size: 12px; }

.works-panel__controls{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.works-panel__list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.works-panel__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.works-panel__row span{
  font-size: 13px;
  line-height: 1.35;
}
.works-panel__row button{
  flex: 0 0 auto;
}

/* Mobile: room drawer as bottom sheet (like tours) */
@media (max-width: 850px){
  .room-drawer{
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    max-height: 60vh;
  }
}



/* ===========================
   SEARCH AUTOCOMPLETE
=========================== */
.search-field{
  position: relative;
  flex: 1 1 auto;
  min-width: 220px;
}
.suggest{
  position: absolute;
  z-index: 10050;
  pointer-events: auto;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.suggest-item{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
}
.suggest-item:hover,
.suggest-item[aria-selected="true"]{
  background: rgba(255,255,255,0.10);
}
.suggest-item__left{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.suggest-item__title{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-item__meta{
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-item__badge{
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  color: rgba(255,255,255,0.88);
}

@media (max-width: 720px){
  .search{ flex: 1 1 100%; }
  .search-field{ flex: 1 1 100%; min-width: 0; }
  .search-input{ width: 100%; min-width: 0; }

  .suggest{
    max-height: 55vh;
    overflow: auto;
  }
  .suggest-item{
    padding: 14px 14px;
    font-size: 13px;
    gap: 12px;
  }
  .suggest-item__title{ font-size: 15px; }
  .suggest-item__meta{ font-size: 13px; }
  .suggest-item__badge{
    font-size: 12px;
    padding: 4px 10px;
  }
}

.room-status{
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3;
}

/* subtiel verschillende tinten per type */
.room-status[data-kind="day"]{
  background: rgba(255, 204, 102, 0.12);
}
.room-status[data-kind="werken"]{
  background: rgba(125, 211, 252, 0.12);
}
.room-status[data-kind="permanent"]{
  background: rgba(167, 139, 250, 0.12);
}


/* Klikbare werken in zaal-lijst */
.room-item--link{
  cursor: pointer;
}
.room-item--link:hover{
  background: rgba(255,255,255,0.10);
}

/* Fullscreen image modal */
.img-modal[hidden]{ display:none; }

.img-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Animatie basis */
.img-modal{
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* Panel animatie */
.img-modal__panel{
  transform: translateY(6px) scale(0.985);
  transition: transform 220ms ease;
  will-change: transform;
}

/* Open state */
.img-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.img-modal.is-open .img-modal__panel{
  transform: translateY(0) scale(1);
}

/* Respecteer gebruikers die animaties uitzetten */
@media (prefers-reduced-motion: reduce){
  .img-modal,
  .img-modal__panel{
    transition: none !important;
  }
}


.img-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}

.img-modal__panel{
  position:absolute;
  inset: 18px;
  max-width: 1200px;
  margin: auto;
  border-radius: 18px;
  background: rgba(25,25,28,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction: column;
  overflow:hidden;
}

.img-modal__top{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.img-modal__title{
  font-weight: 950;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  max-width: calc(100% - 48px);
}

.img-modal__body{
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items:center;
  justify-content:center;

  /* Geen scrollbar in de modal */
  overflow: hidden;

  /* Belangrijk voor flex-kinderen */
  min-height: 0;
  flex: 1 1 auto;
}

.img-modal__header{
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 16px;
  right: 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 2;
}

.img-modal__close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  color: white;
  cursor: pointer;
}

.img-modal__close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  color: white;
  cursor: pointer;
}

.img-modal__img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  border-radius: 12px;
}

.img-modal__inner{
  position: relative;
  width: min(1100px, 96vw);
  height: min(92vh, 900px);

  display: flex;
  flex-direction: column;
  justify-content: center;   /* verticaal centreren */
  align-items: center;       /* horizontaal centreren */

  padding-top: calc(64px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));

  background: rgba(0,0,0,0.85);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.55);
}


#imgModalImg{
  max-width: min(96vw, 1150px);
  max-height: calc(100dvh - 170px);
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.img-modal__credit{
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  text-align:center;
  padding-bottom: 6px;
}

.img-modal__loading{
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

@media (max-width: 720px){
  .img-modal__panel{ inset: 10px; border-radius: 16px; }
  #imgModalImg{ max-width: 94vw; max-height: calc(100dvh - 190px); }
}


/* Hint onder sectietitel */
.room-section__hint{
  font-size: 12px;
  opacity: 0.85;
  margin: -6px 0 8px 0;
}


.room-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.room-item__text{ flex:1; }
.room-item__badge{
  font-size: 12px;
  font-weight: 900;
  opacity: 0.9;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

/* Tour: gesloten zaal aanduiding */
.tour-closed-badge{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 120, 120, 0.9);           /* zacht rood */
  background: rgba(255, 120, 120, 0.12);     /* heel subtiele tint */
  border: 1px solid rgba(255, 120, 120, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}


.tour-closed-inline{
  margin-left: 10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(240, 210, 106, 0.95);
  background: rgba(255, 120, 120, 0.12);
  border: 1px solid rgba(255, 120, 120, 0.30);;
  padding: 2px 8px;
  border-radius: 999px;
}

.tour-closed-box{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(240, 210, 106, 0.14);
  border: 1px solid rgba(240, 210, 106, 0.30);
  color: rgba(240, 210, 106, 0.95);
  font-size: 12px;
  line-height: 1.35;
}


/* ===========================
   AUTH (FIREBASE)
=========================== */
.auth-panel{ overflow: hidden; }
.auth-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.auth-sub{ font-size: 12px; color: rgba(255,255,255,0.75); line-height:1.35; margin-top: 3px; }
.auth-row{ display:flex; gap: 8px; flex-wrap: wrap; }

.auth-badges{ display:flex; gap: 6px; flex-wrap: wrap; align-items:center; justify-content:flex-end; }
.auth-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.auth-badge[data-kind="on"]{
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.30);
}


/* Storage pill in menu */
.menu-storage{ margin-top: 8px; }
.storage-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.storage-pill[data-kind="on"]{
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.30);
}

/* Danger button (subtle) */
.btn.danger{
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
}
.btn.danger:hover{
  background: rgba(248, 113, 113, 0.18);
}
.auth-hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.auth-msg{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.90);
  font-size: 12.5px;
  line-height: 1.35;
}
.auth-msg.error{
  border-color: rgba(255, 120, 120, 0.30);
  background: rgba(255, 120, 120, 0.12);
}
.auth-msg.ok{
  border-color: rgba(125, 211, 252, 0.30);
  background: rgba(125, 211, 252, 0.12);
}

/* Inline tip bovenaan 'Bezoek plannen' (alleen als je NIET bent aangemeld) */
.login-tip{
  margin: 10px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(240, 210, 106, 0.12);
  border: 1px solid rgba(240, 210, 106, 0.26);
  color: rgba(240, 210, 106, 0.95);
  font-size: 12.5px;
  line-height: 1.35;
}