/* Vanilla CSS for the bot_projects browser.
   No build step. Loaded as plain CSS via <link>. */

/* ---------- Reset & root ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1f2328;
  background: #f6f7f8;
  -webkit-font-smoothing: antialiased;
}

:root {
  --bg: #f6f7f8;
  --fg: #1f2328;
  --muted: #656d76;
  --border: #d0d7de;
  --border-strong: #afb8c1;
  --accent: #0969da;
  --accent-bg: #ddf4ff;
  --code-bg: #f6f8fa;
  --code-fg: #1f2328;
  --panel-bg: #ffffff;
  --hover-bg: #eaeef2;
  --error: #cf222e;
  --error-bg: #ffebe9;
  --success: #1a7f37;
  --success-bg: #dafbe1;
  --shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; }
code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
pre code { background: none; padding: 0; font-size: 0.85em; }
pre { background: var(--code-bg); padding: 12px; border-radius: 6px; overflow-x: auto; line-height: 1.45; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
  .topbar { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
}
.brand { font-weight: 700; font-size: 16px; color: var(--fg); }
.topnav { display: flex; gap: 16px; flex: 1; }
.topnav a { color: var(--fg); font-weight: 500; }
.topnav a:hover { color: var(--accent); text-decoration: none; }
.logout-form { margin: 0; }
.btn-link {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  font: inherit;
}
.btn-link:hover { color: var(--accent); }

/* ---------- Main ----------
   Layout strategy:
   - .main caps the WHOLE-PAGE max-width so single-column views
     (home page, login, search results) don't sprawl to infinity on
     a 4K monitor. 1280px is the "comfortable reading width" cap.
   - The project-layout is wider (1600px) so the content pane has
     room next to the sidebar — see .project-layout rule below.
   - Mobile drops the page padding so the content-pane fills the
     screen (with the sidebar in the off-screen drawer). */
.main { max-width: 1280px; margin: 0 auto; padding: 24px; }
/* Pages that use the project-layout (sidebar + content) need a
   wider max-width so the content pane isn't squashed to ~830px.
   The :has() selector covers modern browsers; the descendant
   selector covers anything older. */
.project-layout { max-width: 1600px; }
/* Mobile: tighter page padding so the content-pane fills the screen. */
@media (max-width: 900px) {
  .main { padding: 12px 16px; max-width: none; }
  .project-layout { max-width: none; }
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 28px; margin: 0 0 16px; }
h2 { font-size: 22px; margin: 24px 0 12px; }
h3 { font-size: 18px; margin: 20px 0 10px; }
h4 { font-size: 16px; margin: 16px 0 8px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.right { margin-left: auto; }

/* ---------- Buttons (toolbar) ---------- */
.btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--fg);
  font-size: 0.9em;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover { background: var(--hover-bg); text-decoration: none; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: #0860c7; border-color: #0860c7; }
.btn-active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.btn-disabled {
  background: var(--bg);
  color: var(--muted);
  border-style: dashed;
  cursor: not-allowed;
}
.btn[disabled], .btn-disabled:hover { background: var(--bg); }

/* ---------- File toolbar (above read content) ---------- */
.file-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.file-toolbar .right { margin-left: auto; }

/* ---------- Code body (source-code file view) ---------- */
.code-body {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.45;
}
.code-body .codehilite {
  background: transparent;
  padding: 0;
  margin: 0;
}
.code-body .codehilite pre { background: transparent; padding: 0; margin: 0; }
/* Pygments linenos table */
.code-body table.codehilitetable { border-collapse: collapse; margin: 0; }
.code-body .linenos {
  user-select: none;
  color: var(--muted);
  padding-right: 12px;
  text-align: right;
  border-right: 1px solid var(--border);
  width: 1%;
  white-space: nowrap;
}

/* ---------- Prose body (txt/cfg/ini/conf/log file view) ----------
   Plain text documents need flowing layout, not code-block treatment.
   - Larger, readable font (not monospace)
   - `white-space: pre-wrap` so long lines wrap at the container edge
     instead of forcing horizontal scroll, and runs of multiple
     spaces collapse naturally (matters for OCR-extracted texts
     that have double-spaces between every word).
   - `word-wrap: break-word` so very long words/URLs don't blow out
     the layout. */
.prose-body {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 28px;
  font-family: Georgia, "Iowan Old Style", "Charter", "Source Serif Pro", serif;
  font-size: 1.05em;
  line-height: 1.65;
  color: var(--fg);
  max-width: 100%;
  overflow-wrap: break-word;
}
.prose-body .prose-pre {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ---------- Edit form ---------- */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.edit-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.edit-toolbar .right { margin-left: auto; display: flex; gap: 8px; }
.editor {
  width: 100%;
  min-height: 60vh;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
}
.editor:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.2);
}
.edit-notes {
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.edit-notes label { display: block; margin-bottom: 6px; }
.notes-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.95em;
  background: var(--bg);
  color: var(--fg);
}
.notes-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.2);
}

/* ---------- History pane (sidebar on file view) ---------- */
.history-pane {
  margin-top: 20px;
  padding-top: 0;
  border-top: 1px solid var(--border);
}
.history-pane > summary {
  list-style: none;  /* hide default disclosure triangle */
  cursor: pointer;
  padding: 12px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.history-pane > summary::-webkit-details-marker {
  display: none;  /* Safari */
}
.history-pane > summary::before {
  content: "▶";  /* closed-state chevron */
  display: inline-block;
  font-size: 0.7em;
  color: var(--muted);
  transition: transform 0.15s ease;
  width: 12px;
  flex-shrink: 0;
}
.history-pane[open] > summary::before {
  transform: rotate(90deg);  /* open-state chevron */
}
.history-pane > summary:hover {
  background: var(--hover-bg);
}
.history-heading {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
  display: inline;
}
.history-count {
  font-weight: 400;
}
.history-list {
  list-style: none;
  padding: 0 0 0 16px;  /* indent under the chevron */
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "sha date subject"
    "sha date author";
  column-gap: 6px;
  row-gap: 1px;
  padding: 6px 8px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.82em;
  line-height: 1.35;
}
.history-sha {
  grid-area: sha;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  color: var(--accent);
  font-weight: 600;
  align-self: center;
}
.history-date {
  grid-area: date;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: center;
}
.history-subject {
  grid-area: subject;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-author {
  grid-area: author;
  color: var(--muted);
  font-size: 0.85em;
}

/* ---------- Flashes ---------- */
.flashes { list-style: none; padding: 0; margin: 0 0 16px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; border: 1px solid; }
.flash--error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.flash--warning { background: #fff8e1; border-color: #f0b429; color: #8a5a00; }
.flash--message { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ---------- Project list ---------- */
.project-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.project-card { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px; transition: border-color 0.1s, box-shadow 0.1s; }
.project-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.project-link { display: block; padding: 16px 18px; color: var(--fg); }
.project-link:hover { text-decoration: none; }
.project-link h2 { font-size: 17px; margin: 0 0 6px; color: var(--accent); }
.project-link p { margin: 0; font-size: 13px; }

/* ---------- Project layout (tree + content) ----------
   Sidebar width tuned so the content pane gets ~1280px on a 1600px
   viewport (1600 - 280 sidebar - 16 gap - 16+16 content padding =
   ~1272px content). On a 1920px monitor the content pane is
   ~1580px wide — comfortable for wide markdown tables.
   On mobile, the sidebar becomes an off-screen drawer; the content
   pane fills the screen. */
.project-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  min-height: 70vh;
}
@media (max-width: 900px) {
  .project-layout { grid-template-columns: 1fr; }
}
.tree-pane {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 12px;
}
.tree-pane h2, .tree-pane h3 { margin: 0 0 4px; }
.content-pane {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 32px;
  min-width: 0;
}
/* Mobile: tighter content-pane padding so the text area reaches
   the edges. The drawer sidebar sits off-screen, so we have all
   the horizontal room. */
@media (max-width: 900px) {
  .content-pane { padding: 16px 18px; border-radius: 6px; }
}
.empty-state { text-align: center; padding: 64px 24px; color: var(--muted); }
.empty-state h2 { color: var(--fg); }
.back-link { display: inline-block; margin-bottom: 12px; font-size: 13px; }

/* ---------- Tree ---------- */
.tree, .tree ul { list-style: none; padding-left: 0; margin: 0; }
.tree ul { padding-left: 16px; }
.tree li { margin: 2px 0; line-height: 1.4; }
.tree details { margin-left: 0; }
.tree summary {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
}
.tree summary:hover { background: var(--hover-bg); }
.tree summary::marker { color: var(--muted); }
.tree-file a { font-size: 13px; padding: 2px 4px; border-radius: 3px; display: inline-block; }
.tree-file a:hover { background: var(--hover-bg); text-decoration: none; }
.tree-file .size { font-size: 11px; }

/* ---------- Markdown body ----------
   min-width: 0 is critical here: any block-level child (table, pre,
   blockquote) with intrinsic min-content width can otherwise force
   this article to expand beyond its grid cell, blowing out the
   sidebar layout. The .content-pane already has min-width: 0; this
   makes it doubly safe. */
.markdown-body { line-height: 1.6; color: var(--fg); min-width: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25;
}
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body p { margin: 0 0 16px; }
.markdown-body ul, .markdown-body ol { margin: 0 0 16px; padding-left: 2em; }
.markdown-body li { margin: 4px 0; }
.markdown-body blockquote {
  margin: 0 0 16px;
  padding: 0 16px;
  color: var(--muted);
  border-left: 4px solid var(--border);
}
.markdown-body table { border-collapse: collapse; margin: 0 0 16px; display: block; max-width: 100%; overflow-x: auto; }
.markdown-body th, .markdown-body td { padding: 6px 13px; border: 1px solid var(--border); }
.markdown-body th { background: var(--code-bg); font-weight: 600; }
.markdown-body tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.markdown-body img { max-width: 100%; }
.markdown-body hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

/* ---------- Compare ---------- */
.compare-form { background: var(--panel-bg); padding: 16px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.compare-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.compare-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; min-width: 200px; }
.compare-row select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: white; font: inherit; }

.compare-panes { display: grid; gap: 16px; }
.compare-panes--side { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .compare-panes--side { grid-template-columns: 1fr; } }
.compare-panes--stack { grid-template-columns: 1fr; }
.compare-panel { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; min-width: 0; }
.compare-title { font-size: 13px; font-weight: 500; margin: 0 0 12px; color: var(--muted); }

/* ---------- Search ---------- */
.search-form { display: flex; gap: 8px; margin-bottom: 16px; }
.search-form input[type="search"] { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.search-form select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.search-results { list-style: none; padding: 0; }
.search-results li { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; }
.result-link { display: block; margin-bottom: 4px; }
.snippet {
  background: var(--code-bg);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 4px 0 0;
}
.badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-left: 8px; text-transform: uppercase; }
.badge--filename { background: var(--accent-bg); color: var(--accent); }
.badge--content { background: var(--code-bg); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #0860c5; border-color: #0860c5; text-decoration: none; color: white; }
.btn[disabled] { background: var(--muted); border-color: var(--muted); cursor: not-allowed; }

/* ---------- Login ---------- */
.login-wrap { max-width: 360px; margin: 64px auto; background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px; padding: 32px; box-shadow: var(--shadow); }
.login-wrap h1 { font-size: 22px; margin-bottom: 4px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-form input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.login-form .btn { margin-top: 8px; }

/* ---------- Error ---------- */
.error { color: var(--error); }

/* ---------- Tree pane: shared header, highlight, drawer toggle ----------
   These styles cover three things added together so the tree behaves
   well on both desktop (sticky sidebar with a visible highlight) and
   mobile (collapsible floating drawer). */

/* Header row inside the tree pane: back-link on the left,
   drawer-toggle button on the right (visible on mobile only). */
.tree-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.tree-pane-header .back-link { margin-bottom: 0; }

/* The drawer toggle lives in the topbar (always visible) and is
   shown only on mobile, where the tree is hidden by default.
   On desktop the tree is always visible, so the toggle would be
   redundant. The 900px breakpoint matches the .project-layout one. */
.tree-drawer-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
  /* Sit to the left of the brand on mobile */
  margin-right: 8px;
  flex-shrink: 0;
}
.tree-drawer-toggle:hover { background: var(--hover-bg); }
.tree-drawer-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.2);
}
.tree-drawer-toggle-icon { font-size: 16px; line-height: 1; }
.tree-drawer-toggle-label { font-size: 13px; }
/* On wider screens the toggle is hidden — the tree is always there. */
@media (min-width: 901px) {
  .tree-drawer-toggle { display: none !important; }
}
/* On mobile, the toggle is shown (and the tree is hidden behind the
   drawer). */
@media (max-width: 900px) {
  .tree-drawer-toggle { display: inline-flex; }
}

/* Highlight: the currently-selected file in the tree. Three layers:
   - left border on the <li> for vertical accent
   - tinted background
   - bold link
   This is the only colour treatment on .tree-file inside the sidebar. */
.tree-file--current {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  /* Compensate for the border so text doesn't shift */
  margin-left: -3px;
  border-radius: 0 3px 3px 0;
}
.tree-file-link--current {
  color: var(--accent);
  font-weight: 600;
}
.tree-file--current > a { text-decoration: none; }
.tree-file--current > a:hover { text-decoration: underline; }

/* Project index: when no file is selected, no .tree-file--current
   exists, so this rule is a no-op there. */

/* Backdrop (mobile drawer): semi-transparent overlay behind the
   drawer. Hidden on desktop. Click-to-close is wired in JS. */
.tree-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 35, 40, 0.45);
  z-index: 90;
}
@media (max-width: 900px) {
  .tree-drawer-backdrop { display: block; }
}

/* Body scroll lock when the drawer is open. We toggle this from JS. */
body.tree-drawer-open { overflow: hidden; }

/* --- Mobile drawer behaviour ---
   On viewports <= 900px the tree becomes a floating overlay.
   Closed by default: positioned off-screen via transform.
   Opened: transform slides it in. Backdrop fades in. */
@media (max-width: 900px) {
  /* Override the desktop sticky behaviour so the drawer is free to float */
  .project-layout {
    grid-template-columns: 1fr;
  }
  .tree-pane {
    position: fixed;
    top: 0;
    left: 0;
    width: min(85vw, 320px);
    max-height: 100vh;
    height: 100vh;
    /* Sit above the backdrop (z 90) and below any modal */
    z-index: 100;
    margin: 0;
    border-radius: 0;
    border-right: 1px solid var(--border);
    /* Start off-screen */
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    /* Allow scrolling within the drawer */
    overflow-y: auto;
    box-shadow: var(--shadow);
  }
  /* When the drawer-open class is on the body, slide the tree in. */
  body.tree-drawer-open .tree-pane {
    transform: translateX(0);
  }
  body.tree-drawer-open .tree-drawer-backdrop {
    display: block;
  }
  /* When the drawer is closed the backdrop is still in the DOM (so the
     CSS rule above doesn't surprise it back into view) — keep it hidden
     with the [hidden] attribute and only show via JS when opened. */
  .tree-drawer-backdrop[hidden] { display: none !important; }
}

/* --- Desktop scroll-into-view affordance ---
   On desktop, when the page loads with a current file, we
   scroll the highlighted node into view via JS. We don't
   want a layout flash, so we just let the natural scroll
   happen. No CSS needed. */

/* Inline history-pane compactness on the file/edit page when the
   sidebar already shows the full tree. The history lives in the
   content-pane now (so it scrolls with the file) instead of being
   stuck in the sidebar. */
.project-layout--with-file .history-pane {
  margin-top: 0;
  border-top: none;
  padding: 0;
  margin-bottom: 12px;
}

/* ---------- Receipts blueprint ----------
   Two-column layout: side nav + main. Side nav sticks on desktop.
   Reuses the existing .main + grid infrastructure from .project-layout
   so the receipts views inherit the same width and mobile behaviour. */

.receipts-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  min-height: 60vh;
}
@media (max-width: 900px) {
  .receipts-layout { grid-template-columns: 1fr; gap: 16px; }
}
.receipts-side {
  position: sticky;
  top: 12px;
  align-self: start;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.receipts-side-title {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.receipts-nav { list-style: none; padding: 0; margin: 0; }
.receipts-nav li { margin: 0; }
.receipts-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
}
.receipts-nav a:hover { background: var(--hover-bg); }
.receipts-nav a.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
.receipts-main { min-width: 0; }
.receipts-main h1 {
  margin: 0 0 16px;
  font-size: 28px;
}
.receipts-section { margin: 32px 0; }
.receipts-section h2 {
  font-size: 18px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* Stats grid: 4 cards on desktop, 2 on tablet, 1 on phone. */
.receipts-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 32px;
}
@media (max-width: 1100px) { .receipts-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .receipts-stats-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 24px; font-weight: 700; margin: 4px 0; }
.stat-sub { font-size: 12px; color: var(--muted); }

/* Tables. num cells right-align, monospace tabular nums for amounts. */
.receipts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}
.receipts-table th, .receipts-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.receipts-table th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.receipts-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.receipts-table tr:hover td { background: var(--hover-bg); }
.receipts-table tfoot th { border-top: 2px solid var(--border-strong); border-bottom: none; padding-top: 12px; }
.receipts-table--totals { max-width: 380px; }
.receipts-table--totals th { width: 40%; }

/* Receipt filter form */
.receipts-filter {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
.receipts-filter label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.receipts-filter select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  font: inherit;
  min-width: 180px;
}

/* Item category badges on receipt detail. */
.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge--alcohol { background: #fde2e2; color: #b3261e; }
.badge--drink, .badge--wine, .badge--beer, .badge--cocktail, .badge--coffee {
  background: #e3f2fd; color: #0969da;
}
.badge--food { background: #e8f5e9; color: #1a7f37; }
.badge--service { background: #fff4e5; color: #b35900; }
.badge--other { background: #f6f8fa; color: var(--muted); }

/* Receipt notes blockquote */
.receipt-notes {
  border-left: 4px solid var(--accent);
  margin: 0 0 16px;
  padding: 8px 14px;
  color: var(--muted);
  background: var(--accent-bg);
  border-radius: 0 4px 4px 0;
}

/* Hub grid: 4 stat-cards on top of the overview, but as clickable cards. */
.receipts-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 32px;
}
@media (max-width: 1100px) { .receipts-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .receipts-hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  display: block;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.06s ease, border-color 0.12s ease, background 0.12s ease;
}
.hub-card:hover {
  border-color: var(--accent, #0969da);
  background: var(--hover-bg);
  transform: translateY(-1px);
}
.hub-card-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hub-card-value { font-size: 24px; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.hub-card-sub { font-size: 12px; color: var(--muted); }

/* Quicklinks row: bigger touch targets on mobile. */
.receipts-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 8px;
}
@media (max-width: 700px) { .receipts-quicklinks { grid-template-columns: 1fr; } }
.quicklink {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  min-height: 64px;
}
.quicklink:hover {
  border-color: var(--accent, #0969da);
  background: var(--hover-bg);
}
.quicklink-title { font-weight: 600; font-size: 15px; }
.quicklink-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Empty state when there are no receipts. */
.empty-state {
  padding: 40px 24px;
  background: var(--panel-bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  color: var(--muted);
}
.empty-state p { margin: 6px 0; }

/* Mobile: hide the side nav on narrow screens, replace with a horizontal scroll row. */
@media (max-width: 700px) {
  .receipts-layout { flex-direction: column; }
  .receipts-side {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
  }
  .receipts-nav { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .receipts-nav li { flex: 0 0 auto; }
  .receipts-side-title { display: none; }
}

/* Raw OCR (collapsed by default) */
.receipt-raw { margin: 24px 0; }
.receipt-raw summary {
  cursor: pointer;
  padding: 6px 0;
  font-weight: 500;
  color: var(--muted);
}
.receipt-raw pre {
  background: var(--code-bg);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 12px;
  max-height: 360px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Receipt photo block at the bottom of the per-receipt view.
   Receipts are typically tall portrait scans (≈600-1200px long,
   300-800px wide) so we cap width and let height scale. */
.receipts-photo-section { margin: 40px 0 24px; }
.receipt-photo-link {
  display: inline-block;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  line-height: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.receipt-photo-link:hover {
  border-color: var(--accent, #0969da);
  background: var(--hover-bg);
}
.receipt-photo {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 1200px;   /* giant scans don't push the page into oblivion */
  object-fit: contain;
  border-radius: 4px;
}
.receipt-photo-caption {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.receipt-photo-caption code {
  font-size: 11px;
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 3px;
}