/* 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) */
.zoomable { cursor: zoom-in; transition: transform .1s ease; }
.zoomable:hover { transform: scale(1.04); }
#zoomModal .modal-body { background: #1a1a1a; }
#zoomModal img { max-width: 100%; max-height: 85vh; object-fit: contain; }

/* 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; }

/* 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; }