lean101/data-entry-app
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.21 - Mix calculator composer restyle

Browse Source 
Mirror the throughput composer's green design language on the mix calculator
inputs: brand-tinted composer surface with a calculator-icon header, green
48px fields, Mix Name disabled until a client is chosen, a darker readable
on-brand hint, and optional notes via the "+ Add a note" reveal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
admin
2026-06-14 09:26:07 +12:00
co-authored by Claude Opus 4.8
parent b1c0d3f3da
commit 8b81f804f7
3 changed files with 306 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "hunter-app", "name": "hunter-app",
"version": "0.1.20", "version": "0.1.21",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
frontend/src/lib/components/mix-calculator/MixCalculatorEditor.svelte
+249 -100
View File
@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { Calculator, Info, TriangleAlert, X } from 'lucide-svelte';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { featureFlags } from '$lib/features'; import { featureFlags } from '$lib/features';
import { formatNumber } from '$lib/format'; import { formatNumber } from '$lib/format';
@@ -51,6 +52,9 @@
let batchSizeKg = $state(initialBatchSizeValue()); let batchSizeKg = $state(initialBatchSizeValue());
let preparedByName = $state(initialPreparedByNameValue()); let preparedByName = $state(initialPreparedByNameValue());
let notes = $state(initialNotesValue()); let notes = $state(initialNotesValue());
// Notes are optional and stay hidden behind "+ Add a note" until needed,
// matching the throughput composer. Auto-open when a saved session has one.
let showNote = $state(Boolean(initialSession?.notes));
let preview = $state<MixCalculatorPreview | MixCalculatorSession | null>(initialPreviewValue()); let preview = $state<MixCalculatorPreview | MixCalculatorSession | null>(initialPreviewValue());
let formError = $state(''); let formError = $state('');
let formHint = $state('Select a mix date and prepared by name, then choose a client to unlock mixes.'); let formHint = $state('Select a mix date and prepared by name, then choose a client to unlock mixes.');
@@ -158,6 +162,12 @@
} }
} }
// Collapse the note field again, discarding anything typed.
function dismissNote() {
notes = '';
showNote = false;
}
function clearForm() { function clearForm() {
clientName = ''; clientName = '';
productId = 0; productId = 0;
@@ -165,6 +175,7 @@
batchSizeKg = ''; batchSizeKg = '';
preparedByName = $clientSession?.name ?? ''; preparedByName = $clientSession?.name ?? '';
notes = ''; notes = '';
showNote = false;
preview = null; preview = null;
formError = ''; formError = '';
formHint = 'Select a mix date and prepared by name, then choose a client to unlock mixes.'; formHint = 'Select a mix date and prepared by name, then choose a client to unlock mixes.';
@@ -287,11 +298,11 @@
{/if} {/if}
<section class="editor-grid"> <section class="editor-grid">
<article class="form-card"> <article class="composer">
<div class="section-header"> <div class="composer-head">
<div> <div class="composer-title">
<h3>Session Inputs</h3> <span class="composer-icon"><Calculator size={18} strokeWidth={2.2} /></span>
<p>Batch size drives the scale factor. Total bags are derived from the selected mix unit size.</p> <h2>Mix calculator</h2>
</div> </div>
{#if selectedProduct} {#if selectedProduct}
<div class="product-pill"> <div class="product-pill">
@@ -301,12 +312,13 @@
{/if} {/if}
</div> </div>
<div class="composer-body">
{#if formError} {#if formError}
<p class="message error">{formError}</p> <p class="message error"><TriangleAlert size={16} strokeWidth={2.2} /> <span>{formError}</span></p>
{/if} {/if}
{#if !formError && formHint} {#if !formError && formHint}
<p class="message hint">{formHint}</p> <p class="message hint"><Info size={16} strokeWidth={2.2} /> <span>{formHint}</span></p>
{/if} {/if}
<div class="field-grid"> <div class="field-grid">
@@ -350,11 +362,27 @@
<span>Batch size (kg)</span> <span>Batch size (kg)</span>
<input bind:value={batchSizeKg} disabled={!canEdit} inputmode="decimal" min="0" placeholder="Batch size" type="number" /> <input bind:value={batchSizeKg} disabled={!canEdit} inputmode="decimal" min="0" placeholder="Batch size" type="number" />
</label> </label>
</div>
<label class="full-width"> <div class="note-area">
<span>Notes</span> {#if showNote}
<textarea bind:value={notes} disabled={!canEdit} placeholder="Optional production notes or shift context" rows="4"></textarea> <div class="note-field">
</label> <textarea
class="note-input"
bind:value={notes}
disabled={!canEdit}
placeholder="Note (optional) — production notes or shift context"
rows="3"
></textarea>
{#if canEdit}
<button type="button" class="note-dismiss" title="Remove note" aria-label="Remove note" onclick={dismissNote}>
<X size={16} strokeWidth={2.4} />
</button>
{/if}
</div>
{:else if canEdit}
<button type="button" class="link-button" onclick={() => (showNote = true)}>+ Add a note</button>
{/if}
</div> </div>
{#if canEdit && selectedProduct} {#if canEdit && selectedProduct}
@@ -371,12 +399,13 @@
<span>{previewLoading ? 'Calculating...' : 'Calculate mix'}</span> <span>{previewLoading ? 'Calculating...' : 'Calculate mix'}</span>
</button> </button>
<button class="danger-button" disabled={previewLoading} type="button" onclick={clearForm}> <button class="secondary-button" disabled={previewLoading} type="button" onclick={clearForm}>
<span class="button-icon" style="--button-icon-url: url('/icons/trash.svg');" aria-hidden="true"></span> <span class="button-icon" style="--button-icon-url: url('/icons/trash.svg');" aria-hidden="true"></span>
<span>Clear</span> <span>Clear</span>
</button> </button>
</div> </div>
{/if} {/if}
</div>
</article> </article>
<MixCalculatorResultsPanel <MixCalculatorResultsPanel
@@ -400,13 +429,12 @@
<style> <style>
h2, h2,
h3,
p { p {
margin: 0; margin: 0;
} }
.eyebrow { .eyebrow {
color: #7d8d84; color: var(--color-text-muted);
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -425,9 +453,8 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.section-header p,
.calculation-note span { .calculation-note span {
color: var(--muted); color: var(--color-text-secondary);
} }
.action-row { .action-row {
@@ -443,21 +470,68 @@
gap: 1rem; gap: 1rem;
} }
.form-card, /* The composer mirrors the throughput "Add a packing run" surface: a quiet
.locked-card { brand-tinted gradient panel that reads as a distinct, on-brand workspace.
border: 1px solid var(--line); Theme tokens keep it correct in dark mode. */
border-radius: 0.8rem; .composer {
background: var(--panel); border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
box-shadow: var(--shadow); border-radius: 0.9rem;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-surface)),
color-mix(in srgb, var(--color-brand) 4%, var(--color-bg-surface))
);
/* Native selects open within the viewport, so the card can stay open for
a clean rounded edge without clipping anything. */
overflow: visible;
} }
.form-card, .composer-head {
.locked-card { display: flex;
padding: 1.2rem; align-items: center;
justify-content: space-between;
gap: 1rem 1.4rem;
flex-wrap: wrap;
padding: 1.3rem 1.45rem 1.05rem;
}
.composer-title {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
/* Brand-tinted badge echoing the throughput overview's section icon. */
.composer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: var(--color-brand-tint);
color: var(--color-brand);
}
.composer-title h2 {
margin: 0;
font-size: clamp(1.25rem, 2vw, 1.7rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--color-text-primary);
}
.composer-body {
padding: 0 1.45rem 1.4rem;
} }
.locked-card { .locked-card {
max-width: 42rem; max-width: 42rem;
padding: 1.2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-panel);
background: var(--color-bg-surface);
} }
.locked-card h2 { .locked-card h2 {
@@ -465,33 +539,28 @@
font-size: clamp(1.7rem, 3vw, 2.1rem); font-size: clamp(1.7rem, 3vw, 2.1rem);
} }
.section-header { /* Quick brand-tinted chip echoing the selected mix's unit, matching the pill
display: flex; language used across the app. */
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.section-header h3 {
font-size: 1.15rem;
font-weight: 700;
}
.product-pill { .product-pill {
display: grid; display: inline-flex;
gap: 0.14rem; align-items: baseline;
padding: 0.72rem 0.82rem; gap: 0.4rem;
border: 1px solid var(--line); padding: 0.4rem 0.78rem;
border-radius: 0.65rem; border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
background: var(--panel-soft); border-radius: 999px;
background: var(--color-brand-tint);
color: var(--color-success-text);
}
.product-pill strong {
font-size: 0.95rem;
} }
.product-pill span { .product-pill span {
color: var(--muted); font-size: 0.76rem;
font-size: 0.78rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
opacity: 0.85;
} }
.field-grid { .field-grid {
@@ -510,67 +579,155 @@
font-weight: 600; font-weight: 600;
} }
.full-width { /* Optional note, revealed by "+ Add a note" — mirrors the throughput composer. */
grid-column: 1 / -1; .note-area {
margin-top: 0.9rem;
} }
input, .link-button {
select, padding: 0.25rem 0;
textarea { background: none;
border: 0;
color: var(--color-brand);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
}
.link-button:hover {
text-decoration: underline;
}
.note-field {
display: flex;
align-items: flex-start;
gap: 0.45rem;
}
.note-input {
flex: 1 1 auto;
min-width: 0;
}
.note-dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
border-radius: 0.8rem;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
cursor: pointer;
transition:
border-color 140ms ease,
color 140ms ease,
background-color 140ms ease;
}
.note-dismiss:hover {
border-color: var(--color-text-muted);
color: var(--color-text-primary);
background: var(--color-bg-app);
}
.note-dismiss:focus-visible {
outline: 3px solid var(--color-brand);
outline-offset: 2px;
}
/* White fields on the green tint, with brand-tinted borders and a 48px touch
target — the same input language as the throughput composer. */
.composer input,
.composer select,
.composer textarea {
width: 100%; width: 100%;
padding: 0.78rem 0.82rem; min-height: 48px;
border: 1px solid var(--line-strong); padding: 0.62rem 0.78rem;
border-radius: 0.6rem; border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
background: var(--color-input-bg); border-radius: 0.8rem;
color: var(--text); font-size: 0.98rem;
background: var(--color-bg-surface);
color: var(--color-text-primary);
transition: transition:
border-color 160ms ease, border-color 160ms ease,
box-shadow 160ms ease; box-shadow 160ms ease;
} }
input::placeholder, .composer input::placeholder,
textarea::placeholder { .composer textarea::placeholder {
color: var(--color-text-muted); color: var(--color-text-muted);
opacity: 1; opacity: 1;
} }
input:focus-visible, .composer input:focus-visible,
select:focus-visible, .composer select:focus-visible,
textarea:focus-visible { .composer textarea:focus-visible {
outline: none; outline: 3px solid var(--color-brand);
outline-offset: 1px;
border-color: var(--color-brand); border-color: var(--color-brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
} }
textarea { .composer textarea {
min-height: 6.5rem;
resize: vertical; resize: vertical;
} }
/* The Mix Name select stays locked until a client is chosen; make that state
unmistakable rather than looking like an empty, clickable field. */
.composer input:disabled,
.composer select:disabled,
.composer textarea:disabled {
background: color-mix(in srgb, var(--color-bg-app) 70%, var(--color-bg-surface));
border-color: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
}
.calculation-note { .calculation-note {
display: grid; display: grid;
gap: 0.2rem; gap: 0.2rem;
margin-top: 1rem; margin-top: 1rem;
padding: 0.92rem; padding: 0.92rem;
border-radius: 0.65rem; border: 1px solid var(--color-border);
background: var(--panel-soft); border-radius: var(--radius-row);
background: var(--color-bg-app);
} }
.message { .message {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.85rem; margin-bottom: 0.85rem;
padding: 0.75rem 0.85rem; padding: 0.72rem 0.9rem;
border-radius: 0.6rem; border-radius: 0.7rem;
font-size: 0.9rem; font-size: 0.92rem;
font-weight: 500;
}
.message :global(svg) {
flex-shrink: 0;
} }
.message.error { .message.error {
background: #fff1f0; background: color-mix(in srgb, var(--color-error) 12%, var(--color-bg-surface));
color: #b2463f; color: var(--color-error);
border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
} }
/* Readable on-brand hint: a white-ish surface with a green info icon, instead
of low-contrast grey that washed out against the composer's tint. */
.message.hint { .message.hint {
background: var(--panel-soft); background: color-mix(in srgb, var(--color-brand) 16%, var(--color-bg-app));
color: var(--muted); color: var(--color-text-primary);
border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--color-brand) 26%, var(--color-border));
}
.message.hint :global(svg) {
color: var(--color-brand);
} }
.action-row { .action-row {
@@ -578,15 +735,14 @@
} }
.primary-button, .primary-button,
.secondary-button, .secondary-button {
.danger-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.78rem 0.96rem; padding: 0.78rem 0.96rem;
border-radius: 0.6rem; border-radius: var(--radius-control);
border: 1px solid var(--line-strong); border: 1px solid var(--color-border);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: transition:
@@ -597,26 +753,29 @@
.primary-button { .primary-button {
border: none; border: none;
background: var(--color-brand); background: var(--color-brand);
color: #fff; color: var(--color-on-brand);
}
/* Composer buttons take the throughput composer's chunkier 48px shape. */
.composer .action-row .primary-button,
.composer .action-row .secondary-button {
min-height: 48px;
padding: 0.62rem 1.28rem;
border-radius: 0.8rem;
font-weight: 700;
} }
.secondary-button { .secondary-button {
background: #fff; background: var(--color-bg-surface);
color: #304038; color: var(--color-text-primary);
}
.danger-button {
background: #c63d32;
color: #fff;
border-color: #c63d32;
} }
.primary-button:hover:not(:disabled) { .primary-button:hover:not(:disabled) {
background: #126a33; background: var(--color-brand-hover);
} }
.primary-button:active:not(:disabled) { .primary-button:active:not(:disabled) {
background: #0f5a2b; background: var(--color-brand-hover);
} }
.secondary-button:hover:not(:disabled) { .secondary-button:hover:not(:disabled) {
@@ -624,14 +783,8 @@
background: var(--color-bg-app); background: var(--color-bg-app);
} }
.danger-button:hover:not(:disabled) {
background: #b2352b;
border-color: #b2352b;
}
.primary-button:focus-visible, .primary-button:focus-visible,
.secondary-button:focus-visible, .secondary-button:focus-visible {
.danger-button:focus-visible {
outline: 3px solid color-mix(in srgb, var(--color-brand) 45%, transparent); outline: 3px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -658,10 +811,6 @@
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.section-header {
flex-direction: column;
}
.field-grid { .field-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
frontend/src/lib/components/mix-calculator/MixCalculatorResultsPanel.svelte
+56 -68
View File
@@ -49,18 +49,14 @@
</script> </script>
<article class="result-card"> <article class="result-card">
<div class="section-header"> {#if sessionNumber}
<div> <div class="result-toolbar">
<h3>Calculated Output</h3>
<p>{preview ? 'Snapshot of the scaled raw material requirements.' : 'Run the calculation to preview the session output.'}</p>
</div>
{#if sessionNumber}
<div class="session-chip"> <div class="session-chip">
<span>Session</span> <span>Session</span>
<strong>{sessionNumber}</strong> <strong>{sessionNumber}</strong>
</div> </div>
{/if} </div>
</div> {/if}
{#if preview} {#if preview}
<div class="metric-row"> <div class="metric-row">
@@ -186,55 +182,50 @@
</article> </article>
<style> <style>
h3,
p { p {
margin: 0; margin: 0;
} }
.section-header p,
.metric-card p, .metric-card p,
.summary-grid span, .summary-grid span,
.empty-state span { .empty-state span {
color: var(--muted); color: var(--color-text-muted);
} }
.result-card, .result-card,
.metric-card { .metric-card {
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: 0.8rem; background: var(--color-bg-surface);
background: var(--panel);
box-shadow: var(--shadow);
} }
.result-card { .result-card {
padding: 1.2rem; padding: 1.2rem;
border-radius: var(--radius-panel);
} }
.section-header { .metric-card {
border-radius: var(--radius-row);
}
.result-toolbar {
display: flex; display: flex;
align-items: flex-start; justify-content: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.section-header h3 {
font-size: 1.15rem;
font-weight: 700;
}
.session-chip { .session-chip {
display: grid; display: inline-flex;
gap: 0.14rem; align-items: baseline;
padding: 0.72rem 0.82rem; gap: 0.4rem;
border: 1px solid var(--line); padding: 0.4rem 0.78rem;
border-radius: 0.65rem; border: 1px solid var(--color-border);
background: var(--panel-soft); border-radius: 999px;
background: var(--color-bg-app);
} }
.session-chip span { .session-chip span {
color: var(--muted); color: var(--color-text-muted);
font-size: 0.78rem; font-size: 0.76rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -256,7 +247,7 @@
.metric-card span { .metric-card span {
display: block; display: block;
color: var(--muted); color: var(--color-text-muted);
font-size: 0.84rem; font-size: 0.84rem;
} }
@@ -271,9 +262,10 @@
gap: 0.45rem; gap: 0.45rem;
margin-top: 1rem; margin-top: 1rem;
padding: 0.92rem; padding: 0.92rem;
border-radius: 0.65rem; border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
background: #fdf6e9; border-radius: var(--radius-row);
color: #8a5a00; background: var(--color-warning-tint);
color: var(--color-warning-text);
} }
.summary-grid { .summary-grid {
@@ -283,9 +275,9 @@
.summary-grid div { .summary-grid div {
padding: 0.88rem 0.92rem; padding: 0.88rem 0.92rem;
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: 0.65rem; border-radius: var(--radius-row);
background: var(--panel-soft); background: var(--color-bg-app);
} }
.summary-grid span { .summary-grid span {
@@ -318,11 +310,11 @@
td { td {
padding: 0.9rem 0.85rem; padding: 0.9rem 0.85rem;
text-align: left; text-align: left;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
th { th {
color: var(--muted); color: var(--color-text-muted);
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@@ -352,7 +344,7 @@
.sort-head:hover, .sort-head:hover,
.sort-head.active { .sort-head.active {
color: var(--text); color: var(--color-text-primary);
} }
.sort-head.active :global(svg) { .sort-head.active :global(svg) {
@@ -372,8 +364,8 @@
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.78rem 0.96rem; padding: 0.78rem 0.96rem;
border-radius: 0.6rem; border-radius: var(--radius-control);
border: 1px solid var(--line-strong); border: 1px solid var(--color-border);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: transition:
@@ -384,20 +376,20 @@
.primary-button { .primary-button {
border: none; border: none;
background: var(--color-brand); background: var(--color-brand);
color: #fff; color: var(--color-on-brand);
} }
.secondary-button { .secondary-button {
background: #fff; background: var(--color-bg-surface);
color: #304038; color: var(--color-text-primary);
} }
.primary-button:hover:not(:disabled) { .primary-button:hover:not(:disabled) {
background: #126a33; background: var(--color-brand-hover);
} }
.primary-button:active:not(:disabled) { .primary-button:active:not(:disabled) {
background: #0f5a2b; background: var(--color-brand-hover);
} }
.secondary-button:hover:not(:disabled) { .secondary-button:hover:not(:disabled) {
@@ -422,7 +414,7 @@
gap: 0; gap: 0;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--color-border);
} }
.empty-shimmer-metrics { .empty-shimmer-metrics {
@@ -430,8 +422,8 @@
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem; gap: 0.75rem;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
background: var(--panel-soft); background: var(--color-bg-app);
} }
.shimmer-metric { .shimmer-metric {
@@ -439,9 +431,9 @@
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
padding: 0.85rem; padding: 0.85rem;
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: 0.85rem; border-radius: 0.85rem;
background: var(--panel); background: var(--color-bg-surface);
} }
.empty-state-copy { .empty-state-copy {
@@ -451,14 +443,14 @@
gap: 0.5rem; gap: 0.5rem;
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
text-align: center; text-align: center;
background: var(--panel); background: var(--color-bg-surface);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
.empty-state-copy strong { .empty-state-copy strong {
font-size: 0.98rem; font-size: 0.98rem;
font-weight: 700; font-weight: 700;
color: var(--text); color: var(--color-text-primary);
} }
.empty-state-copy span { .empty-state-copy span {
@@ -494,7 +486,7 @@
.empty-shimmer-rows { .empty-shimmer-rows {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--panel-soft); background: var(--color-bg-app);
} }
.shimmer-row { .shimmer-row {
@@ -503,7 +495,7 @@
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
padding: 0.78rem 1rem; padding: 0.78rem 1rem;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
.shimmer-row:last-child { .shimmer-row:last-child {
@@ -516,7 +508,7 @@
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--color-border) 25%, var(--color-border) 25%,
color-mix(in srgb, var(--color-border) 40%, white) 50%, color-mix(in srgb, var(--color-border) 45%, var(--color-bg-surface)) 50%,
var(--color-border) 75% var(--color-border) 75%
); );
background-size: 200% 100%; background-size: 200% 100%;
@@ -539,10 +531,6 @@
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.section-header {
flex-direction: column;
}
.summary-grid { .summary-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -566,14 +554,14 @@
} }
tbody tr { tbody tr {
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: 1rem; border-radius: 1rem;
background: var(--panel-soft); background: var(--color-bg-app);
overflow: hidden; overflow: hidden;
} }
tbody td { tbody td {
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
tbody td:last-child { tbody td:last-child {
@@ -584,7 +572,7 @@
content: attr(data-label); content: attr(data-label);
display: block; display: block;
margin-bottom: 0.24rem; margin-bottom: 0.24rem;
color: var(--muted); color: var(--color-text-muted);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.06em; letter-spacing: 0.06em;