File size: 6,182 Bytes
a435638
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/* ─────────────────────────────────────────────────────────────────────────
   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); }
}