/* ==========================================================
   LJH-GADGETS.CSS
   UI-reglage & knappar (END OF STORY)

   Ansvar:
   - Endast klickbara element
   - Ingen layout
   - Inga formulärfält
   - Inga labels / inputs

   Filosofi:
   Forms & components LÅNAR knappar.
   Gadgets ÄGER knappar.
========================================================== */


/* ==========================================================
   1. BUTTON BASE
   Struktur & beteende (alla knappar)
========================================================== */

.ljh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.7rem 1.6rem;
  border-radius: 999px;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;

  border: 1px solid transparent;
  background: transparent;
  color: inherit;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.ljh-btn:hover {
  transform: translateY(-1px);
}

.ljh-btn:active {
  transform: translateY(0);
}

.ljh-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================
   2. PRIMARY ACTION
   Skicka / Spara / Bekräfta
   Aqua-dark glas (premium)
========================================================== */

.ljh-btn-primary {
  background: linear-gradient(
    180deg,
    rgba(140,190,255,0.55),
    rgba(60,120,220,0.55)
  );

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

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 0 18px rgba(255,255,255,0.18),
    0 10px 26px rgba(0,0,0,0.45);
}


/* ==========================================================
   DISABLED = HELT DÖD
========================================================== */

.ljh-btn-primary:disabled {
  opacity: 0.45;
  filter: grayscale(25%) brightness(0.9);
  box-shadow: none;
  cursor: not-allowed;
}

.ljh-btn-primary:disabled:hover,
.ljh-btn-primary:disabled:active {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}


/* ==========================================================
   BLOCKERA ALL HOVER OM INTE REDO
========================================================== */

.ljh-btn-primary:not(.is-ready):hover,
.ljh-btn-primary:not(.is-ready):active {
  transform: none;
  box-shadow: inherit;
  filter: inherit;
}


/* ==========================================================
   READY STATE – NU FÅR DEN LEVA
========================================================== */

.ljh-btn-primary.is-ready {
  opacity: 1;
  filter: saturate(110%);
}

.ljh-btn-primary.is-ready:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 0 0 1px rgba(160,210,255,0.45),
    0 0 26px rgba(140,200,255,0.65),
    0 18px 38px rgba(0,0,0,0.65);
}

.ljh-btn-primary.is-ready:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35),
    0 0 14px rgba(120,180,255,0.45);
}






/* ==========================================================
   3. SECONDARY / VIEW ACTION
   Visa / Avbryt / Neutral (förstärkt synlighet)
========================================================== */

.ljh-btn-secondary {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.06)
  );

  color: #e5edff;

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

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 20px rgba(0,0,0,0.45);
}

.ljh-btn-secondary:hover {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.10)
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 12px 28px rgba(0,0,0,0.55);
}



/* ==========================================================
   4. POSITIVE ACTION
   Rösta / Gilla / Godkänn
========================================================== */

.ljh-btn-positive {
  background: linear-gradient(
    180deg,
    rgba(60,200,140,0.55),
    rgba(20,160,100,0.55)
  );

  color: #ecfdf5;

  border: 1px solid rgba(255,255,255,0.35);

  box-shadow:
    inset 0 0 16px rgba(255,255,255,0.15),
    0 10px 26px rgba(20,120,80,0.45);
}

.ljh-btn-positive:hover {
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.2),
    0 16px 34px rgba(20,120,80,0.6);
}


/* ==========================================================
   5. FROZEN / LOCKED STATE
   Redan röstat / låst
========================================================== */

.ljh-btn-frozen {
  background: rgba(255,255,255,0.12);
  color: #cbd5f5;

  border: 1px solid rgba(255,255,255,0.25);

  box-shadow:
    inset 0 0 14px rgba(255,255,255,0.2);

  cursor: not-allowed;
}


/* ==========================================================
   6. CLOSE / EXIT ACTION
   Stäng modal / Avbryt flöde
========================================================== */

.ljh-btn-close {
  background: rgba(15,23,42,0.85);
  color: #ffffff;

  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-btn-close:hover {
  box-shadow:
    0 0 18px rgba(255,60,60,0.6),
    0 0 32px rgba(255,40,40,0.4);
}


/* ==========================================================
   VIEW ACCENT – sekundär fokus
========================================================== */

.ljh-btn-secondary.is-view {
  letter-spacing: 0.02em;
  font-weight: 650;
  color: #f0f6ff;
}