/* VoxelPrints layout. Components come from theme.css (Lemonade theme). */

/* Chart series and the delivered badge. Dark and gray share the dark steps. */
:root, :root[data-theme="dark"], :root[data-theme="gray"] {
  --series-1: #3987e5;   /* money in */
  --series-2: #d95926;   /* profit */
}
:root[data-theme="light"],
:root:has([data-theme-select] option[value="light"]:checked) {
  --series-1: #2a78d6;
  --series-2: #eb6834;
}

[hidden] { display: none !important; }
html, body { height: 100%; }
.shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.shell > main { flex: 1; min-height: 0; overflow: auto; }
.page { padding-block: 1.5rem 4rem; }

a { color: inherit; }
p { margin: 0; }

.header-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { .header-end { margin-left: auto; } }
.header-end .select { width: 7.5rem; }
.app-header-inner .app-nav-mobile .select { width: 100%; }

.live-state { display: inline-flex; align-items: center; gap: 0.375rem; }
.live-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--muted-foreground); }
.live-state[data-live="on"] .live-dot { background: var(--success); }

/* Lock screens */
.lock { max-width: 26rem; padding-block: 3rem; }
.lock .brand { margin-bottom: 1.5rem; }
.lock .field-row .input { max-width: none; flex: 1; min-width: 0; }

/* Sections */
.section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.section-title { margin: 0; font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.split { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }

/* Tables */
.table {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--card);
  border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 0.875rem;
}
.table th, .table td { padding: 0.625rem 0.75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: 0; }
.table th { font-weight: 500; color: var(--muted-foreground); background: var(--muted); white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions .btn + .btn { margin-left: 0.375rem; }
.table tfoot td { background: var(--muted); font-weight: 600; }
.table-scroll { position: relative; overflow-x: auto; }
.table-empty { padding: 1rem 0.75rem; color: var(--muted-foreground); font-size: 0.875rem; }
.nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
.table td.wrap-anywhere { min-width: 9rem; }
.cell-sub { display: block; color: var(--muted-foreground); font-size: 0.8125rem; margin-top: 0.125rem; overflow-wrap: anywhere; }
.text-positive { color: var(--success-text); }
.text-negative { color: var(--destructive-text); }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
@media (max-width: 767px) { .hide-sm { display: none; } }

.badge-success {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--success-text);
}

:root[data-theme="light"] .badge-sky { color: var(--info); }

/* Forms */
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.form-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.textarea { height: auto; min-height: 4.5rem; padding-block: 0.5rem; resize: vertical; }
.checkbox { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.checkbox input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.readout { display: flex; align-items: center; height: var(--control-default); font-variant-numeric: tabular-nums; }
.show-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.qty-select { width: 5rem; }
@media (max-width: 767px) {
  .section-head .show-row { width: 100%; }
  .show-row .select-compact { flex: 1; min-width: 0; }
}

/* Chart */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: 15rem; overflow: visible; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .zero-line { stroke: var(--input-strong); stroke-width: 1; }
.chart .axis-label { fill: var(--muted-foreground); font-size: 11px; font-family: var(--font-sans); }
.chart .bar-in { fill: var(--series-1); }
.chart .bar-profit { fill: var(--series-2); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover, .chart .hit:focus-visible { fill: color-mix(in srgb, var(--foreground) 6%, transparent); outline: none; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend-swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; }
.legend-swatch.in { background: var(--series-1); }
.legend-swatch.profit { background: var(--series-2); }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 10rem;
  padding: 0.5rem 0.625rem; display: grid; gap: 0.125rem;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  box-shadow: var(--shadow-overlay); font-size: 0.8125rem;
}
.chart-tip[hidden] { display: none; }
.chart-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.chart-tip-row span:first-child { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); }

details.more > summary { cursor: pointer; font-size: 0.875rem; color: var(--muted-foreground); width: max-content; border-radius: 0.25rem; }
details.more > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
details.more[open] > summary { margin-bottom: 0.75rem; }

/* Store page request totals */
.request-total { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.875rem; }
.request-total strong { font-variant-numeric: tabular-nums; }