/* ==========================================================
   LJH FORMS & CONTROLS – STABLE v1.1
   Endast visuella regler för:
   - formulär
   - inputs / textarea
   - knappar & states

   ❌ Påverkar INTE:
   - rubriker
   - content-text
   - services / story
========================================================== */


/* ==========================================================
   1. FORM BAS – STRUCTURE ONLY
========================================================== */

.ljh-form {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* Grid för input-rader */
.ljh-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* Enskilt fält */
.ljh-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Labels */
.ljh-form-field label {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Textarea */
.ljh-form textarea {
  resize: vertical;
  min-height: 160px;
}


/* ==========================================================
   2. INPUTS & TEXTAREA – GLASS (AQUA DARK)
========================================================== */

.ljh-form input,
.ljh-form textarea {
  padding: 0.75rem 1rem;
  border-radius: 16px;

  font-size: 0.95rem;
  line-height: 1.45;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.14)
  );

  border: 1px solid rgba(255,255,255,0.28);
  color: #f8fafc;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 0 20px rgba(255,255,255,0.10),
    0 8px 22px rgba(0,0,0,0.35);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Focus */
.ljh-form input:focus,
.ljh-form textarea:focus {
  outline: none;
  border-color: rgba(120,180,255,0.65);
  box-shadow:
    0 0 0 2px rgba(120,180,255,0.25),
    inset 0 0 24px rgba(255,255,255,0.18);
}


/* ==========================================================
   PLACEHOLDER – FORM ONLY
========================================================== */

.ljh-form input::placeholder,
.ljh-form textarea::placeholder {
  color: rgba(147,197,253,0.85);
  opacity: 0.45;
}

.ljh-form input:focus::placeholder,
.ljh-form textarea:focus::placeholder {
  opacity: 0.35;
}


/* ==========================================================
   3. IDEA FORM – LAYOUT & ACTIONS
   Tillägg ovanpå .ljh-form
========================================================== */

.ljh-idea-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Labels + inputs */
.idea-labels,
.idea-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 1rem;
}

/* Textarea wrapper */
.idea-textarea {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.idea-textarea textarea {
  width: 80%;
  min-height: 160px;
  border-radius: 22px;
}

/* Submit / action row – SINGLE SOURCE */
.idea-submit-row {
  margin-top: 2.4rem;
  padding-top: 1.6rem;

  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: flex-start;

  border-top: 1px solid rgba(255,255,255,0.08);
}

.idea-submit-row .ljh-form-btn {
  min-width: 220px;
}


/* ==========================================================
   4. FORM ROWS (LOCKED / READONLY)
========================================================== */

.ljh-form-row {
  display: grid;
  grid-template-columns: 140px auto auto auto;
  gap: 12px;
  align-items: center;
}

.ljh-form-row.is-locked {
  opacity: 0.6;
  pointer-events: none;
}


/* ==========================================================
   5. BUTTON BASE (kopplar till .ljh-btn)
========================================================== */

.ljh-form-btn {
  background: transparent;
  border: 1px solid transparent;
}

.ljh-form-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ==========================================================
   6. PRIMARY / POSITIVE ACTIONS
========================================================== */

.ljh-form-btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow:
    0 10px 26px rgba(37,99,235,0.45),
    inset 0 0 14px rgba(255,255,255,0.18);
}

.ljh-form-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(37,99,235,0.55);
}

.ljh-form-btn-positive {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ecfdf5;
  box-shadow:
    0 10px 24px rgba(34,197,94,0.45),
    inset 0 0 12px rgba(255,255,255,0.15);
}

.ljh-form-btn-positive:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 32px rgba(34,197,94,0.6);
}

.ljh-form-btn-frozen {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  color: #ecfeff;
  cursor: not-allowed;
}


/* ==========================================================
   7. TOGGLE / CHECKBOX
========================================================== */

.ljh-form-btn-toggle {
  background: rgba(15,23,42,0.65);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.18);
}

.ljh-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.ljh-checkbox input {
  accent-color: var(--ljh-aqua);
}


/* ==========================================================
   8. CLOSE / EXIT
========================================================== */

.ljh-form-btn-close {
  background: rgba(15,23,42,0.85);
  color: #fff;
  border: 1px solid rgba(255,90,90,0.45);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.06),
    0 0 10px rgba(255,60,60,0.35);
}

.ljh-form-btn-close:hover {
  box-shadow:
    0 0 18px rgba(255,60,60,0.6);
}


/* ==========================================================
   9. RESPONSIVE
========================================================== */

@media (max-width: 900px) {
  .ljh-form-grid,
  .idea-labels,
  .idea-inputs {
    grid-template-columns: 1fr;
  }

  .idea-textarea textarea {
    width: 100%;
  }

  .idea-submit-row {
    justify-content: center;
  }
}


/* ===============================
   CTA - EDIT BUTTON STATES
    activate for scheme among 
    others similar functions
================================ */

/* Grundläge */
.ljh-button.schema-edit {
  transition: all .25s ease;
}

/* Aktiv – redo att redigera */
.ljh-button.schema-edit.is-ready {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow:
    0 0 6px rgba(59,130,246,.6),
    0 0 14px rgba(59,130,246,.45);
}

/* Subtil puls (valfritt men snyggt) */
.ljh-button.schema-edit.is-ready:hover {
  box-shadow:
    0 0 8px rgba(59,130,246,.8),
    0 0 18px rgba(59,130,246,.6);
}

/* Redigering aktiv → neutral */
.ljh-button.schema-edit.is-editing {
  background: #3a3f4b;
  color: #cbd5e1;
  box-shadow: none;
  cursor: default;
}