/* Editor: Inputs halbtransparent weißer Hintergrund */
/* removed Bulma input overrides - now handled by Tailwind utilities */




/* manrope-latin-wght-normal *
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/manrope:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*/
@import url('https://fonts.cdnfonts.com/css/inter');




:root {
  --color-primary: oklch(0.6974 0.0959 84.99);
  --color-primary-dark: oklch(0.5504 0.0959 84.99);
  --color-primary-light: oklch(0.77 0.0959 84.99);
  --color-surface: #F4F4F4;
  --color-text: #2D2D2D;
  --color-white: #ffffff;
  --radius-md: 0.27rem;
}

body { font-family: 'Inter','Manrope Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Generic button component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Primary button variant */
.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

button.primary.w-full, .btn-primary.w-full{
  justify-content: space-between;
  background-color: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  display:flex;
  flex-direction: row;
  &:hover {
    background-color: var(--color-primary-dark);
  }
}


.editor-tabs li {
  display:flex;
  justify-content: center;
  padding-block:calc(0.27em + 3px) 0.27em;
  border-bottom:3px solid transparent;
  cursor:pointer;
  transition: 0.2s ease;
  &:hover {
    background-color: var(--color-primary-dark);
  }
  &.active {
    border-bottom-color: var(--color-primary);
  }

  .icon {
    line-height:0.8;
  }
}


.editor-sidebar label {
  font-size:var(--text-sm);
  display:block;
}

.editor-sidebar .fieldgroup:not(.grid) {
  display:flex;
  flex-direction: column;
  gap:0.3em;
}

.editor-sidebar .formrenderer {
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.editor-sidebar {
  --radius-md: 0.27rem;
  textarea, select, input, .alignbutton {
    background-color: hsla(0, 0%, 100%, 0.2);
    padding: 0.5em 1em;
    border-radius: var(--radius-md,0.25rem);
  }

  input[type=color] {
    padding:0;
  }

  .buttongroup button {
    border-radius:initial;
    &:first-child {
      border-top-left-radius: var(--radius-md);
      border-bottom-left-radius: var(--radius-md);
    }
    &:last-child {
      border-top-right-radius: var(--radius-md);
      border-bottom-right-radius: var(--radius-md);
    }    
  }

  textarea, select, input {
    width:100%;
  }

  .alignbutton:hover {
    background-color: var(--color-primary-dark);
  }

  .alignbutton.bg-primary {
    background-color: var(--color-primary);
  }
}

.cursor-pointer {
  cursor: pointer;
}

.element-settings-back {
  font-weight: 700;
  color:white;
  &:hover {
    color: var(--color-primary);
  }
}

/* Editor layout tweaks for Bulma */
.editor-root {
  height: 100vh;
}
.editor-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  height: 100%;
}
.editor-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid #e5e5e5;
  width: 350px; /* keep explicit for internal content sizing */
}
.editor-sidebar .editor-list {
  overflow: visible;
}
.editor-sidebar .editor-footer {
  margin-top: auto;
  padding-top: .75rem;
}
.drag-handle {
  cursor: grab;
}

/* Draggable visual states */
.is-ghost {
  opacity: 1; /* keep fully opaque to avoid confusion with inactive */
  border: 2px solid var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 15%, #ffffff);
}
.is-chosen {
  transform: scale(1.01);
}
.is-dragging {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.editor-list .card {
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

/* removed Bulma color and component overrides – Tailwind utilities are used instead */

/* Inactive sections appearance */
.card.inactive {
  background-color: hsla(0, 0%, 100%, 0.5)
}

/* ImageSelect Thumbs Hover */
.editor-sidebar .thumb:hover { border-color: rgba(255,255,255,0.6) !important; }


/* Frontend */

main section {
  padding: calc(var(--spacing) * 20);
  display: flex;
  flex-direction: column;
}