/* ==========================================================================
   1. ESTILS BASE MODERNS (Alineació Vertical - `class="form-vertical"`)
   ========================================================================== */

/* Targeta base per a formularis verticals (Edició, Registre, etc.) */
form.form-vertical {
  background-color: var(--nuria-bg-light, #f8fafc);
  border: 1px solid var(--nuria-border, #cbd5e1);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 20px !important;
  width:100%;
  margin: 20px auto;
  margin-top:0px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--nuria-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

form.form-vertical table {
  width: 100%;
  border-collapse: collapse;
}

/* Files de camps en columna (Un sota l'altre) */
form.form-vertical tr.form-element {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
}

/* Capçalera / Títol de Secció (Banner d'extrem a extrem) */
form.form-vertical tr.form-section {
  grid-column: 1 / -1 !important;
  width: calc(100% + 40px) !important;
  background-color: var(--nuria-navy, #1F336E) !important; /* Blau Marí Núria */
  margin: -20px -20px 12px -20px !important;
  padding: 12px 20px !important;
  box-sizing: border-box;
  display: block !important;
}

form.form-vertical tr.form-section th {
  display: block !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   2. ESTILS PER A FILTRES HORITZONTALS (`class="form-filter"`)
   ========================================================================== */

/* Targeta base per a formularis de filtre (Ample Complet) */
form.form-filter {
  background-color: var(--nuria-bg-light, #f8fafc);
  border: 1px solid var(--nuria-border, #cbd5e1);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 20px !important;
  width: 100%;
  box-sizing: border-box;
  margin: 15px 0 30px 0;
  overflow: hidden;
  font-family: var(--nuria-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Graella ajustada per fer cabre tots els camps a la mateixa línia */
form.form-filter table,
form.form-filter tbody {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px 16px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Files de camps en filtre */
form.form-filter tr.form-element {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* Capçalera del filtre (Banner d'extrem a extrem) */
form.form-filter tr.form-section {
  grid-column: 1 / -1 !important;
  width: calc(100% + 40px) !important;
  background-color: var(--nuria-navy, #1F336E) !important; /* Blau Marí Núria */
  margin: -20px -20px 12px -20px !important;
  padding: 12px 20px !important;
  box-sizing: border-box;
  display: block !important;
}

form.form-filter tr.form-section th {
  display: block !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   3. ESTILITZACIÓ COMÚ D'INPUTS I BOTONS (`form-filter` i `form-vertical`)
   ========================================================================== */

/* Etiquetes (Labels) */
form.form-filter td.form-label, form.form-vertical td.form-label,
form.form-filter td.form-label-error, form.form-vertical td.form-label-error {
  background-color: transparent !important;
  text-align: left !important;
  padding: 0 !important;
  color: #475569;
  font-weight: 600;
  font-size: 0.825rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

form.form-filter td.form-label-error, form.form-vertical td.form-label-error {
  color: #dc2626;
}

/* Contenidors de controls (Widgets) */
form.form-filter td.form-widget, form.form-vertical td.form-widget,
form.form-filter td.form-widget-error, form.form-vertical td.form-widget-error {
  padding: 0 !important;
  width: 100%;
  border: none !important;
  color:#334155;
}

form.form-filter td.form-widget font, form.form-vertical td.form-widget font {
  font-family: inherit !important;
  font-size: 100% !important;
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

/* Estil dels camps (Inputs i Selects) */
form.form-filter input[type="text"], form.form-vertical input[type="text"],
form.form-filter select, form.form-vertical select {
  width: 100% !important;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--nuria-border, #cbd5e1);
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--nuria-text-dark, #0f172a);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  outline: none;
  height: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none !important;
}

/* Actiu / Enfocat (Focus en Blau Cel Núria) */
form.form-filter input[type="text"]:focus, form.form-vertical input[type="text"]:focus,
form.form-filter select:focus, form.form-vertical select:focus {
  border-color: var(--nuria-cyan, #149CE2) !important;
  box-shadow: 0 0 0 3px rgba(20, 156, 226, 0.25) !important;
}

/* Botó d'acció (Submit) - Blau Marí Corporatiu */
form.form-filter input[type="submit"], form.form-vertical input[type="submit"] {
  width: 100%;
  height: 40px;
  background-color: var(--nuria-navy, #1F336E) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: none !important;
  margin-bottom:10px;
}

form.form-filter input[type="submit"]:hover, form.form-vertical input[type="submit"]:hover {
  background-color: var(--nuria-navy-hover, #162552) !important;
}

form.form-filter input[type="submit"]:active, form.form-vertical input[type="submit"]:active {
  transform: scale(0.98);
}

/* ==========================================================================
   4. CLASSES OPCIONALS PER APLICAR A ETIQUETES <input> O <select>
   ========================================================================== */

/* El camp ocupa el doble o més espai a la graella */
form.form-filter tr.form-element:has(input.col-span-2),
form.form-filter tr.form-element:has(select.col-span-2) {
  grid-column: span 2 !important;
}

form.form-filter tr.form-element:has(input.col-span-3),
form.form-filter tr.form-element:has(select.col-span-3) {
  grid-column: span 3 !important;
}

form.form-filter tr.form-element:has(input.col-span-4),
form.form-filter tr.form-element:has(select.col-span-4) {
  grid-column: span 4 !important;
}

form.form-filter tr.form-element:has(input.col-span-5),
form.form-filter tr.form-element:has(select.col-span-5) {
  grid-column: span 5 !important;
}

/* El camp ocupa TOTA la línia de la graella */
form.form-filter tr.form-element:has(input.col-full),
form.form-filter tr.form-element:has(select.col-full) {
  grid-column: 1 / -1 !important;
}

/* Força que el camp comenci en una nova fila (salt de línia) */
form.form-filter tr.form-element:has(.break-row),
form.form-filter tr.form-element.break-row {
  grid-column-start: 1 !important;
}

form.form-filter tr.form-element:has(input[type="submit"]) {
  grid-column: 1 / -1 !important; /* Ocupa tota la línia de banda a banda */
  margin-top: 15px !important;
  display: flex !important;
  justify-content: flex-end !important; /* O 'center' si el vols centrat */
}

form.form-filter tr.form-element:has(input[type="submit"]) input[type="submit"] {
  width: auto !important;
  min-width: 140px !important;
  height: 40px !important;
}

/* ==========================================================================
   Fletxa personalitzada per als camps SELECT (Filtre i Vertical)
   ========================================================================== */

form.form-filter select,
form.form-vertical select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* Fletxa SVG moderna en estil gris neutre */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
  cursor: pointer;
}

/* Efecte en passar el ratolí per sobre del select */
form.form-filter select:hover,
form.form-vertical select:hover {
  border-color: var(--nuria-cyan, #149CE2) !important;
}

/* ==========================================================================
   OPTIMITZACIÓ DE CHECKBOXES DINS DE FILTRES HORITZONTALS (AMB TAULES INTERNES)
   ========================================================================== */

/* 1. La taula interna es converteix en un contenidor amb scroll */
form.form-filter td.form-widget > table {
  display: block !important;
  max-height: 120px !important;       /* Alçada màxima de la caixa */
  overflow-y: auto !important;        /* Força el scroll vertical */
  overflow-x: hidden !important;
  background-color: #ffffff !important;
  border: 1px solid var(--nuria-border, #cbd5e1) !important;
  border-radius: 6px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* El cos de la taula interna s'ajusta */
form.form-filter td.form-widget > table tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 100% !important;
}

/* 2. Cada fila (TR) es converteix en un botó/opció seleccionable */
form.form-filter td.form-widget > table tr {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  background-color: var(--nuria-bg-light, #f8fafc) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Cel·les de la taula interna */
form.form-filter td.form-widget > table td {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Etiquetes de text (Labels) */
form.form-filter td.form-widget > table label {
  font-size: 0.8rem !important;
  color: var(--nuria-text-dark, #0f172a) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
}

/* Hover a la fila */
form.form-filter td.form-widget > table tr:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* 3. Fila seleccionada (Quan el checkbox està marcat) */
form.form-filter td.form-widget > table tr:has(input[type="checkbox"]:checked) {
  background-color: rgba(20, 156, 226, 0.12) !important; /* Blau cel molt suau */
  border-color: var(--nuria-cyan, #149CE2) !important;
}

form.form-filter td.form-widget > table tr:has(input[type="checkbox"]:checked) label {
  color: var(--nuria-navy, #1F336E) !important;
  font-weight: 600 !important;
}

/* Estil de la casella del checkbox */
form.form-filter td.form-widget > table input[type="checkbox"] {
  cursor: pointer !important;
  accent-color: var(--nuria-cyan, #149CE2) !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* 4. EXCEPCIÓ: Si la taula interna només té 1 fila (1 únic checkbox), treiem l'scroll */
form.form-filter td.form-widget > table:has(tr:only-child) {
  max-height: none !important;
  overflow: visible !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

form.form-filter td.form-widget > table:has(tr:only-child) tr {
  background-color: transparent !important;
  padding: 0 !important;
}

/* ==========================================================================
   2. ESTILS PER A FILTRES HORITZONTALS (`class="form-filter"`)
   ========================================================================== */

/* Targeta base per a formularis de filtre (Ample Complet) */
form.form-filter {
  background-color: var(--nuria-bg-light, #f8fafc);
  border: 1px solid var(--nuria-border, #cbd5e1);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 20px !important;
  width: 100%;
  box-sizing: border-box;
  margin: 15px 0 30px 0;
  overflow: hidden;
  font-family: var(--nuria-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Graella ajustada per fer cabre tots els camps a la mateixa línia */
form.form-filter table,
form.form-filter tbody {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px 16px !important;
  align-items: start !important; /* <--- CANVIAT DE 'end' A 'start' */
  width: 100% !important;
  box-sizing: border-box;
}

/* Files de camps en filtre */
form.form-filter tr.form-element {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start !important; /* Garanteix l'alineació a dalt */
}


/* ==========================================================================
   TEXT D'AJUDA EN FORMULARIS (`.form-help-text`)
   ========================================================================== */

/* Contenidor del text d'ajuda */
form.form-filter .form-help-text,
.form-help-text {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  font-size: 0.75rem !important; /* Mida de font discreta */
  line-height: 1.2 !important;
  color: #64748b !important; /* Gris fosc visible i llegible (Slate 500) */
  font-style: italic;
  white-space: normal !important;
}

/* Opcional: Si vols actualitzar o amagar la icona GIF antiga d'OpenACS */
.form-help-text img {
  opacity: 0.7; /* Fa que la icona antiga no cridi tant l'atenció */
  vertical-align: middle;
}

/* SI VOLS NAVEGAR SENSE LA ICONA GIF ANTIGA:
.form-help-text img {
  display: none !important;
}
.form-help-text::before {
  content: "ℹ ";
  font-style: normal;
  color: var(--nuria-cyan, #149ce2);
}
*/