/* ========================================
   ADMIN PRESTECS — Pàgina gestió préstecs administració
   ======================================== */

.admin-prestecs-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* ===== PAGE HEADER ===== */
.admin-prestecs-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

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

/* ===== TABS (segmented control) ===== */
.admin-prestecs-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  padding: 3px;
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--color-border);
}

.admin-prestecs-tabs .tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-prestecs-tabs .tab-btn .material-symbols-outlined {
  font-size: 18px;
}

.admin-prestecs-tabs .tab-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.admin-prestecs-tabs .tab-btn.active {
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ===== TAB CONTENT ===== */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-md);
}

/* ===== CARDS LIST ===== */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ===== PRÉSTEC CARD ===== */
.prestec-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.15s ease;
}

.prestec-card:hover {
  box-shadow: var(--shadow-sm);
}

.prestec-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(19, 117, 188, 0.1);
  color: var(--color-primary);
  flex-shrink: 0;
}

.prestec-card-icon .material-symbols-outlined {
  font-size: 22px;
}

.prestec-card-info {
  flex: 1;
  min-width: 0;
}

.prestec-card-title {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
}

.prestec-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}

.prestec-card-meta .separator {
  color: var(--color-text-tertiary);
}

.prestec-card-actions {
  flex-shrink: 0;
}

.btn-devolver {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-success);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-devolver:hover {
  filter: brightness(0.9);
}

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

/* ===== ARTICLE CARD ===== */
.article-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.15s ease;
}

.article-card:hover {
  box-shadow: var(--shadow-sm);
}

.article-card-info {
  flex: 1;
  min-width: 0;
}

.article-card-title {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
}

.article-card-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.article-card-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.btn-icon-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-icon-sm:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

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

/* ===== BADGES ESTAT ===== */
.badge-disponible {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: rgba(52, 199, 89, 0.12);
  color: var(--color-success);
}

.badge-prestat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: rgba(255, 159, 10, 0.12);
  color: var(--color-warning);
}

@media (prefers-color-scheme: dark) {
  .badge-disponible {
    background: rgba(52, 199, 89, 0.2);
  }
  .badge-prestat {
    background: rgba(255, 159, 10, 0.2);
  }
}

/* ===== HISTORIAL CARD ===== */
.historial-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.historial-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.historial-card-icon.actiu {
  background: rgba(255, 159, 10, 0.1);
  color: var(--color-warning);
}

.historial-card-icon.retornat {
  background: rgba(52, 199, 89, 0.1);
  color: var(--color-success);
}

.historial-card-icon .material-symbols-outlined {
  font-size: 22px;
}

.historial-card-info {
  flex: 1;
  min-width: 0;
}

.historial-card-title {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
}

.historial-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xxl) var(--spacing-lg);
  color: var(--color-text-tertiary);
  text-align: center;
}

.empty-state .material-symbols-outlined {
  font-size: 48px;
  opacity: 0.4;
}

.empty-state p {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* ===== LOADING STATE ===== */
.estado-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xxl);
  color: var(--color-text-tertiary);
}

/* ===== MODAL FORM ===== */
#modalNouPrestec select,
#modalArticle input,
#modalArticle textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transition: border-color 0.15s ease;
}

#modalNouPrestec select:focus,
#modalArticle input:focus,
#modalArticle textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(19, 117, 188, 0.1);
}

#modalNouPrestec textarea,
#modalArticle textarea {
  resize: vertical;
  min-height: 48px;
}

@media (prefers-color-scheme: dark) {
  #modalNouPrestec select option,
  #modalArticle select option {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 639px) {
  .admin-prestecs-container {
    padding: var(--spacing-md);
  }

  .admin-prestecs-page-header h1 {
    font-size: var(--font-size-lg);
  }

  .admin-prestecs-tabs .tab-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  .admin-prestecs-tabs .tab-btn .material-symbols-outlined {
    font-size: 16px;
  }

  .prestec-card,
  .article-card,
  .historial-card {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .prestec-card {
    flex-wrap: wrap;
  }

  .prestec-card-actions {
    width: 100%;
    margin-top: var(--spacing-xs);
  }

  .btn-devolver {
    width: 100%;
    justify-content: center;
  }
}

/* TS-130: BANNER ALERTES DIPÒSIT + FILTRES HISTORIAL */
.alertes-diposit-banner {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(255, 204, 0, 0.12));
  border: 1px solid rgba(255, 149, 0, 0.45);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}
.alertes-diposit-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}
.alertes-diposit-header .material-symbols-outlined {
  color: #FF9500;
  font-size: 22px;
}
.alertes-diposit-list {
  list-style: none;
  margin: var(--spacing-sm) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-md);
}
.alerta-diposit-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 149, 0, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
}
.alerta-diposit-item .material-symbols-outlined {
  font-size: 16px;
  color: #FF9500;
}
.alerta-diposit-matr {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}
.alerta-diposit-pct {
  font-weight: var(--font-weight-bold);
  color: #C93400;
  margin-left: 4px;
}
@media (prefers-color-scheme: dark) {
  .alerta-diposit-pct { color: #FF9F0A; }
}
.historial-filters {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}
.historial-filters .form-group {
  flex: 1;
  min-width: 180px;
  margin: 0;
}
.historial-filters label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 4px;
}
.historial-filters select,
.historial-filters input[type=text] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}
.btn-sm {
  padding: 6px 10px;
  font-size: var(--font-size-xs);
}
.alertes-diposit-banner{background:linear-gradient(135deg,rgba(255,149,0,.15),rgba(255,204,0,.12));border:1px solid rgba(255,149,0,.45);border-radius:var(--radius-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-md);color:var(--color-text-primary)}
.alertes-diposit-header{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm)}
.alertes-diposit-header .material-symbols-outlined{color:#FF9500;font-size:22px}
.alertes-diposit-list{list-style:none;margin:var(--spacing-sm) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-md)}
.alerta-diposit-item{display:inline-flex;align-items:center;gap:6px;background:rgba(255,149,0,.12);padding:4px 10px;border-radius:var(--radius-full);font-size:var(--font-size-xs)}
.alerta-diposit-item .material-symbols-outlined{font-size:16px;color:#FF9500}
.alerta-diposit-matr{color:var(--color-text-secondary);font-size:var(--font-size-xs)}
.alerta-diposit-pct{font-weight:var(--font-weight-bold);color:#C93400;margin-left:4px}
@media (prefers-color-scheme:dark){.alerta-diposit-pct{color:#FF9F0A}}
.historial-filters{display:flex;gap:var(--spacing-md);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--spacing-md);padding:var(--spacing-sm);background:var(--color-bg-elevated);border-radius:var(--radius-md)}
.historial-filters .form-group{flex:1;min-width:180px;margin:0}
.historial-filters label{font-size:var(--font-size-xs);color:var(--color-text-secondary);display:block;margin-bottom:4px}
.historial-filters select,.historial-filters input[type=text]{width:100