/* MTOGuru — design system "engineering" (repris de Perenco Flow Assurance).
   Dense, précis, navy + accent bleu, IBM Plex. */

:root {
  --bg: #fafaf9;
  --bg-panel: #ffffff;
  --bg-subtle: #f4f5f7;
  --bg-section-head: #f0f2f5;
  --bg-inset: #f8f9fa;

  --border: #d8dce1;
  --border-strong: #bcc2c9;
  --border-light: #e8ebef;

  --text: #1a1f2c;
  --text-secondary: #4a5260;
  --text-muted: #7a8290;
  --text-disabled: #b0b6bf;

  --navy: #003366;
  --navy-dark: #00254d;
  --navy-light: #e8eef5;

  --accent: #0066b8;
  --accent-light: #e3f0fb;

  --ok: #107c10;        --ok-bg: #dff6dd;   --ok-border: #92c992;
  --warn: #bc6c00;      --warn-bg: #fef6e3; --warn-border: #e6c170;
  --fail: #a01010;      --fail-bg: #fde7e9; --fail-border: #e3a3a3;
  --info: #005a9e;      --info-bg: #deecf9;

  --primary-top: #004080;  --primary-shade: #003366;
  --primary-top-hover: #0055a5; --primary-shade-hover: #003d80;

  --shadow-sm: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.06);

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;

  --row-h: 28px;
  --header-h: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ===== TOPBAR ===== */
.topbar {
  height: var(--header-h);
  background: var(--navy);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--navy-dark);
  user-select: none;
}
.topbar-brand { display: flex; align-items: baseline; gap: 12px; padding-right: 24px; }
.topbar-brand .brand-name { font-weight: 600; font-size: 13px; letter-spacing: .3px; }
.topbar-brand .brand-doc {
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.65);
  padding: 1px 6px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
}
.topbar-tabs {
  display: flex; align-items: center; height: 100%;
  border-left: 1px solid rgba(255,255,255,.12); margin-left: -16px;
  min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.topbar-tab {
  padding: 0 14px; height: 100%; display: flex; align-items: center;
  font-size: 12px; color: rgba(255,255,255,.7); cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.08); background: transparent; border-top: 0;
  border-bottom: 0; border-left: 0; letter-spacing: .2px; transition: background .1s; white-space: nowrap;
}
.topbar-tab:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.95); }
.topbar-tab.active { background: var(--bg); color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.topbar-actions { display: flex; gap: 6px; align-items: center; }
.topbar-actions .btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.topbar-actions .btn:hover { background: rgba(255,255,255,.18); }

/* ===== LAYOUT ===== */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.workspace { flex: 1; padding: 14px 16px 34px; }
.crumbs { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.crumbs a { color: var(--text-secondary); }
.crumbs .sep { margin: 0 6px; color: var(--text-disabled); }
.page-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 14px; }

/* ===== KPI CARDS ===== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--bg-panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 12px 14px; }
.kpi .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.kpi .val { font-family: var(--font-mono); font-size: 26px; font-weight: 500; margin-top: 6px; line-height: 1; }
.kpi .sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.kpi .dot { width: 7px; height: 7px; display: inline-block; }
.dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-fail { background: var(--fail); }
.val-ok { color: var(--ok); } .val-warn { color: var(--warn); } .val-fail { color: var(--fail); }

/* ===== PANEL ===== */
.panel { background: var(--bg-panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; background: linear-gradient(var(--bg-section-head), #eaecf0);
  border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; color: var(--text);
}

/* ===== TABLE ===== */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl thead th {
  position: sticky; top: 0; background: var(--bg-section-head); text-align: left;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
  font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.tbl tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); height: var(--row-h); }
.tbl tbody tr:hover { background: var(--bg-subtle); }
.tbl .num { text-align: right; font-family: var(--font-mono); }
.tbl .code { font-family: var(--font-mono); color: var(--text-secondary); }

/* coverage bar */
.cov { display: flex; align-items: center; gap: 8px; }
.cov-track { width: 78px; height: 5px; background: #e4e7ec; overflow: hidden; }
.cov-fill { height: 100%; }
.cov-fill.ok { background: var(--ok); } .cov-fill.warn { background: var(--warn); } .cov-fill.fail { background: var(--fail); }
.cov-txt { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); min-width: 36px; }

/* ===== BADGES / PILLS ===== */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .4px; border: 1px solid transparent; }
.pill .d { width: 6px; height: 6px; }
.pill-ok { background: var(--ok-bg); color: var(--ok-text, #2d5e1d); border-color: var(--ok-border); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.pill-fail { background: var(--fail-bg); color: var(--fail); border-color: var(--fail-border); }
.tag { font-family: var(--font-mono); font-size: 10px; background: var(--bg-subtle); border: 1px solid var(--border-light); color: var(--text-muted); padding: 1px 5px; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 11.5px;
  font-weight: 500; border: 1px solid var(--border-strong); background: var(--bg-panel); color: var(--text);
  cursor: pointer; transition: background .1s, border-color .1s; }
.btn:hover { background: var(--bg-subtle); border-color: var(--text-disabled); }
.btn-primary { background: linear-gradient(var(--primary-top), var(--primary-shade)); color: #fff; border-color: var(--navy-dark); }
.btn-primary:hover { background: linear-gradient(var(--primary-top-hover), var(--primary-shade-hover)); }
.btn-sm { padding: 2px 9px; font-size: 11px; }

/* ===== SEGMENTED FILTER ===== */
.seg { display: inline-flex; border: 1px solid var(--border-strong); }
.seg button { padding: 3px 11px; font-size: 11px; background: var(--bg-panel); border: 0; border-right: 1px solid var(--border-light); cursor: pointer; color: var(--text-secondary); }
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--navy); color: #fff; }

/* ===== SEARCH ===== */
.search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--bg-panel); padding: 3px 10px; min-width: 300px; }
.search input { border: 0; outline: 0; background: transparent; width: 100%; }

/* ===== STATUS BAR ===== */
.statusbar { position: fixed; bottom: 0; left: 0; right: 0; height: 22px; background: var(--bg-section-head);
  border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; font-size: 11px;
  color: var(--text-muted); font-family: var(--font-mono); z-index: 50; gap: 16px; }
.statusbar .dot { width: 6px; height: 6px; background: var(--ok); display: inline-block; margin-right: 4px; }