/* * assets/css/modules/dashboard.css — Overview Dashboard redesign v2 * * Follows the app's ONE global theme toggle (#themeToggleBtn, [data-theme] * on — assets/js/app.js) exactly like every other screen. Every * color below is one of the app's own existing tokens (--bg-surface, * --text-primary, --accent, --success, --warning, --danger, --info, * --border-light/medium, --radius-*, --shadow-card, all defined once in * index.php's :root and [data-theme="dark"] blocks) — no dashboard-only * palette, so dark mode "just works" everywhere below. */ #view-dashboard { --dv-radius: var(--radius-lg); --dv-radius-sm: var(--radius-md); --dv-accent-rgb: 124,106,245; } /* ---------- Header ---------- */ .dv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.35rem; } .dv-header-text { min-width: 0; } .dv-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; } .dv-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-light); animation: dv-live-pulse 2s ease-in-out infinite; } @keyframes dv-live-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--success-light); } 50% { box-shadow: 0 0 0 6px transparent; } } .dv-title { margin: 0.3rem 0 0.15rem; font-weight: 800; letter-spacing: -0.03em; font-size: 1.75rem; color: var(--text-primary); } .dv-subtitle { color: var(--text-secondary); font-size: 0.88rem; } .dv-header-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .dv-context-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem; } .dv-context-row span { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border-light); border-radius:999px; background:var(--bg-surface); padding:.3rem .65rem; color:var(--text-secondary); font-size:.72rem; font-weight:600; } .dv-context-row span i { color: var(--accent); } /* ---------- Filter bar ---------- */ .dv-filterbar { display: flex; flex-direction: column; gap: 0.65rem; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--dv-radius-sm); box-shadow: var(--shadow-card); padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; } .dv-filter-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; } .dv-filter-presets { display: flex; gap: 0.35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; min-width: 0; } .dv-filter-presets::-webkit-scrollbar { height: 4px; } .dv-pill { border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .dv-pill:hover { background: var(--bg-surface-2); color: var(--text-primary); } .dv-pill.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(var(--dv-accent-rgb),.6); } .dv-pill.sm { font-size: 0.72rem; padding: 0.3rem 0.65rem; } .dv-filter-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .dv-compare-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; user-select: none; white-space: nowrap; } /* .dv-money-privacy itself is styled in reference-ui.css (the pre-existing Show/Hide amounts toggle, dynamically injected into this row by dvRenderKpiGrid) — just fit it into this flex row and keep it compact on narrow screens. */ .dv-filter-right .dv-money-privacy { flex-shrink: 0; } @media (max-width: 480px) { .dv-money-privacy span { display: none; } } .dv-filter-custom { display: flex; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.55rem; border-top: 1px dashed var(--border-light); } .dv-filter-custom-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 160px; min-width: 0; } .dv-filter-custom-field label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .dv-filter-custom-field input { width: 100%; box-sizing: border-box; } .dv-range-label { font-size: 0.78rem; color: var(--text-muted); margin: 0.55rem 0.5rem 1.2rem; } /* ---------- Hide amounts (privacy mode) — dot-masking is applied by swapping textContent in JS (dashboard.js initDvHideAmounts), not CSS, so the masked value is a real, fixed-width, unselectable dot string rather than a blurred (and copy-pasteable) version of the real one. ---------- */ /* ---------- Cards ---------- */ .dv-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--dv-radius); box-shadow: 0 2px 10px -4px rgba(26,21,51,.07); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; transition: box-shadow var(--transition), transform var(--transition); } .dv-card:hover { box-shadow: 0 16px 32px -14px rgba(26,21,51,.14), 0 2px 8px rgba(26,21,51,.06); } .dv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .dv-card-head h6 { margin: 0; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--text-primary); display: flex; align-items: center; gap: 0.55rem; } .dv-card-head h6 i { color: #fff; font-size: 0.82em; background: var(--accent); width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv-view-link { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; transition: var(--transition); } .dv-view-link:hover { gap: 0.45rem; } .dv-info-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface-2, rgba(0,0,0,0.04)); color: var(--text-muted); font-size: 0.68rem; cursor: help; flex-shrink: 0; } .dv-loading { color: var(--text-muted); font-size: 0.85rem; padding: 1.25rem 0; text-align: center; } .dv-loading a[data-retry] { color: var(--accent); font-weight: 600; text-decoration: none; margin-left: 0.3rem; } .dv-loading a[data-retry]:hover { text-decoration: underline; } .dv-skel-block { background: linear-gradient(90deg, var(--bg-surface-2, rgba(0,0,0,0.04)) 25%, var(--border-light) 37%, var(--bg-surface-2, rgba(0,0,0,0.04)) 63%); background-size: 400% 100%; animation: dv-shimmer 1.4s ease infinite; border-radius: var(--dv-radius-sm); min-height: 108px; } .dv-skel-funnel { display: flex; gap: 0.6rem; } .dv-skel-funnel .dv-skel-block { flex: 1; height: 88px; } .dv-skel-row-sm { display: flex; gap: 0.7rem; flex-wrap: wrap; } .dv-skel-row-sm .dv-skel-block { flex: 1 1 160px; height: 70px; } .dv-skel-list .dv-skel-block { height: 50px; margin-bottom: 0.6rem; } @keyframes dv-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .dv-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } .dv-split-row .dv-card { margin-bottom: 0; } [data-goto]:focus-visible, .dv-kpi-card:focus-visible, .dv-pipe-node:focus-visible, .dv-insight-card:focus-visible, .dv-product-row:focus-visible, .dv-inv-tier:focus-visible, .dv-funnel-side-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- KPI grid ---------- */ .dv-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 1.25rem; } .dv-kpi-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--dv-radius-sm); box-shadow: var(--shadow-card); padding: 1.1rem 1.2rem 1.05rem; transition: var(--transition); position: relative; overflow: hidden; } .dv-kpi-card.clickable { cursor: pointer; } .dv-kpi-card.clickable:hover { box-shadow: 0 14px 28px -12px rgba(0,0,0,.16); border-color: var(--border-medium); transform: translateY(-3px); } /* Icon-left "quick stat" layout: tinted icon chip, then the label beside it, matching the reference dashboard's stat cards (Net Revenue, Gross revenue, etc.) instead of the old icon-top-right / solid-gradient chip. */ .dv-kpi-top { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; } .dv-kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.02rem; flex-shrink: 0; } .dv-kpi-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; letter-spacing: -0.005em; display: flex; align-items: center; gap: 0.3rem; } .dv-kpi-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.15; } .dv-kpi-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: 0.55rem; font-size: 0.76rem; min-height: 1.3em; } .dv-trend { font-weight: 700; display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.12rem 0.5rem; border-radius: var(--radius-full); } .dv-trend.up { color: var(--success-text, var(--success)); background: var(--success-light); } .dv-trend.down { color: var(--danger-text, var(--danger)); background: var(--danger-light); } .dv-trend.flat { color: var(--text-muted); background: var(--bg-surface-2, rgba(0,0,0,0.04)); } .dv-kpi-desc { color: var(--text-muted); } /* ---------- Order Fulfillment Pipeline ---------- */ .dv-funnel-card { padding-bottom: 1.1rem; } .dv-pipeline { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .25rem; padding: 2.1rem .5rem 1.6rem; margin-bottom: .35rem; } .dv-pipeline::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 0; border-top: 2px dashed var(--border-medium); z-index: 0; } .dv-pipe-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; flex: 1 1 0; cursor: pointer; transition: transform var(--transition); } .dv-pipe-node:nth-child(odd) { transform: translateY(-11px); } .dv-pipe-node:nth-child(even) { transform: translateY(11px); } .dv-pipe-node:hover { transform: translateY(0) scale(1.04); } .dv-pipe-circle { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; box-shadow: 0 10px 22px -8px rgba(0,0,0,.3); border: 3px solid var(--bg-surface); transition: var(--transition); } .dv-pipe-circle.tone-neutral { background: linear-gradient(145deg, #9ca3af, #6b7280); } .dv-pipe-circle.tone-accent { background: linear-gradient(145deg, var(--accent), var(--accent-dark, #5b4bd6)); } .dv-pipe-circle.tone-warning { background: linear-gradient(145deg, #fbbf5e, var(--warning)); } .dv-pipe-circle.tone-info { background: linear-gradient(145deg, #60c3f5, var(--info)); } .dv-pipe-circle.tone-success { background: linear-gradient(145deg, #4ade80, var(--success)); } .dv-pipe-circle.tone-danger { background: linear-gradient(145deg, #fb7185, var(--danger)); } .dv-pipe-value { font-weight: 800; font-size: 1.1rem; color: var(--text-primary); letter-spacing: -0.02em; } .dv-pipe-label { font-size: 0.71rem; color: var(--text-muted); font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .02em; } .dv-pipe-pct { font-size: 0.68rem; color: var(--accent); font-weight: 700; } .dv-funnel-side { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-top: .5rem; padding-top: 1rem; border-top: 1px dashed var(--border-light); } .dv-funnel-side-chip { display: flex; align-items: center; gap: 0.4rem; background: var(--danger-light); color: var(--danger-text, var(--danger)); border-radius: var(--radius-full); padding: 0.35rem 0.8rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .dv-funnel-side-chip:hover { filter: brightness(0.96); transform: translateY(-1px); } .dv-funnel-side-chip.neutral { background: var(--warning-light); color: var(--warning-text, var(--warning)); } .dv-quality-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--border-light); } .dv-quality-metric { text-align: left; background: var(--bg-surface-2, rgba(0,0,0,.02)); border-radius: var(--dv-radius-sm); padding: .65rem .8rem; } .dv-quality-metric .qm-label { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; font-weight: 600; } .dv-quality-metric .qm-value { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-top: 0.2rem; } /* ---------- AI Insights hero — animated attention border ---------- */ .dv-insights-card { position: relative; background: linear-gradient(160deg, var(--accent-light, rgba(124,106,245,0.1)), var(--bg-surface) 60%); border: 1px solid transparent; overflow: hidden; } .dv-insights-card::before { content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: var(--dv-radius); background: conic-gradient(from var(--dv-spin, 0deg), var(--accent), #22d3ee, var(--success), var(--warning), var(--accent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: dv-border-spin 5s linear infinite; opacity: .85; pointer-events: none; } @keyframes dv-border-spin { to { --dv-spin: 360deg; } } @property --dv-spin { syntax: ''; inherits: false; initial-value: 0deg; } .dv-insights-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; position: relative; } .dv-insights-title { font-weight: 800; font-size: 1.08rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.55rem; } .dv-insights-title i { color: #fff; background: linear-gradient(145deg, var(--accent), #8b5cf6); width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(var(--dv-accent-rgb),.6); } .dv-insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; position: relative; } .dv-insight-card { display: flex; gap: .85rem; align-items: flex-start; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 14px; padding: 1.05rem 1.15rem; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .dv-insight-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: var(--border-medium); } .dv-insight-icon-wrap { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.28); } .dv-insight-card.sev-critical .dv-insight-icon-wrap { background: linear-gradient(145deg, #fb7185, var(--danger)); } .dv-insight-card.sev-warning .dv-insight-icon-wrap { background: linear-gradient(145deg, #fbbf5e, var(--warning)); } .dv-insight-card.sev-opportunity .dv-insight-icon-wrap { background: linear-gradient(145deg, #4ade80, var(--success)); } .dv-insight-card.sev-info .dv-insight-icon-wrap { background: linear-gradient(145deg, #60c3f5, var(--info)); } .dv-insight-card.sev-critical { background: linear-gradient(180deg, var(--danger-light) 0%, var(--bg-surface) 40%); border-color: rgba(240,88,125,.35); } .dv-insight-card.sev-warning { background: linear-gradient(180deg, var(--warning-light) 0%, var(--bg-surface) 40%); } .dv-insight-card.sev-opportunity { background: linear-gradient(180deg, var(--success-light) 0%, var(--bg-surface) 40%); } .dv-insight-card.sev-critical { animation: dv-critical-glow 2.2s ease-in-out infinite; } @keyframes dv-critical-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(240,88,125,0); } 50% { box-shadow: 0 0 0 5px rgba(240,88,125,.12); } } .dv-insight-body { min-width: 0; flex: 1; } .dv-insight-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 0.4rem; } .dv-insight-cat { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .dv-insight-priority { font-size: 0.62rem; font-weight: 800; padding: 0.18rem 0.6rem; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .03em; display: inline-flex; align-items: center; gap: .3rem; } .dv-insight-priority i { font-size: .4rem; } .dv-insight-priority.critical { background: var(--danger); color: #fff; } .dv-insight-priority.high { background: var(--warning); color: #fff; } .dv-insight-priority.medium { background: var(--info); color: #fff; } .dv-insight-title-txt { font-weight: 800; font-size: 0.94rem; color: var(--text-primary); margin-bottom: 0.3rem; line-height: 1.35; } .dv-insight-detail { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: .55rem; } .dv-insight-cta { font-size: 0.74rem; font-weight: 800; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; transition: var(--transition); } .dv-insight-card:hover .dv-insight-cta { gap: .5rem; } /* AI Insights modal */ .dv-insights-modal { border-radius: var(--radius-lg); } .dv-insights-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.9rem 1.25rem 0.9rem; border-bottom: 1px solid var(--border-light); } .dv-modal-insight { border-left: 3px solid var(--border-medium); padding: 0.8rem 1rem; margin-bottom: 0.7rem; border-radius: var(--radius-md); background: var(--bg-surface-2, rgba(0,0,0,0.025)); } .dv-modal-insight.sev-critical { border-left-color: var(--danger); } .dv-modal-insight.sev-warning { border-left-color: var(--warning); } .dv-modal-insight.sev-opportunity { border-left-color: var(--success); } /* ---------- Chart toggle ---------- */ .dv-chart-toggle { display: flex; gap: 0.4rem; background: var(--bg-surface-2, rgba(0,0,0,.03)); border-radius: var(--radius-full); padding: .2rem; } .dv-chart-toggle .dv-pill.active { box-shadow: 0 3px 8px -3px rgba(var(--dv-accent-rgb),.5); } .dv-chart-wrap { position: relative; height: 280px; margin-top: 0.35rem; } .dv-chart-summary { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; } .dv-chart-summary-total { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); } .dv-chart-summary-sep { color: var(--border-medium); } /* ---------- Order Mix donut ---------- */ .dv-donut-card { display: flex; flex-direction: column; } .dv-donut-wrap { display: flex; align-items: center; gap: 1.3rem; flex: 1; margin-top: .35rem; } .dv-donut-canvas-wrap { position: relative; width: 168px; height: 168px; flex-shrink: 0; } .dv-donut-canvas-wrap canvas { width: 100% !important; height: 100% !important; } .dv-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; } .dv-donut-center strong { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--text-primary); } .dv-donut-center span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .dv-donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; } .dv-donut-legend-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: 10px; cursor: pointer; transition: var(--transition); } .dv-donut-legend-row:hover, .dv-donut-legend-row:focus-visible { background: var(--bg-surface-2); } .dv-donut-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; } .dv-donut-legend-label { flex: 1; min-width: 0; font-size: .78rem; font-weight: 650; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv-donut-legend-value { font-size: .8rem; font-weight: 800; color: var(--text-primary); } .dv-donut-legend-pct { font-size: .68rem; font-weight: 700; color: var(--text-muted); min-width: 34px; text-align: right; } @media (max-width: 560px) { .dv-donut-wrap { flex-direction: column; align-items: stretch; } .dv-donut-canvas-wrap { align-self: center; } } .dv-donut-wrap.compact { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--border-light); } .dv-donut-canvas-wrap.sm { width: 100%; height: 130px; margin: 0 auto; } /* ---------- Courier grid ---------- */ .dv-courier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .dv-courier-card { background: var(--bg-surface-2, rgba(0,0,0,0.025)); border: 1px solid var(--border-light); border-radius: var(--dv-radius-sm); padding: 1.2rem 1.3rem; transition: var(--transition); cursor: pointer; } .dv-courier-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card-hover); } .dv-courier-name { font-weight: 800; font-size: 0.98rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; } .dv-courier-name i { color: #fff; background: var(--accent); width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Hero row — the three headline numbers, given real breathing room instead of competing with the secondary cost figures below. */ .dv-courier-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; } .dv-courier-hero-stat { text-align: center; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 14px; padding: 0.8rem 0.5rem 0.7rem; min-width: 0; position: relative; overflow: hidden; } .dv-courier-hero-stat i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; margin-bottom: .4rem; background: var(--bg-surface-2); color: var(--text-muted); } .dv-courier-hero-stat .cs-val { font-weight: 800; font-size: 1.2rem; color: var(--text-primary); line-height: 1.15; } .dv-courier-hero-stat .cs-lbl { font-size: 0.66rem; color: var(--text-muted); margin-top: 0.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .dv-courier-hero-stat.good { background: var(--success-light); border-color: transparent; } .dv-courier-hero-stat.good i { background: var(--success); color: #fff; } .dv-courier-hero-stat.good .cs-val { color: var(--success-text, var(--success)); } .dv-courier-hero-stat.mid { background: var(--warning-light); border-color: transparent; } .dv-courier-hero-stat.mid i { background: var(--warning); color: #fff; } .dv-courier-hero-stat.mid .cs-val { color: var(--warning-text, var(--warning)); } .dv-courier-hero-stat.poor { background: var(--danger-light); border-color: transparent; } .dv-courier-hero-stat.poor i { background: var(--danger); color: #fff; } .dv-courier-hero-stat.poor .cs-val { color: var(--danger-text, var(--danger)); } /* Secondary cost breakdown — plain label/value rows, one per line, so nothing ever collides or wraps mid-word. */ .dv-courier-costs { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 0; border-top: 1px dashed var(--border-light); border-bottom: 1px dashed var(--border-light); margin-bottom: 0.85rem; } .dv-courier-cost-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; } .dv-courier-cost-row span { color: var(--text-secondary); display: flex; align-items: center; gap: 0.55rem; min-width: 0; font-weight: 600; } .dv-courier-cost-row span i { color: var(--accent); flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-light); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; } .dv-courier-cost-row b { color: var(--text-primary); font-weight: 800; flex-shrink: 0; } .dv-courier-settle-label { font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.5rem; } .dv-courier-settle-pct { font-weight: 800; color: var(--success-text, var(--success)); } .dv-courier-settle-bar { height: 7px; border-radius: 4px; background: var(--border-light); overflow: hidden; margin-bottom: 0.4rem; } .dv-courier-settle-fill { height: 100%; background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 70%, var(--accent))); border-radius: 4px; } .dv-courier-settle-value { font-size: 0.76rem; color: var(--text-muted); } .dv-courier-note { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.7rem; display: flex; align-items: center; gap: 0.4rem; } @media (max-width: 420px) { .dv-courier-hero { grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; } .dv-courier-hero-stat { padding: 0.5rem 0.25rem; } .dv-courier-hero-stat .cs-val { font-size: 1.02rem; } } /* ---------- Product list ---------- */ .dv-product-list { display: flex; flex-direction: column; gap: 0.3rem; } .dv-product-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.6rem; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .dv-product-row:hover { background: var(--bg-surface-2, rgba(0,0,0,0.03)); transform: translateX(2px); } .dv-product-rank { width: 26px; text-align: center; font-weight: 800; color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; } .dv-product-thumb { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex-shrink: 0; background: var(--bg-surface-2, rgba(0,0,0,0.05)); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-weight: 700; font-size: 0.88rem; } .dv-product-info { flex: 1; min-width: 0; } .dv-product-title { font-weight: 700; font-size: 0.87rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dv-product-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.12rem; } .dv-product-revenue { text-align: right; flex-shrink: 0; } .dv-product-revenue .pr-amt { font-weight: 800; font-size: 0.92rem; color: var(--text-primary); } /* ---------- Inventory alerts ---------- */ .dv-inventory-alerts { display: flex; flex-direction: column; gap: 0.65rem; } .dv-inv-tier { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-radius: 14px; cursor: pointer; transition: var(--transition); border: 1px solid transparent; } .dv-inv-tier:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } .dv-inv-tier.out { background: var(--danger-light); } .dv-inv-tier.low { background: var(--warning-light); } .dv-inv-tier.ok { background: var(--success-light); } .dv-inv-tier-label { font-weight: 700; font-size: 0.86rem; display: flex; align-items: center; gap: 0.65rem; } .dv-inv-tier-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; background: rgba(255,255,255,.55); } .dv-inv-tier.out .dv-inv-tier-label { color: var(--danger-text, var(--danger)); } .dv-inv-tier.out .dv-inv-tier-icon { background: var(--danger); color: #fff; } .dv-inv-tier.low .dv-inv-tier-label { color: var(--warning-text, var(--warning)); } .dv-inv-tier.low .dv-inv-tier-icon { background: var(--warning); color: #fff; } .dv-inv-tier.ok .dv-inv-tier-label { color: var(--success-text, var(--success)); } .dv-inv-tier.ok .dv-inv-tier-icon { background: var(--success); color: #fff; } .dv-inv-tier-count { font-weight: 800; font-size: 1.3rem; } /* ---------- Marketing snapshot ---------- */ .dv-marketing-grid { display: flex; flex-direction: column; gap: 0.6rem; } .dv-marketing-grid { display: flex; flex-direction: column; gap: .6rem; } .dv-mkt-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.9rem; background: var(--bg-surface-2, rgba(0,0,0,0.025)); border: 1px solid transparent; border-radius: 14px; flex-wrap: wrap; gap: 0.5rem; cursor: pointer; transition: var(--transition); } .dv-mkt-row:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); transform: translateY(-1px); box-shadow: var(--shadow-card); } .dv-mkt-row.inactive { background: transparent; border: 1px dashed var(--border-medium); } .dv-mkt-row.inactive:hover { border-color: var(--accent); background: var(--accent-light); } .dv-mkt-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem; flex-shrink: 0; box-shadow: 0 3px 8px -3px rgba(0,0,0,.3); } .dv-mkt-row.inactive .dv-mkt-icon { opacity: .45; box-shadow: none; } .dv-mkt-platform { font-weight: 700; font-size: 0.86rem; display: flex; align-items: center; gap: 0.65rem; color: var(--text-primary); } .dv-mkt-metrics { display: flex; gap: 1.15rem; font-size: 0.78rem; color: var(--text-secondary); } .dv-mkt-metrics b { color: var(--text-primary); } .dv-mkt-unavailable { color: var(--text-muted); font-style: italic; font-size: 0.82rem; } .dv-mkt-connect { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--text-muted); font-weight: 600; } .dv-mkt-connect i { color: var(--text-muted); } .dv-mkt-connect span { color: var(--accent); font-weight: 700; padding: .25rem .65rem; border-radius: var(--radius-full); background: var(--accent-light); } .dv-mkt-row.inactive:hover .dv-mkt-connect span { background: var(--accent); color: #fff; } /* ---------- Profitability flow (Revenue → Gross Profit → Net Profit, with the individual cost deductions as compact single-line chips underneath instead of competing for space as equal-sized boxes). ---------- */ .dv-profit-main { display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .dv-profit-milestone { flex: 1 1 150px; text-align: center; background: var(--bg-surface-2, rgba(0,0,0,0.025)); border: 1px solid var(--border-light); border-radius: var(--dv-radius-sm); padding: 1rem 0.8rem; transition: var(--transition); } .dv-profit-milestone:hover { transform: translateY(-2px); border-color: var(--border-medium); } .dv-profit-milestone .pm-lbl { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.35rem; } .dv-profit-milestone .pm-val { display: block; font-weight: 800; font-size: 1.35rem; color: var(--text-primary); letter-spacing: -0.02em; } .dv-profit-milestone.final { background: linear-gradient(145deg, var(--accent-light, rgba(124,106,245,0.18)), var(--accent-light, rgba(124,106,245,0.06))); border: 1px solid rgba(var(--dv-accent-rgb),.3); } .dv-profit-milestone.final .pm-val { color: var(--accent); font-size: 1.55rem; } .dv-profit-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.1rem; flex: 0 0 auto; } .dv-profit-deductions { display: flex; flex-wrap: wrap; gap: 0.55rem; padding-top: 1rem; border-top: 1px dashed var(--border-light); } .dv-profit-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--bg-surface-2, rgba(0,0,0,0.03)); border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 0.4rem 0.85rem; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; transition: var(--transition); cursor: pointer; } .dv-profit-chip:hover { border-color: var(--danger); background: var(--danger-light); transform: translateY(-1px); } .dv-profit-chip i { color: var(--text-muted); font-size: 0.85rem; } .dv-profit-chip b { color: var(--danger-text, var(--danger)); font-weight: 800; } @media (max-width: 640px) { .dv-profit-main { flex-direction: column; } .dv-profit-arrow { transform: rotate(90deg); padding: 0.1rem 0; } .dv-profit-deductions { gap: 0.45rem; } .dv-profit-chip { font-size: 0.74rem; padding: 0.35rem 0.7rem; flex: 1 1 auto; justify-content: center; } } .dv-cost-coverage-badge { font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: var(--radius-full); background: var(--bg-surface-2, rgba(0,0,0,0.04)); color: var(--text-muted); } .dv-cost-coverage-badge.full { background: var(--success-light); color: var(--success-text, var(--success)); } .dv-cost-coverage-badge.partial { background: var(--warning-light); color: var(--warning-text, var(--warning)); } /* ---------- Shortcuts ---------- */ .dv-shortcuts-card { margin-bottom: 0; } .dv-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; } .dv-qa-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; background: var(--bg-surface-2, rgba(0,0,0,.02)); border: 1px solid var(--border-light); border-radius: var(--dv-radius-sm); padding: 1.1rem 1.1rem; text-decoration: none; color: var(--text-primary); transition: var(--transition); } .dv-qa-tile:hover { border-color: var(--accent); background: var(--bg-surface); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } .dv-qa-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.28); } .dv-qa-icon.tone-accent { background: linear-gradient(145deg, var(--accent), var(--accent-dark, #5b4bd6)); } .dv-qa-icon.tone-info { background: linear-gradient(145deg, #60c3f5, var(--info)); } .dv-qa-icon.tone-warning { background: linear-gradient(145deg, #fbbf5e, var(--warning)); } .dv-qa-icon.tone-success { background: linear-gradient(145deg, #4ade80, var(--success)); } .dv-qa-tile-label { font-weight: 700; font-size: 0.88rem; } /* ---------- Topbar plan widget ---------- */ .plan-status-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: var(--bg-surface-2, rgba(0,0,0,0.03)); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 0.32rem 0.7rem; min-width: 120px; cursor: pointer; } .plan-status-name { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .plan-status-bar-track { width: 100%; height: 3px; border-radius: 2px; background: var(--border-light); overflow: hidden; } .plan-status-bar-fill { height: 100%; background: var(--success); border-radius: 2px; transition: width 0.4s ease; } .plan-status-btn.expiring .plan-status-bar-fill { background: var(--warning); } .plan-status-btn.expired .plan-status-bar-fill { background: var(--danger); } .plan-status-btn.expiring .plan-status-name { color: var(--warning-text); } .plan-status-btn.expired .plan-status-name { color: var(--danger-text); } @media (max-width: 1300px) { .dv-kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .dv-split-row { grid-template-columns: 1fr; } .dv-pipeline::before { display: none; } .dv-pipe-node:nth-child(odd), .dv-pipe-node:nth-child(even) { transform: none; } } @media (max-width: 640px) { .dv-kpi-grid { grid-template-columns: 1fr 1fr; } .dv-header { flex-direction: column; align-items: stretch; } .dv-filter-top { flex-wrap: wrap; } .dv-filter-right { justify-content: flex-start; flex-wrap: wrap; width: 100%; } .dv-filter-custom { flex-direction: column; } .dv-filter-custom-field { flex: 0 0 auto; } .dv-card { padding: 1.1rem 1.15rem; } .dv-pipeline { flex-wrap: wrap; row-gap: 1.5rem; } .dv-pipe-node { flex: 1 1 30%; } #planStatusWidget { display: none !important; } } @media (prefers-reduced-motion: reduce) { .dv-skel-block, .dv-insights-card::before, .dv-eyebrow::before, .dv-insight-card.sev-critical { animation: none; } .dv-kpi-card, .dv-insight-card, .dv-pipe-node, .dv-qa-btn, .dv-card { transition: none; } } /* Canonical finance grid */ .dv-finance-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; } .dv-finance-metric { display: flex; align-items: center; gap: .7rem; border:1px solid var(--border-light); border-radius:var(--radius-sm); background:var(--bg-surface-2); padding:.75rem .8rem; min-width:0; transition: var(--transition); cursor: pointer; } .dv-finance-metric:hover { border-color: var(--border-medium); transform: translateY(-1px); box-shadow: var(--shadow-card); } .dv-finance-metric .fm-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; flex-shrink: 0; } .dv-finance-metric .fm-body { min-width: 0; } .dv-finance-metric.tone-revenue .fm-icon { background: linear-gradient(145deg, #60c3f5, var(--info)); } .dv-finance-metric.tone-cost .fm-icon { background: linear-gradient(145deg, #fb7185, var(--danger)); } .dv-finance-metric.tone-profit .fm-icon { background: linear-gradient(145deg, #4ade80, var(--success)); } .dv-finance-metric .fm-label { color:var(--text-secondary); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dv-finance-metric .fm-value { color:var(--text-primary); font-size:1.05rem; font-weight:800; margin-top:.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dv-finance-metric.tone-profit .fm-value { color: var(--success-text, var(--success)); } @media (max-width:991px) { .dv-finance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:575px) { .dv-finance-grid { grid-template-columns:1fr 1fr; } #dvProductMetricToggle { width:100%; overflow-x:auto; } .dv-finance-metric .fm-icon { width: 30px; height: 30px; font-size: .82rem; } .dv-finance-metric .fm-value { font-size: .92rem; } } .dash-refresh-btn.is-loading i { animation:dv-refresh-spin .8s linear infinite; } @keyframes dv-refresh-spin { to { transform:rotate(360deg); } } /* ===================================================================== Dashboard v3 — executive hierarchy and reference-quality pipeline ===================================================================== */ #view-dashboard { max-width: 1680px; margin-inline: auto; } #view-dashboard .dv-card { border-color: color-mix(in srgb, var(--border-light) 78%, var(--accent) 22%); box-shadow: 0 10px 32px -24px rgba(41,32,92,.38), 0 1px 2px rgba(20,16,45,.04); } #view-dashboard .dv-card-head { border-bottom: 1px solid var(--border-light); padding-bottom: .9rem; } .dv-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; } .dv-kpi-card { min-height: 142px; padding: 1rem 1.05rem; border-radius: 18px; isolation: isolate; } .dv-kpi-card::after { content:''; position:absolute; width:100px; height:100px; right:-45px; bottom:-55px; border-radius:50%; background:currentColor; opacity:.055; z-index:-1; } .dv-kpi-value { font-size: clamp(1.6rem, 2vw, 2.15rem); } .dv-kpi-icon { width: 46px; height: 46px; border-radius: 15px; } .dv-funnel-card { overflow: hidden; padding: 1.5rem 1.7rem 1.25rem; } .dv-pipeline-shell { position:relative; min-height:230px; padding: 15px 18px 0; overflow:hidden; } .dv-pipeline-wave { position:absolute; inset:25px 1.5% auto; width:97%; height:145px; overflow:visible; pointer-events:none; } .dv-pipeline-wave path { fill:none; stroke:color-mix(in srgb, var(--accent) 18%, var(--border-light)); stroke-width:4; stroke-linecap:round; stroke-dasharray:10 14; animation:dv-wave-flow 14s linear infinite; } @keyframes dv-wave-flow { to { stroke-dashoffset:-240; } } .dv-pipeline { position:relative; display:grid; grid-template-columns:repeat(6,minmax(110px,1fr)); align-items:start; gap:.35rem; padding:18px 0 0; margin:0; } .dv-pipeline::before { display:none; } .dv-pipe-node { gap:.34rem; min-width:0; transform:none !important; } .dv-pipe-node:nth-child(even) { padding-top:42px; } .dv-pipe-node:hover { transform:translateY(-5px) !important; } .dv-pipe-circle { width:72px; height:72px; font-size:1.65rem; border:5px solid var(--bg-surface); box-shadow:0 14px 28px -13px rgba(28,22,67,.65); position:relative; } .dv-pipe-index { position:absolute; top:-4px; right:-4px; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:var(--bg-surface); color:var(--text-muted); border:1px solid var(--border-light); font-size:.62rem; font-weight:800; } .dv-pipe-value { margin-top:.18rem; font-size:1.42rem; line-height:1; } .dv-pipe-label { font-size:.76rem; text-transform:none; letter-spacing:0; color:var(--text-secondary); } .dv-funnel-side { align-items:center; margin-top:.2rem; } .dv-pipeline-context { display:flex; align-items:baseline; gap:.5rem; margin-right:auto; } .dv-pipeline-context strong { font-size:1.25rem; color:var(--text-primary); } .dv-pipeline-context span { font-size:.75rem; color:var(--text-muted); } .dv-quality-row { grid-template-columns:repeat(5,1fr); } .dv-quality-metric { border:1px solid var(--border-light); background:linear-gradient(145deg,var(--bg-surface-2),var(--bg-surface)); } .dv-insights-card { padding:1.55rem 1.7rem; background:radial-gradient(circle at 8% 0%,rgba(124,106,245,.15),transparent 30%),radial-gradient(circle at 95% 100%,rgba(34,211,238,.1),transparent 28%),var(--bg-surface); } .dv-insights-card::after { content:'AI'; position:absolute; right:22px; top:42px; font-size:5rem; line-height:1; font-weight:900; color:var(--accent); opacity:.035; pointer-events:none; } .dv-insights-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .dv-insight-card { min-height:170px; border-radius:18px; padding:1.15rem; } .dv-insight-card::before { content:''; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:3px; background:var(--accent); opacity:.65; } .dv-insight-card.sev-critical::before { background:var(--danger); } .dv-insight-card.sev-warning::before { background:var(--warning); } .dv-insight-card.sev-opportunity::before { background:var(--success); } /* Category icon + live-count pill + metric/delta chip — makes each card scannable at a glance without opening it, and lets the dashboard header communicate "how many signals right now" without a click. */ .dv-insights-count-pill { font-size:.66rem; font-weight:800; color:var(--accent); background:var(--accent-soft-bg,rgba(var(--dv-accent-rgb),.12)); border-radius:var(--radius-full); padding:.16rem .58rem; letter-spacing:.02em; } .dv-insight-cat { display:inline-flex; align-items:center; gap:.3rem; } .dv-insight-cat i { font-size:.72rem; } .dv-insight-metric { display:inline-flex; align-items:baseline; gap:.4rem; background:var(--bg-surface-2); border:1px solid var(--border-light); border-radius:10px; padding:.32rem .6rem; margin-bottom:.6rem; } .dv-insight-metric-label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); } .dv-insight-metric-value { font-size:.86rem; font-weight:800; color:var(--text-primary); } .dv-insight-metric-delta { font-size:.72rem; font-weight:800; display:inline-flex; align-items:center; gap:.05rem; margin-left:auto; padding-left:.4rem; } .dv-insight-metric-delta i { font-size:.9rem; } .dv-insight-metric.good .dv-insight-metric-delta { color: var(--success); } .dv-insight-metric.bad .dv-insight-metric-delta { color: var(--danger); } .dv-insight-title-txt { font-size:1rem; } .dv-insight-detail { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .dv-finance-metric { min-height:76px; border-radius:14px; } .dv-product-row { border-bottom:1px solid var(--border-light); border-radius:0; padding:.72rem .6rem; } .dv-product-row:last-child { border-bottom:0; } .dv-chart-wrap { height:320px; } @media (max-width:1100px) { .dv-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dv-insights-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dv-quality-row { grid-template-columns:repeat(3,1fr); } } @media (max-width:760px) { .dv-funnel-card { padding:1.15rem; } .dv-pipeline-shell { overflow-x:auto; min-height:235px; padding-inline:5px; scrollbar-width:thin; } .dv-pipeline-wave { width:840px; min-width:840px; } .dv-pipeline { width:840px; grid-template-columns:repeat(6,140px); flex-wrap:nowrap; } .dv-pipe-node { flex:none; } .dv-insights-grid { grid-template-columns:1fr; } .dv-insight-card { min-height:auto; padding: 0.9rem 1rem; } .dv-insights-head { flex-direction: column; align-items: flex-start; gap: .5rem; } .dv-insights-head #dvInsightsViewAllBtn { align-self: stretch; } .dv-insights-title { font-size: 0.98rem; } .dv-quality-row { grid-template-columns:1fr 1fr; } } @media (max-width:520px) { .dv-kpi-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .dv-pipeline-wave path { animation:none; } } /* ============================= BUSINESS AUDIT SNAPSHOT — KPI cards, P&L statement, monthly expense tables ============================= */ .ba-kpi-card { position: relative; overflow: hidden; border-radius: var(--radius-md); } .ba-kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem; margin-bottom: 0.5rem; } .ba-kpi-label { font-size: 0.72rem; color: var(--text-secondary, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .ba-kpi-value { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin-top: 2px; } .ba-tone-success .ba-kpi-icon { background: linear-gradient(145deg, #4ade80, var(--success)); } .ba-tone-success { background: linear-gradient(180deg, var(--success-light) 0%, var(--bg-surface) 55%); } .ba-tone-danger .ba-kpi-icon { background: linear-gradient(145deg, #fb7185, var(--danger)); } .ba-tone-danger { background: linear-gradient(180deg, var(--danger-light) 0%, var(--bg-surface) 55%); } .ba-tone-accent .ba-kpi-icon { background: linear-gradient(145deg, var(--accent), var(--accent-dark, #5b4bd6)); } .ba-tone-accent { background: linear-gradient(180deg, var(--accent-light) 0%, var(--bg-surface) 55%); } .ba-tone-muted .ba-kpi-icon { background: linear-gradient(145deg, #9ca3af, #6b7280); } .ba-pnl-table td { padding: 0.45rem 0.6rem; } .ba-pnl-table tr:not(.ba-pnl-total):not(.ba-pnl-subtotal) td:first-child { color: var(--text-secondary, var(--text-muted)); } .ba-pnl-deduct td:last-child { color: var(--danger-text, var(--danger)); } .ba-pnl-subtotal td { border-top: 1px solid var(--border-light); font-weight: 700; } .ba-pnl-total td { border-top: 2px solid var(--accent); font-weight: 800; font-size: 1.05rem; background: var(--accent-light); } .ba-pnl-total td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .ba-pnl-total td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--accent); } .ba-grand-total { font-weight: 700; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); } .ba-grand-total strong { margin-left: 0.4rem; font-size: 1.05rem; } .ba-status-posted { background: var(--success-light); color: var(--success-text, var(--success)); } .ba-status-draft { background: var(--warning-light); color: var(--warning-text, var(--warning)); } .ba-status-void { background: var(--danger-light); color: var(--danger-text, var(--danger)); text-decoration: line-through; } .ba-status-na { background: var(--bg-muted, rgba(120,120,140,.12)); color: var(--text-secondary, var(--text-muted)); } .ba-donut-card { border-radius: var(--radius-md); } .ba-donut-wrap { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; } .ba-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .ba-donut-value { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); } .ba-donut-label { font-size: 0.7rem; color: var(--text-secondary, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .ba-donut-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.75rem; justify-content: center; } .ba-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--text-secondary, var(--text-muted)); } .ba-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }