/* SimovaTrack OTA mainpage styling — same theme as simova-track-idf6's
   on-device web UI (main/web/frontend/*.html), per Italo's 2026-08-15 request.
   Static file, not generated — tools/generate_index.py's TEMPLATE just links
   to it (kept separate from HTML/JS on purpose: easier to maintain than one
   big inline blob). Served straight off html/ by the nginx container, same as
   index.html itself. */

html { font-family: Helvetica, Arial, sans-serif; background: #101418; color: #e8ecef; }
/* 96vw not 100%: leaves a hair of breathing room on ultra-wide screens
   instead of the table running edge-to-edge (Italo, 2026-08-15 — "use more
   of horizontal screen"). Was a fixed 1100px, which wasted most of a wide
   monitor. */
body { margin: 0; padding: 2rem 1rem; max-width: 96vw; width: 1600px; margin-left: auto; margin-right: auto; }
h1 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.sub { color: #8a97a3; font-size: 0.85rem; margin-bottom: 1.5rem; }
.card { background: #171c22; border: 1px solid #232a31; border-radius: 8px; padding: 1.2rem 1.5rem; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
th, td { text-align: left; padding: 0.5rem 0.8rem; border-bottom: 1px solid #232a31; font-size: 0.9rem; white-space: nowrap; }
th { color: #8a97a3; font-weight: normal; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
a { color: #4d8fef; }
code { font-size: 0.85rem; }
/* SHA-256 and the AT+GETOTA command are the two values long enough to run off
   the right edge forever if left nowrap — everything else in the table is
   short enough to stay single-line. break-all (not break-word) because these
   are unbroken hex/URL strings with no natural wrap points. */
.sha, .cmd { font-family: monospace; font-size: 0.75rem; color: #8a97a3; white-space: normal; word-break: break-all; max-width: 16rem; }
.empty { color: #8a97a3; font-style: italic; }
.del-btn, .cmd-btn { font-size: 0.8rem; padding: 0.3rem 0.6rem; cursor: pointer; border-radius: 4px; white-space: nowrap; }
.del-btn { color: #ff6b6b; border: 1px solid #4a2a2a; background: #1c232b; }
.del-btn:hover:not(:disabled) { background: #2a1c1c; }
.del-btn:disabled { opacity: 0.5; cursor: default; }
.cmd-btn { color: #4d8fef; border: 1px solid #24344a; background: #1c232b; margin-top: 0.4rem; }
.cmd-btn:hover { background: #1c2a3a; }
.badge { font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 3px; white-space: nowrap; font-weight: bold; }
.badge-stable { background: #103a1e; color: #4ade80; }
.badge-beta { background: #3a2c0a; color: #ffb020; }
.badge-dev { background: #232a31; color: #8a97a3; }
.notes { color: #b8c0c8; max-width: 22rem; white-space: normal; }

/* Flashing-risk warning banner — Italo, 2026-08-15: "big warning note...
   wrong firmware may permanently brick devices". Deliberately loud (red, top
   of page, above the h1) rather than folded into .sub's quiet gray line. */
.warning { background: #3a1414; border: 1px solid #6b2a2a; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.warning-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.warning-head strong { color: #ff8080; font-size: 1rem; letter-spacing: 0.02em; }
.warning p { margin: 0.4rem 0; font-size: 0.85rem; color: #f0d0d0; line-height: 1.4; }
.warning ul { margin: 0.3rem 0; padding-left: 1.2rem; }
.warning li { font-size: 0.85rem; color: #f0d0d0; line-height: 1.4; margin: 0.3rem 0; }
.lang-btn { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 4px; background: #1c232b; color: #e8ecef; border: 1px solid #2a333c; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.lang-btn:hover { background: #232c35; }

/* Diagnostics page (2026-08-15b): crash dumps + release ELF (debug symbol)
   management, both locked behind admin login — see diagnostics.html/.js.
   "Intelligence data, not exactly sensitive" per Italo, so same visual
   language as the rest of the site, just gated. */
.diag-link { font-size: 0.85rem; margin: 0.8rem 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.6rem; }
.section-head h2 { font-size: 1.05rem; margin: 0; }
h2 { font-size: 1.05rem; }
.hint { color: #8a97a3; font-size: 0.8rem; }
.card + .card { margin-top: 1.5rem; }
.dl-btn { color: #4d8fef; border: 1px solid #24344a; background: #1c232b; }
.dl-btn:hover:not(:disabled) { background: #1c2a3a; }
.dl-btn, .del-btn { font-size: 0.8rem; padding: 0.3rem 0.6rem; cursor: pointer; border-radius: 4px; white-space: nowrap; }
.upload-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #232a31; }
.upload-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: #8a97a3; }
.upload-form input[type="text"], .upload-form input[type="file"] { background: #1c232b; border: 1px solid #2a333c; color: #e8ecef; border-radius: 4px; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.upload-form input[type="text"] { width: 9rem; }
.upload-form button { align-self: end; }
.locked { text-align: center; padding: 3rem 1rem; color: #8a97a3; }
.locked button { margin-top: 1rem; }
.decode-report { background: #0d1013; border: 1px solid #232a31; border-radius: 6px; padding: 0.8rem 1rem; font-size: 0.75rem; line-height: 1.4; color: #d0d6db; white-space: pre; overflow-x: auto; max-height: 28rem; overflow-y: auto; margin: 0; }
.decode-row td { white-space: normal; padding-top: 0.6rem; padding-bottom: 0.9rem; }

/* Site nav (2026-08-15d) — same small bar atop every page (firmware.html,
   upload.html, diagnostics.html; the landing page at / has its own tiles
   instead, see .tool-grid below). Plain links, not generated/JS-templated —
   four static pages, not worth a shared-include mechanism. */
.top-nav { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.2rem; font-size: 0.85rem; }
.top-nav a { color: #8a97a3; text-decoration: none; }
.top-nav a:hover { color: #4d8fef; }
.top-nav-current { color: #e8ecef; font-weight: bold; }

/* Landing page (html/index.html) tool-selector tiles. */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tool-card { background: #171c22; border: 1px solid #232a31; border-radius: 8px; padding: 1.4rem 1.5rem; text-decoration: none; color: inherit; display: block; transition: border-color 0.15s, background 0.15s; }
.tool-card:hover { border-color: #4d8fef; background: #1a2028; }
.tool-card .tool-icon { font-size: 1.6rem; margin-bottom: 0.6rem; display: block; }
.tool-card h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: #e8ecef; }
.tool-card p { margin: 0; font-size: 0.85rem; color: #8a97a3; line-height: 1.4; }
.tool-card .tool-badge { display: inline-block; margin-top: 0.6rem; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 3px; background: #232a31; color: #8a97a3; }