/**
 * Interbit CMS — beheeromgeving in de TOOSST-vormgeving.
 *
 * Ontwerp & realisatie: j.kiewiet
 * Website: https://interbit.nl
 */

/* ======================================================================
   00. CMS — BASIS & FORMULIEREN
   ====================================================================== */

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-medium.ttf') format('truetype');
  font-weight: 500 900;
  font-display: swap
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-800.ttf') format('truetype');
  font-weight: 800;
  font-display: swap
}

:root {
  --bg: #180d17;
  --panel: #21151f;
  --panel2: #2c1c29;
  --text: #fff3fa;
  --muted: #bba6b6;
  --accent: #ee83bb;
  --magenta: #c82380;
  --line: #edb8d81f;
  --display: 'Barlow Condensed',Impact,sans-serif;
  color-scheme: dark;
  font: 14px/1.55 'DM Sans',Arial,sans-serif
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text)
}

h1,h2,h3,p {
  margin: 0
}

a {
  color: var(--accent);
  text-decoration: none
}

button,input,textarea,select {
  font: inherit
}

button,a {
  touch-action: manipulation
}

button,.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background .2s,border-color .2s
}

button:hover,.button:hover {
  background: #422436;
  border-color: #ee83bb77
}

button:disabled {
  opacity: .4;
  cursor: default
}

.primary {
  background: var(--magenta);
  border-color: var(--magenta);
  color: white
}

.primary:hover {
  background: #dc2d92;
  border-color: #ed79b7
}

.quiet {
  background: transparent
}

.icon-button {
  width: 38px;
  min-height: 38px;
  padding: 4px;
  font-size: 23px;
  flex-shrink: 0
}

.text-button {
  padding: 0;
  min-height: 36px;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 12px
}

.muted,.help {
  color: var(--muted)
}

.help {
  font-size: 12px;
  line-height: 1.65;
  margin-top: 8px
}

.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--accent)
}

h1 {
  font: 800 48px/.98 var(--display);
  letter-spacing: -.01em
}

h2 {
  font: 800 32px/1.08 var(--display)
}

h3 {
  font: 800 24px/1.12 var(--display)
}

[hidden] {
  display: none!important
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px
}

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 19px
}

label .required {
  color: var(--accent)
}

input:not([type=checkbox]),textarea,select {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 7px;
  padding: 11px 12px;
  min-height: 45px;
  border: 1px solid #f1bbd52b;
  border-radius: 5px;
  background: #190e17;
  color: var(--text);
  font-size: 14px
}

input:focus,textarea:focus,select:focus {
  border-color: var(--accent);
  outline: 2px solid #ee83bb22;
  outline-offset: 0
}

textarea {
  resize: vertical;
  line-height: 1.75;
  min-height: 110px
}

input[type=checkbox] {
  accent-color: var(--magenta);
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px
}

.two-fields {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap
}

.wordmark {
  font: 800 43px/.9 var(--display);
  letter-spacing: .045em
}

.brand-label {
  border-left: 1px solid var(--line);
  padding: 9px 0 9px 18px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .16em
}

/* ======================================================================
   01. INLOGGEN
   ====================================================================== */

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 32px;
  background: radial-gradient(ellipse at 12% 0%,#a41b6236,transparent 60%)
}

.login-card {
  width: min(510px,100%);
  padding: 46px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--magenta);
  border-radius: 12px;
  background: linear-gradient(140deg,#2a1726,#1d131c);
  box-shadow: 0 30px 100px #0004
}

.login-card .brand {
  margin-bottom: 44px
}

.login-card form {
  margin-top: 28px
}

.login-card .primary {
  width: 100%;
  justify-content: space-between;
  margin-top: 24px
}

.form-message {
  min-height: 20px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 12px
}

.login-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  font-size: 11px
}

.login-footer span {
  color: var(--muted);
  text-align: right
}

.login-footer strong {
  font-weight: 500;
  color: var(--text)
}

/* ======================================================================
   02. WERKRUIMTE
   ====================================================================== */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh
}

/* ======================================================================
   03. HEADER & ACTIES
   ====================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  flex-shrink: 0;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: #1e121c
}

.save-state {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px
}

.state-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9bccac;
  flex-shrink: 0
}

.state-dot.dirty {
  background: var(--accent)
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto
}

.workspace {
  display: grid;
  grid-template-columns: 224px 350px minmax(0,1fr);
  min-height: 0;
  flex: 1
}

/* ======================================================================
   04. ZIJBALK & BERICHTEN
   ====================================================================== */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: #1b1019
}

.sidebar-eyebrow {
  padding: 25px 22px 12px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .15em
}

.editor-nav {
  display: grid;
  gap: 5px;
  padding: 0 12px 20px;
  border-bottom: 1px solid var(--line)
}

.editor-nav button {
  justify-content: flex-start;
  background: none;
  border-color: transparent;
  min-height: 48px;
  font-size: 14px
}

.editor-nav button>span:first-child {
  font-size: 21px;
  width: 25px
}

.editor-nav button.active {
  background: #dc3b9420;
  border-color: #ee83bb2c;
  color: #ffc2e1
}

.count {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #ffffff0b;
  color: var(--muted)
}

.list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted)
}

.record-list {
  padding: 0 12px 20px;
  overflow: auto;
  min-height: 80px;
  flex: 1
}

.record-card {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  margin-bottom: 8px;
  padding: 13px 10px;
  background: transparent;
  border: 1px solid transparent;
  text-align: left
}

.record-card.active {
  background: #ee83bb0b;
  border-color: #ee83bb55
}

.record-date {
  width: 33px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--accent);
  line-height: 1.1
}

.record-date strong {
  font: 800 29px/.95 var(--display)
}

.record-date small {
  font-size: 9px;
  margin-top: 5px
}

.record-summary {
  min-width: 0
}

.record-summary strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere
}

.record-summary small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px
}

.sidebar-tools {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line);
  padding: 12px
}

.sidebar-tools button {
  justify-content: flex-start;
  background: none;
  border: 0;
  font-size: 11px;
  min-height: 35px;
  padding: 8px 9px;
  color: var(--muted)
}

.account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 19px;
  border-top: 1px solid var(--line);
  font-size: 11px
}

.credits {
  padding: 0 19px 18px;
  color: var(--muted);
  font-size: 10px
}

.credits strong {
  color: var(--accent);
  font-weight: 500
}

/* ======================================================================
   05. INHOUD BEWERKEN
   ====================================================================== */

.inspector {
  min-width: 0;
  overflow: auto;
  padding: 26px 24px 36px;
  background: var(--panel);
  border-right: 1px solid var(--line)
}

.inspector .eyebrow {
  margin-bottom: 12px
}

.inspector-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px
}

.inspector-intro {
  color: var(--muted);
  font-size: 12px;
  margin-top: 13px
}

.field-section {
  margin-top: 27px;
  padding-top: 22px;
  border-top: 1px solid var(--line)
}

.field-section h3 {
  font-size: 21px
}

.field-section label:first-of-type {
  margin-top: 16px
}

.visibility-box {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 24px;
  background: #ffffff03
}

.visibility-box label {
  margin: 0
}

.visibility-box .help {
  font-size: 11px
}

.photo-card {
  margin-top: 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #180d17
}

.photo-card img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  border-radius: 3px
}

.photo-card p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  overflow-wrap: anywhere
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px
}

.inline-actions button {
  font-size: 11px;
  min-height: 36px;
  padding: 8px 11px
}

.record-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line)
}

.record-actions button {
  font-size: 11px
}

.danger {
  color: #ffb5c2;
  border-color: #ffb5c23a;
  background: #ffb5c20a
}

.empty-state {
  padding: 32px 8px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px
}

.empty-state h2 {
  color: var(--text);
  margin-bottom: 18px
}

.empty-state button {
  margin-top: 22px
}

/* ======================================================================
   06. WEBSITEVOORBEELD
   ====================================================================== */

.preview-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #110b10
}

.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 20px 22px 13px
}

.preview-toolbar p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px
}

.preview-toolbar button {
  font-size: 11px;
  min-height: 34px
}

.preview-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 16px
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px
}

.segmented button {
  font-size: 10px;
  min-height: 28px;
  padding: 5px 10px;
  border: 0;
  background: none
}

.segmented button.active {
  background: #513044;
  color: #ffd3e9
}

#preview-status {
  font-size: 10px;
  color: var(--muted)
}

.preview-stage {
  flex: 1;
  min-height: 0;
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  background: radial-gradient(#e3a9cd12 1px,transparent 1px) 0 0/16px 16px
}

.preview-surface {
  position: relative;
  flex-shrink: 0
}

.preview-surface iframe {
  position: absolute;
  inset: 0;
  max-width: none;
  border: 1px solid #ffcae532;
  border-radius: 5px;
  background: #210e1d;
  transform-origin: top left;
  box-shadow: 0 15px 55px #0005
}

.preview-bottom {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px
}

.preview-bottom span:first-child {
  display: flex;
  align-items: center;
  gap: 8px
}

.design-focus .workspace {
  grid-template-columns: minmax(0,1fr)
}

.design-focus .sidebar,.design-focus .inspector {
  display: none
}

.design-focus .preview-column {
  grid-column: 1;
  grid-row: 1
}

.app[aria-busy=true] .workspace {
  pointer-events: none;
  opacity: .85
}

/* ======================================================================
   07. MELDINGEN
   ====================================================================== */

#notice {
  position: fixed;
  z-index: 300;
  left: 50%;
  top: 94px;
  transform: translateX(-50%);
  max-width: min(560px,92vw);
  padding: 13px 22px;
  border: 1px solid #ee83bb66;
  border-radius: 8px;
  background: #412033;
  color: var(--text);
  box-shadow: 0 12px 35px #0005;
  font-size: 13px
}

#notice.error {
  background: #532533;
  border-color: #ffa3b5
}

/* ======================================================================
   08. DIALOOGVENSTERS
   ====================================================================== */

dialog {
  width: min(680px,92vw);
  max-height: 85dvh;
  padding: 30px;
  border: 1px solid #ee83bb44;
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 30px 100px #0007
}

dialog::backdrop {
  background: #080307b8;
  backdrop-filter: blur(4px)
}

.dialog-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px
}

.dialog-heading .eyebrow {
  margin-bottom: 8px
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px
}

.dialog-feedback {
  color: var(--accent);
  margin-top: 18px;
  font-size: 13px
}

.library-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 24px
}

.library-actions span {
  font-size: 11px
}

/* ======================================================================
   09. MEDIABIBLIOTHEEK
   ====================================================================== */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(145px,1fr));
  gap: 14px
}

.media-card {
  padding: 0;
  display: block;
  overflow: hidden;
  text-align: left;
  background: #160b13
}

.media-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block
}

.media-card span {
  display: block;
  padding: 10px;
  font-size: 11px;
  overflow-wrap: anywhere
}

/* ======================================================================
   10. VERSIEGESCHIEDENIS
   ====================================================================== */

.history-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 12px
}

.history-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 5px 0 13px
}

.history-card button {
  font-size: 12px
}

#password-form>.primary {
  margin-top: 24px
}

/* ======================================================================
   WEERGAVE: (min-width:1600px)
   ====================================================================== */

@media(min-width:1600px) {
  .workspace {
    grid-template-columns: 240px 390px minmax(0,1fr)
  }

  .inspector {
    padding: 32px
  }

}

/* ======================================================================
   WEERGAVE: (max-width:1199px)
   ====================================================================== */

@media(max-width:1199px) {
  .workspace {
    grid-template-columns: 195px 315px minmax(0,1fr)
  }

  .topbar {
    padding-inline: 18px;
    gap: 18px
  }

  .save-state {
    display: none
  }

  .inspector {
    padding: 23px 20px
  }

  .preview-controls {
    flex-wrap: wrap
  }

  .brand-label {
    display: none
  }

  .top-actions {
    gap: 6px
  }

  .top-actions button,.top-actions .button {
    padding-inline: 12px;
    font-size: 12px
  }

  .open-site {
    display: none
  }

}

/* ======================================================================
   WEERGAVE: (max-width:950px)
   ====================================================================== */

@media(max-width:950px) {
  .app {
    height: auto;
    min-height: 100dvh
  }

  .workspace {
    grid-template-columns: 190px minmax(0,1fr);
    grid-template-rows: auto 600px;
    flex: initial
  }

  .sidebar {
    grid-column: 1;
    grid-row: 1/3;
    position: sticky;
    top: 0;
    max-height: 100dvh
  }

  .inspector {
    grid-column: 2;
    grid-row: 1;
    overflow: visible;
    border-right: 0
  }

  .preview-column {
    grid-column: 2;
    grid-row: 2;
    border-top: 1px solid var(--line)
  }

  .design-focus .workspace {
    grid-template-rows: calc(100dvh - 84px)
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20
  }

  .preview-bottom span:last-child {
    display: none
  }

}

/* ======================================================================
   WEERGAVE: (max-width:640px)
   ====================================================================== */

@media(max-width:640px) {
  .topbar {
    flex-wrap: wrap;
    gap: 12px;
    min-height: 120px;
    padding: 14px 18px
  }

  .wordmark {
    font-size: 36px
  }

  .brand-label {
    display: block
  }

  .top-actions {
    width: 100%;
    margin: 0;
    gap: 7px
  }

  .top-actions #publish {
    margin-left: auto
  }

  .top-actions button {
    min-height: 39px;
    font-size: 12px;
    padding-inline: 10px
  }

  .top-actions .icon-button {
    width: 34px
  }

  .workspace {
    display: flex;
    flex-direction: column
  }

  .sidebar {
    position: static;
    max-height: none;
    border-right: 0
  }

  .sidebar-eyebrow {
    display: none
  }

  .editor-nav {
    grid-template-columns: 1fr 1fr;
    padding: 12px 14px;
    border-bottom: 0
  }

  .list-heading {
    padding-top: 0
  }

  .record-list {
    display: flex;
    gap: 8px;
    padding-bottom: 12px;
    max-height: 132px;
    min-height: 0
  }

  .record-card {
    min-width: 210px;
    width: 210px;
    margin: 0
  }

  .sidebar-tools {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 14px;
    gap: 3px
  }

  .sidebar-tools button {
    font-size: 10px;
    min-height: 32px;
    padding: 6px
  }

  .account {
    padding-block: 2px
  }

  .credits {
    padding-bottom: 12px
  }

  .inspector {
    padding: 26px 20px
  }

  .two-fields {
    gap: 12px
  }

  .preview-column {
    height: 620px;
    flex-shrink: 0
  }

  .design-focus .preview-column {
    height: calc(100dvh - 132px)
  }

  .preview-toolbar {
    padding-inline: 18px
  }

  .preview-controls {
    padding-inline: 18px
  }

  .preview-stage {
    padding: 12px
  }

  .preview-bottom {
    padding-inline: 18px
  }

  .login-card {
    padding: 30px 24px
  }

  .login-card h1 {
    font-size: 42px
  }

  .login-card .brand {
    gap: 12px
  }

  .brand-label {
    padding-left: 12px;
    font-size: 8px
  }

  input:not([type=checkbox]),textarea,select {
    font-size: 16px
  }

  dialog {
    padding: 24px
  }

  .login-footer {
    font-size: 10px
  }

}

/* ======================================================================
   WEERGAVE: (prefers-reduced-motion:reduce)
   ====================================================================== */

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition: none!important;
    animation: none!important
  }

}