:root{ --accent:#2584cc; --bg:#f2f4f7; --panel:#ffffff; --line:#e5e7eb; --slider-w:260px; --thumb:20px; --track-h:6px;}
body{ margin:0; background:var(--bg); color:#111; font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial }
.header{ background:var(--accent); color:#fff; padding:16px 24px; font-weight:700; font-size:25px; letter-spacing:.2px }
.header-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:flex-start; gap:12px }
.header-btn{ background:transparent; border:0; color:#fff; font:inherit; width:100%; text-align:left; cursor:pointer; padding:0 }
.header-btn:focus{ outline:2px solid #dbeafe; outline-offset:2px }
.header-logo{ height:60px; width:auto }
.container{ max-width:1200px; margin:24px auto; z-index:1; background:var(--panel); padding:20px; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.08); position:relative }
.grid{ display:grid; grid-template-columns:320px 1fr; gap:20px }

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/roboto/v30/roboto-regular.woff2') format('woff2');
  font-display: swap;
}

@media (max-width:1100px){ .grid{ grid-template-columns:1fr } }
#resetApp {
  cursor: pointer;            /* handje bij hover */
  transition: color 0.2s;     /* zachte overgang */
}

@media (max-width: 768px) {
  .brand-logo {
    display: none !important;
  }
}

@media (max-width: 900px){
  .container{ margin:12px auto; padding:12px }
  .viewer-row{ flex-direction:column }
  #jsmolContainer{
    min-width:0;         /* override 750px */
    width:100%;          /* pas aan scherm */
    min-height:360px;    /* iets lager op mobiel */
    padding:8px
  }
  #jsmolContainer.pair{ width:100% }
  .side-buttons{ flex-direction:row; gap:8px }
  .result-box{ max-height:40vh }  /* voorkomt dat lijst alles opduwt */
}

/* voorkom horizontale scroll op mobiel */
html, body { overflow-x:hidden }

#resetApp:hover {
  color: #dbeafe;             /* lichtere tint */
}
.fab-suggest{ position:fixed; right:24px; bottom:24px; border-radius:9999px; padding:.6rem .9rem; box-shadow:0 6px 20px rgba(0,0,0,.15); z-index:1000 }
.filter-card{ border:1px solid var(--line); border-radius:12px; padding:14px }
.brand-logo{ position:fixed; left:24px; bottom:24px; z-index:1000}
.brand-logo img{ height:100px; width:auto }
.filter-title{ margin:0 0 8px 0; font-weight:600; font-size:16px;}
.pill-grid{ display:flex; flex-direction:column; gap:8px }
.pill{ position:relative }
.pill input{ position:absolute; opacity:0; inset:0; cursor:pointer }
.pill span{ display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:9999px; background:#fff; font-size:16px; transition:.15s }
.pill input:checked + span{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,132,204,.15) }
#movie-controls{ display:none }

.search-row{ display:flex; gap:8px; margin-top:10px }
.select2-selection{ border-radius:12px !important; border:1px solid var(--line) !important; min-height:42px !important }
.btn{ appearance:none; border:0; background:var(--accent); color:#fff; padding:.55rem .9rem; border-radius:.75rem; font-size:14px; cursor:pointer }
.btn.secondary{ background:#334155 }

.result-box{ margin-top:12px; max-height:520px; overflow-y:auto; overflow-x:hidden; border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px }
.result-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.result-btn{ flex:1; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; text-align:left; cursor:pointer; font-size:16px }
.result-btn:hover{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,132,204,.15) }
.result-btn[disabled]{ opacity:.55; pointer-events:none }
.result-btn.selected{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,132,204,.15) }

.results-column { display:flex; flex-direction:column; min-height:0; }
#resultsBox { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
button, .result-btn { touch-action: manipulation; }

.info-btn{ width:28px; height:28px; border-radius:50%; border:1px solid #cbd5e1; color:#334155; font-weight:600; display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.info-btn:hover{ border-color:var(--accent); color:var(--accent) }
.info-btn img{ width:20px; height:20px; display:block }
.info-container{ display:flex; align-items:center; gap:6px }
.info-text{ font-size:13px; color:#334155; display:none; max-width:200px }
.info-container.active .info-text{ display:inline }

#tipOverlay{ position:fixed; top:16px; right:16px; max-width:360px; background:#0f172a; color:#fff; padding:10px 12px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.25); z-index:9999; display:none }
#tipOverlay button{ margin-left:8px; background:#1f2937; border:0; color:#fff; border-radius:8px; padding:4px 8px; cursor:pointer }

.viewer-row{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap }
#jsmolContainer {
  display: block;
  position: relative;
  margin-inline:auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  width: fit-content;
  min-width: 750px;
  min-height: 530px;
  z-index: 0;
}
#jsmolContainer.pair{ min-height:0; height:auto; width:790px; margin-inline:auto }
.pair-row{ display:flex; gap:16px }
.pair-row > div{ flex:1; min-width:0 }
.viewer-left{ display:flex; flex-direction:column; gap:10px }
.side-buttons{ display:flex; flex-direction:column; gap:8px }

.toggle-row{ display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; margin-top:12px }
.toggle-container{ display:flex; align-items:center; gap:8px }
.toggle-switch{ position:relative; width:44px; height:24px; border-radius:9999px; background:#cbd5e1; cursor:pointer; transition:background .2s }
.toggle-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:left .2s }
.toggle-switch.active{ background:var(--accent) }
.toggle-switch.active::after{ left:22px }

#irplot,#reactionplot{ margin-top:16px; width:100% }
#reaction-buttons{ display:none; margin-top:10px; gap:10px; align-items:center }
img[disabled]{ opacity:.5; pointer-events:none }

.ctrl-icon{ width:40px; height:40px; cursor:pointer }
.ctrl-icon[disabled]{ opacity:.5; pointer-events:none }

.speed-slider{ width:var(--slider-w); appearance:none; -webkit-appearance:none; background:transparent }
.speed-slider::-webkit-slider-runnable-track{ height:var(--track-h); background:linear-gradient(#9aa3ad,#6b7280); border-radius:9999px }
.speed-slider::-moz-range-track{ height:var(--track-h); background:linear-gradient(#9aa3ad,#6b7280); border-radius:9999px }
.speed-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:var(--thumb); height:var(--thumb); background:#fff; border:1px solid #cbd5e1; border-radius:50%; margin-top:calc((var(--track-h) - var(--thumb))/2) }
.speed-slider::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); background:#fff; border:1px solid #cbd5e1; border-radius:50% }

#orbital-buttons-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.btn-orbital {
  padding: .4rem .8rem;
  font-size: 15px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn-orbital:hover {
  background: #1c6fb8;
}


.tick-labels{ width:var(--slider-w); padding-inline:calc(var(--thumb)/2); display:flex; justify-content:space-between; margin-top:4px; font-size:16px; color:#334155 }
.controlbar{ display:flex; align-items:center; gap:12px }
.ctrl-btn{ width:40px; height:40px; border-radius:50%; border:none; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer }
.ctrl-btn[disabled]{ opacity:.5; pointer-events:none }
.ctrl-btn img{ display:block; object-fit:contain }
#play-reaction img,
#pause-reaction img,
#reset-reaction img {
  width:30px !important;
  height:auto !important;
  cursor:pointer;
}

/* Overschrijf ctrl-btn-stijlen voor movie-buttons */
#movie-play,
#movie-pause,
#movie-reset {
  all: unset;                 /* verwijdert geërfde ctrl-btn-stijlen */
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
}

/* Specifiek de afbeeldingen */
#movie-play img,
#movie-pause img,
#movie-reset img {
  width: 30px !important;
  height: auto !important;
  cursor: pointer;
}

#movie-play[disabled] img,
#movie-pause[disabled] img,
#movie-reset[disabled] img {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Save Button ===== */
#saveButton {
  position: absolute;
  bottom: 8px;
  left: 8px;
  opacity: 0.5;
  z-index: 10000;
  background: transparent;
  border: none;
  cursor: pointer;
}

#saveButton:hover {
  opacity: 0.5;
}

.result-main{ font-size:16px; font-weight:500 }
.result-sub{ font-size:14px; color:#334155; margin-top:4px }

@media (max-aspect-ratio: 3/2) and (hover: none) and (pointer: coarse) {
  /* Verberg logo */
  .brand-logo { display: none !important; }

  /* Molecuulwijzer titel (in blauwe balk) */
  .header {
    font-size: 50px !important;
    padding: 18px 24px;
  }

  /* Categorieënbox */
  .filter-card {
    max-width: 750px;
    margin: 0 auto;
  }

  /* Tekst “Categorieën” */
  .filter-title {
    font-size: 35px !important;
    font-weight: 700;
    margin-bottom: 10px;
  }

  /* Categorieknoppen */
  .pill span {
    font-size: 28px !important;
    padding: 10px 14px;
  }

  /* Toggle-tekst (blijft 20 px) */
  .toggle-container label,
  .toggle-container span,
  .toggle-row {
    font-size: 20px !important;
  }

  /* Toggle-schakelaar groter */
  .toggle-switch {
    width: 60px;
    height: 32px;
  }

  .toggle-switch::after {
    width: 28px;
    height: 28px;
    left: 2px;
    top: 2px;
  }

  .toggle-switch.active::after {
    left: 30px;
  }

  /* Zoekveld en knop */
  .search-row input[type="text"],
  .select2-selection {
    font-size: 28px !important;
    min-height: 52px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }

  .btn {
    font-size: 28px;
    padding: 0.8rem 1.4rem;
    border-radius: 0.9rem;
  }

  .fab-suggest {
    display: none !important;
  }

  /* Resultatenbox */
  #resultsBox {
    width: 100%;
    max-width: 750px;
    margin: 20px auto 0 auto;
  }

  .result-main { 
    font-size: 28px; 
    font-weight: 600; 
  }

  .result-sub { 
    font-size: 24px; 
    color: #334155; 
    margin-top: 4px; 
  }

  #jsmolContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .viewer-row {
    justify-content: center;
  }

  .header-logo img {
    height: 150px !important;
    width: auto !important;
  }

  /* Systeemtitel boven JSmol */
  #moleculeTitle,
  h2#molecule-title,
  .molecule-title {
    font-size: 28px !important;
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
  }
}


@media (any-pointer: coarse), (max-device-width: 1024px) {
  .brand-logo, .brand-logo img { display: none !important; }
  #saveButton {
    display: none !important;
  }
}