:root {
  --bg: #0b0e14;
  --bg-raised: #131824;
  --bg-inset: #0e121c;
  --line: #232b3d;
  --text: #dbe2f0;
  --text-muted: #8b96ad;
  --accent: #f5b83d;
  --accent-text: #1a1405;
  --blue: #3b82f6;
  --green: #10b981;
  --red: #ef4444;
  --amber: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; padding: 24px 0 48px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.7rem; margin: 0.4em 0; }
h2 { font-size: 1.15rem; margin: 0 0 0.7em; }
h3 { font-size: 0.95rem; margin: 1.1em 0 0.4em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }
.ok-text { color: var(--green); }
.warn-text { color: var(--amber); }
code { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

/* Header / nav */
.site-header { background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--accent); }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.site-nav a { color: var(--text-muted); }
.site-nav a.active, .site-nav a:hover { color: var(--text); text-decoration: none; }
.sso-link { color: var(--accent) !important; font-weight: 600; }
.site-footer { border-top: 1px solid var(--line); padding: 14px 0; font-size: 0.85rem; }

/* Cards / layout */
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin: 0 0 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hero { padding: 18px 0 6px; }
.hero .lede { color: var(--text-muted); max-width: 720px; font-size: 1.05rem; }

/* Banners */
.banner { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; border: 1px solid; }
.banner.warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.4); }
.banner.ok { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.4); }
.banner.info { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.4); }
.banner ul { margin: 4px 0; padding-left: 20px; }

/* Forms */
textarea, input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%; background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit;
}
textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); }
.field { display: block; margin: 0 0 12px; font-size: 0.9rem; color: var(--text-muted); }
.field input, .field select, .field textarea { margin-top: 4px; color: var(--text); }
.check-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.9rem; }
.check-label input { width: auto; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.filter-actions { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
.filter-actions select { width: auto; }

button, .button {
  display: inline-block; background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 16px;
  font: inherit; cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { border-color: var(--accent); text-decoration: none; }
.button.primary, button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.button.primary:hover { filter: brightness(1.08); }
.button.danger, button.danger { border-color: var(--red); color: var(--red); background: transparent; }
.button.danger:hover { background: var(--red); color: #fff; }
.button.small, button.small { padding: 4px 10px; font-size: 0.85rem; }
.button.quiet, button.quiet { background: transparent; color: var(--text-muted); }
button:disabled { opacity: 0.5; cursor: default; }

/* Landing lists */
.accept-list { list-style: none; margin: 0; padding: 0; }
.accept-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.ok-dot, .no-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ok-dot { background: var(--green); }
.no-dot { background: var(--red); }
.pct-badge { margin-left: auto; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.steps { padding-left: 20px; }
.steps li { margin: 0 0 8px; }
.loc-list { padding-left: 20px; margin: 4px 0; }

/* Quote page */
.quote-head-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.quote-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.03em; margin: 0 0 6px; }
.payout-box { text-align: right; }
.payout-label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.payout-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.status-badge { display: inline-block; border-radius: 12px; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid; }
.status-quoted { color: var(--blue); border-color: var(--blue); }
.status-submitted { color: var(--amber); border-color: var(--amber); }
.status-accepted { color: var(--green); border-color: var(--green); }
.status-rejected { color: var(--red); border-color: var(--red); }
.status-expired { color: var(--text-muted); border-color: var(--text-muted); }
.status-review { color: var(--amber); border-color: var(--amber); }

.instructions-box { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-top: 14px; }
.instructions-box h3 { margin-top: 0; }
.copy-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; }
.copy-field label { display: block; font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.copyable { cursor: pointer; font-size: 1rem; padding: 4px 10px; display: inline-block; }
.copyable:hover { border-color: var(--accent); }
.copyable.copied { border-color: var(--green); color: var(--green); }

/* Tables */
.table-wrap { overflow-x: auto; }
/* Let a wide table break out of the page's centered 1080px .wrap cap, up to
   (near) the real window edges, WITHOUT forcing the table itself to be
   that wide when its content doesn't need it.
   Split into two jobs on two different elements, because one element can't
   cleanly do both: .table-wrap-breakout is pulled to the window edges
   UNCONDITIONALLY (fixed negative margins - correct and window-relative
   regardless of what's inside it, verified by hand against a concrete
   window width). Centering the possibly-narrower table INSIDE that
   window-wide strip is then table's own job via margin:auto - auto margins
   only fight explicit ones on the SAME element, so giving each concern its
   own element removes the conflict entirely instead of trying to encode
   "escape .wrap, but also just auto-center if I didn't need to" in one
   calc() (attempted and reverted - not expressible without invalid CSS
   mixing auto into max()). */
.table-wrap-breakout {
  width: calc(100vw - 32px);
  margin-left: calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
}
table { border-collapse: collapse; width: 100%; }
/* Scoped to the one table using the breakout wrapper - the global `table`
   rule above (width:100%) is correct for every other table in the app
   (settings, kv-tables, quote line-items) and must not change. */
.table-wrap-breakout > table { width: auto; max-width: 100%; margin: 0 auto; }
/* Wide data tables (many columns, e.g. inventory): table-layout:fixed makes
   column widths EXPLICIT and authoritative (set once from th/first-row,
   never renegotiated by content) instead of "auto", where the browser either
   compresses every column to force-fit 100% (cut off the action button) or,
   under width:max-content, ignores max-width on individual cells entirely
   (item names stopped truncating - showed nothing but "..."). Fixed layout
   lets .item-cell's width genuinely constrain that one column while
   min-width on .col-action still protects it, with no fight between them.
   width:auto (not 100%) so the table sizes from its declared column widths
   instead of being forced to fill (and over-stretch) a wider wrapper. */
.sortable-table { table-layout: fixed; width: auto; }
/* table-layout:fixed sizes columns from these th widths only (never from
   body-row content) - every column that needs a real constraint gets one
   here. Flags gets no width rule and shares remaining space. */
.col-item { width: 260px; }
.col-qty { width: 70px; }
.col-position { width: 90px; }
.col-best { text-align: center; }
.col-listat { width: 90px; }
.col-profit { width: 90px; }
.col-action { width: 100px; white-space: nowrap; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { border-bottom: none; font-weight: 700; }
.total-value { color: var(--accent); font-size: 1.05rem; white-space: nowrap; }
.row-ineligible { opacity: 0.5; }

/* Item cell with icon (quote + inventory item tables). Deliberately NOT
   display:flex: a flex td computes its box height differently from its
   plain sibling td's in the same row under border-collapse, so its bottom
   border rendered at a different height than the rest of the row - looked
   like "broken" borders. Plain inline layout keeps every td in the row the
   same box-model, so heights (and therefore borders) always match.
   No max-width here: under table-layout:fixed the column's actual width
   comes from .col-item on the th (inventory) or is simply the table's
   natural auto width (quote.html, which has no fixed layout) - a max-width
   on the body cell is ignored either way and was dead weight. */
.item-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-icon { border-radius: 3px; vertical-align: middle; margin-right: 8px; }

.kv-table td { border-bottom: 1px solid var(--line); }
.kv-table td:first-child { color: var(--text-muted); width: 40%; }
.kv-table.small td { padding: 3px 8px; font-size: 0.85rem; }

.tag { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 0.75rem; border: 1px solid var(--line); color: var(--text-muted); margin-right: 4px; }
/* Flags stack vertically (not side-by-side) to keep the column narrow.
   No flexbox on the td itself - see .item-cell comment above for why. */
.flags-cell .tag { display: block; width: fit-content; margin: 0 0 3px; }
.flags-cell .tag:last-child { margin-bottom: 0; }
.tag-blue { color: var(--blue); border-color: var(--blue); }
.tag-green { color: var(--green); border-color: var(--green); }
.tag-red { color: var(--red); border-color: var(--red); }
.tag-amber { color: var(--amber); border-color: var(--amber); }

pre.unresolved { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 0.85rem; max-height: 300px; overflow-y: auto; }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 20px; }
.stat-tile { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 16px; text-align: center; }
.stat-value { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.stat-label { color: var(--text-muted); font-size: 0.82rem; margin-top: 2px; }

/* Admin */
.admin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.admin-nav a { color: var(--text-muted); }
.admin-nav a.active, .admin-nav a:hover { color: var(--text); }

.sync-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sync-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.sync-card.sync-error { border-color: rgba(239, 68, 68, 0.5); }
.sync-card.sync-running { border-color: rgba(59, 130, 246, 0.5); }
.sync-title { font-weight: 600; margin-bottom: 6px; }
.sync-message { margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.interval-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); }
.interval-form input[type="number"] { width: 70px; padding: 3px 6px; }
.interval-form label { display: flex; align-items: center; gap: 4px; }
.interval-form input[type="checkbox"] { width: auto; }

/* Rule tree */
.rule-tree { max-height: 520px; overflow-y: auto; font-size: 0.92rem; }
.tree-node { border-bottom: 1px solid var(--line); }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; flex-wrap: wrap; }
.tree-toggle { cursor: pointer; width: 20px; flex: 0 0 auto; color: var(--text-muted); user-select: none; text-align: center; }
.tree-name { flex: 1 1 auto; min-width: 120px; }
.tree-children { margin-left: 20px; display: none; }
.tree-children.open { display: block; }
.rule-state { font-size: 0.78rem; }
.tree-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tree-actions input.pct-input { width: 64px; padding: 2px 6px; font-size: 0.85rem; }
.tree-actions button { padding: 2px 8px; font-size: 0.8rem; }

/* Sortable tables */
.sortable-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th.sortable:hover { color: var(--text); }
.sortable-table th.sortable::after { content: "\2195"; margin-left: 4px; color: var(--text-muted); font-size: 0.8em; opacity: 0.5; }
.sortable-table th.sort-asc::after { content: "\2191"; opacity: 1; color: var(--accent); }
.sortable-table th.sort-desc::after { content: "\2193"; opacity: 1; color: var(--accent); }

/* Row selection + bulk action bar */
.col-check { width: 1.6em; text-align: center; }
.col-check input[type="checkbox"], .row-select { width: auto; margin: 0; cursor: pointer; }
.bulk-action-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; margin-top: 12px; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}
.bulk-action-bar #bulk-count { color: var(--text-muted); font-size: 0.9rem; }

/* Mobile */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .payout-box { text-align: left; }
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td, .responsive-table tfoot { display: block; width: 100%; }
  .responsive-table tr { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 6px 10px; background: var(--bg-raised); }
  .responsive-table td { border: none; padding: 3px 0; display: flex; justify-content: space-between; gap: 10px; text-align: right; }
  .responsive-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 0.8rem; text-align: left; }
  .responsive-table td[data-label=""]::before { content: none; }
  .responsive-table td.num { text-align: right; }
  .form-actions button, .form-actions .button { width: 100%; }
  .copy-row { flex-direction: column; gap: 10px; }
  /* .item-cell's own flex/gap would otherwise fight the label-left/
     value-right row pattern above (same specificity, more specific
     selector wins) - fall back to a simple label-above-content block. */
  .responsive-table td.item-cell { display: block; text-align: left; }
  .responsive-table td.item-cell::before { display: block; margin-bottom: 3px; }
  .responsive-table td.item-cell .item-icon { vertical-align: middle; margin-right: 6px; }
}