/* Mono Gateway firmware index — mirrors Tailwind docs table style
   (ref: tailwindcss.com/docs/table-layout, first "Class/Styles" table)
   Fonts reflect the docs' computed families: Inter (sans) / IBM Plex Mono (mono). */

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #030712; /* gray-950 */
  background: #f1f5f9; /* slate-100 */
  margin: 0;
}
body { padding: 16px; } /* single inset */

/* Table: full width, collapsed, divider-based (no cell border, no stripes) */
#list {
  border: 0;
  border-collapse: collapse;
  width: 100%;
  font-size: 16px; /* table */
}
#list tr:nth-child(even) { background: transparent; } /* kill zebra */

/* Header: left, semibold, gray-950, thin gray-900/10 underline */
#list th {
  padding: 0.75rem; /* uniform */
  text-align: left;
  font-weight: 600;
  color: #030712;                        /* gray-950 */
  background: #f1f5f9; /* slate-100 */
  border-bottom: 1px solid rgba(17,24,39,0.10); /* gray-900/10 */
}

/* Body rows: thin gray-950/5 divider under each */
#list tbody tr { border-bottom: 1px solid rgba(3,7,18,0.05); } /* gray-950/5 */
#list td {
  padding: 0.75rem; /* uniform */
  vertical-align: top;  /* align-top */
  font-size: 14px;      /* cells */
}

/* File Name column = the "Class" column: mono, medium, sky-500 */
#list td.link a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  color: #0284c7; /* sky-600 */
}
#list td.link a:visited { color: #0284c7; }
#list td.link a:hover   { color: #0369a1; } /* sky-700 */

/* Size / Date = muted metadata (like the docs "Styles" column) */
#list td.size, #list td.date { color: #64748b; } /* slate-500 */

/* Underline links only on hover */
#list a         { text-decoration: none; }
#list a:hover   { text-decoration: underline; }

/* Header sort-links: darker than body links (sky-700 vs sky-500) */
#list th a          { color: #075985; } /* sky-800 */
#list th a:visited  { color: #075985; }
#list th a:hover    { color: #0c4a6e; } /* sky-900 */

/* Page heading: darker slate, slightly lighter than body text */
h1 { color: #475569; font-size: 24px; font-weight: 400; max-width: calc(72rem + 2rem + 2px); margin: 0 auto; padding: 1.75rem 0; }

/* Custom footer text below the table */
.mono-footer { margin-top: 1.25rem; font-size: 16px; color: #475569; } /* slate-600 */
.mono-footer a         { color: #0284c7; text-decoration: none; }      /* sky-600 */
.mono-footer a:hover   { color: #0369a1; text-decoration: underline; } /* sky-700 */

/* Footer logo below the text */
.mono-logo { display: block; height: 32px; width: auto; margin-top: 2.5rem; }

/* Full-width header bar (injected by footer script) */
.mono-header {
  display: flex;
  align-items: center;
  margin: -16px -16px 16px;              /* bleed past body 16px padding -> edge to edge */
  padding: 12px 16px;
  border-bottom: 1px solid #cbd5e1;      /* slate-300 */
}
.mono-header img { height: 28px; width: auto; display: block; }

/* Centered content card around the listing (max-w-5xl = 1024px) */
.mono-content {
  max-width: 72rem;              /* 1152px, Tailwind max-w-6xl */
  margin: 0 auto;                /* center horizontally */
  background: #fff;
  border: 1px solid #e2e8f0;     /* slate-200 */
  border-radius: 0.5rem;         /* rounded-lg */
  padding: 1rem;
}

/* Header: white bg; inner box aligns with the content card's left edge */
.mono-header { display: block; background: #fff; }
.mono-header-inner { max-width: 72rem; margin: 0 auto; }

/* Reclaim width from Size/Date for the File Name column (override inline th widths) */
#list th:nth-child(1) { width: 70% !important; } /* File Name */
#list th:nth-child(2) { width: 13% !important; } /* File Size */
#list th:nth-child(3) { width: 17% !important; } /* Date */

/* Line the logo up with the card's inner content (matches .mono-content padding) */
.mono-header-inner { padding: 0 1.5rem; }

/* Flush logo with the card's OUTER left border:
   wrapper border-box == card border-box (72rem content + 3rem padding + 2px border) */
.mono-header-inner { max-width: calc(72rem + 2rem + 2px); padding: 0; }

/* Logo + title row in the header */
.mono-header-inner { display: flex; align-items: center; }
.mono-title { margin-left: 2rem; font-size: 16px; font-weight: 400; color: #64748b; } /* slate-500 */

/* Header: taller (16px vertical), no bottom margin (h1 padding owns the gap) */
.mono-header { padding: 16px; margin: -16px -16px 0; }

/* Table header text: 15px, normal weight */
#list th { font-size: 14px; font-weight: 400; }

/* Alert icon in front of the footer text */
.mono-note-icon { vertical-align: -0.15em; margin-right: 0.4rem; }

/* Extra padding around the footer paragraph (icon included) */
.mono-footer { padding: 0.75rem; }

/* Experiment: subtle row hover (body rows only, not the header) */
#list tbody tr { transition: background-color 0.5s ease; }
#list tbody tr:hover { background: #f8fafc; } /* slate-50 */

/* Experiment: larger file/dir names, size/date stay 14px */
#list td.link { font-size: 16px; }

/* Align mixed-size cell text on a shared baseline (was vertical-align: top) */
#list td { vertical-align: baseline; }

/* DigitalOcean referral badge at the page bottom */
.mono-pagefoot { margin-top: 1.5rem; text-align: center; }