/* WarehouseHazard — custom styles on top of Bootstrap 5 */

body { background-color: #f7f8fa; }
.navbar-brand { font-weight: 600; }

/* ---------- Header table (paper-faithful 3-column bordered) ---------- */
.report-header-table { background: #fff; }
.report-header-table th { font-size: .75rem; font-weight: 600; color: #555; }
.report-header-table td { font-size: .95rem; }

/* ---------- Checklist table ---------- */
.checklist-table { background: #fff; }
.checklist-table .ctrl-col { width: 28%; }
.checklist-table .sem-col  { width: 6%; min-width: 50px; }
.checklist-table .note-col { width: 54%; }
.checklist-table .control-label { font-weight: 600; font-size: .95rem; }
.checklist-table img.control-diagram { max-height: 72px; max-width: 110px; object-fit: contain; opacity: 1; }

/* Click-to-zoom (sketches + photos).
   The modal-dialog shrinks to the image (no fixed width), so no lateral letterboxing.
   Landscape/desktop: image is sized to 80vh tall, width auto (capped at 95vw).
   Portrait/mobile:   image is sized to 80vw wide, height auto (capped at 90vh). */
.zoomable { cursor: zoom-in; transition: transform .1s ease; }
.zoomable:hover { transform: scale(1.04); }
#zoomModal .modal-dialog {
  max-width: max-content;     /* dialog shrinks to image; Bootstrap's `margin:auto` then centers it horizontally */
  width: auto;
  justify-content: center;    /* keep image centered when modal-dialog-centered turns the dialog into a flex container */
}
#zoomModal .modal-content { background: transparent; border: 0; box-shadow: none; }
#zoomModal .modal-body    { background: transparent; padding: 0; }
#zoomModal img {
  display: block;
  height: 80vh;
  width: auto;
  max-width: 95vw;
  object-fit: contain;
}
@media (orientation: portrait), (max-width: 767.98px) {
  #zoomModal img {
    width: 80vw;
    height: auto;
    max-height: 90vh;
  }
}

/* Header dots */
.hdr-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #888; vertical-align: middle; }
.hdr-dot.green  { background: #2c9c2c; border-color: #2c9c2c; }
.hdr-dot.yellow { background: #d4b21f; border-color: #d4b21f; }
.hdr-dot.red    { background: #c93030; border-color: #c93030; }

/* Read-only "X" mark, paper-style */
.sem-mark { display: inline-block; font-weight: 700; font-size: 1.4rem; line-height: 1; }

/* Edit-mode radio buttons */
.checklist-table input.semBtn { width: 1.4rem; height: 1.4rem; cursor: pointer; }
.checklist-table input.semBtn[value="GREEN"]  { accent-color: #2c9c2c; }
.checklist-table input.semBtn[value="YELLOW"] { accent-color: #d4b21f; }
.checklist-table input.semBtn[value="RED"]    { accent-color: #c93030; }

/* Section header rows (A/B/C/D group separators in the controls table) */
.checklist-table tr.ctrl-section-header td {
  background: #1f2937;
  color: #f8fafc;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  border-top: 2px solid #0f172a;
}
.checklist-table tr.ctrl-section-header td strong { font-weight: 700; }

/* Responsive: stack as cards on small screens */
@media (max-width: 767.98px)
{
  .checklist-table thead { display: none; }
  .checklist-table, .checklist-table tbody, .checklist-table tr, .checklist-table td { display: block; width: 100%; }
  .checklist-table tr { border: 1px solid #dee2e6; border-radius: .5rem; margin-bottom: .75rem; padding: .5rem; background: #fff; }
  .checklist-table td { border: 0 !important; padding: .35rem 0; }
  .checklist-table td.ctrl-col { padding-bottom: .25rem; }
  .checklist-table td.sem-col  { display: inline-block; width: auto; padding: .25rem .65rem; vertical-align: middle; }
  .checklist-table td.sem-col::before {
    content: attr(data-label);
    display: block; font-size: .65rem; color: #888; text-align: center;
  }
  .checklist-table td.note-col { padding-top: .5rem; }
  /* Header tables also stack on mobile for readability */
  .report-header-table th, .report-header-table td { display: block; width: 100%; text-align: left !important; }
  .report-header-table thead tr { display: block; }
}

/* ---------- Coverage rows ---------- */
.coverage-row.status-OVERDUE { background-color: #fdd0d0; }
.coverage-row.status-DUE     { background-color: #fff3c2; }
.coverage-row.status-OK      { background-color: #d6f5d6; }
.coverage-row.status-NEVER   { background-color: #e2e6ea; }

/* ---------- Status badges ---------- */
.badge-sem-GREEN  { background: #2c9c2c; }
.badge-sem-YELLOW { background: #d4b21f; color: #fff; }
.badge-sem-RED    { background: #c93030; }

/* ---------- Photos ---------- */
.photo-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #ccc; border-radius: 4px; }

/* ---------- Maintenance calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #dee2e6; border: 1px solid #dee2e6; border-radius: .5rem; overflow: hidden; }
.cal-dow { background: #f1f3f5; text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase; color: #666; padding: .35rem 0; }
.cal-cell { background: #fff; min-height: 110px; padding: .3rem; position: relative; vertical-align: top; }
.cal-cell.cal-week { min-height: 320px; }
.cal-cell.cal-other-month { background: #f8f9fa; }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px #0d6efd; }
.cal-daynum { font-size: .8rem; font-weight: 600; color: #555; display: block; margin-bottom: .2rem; }
.cal-cell.cal-other-month .cal-daynum { color: #bbb; }
.cal-tile { display: block; width: 100%; text-align: left; border: 0; border-radius: .3rem; padding: .12rem .35rem; margin-bottom: .18rem; font-size: .74rem; line-height: 1.25; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tile:hover { filter: brightness(.92); }
.cal-tile .cal-tile-time { font-weight: 700; margin-right: .25rem; }
.cal-tile.cal-tile-done { opacity: .62; text-decoration: line-through; }
.cal-tile.cal-tile-maint { border: 2px solid rgba(0,0,0,.35); }
.cal-tile.cal-tile-overdue { box-shadow: 0 0 0 2px #c93030; }
.cal-more { font-size: .7rem; color: #0d6efd; cursor: pointer; }
@media (max-width: 575.98px) {
  .cal-cell { min-height: 78px; }
  .cal-tile { font-size: .66rem; }
}