/* Small layer on top of Bootstrap's dark theme — layout + code surfaces only. */

/* Column stack: navbar, token widget, then the working area takes the rest.
   Sized by flex rather than a hard-coded navbar height, so the token widget can
   grow (expanded breakdown) without pushing the panel off-screen. */
body { display: flex; flex-direction: column; height: 100vh; }

/* The navbar and widget stay put and each column scrolls on its own, so picking
   a file never costs a scroll back up to the tree. */
.layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  flex: 1;
  min-height: 0;   /* without this a grid child refuses to shrink and overflows */
}

.sidebar { background: var(--bs-tertiary-bg); overflow-y: auto; }

.panel { padding: 1.5rem; overflow-y: auto; overflow-x: hidden; }

.tree-group { border-top: 1px solid var(--bs-border-color); }
.tree-dir {
  cursor: pointer;
  padding: .5rem .9rem;
  font-size: .8rem;
  font-family: var(--bs-font-monospace);
  color: var(--bs-secondary-color);
}
.tree-file {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .35rem .9rem .35rem 1.5rem;
  text-decoration: none;
  color: var(--bs-body-color);
  font-size: .875rem;
}
.tree-file:hover { background: var(--bs-secondary-bg); }
.tree-file.active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.tree-name { font-family: var(--bs-font-monospace); word-break: break-all; }
.tree-meta { margin-left: auto; font-size: .7rem; color: var(--bs-secondary-color); }

.section-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: .4rem;
}

.code-view {
  max-height: 22rem;
  overflow: auto;
  padding: .9rem;
  border-radius: .5rem;
  border: 1px solid var(--bs-border-color);
  font-size: .8rem;
  margin: 0;
}
/* Prism's theme paints its own background; keep it from fighting the card. */
.code-view[class*="language-"], .code-view code { background: transparent; }

.code-input {
  font-family: var(--bs-font-monospace);
  font-size: .8rem;
  line-height: 1.45;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.empty-state { max-width: 34rem; margin: 4rem auto; text-align: center; }

.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-card { width: 100%; max-width: 22rem; }

/* HTMX indicators: hidden until a request is in flight. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

@media (max-width: 720px) {
  /* Stack on a phone and let the page scroll as one document instead. */
  .layout { grid-template-columns: 1fr; height: auto; }
  .sidebar { max-height: 16rem; }
  .panel { padding: 1rem; overflow: visible; }
}


/* --- Prompt weight widget ------------------------------------------------- */
/* Category colours. Grey is deliberately last: it is the residual (template
   scaffolding), and reading as "other" is correct. */
.tokens-seg--system_prompt { background: #4c8dff; }
.tokens-seg--pre_prompt    { background: #34d399; }
.tokens-seg--hints         { background: #fbbf24; }
.tokens-seg--tools         { background: #a78bfa; }
.tokens-seg--chat_template { background: #94a3b8; }

.tokens-host { background: var(--bs-tertiary-bg); flex: 0 0 auto; max-height: 62vh; overflow-y: auto; }

.tokens-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .9rem;
  flex-wrap: wrap;
}
.tokens-bar--muted { color: var(--bs-secondary-color); }

.tokens-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.tokens-note { font-size: .78rem; color: var(--bs-secondary-color); }

.tokens-stack {
  display: flex;
  flex: 1 1 12rem;
  height: .55rem;
  min-width: 8rem;
  border-radius: .3rem;
  overflow: hidden;
  background: var(--bs-secondary-bg);
}
.tokens-seg { height: 100%; }

.tokens-swatch {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: .15rem;
  margin-right: .45rem;
}

.tokens-detail { padding: 0 .9rem .9rem; }
/* Counts line up column-wise — old-style figures would make these hard to scan. */
.tokens-num { font-variant-numeric: tabular-nums; }
.tokens-table { margin-bottom: .5rem; }
.tokens-tools { max-height: 18rem; overflow-y: auto; }

.tokens-tool-bar { background: var(--bs-secondary-bg); border-radius: .2rem; height: .45rem; }
.tokens-tool-bar > div { background: #a78bfa; height: 100%; border-radius: .2rem; }

@media (max-width: 720px) {
  body { height: auto; }
  .tokens-host { max-height: none; }
}