/* Design tokens, page shell, header and the layout that keeps the app
exactly one viewport tall.

The palette is shared with the data123.lt site (styles.css there): deep teal for
action, navy for ink and emphasis, amber only for warnings. Variable names are
the ones the rest of the CSS already uses, so components re-theme from here. */

:root{
  --teal:#0f766e;
  --teal-600:#0d9488;
  --dark-teal:#0b2545;
  --navy:#0b2545;
  --navy-700:#13315c;
  --amber:#f6a609;
  --bg:#f5f7fa;
  --surface:#ffffff;
  --border:#e5e9ef;
  --border-soft:#eef1f4;
  --text:#1a202c;
  --text-2:#334155;
  --muted:#64748b;
  --primary:#0f766e;
  --primary-hover:#0b5e58;
  --primary-soft:#e6f4f2;
  /* Text-safe teal: 5.5:1 on white. */
  --link:#0f766e;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --surface-raised:#fbfcfd;
  --good:#0f766e;
  --good-wash:#e6f4f2;
  --info:#3b5bdb;
  --info-wash:#edf2ff;
  --warn:#b7791f;
  --warn-wash:#fff8e6;
  --critical:#c53030;
  --critical-wash:#fdecec;
  --font:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Numerals only. */
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --shadow-sm:0 1px 2px rgba(11,37,69,.05), 0 1px 1px rgba(11,37,69,.03);
  --shadow-md:0 8px 24px rgba(11,37,69,.08);
  --shadow-lg:0 18px 44px rgba(11,37,69,.16);
  --header-h:64px;
}

*{ box-sizing:border-box; }

/* The app fills the viewport exactly and the page itself never scrolls, so a
   scrollable region (the table, the catalog) is the only scrollbar on screen —
   no more scrolling the panel and then the window separately. */
html{ height:100%; }
body{
  margin:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:var(--font);
  font-size:14px;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
/* Chrome ignores a flex item's contents when deciding its minimum size unless
   min-height:0 says otherwise — without these the panels grow past the viewport
   and the body scrollbar comes straight back. */
header, #tabBar, #legend, .demoBar{ flex:none; }

/* ── demo strip ── */
.demoBar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 22px;
  background:linear-gradient(100deg, var(--teal) 0%, var(--navy) 100%);
  color:#e6f4f2; font-size:12.5px;
}
.demoBar b{ color:#fff; font-weight:600; }
.demoBar .demoPill{
  font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff;
}
.demoBar a{ margin-left:auto; color:#fff; font-weight:600; text-decoration:none;
  padding:5px 12px; border-radius:999px; background:var(--amber); color:#1a202c; white-space:nowrap; }
.demoBar a:hover{ background:#ffb92e; }

/* ── header ── */
header{
  position:sticky;
  top:0;
  z-index:20;
  min-height:var(--header-h);
  padding:10px 22px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:10px; margin-right:10px;
  text-decoration:none; color:var(--navy);
}
.brandMark{ width:32px; height:32px; flex-shrink:0; }
.brandText{ display:flex; flex-direction:column; line-height:1.1; }
.brandText b{ font-size:16px; font-weight:700; letter-spacing:-.2px; }
.brandText b span{ color:var(--teal); }
.brandText small{ font-size:10.5px; color:var(--muted); letter-spacing:.3px; }

#roleBadge{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--text-2); white-space:nowrap;
  padding:4px 12px 4px 4px; border:1px solid var(--border); border-radius:999px;
}
#roleBadge:empty{ display:none; }
#roleBadge::before{
  content:attr(data-initials);
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), var(--navy));
  color:#fff; font-size:11px; font-weight:700;
}

/* ── controls ── */
button,input,select{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease;
}
header input, header .searchDdlInput{ background:#f1f4f7; border-color:transparent; }
header input:focus{ background:var(--surface); border-color:var(--teal); }
input::placeholder{ color:#94a3b8; }
button{ cursor:pointer; }
button:hover{ background:#f1f4f7; border-color:#d5dbe3; color:var(--text); }
button:active{ transform:translateY(1px); }
button:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:1px;
}
button:disabled{ opacity:.5; cursor:default; }

button.btnPrimary{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
  font-weight:600;
  box-shadow:0 1px 2px rgba(15,118,110,.25);
}
button.btnPrimary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }