/* ============================================================
   logbook.css — styles for the Logbook section.
   Reuses the seniority app's existing :root tokens
   (--bg --panel --line --ink --dim --amber --green --red)
   and fonts (Barlow Condensed / IBM Plex Sans / IBM Plex Mono).
   Scoped under #page-logbook so nothing here leaks into the
   seniority pages.
   ============================================================ */

/* #page-logbook is a <main> (block by default). Do NOT set display here —
   an id rule would override [hidden] and make it show on every tab. The
   seniority app.js toggles the hidden attribute to switch pages. */
#page-logbook[hidden] { display: none; }

/* ---- sub-tab strip (Dashboard / Table / Utility) ---- */
#page-logbook .lbsub-tabs { margin: 0 0 16px; }
/* sub-pages are toggled via the [hidden] attribute in logbook.ui.js
   (same pattern as the seniority .page sections) — no display override here. */
#page-logbook .lbsub { display: block; }
#page-logbook .lbsub[hidden] { display: none; }

/* ---- message / status line ---- */
#page-logbook .lb-msg {
  min-height: 18px;
  margin: 6px 0 12px;
  font: 13px/1.4 "IBM Plex Mono", monospace;
  color: var(--dim);
}
#page-logbook .lb-msg.ok   { color: var(--green); }
#page-logbook .lb-msg.warn { color: var(--amber); }
#page-logbook .lb-msg.err  { color: var(--red); }

/* ---- fleet filter chips ---- */
#page-logbook .lb-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px;
}
#page-logbook .chip {
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font: 600 12px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
#page-logbook .chip:hover { color: var(--ink); border-color: #3a4a5a; }
#page-logbook .chip.on {
  background: rgba(242,179,61,.12);
  border-color: var(--amber);
  color: var(--amber);
}

/* ---- KPI / rolling-window cards ---- */
#page-logbook .lb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
#page-logbook .lb-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 13px 15px;
}
#page-logbook .lb-card-k {
  font: 600 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--dim);
}
#page-logbook .lb-card-v {
  margin: 7px 0 3px;
  font: 600 26px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .5px;
  color: var(--ink);
}
#page-logbook .lb-card-v.amber { color: var(--amber); }
#page-logbook .lb-card-v.green { color: var(--green); }
#page-logbook .lb-card-v.red   { color: var(--red); }
#page-logbook .lb-card-s {
  font: 12px/1.3 "IBM Plex Sans", sans-serif;
  color: var(--dim);
}

/* ---- charts ---- */
#page-logbook .lb-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 0 0 10px;
}
#page-logbook .lb-chartbox {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 14px 16px 18px;
}
#page-logbook .lb-chartbox h4 {
  margin: 0 0 12px;
  font: 600 13px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .4px;
  color: var(--ink);
}
#page-logbook .lb-chartbox canvas { max-height: 240px; }
#page-logbook .lb-chartbox.wide { grid-column: 1 / -1; }
#page-logbook .lb-chartbox.wide canvas { max-height: 320px; cursor: pointer; }

/* ---- flight table ---- */
#page-logbook .lb-tablewrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: auto;
  max-height: 68vh;
  background: var(--panel);
}
#page-logbook .lb-count {
  margin: 0 0 10px;
  font: 12px/1 "IBM Plex Mono", monospace;
  color: var(--dim);
}
#page-logbook .lb-table {
  width: 100%;
  border-collapse: collapse;
  font: 13px/1.35 "IBM Plex Mono", monospace;
}
#page-logbook .lb-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #141b23;
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  color: var(--dim);
  font: 600 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
#page-logbook .lb-table thead th:hover { color: var(--ink); }
#page-logbook .lb-table thead th.sorted { color: var(--amber); }
#page-logbook .lb-table thead tr.filter-row th {
  position: sticky; top: 33px; z-index: 1;
  padding: 4px 6px;
  cursor: default;
  text-transform: none;
}
#page-logbook .lb-table thead tr.filter-row input,
#page-logbook .lb-table thead tr.filter-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1 "IBM Plex Mono", monospace;
}
#page-logbook .lb-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(44,58,72,.5);
  white-space: nowrap;
  color: var(--ink);
}
#page-logbook .lb-table tbody tr:hover td { background: rgba(255,255,255,.03); }

/* ---- utility panels ---- */
#page-logbook .lb-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 16px 18px;
  margin: 0 0 16px;
}
#page-logbook .lb-panel h3 {
  margin: 0 0 4px;
  font: 600 15px/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
}
#page-logbook .lb-panel p {
  margin: 0 0 12px;
  font: 13px/1.45 "IBM Plex Sans", sans-serif;
  color: var(--dim);
}

/* upload row */
#page-logbook .lb-uprow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 6px;
}
#page-logbook .lb-uprow input[type="file"] { color: var(--dim); font-size: 13px; max-width: 100%; }

/* review-then-commit cards */
#page-logbook .lb-review { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
#page-logbook .lb-review .lb-card { padding: 12px 14px; }
#page-logbook .lb-review-h {
  display: flex; align-items: baseline; gap: 10px;
  font: 600 13px/1.2 "IBM Plex Sans", sans-serif;
  color: var(--ink);
}

/* upload control: <label class="lb-file"> wrapping a hidden file input */
#page-logbook .lb-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 600 13px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
#page-logbook .lb-file:hover { border-color: var(--amber); color: var(--amber); }

/* fleet-map editor (admin) */
#page-logbook .lb-admin { margin-top: 8px; }
#page-logbook .lb-fleetmap { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
#page-logbook .lb-fmrow { display: flex; align-items: center; gap: 10px; }
#page-logbook .lb-flab {
  min-width: 70px;
  font: 600 13px/1 "IBM Plex Mono", monospace;
  color: var(--amber);
}
#page-logbook .lb-fminput {
  width: 110px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1 "IBM Plex Mono", monospace;
}

/* compact buttons used throughout the logbook UI (classes: mini / primary mini /
   mini danger). The seniority .primary keeps its own amber styling; .mini only
   adds compact padding to it and styles the non-primary variants. */
#page-logbook button.mini {
  padding: 5px 12px;
  border-radius: 6px;
  font: 600 12px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
}
#page-logbook button.mini:not(.primary) {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
}
#page-logbook button.mini:not(.primary):hover { border-color: var(--amber); color: var(--amber); }
#page-logbook button.mini.danger { border-color: var(--red); color: var(--red); }
#page-logbook button.mini.danger:hover { background: rgba(212,99,107,.14); }

/* mono helper (in case app lacks it) */
#page-logbook .mono { font-family: "IBM Plex Mono", monospace; }

@media (max-width: 640px) {
  #page-logbook .lb-cards { grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); }
}