/* TympanIQ pilot: tokens and components on top of Bootstrap 5.3.
   Look agreed in the design mockup (project overview §9). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root,
[data-bs-theme="light"] {
  --tq-bg: #eef1f4;
  --tq-surface: #ffffff;
  --tq-fg: #1d2630;
  --tq-muted: #5d6b78;
  --tq-line: #d5dce3;
  --tq-accent: #3f6b8a;          /* soft blue-gray, from the device's visual character */
  --tq-accent-hover: #345a75;
  --tq-accent-soft: #e3ecf3;
  --tq-rec: #1f6fd1;             /* device light: blue = recording */
  --tq-rec-soft: #e2eefc;
  --tq-amber: #b7791f;           /* device light: amber = paused or finishing */
  --tq-amber-soft: #fbf0dc;
  --tq-fault: #c0392b;           /* device light: red = fault */
  --tq-fault-soft: #fbe5e2;
  --tq-ok: #2f7d4f;
  --tq-ok-soft: #e1f2e8;
  --tq-interim: #8a97a3;
  --tq-highlight: #fff4c2;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

[data-bs-theme="dark"] {
  --tq-bg: #12171c;
  --tq-surface: #1a2128;
  --tq-fg: #e4e9ee;
  --tq-muted: #9aa7b3;
  --tq-line: #2d3741;
  --tq-accent: #7ea6c4;
  --tq-accent-hover: #93b7d2;
  --tq-accent-soft: #233340;
  --tq-rec: #5aa2f5;
  --tq-rec-soft: #18304d;
  --tq-amber: #e0a84e;
  --tq-amber-soft: #3a2d16;
  --tq-fault: #ef7b6e;
  --tq-fault-soft: #402020;
  --tq-ok: #6cc391;
  --tq-ok-soft: #173326;
  --tq-interim: #6f7c88;
  --tq-highlight: #4a4120;
}

body {
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--tq-bg);
  --bs-body-color: var(--tq-fg);
  --bs-border-color: var(--tq-line);
  --bs-secondary-color: var(--tq-muted);
  background: var(--tq-bg);
  color: var(--tq-fg);
  font-family: var(--font-body);
  font-size: .92rem;
  min-height: 100vh;
}

.mono, .ts { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.btn-primary {
  --bs-btn-bg: var(--tq-accent); --bs-btn-border-color: var(--tq-accent);
  --bs-btn-hover-bg: var(--tq-accent-hover); --bs-btn-hover-border-color: var(--tq-accent-hover);
  --bs-btn-active-bg: var(--tq-accent-hover); --bs-btn-active-border-color: var(--tq-accent-hover);
  --bs-btn-color: var(--tq-surface); --bs-btn-hover-color: var(--tq-surface); --bs-btn-active-color: var(--tq-surface);
  --bs-btn-disabled-bg: var(--tq-accent); --bs-btn-disabled-border-color: var(--tq-accent);
}
.btn-outline-secondary {
  --bs-btn-color: var(--tq-fg); --bs-btn-border-color: var(--tq-line);
  --bs-btn-hover-bg: var(--tq-accent-soft); --bs-btn-hover-color: var(--tq-fg); --bs-btn-hover-border-color: var(--tq-accent);
}
.form-control, .form-select { background-color: var(--tq-surface); color: var(--tq-fg); border-color: var(--tq-line); }
.table { --bs-table-bg: var(--tq-surface); --bs-table-color: var(--tq-fg); --bs-table-border-color: var(--tq-line); }

/* Top bar */
.app-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--tq-surface); border-bottom: 1px solid var(--tq-line); }
.brand { font-weight: 600; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; color: var(--tq-fg); text-decoration: none; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tq-accent); box-shadow: 0 0 0 3px var(--tq-accent-soft); }
.app-bar nav { display: flex; gap: 4px; margin-left: 12px; }
.app-bar nav a { color: var(--tq-muted); text-decoration: none; padding: 4px 10px; border-radius: 6px; font-weight: 500; }
.app-bar nav a.active { color: var(--tq-fg); background: var(--tq-accent-soft); }
.app-bar .signout { margin-left: auto; }
.app-bar .signout button { border: none; background: none; color: var(--tq-muted); font-size: .85rem; padding: 4px 6px; }
.app-bar .signout button:hover { color: var(--tq-fg); }
@media (max-width: 575.98px) {
  .app-bar { flex-wrap: wrap; }
  .app-bar nav { order: 3; width: 100%; margin-left: 0; }
}

.app-body { max-width: 1240px; margin: 0 auto; padding: 14px 16px 24px; display: grid; gap: 12px; }

.panel { background: var(--tq-surface); border: 1px solid var(--tq-line); border-radius: 10px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 6px; }
.panel-head h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tq-muted); margin: 0; font-weight: 600; }
.empty { padding: 18px 12px 22px; color: var(--tq-muted); font-size: .85rem; text-align: center; }
.field-hint { font-size: .74rem; color: var(--tq-muted); }

.alert-tq { border-radius: 8px; padding: 8px 12px; font-size: .85rem; color: var(--tq-fg); }
.alert-tq.warn { background: var(--tq-amber-soft); border: 1px solid var(--tq-amber); }
.alert-tq.err { background: var(--tq-fault-soft); border: 1px solid var(--tq-fault); }
.alert-tq.ok { background: var(--tq-ok-soft); border: 1px solid var(--tq-ok); }

:focus-visible { outline: 3px solid var(--tq-rec); outline-offset: 2px; }

/* Sign in (P01) */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.signin form { width: 100%; max-width: 300px; display: grid; gap: 14px; }
.signin .brand { justify-content: center; font-size: 1.25rem; }