/* FW SOP — custom overrides */

/* Wider content area on large screens so big diagrams (Gantt, brewhouse panels) breathe */
@media screen and (min-width: 1220px) {
  .md-grid {
    max-width: 1400px;
  }
}

/* Diagrams (Gantt, glycol, panel photos) render full-width with click-to-zoom hint */
.md-typeset img,
.md-typeset svg {
  max-width: 100%;
  height: auto;
}

/* Specifically the SVG diagrams: render at full container width and show zoom cursor */
.md-typeset img[src$="_gantt.svg"],
.md-typeset img[src$="brew_day_gantt.svg"],
.md-typeset img[src$="glycol_valves.svg"],
.md-typeset img[src$="fermentation_gantt.svg"] {
  width: 100%;
  cursor: zoom-in;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

/* Lightbox modal — let SVGs scale to viewport without being constrained */
.gslide-image img,
.gslide-media svg {
  max-width: 95vw !important;
  max-height: 92vh !important;
  width: auto !important;
  height: auto !important;
}

.gslide-inline {
  max-width: 95vw;
}

/* ===== Wide-table scroll affordance ===== */
/* MkDocs Material wraps tables in .md-typeset__scrollwrap — when a table is wider than
   the container, this adds dynamic shadow gradients on the left/right edges so users
   see there's more to scroll. Shadows fade as the user scrolls toward each edge. */
.md-typeset__scrollwrap {
  background:
    linear-gradient(to right, var(--md-default-bg-color) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--md-default-bg-color) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--md-default-bg-color);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Make the scroll bar a bit more visible on tables so it's discoverable */
.md-typeset__scrollwrap::-webkit-scrollbar {
  height: 8px;
}
.md-typeset__scrollwrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.md-typeset__scrollwrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

/* Tighter table cell padding on narrow viewports so more columns fit */
@media screen and (max-width: 768px) {
  .md-typeset table:not([class]) td,
  .md-typeset table:not([class]) th {
    padding: 0.5em 0.6em;
    font-size: 0.85em;
  }
}