/* ============================================================================
   IL CMS Tools — laptop layout system
   ----------------------------------------------------------------------------
   Every page carries its own inline <style> block (the app grew that way). This
   sheet is linked AFTER that block on each page, so these rules win without any
   of those blocks having to be rewritten.

   Target range is 1280–1920px — the screens the team actually works on. The
   pages were originally laid out phone-first, which on a laptop produced:
     · brand text #000 sitting on the #001529 header (invisible)
     · the header wrapping to two rows and overflowing its 64px height
     · content stretching edge-to-edge to 1824px on a 1920 screen
     · a cramped left column beside a mostly empty right one

   Anything below 1280px is no longer a supported layout (see README).
   ========================================================================== */

:root {
  --il-max:      1400px;   /* readable cap; 1824px lines were far too long */
  --il-navy:     #001529;
  --il-gutter:   28px;
  --il-card-gap: 18px;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
body { min-width: 1280px; }          /* below this the layout is not supported */

.main {
  max-width: var(--il-max) !important;
  padding: 20px var(--il-gutter) 48px !important;
  margin: 0 auto !important;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* nowrap is the fix for the two-row header: brand, nav and Logout stay on one
   line at every supported width. */
.header {
  height: 56px !important;
  padding: 0 var(--il-gutter) !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
}

.header h1 {
  color: #fff !important;            /* was #000 on the near-black bar */
  font-size: 15px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: .01em;
}

.header-right {
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0;                      /* lets the nav shrink instead of overflow */
  margin-left: auto;
}

.header .badge { white-space: nowrap; flex-shrink: 0; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
/* The nav is a fixed vertical sidebar on the left, styled where it lives:
   templates/_nav.html. That include also pads body by the sidebar width, so the
   header and content rules below apply to the area right of the sidebar. */

@media (min-width: 1600px) {
  .header h1 { font-size: 16px !important; }
}

/* ── Two-column tool pages ────────────────────────────────────────────────── */
/* 1fr 1fr left the working column cramped while the status column sat empty.
   The left side is where the actual work happens, so it gets the room. */
.two-col {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
  gap: var(--il-card-gap) !important;
  align-items: start !important;
}

.cols { gap: var(--il-card-gap) !important; align-items: flex-start !important; }
.cols > * { min-width: 0; }

/* ── Dashboard tool cards ─────────────────────────────────────────────────── */
/* auto-fill at 240px produced seven thin columns on a wide screen and a ragged
   second row. There are nine tools, so a fixed three-column grid lays them out
   as an even 3x3 with no orphan card. */
.tools {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--il-card-gap) !important;
}

.tool { padding: 18px 20px !important; }
.tool .tdesc { line-height: 1.5; }

/* ── Vertical rhythm ──────────────────────────────────────────────────────── */
/* Tightened so a whole tool page fits a 768px-tall laptop without scrolling. */
.card, .conn, .panel, .box { margin-bottom: var(--il-card-gap) !important; }
.conn { padding: 15px 18px !important; }

/* ── Drop zones ───────────────────────────────────────────────────────────── */
/* These were sized for a thumb. On a laptop they were burning vertical space. */
.upload-zone, .drop-zone, #drop-zone {
  padding: 22px 18px !important;
  min-height: 0 !important;
}

/* ── Long content ─────────────────────────────────────────────────────────── */
/* Wide tables and pre blocks scroll inside their own box rather than pushing
   the whole page sideways. */
.table-wrap, .log, pre, table { max-width: 100%; }
.table-wrap, .log { overflow-x: auto; }