/* ── Layout ─────────────────────────────────────────────────────────────── */ body { background-color: #0d1117; color: #e6edf3; min-height: 100vh; } .wrapper { min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .sidebar { width: 220px; min-height: 100vh; background-color: #161b22; border-right: 1px solid #30363d; flex-shrink: 0; } .sidebar-brand { color: #e6edf3; } .sidebar-brand:hover { color: #58a6ff; } .sidebar .nav-link { font-size: 0.9rem; padding: 0.45rem 0.75rem; border-radius: 6px; transition: background-color 0.15s, color 0.15s; } .sidebar .nav-link:hover:not(.active) { background-color: #21262d; color: #e6edf3 !important; } .sidebar .nav-link.active { background-color: #1f6feb; color: #fff !important; } /* ── Top bar ─────────────────────────────────────────────────────────────── */ .topbar { background-color: #161b22; min-height: 52px; } /* ── Main content ────────────────────────────────────────────────────────── */ .main-content { background-color: #0d1117; /* No overflow scroll container here: the page scrolls on , so sticky table headers anchor to the viewport. (An overflow ancestor would break them.) */ /* Flex items default to min-width: auto, which refuses to shrink below their content's intrinsic width — a wide table would push the whole page wide and scroll the body horizontally, so an inner .table-responsive never scrolls (breaking frozen columns). min-width: 0 lets it shrink and the table scroll within .table-responsive instead. */ min-width: 0; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background-color: #161b22; border: 1px solid #30363d; border-radius: 8px; } .card-header { background-color: #1c2128; border-bottom: 1px solid #30363d; padding: 0.875rem 1.25rem; } .card-footer { padding: 0.875rem 1.25rem; } .automation-card { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; cursor: default; } .automation-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); border-color: #58a6ff; } .automation-card.health-ok { border-left: 3px solid #22c55e; } .automation-card.health-warn { border-left: 3px solid #f59e0b; } .automation-card.health-error { border-left: 3px solid #ef4444; background-color: rgba(239, 68, 68, 0.04); } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table-dark { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255, 255, 255, 0.04); } .table-header th { background-color: #1c2128; color: #8b949e; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem 1rem; border-bottom: 1px solid #30363d; } .table td { padding: 0.75rem 1rem; border-bottom: 1px solid #21262d; vertical-align: middle; } /* ── Sticky table headers ────────────────────────────────────────────────── */ /* Freeze the column headers so they stay visible while scrolling long tables. Sticking the whole keeps multi-row headers (e.g. inventory) together. */ thead.table-header { position: sticky; top: 0; z-index: 3; } thead.table-header th { /* preserve the divider if the collapsed bottom border drops while stuck */ box-shadow: inset 0 -1px 0 #30363d; } /* A table inside a horizontal-scroll wrapper must make that wrapper the vertical scroll context too, otherwise the sticky header has nothing to stick within. */ .table-responsive { max-height: calc(100vh - 230px); } /* Lots: freeze the first three columns (SKU / Title / ASIN) during horizontal scroll. JS sets each frozen cell's `left` offset from the real column widths; these rules give them an opaque background and the correct stacking order. */ /* position: sticky on table CELLS only works with border-collapse: separate (Bootstrap defaults tables to collapse, which silently breaks cell sticky — the sticky section still works, but individual td/th do not). */ #lotsTable { border-collapse: separate; border-spacing: 0; } #lotsTable td.freeze-col, #lotsTable th.freeze-col { position: sticky; /* left offset is set inline by the JS */ background-color: #161b22; z-index: 2; } #lotsTable thead th.freeze-col { background-color: #1c2128; z-index: 4; /* corner cells: above the sticky header row and the frozen body */ } #lotsTable tr.stuck-row > td.freeze-col { background-color: #25231a; /* opaque match for the amber stuck-row tint */ } #lotsTable .freeze-col-last { border-right: 1px solid #30363d; /* divider from the scrolling columns */ } /* ── Forms ───────────────────────────────────────────────────────────────── */ .form-control-dark, .form-select-dark { background-color: #0d1117; border: 1px solid #30363d; color: #e6edf3; border-radius: 6px; } .form-control-dark:focus, .form-select-dark:focus { background-color: #0d1117; border-color: #58a6ff; color: #e6edf3; box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.25); } .form-control-dark::placeholder { color: #484f58; } .form-check-input { background-color: #21262d; border-color: #30363d; } .form-check-input:checked { background-color: #1f6feb; border-color: #1f6feb; } /* ── Status badges ───────────────────────────────────────────────────────── */ .status-badge { font-size: 0.75rem; font-weight: 500; padding: 0.3em 0.6em; border-radius: 4px; } /* ── Nav tabs ────────────────────────────────────────────────────────────── */ .nav-tabs { border-bottom: 1px solid #30363d; } .nav-tabs .nav-link { color: #8b949e; border: none; border-bottom: 2px solid transparent; background: none; padding: 0.5rem 1rem; transition: color 0.15s; } .nav-tabs .nav-link:hover { color: #e6edf3; border-bottom-color: #58a6ff; } .nav-tabs .nav-link.active { color: #58a6ff; border-bottom-color: #58a6ff; background: none; } /* ── Tag editor ──────────────────────────────────────────────────────────── */ .tag { font-size: 0.85rem; padding: 0.35em 0.6em; } .tag-remove-btn { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0 0 2px; opacity: 0.65; } .tag-remove-btn:hover { opacity: 1; } /* ── Show/hide secret button ─────────────────────────────────────────────── */ .show-secret-btn { font-size: 0.8rem; text-decoration: none !important; } .show-secret-btn:hover { color: #e6edf3 !important; } /* ── Value preview (mask password-like fields) ───────────────────────────── */ .value-preview { font-family: monospace; color: #8b949e; font-size: 0.85rem; } /* ── Config var row ──────────────────────────────────────────────────────── */ .config-var-row { padding: 0.25rem 0; } /* ── Misc ────────────────────────────────────────────────────────────────── */ code { background-color: #1c2128; padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.85em; }