/* ===== RESET & BASE ===== */
* { box-sizing: border-box; }
html, body { 
  margin: 0; 
  padding: 0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  background: #f7f7fb; 
  color: #222; 
  transition: background-color 0.2s, color 0.2s;
}

/* ===== DARK MODE - APPLIES TO HTML ELEMENT ===== */
html.dark-mode { 
  background: #1e1e1e; 
  color: #e0e0e0; 
}

html.dark-mode body {
  background: #1e1e1e;
  color: #e0e0e0;
}

/* ===== LAYOUT ===== */
.container { 
  max-width: 900px; 
  margin: 0 auto; 
  padding: 16px; 
}

/* ===== HEADER/TOPBAR ===== */
.topbar { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 12px 16px; 
  background: #111827; 
  color: #fff; 
}

html.dark-mode .topbar { 
  background: #0d1117; 
}

.logo-container { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}

.logo { 
  height: 40px; 
  width: 40px; 
}

.logo-container h1 { 
  margin: 0; 
  font-size: 20px; 
}

.topbar a { 
  color: #fff; 
  margin-left: 12px; 
  text-decoration: none; 
}

.dark-mode-toggle { 
  background: none; 
  border: 1px solid #fff; 
  color: #fff; 
  padding: 6px 12px; 
  border-radius: 4px; 
  cursor: pointer; 
  font-size: 13px; 
  margin-left: 12px; 
  transition: background-color 0.2s;
}

.dark-mode-toggle:hover { 
  background: rgba(255, 255, 255, 0.1); 
}

/* ===== BUTTONS ===== */
.btn { 
  display: inline-block; 
  background: #2563eb; 
  color: #fff; 
  padding: 8px 12px; 
  border-radius: 6px; 
  text-decoration: none; 
  border: none; 
  cursor: pointer; 
  transition: background-color 0.2s;
}

.btn:hover,
.btn-primary:hover { 
  background: #1d4ed8; 
}

.btn.primary { 
  background: #2563eb; 
}

.btn.secondary { 
  background: #6b7280; 
}

.btn.secondary:hover { 
  background: #4b5563; 
}

.btn-primary { 
  display: inline-block; 
  background: #2563eb; 
  color: #fff; 
  padding: 10px 16px; 
  border: none; 
  border-radius: 6px; 
  cursor: pointer; 
  text-decoration: none; 
  font-size: 15px; 
}

.btn-secondary { 
  display: inline-block; 
  background: #6b7280; 
  color: #fff; 
  padding: 10px 16px; 
  border: none; 
  border-radius: 6px; 
  cursor: pointer; 
  text-decoration: none; 
  font-size: 15px; 
  margin-left: 8px; 
}

.link { 
  background: none; 
  border: none; 
  color: #fff; 
  cursor: pointer; 
  text-decoration: underline; 
}

.btn-delete { 
  background: #ef4444; 
  color: white; 
  padding: 6px 12px; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  font-size: 13px; 
  transition: background-color 0.2s;
}

.btn-delete:hover { 
  background: #dc2626; 
}

.download-link { 
  display: inline-block; 
  background: #2563eb; 
  color: white; 
  padding: 6px 12px; 
  text-decoration: none; 
  border-radius: 4px; 
  font-size: 13px; 
  margin-right: 8px; 
  margin-top: 4px; 
  transition: background-color 0.2s;
}

.download-link:hover { 
  background: #1d4ed8; 
}

/* ===== CARDS & CONTAINERS ===== */
.card { 
  background: #fff; 
  padding: 16px; 
  border-radius: 8px; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}

html.dark-mode .card { 
  background: #2d2d2d; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
}

.form-container { 
  max-width: 900px; 
  margin: 0 auto; 
  padding: 20px; 
  background: #fff; 
  border-radius: 8px; 
}

html.dark-mode .form-container { 
  background: #2d2d2d; 
}

.form-container h1 { 
  margin-bottom: 20px; 
  color: #111827; 
}

html.dark-mode .form-container h1 { 
  color: #e0e0e0; 
}

/* ===== FORMS ===== */
.form fieldset { 
  margin: 16px 0; 
  padding: 12px; 
  border: 1px solid #e5e7eb; 
  border-radius: 6px; 
  background: #fff; 
}

html.dark-mode .form fieldset { 
  background: #2d2d2d; 
  border-color: #444; 
}

.form legend { 
  font-weight: bold; 
  padding: 0 8px; 
  background: #3b82f6; 
  color: white; 
  border-radius: 4px; 
}

.form-row { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 12px; 
  margin: 12px 0; 
}

.form label { 
  display: block; 
  margin: 12px 0; 
}

.form input,
.form textarea { 
  width: 100%; 
  padding: 10px; 
  border: 1px solid #d1d5db; 
  border-radius: 6px; 
  font-family: inherit; 
  background: #fff; 
  color: #222; 
  transition: background-color 0.2s, border-color 0.2s;
}

html.dark-mode .form input,
html.dark-mode .form textarea { 
  background: #3d3d3d; 
  color: #e0e0e0; 
  border-color: #555; 
}

.form input:focus,
.form textarea:focus { 
  outline: none; 
  border-color: #2563eb; 
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); 
}

html.dark-mode .form input:focus,
html.dark-mode .form textarea:focus { 
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); 
}

.share-section { 
  margin-bottom: 1rem; 
}

.share-section label { 
  display: block; 
  margin-bottom: 0.5rem; 
}

.share-section input { 
  width: 100%; 
  padding: 8px; 
  border: 1px solid #d1d5db; 
  border-radius: 6px; 
}

html.dark-mode .share-section input { 
  background: #3d3d3d; 
  color: #e0e0e0; 
  border-color: #555; 
}

.form-actions { 
  margin-top: 20px; 
  display: flex; 
  gap: 12px; 
}

.help-text { 
  font-size: 13px; 
  color: #6b7280; 
  margin-top: 4px; 
}

html.dark-mode .help-text { 
  color: #888; 
}

/* ===== LIST ITEMS & REPORTS ===== */
.list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.list-item { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 12px; 
  background: #fff; 
  border-radius: 8px; 
  margin: 8px 0; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.07); 
}

html.dark-mode .list-item { 
  background: #2d2d2d; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
}

.list-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.report-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 1rem; 
}

.report-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px; 
}

@media (min-width: 700px) { 
  .report-grid { 
    grid-template-columns: 1fr 1fr; 
  } 
}

.report-field { 
  margin: 8px 0; 
}

.report-section { 
  margin: 16px 0; 
  padding: 12px; 
  background: #f9fafb; 
  border-left: 4px solid #3b82f6; 
}

html.dark-mode .report-section { 
  background: #2d2d2d; 
  border-left-color: #4b9eff; 
}

.report-list { 
  list-style: none; 
  padding: 0; 
  margin: 8px 0; 
}

.report-list li { 
  padding: 6px; 
  background: #fff; 
  margin: 4px 0; 
  border-left: 3px solid #3b82f6; 
}

html.dark-mode .report-list li { 
  background: #3d3d3d; 
  border-left-color: #4b9eff; 
}

.report-table { 
  width: 100%; 
  border-collapse: collapse; 
  margin: 8px 0; 
}

.report-table th,
.report-table td { 
  border: 1px solid #e5e7eb; 
  padding: 8px; 
  text-align: left; 
}

html.dark-mode .report-table th,
html.dark-mode .report-table td { 
  border-color: #555; 
}

.report-table th { 
  background: #3b82f6; 
  color: white; 
  font-weight: bold; 
}

/* ===== MEDIA ITEMS ===== */
.images { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
  gap: 12px; 
}

.image img { 
  width: 100%; 
  height: 160px; 
  object-fit: cover; 
  border-radius: 6px; 
}

.image figcaption { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.image a { 
  margin-top: 8px; 
}

.media-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  gap: 16px; 
  margin: 16px 0; 
}

.media-item { 
  border: 1px solid #e5e7eb; 
  border-radius: 8px; 
  overflow: hidden; 
  background: #fff; 
}

html.dark-mode .media-item { 
  background: #2d2d2d; 
  border-color: #555; 
}

.media-item img,
.media-item video { 
  width: 100%; 
  height: auto; 
  display: block; 
}

.media-info { 
  padding: 12px; 
  background: #f9fafb; 
}

html.dark-mode .media-info { 
  background: #3d3d3d; 
}

.media-info p { 
  margin: 0 0 8px 0; 
  font-size: 14px; 
  color: #374151; 
}

html.dark-mode .media-info p { 
  color: #aaa; 
}

.video-player { 
  max-width: 100%; 
  height: auto; 
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  min-width: 300px;
  animation: slideIn 0.3s ease-out;
}

.toast.success {
  border-left: 4px solid #10b981;
  background: #ecfdf5;
  color: #065f46;
}

.toast.error {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
  color: #7f1d1d;
}

.toast.info {
  border-left: 4px solid #3b82f6;
  background: #eff6ff;
  color: #1e3a8a;
}

html.dark-mode .toast {
  background: #2d2d2d;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

html.dark-mode .toast.success {
  background: #1b3e2c;
  color: #86efac;
}

html.dark-mode .toast.error {
  background: #3d1f1f;
  color: #fca5a5;
}

html.dark-mode .toast.info {
  background: #1e3a5f;
  color: #93c5fd;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.toast.removing {
  animation: slideOut 0.3s ease-in forwards;
}

/* ===== UTILITIES ===== */
.muted { 
  color: #6b7280; 
}

html.dark-mode .muted { 
  color: #888; 
}

.grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px; 
}

@media (min-width: 700px) { 
  .grid { 
    grid-template-columns: 2fr 1fr; 
  } 
}

.prewrap { 
  white-space: pre-wrap; 
}

.mt { 
  margin-top: 8px; 
}

.hidden-form { 
  display: none; 
}

.logout-form { 
  display: inline; 
}

/* ===== ERRORS & ALERTS ===== */
.error { 
  background: #fee2e2; 
  color: #991b1b; 
  padding: 10px; 
  border-radius: 6px; 
  margin-bottom: 12px; 
}

.party-item,
.witness-item,
.vehicle-item { 
  padding: 8px 0; 
  border-bottom: 1px solid #e5e7eb; 
}

html.dark-mode .party-item,
html.dark-mode .witness-item,
html.dark-mode .vehicle-item { 
  border-bottom-color: #444; 
}

.party-item:last-child,
.witness-item:last-child,
.vehicle-item:last-child { 
  border-bottom: none; 
}

.vehicle-row { 
  margin-bottom: 12px; 
  padding-bottom: 12px; 
  border-bottom: 1px solid #e5e7eb; 
}

html.dark-mode .vehicle-row { 
  border-bottom-color: #444; 
}

.vehicle-row:last-child { 
  border-bottom: none; 
}