/* =========================================================
   FORMS — DOMENJÓ (base comuna)
   Fitxer: public/css/forms.css
   Ús: afegeix class="dmj-form" al <form> per aplicar el look comú
   ========================================================= */

html[data-theme="light"]{
  --dmj-form-text: #121212;
  --dmj-form-label: rgba(0,0,0,.78);
  --dmj-form-muted: rgba(0,0,0,.55);
  --dmj-form-bg: rgba(0,0,0,.02);
  --dmj-form-border: rgba(0,0,0,.14);
  --dmj-form-border-focus: rgba(146,111,37,.55);
  --dmj-form-focus-ring: rgba(146,111,37,.18);
  --dmj-form-error: #C62828;
}

html[data-theme="dark"]{
  --dmj-form-text: rgba(242,242,242,.92);
  --dmj-form-label: rgba(242,242,242,.86);
  --dmj-form-muted: rgba(242,242,242,.62);
  --dmj-form-bg: rgba(0,0,0,.33);
  --dmj-form-border: rgba(255,255,255,.16);
  --dmj-form-border-focus: rgba(160,122,34,.70);
  --dmj-form-focus-ring: rgba(160,122,34,.18);
  --dmj-form-error: rgba(255,107,107,.95);
}

/* Camps */
.dmj-form .dmj-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.dmj-form label{
  font-weight: 650;
  font-size: 12.5px;
  color: var(--dmj-form-label);
}

/* Inputs (compatibles amb .form-control / .client-input existents) */
.dmj-form input:not([type="checkbox"]):not([type="radio"]),
.dmj-form select,
.dmj-form textarea,
.dmj-form .form-control,
.dmj-form .client-input{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--dmj-form-border);
  background: var(--dmj-form-bg);
  color: var(--dmj-form-text);
  outline: none;
}

.dmj-form input:focus,
.dmj-form select:focus,
.dmj-form textarea:focus,
.dmj-form .form-control:focus,
.dmj-form .client-input:focus{
  border-color: var(--dmj-form-border-focus);
  box-shadow: 0 0 0 3px var(--dmj-form-focus-ring);
}

.dmj-form textarea{
  min-height: 96px;
  resize: vertical;
}

/* Errors */
.dmj-form .field-error{
  margin-top: 6px;
  font-size: 12px;
  color: var(--dmj-form-error);
}

/* Accions + botó primari (mateixa línia que login) */
.dmj-form .form-actions{
  margin-top: 18px;
}

.dmj-form .btn.btn-primary{
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  letter-spacing: .45px;
  background: linear-gradient(180deg, var(--gold-light, #B29A66), var(--gold, #926F25));
  color: #121212;
  cursor: pointer;
}

.dmj-form .btn.btn-primary:hover{ filter: brightness(1.05); }
.dmj-form .btn.btn-primary:active{ transform: translateY(1px); }

/* Text discret */
.dmj-form .muted{
  color: var(--dmj-form-muted);
  font-size: 12px;
}


/* ─────────────────────────────────────────────
   Password help (dmj-form)
   - reutilitzable en qualsevol formulari
   ───────────────────────────────────────────── */

.dmj-form .pwd-help{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  line-height: 1.32;
  color: rgba(242,242,242,.78);
}

html[data-theme="light"] .dmj-form .pwd-help{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.62);
}

.dmj-form .pwd-help summary{
  cursor: pointer;
  user-select: none;
  font-weight: 750;
  font-size: 12.2px;
  list-style: none;
}

.dmj-form .pwd-help summary::-webkit-details-marker{ display:none; }
.dmj-form .pwd-help summary::before{
  content: '▸';
  display:inline-block;
  margin-right: 8px;
  opacity:.85;
}
.dmj-form .pwd-help[open] summary::before{ content:'▾'; }

.dmj-form .pwd-help .pwd-help-hint{
  font-weight: 550;
  opacity: .65;
  margin-left: 6px;
}

.dmj-form .pwd-rules{
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (min-width: 620px){
  .dmj-form .pwd-rules{
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
}

.dmj-form .pwd-rules li{
  list-style: none;
  position: relative;
  padding-left: 18px;
  margin: 0;
  line-height: 1.22;
}

.dmj-form .pwd-rules li::before{
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  opacity: .65;
}

.dmj-form .pwd-rules li code{
  font-size: 11.5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  padding: 1px 6px;
  border-radius: 999px;
}

html[data-theme="light"] .dmj-form .pwd-rules li code{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

.dmj-form .pwd-rules li.is-ok{
  font-weight: 800;
  color: rgba(242,242,242,.92);
}

html[data-theme="light"] .dmj-form .pwd-rules li.is-ok{
  color: rgba(0,0,0,.78);
}

.dmj-form .pwd-rules li.is-ok::before{
  content: '✓';
  color: rgba(160,122,34,.95);
  opacity: 1;
}