/* ==========================*/
/* EduDisplay Beheer CSP Legacy CSS */
/* Update: 2026-08-20 */
/* ==========================*/
/* Hoort bij: beheer-templates (vervangt inline style="" voor CSP) */
/* Bevat: utility-classes, screenshot-modal frame, dropdown pos    */

.csp-inline {
  display: inline;
}

.csp-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.csp-thumb-96 {
  max-width: 96px;
  max-height: 96px;
}

.csp-h-300 {
  height: 300px;
}

.csp-bg-green-600-important {
  background-color: rgb(22 163 74) !important;
}

.csp-w-min-28rem {
  width: min(100%, 28rem);
}

.csp-progress-0 {
  width: 0%;
}

/* Screenshot modal / TV frame */
.csp-screenshot-dialog {
  width: fit-content;
  max-width: 90vw;
  margin: 0 auto;
  padding: 2.5vw;
  border-radius: 1.25rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.csp-screenshot-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.csp-tv-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

.csp-tv-bezel {
  background: #222;
  border-radius: 2.5rem;
  padding: 2vw;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 0 8px #444;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: fit-content;
  max-width: 80vw;
}

.csp-screenshot-image {
  display: none;
  max-width: 70vw;
  max-height: 50vh;
  height: auto;
  border-radius: 1.2rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  background: #111;
}

.csp-screenshot-image.is-visible {
  display: block;
}

@media (max-width: 639px) {
  .csp-tv-bezel {
    border-radius: 1.5rem;
    padding: 2.5vw;
  }

  .csp-screenshot-image {
    border-radius: 0.7rem;
  }
}

/* Popper/Flowbite dropdown initial placement fallback (JS may override via CSSOM) */
.csp-nav-dropdown-pos {
  position: absolute;
  inset: 0 auto auto 0;
  margin: 0;
  transform: translate(0, 50px);
}