/* Styles for pnl.hbs — "اگر قبلا سرمایه‌گذاری می‌کردم...". Ported from the legacy `HomePnl.vue` / `HomePnlBox.vue` / `HomePnlEfficiency.vue`; the 1000 breakpoint and every size below are the legacy values, as measured on the live site. */ .pnl-title { color: var(--gray-900); font-size: 21px; font-weight: 700; line-height: 58px; text-align: center; } .pnl-description { margin-top: -4px; color: var(--gray-600); font-size: 16px; font-weight: 400; line-height: 26px; text-align: center; } .pnl-box { display: grid; grid-template-columns: 1fr; grid-template-areas: 'ranges' 'chart' 'stats'; gap: 24px 40px; margin-top: 24px; padding: 24px; border-radius: 12px; background-color: var(--gray-0); } /* `min-width: 0` is load-bearing: a grid item defaults to a min-content floor, and the chart would push the column wider than its share rather than fit it. */ .pnl-chart-cell { grid-area: chart; min-width: 0; } /* The width is left to the grid, which is what lets the chart fill its column at every size — ApexCharts measures this box on render and follows it. The height is deliberately NOT reserved here. While this box is empty the section is showing the fallback table instead, and a reserved 300px would sit above that table as a void — permanently, for anyone without JavaScript. The island sets the height inline the moment it commits to drawing (which happens before the section is scrolled into view), and clears it again if the chart fails to load. */ .pnl-chart { width: 100%; } .pnl-chart:empty { height: 0; } /* The island's custom tooltip body. ApexCharts drops the returned markup straight into `.apexcharts-tooltip`, which carries no inset of its own, so without this the text sits flush against the tooltip's 1px border. The legacy chart declared the same inset and weight inline on this very element. */ .pnl-tooltip { padding: 4px 6px; font-weight: 600; } /* Stands in for the chart while its bundle downloads. Six bars of falling length, so the box reads as the chart that is coming rather than as an empty panel — and at the chart's exact height, so nothing moves when they swap. `.skeleton` (app.css) carries the shimmer and already stills itself under prefers-reduced-motion. */ /* Which of the placeholder and the table leads, before the island has booted. Without JavaScript the table is the content and the skeleton must never show, since nothing will ever replace it. With JavaScript the chart is on its way, so the placeholder leads and the table waits behind it as the failure fallback. `js` is set on by an inline script in head.hbs, ahead of first paint; after mounting, the island's own bindings take over. */ .pnl-chart-skeleton { display: none; } .js .pnl-chart-skeleton { display: flex; } .js .pnl-table { display: none; } .pnl-chart-skeleton { flex-direction: column; /* `flex-end` is the LEFT edge on this RTL page. The chart's bars are anchored left and grow rightwards, so the placeholder has to lean the same way or it visibly flips when the real thing arrives. */ align-items: flex-end; justify-content: space-around; height: 300px; padding: 12px 0; } .pnl-chart-skeleton-bar { height: 18px; border-radius: 4px; } /* Echoes the ranking the chart will show: best first, longest first. */ .pnl-chart-skeleton-bar:nth-child(1) { width: 92%; } .pnl-chart-skeleton-bar:nth-child(2) { width: 78%; } .pnl-chart-skeleton-bar:nth-child(3) { width: 64%; } .pnl-chart-skeleton-bar:nth-child(4) { width: 43%; } .pnl-chart-skeleton-bar:nth-child(5) { width: 25%; } .pnl-chart-skeleton-bar:nth-child(6) { width: 14%; } /* Shown until the chart paints, and for good without JavaScript. */ .pnl-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pnl-table-caption { padding-bottom: 12px; color: var(--gray-600); font-size: 14px; text-align: start; } .pnl-table th, .pnl-table td { padding: 8px 0; border-bottom: 1px solid var(--gray-200); text-align: start; font-weight: 400; } .pnl-table thead th { color: var(--gray-500); font-size: 12px; } .pnl-table tbody th { color: var(--gray-900); font-weight: 600; } .pnl-table td { color: var(--gray-600); } .pnl-panel { display: flex; flex-direction: column; gap: 12px; } .pnl-panel--ranges { grid-area: ranges; } /* Pinned to the bottom of its cell so the two stats rows sit level with the foot of the chart on wide screens. */ .pnl-panel--stats { grid-area: stats; justify-content: end; } .pnl-panel-title { margin-bottom: 8px; color: var(--gray-900); font-size: 16px; font-weight: 700; } .pnl-ranges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; /* The legacy `.tabs` shipped this margin, and `HomePnlBox`'s override only re-laid the grid, so it survived there — it is the gap under the button block on mobile, where the chart follows immediately below. */ margin-bottom: 8px; } .pnl-range { /* The legacy tab is a bare `button`, so its line box is the UA's `normal`. This app's reset gives buttons `font: inherit`, which would hand them the page's 1.6 and stand each one 4px taller than the original. */ line-height: normal; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 12px; background-color: var(--gray-0); color: var(--gray-600); font-size: 14px; font-weight: 400; text-align: center; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .pnl-range[data-active='true'] { border-color: var(--identity); background-color: var(--low-identity); color: var(--gray-900); } .pnl-stat { display: flex; justify-content: space-between; padding: 12px 16px; border-radius: 12px; } .pnl-stat-label { font-size: 14px; font-weight: 500; } .pnl-stat-value { display: flex; gap: 8px; font-size: 16px; } .pnl-stat-name { display: flex; align-items: center; gap: 4px; } .pnl-stat--success { background-color: var(--bg-success); color: var(--success); } .pnl-stat--danger { background-color: var(--bg-danger); color: var(--danger); } /* One glyph, pointed the right way per row. */ .pnl-stat--danger .pnl-stat-arrow { transform: rotate(180deg); } .pnl-cta { width: fit-content; margin: 24px auto 0; padding: 12px 24px; font-size: 16px; line-height: 1.6; } @media (min-width: 1000px) { .pnl-title { font-size: 36px; } .pnl-description { margin-top: 8px; font-size: 20px; } .pnl-box { grid-template-columns: 1fr 2fr; grid-template-areas: 'ranges chart' 'stats chart'; } /* The rule between the panel and the chart. It sits on the chart cell so it spans both rows of the grid, which a border on either panel would not. */ .pnl-chart-cell { padding-right: 40px; border-right: 1px solid var(--gray-200); } .pnl-ranges { margin-bottom: 16px; } .pnl-stat-label { font-size: 16px; } .pnl-cta { margin-top: 40px; padding: 12px 30px; } }