Update src/styles/grid.css

src/styles/grid.css

@@ -4,14 +4,24 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-/* Force Inter everywhere */
-body, * {
+/* Use Inter for app text, but do not override AG Grid's icon font */
+body,
+input,
+button,
+select,
+textarea {
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
 }
 
+/* AG Grid Quartz icons rely on their own font-face */
+.ag-theme-quartz .ag-icon,
+.ag-theme-quartz-dark .ag-icon {
+  font-family: var(--ag-icon-font-family) !important;
+}
+
 /* ── AG-Grid must fill its wrapper div ────────────────────────────────── */
-.ag-theme-alpine,
-.ag-theme-alpine-dark {
+.ag-theme-quartz,
+.ag-theme-quartz-dark {
   height: 100% !important;
   width:  100% !important;
   --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
@@ -23,7 +33,7 @@ body, * {
 }
 
 /* ── LIGHT THEME ──────────────────────────────────────────────────────── */
-.ag-theme-alpine {
+.ag-theme-quartz {
   --ag-background-color:            #ffffff;
   --ag-header-background-color:     #f8fafc;
   --ag-row-hover-color:             #eff6ff;
@@ -33,14 +43,14 @@ body, * {
   --ag-foreground-color:            #1e293b;
   --ag-border-color:                #e2e8f0;
   --ag-secondary-border-color:      #f1f5f9;
-  --ag-alpine-active-color:         #3b82f6;
+  --ag-quartz-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-theme-quartz-dark {
   --ag-background-color:            #0f1624;
   --ag-header-background-color:     #141d2e;
   --ag-row-hover-color:             #192540;
@@ -50,7 +60,7 @@ body, * {
   --ag-foreground-color:            #c8d6ef;
   --ag-border-color:                #1e2843;
   --ag-secondary-border-color:      #192030;
-  --ag-alpine-active-color:         #3b82f6;
+  --ag-quartz-active-color:         #3b82f6;
   --ag-input-focus-border-color:    #3b82f6;
   --ag-odd-row-background-color:    #111828;
   --ag-control-panel-background-color: #141d2e;
@@ -59,51 +69,51 @@ body, * {
 }
 
 /* ── Alternating row stripe ───────────────────────────────────────────── */
-.ag-theme-alpine .ag-row.row-stripe {
+.ag-theme-quartz .ag-row.row-stripe {
   background-color: rgba(241, 245, 249, 0.5) !important;
 }
-.ag-theme-alpine-dark .ag-row.row-stripe {
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-header-cell,
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-header-cell:hover,
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-pinned-left-header,
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-pinned-left-cols-container,
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-cell-focus,
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-cell-data-changed,
+.ag-theme-quartz-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 {
+.ag-theme-quartz .ag-status-bar,
+.ag-theme-quartz-dark .ag-status-bar {
   font-size: 11px !important;
   min-height: 26px !important;
   padding: 0 10px !important;
@@ -112,8 +122,8 @@ body, * {
 /* ── 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; }
+.ag-theme-quartz .ag-body-viewport::-webkit-scrollbar-thumb         { background: #cbd5e1; border-radius: 4px; }
+.ag-theme-quartz-dark .ag-body-viewport::-webkit-scrollbar-thumb   { background: #253048; border-radius: 4px; }
 
 /* ── No scrollbar helper ────────────────────────────────────────────────── */
 .no-scrollbar::-webkit-scrollbar { display: none; }
@@ -123,4 +133,4 @@ body, * {
 @keyframes pulse {
   from { opacity: 0.4; transform: scale(0.85); }
   to   { opacity: 1;   transform: scale(1.15); }
-}
+}