/* =========================================================================
   UTILITY BILL UPLOADS
   ========================================================================= */
.utility-hero {
  background: var(--paper-50);
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--paper-100);
}

.upload-form {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--paper-100);
  background: var(--paper-0);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-7);
}

.file-drop {
  border: 1.5px dashed var(--paper-100);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--brass-500); background: var(--brass-100); }
.file-drop__label { font-size: 13.5px; color: var(--ink-600); }
.file-drop__filename { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 12.5px; color: var(--brass-600); font-weight: 600; }

.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.upload-card {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--paper-100);
  background: var(--paper-0);
}
.upload-card__thumb {
  width: 100%;
  height: 130px;
  border-radius: var(--r-sm);
  background: var(--paper-50);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.upload-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-card__thumb svg { width: 32px; height: 32px; color: var(--ink-400); }
.upload-card__type { font-weight: 700; font-size: 13.5px; text-transform: capitalize; color: var(--ink-950); }
.upload-card__meta { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.upload-card__note { font-size: 12.5px; color: var(--ink-600); margin-top: var(--sp-2); }
.upload-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); }

.utility-filter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: var(--sp-3);
  align-items: end;
  margin-bottom: var(--sp-6);
}
.utility-filter-row .field { margin-bottom: 0; }
@media (max-width: 800px) { .utility-filter-row { grid-template-columns: 1fr 1fr; } }