/* ============================================================
   OPERATOR — enterprise ops design system
   Tokens, primitives, and shared components
   ============================================================ */

/* IBM Plex fonts are loaded by a top-level <link> tag in each HTML page,
   not via @import. Nested @import from a same-origin stylesheet to a
   remote origin trips file:// "unique security origin" checks in WebKit
   and Chromium when the HTML is opened directly from disk. */

:root {
  /* ---- Surfaces (dark) ---- */
  --bg-0: #0B0F13;    /* page */
  --bg-1: #11161C;    /* panel base */
  --bg-2: #161D24;    /* raised */
  --bg-3: #1D252E;    /* elevated */
  --bg-4: #25303B;    /* hover */
  --bg-inset: #080C0F;

  /* ---- Borders ---- */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.32);

  /* ---- Text ---- */
  --fg-0: #F1F4F7;
  --fg-1: #C8D1DA;
  --fg-2: #94A2AE;
  --fg-3: #6A7682;
  --fg-4: #475158;

  /* ---- Signal colors (used sparingly) ---- */
  --amber: #F2B441;        /* primary accent */
  --amber-dim: #B68528;
  --amber-bg: rgba(242, 180, 65, 0.10);

  --teal: #4FCFC1;
  --teal-dim: #2E8B82;
  --teal-bg: rgba(79, 207, 193, 0.08);

  --rose: #F26D6D;
  --rose-dim: #B23F3F;
  --rose-bg: rgba(242, 109, 109, 0.10);

  --violet: #B68CF5;
  --violet-bg: rgba(182, 140, 245, 0.10);

  --lime: #B9D960;
  --lime-bg: rgba(185, 217, 96, 0.10);

  /* status colors */
  --ok: var(--teal);
  --warn: var(--amber);
  --err: var(--rose);
  --info: var(--violet);

  /* ---- Type ---- */
  --ff-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xxs: 10px;
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 15px;
  --t-xl: 18px;
  --t-2xl: 22px;
  --t-3xl: 30px;

  /* ---- Spacing ---- */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 20px;
  --s-7: 24px;
  --s-8: 32px;

  /* ---- Radii ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 4px;
  --r-4: 6px;
  --r-5: 8px;

  /* ---- Shadows ---- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-pop: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px var(--line-2);

  /* ---- Misc ---- */
  --row-h: 24px;
  --row-h-dense: 22px;
  --row-h-relaxed: 28px;

  --transition: 90ms cubic-bezier(.2,.7,.3,1);
}

/* fix the typo above */
:root { --bg-inset: #080C0F; }

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
  --bg-0: #F2F4F6;
  --bg-1: #FFFFFF;
  --bg-2: #F7F8FA;
  --bg-3: #EEF1F4;
  --bg-4: #E3E7EC;
  --bg-inset: #ECEFF2;

  --line-1: rgba(15, 22, 30, 0.06);
  --line-2: rgba(15, 22, 30, 0.10);
  --line-3: rgba(15, 22, 30, 0.16);
  --line-strong: rgba(15, 22, 30, 0.32);

  --fg-0: #0C1217;
  --fg-1: #2A333C;
  --fg-2: #51606C;
  --fg-3: #7A8893;
  --fg-4: #A4AEB7;

  --amber-bg: rgba(242, 180, 65, 0.18);
  --teal-bg:  rgba(46, 139, 130, 0.10);
  --rose-bg:  rgba(178, 63, 63, 0.10);
  --violet-bg:rgba(120, 78, 200, 0.10);
  --lime-bg:  rgba(140, 165, 60, 0.12);

  --amber: #C28819;
  --teal:  #2E8B82;
  --rose:  #C04545;
  --violet:#7E4FD8;
  --lime:  #6E8B2C;

  --shadow-1: 0 1px 0 rgba(15,22,30,0.04), 0 0 0 1px rgba(15,22,30,0.06);
  --shadow-pop: 0 8px 28px rgba(15,22,30,0.16), 0 0 0 1px var(--line-2);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--ff-sans);
  font-size: var(--t-md);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

::selection { background: var(--amber); color: #0B0F13; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); border: 2px solid transparent; background-clip: padding-box; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.t-mono { font-family: var(--ff-mono); }
.t-h1 { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); line-height: 1.15; }
.t-h2 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.015em; color: var(--fg-0); }
.t-h3 { font-size: var(--t-xl); font-weight: 600; color: var(--fg-0); }
.t-eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  font-weight: 500;
}
.t-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-weight: 500;
}
.t-dim { color: var(--fg-2); }
.t-faint { color: var(--fg-3); }
.t-num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.row { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--line-1); }
.divider-v { width: 1px; background: var(--line-1); align-self: stretch; }

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
}
.panel-header {
  display: flex; align-items: center; gap: var(--s-3);
  height: 36px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line-1);
  font-size: var(--t-sm);
  color: var(--fg-1);
}
.panel-title {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-2);
  font-weight: 500;
}

/* ============================================================
   APP CHROME
   ============================================================ */
.appbar {
  display: flex; align-items: center;
  height: 40px;
  padding: 0 var(--s-4);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-1);
  gap: var(--s-5);
  position: relative;
  z-index: 10;
}
.appbar .brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--fg-0);
  font-weight: 500;
}
.appbar .brand .logo {
  width: 18px; height: 18px;
  background: var(--amber);
  position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.appbar .navlinks {
  display: flex; gap: 0; height: 100%;
}
.appbar .navlink {
  padding: 0 var(--s-4);
  display: flex; align-items: center;
  font-size: var(--t-sm);
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  height: 100%;
  margin-bottom: -1px;
}
.appbar .navlink:hover { color: var(--fg-1); background: var(--bg-2); }
.appbar .navlink.active { color: var(--fg-0); border-bottom-color: var(--amber); }

.statusbar {
  display: flex; align-items: center;
  height: 22px;
  padding: 0 var(--s-4);
  background: var(--bg-1);
  border-top: 1px solid var(--line-1);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  gap: var(--s-5);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: var(--t-sm);
  font-family: var(--ff-sans);
  color: var(--fg-1);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-4); color: var(--fg-0); }
.btn:active { background: var(--bg-2); }
.btn.primary {
  background: var(--amber);
  color: #0B0F13;
  border-color: transparent;
  font-weight: 500;
}
.btn.primary:hover { background: #FFC75B; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--bg-3); color: var(--fg-0); }
.btn.danger { color: var(--rose); }
.btn.danger:hover { background: var(--rose-bg); }
.btn.sm { height: 22px; padding: 0 8px; font-size: var(--t-xs); }
.btn.lg { height: 32px; padding: 0 14px; font-size: var(--t-md); }
.btn.icon { width: 26px; padding: 0; justify-content: center; }
.btn.icon.sm { width: 22px; }

.btn-group {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
}
.btn-group > .btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--line-2);
}
.btn-group > .btn:last-child { border-right: none; }
.btn-group > .btn.active { background: var(--bg-4); color: var(--fg-0); }

/* ============================================================
   INPUTS
   ============================================================ */
.input {
  height: 26px;
  padding: 0 8px;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--fg-0);
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  outline: none;
  width: 100%;
}
.input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); }
.input::placeholder { color: var(--fg-3); }

.input-affix {
  position: relative;
  display: flex; align-items: center;
}
.input-affix .icon-l {
  position: absolute; left: 7px; color: var(--fg-3); pointer-events: none;
  font-family: var(--ff-mono); font-size: var(--t-sm);
}
.input-affix .input { padding-left: 26px; }

.select {
  height: 26px;
  padding: 0 24px 0 8px;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--fg-0);
  background-color: var(--bg-3);
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  appearance: none;
  cursor: pointer;
}

/* ============================================================
   TAGS / BADGES / CHIPS
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px;
  padding: 0 6px;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  color: var(--fg-1);
  background: var(--bg-3);
  border-radius: var(--r-1);
  letter-spacing: 0.02em;
  font-weight: 500;
  border: 1px solid var(--line-1);
}
.tag.amber { color: var(--amber); background: var(--amber-bg); border-color: rgba(242,180,65,0.25); }
.tag.teal  { color: var(--teal);  background: var(--teal-bg);  border-color: rgba(79,207,193,0.25); }
.tag.rose  { color: var(--rose);  background: var(--rose-bg);  border-color: rgba(242,109,109,0.25); }
.tag.violet{ color: var(--violet);background: var(--violet-bg);border-color: rgba(182,140,245,0.25); }
.tag.lime  { color: var(--lime);  background: var(--lime-bg);  border-color: rgba(185,217,96,0.25); }
.tag.solid.amber { background: var(--amber); color: #0B0F13; border-color: transparent; }
.tag.solid.teal  { background: var(--teal);  color: #0B0F13; border-color: transparent; }
.tag.solid.rose  { background: var(--rose);  color: #0B0F13; border-color: transparent; }

.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
  display: inline-block; flex-shrink: 0;
}
.dot.amber { background: var(--amber); }
.dot.teal  { background: var(--teal);  box-shadow: 0 0 0 3px var(--teal-bg); }
.dot.rose  { background: var(--rose);  }
.dot.violet{ background: var(--violet);}
.dot.lime  { background: var(--lime);  }
.dot.pulse { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  100%{ box-shadow: 0 0 0 8px transparent; opacity: 0.6; }
}

.kbd {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  padding: 1px 5px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-2);
  color: var(--fg-2);
}

/* ============================================================
   TABLE
   ============================================================ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-family: var(--ff-sans);
}
.tbl thead th {
  position: sticky; top: 0;
  text-align: left;
  background: var(--bg-2);
  color: var(--fg-3);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-1);
  user-select: none;
  white-space: nowrap;
}
.tbl thead th:last-child { border-right: none; }
.tbl tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--line-1);
  border-right: 1px solid var(--line-1);
  color: var(--fg-1);
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tbody td:last-child { border-right: none; }
.tbl tbody tr:hover td { background: var(--bg-2); }
.tbl tbody tr.selected td { background: rgba(242,180,65,0.07); }
.tbl tbody tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
.tbl .num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl.dense tbody td { padding: 3px 10px; }
.tbl.zebra tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }

/* ============================================================
   TREE & LIST
   ============================================================ */
.tree-row, .list-row {
  display: flex; align-items: center; gap: 6px;
  height: var(--row-h);
  padding: 0 var(--s-3);
  font-size: var(--t-sm);
  color: var(--fg-1);
  cursor: pointer;
  position: relative;
  user-select: none;
}
.tree-row:hover, .list-row:hover { background: var(--bg-2); color: var(--fg-0); }
.tree-row.selected, .list-row.selected {
  background: var(--amber);
  color: #0B0F13;
}
.tree-row.selected .meta, .list-row.selected .meta { color: rgba(11,15,19,0.7); }
.tree-row .caret {
  width: 12px; flex-shrink: 0;
  display: inline-block;
  color: var(--fg-3);
  transition: transform 100ms;
  font-family: var(--ff-mono);
  font-size: 10px;
}
.tree-row.open .caret { transform: rotate(90deg); }
.tree-row .icon, .list-row .icon { width: 14px; flex-shrink: 0; color: var(--fg-3); }
.tree-row.selected .icon, .list-row.selected .icon { color: rgba(11,15,19,0.7); }
.tree-row .label, .list-row .label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree-row .meta, .list-row .meta {
  font-family: var(--ff-mono); font-size: var(--t-xs); color: var(--fg-3);
}

/* ============================================================
   CALLOUTS
   ============================================================ */
.callout {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--fg-3);
  background: var(--bg-2);
  padding: var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  color: var(--fg-1);
}
.callout.amber  { border-left-color: var(--amber); }
.callout.teal   { border-left-color: var(--teal); }
.callout.rose   { border-left-color: var(--rose); }
.callout.violet { border-left-color: var(--violet); }
.callout .ttl { font-weight: 600; color: var(--fg-0); margin-bottom: 4px; }

/* ============================================================
   PROGRESS / BARS
   ============================================================ */
.bar {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block; height: 100%; background: var(--amber);
}
.bar.teal > i { background: var(--teal); }
.bar.rose > i { background: var(--rose); }
.bar.violet > i { background: var(--violet); }
.bar.thick { height: 6px; }

/* Sparkline placeholder */
.spark {
  height: 24px; width: 80px;
  background:
    linear-gradient(90deg, transparent 0 14%, var(--line-2) 14% 15%, transparent 15% 32%, var(--line-2) 32% 33%, transparent 33% 50%, var(--line-2) 50% 51%, transparent 51% 68%, var(--line-2) 68% 69%, transparent 69% 86%, var(--line-2) 86% 87%, transparent 87% 100%);
}

/* ============================================================
   CHECKBOX / RADIO / SWITCH
   ============================================================ */
.chk {
  width: 14px; height: 14px;
  background: var(--bg-inset);
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.chk.checked { background: var(--amber); border-color: var(--amber); }
.chk.checked::after {
  content: ''; width: 4px; height: 8px;
  border-right: 2px solid #0B0F13; border-bottom: 2px solid #0B0F13;
  transform: rotate(45deg) translate(-1px, -1px);
}

.switch {
  width: 28px; height: 16px;
  background: var(--bg-3);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%; background: var(--fg-2);
  transition: var(--transition);
}
.switch.on { background: var(--amber); }
.switch.on::after { transform: translateX(12px); background: #0B0F13; }

/* ============================================================
   ICON (use emoji-free monospace glyphs)
   ============================================================ */
.gly {
  font-family: var(--ff-mono);
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; line-height: 1;
  color: var(--fg-3);
  font-size: 12px;
}
.gly.sm { width: 12px; font-size: 11px; }
.gly.lg { width: 18px; font-size: 14px; }

/* ============================================================
   CODE
   ============================================================ */
.code {
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  background: var(--bg-inset);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: var(--s-4);
  color: var(--fg-1);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.55;
}
.code .kw { color: #B68CF5; }
.code .str { color: #B9D960; }
.code .num { color: #F2B441; }
.code .com { color: var(--fg-3); font-style: italic; }
.code .fn { color: #4FCFC1; }
.code .typ { color: #F2B441; }
.code .pun { color: var(--fg-2); }

/* ============================================================
   UTILITY
   ============================================================ */
.shadow-pop { box-shadow: var(--shadow-pop); }
.scroll { overflow: auto; }
.nowrap { white-space: nowrap; }
.fit { width: fit-content; }
.grow { flex: 1; min-width: 0; min-height: 0; }
.center { display: flex; align-items: center; justify-content: center; }

.grid-bg {
  background-image:
    linear-gradient(var(--line-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: 24px 24px;
}

.scanlines {
  background-image: repeating-linear-gradient(
    180deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px
  );
}