/* ═══════════════════════════════════════════════════════════════
   AccidentTrack — Estils personalitzats
   ═══════════════════════════════════════════════════════════════ */

:root {
  --at-radius: 12px;
  --at-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ─── Base ─────────────────────────────────────────────────────── */

body {
  background-color: #f0f2f5;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ─── Navbar ───────────────────────────────────────────────────── */

.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}

/* ─── Taula d'accidents ────────────────────────────────────────── */

.table-card {
  border-radius: var(--at-radius);
  overflow: hidden;
}

.accidents-table {
  font-size: 0.855rem;
}

/* Capçalera fixa en scroll vertical */
.accidents-table thead th {
  position:    sticky;
  top:         0;
  z-index:     10;
  white-space: nowrap;
  user-select: none;
  padding:     0.6rem 0.75rem;
}

/* Capçaleres ordenables */
.accidents-table thead th.sortable {
  cursor: pointer;
}

.accidents-table thead th.sortable:hover {
  background-color: #3a3f44;
}

.accidents-table thead th.sorted {
  background-color: #2c3034;
}

.sort-icon {
  font-size:   0.7rem;
  opacity:     0.5;
  margin-left: 3px;
}

.sort-icon.sort-active {
  opacity: 1;
  color:   #ffc107;
}

/* Files per estat: barra lateral de color */
.accidents-table tbody tr {
  border-left: 3px solid transparent;
  transition:  background-color 0.1s;
}

.accidents-table tbody tr.row-obert  { border-left-color: #ffc107; }
.accidents-table tbody tr.row-tancat { border-left-color: #198754; }

/* Columna ubicació: truncada amb tooltip */
.col-location-cell {
  max-width:     220px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Botons d'acció compactes */
.btn-action {
  padding:   0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Amplades de columna */
.col-id       { width: 80px;  }
.col-date     { width: 130px; }
.col-type     { width: 140px; }
.col-severity { width: 95px;  }
.col-stats    { width: 110px; }
.col-status   { width: 90px;  }
.col-agent    { width: 130px; }
.col-actions  { width: 70px;  }

/* ─── Targetes d'estadística ───────────────────────────────────── */

.stat-card {
  border-radius: var(--at-radius);
  border: none;
  box-shadow: var(--at-shadow);
  transition: transform 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* ─── Filtre / Cerca ───────────────────────────────────────────── */

.filter-card {
  border-radius: var(--at-radius);
  border: 1px solid #e2e6ea !important;
  box-shadow: var(--at-shadow) !important;
}

/* ─── Formulari ────────────────────────────────────────────────── */

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #495057;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 1.1rem;
}

label.required::after {
  content: ' *';
  color: #dc3545;
}

.form-control:focus,
.form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* ─── Cards genèriques ─────────────────────────────────────────── */

.card {
  border-radius: var(--at-radius);
  border: none;
  box-shadow: var(--at-shadow);
}

.card-header {
  border-radius: var(--at-radius) var(--at-radius) 0 0 !important;
}

/* ─── Estat buit ───────────────────────────────────────────────── */

#emptyState i {
  opacity: 0.25;
}

/* ─── Breadcrumb ───────────────────────────────────────────────── */

.breadcrumb-item a {
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* ─── Modals ───────────────────────────────────────────────────── */

.modal-content {
  border-radius: var(--at-radius);
  border: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ─── Scrollbar horitzontal de la taula ────────────────────────── */

.table-responsive::-webkit-scrollbar       { height: 6px; }
.table-responsive::-webkit-scrollbar-track { background: #f1f1f1; }
.table-responsive::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }

/* ─── Scrollbar personalitzada ─────────────────────────────────── */

::-webkit-scrollbar       { width: 7px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ─── Autocomplete dropdown ────────────────────────────────────── */

.ac-dropdown {
  display:      none;
  position:     absolute;
  top:          calc(100% + 1px);
  left:         0;
  right:        0;
  z-index:      1055;
  max-height:   240px;
  overflow-y:   auto;
  margin:       0;
  padding:      0.25rem 0;
  list-style:   none;
  background:   #fff;
  border:       1px solid #ced4da;
  border-top:   none;
  border-radius: 0 0 8px 8px;
  box-shadow:   0 8px 24px rgba(0, 0, 0, 0.12);
}

.ac-item {
  padding:     0.45rem 0.9rem;
  font-size:   0.9rem;
  cursor:      pointer;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.ac-item:hover,
.ac-item.active {
  background-color: #e9f2ff;
  color:            #0a58ca;
}

.ac-item mark {
  background:  transparent;
  color:       #0d6efd;
  font-weight: 700;
  padding:     0;
}

.ac-empty {
  padding:     0.5rem 0.9rem;
  font-size:   0.85rem;
  color:       #6c757d;
  font-style:  italic;
  list-style:  none;
}

.ac-more {
  padding:     0.4rem 0.9rem;
  font-size:   0.8rem;
  color:       #6c757d;
  border-top:  1px solid #f0f0f0;
  list-style:  none;
  background:  #fafafa;
}

/* ─── Overlay de càrrega ───────────────────────────────────────── */

.loading-overlay {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      rgba(240, 242, 245, 0.92);
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.loading-box {
  text-align:    center;
  background:    #fff;
  border-radius: var(--at-radius);
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.15);
  padding:       2.5rem 3rem;
  max-width:     380px;
}

/* ─── Responsive ───────────────────────────────────────────────── */

@media (max-width: 576px) {
  .container-fluid { padding-inline: 0.9rem; }
  h1.h3 { font-size: 1.05rem; }
}

/* ─── Croquis ──────────────────────────────────────────────────── */

.crq-btn-img {
  width: 100px; height: 54px; padding: 4px;
  display: inline-flex; justify-content: center; align-items: center;
  background-color: #fff;
}
.crq-btn-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.crq-accordion .accordion-button.crq-h1 {
  background-color: #f1f1f1 !important; color: #333 !important; font-weight: bold !important;
}
.crq-accordion .accordion-button.crq-h1:not(.collapsed) {
  background-color: #0d6efd !important; color: #fff !important;
}
.crq-accordion .accordion-button.crq-h2 {
  background-color: #fff !important; color: #666 !important;
  padding-left: 2.5rem !important; font-size: 0.88rem !important;
  border-bottom: 1px solid #eee !important;
}
.crq-accordion .accordion-button.crq-h2:not(.collapsed) {
  background-color: #f8f9fa !important; color: #0d6efd !important;
  font-weight: 600 !important; box-shadow: inset 4px 0 0 #0d6efd !important;
}

.crq-canvas-wrap {
  background-color: #f8f9fa; border-radius: 6px; overflow: auto;
  display: flex; justify-content: center; align-items: flex-start;
}

.crq-preview {
  width: 100%; max-width: 400px; height: 140px;
  border: 2px dashed #dee2e6; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #f8f9fa; overflow: hidden; cursor: pointer;
}
.crq-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.crq-preview-empty { color: #adb5bd; font-size: 0.9rem; text-align: center; }
.crq-list-btn { border-radius: 3px; line-height: 1.4; }
.crq-list-btn:hover { background: #e9ecef; }
.crq-list-btn.active { background: #cfe2ff; }