/* ========================================
   INCIDENCIES — Estils
   ======================================== */

.incidencies-container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-lg);
  padding-top: calc(80px + var(--spacing-lg));
  padding-bottom: calc(80px + var(--spacing-lg));
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ========================================
   PAGE HEADER
   ======================================== */

.incidencies-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.incidencies-page-header h1 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.btn-nova {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--color-primary);
  color: white;
  transition: background 0.2s;
}

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

.btn-nova .material-symbols-outlined {
  font-size: 18px;
}

/* ========================================
   VIEW TOGGLE (Actives / Arxivades)
   ======================================== */

.incidencies-view-toggle {
  display: flex;
  gap: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin-bottom: var(--spacing-md);
}

.view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: calc(var(--radius-lg) - 2px);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn .material-symbols-outlined {
  font-size: 18px;
}

.view-btn:hover:not(.actiu) {
  color: var(--color-text-primary);
  background: rgba(142, 142, 147, 0.08);
}

.view-btn.actiu {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.view-btn.actiu[data-view="arxivades"] {
  background: #30D158;
}

.view-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.view-btn:not(.actiu) .view-count {
  background: rgba(142, 142, 147, 0.15);
  color: var(--color-text-tertiary);
}

/* ========================================
   FILTERS
   ======================================== */

.incidencies-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}

.filter-pills-group {
  width: 100%;
}

.filter-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-md);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.filter-group label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-pills-container {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}

.filter-pills-container::-webkit-scrollbar {
  display: none;
}

.pill-estat {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}

.pill-estat:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pill-estat.actiu {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.filter-search {
  flex: 1;
  min-width: 140px;
}

.search-input-wrapper {
  position: relative;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.search-input-wrapper input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(19, 117, 188, 0.15);
}

/* ========================================
   RESULT CARDS
   ======================================== */

.incidencies-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.incidencia-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
}

.incidencia-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}

.incidencia-card:active {
  transform: scale(0.99);
}

/* Border-left per estat */
.incidencia-card[data-estat="Oberta"]  { border-left-color: #0A84FF; }
.incidencia-card[data-estat="En_Curs"] { border-left-color: #FF9F0A; }
.incidencia-card[data-estat="Resolta"] { border-left-color: #30D158; }

/* Archived cards — subtle completed look */
.incidencia-card.arxivada {
  opacity: 0.85;
}

.incidencia-card.arxivada .card-titol {
  text-decoration: line-through;
  text-decoration-color: rgba(48, 209, 88, 0.5);
  color: var(--color-text-secondary);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.card-numero {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
}

.badge-estat {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge-estat.badge-Oberta  { background: rgba(10,132,255,0.15); color: #0A84FF; }
.badge-estat.badge-En_Curs { background: rgba(255,159,10,0.15); color: #FF9F0A; }
.badge-estat.badge-Resolta { background: rgba(48,209,88,0.15); color: #30D158; }

.badge-prioritat {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.badge-prioritat.badge-Alta   { background: rgba(255,159,10,0.15); color: #FF9F0A; }
.badge-prioritat.badge-Urgent { background: rgba(255,69,58,0.15); color: #FF453A; }

.badge-categoria {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(142,142,147,0.12);
  color: var(--color-text-secondary);
}

.card-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.card-body {
  margin-top: var(--spacing-xs);
}

.card-titol {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.card-recurs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.card-recurs .material-symbols-outlined {
  font-size: 14px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
}

.card-user {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.card-comentaris {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.card-comentaris .material-symbols-outlined {
  font-size: 14px;
}

/* ========================================
   PAGINATION
   ======================================== */

.incidencies-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
}

.btn-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-pagination:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-pagination:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-pagination .material-symbols-outlined {
  font-size: 20px;
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ========================================
   STATES (Loading, Empty, Error)
   ======================================== */

.estado-loading,
.estado-empty,
.estado-error {
  text-align: center;
  padding: 60px 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.estado-empty .material-symbols-outlined,
.estado-error .material-symbols-outlined {
  font-size: 56px;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

.estado-empty p,
.estado-error p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ========================================
   MODAL — Page-specific overrides
   (Base modal/form/button styles in shared-components.css)
   ======================================== */

.modal-content.modal-detall {
  max-width: 600px;
}

.form-group-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-group-inline label {
  white-space: nowrap;
  text-transform: none;
}

.form-group-inline select {
  width: auto;
  min-width: 120px;
}

/* Selector botons (categoria/prioritat) */
.selector-botons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.selector-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.selector-btn.actiu {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.selector-btn .material-symbols-outlined {
  font-size: 18px;
}

/* Photos zone + preview */
.incidencia-photos-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-base);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: var(--font-size-sm);
}

.incidencia-photos-zone:hover {
  border-color: var(--color-primary);
  background: rgba(19, 117, 188, 0.04);
}

.incidencia-photos-zone .material-symbols-outlined {
  font-size: 32px;
}

.incidencia-photos-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.incidencia-photo-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.incidencia-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.photo-remove .material-symbols-outlined {
  font-size: 14px;
}

/* Detail photos gallery */
.detall-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: var(--spacing-sm) 0;
}

.detall-photo-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.detall-photo-thumb:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

/* Comment image */
.comentari-imatge {
  max-width: 200px;
  max-height: 160px;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  object-fit: cover;
}

.comentari-bolla.propi .comentari-imatge {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.comentari-bolla.altre .comentari-imatge {
  border: 1px solid var(--color-border);
}

/* Comment input row */
.comentari-input-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comentari-input-row textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
}

.comentari-input-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(19, 117, 188, 0.15);
}

.comentari-photo-preview {
  display: flex;
  gap: 6px;
}

.comentari-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-icon.btn-attach-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.btn-icon.btn-attach-photo:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-icon.btn-attach-photo .material-symbols-outlined {
  font-size: 18px;
}

/* Recurs vinculat */
.recurs-vinculat {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px 12px;
  background: rgba(10, 132, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* Buttons in shared-components.css */

/* ========================================
   MODAL DETALL — Info + Comentaris
   ======================================== */

.detall-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.detall-info-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.detall-info-row .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-text-tertiary);
}

.detall-info-row strong {
  color: var(--color-text-primary);
}

.detall-descripcio {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-bg-base);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.detall-accions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(10, 132, 255, 0.06);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

/* Comentaris */
.detall-comentaris {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

.detall-comentaris h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.comentaris-fil {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--spacing-md);
}

.comentari-bolla {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.comentari-bolla.propi {
  align-self: flex-end;
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.comentari-bolla.altre {
  align-self: flex-start;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
}

.comentari-meta {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.7;
}

.comentari-bolla.propi .comentari-meta {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

.comentari-bolla.altre .comentari-meta {
  color: var(--color-text-tertiary);
}

.comentaris-buit {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.comentaris-input {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
}

.comentaris-input .btn-primary {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.comentaris-input .btn-primary .material-symbols-outlined {
  font-size: 16px;
}

/* ========================================
   DARK MODE
   ======================================== */

@media (prefers-color-scheme: dark) {
  .incidencies-view-toggle {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .view-btn:hover:not(.actiu) {
    background: rgba(255, 255, 255, 0.08);
  }

  .incidencies-filters {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .search-input-wrapper input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary);
  }

  .pill-estat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .incidencia-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .btn-pagination {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .badge-categoria {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Modal/form dark mode in shared-components.css */

  .selector-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .comentari-bolla.altre {
    background: rgba(255, 255, 255, 0.08);
  }

  .detall-accions {
    background: rgba(10, 132, 255, 0.1);
  }

  .incidencia-photos-zone {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .incidencia-photos-zone:hover {
    background: rgba(19, 117, 188, 0.08);
  }

  .incidencia-photo-thumb {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .detall-photo-thumb {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .btn-icon.btn-attach-photo {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .comentari-input-row textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .detall-descripcio {
    background: rgba(255, 255, 255, 0.06);
  }

  .detall-comentaris {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .comentaris-input textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .incidencies-container {
    padding: var(--spacing-md);
    padding-top: calc(70px + var(--spacing-md));
    padding-bottom: calc(80px + var(--spacing-md));
  }

  .incidencies-filters {
    padding: var(--spacing-md);
  }

  .view-btn {
    padding: 8px 12px;
    font-size: var(--font-size-xs);
  }

  .filter-controls-row {
    flex-direction: column;
  }

  .filter-search {
    min-width: unset;
    width: 100%;
  }

  .incidencia-card {
    padding: var(--spacing-md);
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .card-date {
    order: -1;
  }

  .modal-content {
    max-height: 95vh;
    margin: var(--spacing-sm);
  }

  .detall-accions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-group-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .form-group-inline select {
    width: 100%;
  }

  .selector-botons {
    gap: 6px;
  }

  .selector-btn {
    padding: 6px 10px;
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .incidencies-page-header h1 {
    font-size: var(--font-size-lg);
  }

  .btn-nova span:not(.material-symbols-outlined) {
    display: none;
  }

  .btn-nova {
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
  }

  .comentari-bolla {
    max-width: 90%;
  }
}

/* ========================================
   LIGHTBOX ZOOM FOTOS
   ======================================== */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox-overlay.active {
  opacity: 1;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  pointer-events: none;
  transform: scale(0.92);
  transition: transform 0.2s ease;
}

.lightbox-overlay.active .lightbox-image {
  transform: scale(1);
}

@media (prefers-color-scheme: dark) {
  .lightbox-overlay {
    background: rgba(0, 0, 0, 0.75);
  }
}