/* ==================================================================== Sage & Stone -- warm, earthy, minimal finance theme built from the user's own 3-swatch palette (#ACAB9E taupe, #D9D8D5 stone, #567257 sage). Light is the primary experience (the swatches are light tones); [data-theme="dark"] on (set by the toggle in the topbar, see app.js) switches to a dark variant in the same hue family. Every class name below matches the existing markup 1:1 -- visual-layer only. ==================================================================== */ :root { /* ---- Sage & Stone (light) palette -- the default ---- */ --bg: #D9D8D5; /* stone -- page background, exactly as given */ --sidebar-bg: #33402F; /* deep forest, derived from the sage accent */ --panel: #FFFFFF; /* cards lift cleanly off the stone page bg */ --hover-bg: #ECEBE7; --accent: #567257; /* sage -- primary, exactly as given */ --accent-2: #ACAB9E; /* taupe -- secondary, exactly as given */ --accent-contrast: #ffffff; --text: #292A26; --text-muted: #6E6D64; --border: #CFCDC5; --border-soft: #E4E3DE; --good: #3F7D46; --good-bg: #E7F0E4; --bad: #B24A34; --bad-bg: #F7E7E2; --warn: #B07C2E; --warn-bg: #F5EDDD; --info: #4F7C93; --info-bg: #E6EEF1; --neutral: #6E6D64; --neutral-bg: #ECEBE7; --plum: #7A5D82; /* Dividend -- a muted mauve, kept in the same warm-earthy register as the rest of the palette */ --plum-bg: #F1E9F2; --teal: #3E7F79; /* Closing Balance -- a point-in-time balance, deliberately distinct from Net Profit's blue */ --teal-bg: #E5F1EF; /* Back-compat aliases used throughout the existing CSS/markup */ --brand: var(--accent); --brand-dark: var(--sidebar-bg); --brand-mid: #4C6350; --brand-light: var(--hover-bg); --radius: 8px; --sidebar-w: 224px; --shadow-sm: 0 1px 2px rgba(41,42,38,.08); --shadow-md: 0 8px 24px rgba(41,42,38,.10); --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-theme="dark"] { --bg: #1C1F1A; --sidebar-bg: #171A15; --panel: #24281F; --hover-bg: #2C3125; --accent: #749673; --accent-2: #C7C6BB; --accent-contrast: #10150e; --text: #F1F1EC; --text-muted: #A6A69A; --border: #3A3F33; --border-soft: #2E3228; --good: #5FA968; --good-bg: rgba(95,169,104,0.15); --bad: #D06A50; --bad-bg: rgba(208,106,80,0.15); --warn: #D2A44F; --warn-bg: rgba(210,164,79,0.15); --info: #6FA0B8; --info-bg: rgba(111,160,184,0.15); --neutral: #A6A69A; --neutral-bg: rgba(166,166,154,0.15); --plum: #B08CBA; --plum-bg: rgba(176,140,186,0.15); --teal: #5FB0A8; --teal-bg: rgba(95,176,168,0.15); --brand-mid: #3C4C3B; --brand-light: var(--hover-bg); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.4); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; transition: background .15s ease, color .15s ease; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } .app-shell { display: flex; min-height: 100vh; } /* ---------------- Sidebar ---------------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); color: #fff; padding: 18px 0; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.06); } .sidebar .brand { padding: 0 18px 16px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; display: flex; align-items: center; gap: 9px; } .sidebar .brand::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex-shrink: 0; } .sidebar nav { flex: 1; padding: 4px 10px; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 1px; color: #B7BBAE; font-size: 13px; font-weight: 500; border-radius: 6px; border-left: 2px solid transparent; } .sidebar nav a svg { flex-shrink: 0; opacity: .8; } .sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; } .sidebar nav a.active { background: rgba(118,148,116,0.22); color: #fff; font-weight: 600; border-left-color: var(--accent); } .sidebar nav a.active svg { opacity: 1; color: var(--accent); } .sidebar .user-box { padding: 14px 18px 0; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 10px; font-size: 12px; } .sidebar .user-box .name { font-weight: 600; font-size: 13px; color: #fff; } .sidebar .user-box .role { text-transform: capitalize; color: #9A9C8E; } .sidebar .logout { display: block; margin: 8px 18px 0; font-size: 12px; color: var(--bad); } /* ---------------- Main ---------------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--panel); border-bottom: 1px solid var(--border); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; } .topbar h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--text); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .content { padding: 18px 24px 40px; flex: 1; } /* ---------------- Cards / panels ---------------- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); /* A grid item's default min-width is auto, which lets wide content (a Chart.js canvas with a long legend, e.g.) force the card past its grid column instead of shrinking to fit -- min-width:0 makes the card the authority on its own width, content included. */ min-width: 0; } .card h2, .card h3 { margin-top: 0; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; } .card h2::before, .card h3::before { content: ""; display: inline-block; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); flex-shrink: 0; } .card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .card-title-row h2, .card-title-row h3 { margin: 0; } .grid { display: grid; gap: 12px; } .grid-5 { grid-template-columns: repeat(5, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } } /* ---------------- KPI tiles ---------------- */ .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-sm); transition: border-color .12s ease, transform .12s ease; } .kpi:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .kpi .label { color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 9px; } .kpi .value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); } .kpi .value.pos { color: var(--good); } .kpi .value.neg { color: var(--bad); } .kpi .sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; } .kpi .change { font-size: 12px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; } .kpi .change.pos { color: var(--good); } .kpi .change.neg { color: var(--bad); } .kpi .change::before { content: "▲"; font-size: 9px; } .kpi .change.neg::before { content: "▼"; } /* Headline-metric KPI cards (Gross Profit, Net Profit, Achievement, etc.): a crisp top accent bar on an otherwise clean white card reads as "executive report" -- a full-tile color wash reads as a template demo. The bar color plus the (already-colored, via .value.pos/.neg) number is enough signal; the card body stays neutral so the number keeps maximum contrast and the row doesn't turn into a wall of pastel. */ .kpi.accent-gp, .kpi.accent-good { border-top: 3px solid var(--good); padding-top: 14px; } .kpi.accent-np { border-top: 3px solid var(--info); padding-top: 14px; } .kpi.accent-bad { border-top: 3px solid var(--bad); padding-top: 14px; } /* Gross Profit / Net Profit columns in wide reports: a light column tint is a legitimate scanning aid (it groups a metric across many rows), kept deliberately subtle -- no header fill, just a colored bottom rule + bold colored label, so it reads as a section marker rather than a highlight. */ th.col-gp, th.col-np, th.col-revenue, th.col-expense { background: var(--panel); font-weight: 700; } th.col-gp, th.col-revenue { color: var(--good); border-bottom: 2px solid var(--good); } th.col-np { color: var(--info); border-bottom: 2px solid var(--info); } th.col-expense { color: var(--bad); border-bottom: 2px solid var(--bad); } td.col-gp, td.col-revenue { background: var(--good-bg); font-weight: 600; } td.col-np { background: var(--info-bg); } td.col-expense { background: var(--bad-bg); font-weight: 600; } /* Net Profit's own pos/neg (loss) coloring always wins over this tint's default text color -- the tint is a background cue only, never allowed to mask a loss showing red. */ td.col-np:not(.pos):not(.neg) { color: var(--info); font-weight: 600; } /* Pass/fail metrics (Achievement %, etc.) as a compact status pill instead of a full-cell color wash -- the same language banking/SaaS dashboards use for status, and it keeps a dense table from turning into a heat map. */ .pill { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 3px 11px; border-radius: 999px; font-weight: 700; font-size: 12.5px; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .pill-good { background: var(--good-bg); color: var(--good); } .pill-bad { background: var(--bad-bg); color: var(--bad); } .pill-neutral { background: var(--neutral-bg); color: var(--neutral); } /* ---------------- Icon badges (KPI cards, stat tiles, ranked-list cards) ---------------- */ .icon-badge { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-badge svg { width: 20px; height: 20px; } .icon-badge-good { background: var(--good-bg); color: var(--good); } .icon-badge-info { background: var(--info-bg); color: var(--info); } .icon-badge-warn { background: var(--warn-bg); color: var(--warn); } .icon-badge-bad { background: var(--bad-bg); color: var(--bad); } .icon-badge-neutral { background: var(--neutral-bg); color: var(--neutral); } .icon-badge-accent { background: var(--good-bg); color: var(--accent); } .icon-badge.small { width: 32px; height: 32px; border-radius: 8px; } .icon-badge.small svg { width: 16px; height: 16px; } /* KPI card with a leading icon badge -- the executive-dashboard convention of "icon + label/value" instead of a bare number. Still composes with the accent-* top-border modifiers above. */ .kpi.kpi-icon { display: flex; align-items: flex-start; gap: 14px; } .kpi.kpi-icon .kpi-body { flex: 1; min-width: 0; } .kpi.kpi-icon.with-ring { align-items: center; } .kpi.kpi-icon.with-ring .kpi-body { flex: 1; } /* Circular achievement ring -- a hard-edged two-tone conic gradient (no canvas/chart dependency), driven purely by the --ring-pct/--ring-color custom properties set inline per instance. */ .ring { --ring-pct: 0; --ring-color: var(--good); width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 3.6deg), var(--border-soft) 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ring-inner { width: 48px; height: 48px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; } .ring-value { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } /* Mini horizontal progress bar -- used inline in table cells and ranked list cards to show magnitude/achievement at a glance without a heat-map wash across the whole cell. */ .progress-track { position: relative; height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; width: 100%; min-width: 60px; } .progress-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 999px; background: var(--good); } .progress-fill.bad { background: var(--bad); } .progress-fill.warn { background: var(--warn); } /* ---------------- Ranked-list cards (Retail Performance Highlights) ---------------- */ .rank-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); } .rank-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rank-card-header h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); } .rank-row { padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .rank-row:last-child { border-bottom: none; } .rank-row-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .rank-num { font-size: 12.5px; font-weight: 800; color: var(--accent-2); flex-shrink: 0; } .rank-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-value { font-size: 12.5px; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; white-space: nowrap; } .rank-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 4px; } .rank-link:hover { text-decoration: underline; } /* Scrollable custom legend -- used instead of Chart.js's built-in legend when a chart has too many slices/series to ever fit a fixed-width card (e.g. one row per branch, 50+ branches): the chart stays a small fixed size and every entry is still reachable by scrolling this list, rather than either truncating the data or blowing out the card's width. */ .chart-legend-scroll { flex: 1; min-width: 0; overflow-y: auto; padding-right: 4px; } .chart-legend-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; cursor: default; } .chart-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .chart-legend-name { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart-legend-value { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; } .chart-legend-row.dimmed { opacity: .4; } /* Subtle "figures shown in AED" notice -- CFO P&L Report and CFO Dashboard only, where a foreign-currency branch's figures are converted before display. A small muted pill, not an alert box -- this is informational, not a warning. */ .currency-notice { display: flex; align-items: center; gap: 5px; width: fit-content; margin-left: auto; margin-bottom: 10px; font-size: 10.5px; font-weight: 500; color: var(--text-muted); background: var(--hover-bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .currency-notice svg { color: var(--accent); flex-shrink: 0; width: 11px; height: 11px; } /* ---------------- Bottom summary stat tiles ---------------- */ .stat-mini { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); } .stat-mini .stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; } .stat-mini .stat-value { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .stat-mini .stat-delta { font-size: 11px; font-weight: 600; margin-top: 3px; display: inline-flex; align-items: center; gap: 3px; } .stat-mini .stat-delta.pos { color: var(--good); } .stat-mini .stat-delta.neg { color: var(--bad); } .stat-mini .stat-delta::before { content: "▲"; font-size: 8px; } .stat-mini .stat-delta.neg::before { content: "▼"; } /* ---------------- Filter bar ---------------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; } .filter-bar .field { display: flex; flex-direction: column; gap: 5px; } .filter-bar label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; } .filter-bar select, .filter-bar input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--bg); color: var(--text); min-width: 130px; } /* ---------------- Forms ---------------- */ label { font-size: 12.5px; color: var(--text-muted); } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; width: 100%; background: var(--bg); color: var(--text); } input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus, .filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--good-bg); } .form-row { margin-bottom: 14px; } .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } button, .btn { display: inline-block; padding: 8px 16px; border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); font-size: 13.5px; cursor: pointer; font-weight: 600; letter-spacing: .01em; transition: background .12s ease, border-color .12s ease, transform .06s ease; } button:hover, .btn:hover { background: #46604A; border-color: #46604A; text-decoration: none; } button:active, .btn:active { transform: translateY(1px); } button.secondary, .btn.secondary { background: transparent; color: var(--text); border-color: var(--border); } button.secondary:hover, .btn.secondary:hover { background: var(--hover-bg); border-color: var(--accent); } button.danger, .btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; } button.danger:hover, .btn.danger:hover { background: #dc2626; border-color: #dc2626; } button:disabled { opacity: .5; cursor: not-allowed; } .btn-row { display: flex; gap: 10px; align-items: center; } /* ---------------- Tables ---------------- */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { padding: 10px 10px; border-bottom: 1px solid var(--border-soft); text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } th:first-child, td:first-child, th.text, td.text { text-align: left; font-variant-numeric: normal; } /* A neutral header with a single crisp brand-color rule underneath -- restrained, "financial statement" register. A green-washed header on every table in the app (the old treatment) reads as decoration rather than a signal, and competes with the deliberate GP/NP/status colors used below it. */ thead th { color: var(--text); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--panel); position: sticky; top: 0; z-index: 5; border-bottom: 2px solid var(--accent); } /* Month-wise grids (Sales/P&L/Target/Equity/Daily Sales "all branches" reports) get a darker header, distinct from the mid-tone branch-name bars below it, for a clearer hierarchy: header > branch bar > data. */ .grid-table thead th { color: #fff; background: var(--sidebar-bg); border-bottom: 2px solid var(--accent); font-weight: 600; letter-spacing: .04em; } table:not(.grid-table) tbody tr:nth-child(even) { background: var(--hover-bg); } /* grid-table's own zebra -- a plain nth-child stripe would cut arbitrarily across a branch's multi-row metric block, so this is scoped to rows that don't already carry their own explicit background (branch-header, group-dept/country/region, grand-total-row, metric-row-*), letting those keep winning on specificity while everything else still stripes. */ .grid-table tbody tr:nth-child(even):not(.branch-header):not(.group-dept):not(.group-country):not(.group-region):not(.grand-total-row):not(.metric-row-balance):not(.metric-row-gp):not(.metric-row-np):not(.metric-row-revenue):not(.metric-row-expense):not(.metric-row-dividend):not(.metric-row-zakat) { background: var(--hover-bg); } tbody tr:hover { background: var(--hover-bg); } tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; } /* Bounded, internally-scrollable table panel -- required for `thead th`'s position:sticky (below) to actually engage: a plain overflow-x:auto div never itself scrolls vertically (the page does), so a sticky header inside it never re-anchors. Capping the height and allowing vertical overflow makes THIS panel the scrolling context, so the header freezes at the top of the table as you scroll through a long report. Short tables are unaffected (max-height is just an upper bound). */ .table-wrap { overflow: auto; max-height: 74vh; } .branch-header td { background: var(--brand-mid); color: #fff; font-weight: 700; letter-spacing: .015em; border-bottom: 1px solid var(--border); } /* Three-tier grouped report sections (department > country > region), e.g. Sales Report's Month-wise tab -- darkest/most prominent for the outermost grouping, lightest for the innermost, so the hierarchy reads at a glance. */ .group-dept td { background: var(--sidebar-bg); color: #fff; font-weight: 700; letter-spacing: .015em; text-transform: uppercase; font-size: 12px; } .group-country td { background: var(--accent); color: #fff; font-weight: 700; padding-left: 20px; } .group-region td { background: var(--info-bg); color: var(--info); font-weight: 700; padding-left: 32px; font-size: 12.5px; border-left: 4px solid var(--info); } /* Collapsible group rows (click to fold/unfold their branches) -- the chevron is purely visual, the whole row is the click target. */ .group-toggle { display: inline-block; width: 12px; font-size: 10px; opacity: .85; } .grid-table td.metric-label { padding-left: 22px; color: var(--text-muted); } /* A touch smaller than the app default -- these grids are already dense (many months x many branches), and the new row-tint colors carry enough visual weight on their own that the numbers don't need to be as large. */ .grid-table td:not(.metric-label):not(.text) { font-size: 12px; } .withdraw-shortcut { padding: 3px 10px; font-size: 11.5px; font-weight: 600; } /* Freeze the first (Date) and last (Total) columns of a grid-table so scrolling through many columns in between (e.g. 40+ branches in Daily Sales Report) keeps both anchors on screen -- .table-wrap is already the real horizontal+vertical scroll context (see note above), so sticky left/right anchors to it correctly. */ .freeze-first-last th:first-child, .freeze-first-last td:first-child { position: sticky; left: 0; z-index: 3; background: var(--good-bg); color: var(--good); font-weight: 600; white-space: nowrap; min-width: 108px; box-shadow: 2px 0 6px rgba(0,0,0,.15); } .freeze-first-last th:last-child, .freeze-first-last td:last-child { position: sticky; right: 0; z-index: 3; background: var(--good-bg); color: var(--good); font-weight: 700; box-shadow: -2px 0 6px rgba(0,0,0,.15); } .freeze-first-last thead th:first-child, .freeze-first-last thead th:last-child { z-index: 6; background: var(--sidebar-bg); color: #fff; } .freeze-first-last tbody tr:hover td:first-child, .freeze-first-last tbody tr:hover td:last-child { background: #DCEBD9; } .freeze-first-last .branch-header td:first-child, .freeze-first-last .branch-header td:last-child { background: var(--brand-mid); color: #fff; } .freeze-first-last .grand-total-row td:first-child, .freeze-first-last .grand-total-row td:last-child { background: var(--sidebar-bg); color: #fff; } .freeze-first-last .group-dept td:first-child, .freeze-first-last .group-dept td:last-child { background: var(--sidebar-bg); color: #fff; } .freeze-first-last .group-country td:first-child, .freeze-first-last .group-country td:last-child { background: var(--accent); color: #fff; } .freeze-first-last .group-region td:first-child, .freeze-first-last .group-region td:last-child { background: var(--info-bg); color: var(--info); } /* Light, professional per-metric row tints in month-wise grids -- one consistent color language reused across every branch block, so the eye learns "this row is always Net Profit" etc. without re-reading the label each time. A small icon in the row label reinforces the same color, matching the icon-badge language used on KPI cards elsewhere. */ .metric-row-revenue td, .metric-row-gp td { background: var(--good-bg); } .metric-row-expense td { background: var(--bad-bg); } .metric-row-np td { background: var(--info-bg); } .metric-row-dividend td { background: var(--plum-bg); } .metric-row-zakat td { background: var(--warn-bg); } .metric-row-balance td { background: var(--teal-bg); } .metric-row-revenue td.metric-label, .metric-row-gp td.metric-label, .metric-row-expense td.metric-label, .metric-row-np td.metric-label, .metric-row-dividend td.metric-label, .metric-row-zakat td.metric-label, .metric-row-balance td.metric-label { font-weight: 600; display: flex; align-items: center; gap: 6px; } .metric-row-revenue .row-icon, .metric-row-gp .row-icon { color: var(--good); } .metric-row-expense .row-icon { color: var(--bad); } .metric-row-np .row-icon { color: var(--info); } .metric-row-dividend .row-icon { color: var(--plum); } .metric-row-zakat .row-icon { color: var(--warn); } .metric-row-balance .row-icon { color: var(--teal); } .row-icon { flex-shrink: 0; } .grand-total-row td { background: var(--sidebar-bg); color: #fff; font-weight: 700; border-top: 2px solid var(--accent); } .grand-total-row td.metric-label { color: #fff; padding-left: 10px; } /* Total column (last column of a month-wise grid): a clear divider plus consistent right padding so it reads as its own summary column, not just another month running on from December. */ .grid-table th:last-child, .grid-table td:last-child { border-left: 2px solid var(--accent); padding-right: 16px; white-space: nowrap; } .pos { color: var(--good); } .neg { color: var(--bad); } /* Bank Statement View: a top border on each day's first row groups same-day transactions visually without collapsing them into a day total. */ tr.day-start td { border-top: 2px solid var(--border); } tr.day-start td:first-child { font-weight: 600; } /* ---------------- Tags / badges ---------------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .badge.upload { background: var(--info-bg); color: var(--info); } .badge.manual { background: var(--neutral-bg); color: var(--text-muted); } .badge.active { background: var(--good-bg); color: var(--good); } .badge.inactive { background: var(--neutral-bg); color: var(--text-muted); } /* ---------------- Multi-file upload cards ---------------- */ .file-card-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .file-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .file-card .fname { font-weight: 600; font-size: 12.5px; color: var(--text-muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-card label { font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; } .file-card input[type=text], .file-card select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12.5px; width: 130px; background: var(--panel); color: var(--text); } .file-card .meta { font-size: 11.5px; color: var(--text-muted); } .file-card .rm { margin-left: auto; } /* ---------------- Misc ---------------- */ .muted { color: var(--text-muted); } .small { font-size: 12px; } p.muted.small { margin: 2px 0 10px; line-height: 1.4; } .empty-state { padding: 40px 20px; text-align: center; color: var(--text-muted); } .alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13.5px; } .alert.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); } .alert.bad { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); } .alert.severe { background: var(--bad); color: #fff; border: 1px solid var(--bad); font-weight: 600; } .alert.good { background: var(--good-bg); color: var(--good); border: 1px solid var(--good); } /* Compact variant for repeated alert lists (Bank Balance Alert, Payment Reminders) -- the base .alert is sized for a single form-level message, which is too roomy once several rows stack in a card. */ .alert.compact { padding: 6px 12px; margin-bottom: 5px; font-size: 12.5px; line-height: 1.4; } .alert.compact:last-child { margin-bottom: 0; } .modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,15,0.6); display: none; align-items: center; justify-content: center; z-index: 100; } .modal-backdrop.open { display: flex; } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; width: 560px; max-width: 92vw; max-height: 86vh; overflow: auto; box-shadow: var(--shadow-md); } .modal h3 { font-weight: 600; color: var(--text); margin-top: 0; } .tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .tabs button { background: none; border: none; color: var(--text-muted); font-weight: 600; font-size: 13px; letter-spacing: .01em; padding: 10px 16px; border-radius: 0; border-bottom: 2px solid transparent; } .tabs button.active { color: var(--text); border-bottom: 2px solid var(--accent); } .tabs button:hover { background: none; color: var(--text); text-decoration: none; } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #4C6350 0%, #33402F 60%); } .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 34px 34px 28px; width: 380px; max-width: 92vw; border-top: 3px solid var(--accent); box-shadow: var(--shadow-md); } .login-card h1 { font-size: 21px; font-weight: 600; margin: 0 0 4px; color: var(--text); } .login-card p.sub { color: var(--text-muted); margin: 0 0 22px; font-size: 13px; } .equity-summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--bg); } .equity-summary .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; } .equity-summary .row:last-child { border-bottom: none; font-weight: 700; font-size: 15px; padding-top: 10px; } /* ---------------- Print (the Print button on large report tables) ---------------- */ @media print { .sidebar, .topbar, .filter-bar, .tabs, button, .btn-row, #mwKpiRow .sub { display: none !important; } .app-shell, .main, .content { display: block !important; } .card { box-shadow: none; border: none; padding: 0; margin-bottom: 12px; } .table-wrap { max-height: none !important; overflow: visible !important; } .grid-table thead th, .freeze-first-last th:first-child, .freeze-first-last td:first-child, .freeze-first-last th:last-child, .freeze-first-last td:last-child { position: static !important; box-shadow: none; } }