/* Reports styling — screen + @page PDF rules. */

/* ── Report hub (card menu, VTM3 parity) ── */
.report-index-nav .nav-link {
  color: #333;
  border-radius: 0;
  border-left: 3px solid transparent;
  padding: 0.6rem 0.9rem;
}
.report-index-nav .nav-link:hover { background: #f4f4f4; }
.report-index-nav .nav-link.active {
  background: #f4f4f4;
  color: #0d6efd;
  font-weight: 600;
  border-left-color: #0d6efd;
}

/* Small-screen "Reports" toggle (VTM3 parity: below lg the category sidebar
   collapses into an expandable panel, like index.php's accordion fallback). */
.report-nav-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: #f4f4f4;
  border: 1px solid #e3e3e3;
  border-radius: 0.375rem;
  color: #0d6efd;
  font-weight: 600;
  padding: 0.6rem 0.9rem;
}
.report-nav-toggle i {
  float: right;
  margin-top: 0.25rem;
  transition: transform 0.2s ease;
}
.report-nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
@media (max-width: 991.98px) {
  .report-nav-collapse .report-index-nav {
    border: 1px solid #e3e3e3;
    border-top: 0;
    border-radius: 0 0 0.375rem 0.375rem;
    overflow: hidden;
  }
  .report-nav-toggle[aria-expanded="true"] { border-radius: 0.375rem 0.375rem 0 0; }
}

.report-hub .report-card {
  background: #f4f4f4;
  border: 1px solid #e3e3e3;
  color: #333;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.report-hub .report-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: #0d6efd;
}
.report-hub .report-card .report-card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.report-hub .report-card .report-card-title i { color: #0d6efd; }
.report-hub .report-card .report-card-desc {
  color: #555;
  font-size: 0.85rem;
  line-height: 1.35;
}
.report-hub .report-group-heading {
  margin: 0.5rem 0 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #e3e3e3;
}

/* Persistent category sidebar on individual report pages. Reuses the hub's
   .report-index-nav styling; sticks while scrolling long result tables.
   Bordered at lg+ only — below lg the .report-nav-collapse rules frame it. */
@media (min-width: 992px) {
  .report-page-nav .report-index-nav {
    border: 1px solid #e3e3e3;
    border-radius: 0.375rem;
    overflow: hidden;
  }
  .report-page-nav { position: sticky; top: 1rem; align-self: flex-start; }
}

.report-filter .form-label { font-weight: 600; }

/* VTM3 parity: filter inputs stack in a single constrained column; only the
   date From/To pair sits side-by-side as a row within the column. */
.report-filter-fields { max-width: 640px; }
/* The trailing date/time selectors override the app-wide 12rem cap in vtm.css
   so the report From/To pair fills its half-columns instead of leaving a gap.
   Specificity (0,3,1) beats vtm.css's `input[type="date"].form-control` (0,2,1). */
.report-filter-fields .form-select,
.report-filter-fields .form-control,
.report-filter-fields input[type="date"].form-control,
.report-filter-fields input[type="time"].form-control { max-width: 100%; }
/* A disabled "Select a company first…" dropdown reads as a hint, not an error. */
.report-filter-fields select:disabled {
  color: #6c757d;
  font-style: italic;
  background-color: #f8f9fa;
}
.report-filter .form-select,
.report-filter .form-control { font-size: 0.9rem; }

.report-export-buttons .btn { margin-right: 4px; }

/* Results action bar: the included _export_buttons.html partial carries its
   own `mb-3`, which — under `align-items-center` — lifts the Export buttons
   ~8px above Refresh / Start Over. Zero it so all buttons sit on one line.
   `!important` because Bootstrap's `.mb-3` utility is itself `!important`. */
.report-results-actions .report-export-buttons { margin-bottom: 0 !important; }

/* Collapsible System Metric site cards. The header is a full-width toggle
   button; Bootstrap adds `.collapsed` to it when the body is hidden, so the
   chevron points down when open and right when collapsed. */
.report-site-toggle {
  color: #333;
  text-decoration: none;
  border: 0;
  border-radius: 0;
}
.report-site-toggle:hover,
.report-site-toggle:focus {
  background: #f4f4f4;
  color: #333;
}
.report-site-chevron { transition: transform 0.2s ease; }
.report-site-toggle.collapsed .report-site-chevron { transform: rotate(-90deg); }

/* Collapsible report-section card bodies cap their (often very wide, e.g.
   the 26-column MFA Tanks / BNSF Trailers) tables to the card width and
   scroll them HORIZONTALLY within the card. Without this, a wide table
   spills out of the card and stretches the whole page sideways. Scoped to
   ``.report-page`` (the report filter/screen layout) so it never touches
   the hub's report cards. The card itself stays within the content column
   (col-lg-9 / col-12), so the report no longer extends across the screen. */
.report-page .card-body {
  overflow-x: auto;
  max-width: 100%;
}

/* System Metric status colors — match PHP systemmetricreporttable.php exactly */
.report-cell-complete { background: #92d050; }
.report-cell-scheduled { background: #99CCFF; }
.report-cell-exceptions { background: #ffc000; }
.report-cell-not-scheduled { background: #ffff00; }

/* Progress modal tweaks */
#reportProgressModal .progress { background: #eee; }
#reportProgressModal .js-progress-download a { margin-top: 0.5rem; }

/* UX: cascade dropdown loading state (reports.js toggles .js-loading while
   options are fetched). */
.report-filter select.js-loading,
select.js-loading {
  background-image: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%);
  background-size: 400% 100%;
  animation: report-shimmer 1.2s ease-in-out infinite;
  cursor: progress;
}
@keyframes report-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Mark required filter fields. Pair `.form-label.required` with the input's
   own `required` attribute. */
.report-filter .form-label.required::after {
  content: " *";
  color: #dc3545;
  font-weight: 700;
}

/* UX: keep pagination controls visible while scrolling a long result table. */
.report-pagination--sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #eee;
}

/* UX: compliance status legend chips. */
.report-status-legend { gap: 0.5rem; flex-wrap: wrap; }
.report-status-legend .legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.report-status-legend .legend-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid #999;
  border-radius: 2px;
}

/* @page rules for WeasyPrint (report PDFs import this too) */
@media print {
  body { font-size: 11px; color: #222; }
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #888; padding: 4px 6px; vertical-align: top; }
}