/* ═══════════════════════════════════════════════════ INTEGRA — Dual theme (dark default / light opt-in) Fonts: DM Sans (UI) · DM Mono (code/numbers) Accent: #c8ff00 (lime) ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0d0d0d; --surface: #131313; --surface-2: #1a1a1a; --surface-3: #212121; --border: #272727; --border-2: #333; --text: #d6d6d6; --text-dim: #6a6a6a; --text-muted: #3a3a3a; --accent: #c8ff00; --accent-hover: #d8ff30; --accent-dim: #7a9900; --accent-bg: #171f00; --accent-ring: rgba(200, 255, 0, 0.12); --accent-text: #c8ff00; /* accent used as text colour */ --accent-border: rgba(200, 255, 0, 0.18); --error: #ff5252; --error-bg: #1c0a0a; --error-border: rgba(255, 82, 82, 0.25); --num-pos: #5ecf8a; --num-neg: #f06565; --num-zero: #404040; --bg-cell-alert: rgba(200, 40, 40, 0.18); --bg-cell-ok: rgba(40, 160, 70, 0.15); --radius: 6px; --radius-lg: 10px; --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; } /* ═══════════════════════════════════════════════════ LIGHT THEME — applied via data-theme="light" on ═══════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f2f2f2; --surface: #ffffff; --surface-2: #ebebeb; --surface-3: #e2e2e2; --border: #dcdcdc; --border-2: #cccccc; --text: #1a1a1a; --text-dim: #5a5a5a; --text-muted: #c0c0c0; --accent: #c8ff00; --accent-hover: #d4ff30; --accent-dim: #6a8800; --accent-bg: rgba(160, 210, 0, 0.10); --accent-ring: rgba(100, 140, 0, 0.16); --accent-text: #4d6b00; /* dark olive — readable on light bg */ --accent-border: rgba(80, 110, 0, 0.28); --error: #c0392b; --error-bg: #fff5f5; --error-border: rgba(192, 57, 43, 0.2); --num-pos: #1a7a3a; --num-neg: #c0392b; --num-zero: #aaaaaa; --bg-cell-alert: rgba(192, 57, 43, 0.11); --bg-cell-ok: rgba(26, 122, 58, 0.09); } html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } [v-cloak] { display: none; } /* ── App shell ── */ #app { display: flex; flex-direction: column; } /* ═══════════════════════════════════════════════════ TOPBAR ═══════════════════════════════════════════════════ */ .topbar { position: sticky; top: 0; z-index: 100; height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; } .topbar-inner { display: flex; align-items: center; gap: 10px; flex: 1; } .topbar-btn { background: transparent; border: 1px solid var(--border-2); color: var(--text-dim); border-radius: var(--radius); padding: 5px 11px; font-size: 14px; font-family: var(--font-mono); line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; flex-shrink: 0; white-space: nowrap; } .topbar-btn:last-child { margin-left: auto; } .topbar-btn + .topbar-btn { margin-left: 6px; } .topbar-btn:hover:not(:disabled) { border-color: var(--accent-text); color: var(--text); background: var(--surface-2); } .topbar-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* ── View toggle (DIBA / COST) ── */ .view-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .view-toggle-btn { background: transparent; border: none; color: var(--text-dim); padding: 5px 13px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; transition: background 0.12s, color 0.12s; line-height: 1; } .view-toggle-btn:not(:last-child) { border-right: 1px solid var(--border-2); } .view-toggle-btn:hover:not(.is-active) { background: var(--surface-3); color: var(--text); } .view-toggle-btn.is-active { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-border); } .topbar-logo { background: var(--accent); color: #0d0d0d; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; padding: 3px 6px; border-radius: 4px; line-height: 1.4; } .topbar-title { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--text); } /* ═══════════════════════════════════════════════════ ERROR BAR ═══════════════════════════════════════════════════ */ .error-bar { background: var(--error-bg); border-bottom: 1px solid var(--error-border); padding: 9px 24px; display: flex; align-items: center; gap: 10px; } .error-icon { color: var(--error); font-size: 14px; flex-shrink: 0; } .error-text { flex: 1; color: var(--error); font-family: var(--font-mono); font-size: 12px; } .error-close { background: transparent; border: 1px solid var(--error-border); color: var(--error); border-radius: var(--radius); padding: 2px 8px; font-size: 12px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s, background 0.15s; flex-shrink: 0; } .error-close:hover { opacity: 1; background: rgba(255, 82, 82, 0.08); } /* ═══════════════════════════════════════════════════ CONTROLS BAR ═══════════════════════════════════════════════════ */ .controls-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .controls-group { display: flex; align-items: center; gap: 10px; } .controls-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); flex-shrink: 0; } .controls-select { appearance: none; background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpolyline points='1,1 6,6 11,1' fill='none' stroke='%236a6a6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--border-2); color: var(--text); border-radius: var(--radius); padding: 7px 32px 7px 12px; font-family: var(--font-mono); font-size: 13px; min-width: 220px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .controls-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .controls-select:disabled { opacity: 0.45; cursor: not-allowed; } /* ── Add button ── */ .btn-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #0d0d0d; border: none; border-radius: var(--radius); padding: 7px 18px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; min-width: 110px; transition: background 0.15s, box-shadow 0.15s, opacity 0.15s; white-space: nowrap; } .btn-add:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 0 14px rgba(200, 255, 0, 0.28); } .btn-add:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .btn-add--muted { background: var(--surface-3); color: var(--text-dim); } .btn-add--muted:hover:not(:disabled) { background: var(--surface-3); box-shadow: none; } .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: #0d0d0d; border-radius: 50%; animation: spin 0.65s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Qty input in controls bar */ .qty-input { width: 72px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--radius); padding: 7px 8px; font-family: var(--font-mono); font-size: 13px; text-align: right; appearance: textfield; transition: border-color 0.15s, box-shadow 0.15s; } .qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { appearance: none; } .qty-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .controls-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } /* Schede inline in controls-bar (COST view) */ .schede-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; } .scheda-tag--compact { cursor: default; padding: 3px 6px 3px 6px; gap: 5px; } .scheda-tag--compact:hover { border-color: var(--border-2); } /* ═══════════════════════════════════════════════════ SECTIONS ═══════════════════════════════════════════════════ */ .section { padding: 18px 24px; border-bottom: 1px solid var(--border); } .section--fill { display: flex; flex-direction: column; border-bottom: none; position: sticky; top: 52px; height: calc(100vh - 52px); overflow: hidden; background: var(--bg); z-index: 1; } .section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); } .section-count { background: var(--surface-3); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .empty-hint { color: var(--text-muted); font-size: 13px; font-style: italic; } /* ═══════════════════════════════════════════════════ SCHEDE TAGS (drag & drop chips) ═══════════════════════════════════════════════════ */ .schede-list { display: flex; flex-wrap: wrap; gap: 8px; } .scheda-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 5px 8px 5px 7px; cursor: grab; user-select: none; transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, opacity 0.12s; } .scheda-tag:active { cursor: grabbing; } .scheda-tag:hover { border-color: var(--accent-dim); } .scheda-tag.is-drag-over { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(200, 255, 0, 0.1); } .scheda-tag.is-dragging { opacity: 0.35; } .drag-handle { color: var(--text-muted); font-size: 15px; line-height: 1; cursor: grab; } .scheda-code { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.02em; } /* Editable qty inside each scheda tag */ .scheda-qty { width: 54px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 2px 5px; font-family: var(--font-mono); font-size: 11px; text-align: right; appearance: textfield; transition: border-color 0.12s, color 0.12s; } .scheda-qty::-webkit-inner-spin-button, .scheda-qty::-webkit-outer-spin-button { appearance: none; } .scheda-qty:focus { outline: none; border-color: var(--accent); color: var(--text); } .scheda-remove { background: transparent; border: none; color: var(--text-muted); font-size: 11px; line-height: 1; padding: 2px 3px; border-radius: 3px; cursor: pointer; transition: color 0.12s, background 0.12s; flex-shrink: 0; } .scheda-remove:hover { color: var(--error); background: rgba(255, 82, 82, 0.1); } /* ═══════════════════════════════════════════════════ COMPONENTS TABLE ═══════════════════════════════════════════════════ */ .table-wrap { flex: 1; min-height: 0; overflow-x: auto; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .table-wrap::-webkit-scrollbar { width: 6px; height: 6px; } .table-wrap::-webkit-scrollbar-track { background: transparent; } .table-wrap::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; } .comp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 1180px; } /* Sticky: va su singole th perché position:sticky su thead non funziona ovunque */ .comp-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); /* deve coprire le righe che scorrono sotto */ } /* Le th di prima riga con rowspan="2" restano a top:0 */ /* Le th della seconda riga (sub-header) scendono sotto la prima */ /* Altezza fissa prima riga = 36px (padding 9+9 + font ~18px) */ .comp-table thead tr:first-child { height: 36px; } .comp-table thead tr:nth-child(2) th { top: 36px; } .comp-table thead tr:nth-child(2) { height: 32px; } .comp-table th { background: var(--surface-2); color: var(--text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; padding: 9px 12px; text-align: left; border-top: 1px solid var(--border-2); border-right: 1px solid var(--border-2); border-bottom: 2px solid var(--border-2); white-space: nowrap; } .comp-table th:first-child { border-left: 1px solid var(--border-2); } /* Seconda riga header: bordo superiore tolto (già coperto dalla prima) */ .comp-table thead tr:nth-child(2) th { border-top: none; } .comp-table th.col-num { text-align: right; } /* ── Conditional row-level cell backgrounds ── */ .cell-bg-alert { background-color: var(--bg-cell-alert) !important; } .cell-bg-ok { background-color: var(--bg-cell-ok) !important; } /* NECESSARI — derived column */ .col-necessari { background: var(--accent-bg) !important; color: var(--accent) !important; border-left: 1px solid rgba(200, 255, 0, 0.15); } .cell-necessari { background: var(--accent-bg); border-left: 1px solid rgba(200, 255, 0, 0.08); } /* Grouped header: "Prima Consegna" spanning two sub-columns */ .col-group { text-align: center; background: var(--surface-3); color: var(--accent-text); border-bottom: 1px solid var(--accent-border); border-left: 1px solid var(--accent-border); border-right: 1px solid var(--accent-border); letter-spacing: 0.12em; } /* Sub-header row cells under Prima Consegna */ .col-sub { background: var(--surface-3); border-top: none; border-left: 1px solid var(--accent-border); border-right: 1px solid var(--accent-border); } /* Column widths */ .col-padre { min-width: 120px; width: 140px; } .col-code { min-width: 90px; width: 110px; } .col-desc { min-width: 180px; } .col-date { min-width: 90px; width: 100px; } .col-num { min-width: 72px; width: 80px; } /* Body rows */ .comp-table tbody tr { transition: background 0.08s; } .comp-table tbody tr:hover td { background: var(--surface-2); } .comp-table td { padding: 7px 12px; vertical-align: middle; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } .comp-table td:first-child { border-left: 1px solid var(--border); } /* Ultima riga: bordo inferiore più marcato */ .comp-table tbody tr:last-child td { border-bottom: 1px solid var(--border-2); } /* Cell variants */ .cell-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; } .cell-dim { color: var(--text-muted); } .cell-text { color: var(--text); min-width: 180px; } .cell-date { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; } .cell-num { font-family: var(--font-mono); font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Number colours */ .num-pos { color: var(--num-pos); } .num-neg { color: var(--num-neg); } .num-zero { color: var(--num-zero); } /* ── Padre badges ── */ .padri-cell { display: flex; flex-wrap: wrap; gap: 4px; } .padre-badge { display: inline-flex; align-items: center; background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent-border); border-radius: 4px; padding: 2px 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; } /* ═══════════════════════════════════════════════════ SCHEDA TAG — STATUS VARIANTS ═══════════════════════════════════════════════════ */ /* Status dot inside each tag */ .scheda-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transition: background 0.3s; } .scheda-dot.loading { background: var(--text-muted); } .scheda-dot.ready { background: var(--accent); box-shadow: 0 0 5px rgba(200,255,0,0.4); } .scheda-dot.error { background: var(--error); } /* Tag border + text colour per status */ .scheda-tag.st-loading { border-color: var(--border); animation: tag-pulse 1.4s ease-in-out infinite; } .scheda-tag.st-loading .scheda-code { color: var(--text-dim); } .scheda-tag.st-ready { border-color: var(--border-2); } .scheda-tag.st-ready .scheda-code { color: var(--accent-text); } .scheda-tag.st-error { border-color: rgba(255, 82, 82, 0.4); } .scheda-tag.st-error .scheda-code { color: var(--error); } @keyframes tag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ═══════════════════════════════════════════════════ COMBOBOX ═══════════════════════════════════════════════════ */ .combobox { position: relative; min-width: 220px; } .combobox-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--radius); padding: 7px 12px; font-family: var(--font-mono); font-size: 13px; transition: border-color 0.15s, box-shadow 0.15s, border-radius 0.1s; } .combobox-input::placeholder { color: var(--text-muted); } .combobox-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .combobox-input:disabled { opacity: 0.45; cursor: not-allowed; } /* When open: square bottom corners to connect with dropdown */ .combobox.is-open .combobox-input { border-color: var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0 0 3px var(--accent-ring); } .combobox-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-2); border: 1px solid var(--accent); border-top: none; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); max-height: 260px; overflow-y: auto; z-index: 300; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .combobox-dropdown::-webkit-scrollbar { width: 4px; } .combobox-dropdown::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; } .combobox-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.08s, color 0.08s; } .combobox-item:last-child { border-bottom: none; } .combobox-item:hover { background: var(--surface-3); color: var(--text); } .combobox-item.is-selected { color: var(--accent-text); background: var(--accent-bg); } .combobox-item.is-active { color: var(--text-muted); } .combobox-check { color: var(--accent-dim); font-size: 11px; flex-shrink: 0; } .combobox-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); font-style: italic; } /* Highlighted match fragment inside dropdown items */ .hl { background: transparent; color: var(--accent-text); font-weight: 500; } /* ═══════════════════════════════════════════════════ SORTABLE COLUMN HEADERS ═══════════════════════════════════════════════════ */ .col-sortable { cursor: pointer; user-select: none; transition: color 0.12s, background 0.12s; } .col-sortable:hover { color: var(--text); background: var(--surface-3); } .col-sortable.is-sorted { color: var(--accent-text); background: var(--accent-bg); } .sort-icon { margin-left: 4px; font-size: 10px; opacity: 0.6; } .col-sortable.is-sorted .sort-icon { opacity: 1; color: var(--accent-text); } /* ═══════════════════════════════════════════════════ PREVENTIVO BUILDER ═══════════════════════════════════════════════════ */ .prev-builder-section { border-bottom: 1px solid var(--border); padding: 14px 24px; } .prev-builder { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .prev-field { display: flex; flex-direction: column; gap: 5px; } .prev-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); } .prev-input { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--radius); padding: 7px 10px; font-family: var(--font-mono); font-size: 13px; transition: border-color 0.15s, box-shadow 0.15s; } .prev-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .prev-input--num { width: 80px; text-align: right; appearance: textfield; } .prev-input--num::-webkit-inner-spin-button, .prev-input--num::-webkit-outer-spin-button { appearance: none; } .prev-pct-wrap { display: flex; align-items: center; gap: 5px; } .prev-pct-sign { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); } /* Riferimento toggle */ .prev-rif-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; } .prev-rif-btn { background: transparent; border: none; padding: 7px 13px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text-dim); transition: background 0.12s, color 0.12s; } .prev-rif-btn:not(:last-child) { border-right: 1px solid var(--border-2); } .prev-rif-btn:hover:not(.is-active-ultimo):not(.is-active-medio) { background: var(--surface-3); color: var(--text); } /* Costo Ultimo → arancio/ambra */ .prev-rif-btn.is-active-ultimo { background: rgba(220, 130, 30, 0.14); color: #e09040; } /* Costo Medio → azzurro */ .prev-rif-btn.is-active-medio { background: rgba(50, 140, 220, 0.14); color: #5aabee; } .prev-add-btn { align-self: flex-end; } /* ═══════════════════════════════════════════════════ PREVENTIVO COLUMNS ═══════════════════════════════════════════════════ */ /* Intestazione gruppo preventivo */ .col-prev-group { position: relative; } .col-prev-ultimo { background: #2a1a06 !important; color: #e09040 !important; border-color: #5a3010 !important; } .col-prev-medio { background: #061428 !important; color: #5aabee !important; border-color: #103060 !important; } .col-prev-sub.col-prev-ultimo { background: #221506 !important; color: #c07030 !important; border-color: #4a2808 !important; } .col-prev-sub.col-prev-medio { background: #050f1e !important; color: #3d90d0 !important; border-color: #0c2448 !important; } /* X per rimuovere il preventivo */ .prev-remove-btn { background: transparent; border: none; color: inherit; opacity: 0.45; font-size: 10px; cursor: pointer; padding: 0 0 0 6px; line-height: 1; vertical-align: middle; transition: opacity 0.12s; } .prev-remove-btn:hover { opacity: 1; } /* Ricarico input in cella */ .ricarico-cell { display: flex; align-items: center; justify-content: flex-end; gap: 3px; } .ricarico-input { width: 56px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text); border-radius: 3px; padding: 2px 5px; font-family: var(--font-mono); font-size: 11px; text-align: right; appearance: textfield; transition: border-color 0.12s; } .ricarico-input::-webkit-inner-spin-button, .ricarico-input::-webkit-outer-spin-button { appearance: none; } .ricarico-input:focus { outline: none; border-color: var(--accent); } .ricarico-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; } /* Celle prezzo preventivo */ .cell-prev-ultimo { background: rgba(220, 130, 30, 0.05); border-left: 1px solid rgba(220, 130, 30, 0.10); } .cell-prev-medio { background: rgba(50, 140, 220, 0.05); border-left: 1px solid rgba(50, 140, 220, 0.10); } .cell-totals-val.cell-prev-ultimo { background: rgba(220, 130, 30, 0.14) !important; color: #e09040 !important; border-left: 1px solid rgba(220, 130, 30, 0.25) !important; } .cell-totals-val.cell-prev-medio { background: rgba(50, 140, 220, 0.14) !important; color: #5aabee !important; border-left: 1px solid rgba(50, 140, 220, 0.25) !important; } /* ═══════════════════════════════════════════════════ COST VIEW — cell and totals row ═══════════════════════════════════════════════════ */ .cell-cost { font-variant-numeric: tabular-nums; } /* Costo ultimo columns — ambra, solo valori non-zero */ .cell-costoultimo.num-pos, .cell-costoultimo.num-neg { color: #e09040; } .cell-totals-val.cell-costoultimo { background: rgba(220, 130, 30, 0.14) !important; color: #e09040 !important; border-left: 1px solid rgba(220, 130, 30, 0.25) !important; } /* Costo medio columns — azzurro, solo valori non-zero */ .cell-costomedio.num-pos, .cell-costomedio.num-neg { color: #5aabee; } .cell-totals-val.cell-costomedio { background: rgba(50, 140, 220, 0.14) !important; color: #5aabee !important; border-left: 1px solid rgba(50, 140, 220, 0.25) !important; } .cost-totals tr { border-top: 2px solid var(--border-2); background: var(--surface-2); } .cell-totals-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); padding: 9px 12px; } .cell-totals-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-text); background: var(--accent-bg); border-left: 1px solid var(--accent-border); padding: 9px 12px; }