/* ───────────────────────────────────────────────────────────────────────── AG-Finance Portal – Grid CSS ───────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* Force Inter everywhere */ body, * { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important; } /* ── AG-Grid must fill its wrapper div ────────────────────────────────── */ .ag-theme-alpine, .ag-theme-alpine-dark { height: 100% !important; width: 100% !important; --ag-font-family: 'Inter', 'Segoe UI', sans-serif; --ag-font-size: 12.5px; --ag-row-height: 34px; --ag-header-height: 38px; --ag-border-radius: 0; line-height: normal; } /* ── LIGHT THEME ──────────────────────────────────────────────────────── */ .ag-theme-alpine { --ag-background-color: #ffffff; --ag-header-background-color: #f8fafc; --ag-row-hover-color: #eff6ff; --ag-selected-row-background-color: #dbeafe; --ag-range-selection-border-color: #3b82f6; --ag-header-foreground-color: #374151; --ag-foreground-color: #1e293b; --ag-border-color: #e2e8f0; --ag-secondary-border-color: #f1f5f9; --ag-alpine-active-color: #3b82f6; --ag-input-focus-border-color: #3b82f6; --ag-checkbox-unchecked-color: #94a3b8; --ag-checkbox-checked-color: #3b82f6; } /* ── DARK THEME ───────────────────────────────────────────────────────── */ .ag-theme-alpine-dark { --ag-background-color: #0f1624; --ag-header-background-color: #141d2e; --ag-row-hover-color: #192540; --ag-selected-row-background-color: #1e2e50; --ag-range-selection-border-color: #3b82f6; --ag-header-foreground-color: #8899bb; --ag-foreground-color: #c8d6ef; --ag-border-color: #1e2843; --ag-secondary-border-color: #192030; --ag-alpine-active-color: #3b82f6; --ag-input-focus-border-color: #3b82f6; --ag-odd-row-background-color: #111828; --ag-control-panel-background-color: #141d2e; --ag-subheader-background-color: #141d2e; --ag-disabled-foreground-color: #3a4a6a; } /* ── Alternating row stripe ───────────────────────────────────────────── */ .ag-theme-alpine .ag-row.row-stripe { background-color: rgba(241, 245, 249, 0.5) !important; } .ag-theme-alpine-dark .ag-row.row-stripe { background-color: rgba(16, 24, 40, 0.6) !important; } /* ── Header ──────────────────────────────────────────────────────────── */ .ag-theme-alpine .ag-header-cell, .ag-theme-alpine-dark .ag-header-cell { font-weight: 600 !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: 0.04em; } .ag-theme-alpine .ag-header-cell:hover, .ag-theme-alpine-dark .ag-header-cell:hover { background: rgba(59,130,246,0.07) !important; } /* ── Frozen / pinned column accent ────────────────────────────────────── */ .ag-theme-alpine .ag-pinned-left-header, .ag-theme-alpine-dark .ag-pinned-left-header { border-right: 2px solid rgba(59,130,246,0.4) !important; } .ag-theme-alpine .ag-pinned-left-cols-container, .ag-theme-alpine-dark .ag-pinned-left-cols-container { border-right: 2px solid rgba(59,130,246,0.3) !important; } /* ── Cell focus ring ──────────────────────────────────────────────────── */ .ag-theme-alpine .ag-cell-focus, .ag-theme-alpine-dark .ag-cell-focus { border: 2px solid #3b82f6 !important; } /* Value change flash */ .ag-theme-alpine .ag-cell-data-changed, .ag-theme-alpine-dark .ag-cell-data-changed { background-color: rgba(251,191,36,0.28) !important; } /* ── Status bar ────────────────────────────────────────────────────────── */ .ag-theme-alpine .ag-status-bar, .ag-theme-alpine-dark .ag-status-bar { font-size: 11px !important; min-height: 26px !important; padding: 0 10px !important; } /* ── Scrollbars inside grid ────────────────────────────────────────────── */ .ag-body-viewport::-webkit-scrollbar { width: 7px; height: 7px; } .ag-body-viewport::-webkit-scrollbar-track { background: transparent; } .ag-theme-alpine .ag-body-viewport::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .ag-theme-alpine-dark .ag-body-viewport::-webkit-scrollbar-thumb { background: #253048; border-radius: 4px; } /* ── No scrollbar helper ────────────────────────────────────────────────── */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── Snowflake badge pulse animation ──────────────────────────────────────── */ @keyframes pulse { from { opacity: 0.4; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } }