@freegridjs/core 1.9.3 → 1.9.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/cdn/freegrid.css +542 -541
  2. package/dist/cdn/freegrid.esm.js +18 -18
  3. package/dist/cdn/freegrid.min.js +22 -22
  4. package/dist/index.d.ts +3 -3
  5. package/dist/index.js +251 -22
  6. package/dist/locales/de.d.ts +1 -1
  7. package/dist/locales/en.d.ts +1 -1
  8. package/dist/locales/es.d.ts +1 -1
  9. package/dist/locales/fr.d.ts +1 -1
  10. package/dist/locales/id.d.ts +1 -1
  11. package/dist/locales/it.d.ts +1 -1
  12. package/dist/locales/ja.d.ts +1 -1
  13. package/dist/locales/ko.d.ts +1 -1
  14. package/dist/locales/pt-BR.d.ts +1 -1
  15. package/dist/locales/ru.d.ts +1 -1
  16. package/dist/locales/th.d.ts +1 -1
  17. package/dist/locales/vi.d.ts +1 -1
  18. package/dist/locales/zh-CN.d.ts +1 -1
  19. package/dist/locales/zh-TW.d.ts +1 -1
  20. package/dist/styles.css +542 -541
  21. package/dist/{types-DloQYCt_.d.ts → types-CIOv3MoN.d.ts} +34 -1
  22. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -1,541 +1,542 @@
1
- [class*="fg-theme-"] {
2
- --fg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans", sans-serif;
3
- --fg-font-size: 13px;
4
- --fg-radius: 8px;
5
- --fg-cell-px: 12px;
6
- --fg-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
7
- }
8
- .fg-theme-light {
9
- --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #636b7c;
10
- --fg-header-bg: #f6f7f9; --fg-header-fg: #39404f; --fg-border: #e3e6eb; --fg-row-border: #eef0f3;
11
- --fg-row-odd: #fbfbfc; --fg-row-hover: #f2f6ff; --fg-row-selected: #e3edff;
12
- --fg-accent: #2563eb; --fg-accent-fg: #ffffff; --fg-focus: #2563eb; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
13
- }
14
- .fg-theme-dark {
15
- --fg-bg: #11141b; --fg-fg: #e6e9f0; --fg-muted: #8c95a8;
16
- --fg-header-bg: #171b24; --fg-header-fg: #c9cfdc; --fg-border: #262c38; --fg-row-border: #1c212b;
17
- --fg-row-odd: #13171f; --fg-row-hover: #1a2233; --fg-row-selected: #1d3157;
18
- --fg-accent: #4f8cff; --fg-accent-fg: #0b0d12; --fg-focus: #4f8cff; --fg-popup-bg: #171b24; --fg-input-bg: #0f1218;
19
- --fg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
20
- color-scheme: dark;
21
- }
22
- .fg-root {
23
- position: relative; display: flex; flex-direction: row; box-sizing: border-box;
24
- width: 100%; height: 100%; overflow: hidden; outline: none;
25
- font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-bg);
26
- border: 1px solid var(--fg-border); border-radius: var(--fg-radius);
27
- border-top: var(--fg-top-border, 1px solid var(--fg-border));
28
- font-variant-numeric: tabular-nums;
29
- }
30
- .fg-root *, .fg-menu * { box-sizing: border-box; }
31
- .fg-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
32
- .fg-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
33
- .fg-root [hidden], .fg-menu [hidden] { display: none !important; }
34
- .fg-header { display: flex; flex: none; background: var(--fg-header-bg); color: var(--fg-header-fg); border-bottom: var(--fg-header-border, 1px solid var(--fg-border)); }
35
- .fg-header-pane { position: relative; overflow: hidden; flex: none; }
36
- .fg-header-pane-center { flex: 1 1 0; min-width: 0; }
37
- .fg-header-pane-left { border-right: 1px solid var(--fg-border); }
38
- .fg-header-pane-right { border-left: 1px solid var(--fg-border); }
39
- .fg-header-inner { position: relative; will-change: transform; }
40
- .fg-header-cell {
41
- position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 var(--fg-cell-px);
42
- font-weight: var(--fg-header-weight, 600); white-space: nowrap; overflow: hidden; user-select: none;
43
- box-shadow: inset -1px -1px 0 var(--fg-header-line, var(--fg-row-border));
44
- }
45
- .fg-header-group { justify-content: center; }
46
- .fg-header-cell.fg-sortable { cursor: pointer; }
47
- .fg-header-cell.fg-align-right { flex-direction: row-reverse; }
48
- .fg-header-cell.fg-align-center { justify-content: center; }
49
- /* the label takes the free space (the menu button's auto margin would otherwise push it to the start) */
50
- .fg-header-cell.fg-align-center .fg-header-label { flex: 1 1 auto; text-align: center; }
51
- .fg-header-label { overflow: hidden; text-overflow: ellipsis; flex: var(--fg-header-label-flex, 0 1 auto); text-align: var(--fg-header-text-align, left); }
52
- .fg-sort-icon { color: var(--fg-accent); font-size: 12px; }
53
- .fg-sort-icon sup { font-size: 9px; margin-left: 1px; }
54
- .fg-menu-btn {
55
- margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
56
- border: 0; border-radius: 5px; background: none; color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s;
57
- }
58
- .fg-header-cell.fg-align-right .fg-menu-btn { margin-left: 0; margin-right: auto; }
59
- .fg-header-cell:hover .fg-menu-btn, .fg-menu-btn.fg-filter-active { opacity: 1; }
60
- .fg-menu-btn:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
61
- .fg-menu-btn.fg-filter-active { color: var(--fg-accent); }
62
- .fg-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
63
- .fg-resize:hover, .fg-resizing .fg-resize:active { background: linear-gradient(90deg, transparent 5px, var(--fg-accent) 5px, var(--fg-accent) 8px); }
64
- .fg-resizing { cursor: col-resize; user-select: none; }
65
- .fg-header-cell.fg-dragging { opacity: .45; }
66
- .fg-drop-marker { position: absolute; top: 0; width: 2px; background: var(--fg-accent); z-index: 5; pointer-events: none; }
67
- .fg-drag-ghost {
68
- position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; padding: 6px 10px; border-radius: 6px;
69
- font: 600 var(--fg-font-size) var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg); box-shadow: var(--fg-shadow);
70
- }
71
- .fg-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
72
- .fg-body-pane { position: relative; overflow: hidden; flex: none; }
73
- .fg-body-pane-center { flex: 1 1 0; min-width: 0; overflow: auto; }
74
- .fg-body-pane-left { border-right: 1px solid var(--fg-border); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
75
- .fg-body-pane-right { border-left: 1px solid var(--fg-border); box-shadow: -4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
76
- /* isolation: the z-index of rows drawing merged blocks stays inside the canvas (below the editor, fill handle, overlays) */
77
- .fg-canvas { position: relative; isolation: isolate; }
78
- .fg-row { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg); }
79
- .fg-row-odd { background: var(--fg-row-odd); }
80
- .fg-row:hover { background: var(--fg-row-hover); }
81
- .fg-row-selected, .fg-row-selected:hover { background: var(--fg-row-selected); }
82
- .fg-cell {
83
- position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 var(--fg-cell-px);
84
- white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
85
- box-shadow: var(--fg-col-line, none);
86
- }
87
- .fg-cell.fg-align-right { justify-content: flex-end; }
88
- .fg-cell.fg-align-center { justify-content: center; }
89
- .fg-cell-focused { outline: 2px solid var(--fg-focus); outline-offset: -2px; border-radius: 2px; }
90
- .fg-cell-select, .fg-header-select { justify-content: center; padding: 0; }
91
- .fg-checkbox { width: 15px; height: 15px; margin: 0; accent-color: var(--fg-accent); cursor: pointer; }
92
- .fg-summary { display: flex; flex: none; background: var(--fg-header-bg); font-weight: 600; }
93
- .fg-summary-top { border-bottom: 1px solid var(--fg-border); }
94
- .fg-summary-bottom { border-top: 1px solid var(--fg-border); }
95
- .fg-summary-pane { position: relative; overflow: hidden; flex: none; }
96
- .fg-summary-pane-center { flex: 1 1 0; min-width: 0; }
97
- .fg-summary-pane-left { border-right: 1px solid var(--fg-border); }
98
- .fg-summary-pane-right { border-left: 1px solid var(--fg-border); }
99
- .fg-summary-inner { position: relative; will-change: transform; }
100
- .fg-summary-row, .fg-summary-row:hover { background: var(--fg-header-bg); font-weight: 600; }
101
- .fg-summary-label { color: var(--fg-muted); }
102
- .fg-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; color: var(--fg-muted); pointer-events: none; }
103
- .fg-menu {
104
- position: fixed; z-index: 10000; width: 248px; padding: 6px; border-radius: 10px; overflow: auto; overscroll-behavior: contain;
105
- font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg);
106
- border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow);
107
- }
108
- .fg-menu-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
109
- .fg-menu-section + .fg-menu-section { border-top: 1px solid var(--fg-border); }
110
- .fg-menu-item { text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
111
- .fg-menu-item:hover, .fg-menu-item:focus-visible { background: var(--fg-row-hover); outline: none; }
112
- .fg-menu-title { padding: 4px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
113
- .fg-filter { gap: 6px; padding: 6px 4px; }
114
- .fg-input, .fg-filter-op {
115
- width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--fg-border); border-radius: 6px;
116
- background: var(--fg-input-bg); color: inherit; font: inherit;
117
- }
118
- .fg-input:focus, .fg-filter-op:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
119
- /* every select in the grid, its menus and dialogs: a drawn chevron with room on the right */
120
- .fg-root select:not([multiple]):not([size]), .fg-menu select:not([multiple]):not([size]) {
121
- appearance: none; -webkit-appearance: none; padding-right: 26px;
122
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
123
- background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
124
- }
125
- .fg-set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
126
- .fg-set-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
127
- .fg-set-item:hover { background: var(--fg-row-hover); }
128
- .fg-set-all { font-weight: 600; }
129
- .fg-set-more { padding: 4px 6px; color: var(--fg-muted); }
130
- .fg-menu-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
131
- .fg-btn { height: 28px; padding: 0 12px; border: 1px solid var(--fg-border); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
132
- .fg-btn:hover { background: var(--fg-row-hover); }
133
- .fg-btn-primary { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
134
- .fg-btn-primary:hover { background: var(--fg-accent); filter: brightness(1.08); }
135
- .fg-sidebar { display: flex; flex: none; border-left: 1px solid var(--fg-border); background: var(--fg-header-bg); }
136
- .fg-sidebar-panel { width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--fg-border); background: var(--fg-bg); }
137
- .fg-sidebar-tabs { width: 28px; display: flex; flex-direction: column; }
138
- .fg-sidebar-tab {
139
- writing-mode: vertical-rl; padding: 12px 0; border: 0; background: none; color: var(--fg-header-fg);
140
- font: 600 var(--fg-font-size) var(--fg-font); cursor: pointer;
141
- }
142
- .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset 2px 0 var(--fg-accent); }
143
- .fg-sidebar-open .fg-sidebar-tabs { width: 32px; gap: 4px; padding: 8px 4px 8px 0; }
144
- .fg-sidebar-open .fg-sidebar-tab {
145
- position: relative; margin-left: -1px; padding: 14px 0; border: 1px solid var(--fg-border); border-left-color: transparent;
146
- border-radius: 0 7px 7px 0; background: var(--fg-header-bg); color: var(--fg-muted);
147
- }
148
- .fg-sidebar-open .fg-sidebar-tab:hover { color: var(--fg-header-fg); background: var(--fg-row-hover); }
149
- .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] {
150
- background: var(--fg-bg); color: var(--fg-accent); border-left-color: var(--fg-bg); box-shadow: inset -3px 0 var(--fg-accent); z-index: 1;
151
- }
152
- .fg-sidebar-open .fg-sidebar-tab:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
153
- .fg-chooser { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; flex: 1; }
154
- .fg-chooser-dialog { width: 280px; }
155
- .fg-chooser-dialog .fg-chooser { max-height: 420px; }
156
- .fg-chooser-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 0; }
157
- .fg-chooser-close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font-size: 18px; cursor: pointer; }
158
- .fg-chooser-close:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
159
- .fg-chooser-all { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 600; cursor: pointer; }
160
- .fg-chooser-list { position: relative; overflow: auto; flex: 1; min-height: 0; }
161
- .fg-chooser-item { display: flex; align-items: center; gap: 6px; height: 28px; padding-right: 6px; border-radius: 6px; white-space: nowrap; }
162
- .fg-chooser-item:hover { background: var(--fg-row-hover); }
163
- .fg-chooser-item.fg-dragging { opacity: .45; }
164
- .fg-chooser-group > .fg-chooser-label { font-weight: 600; }
165
- .fg-chooser-handle { color: var(--fg-muted); cursor: grab; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; }
166
- .fg-chooser-caret { width: 16px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; }
167
- .fg-chooser-label { overflow: hidden; text-overflow: ellipsis; }
168
- .fg-chooser-pin { margin-left: auto; color: var(--fg-muted); font-size: 11px; }
169
- .fg-chooser-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); pointer-events: none; }
170
-
171
- /* 심플형: white everywhere, no zebra stripes, hairline row rules, quiet header (works well with merged cells) */
172
- .fg-theme-simple {
173
- --fg-radius: 6px; --fg-bg: #ffffff; --fg-fg: #222831; --fg-muted: #7b8290;
174
- --fg-header-bg: #ffffff; --fg-header-fg: #5b6270; --fg-header-weight: 600;
175
- --fg-border: #e6e8ec; --fg-row-border: #f0f1f4;
176
- --fg-row-odd: #ffffff; --fg-row-hover: #f7f8fa; --fg-row-selected: #eef4ff;
177
- --fg-accent: #3b6fe0; --fg-accent-fg: #ffffff; --fg-focus: #3b6fe0; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
178
- --fg-header-border: 1px solid #e6e8ec; --fg-header-line: transparent;
179
- }
180
-
181
- /* ── Korean-style themes: simple lines, centered headers ─────────────────── */
182
- .fg-theme-board, .fg-theme-erp, .fg-theme-excel, .fg-theme-classic {
183
- --fg-font: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
184
- --fg-header-label-flex: 1 1 auto; --fg-header-text-align: center;
185
- --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff; --fg-accent-fg: #ffffff; --fg-shadow: 0 8px 24px rgba(0, 0, 0, .14);
186
- }
187
- /* 게시판형: thick top rule, light grey header, horizontal lines only */
188
- .fg-theme-board {
189
- --fg-radius: 0; --fg-bg: #ffffff; --fg-fg: #222222; --fg-muted: #767676;
190
- --fg-header-bg: #f7f7f7; --fg-header-fg: #222222; --fg-border: #dddddd; --fg-row-border: #e5e5e5;
191
- --fg-row-odd: #ffffff; --fg-row-hover: #f6f8fb; --fg-row-selected: #eef3fc;
192
- --fg-accent: #1f5bd6; --fg-focus: #1f5bd6;
193
- --fg-top-border: 2px solid #222222; --fg-header-border: 1px solid #bbbbbb; --fg-header-line: transparent;
194
- }
195
- .fg-theme-board.fg-root { border-left: 0; border-right: 0; }
196
- /* 관리자·ERP형: every cell bordered, blue-grey header, compact */
197
- .fg-theme-erp {
198
- --fg-font-size: 12px; --fg-radius: 2px; --fg-cell-px: 8px;
199
- --fg-bg: #ffffff; --fg-fg: #333333; --fg-muted: #7a8494;
200
- --fg-header-bg: #eef2f7; --fg-header-fg: #2b3442; --fg-border: #c5ceda; --fg-row-border: #dde3eb;
201
- --fg-row-odd: #fafbfd; --fg-row-hover: #eef5ff; --fg-row-selected: #fff6d5;
202
- --fg-accent: #2f6fde; --fg-focus: #2f6fde;
203
- --fg-col-line: inset -1px 0 #dde3eb; --fg-header-line: #c5ceda;
204
- }
205
- /* 엑셀형: gridlines, plain grey header, green focus */
206
- .fg-theme-excel {
207
- --fg-radius: 0; --fg-cell-px: 8px;
208
- --fg-bg: #ffffff; --fg-fg: #1f1f1f; --fg-muted: #6e6e6e;
209
- --fg-header-bg: #f3f3f3; --fg-header-fg: #444444; --fg-header-weight: 500;
210
- --fg-border: #d4d4d4; --fg-row-border: #e2e2e2;
211
- --fg-row-odd: #ffffff; --fg-row-hover: #f7f7f7; --fg-row-selected: #e6f2ea;
212
- --fg-accent: #107c41; --fg-focus: #107c41;
213
- --fg-col-line: inset -1px 0 #e2e2e2; --fg-header-line: #d4d4d4;
214
- }
215
- /* 진한 헤더형: calm navy header with white text */
216
- .fg-theme-classic {
217
- --fg-radius: 4px; --fg-bg: #ffffff; --fg-fg: #2a2f37; --fg-muted: #6b7380;
218
- --fg-header-bg: #3d4b63; --fg-header-fg: #ffffff; --fg-border: #cfd5de; --fg-row-border: #e3e7ed;
219
- --fg-row-odd: #f8f9fb; --fg-row-hover: #eef2f8; --fg-row-selected: #e2e9f5;
220
- --fg-accent: #3d4b63; --fg-focus: #3d6bb3;
221
- --fg-col-line: inset -1px 0 #e3e7ed; --fg-header-line: #56657e;
222
- }
223
- .fg-theme-classic .fg-menu-btn { color: #c9d2e0; }
224
- .fg-theme-classic .fg-menu-btn:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
225
- .fg-theme-classic .fg-sort-icon, .fg-theme-classic .fg-menu-btn.fg-filter-active { color: #ffd166; }
226
- .fg-theme-classic .fg-sidebar-tab { color: #c9d2e0; }
227
- .fg-theme-classic .fg-sidebar-tab[aria-expanded="true"] { color: #ffd166; box-shadow: inset 2px 0 #ffd166; }
228
- .fg-theme-classic .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset -3px 0 var(--fg-accent); }
229
- .fg-theme-board .fg-header-cell, .fg-theme-erp .fg-header-cell, .fg-theme-excel .fg-header-cell, .fg-theme-classic .fg-header-cell { flex-direction: row; justify-content: center; }
230
- .fg-theme-board .fg-menu-btn, .fg-theme-erp .fg-menu-btn, .fg-theme-excel .fg-menu-btn, .fg-theme-classic .fg-menu-btn {
231
- position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
232
- }
233
- .fg-theme-board .fg-header-label, .fg-theme-erp .fg-header-label, .fg-theme-excel .fg-header-label, .fg-theme-classic .fg-header-label { flex: 0 1 auto; }
234
-
235
- /* ── cell ranges, context menu, toast ───────────────────────────────── */
236
- .fg-cell-range { background: var(--fg-range-bg, color-mix(in srgb, var(--fg-accent) 13%, transparent)); }
237
- .fg-range-dragging, .fg-range-dragging * { user-select: none; cursor: cell; }
238
- .fg-context-menu { width: 236px; }
239
- .fg-cm-item { display: flex; align-items: center; gap: 12px; width: 100%; }
240
- .fg-cm-item:disabled { opacity: .45; cursor: default; background: none; }
241
- .fg-cm-label { flex: 1; }
242
- .fg-cm-shortcut { color: var(--fg-muted); font-size: .9em; }
243
- .fg-cm-sep { height: 1px; margin: 4px 2px; background: var(--fg-border); }
244
- .fg-toast {
245
- position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: 90%;
246
- padding: 8px 14px; border-radius: 8px; background: var(--fg-fg); color: var(--fg-bg); font-size: .95em; box-shadow: var(--fg-shadow);
247
- }
248
-
249
- /* ── editing ────────────────────────────────────────────────────────── */
250
- .fg-editor { position: absolute; z-index: 15; display: flex; background: var(--fg-bg); box-shadow: 0 0 0 2px var(--fg-focus), var(--fg-shadow); border-radius: 2px; }
251
- .fg-editor-control { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; padding: 0 var(--fg-cell-px); background: transparent; color: var(--fg-fg); font: inherit; }
252
- textarea.fg-editor-control { padding-top: 8px; resize: none; }
253
- .fg-editor-msg { position: absolute; left: -2px; top: 100%; margin-top: 4px; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #c2361f; color: #fff; font-size: .9em; }
254
- .fg-editor-msg:empty { display: none; }
255
- .fg-editor-invalid { box-shadow: 0 0 0 2px #c2361f, var(--fg-shadow); }
256
- .fg-cell-dirty { background-image: linear-gradient(225deg, var(--fg-dirty, #f2a900) 6px, transparent 6px); }
257
- .fg-row-created { box-shadow: inset 3px 0 0 var(--fg-accent); }
258
-
259
- /* ── v0.3: merge, pinned rows, status bar, fill handle, find, header wrap ── */
260
- .fg-cell-merged { z-index: 1; background: var(--fg-bg); align-items: flex-start; padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift, 0px)); border-bottom: 1px solid var(--fg-row-border); box-shadow: var(--fg-col-line, none); }
261
- .fg-row-odd .fg-cell-merged { background: var(--fg-bg); }
262
- .fg-cell-merged.fg-cell-merged-middle { align-items: center; padding-top: var(--fg-merge-shift, 0px); padding-bottom: var(--fg-merge-shift-bottom, 0px); }
263
- .fg-cell-merged.fg-cell-merged-bottom { align-items: flex-end; padding-top: var(--fg-merge-shift, 0px); padding-bottom: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift-bottom, 0px)); }
264
- .fg-cell-merge-hidden { visibility: hidden; }
265
- .fg-pinned-rows { display: flex; flex: none; background: var(--fg-bg); }
266
- .fg-pinned-top { border-bottom: 2px solid var(--fg-border); }
267
- .fg-pinned-bottom { border-top: 2px solid var(--fg-border); }
268
- .fg-section-pane { position: relative; overflow: hidden; flex: none; }
269
- .fg-section-pane-center { flex: 1 1 0; min-width: 0; }
270
- .fg-section-pane-left { border-right: 1px solid var(--fg-border); }
271
- .fg-section-pane-right { border-left: 1px solid var(--fg-border); }
272
- .fg-section-inner { position: relative; will-change: transform; }
273
- .fg-row-pinned, .fg-row-pinned:hover { background: var(--fg-row-odd); font-weight: 500; }
274
- .fg-statusbar { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 6px var(--fg-cell-px); border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-muted); font-size: .92em; white-space: nowrap; overflow: hidden; }
275
- .fg-status-aggs { color: var(--fg-fg); font-variant-numeric: tabular-nums; white-space: pre; }
276
- .fg-fill-handle { position: absolute; z-index: 16; width: 8px; height: 8px; background: var(--fg-accent); border: 1px solid var(--fg-bg); cursor: crosshair; }
277
- .fg-fill-preview { position: absolute; z-index: 15; border: 1px dashed var(--fg-accent); pointer-events: none; }
278
- .fg-cell-match { background: color-mix(in srgb, #f2a900 22%, transparent); }
279
- .fg-cell-match-current { background: #f2a900; color: #1a1300; }
280
- .fg-findbar { position: absolute; top: 6px; right: 18px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; background: var(--fg-popup-bg); border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow); }
281
- .fg-findbar .fg-input { width: 200px; height: 28px; }
282
- .fg-findbar-count { min-width: 56px; text-align: center; color: var(--fg-muted); font-size: .9em; font-variant-numeric: tabular-nums; }
283
- .fg-findbar-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-fg); cursor: pointer; }
284
- .fg-findbar-btn:hover { background: var(--fg-row-hover); }
285
- .fg-header-wrap .fg-header-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
286
-
287
- /* grouping, tree data, master/detail, row drag */
288
- .fg-group-panel {
289
- display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
290
- background: var(--fg-bg); border-bottom: 1px solid var(--fg-border); color: var(--fg-muted, #6b7280);
291
- }
292
- .fg-group-panel-over { background: var(--fg-row-hover); outline: 2px dashed var(--fg-accent); outline-offset: -4px; }
293
- .fg-group-hint { font-size: .92em; }
294
- .fg-group-chip {
295
- display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--fg-border);
296
- border-radius: 999px; background: var(--fg-header-bg); color: var(--fg-header-fg); cursor: grab; user-select: none;
297
- }
298
- .fg-group-chip.fg-dragging { opacity: .5; }
299
- .fg-group-chip-remove {
300
- width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
301
- font: inherit; line-height: 1; cursor: pointer;
302
- }
303
- .fg-group-chip-remove:hover { background: var(--fg-row-hover); }
304
- .fg-group-sep { opacity: .6; }
305
- .fg-row-group, .fg-row-group:hover { background: var(--fg-header-bg); font-weight: 600; }
306
- .fg-group-cell { overflow: visible; z-index: 1; padding-left: calc(4px + var(--fg-level, 0) * 16px); }
307
- .fg-group-label { white-space: nowrap; }
308
- .fg-cell-agg { color: var(--fg-header-fg); }
309
- .fg-group-toggle, .fg-tree-toggle, .fg-detail-toggle {
310
- display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: 4px;
311
- padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
312
- }
313
- .fg-group-toggle:hover, .fg-tree-toggle:hover, .fg-detail-toggle:hover { background: var(--fg-row-hover); }
314
- .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: transform .12s ease; }
315
- .fg-expanded svg { transform: rotate(90deg); }
316
- .fg-tree-spacer { display: inline-block; flex: none; width: 24px; }
317
- .fg-cell-lead { padding-left: calc(4px + var(--fg-level, 0) * 16px); }
318
- .fg-row-detail, .fg-row-detail:hover { background: var(--fg-bg); }
319
- .fg-detail {
320
- position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: auto; padding: 10px 14px;
321
- border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg);
322
- }
323
- .fg-cell-drag { justify-content: center; padding: 0; cursor: grab; }
324
- .fg-drag-handle { color: var(--fg-muted, #9aa1ad); cursor: grab; letter-spacing: -1px; user-select: none; }
325
- .fg-drag-handle.fg-drag-disabled { opacity: .35; cursor: not-allowed; }
326
- .fg-row-dragging, .fg-row-dragging * { cursor: grabbing !important; }
327
- .fg-row-drop-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); z-index: 6; pointer-events: none; }
328
- .fg-row-drop-marker.fg-row-drop-inside { background: color-mix(in srgb, var(--fg-accent) 8%, transparent); box-shadow: inset 0 0 0 2px var(--fg-accent); }
329
- @media (prefers-reduced-motion: reduce) { .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: none; } }
330
- .fg-tree-loading svg { animation: fg-spin .8s linear infinite; opacity: .6; }
331
- @keyframes fg-spin { to { transform: rotate(360deg); } }
332
- @media (prefers-reduced-motion: reduce) { .fg-tree-loading svg { animation: none; } }
333
-
334
- /* pagination and server rows */
335
- .fg-pager {
336
- display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 38px; padding: 4px 10px;
337
- border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-header-fg); font-variant-numeric: tabular-nums;
338
- }
339
- .fg-pager-spacer { flex: 1; }
340
- .fg-pager-size-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
341
- .fg-pager-size { font: inherit; color: var(--fg-fg); background: var(--fg-input-bg); border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px; }
342
- .fg-pager-page { padding: 0 8px; }
343
- .fg-pager-btn {
344
- min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px;
345
- background: transparent; color: inherit; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
346
- }
347
- .fg-pager-btn:hover:not(:disabled) { background: var(--fg-row-hover); border-color: var(--fg-border); }
348
- .fg-pager-btn:disabled { opacity: .35; cursor: default; }
349
- .fg-skeleton {
350
- display: block; width: 70%; height: .8em; border-radius: 4px;
351
- background: linear-gradient(90deg, var(--fg-row-border) 25%, var(--fg-border) 50%, var(--fg-row-border) 75%);
352
- background-size: 200% 100%; animation: fg-shimmer 1.2s ease-in-out infinite;
353
- }
354
- @keyframes fg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
355
- @media (prefers-reduced-motion: reduce) { .fg-skeleton { animation: none; } }
356
-
357
- /* filters tool panel */
358
- .fg-filters-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
359
- .fg-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--fg-border); }
360
- .fg-filters-title { font-weight: 600; }
361
- .fg-filters-clear { font-size: .9em; padding: 2px 8px; }
362
- .fg-filters-list { overflow: auto; flex: 1; }
363
- .fg-filters-item { border-bottom: 1px solid var(--fg-row-border); }
364
- .fg-filters-item > summary { padding: 7px 10px; cursor: pointer; list-style-position: inside; }
365
- .fg-filters-item > summary:hover { background: var(--fg-row-hover); }
366
- .fg-filters-item.fg-filter-on > summary { color: var(--fg-accent); font-weight: 600; }
367
- .fg-filters-item.fg-filter-on > summary::after { content: ' ●'; font-size: .7em; vertical-align: middle; }
368
- .fg-filters-item .fg-filter { border: 0; padding: 4px 10px 10px; }
369
-
370
- /* pivot panel */
371
- .fg-pivot-panel { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; padding: 8px 10px; }
372
- .fg-pivot-mode { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-weight: 600; border-bottom: 1px solid var(--fg-border); }
373
- .fg-pivot-zone { padding: 8px 0; border-bottom: 1px solid var(--fg-row-border); }
374
- .fg-pivot-zone-title { font-size: .9em; color: var(--fg-muted); margin-bottom: 6px; }
375
- .fg-pivot-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
376
- .fg-pivot-chips .fg-group-chip { cursor: default; }
377
- .fg-pivot-agg, .fg-pivot-add {
378
- font: inherit; font-size: .92em; color: var(--fg-fg); background: var(--fg-input-bg);
379
- border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px;
380
- }
381
- .fg-pivot-add { width: 100%; }
382
-
383
- /* charts */
384
- .fg-chart-panel {
385
- position: absolute; top: 12px; right: 12px; z-index: 20; width: min(640px, calc(100% - 24px));
386
- background: var(--fg-popup-bg); border: 1px solid var(--fg-border); border-radius: 8px; box-shadow: var(--fg-shadow);
387
- display: flex; flex-direction: column;
388
- }
389
- .fg-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fg-border); }
390
- .fg-chart-type {
391
- padding: 3px 8px; border: 1px solid var(--fg-border); border-radius: 999px; background: transparent;
392
- color: var(--fg-fg); font: inherit; font-size: .88em; cursor: pointer;
393
- }
394
- .fg-chart-type[aria-pressed="true"] { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
395
- .fg-chart-spacer { flex: 1; }
396
- .fg-chart-body { padding: 4px 8px 8px; }
397
- .fg-chart { display: block; width: 100%; height: auto; font: 11px var(--fg-font); color: var(--fg-fg); }
398
- .fg-chart text { fill: var(--fg-muted); }
399
- .fg-chart .fg-chart-title { fill: var(--fg-fg); font-size: 14px; font-weight: 600; }
400
- .fg-chart-grid { stroke: var(--fg-row-border); }
401
- .fg-chart-zero { stroke: var(--fg-border); stroke-width: 1.5; }
402
- .fg-chart-legend-item text { fill: var(--fg-fg); }
403
- .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: opacity .12s; }
404
- .fg-chart-plot:hover .fg-chart-bar:not(:hover), .fg-chart:hover .fg-chart-slice:not(:hover) { opacity: .55; }
405
- .fg-chart-slice { stroke: var(--fg-popup-bg, #fff); stroke-width: 1.5; }
406
- @media (prefers-reduced-motion: reduce) { .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: none; } }
407
-
408
- /* free-use badge (unlicensed company domains) */
409
- .fg-free-badge {
410
- position: absolute; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
411
- padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 23, 38, .15);
412
- box-shadow: 0 2px 8px rgba(14, 23, 38, .12); color: #0E1726; font: 600 11px/1.2 var(--fg-font); text-decoration: none; opacity: .9;
413
- }
414
- .fg-free-badge:hover { opacity: 1; }
415
- .fg-free-badge svg { flex: none; }
416
-
417
- /* column spans */
418
- .fg-cell-span-hidden { visibility: hidden; }
419
- .fg-cell-colspan { z-index: 1; background: inherit; }
420
-
421
- /* per-cell locks */
422
- .fg-cell-readonly { color: var(--fg-muted); background-image: linear-gradient(rgba(14, 23, 38, .025), rgba(14, 23, 38, .025)); }
423
- .fg-cell-select-locked .fg-checkbox { cursor: not-allowed; opacity: .45; }
424
-
425
- /* wrapped cells (autoRowHeight grows the row to fit) */
426
- .fg-cell-wrap { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
427
-
428
- /* right-to-left: mirror the grid area, then turn every cell back so text reads normally */
429
- /* the root keeps dir=rtl (side bar on the left); the grid inside is laid out ltr and mirrored */
430
- .fg-rtl .fg-main { transform: scaleX(-1); direction: ltr; }
431
- .fg-rtl .fg-cell, .fg-rtl .fg-header-cell, .fg-rtl .fg-statusbar, .fg-rtl .fg-pager, .fg-rtl .fg-group-panel,
432
- .fg-rtl .fg-overlay, .fg-rtl .fg-find, .fg-rtl .fg-chart-panel, .fg-rtl .fg-row-detail .fg-detail { transform: scaleX(-1); direction: rtl; }
433
- .fg-rtl .fg-sidebar { direction: rtl; border-left: 0; border-right: 1px solid var(--fg-border); }
434
-
435
- /* touch */
436
- .fg-body { touch-action: pan-x pan-y; }
437
- @media (pointer: coarse) {
438
- .fg-editor input, .fg-editor select, .fg-editor textarea { font-size: 16px; } /* no zoom-in on focus in mobile Safari */
439
- }
440
-
441
- /* card view for narrow screens */
442
- .fg-card-mode .fg-header, .fg-card-mode .fg-body, .fg-card-mode .fg-grid, .fg-card-mode .fg-summary, .fg-card-mode .fg-pinned-rows { display: none; }
443
- .fg-cards { flex: 1; min-height: 0; overflow: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
444
- .fg-cards-canvas { position: relative; }
445
- .fg-card {
446
- position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 10px 14px; overflow: hidden;
447
- border: 1px solid var(--fg-border); border-radius: 10px; background: var(--fg-bg); box-shadow: 0 1px 2px rgba(14, 23, 38, .06);
448
- }
449
- .fg-card-selected { border-color: var(--fg-accent); background: var(--fg-row-selected); }
450
- .fg-card-other { background: var(--fg-header-bg); font-weight: 600; display: flex; align-items: center; }
451
- .fg-card-head { display: flex; align-items: center; gap: 8px; height: var(--fg-card-line, 27px); color: var(--fg-muted); font-size: .92em; }
452
- .fg-card-line { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 10px; align-items: center; height: var(--fg-card-line, 27px); }
453
- .fg-card-label { color: var(--fg-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
454
- .fg-card-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
455
-
456
- /* row numbers */
457
- .fg-cell-rownum, .fg-header-rownum { justify-content: center; color: var(--fg-muted); font-variant-numeric: tabular-nums; cursor: default; }
458
- .fg-cell-rownum { background: var(--fg-header-bg); }
459
-
460
- /* filter row */
461
- .fg-filter-row { position: relative; border-top: 1px solid var(--fg-border); will-change: transform; }
462
- .fg-filter-cell { position: absolute; top: 0; box-sizing: border-box; display: flex; align-items: center; padding: 3px 4px; border-right: 1px solid var(--fg-border); }
463
- .fg-filter-input { width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--fg-border); border-radius: 4px; padding: 0 6px; background: var(--fg-bg); color: var(--fg-fg); font: inherit; font-size: .92em; }
464
- .fg-filter-input:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
465
- .fg-filter-input::placeholder { color: var(--fg-muted); opacity: .7; }
466
- .fg-filter-active .fg-filter-input { border-color: var(--fg-accent); }
467
- .fg-filter-bad.fg-filter-input { border-color: #dc2626; }
468
- .fg-rtl .fg-filter-cell { transform: scaleX(-1); direction: rtl; }
469
-
470
- /* tooltips */
471
- .fg-tooltip { position: fixed; z-index: 1000; max-width: 360px; padding: 6px 9px; border-radius: 6px; background: #1f2430; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
472
- .fg-tooltip.fg-theme-dark { background: #e6e9f0; color: #11141b; }
473
-
474
- /* cells changed by applyTransaction */
475
- .fg-cell-flash { animation: fg-flash var(--fg-flash-duration, 1s) ease-out; }
476
- @keyframes fg-flash { from { background: color-mix(in srgb, var(--fg-accent) 35%, transparent); } to { background: transparent; } }
477
- .fg-cell-flash-up { animation-name: fg-flash-up; }
478
- .fg-cell-flash-down { animation-name: fg-flash-down; }
479
- @keyframes fg-flash-up { from { background: color-mix(in srgb, var(--fg-up, #16a34a) 32%, transparent); } to { background: transparent; } }
480
- @keyframes fg-flash-down { from { background: color-mix(in srgb, var(--fg-down, #dc2626) 32%, transparent); } to { background: transparent; } }
481
- @media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; }
482
- .fg-cell-flash-up { outline-color: var(--fg-up, #16a34a); }
483
- .fg-cell-flash-down { outline-color: var(--fg-down, #dc2626); } }
484
-
485
- /* editType 'row': the row being edited */
486
- .fg-row-editing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg-accent) 45%, transparent); background: color-mix(in srgb, var(--fg-accent) 5%, var(--fg-bg)); }
487
-
488
- /* collapsible column groups */
489
- .fg-colgroup-toggle { margin-left: 6px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--fg-border); border-radius: 4px; background: var(--fg-bg); color: var(--fg-muted); font: 600 12px/1 var(--fg-font); cursor: pointer; flex: none; }
490
- .fg-colgroup-toggle:hover { color: var(--fg-fg); border-color: var(--fg-muted); }
491
-
492
- /* two conditions in a column filter */
493
- .fg-filter-cond { display: flex; flex-direction: column; gap: 6px; }
494
- .fg-filter-join { display: flex; gap: 14px; padding: 2px 2px 0; font-size: .92em; color: var(--fg-muted); }
495
- .fg-filter-join label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
496
-
497
- /* autoHeight: grow with the rows */
498
- .fg-root.fg-auto-height { height: auto; }
499
- .fg-auto-height .fg-main, .fg-auto-height .fg-grid { flex: none; }
500
- .fg-auto-height .fg-body { flex: none; min-height: 0; }
501
- .fg-auto-height .fg-body-pane-center { overflow-y: hidden; }
502
-
503
- .fg-sparkline { display: block; overflow: visible; }
504
-
505
- .fg-overlay.fg-overlay-custom { pointer-events: auto; }
506
-
507
- /* density */
508
- .fg-density-compact { --fg-cell-px: 7px; }
509
- .fg-density-comfortable { --fg-cell-px: 14px; }
510
-
511
- /* conditional formats */
512
- .fg-cf-bar { background-image: linear-gradient(to right, transparent var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-to), transparent var(--fg-bar-to)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
513
- .fg-cf-icon { display: inline-block; margin-inline-end: 6px; font-size: .9em; line-height: 1; }
514
- .fg-cf-dialog { width: 340px; }
515
- .fg-cf-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
516
- .fg-cf-rule { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid var(--fg-border); border-radius: 6px; }
517
- .fg-cf-rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
518
- .fg-cf-sample { flex: none; width: 34px; height: 18px; border-radius: 4px; border: 1px solid var(--fg-border); display: grid; place-items: center; font-size: 11px; }
519
- .fg-cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
520
- .fg-cf-form > .fg-cf-wide { grid-column: 1 / -1; }
521
- .fg-cf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
522
- .fg-cf-swatch { width: 30px; height: 22px; border-radius: 5px; border: 1px solid var(--fg-border); cursor: pointer; font: 600 11px/1 var(--fg-font); padding: 0; }
523
- .fg-cf-swatch[aria-pressed="true"] { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
524
- .fg-cf-empty { color: var(--fg-muted); padding: 4px 0; }
525
-
526
- /* AI assistant */
527
- .fg-ai-panel { width: 360px; display: flex; flex-direction: column; gap: 8px; }
528
- .fg-ai-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
529
- .fg-ai-log:empty { display: none; }
530
- .fg-ai-msg { padding: 7px 10px; border-radius: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
531
- .fg-ai-user { align-self: flex-end; background: var(--fg-accent); color: var(--fg-accent-fg); border-bottom-right-radius: 3px; }
532
- .fg-ai-ai { align-self: flex-start; background: var(--fg-header-bg); border: 1px solid var(--fg-border); border-bottom-left-radius: 3px; }
533
- .fg-ai-error { align-self: flex-start; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
534
- .fg-ai-wait { color: var(--fg-muted); }
535
- .fg-ai-note { margin-top: 4px; font-size: .9em; color: var(--fg-muted); }
536
- .fg-ai-undo { margin-top: 6px; height: 24px; padding: 0 10px; }
537
- .fg-ai-form { display: flex; gap: 6px; align-items: flex-end; }
538
- .fg-ai-input { flex: 1; resize: vertical; min-height: 40px; max-height: 140px; padding: 6px 8px; font: inherit; }
539
- .fg-ai-tips { display: flex; flex-wrap: wrap; gap: 6px; }
540
- .fg-ai-tip { border: 1px solid var(--fg-border); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .92em; padding: 3px 10px; cursor: pointer; }
541
- .fg-ai-tip:hover { background: var(--fg-row-hover); }
1
+ [class*="fg-theme-"] {
2
+ --fg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans", sans-serif;
3
+ --fg-font-size: 13px;
4
+ --fg-radius: 8px;
5
+ --fg-cell-px: 12px;
6
+ --fg-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
7
+ }
8
+ .fg-theme-light {
9
+ --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #636b7c;
10
+ --fg-header-bg: #f6f7f9; --fg-header-fg: #39404f; --fg-border: #e3e6eb; --fg-row-border: #eef0f3;
11
+ --fg-row-odd: #fbfbfc; --fg-row-hover: #f2f6ff; --fg-row-selected: #e3edff;
12
+ --fg-accent: #2563eb; --fg-accent-fg: #ffffff; --fg-focus: #2563eb; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
13
+ }
14
+ .fg-theme-dark {
15
+ --fg-bg: #11141b; --fg-fg: #e6e9f0; --fg-muted: #8c95a8;
16
+ --fg-header-bg: #171b24; --fg-header-fg: #c9cfdc; --fg-border: #262c38; --fg-row-border: #1c212b;
17
+ --fg-row-odd: #13171f; --fg-row-hover: #1a2233; --fg-row-selected: #1d3157;
18
+ --fg-accent: #4f8cff; --fg-accent-fg: #0b0d12; --fg-focus: #4f8cff; --fg-popup-bg: #171b24; --fg-input-bg: #0f1218;
19
+ --fg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
20
+ color-scheme: dark;
21
+ }
22
+ .fg-root {
23
+ position: relative; display: flex; flex-direction: row; box-sizing: border-box;
24
+ width: 100%; height: 100%; overflow: hidden; outline: none;
25
+ font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-bg);
26
+ border: 1px solid var(--fg-border); border-radius: var(--fg-radius);
27
+ border-top: var(--fg-top-border, 1px solid var(--fg-border));
28
+ font-variant-numeric: tabular-nums;
29
+ }
30
+ .fg-root *, .fg-menu * { box-sizing: border-box; }
31
+ .fg-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
32
+ .fg-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
33
+ .fg-root [hidden], .fg-menu [hidden] { display: none !important; }
34
+ .fg-header { display: flex; flex: none; background: var(--fg-header-bg); color: var(--fg-header-fg); border-bottom: var(--fg-header-border, 1px solid var(--fg-border)); }
35
+ .fg-header-pane { position: relative; overflow: hidden; flex: none; }
36
+ .fg-header-pane-center { flex: 1 1 0; min-width: 0; }
37
+ .fg-header-pane-left { border-right: 1px solid var(--fg-border); }
38
+ .fg-header-pane-right { border-left: 1px solid var(--fg-border); }
39
+ .fg-header-inner { position: relative; will-change: transform; }
40
+ .fg-header-cell {
41
+ position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 var(--fg-cell-px);
42
+ font-weight: var(--fg-header-weight, 600); white-space: nowrap; overflow: hidden; user-select: none;
43
+ box-shadow: inset -1px -1px 0 var(--fg-header-line, var(--fg-row-border));
44
+ }
45
+ .fg-header-group { justify-content: center; }
46
+ .fg-header-cell.fg-sortable { cursor: pointer; }
47
+ .fg-header-cell.fg-align-right { flex-direction: row-reverse; }
48
+ .fg-header-cell.fg-align-center { justify-content: center; }
49
+ /* the label takes the free space (the menu button's auto margin would otherwise push it to the start) */
50
+ .fg-header-cell.fg-align-center .fg-header-label { flex: 1 1 auto; text-align: center; }
51
+ .fg-header-label { overflow: hidden; text-overflow: ellipsis; flex: var(--fg-header-label-flex, 0 1 auto); text-align: var(--fg-header-text-align, left); }
52
+ .fg-sort-icon { color: var(--fg-accent); font-size: 12px; }
53
+ .fg-sort-icon sup { font-size: 9px; margin-left: 1px; }
54
+ .fg-menu-btn {
55
+ margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
56
+ border: 0; border-radius: 5px; background: none; color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s;
57
+ }
58
+ .fg-header-cell.fg-align-right .fg-menu-btn { margin-left: 0; margin-right: auto; }
59
+ .fg-header-cell:hover .fg-menu-btn, .fg-menu-btn.fg-filter-active { opacity: 1; }
60
+ .fg-menu-btn:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
61
+ .fg-menu-btn.fg-filter-active { color: var(--fg-accent); }
62
+ .fg-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
63
+ .fg-resize:hover, .fg-resizing .fg-resize:active { background: linear-gradient(90deg, transparent 5px, var(--fg-accent) 5px, var(--fg-accent) 8px); }
64
+ .fg-resizing { cursor: col-resize; user-select: none; }
65
+ .fg-header-cell.fg-dragging { opacity: .45; }
66
+ .fg-drop-marker { position: absolute; top: 0; width: 2px; background: var(--fg-accent); z-index: 5; pointer-events: none; }
67
+ .fg-drag-ghost {
68
+ position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; padding: 6px 10px; border-radius: 6px;
69
+ font: 600 var(--fg-font-size) var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg); box-shadow: var(--fg-shadow);
70
+ }
71
+ .fg-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
72
+ .fg-body-pane { position: relative; overflow: hidden; flex: none; }
73
+ .fg-body-pane-center { flex: 1 1 0; min-width: 0; overflow: auto; }
74
+ .fg-body-pane-left { border-right: 1px solid var(--fg-border); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
75
+ .fg-body-pane-right { border-left: 1px solid var(--fg-border); box-shadow: -4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
76
+ /* isolation: the z-index of rows drawing merged blocks stays inside the canvas (below the editor, fill handle, overlays) */
77
+ .fg-canvas { position: relative; isolation: isolate; }
78
+ .fg-row { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg); }
79
+ .fg-row-odd { background: var(--fg-row-odd); }
80
+ .fg-row:hover { background: var(--fg-row-hover); }
81
+ .fg-row-selected, .fg-row-selected:hover { background: var(--fg-row-selected); }
82
+ .fg-cell {
83
+ position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 var(--fg-cell-px);
84
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
85
+ box-shadow: var(--fg-col-line, none);
86
+ }
87
+ .fg-cell.fg-align-right { justify-content: flex-end; }
88
+ .fg-cell.fg-align-center { justify-content: center; }
89
+ .fg-cell-focused { outline: 2px solid var(--fg-focus); outline-offset: -2px; border-radius: 2px; }
90
+ .fg-cell-select, .fg-header-select { justify-content: center; padding: 0; }
91
+ .fg-checkbox { width: 15px; height: 15px; margin: 0; accent-color: var(--fg-accent); cursor: pointer; }
92
+ .fg-summary { display: flex; flex: none; background: var(--fg-header-bg); font-weight: 600; }
93
+ .fg-summary-top { border-bottom: 1px solid var(--fg-border); }
94
+ .fg-summary-bottom { border-top: 1px solid var(--fg-border); }
95
+ .fg-summary-pane { position: relative; overflow: hidden; flex: none; }
96
+ .fg-summary-pane-center { flex: 1 1 0; min-width: 0; }
97
+ .fg-summary-pane-left { border-right: 1px solid var(--fg-border); }
98
+ .fg-summary-pane-right { border-left: 1px solid var(--fg-border); }
99
+ .fg-summary-inner { position: relative; will-change: transform; }
100
+ .fg-summary-row, .fg-summary-row:hover { background: var(--fg-header-bg); font-weight: 600; }
101
+ .fg-summary-label { color: var(--fg-muted); }
102
+ .fg-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; color: var(--fg-muted); pointer-events: none; }
103
+ .fg-menu {
104
+ position: fixed; z-index: 10000; width: 248px; padding: 6px; border-radius: 10px; overflow: auto; overscroll-behavior: contain;
105
+ font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg);
106
+ border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow);
107
+ }
108
+ .fg-menu-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
109
+ .fg-menu-section + .fg-menu-section { border-top: 1px solid var(--fg-border); }
110
+ .fg-menu-item { text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
111
+ .fg-menu-item:hover, .fg-menu-item:focus-visible { background: var(--fg-row-hover); outline: none; }
112
+ .fg-menu-title { padding: 4px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
113
+ .fg-filter { gap: 6px; padding: 6px 4px; }
114
+ .fg-input, .fg-filter-op {
115
+ width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--fg-border); border-radius: 6px;
116
+ background: var(--fg-input-bg); color: inherit; font: inherit;
117
+ }
118
+ .fg-input:focus, .fg-filter-op:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
119
+ /* every select in the grid, its menus and dialogs: a drawn chevron with room on the right */
120
+ .fg-root select:not([multiple]):not([size]), .fg-menu select:not([multiple]):not([size]) {
121
+ appearance: none; -webkit-appearance: none; padding-right: 26px;
122
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
123
+ background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
124
+ }
125
+ .fg-set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
126
+ .fg-set-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
127
+ .fg-set-item:hover { background: var(--fg-row-hover); }
128
+ .fg-set-all { font-weight: 600; }
129
+ .fg-set-more { padding: 4px 6px; color: var(--fg-muted); }
130
+ .fg-menu-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
131
+ .fg-btn { height: 28px; padding: 0 12px; border: 1px solid var(--fg-border); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
132
+ .fg-btn:hover { background: var(--fg-row-hover); }
133
+ .fg-btn-primary { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
134
+ .fg-btn-primary:hover { background: var(--fg-accent); filter: brightness(1.08); }
135
+ .fg-sidebar { display: flex; flex: none; border-left: 1px solid var(--fg-border); background: var(--fg-header-bg); }
136
+ .fg-sidebar-panel { width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--fg-border); background: var(--fg-bg); }
137
+ .fg-sidebar-tabs { width: 28px; display: flex; flex-direction: column; }
138
+ .fg-sidebar-tab {
139
+ writing-mode: vertical-rl; padding: 12px 0; border: 0; background: none; color: var(--fg-header-fg);
140
+ font: 600 var(--fg-font-size) var(--fg-font); cursor: pointer;
141
+ }
142
+ .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset 2px 0 var(--fg-accent); }
143
+ .fg-sidebar-open .fg-sidebar-tabs { width: 32px; gap: 4px; padding: 8px 4px 8px 0; }
144
+ .fg-sidebar-open .fg-sidebar-tab {
145
+ position: relative; margin-left: -1px; padding: 14px 0; border: 1px solid var(--fg-border); border-left-color: transparent;
146
+ border-radius: 0 7px 7px 0; background: var(--fg-header-bg); color: var(--fg-muted);
147
+ }
148
+ .fg-sidebar-open .fg-sidebar-tab:hover { color: var(--fg-header-fg); background: var(--fg-row-hover); }
149
+ .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] {
150
+ background: var(--fg-bg); color: var(--fg-accent); border-left-color: var(--fg-bg); box-shadow: inset -3px 0 var(--fg-accent); z-index: 1;
151
+ }
152
+ .fg-sidebar-open .fg-sidebar-tab:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
153
+ .fg-chooser { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; flex: 1; }
154
+ .fg-chooser-dialog { width: 280px; }
155
+ .fg-chooser-dialog .fg-chooser { max-height: 420px; }
156
+ .fg-chooser-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 0; }
157
+ .fg-chooser-close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font-size: 18px; cursor: pointer; }
158
+ .fg-chooser-close:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
159
+ .fg-chooser-all { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 600; cursor: pointer; }
160
+ .fg-chooser-list { position: relative; overflow: auto; flex: 1; min-height: 0; }
161
+ .fg-chooser-item { display: flex; align-items: center; gap: 6px; height: 28px; padding-right: 6px; border-radius: 6px; white-space: nowrap; }
162
+ .fg-chooser-item:hover { background: var(--fg-row-hover); }
163
+ .fg-chooser-item.fg-dragging { opacity: .45; }
164
+ .fg-chooser-group > .fg-chooser-label { font-weight: 600; }
165
+ .fg-chooser-handle { color: var(--fg-muted); cursor: grab; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; }
166
+ .fg-chooser-caret { width: 16px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; }
167
+ .fg-chooser-label { overflow: hidden; text-overflow: ellipsis; }
168
+ .fg-chooser-pin { margin-left: auto; color: var(--fg-muted); font-size: 11px; }
169
+ .fg-chooser-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); pointer-events: none; }
170
+
171
+ /* 심플형: white everywhere, no zebra stripes, hairline row rules, quiet header (works well with merged cells) */
172
+ .fg-theme-simple {
173
+ --fg-radius: 6px; --fg-bg: #ffffff; --fg-fg: #222831; --fg-muted: #7b8290;
174
+ --fg-header-bg: #ffffff; --fg-header-fg: #5b6270; --fg-header-weight: 600;
175
+ --fg-border: #e6e8ec; --fg-row-border: #f0f1f4;
176
+ --fg-row-odd: #ffffff; --fg-row-hover: #f7f8fa; --fg-row-selected: #eef4ff;
177
+ --fg-accent: #3b6fe0; --fg-accent-fg: #ffffff; --fg-focus: #3b6fe0; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
178
+ --fg-header-border: 1px solid #e6e8ec; --fg-header-line: transparent;
179
+ }
180
+
181
+ /* ── Korean-style themes: simple lines, centered headers ─────────────────── */
182
+ .fg-theme-board, .fg-theme-erp, .fg-theme-excel, .fg-theme-classic {
183
+ --fg-font: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
184
+ --fg-header-label-flex: 1 1 auto; --fg-header-text-align: center;
185
+ --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff; --fg-accent-fg: #ffffff; --fg-shadow: 0 8px 24px rgba(0, 0, 0, .14);
186
+ }
187
+ /* 게시판형: thick top rule, light grey header, horizontal lines only */
188
+ .fg-theme-board {
189
+ --fg-radius: 0; --fg-bg: #ffffff; --fg-fg: #222222; --fg-muted: #767676;
190
+ --fg-header-bg: #f7f7f7; --fg-header-fg: #222222; --fg-border: #dddddd; --fg-row-border: #e5e5e5;
191
+ --fg-row-odd: #ffffff; --fg-row-hover: #f6f8fb; --fg-row-selected: #eef3fc;
192
+ --fg-accent: #1f5bd6; --fg-focus: #1f5bd6;
193
+ --fg-top-border: 2px solid #222222; --fg-header-border: 1px solid #bbbbbb; --fg-header-line: transparent;
194
+ }
195
+ .fg-theme-board.fg-root { border-left: 0; border-right: 0; }
196
+ /* 관리자·ERP형: every cell bordered, blue-grey header, compact */
197
+ .fg-theme-erp {
198
+ --fg-font-size: 12px; --fg-radius: 2px; --fg-cell-px: 8px;
199
+ --fg-bg: #ffffff; --fg-fg: #333333; --fg-muted: #7a8494;
200
+ --fg-header-bg: #eef2f7; --fg-header-fg: #2b3442; --fg-border: #c5ceda; --fg-row-border: #dde3eb;
201
+ --fg-row-odd: #fafbfd; --fg-row-hover: #eef5ff; --fg-row-selected: #fff6d5;
202
+ --fg-accent: #2f6fde; --fg-focus: #2f6fde;
203
+ --fg-col-line: inset -1px 0 #dde3eb; --fg-header-line: #c5ceda;
204
+ }
205
+ /* 엑셀형: gridlines, plain grey header, green focus */
206
+ .fg-theme-excel {
207
+ --fg-radius: 0; --fg-cell-px: 8px;
208
+ --fg-bg: #ffffff; --fg-fg: #1f1f1f; --fg-muted: #6e6e6e;
209
+ --fg-header-bg: #f3f3f3; --fg-header-fg: #444444; --fg-header-weight: 500;
210
+ --fg-border: #d4d4d4; --fg-row-border: #e2e2e2;
211
+ --fg-row-odd: #ffffff; --fg-row-hover: #f7f7f7; --fg-row-selected: #e6f2ea;
212
+ --fg-accent: #107c41; --fg-focus: #107c41;
213
+ --fg-col-line: inset -1px 0 #e2e2e2; --fg-header-line: #d4d4d4;
214
+ }
215
+ /* 진한 헤더형: calm navy header with white text */
216
+ .fg-theme-classic {
217
+ --fg-radius: 4px; --fg-bg: #ffffff; --fg-fg: #2a2f37; --fg-muted: #6b7380;
218
+ --fg-header-bg: #3d4b63; --fg-header-fg: #ffffff; --fg-border: #cfd5de; --fg-row-border: #e3e7ed;
219
+ --fg-row-odd: #f8f9fb; --fg-row-hover: #eef2f8; --fg-row-selected: #e2e9f5;
220
+ --fg-accent: #3d4b63; --fg-focus: #3d6bb3;
221
+ --fg-col-line: inset -1px 0 #e3e7ed; --fg-header-line: #56657e;
222
+ }
223
+ .fg-theme-classic .fg-menu-btn { color: #c9d2e0; }
224
+ .fg-theme-classic .fg-menu-btn:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
225
+ .fg-theme-classic .fg-sort-icon, .fg-theme-classic .fg-menu-btn.fg-filter-active { color: #ffd166; }
226
+ .fg-theme-classic .fg-sidebar-tab { color: #c9d2e0; }
227
+ .fg-theme-classic .fg-sidebar-tab[aria-expanded="true"] { color: #ffd166; box-shadow: inset 2px 0 #ffd166; }
228
+ .fg-theme-classic .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset -3px 0 var(--fg-accent); }
229
+ .fg-theme-board .fg-header-cell, .fg-theme-erp .fg-header-cell, .fg-theme-excel .fg-header-cell, .fg-theme-classic .fg-header-cell { flex-direction: row; justify-content: center; }
230
+ .fg-theme-board .fg-menu-btn, .fg-theme-erp .fg-menu-btn, .fg-theme-excel .fg-menu-btn, .fg-theme-classic .fg-menu-btn {
231
+ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
232
+ }
233
+ .fg-theme-board .fg-header-label, .fg-theme-erp .fg-header-label, .fg-theme-excel .fg-header-label, .fg-theme-classic .fg-header-label { flex: 0 1 auto; }
234
+
235
+ /* ── cell ranges, context menu, toast ───────────────────────────────── */
236
+ .fg-cell-range { background: var(--fg-range-bg, color-mix(in srgb, var(--fg-accent) 13%, transparent)); }
237
+ .fg-range-dragging, .fg-range-dragging * { user-select: none; cursor: cell; }
238
+ .fg-context-menu { width: 236px; }
239
+ .fg-cm-item { display: flex; align-items: center; gap: 12px; width: 100%; }
240
+ .fg-cm-item:disabled { opacity: .45; cursor: default; background: none; }
241
+ .fg-cm-label { flex: 1; }
242
+ .fg-cm-shortcut { color: var(--fg-muted); font-size: .9em; }
243
+ .fg-cm-sep { height: 1px; margin: 4px 2px; background: var(--fg-border); }
244
+ .fg-toast {
245
+ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: 90%;
246
+ padding: 8px 14px; border-radius: 8px; background: var(--fg-fg); color: var(--fg-bg); font-size: .95em; box-shadow: var(--fg-shadow);
247
+ }
248
+
249
+ /* ── editing ────────────────────────────────────────────────────────── */
250
+ .fg-editor { position: absolute; z-index: 15; display: flex; background: var(--fg-bg); box-shadow: 0 0 0 2px var(--fg-focus), var(--fg-shadow); border-radius: 2px; }
251
+ .fg-editor-control { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; padding: 0 var(--fg-cell-px); background: transparent; color: var(--fg-fg); font: inherit; }
252
+ textarea.fg-editor-control { padding-top: 8px; resize: none; }
253
+ .fg-editor-msg { position: absolute; left: -2px; top: 100%; margin-top: 4px; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #c2361f; color: #fff; font-size: .9em; }
254
+ .fg-editor-msg:empty { display: none; }
255
+ .fg-editor-invalid { box-shadow: 0 0 0 2px #c2361f, var(--fg-shadow); }
256
+ .fg-cell-dirty { background-image: linear-gradient(225deg, var(--fg-dirty, #f2a900) 6px, transparent 6px); }
257
+ .fg-row-created { box-shadow: inset 3px 0 0 var(--fg-accent); }
258
+
259
+ /* ── v0.3: merge, pinned rows, status bar, fill handle, find, header wrap ── */
260
+ .fg-cell-merged { z-index: 1; background: var(--fg-bg); align-items: flex-start; padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift, 0px)); border-bottom: 1px solid var(--fg-row-border); box-shadow: var(--fg-col-line, none); }
261
+ .fg-row-odd .fg-cell-merged { background: var(--fg-bg); }
262
+ .fg-cell-merged.fg-cell-merged-middle { align-items: center; padding-top: var(--fg-merge-shift, 0px); padding-bottom: var(--fg-merge-shift-bottom, 0px); }
263
+ .fg-cell-merged.fg-cell-merged-bottom { align-items: flex-end; padding-top: var(--fg-merge-shift, 0px); padding-bottom: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift-bottom, 0px)); }
264
+ .fg-cell-merge-hidden { visibility: hidden; }
265
+ .fg-cell-select.fg-cell-merged { padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 15px) / 2 + var(--fg-merge-shift, 0px)); }
266
+ .fg-pinned-rows { display: flex; flex: none; background: var(--fg-bg); }
267
+ .fg-pinned-top { border-bottom: 2px solid var(--fg-border); }
268
+ .fg-pinned-bottom { border-top: 2px solid var(--fg-border); }
269
+ .fg-section-pane { position: relative; overflow: hidden; flex: none; }
270
+ .fg-section-pane-center { flex: 1 1 0; min-width: 0; }
271
+ .fg-section-pane-left { border-right: 1px solid var(--fg-border); }
272
+ .fg-section-pane-right { border-left: 1px solid var(--fg-border); }
273
+ .fg-section-inner { position: relative; will-change: transform; }
274
+ .fg-row-pinned, .fg-row-pinned:hover { background: var(--fg-row-odd); font-weight: 500; }
275
+ .fg-statusbar { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 6px var(--fg-cell-px); border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-muted); font-size: .92em; white-space: nowrap; overflow: hidden; }
276
+ .fg-status-aggs { color: var(--fg-fg); font-variant-numeric: tabular-nums; white-space: pre; }
277
+ .fg-fill-handle { position: absolute; z-index: 16; width: 8px; height: 8px; background: var(--fg-accent); border: 1px solid var(--fg-bg); cursor: crosshair; }
278
+ .fg-fill-preview { position: absolute; z-index: 15; border: 1px dashed var(--fg-accent); pointer-events: none; }
279
+ .fg-cell-match { background: color-mix(in srgb, #f2a900 22%, transparent); }
280
+ .fg-cell-match-current { background: #f2a900; color: #1a1300; }
281
+ .fg-findbar { position: absolute; top: 6px; right: 18px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; background: var(--fg-popup-bg); border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow); }
282
+ .fg-findbar .fg-input { width: 200px; height: 28px; }
283
+ .fg-findbar-count { min-width: 56px; text-align: center; color: var(--fg-muted); font-size: .9em; font-variant-numeric: tabular-nums; }
284
+ .fg-findbar-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-fg); cursor: pointer; }
285
+ .fg-findbar-btn:hover { background: var(--fg-row-hover); }
286
+ .fg-header-wrap .fg-header-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
287
+
288
+ /* grouping, tree data, master/detail, row drag */
289
+ .fg-group-panel {
290
+ display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
291
+ background: var(--fg-bg); border-bottom: 1px solid var(--fg-border); color: var(--fg-muted, #6b7280);
292
+ }
293
+ .fg-group-panel-over { background: var(--fg-row-hover); outline: 2px dashed var(--fg-accent); outline-offset: -4px; }
294
+ .fg-group-hint { font-size: .92em; }
295
+ .fg-group-chip {
296
+ display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--fg-border);
297
+ border-radius: 999px; background: var(--fg-header-bg); color: var(--fg-header-fg); cursor: grab; user-select: none;
298
+ }
299
+ .fg-group-chip.fg-dragging { opacity: .5; }
300
+ .fg-group-chip-remove {
301
+ width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
302
+ font: inherit; line-height: 1; cursor: pointer;
303
+ }
304
+ .fg-group-chip-remove:hover { background: var(--fg-row-hover); }
305
+ .fg-group-sep { opacity: .6; }
306
+ .fg-row-group, .fg-row-group:hover { background: var(--fg-header-bg); font-weight: 600; }
307
+ .fg-group-cell { overflow: visible; z-index: 1; padding-left: calc(4px + var(--fg-level, 0) * 16px); }
308
+ .fg-group-label { white-space: nowrap; }
309
+ .fg-cell-agg { color: var(--fg-header-fg); }
310
+ .fg-group-toggle, .fg-tree-toggle, .fg-detail-toggle {
311
+ display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: 4px;
312
+ padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
313
+ }
314
+ .fg-group-toggle:hover, .fg-tree-toggle:hover, .fg-detail-toggle:hover { background: var(--fg-row-hover); }
315
+ .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: transform .12s ease; }
316
+ .fg-expanded svg { transform: rotate(90deg); }
317
+ .fg-tree-spacer { display: inline-block; flex: none; width: 24px; }
318
+ .fg-cell-lead { padding-left: calc(4px + var(--fg-level, 0) * 16px); }
319
+ .fg-row-detail, .fg-row-detail:hover { background: var(--fg-bg); }
320
+ .fg-detail {
321
+ position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: auto; padding: 10px 14px;
322
+ border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg);
323
+ }
324
+ .fg-cell-drag { justify-content: center; padding: 0; cursor: grab; }
325
+ .fg-drag-handle { color: var(--fg-muted, #9aa1ad); cursor: grab; letter-spacing: -1px; user-select: none; }
326
+ .fg-drag-handle.fg-drag-disabled { opacity: .35; cursor: not-allowed; }
327
+ .fg-row-dragging, .fg-row-dragging * { cursor: grabbing !important; }
328
+ .fg-row-drop-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); z-index: 6; pointer-events: none; }
329
+ .fg-row-drop-marker.fg-row-drop-inside { background: color-mix(in srgb, var(--fg-accent) 8%, transparent); box-shadow: inset 0 0 0 2px var(--fg-accent); }
330
+ @media (prefers-reduced-motion: reduce) { .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: none; } }
331
+ .fg-tree-loading svg { animation: fg-spin .8s linear infinite; opacity: .6; }
332
+ @keyframes fg-spin { to { transform: rotate(360deg); } }
333
+ @media (prefers-reduced-motion: reduce) { .fg-tree-loading svg { animation: none; } }
334
+
335
+ /* pagination and server rows */
336
+ .fg-pager {
337
+ display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 38px; padding: 4px 10px;
338
+ border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-header-fg); font-variant-numeric: tabular-nums;
339
+ }
340
+ .fg-pager-spacer { flex: 1; }
341
+ .fg-pager-size-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
342
+ .fg-pager-size { font: inherit; color: var(--fg-fg); background: var(--fg-input-bg); border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px; }
343
+ .fg-pager-page { padding: 0 8px; }
344
+ .fg-pager-btn {
345
+ min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px;
346
+ background: transparent; color: inherit; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
347
+ }
348
+ .fg-pager-btn:hover:not(:disabled) { background: var(--fg-row-hover); border-color: var(--fg-border); }
349
+ .fg-pager-btn:disabled { opacity: .35; cursor: default; }
350
+ .fg-skeleton {
351
+ display: block; width: 70%; height: .8em; border-radius: 4px;
352
+ background: linear-gradient(90deg, var(--fg-row-border) 25%, var(--fg-border) 50%, var(--fg-row-border) 75%);
353
+ background-size: 200% 100%; animation: fg-shimmer 1.2s ease-in-out infinite;
354
+ }
355
+ @keyframes fg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
356
+ @media (prefers-reduced-motion: reduce) { .fg-skeleton { animation: none; } }
357
+
358
+ /* filters tool panel */
359
+ .fg-filters-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
360
+ .fg-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--fg-border); }
361
+ .fg-filters-title { font-weight: 600; }
362
+ .fg-filters-clear { font-size: .9em; padding: 2px 8px; }
363
+ .fg-filters-list { overflow: auto; flex: 1; }
364
+ .fg-filters-item { border-bottom: 1px solid var(--fg-row-border); }
365
+ .fg-filters-item > summary { padding: 7px 10px; cursor: pointer; list-style-position: inside; }
366
+ .fg-filters-item > summary:hover { background: var(--fg-row-hover); }
367
+ .fg-filters-item.fg-filter-on > summary { color: var(--fg-accent); font-weight: 600; }
368
+ .fg-filters-item.fg-filter-on > summary::after { content: ' ●'; font-size: .7em; vertical-align: middle; }
369
+ .fg-filters-item .fg-filter { border: 0; padding: 4px 10px 10px; }
370
+
371
+ /* pivot panel */
372
+ .fg-pivot-panel { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; padding: 8px 10px; }
373
+ .fg-pivot-mode { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-weight: 600; border-bottom: 1px solid var(--fg-border); }
374
+ .fg-pivot-zone { padding: 8px 0; border-bottom: 1px solid var(--fg-row-border); }
375
+ .fg-pivot-zone-title { font-size: .9em; color: var(--fg-muted); margin-bottom: 6px; }
376
+ .fg-pivot-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
377
+ .fg-pivot-chips .fg-group-chip { cursor: default; }
378
+ .fg-pivot-agg, .fg-pivot-add {
379
+ font: inherit; font-size: .92em; color: var(--fg-fg); background: var(--fg-input-bg);
380
+ border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px;
381
+ }
382
+ .fg-pivot-add { width: 100%; }
383
+
384
+ /* charts */
385
+ .fg-chart-panel {
386
+ position: absolute; top: 12px; right: 12px; z-index: 20; width: min(640px, calc(100% - 24px));
387
+ background: var(--fg-popup-bg); border: 1px solid var(--fg-border); border-radius: 8px; box-shadow: var(--fg-shadow);
388
+ display: flex; flex-direction: column;
389
+ }
390
+ .fg-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fg-border); }
391
+ .fg-chart-type {
392
+ padding: 3px 8px; border: 1px solid var(--fg-border); border-radius: 999px; background: transparent;
393
+ color: var(--fg-fg); font: inherit; font-size: .88em; cursor: pointer;
394
+ }
395
+ .fg-chart-type[aria-pressed="true"] { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
396
+ .fg-chart-spacer { flex: 1; }
397
+ .fg-chart-body { padding: 4px 8px 8px; }
398
+ .fg-chart { display: block; width: 100%; height: auto; font: 11px var(--fg-font); color: var(--fg-fg); }
399
+ .fg-chart text { fill: var(--fg-muted); }
400
+ .fg-chart .fg-chart-title { fill: var(--fg-fg); font-size: 14px; font-weight: 600; }
401
+ .fg-chart-grid { stroke: var(--fg-row-border); }
402
+ .fg-chart-zero { stroke: var(--fg-border); stroke-width: 1.5; }
403
+ .fg-chart-legend-item text { fill: var(--fg-fg); }
404
+ .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: opacity .12s; }
405
+ .fg-chart-plot:hover .fg-chart-bar:not(:hover), .fg-chart:hover .fg-chart-slice:not(:hover) { opacity: .55; }
406
+ .fg-chart-slice { stroke: var(--fg-popup-bg, #fff); stroke-width: 1.5; }
407
+ @media (prefers-reduced-motion: reduce) { .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: none; } }
408
+
409
+ /* free-use badge (unlicensed company domains) */
410
+ .fg-free-badge {
411
+ position: absolute; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
412
+ padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 23, 38, .15);
413
+ box-shadow: 0 2px 8px rgba(14, 23, 38, .12); color: #0E1726; font: 600 11px/1.2 var(--fg-font); text-decoration: none; opacity: .9;
414
+ }
415
+ .fg-free-badge:hover { opacity: 1; }
416
+ .fg-free-badge svg { flex: none; }
417
+
418
+ /* column spans */
419
+ .fg-cell-span-hidden { visibility: hidden; }
420
+ .fg-cell-colspan { z-index: 1; background: inherit; }
421
+
422
+ /* per-cell locks */
423
+ .fg-cell-readonly { color: var(--fg-muted); background-image: linear-gradient(rgba(14, 23, 38, .025), rgba(14, 23, 38, .025)); }
424
+ .fg-cell-select-locked .fg-checkbox { cursor: not-allowed; opacity: .45; }
425
+
426
+ /* wrapped cells (autoRowHeight grows the row to fit) */
427
+ .fg-cell-wrap { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
428
+
429
+ /* right-to-left: mirror the grid area, then turn every cell back so text reads normally */
430
+ /* the root keeps dir=rtl (side bar on the left); the grid inside is laid out ltr and mirrored */
431
+ .fg-rtl .fg-main { transform: scaleX(-1); direction: ltr; }
432
+ .fg-rtl .fg-cell, .fg-rtl .fg-header-cell, .fg-rtl .fg-statusbar, .fg-rtl .fg-pager, .fg-rtl .fg-group-panel,
433
+ .fg-rtl .fg-overlay, .fg-rtl .fg-find, .fg-rtl .fg-chart-panel, .fg-rtl .fg-row-detail .fg-detail { transform: scaleX(-1); direction: rtl; }
434
+ .fg-rtl .fg-sidebar { direction: rtl; border-left: 0; border-right: 1px solid var(--fg-border); }
435
+
436
+ /* touch */
437
+ .fg-body { touch-action: pan-x pan-y; }
438
+ @media (pointer: coarse) {
439
+ .fg-editor input, .fg-editor select, .fg-editor textarea { font-size: 16px; } /* no zoom-in on focus in mobile Safari */
440
+ }
441
+
442
+ /* card view for narrow screens */
443
+ .fg-card-mode .fg-header, .fg-card-mode .fg-body, .fg-card-mode .fg-grid, .fg-card-mode .fg-summary, .fg-card-mode .fg-pinned-rows { display: none; }
444
+ .fg-cards { flex: 1; min-height: 0; overflow: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
445
+ .fg-cards-canvas { position: relative; }
446
+ .fg-card {
447
+ position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 10px 14px; overflow: hidden;
448
+ border: 1px solid var(--fg-border); border-radius: 10px; background: var(--fg-bg); box-shadow: 0 1px 2px rgba(14, 23, 38, .06);
449
+ }
450
+ .fg-card-selected { border-color: var(--fg-accent); background: var(--fg-row-selected); }
451
+ .fg-card-other { background: var(--fg-header-bg); font-weight: 600; display: flex; align-items: center; }
452
+ .fg-card-head { display: flex; align-items: center; gap: 8px; height: var(--fg-card-line, 27px); color: var(--fg-muted); font-size: .92em; }
453
+ .fg-card-line { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 10px; align-items: center; height: var(--fg-card-line, 27px); }
454
+ .fg-card-label { color: var(--fg-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
455
+ .fg-card-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
456
+
457
+ /* row numbers */
458
+ .fg-cell-rownum, .fg-header-rownum { justify-content: center; color: var(--fg-muted); font-variant-numeric: tabular-nums; cursor: default; }
459
+ .fg-cell-rownum { background: var(--fg-header-bg); }
460
+
461
+ /* filter row */
462
+ .fg-filter-row { position: relative; border-top: 1px solid var(--fg-border); will-change: transform; }
463
+ .fg-filter-cell { position: absolute; top: 0; box-sizing: border-box; display: flex; align-items: center; padding: 3px 4px; border-right: 1px solid var(--fg-border); }
464
+ .fg-filter-input { width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--fg-border); border-radius: 4px; padding: 0 6px; background: var(--fg-bg); color: var(--fg-fg); font: inherit; font-size: .92em; }
465
+ .fg-filter-input:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
466
+ .fg-filter-input::placeholder { color: var(--fg-muted); opacity: .7; }
467
+ .fg-filter-active .fg-filter-input { border-color: var(--fg-accent); }
468
+ .fg-filter-bad.fg-filter-input { border-color: #dc2626; }
469
+ .fg-rtl .fg-filter-cell { transform: scaleX(-1); direction: rtl; }
470
+
471
+ /* tooltips */
472
+ .fg-tooltip { position: fixed; z-index: 1000; max-width: 360px; padding: 6px 9px; border-radius: 6px; background: #1f2430; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
473
+ .fg-tooltip.fg-theme-dark { background: #e6e9f0; color: #11141b; }
474
+
475
+ /* cells changed by applyTransaction */
476
+ .fg-cell-flash { animation: fg-flash var(--fg-flash-duration, 1s) ease-out; }
477
+ @keyframes fg-flash { from { background: color-mix(in srgb, var(--fg-accent) 35%, transparent); } to { background: transparent; } }
478
+ .fg-cell-flash-up { animation-name: fg-flash-up; }
479
+ .fg-cell-flash-down { animation-name: fg-flash-down; }
480
+ @keyframes fg-flash-up { from { background: color-mix(in srgb, var(--fg-up, #16a34a) 32%, transparent); } to { background: transparent; } }
481
+ @keyframes fg-flash-down { from { background: color-mix(in srgb, var(--fg-down, #dc2626) 32%, transparent); } to { background: transparent; } }
482
+ @media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; }
483
+ .fg-cell-flash-up { outline-color: var(--fg-up, #16a34a); }
484
+ .fg-cell-flash-down { outline-color: var(--fg-down, #dc2626); } }
485
+
486
+ /* editType 'row': the row being edited */
487
+ .fg-row-editing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg-accent) 45%, transparent); background: color-mix(in srgb, var(--fg-accent) 5%, var(--fg-bg)); }
488
+
489
+ /* collapsible column groups */
490
+ .fg-colgroup-toggle { margin-left: 6px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--fg-border); border-radius: 4px; background: var(--fg-bg); color: var(--fg-muted); font: 600 12px/1 var(--fg-font); cursor: pointer; flex: none; }
491
+ .fg-colgroup-toggle:hover { color: var(--fg-fg); border-color: var(--fg-muted); }
492
+
493
+ /* two conditions in a column filter */
494
+ .fg-filter-cond { display: flex; flex-direction: column; gap: 6px; }
495
+ .fg-filter-join { display: flex; gap: 14px; padding: 2px 2px 0; font-size: .92em; color: var(--fg-muted); }
496
+ .fg-filter-join label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
497
+
498
+ /* autoHeight: grow with the rows */
499
+ .fg-root.fg-auto-height { height: auto; }
500
+ .fg-auto-height .fg-main, .fg-auto-height .fg-grid { flex: none; }
501
+ .fg-auto-height .fg-body { flex: none; min-height: 0; }
502
+ .fg-auto-height .fg-body-pane-center { overflow-y: hidden; }
503
+
504
+ .fg-sparkline { display: block; overflow: visible; }
505
+
506
+ .fg-overlay.fg-overlay-custom { pointer-events: auto; }
507
+
508
+ /* density */
509
+ .fg-density-compact { --fg-cell-px: 7px; }
510
+ .fg-density-comfortable { --fg-cell-px: 14px; }
511
+
512
+ /* conditional formats */
513
+ .fg-cf-bar { background-image: linear-gradient(to right, transparent var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-to), transparent var(--fg-bar-to)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
514
+ .fg-cf-icon { display: inline-block; margin-inline-end: 6px; font-size: .9em; line-height: 1; }
515
+ .fg-cf-dialog { width: 340px; }
516
+ .fg-cf-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
517
+ .fg-cf-rule { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid var(--fg-border); border-radius: 6px; }
518
+ .fg-cf-rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
519
+ .fg-cf-sample { flex: none; width: 34px; height: 18px; border-radius: 4px; border: 1px solid var(--fg-border); display: grid; place-items: center; font-size: 11px; }
520
+ .fg-cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
521
+ .fg-cf-form > .fg-cf-wide { grid-column: 1 / -1; }
522
+ .fg-cf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
523
+ .fg-cf-swatch { width: 30px; height: 22px; border-radius: 5px; border: 1px solid var(--fg-border); cursor: pointer; font: 600 11px/1 var(--fg-font); padding: 0; }
524
+ .fg-cf-swatch[aria-pressed="true"] { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
525
+ .fg-cf-empty { color: var(--fg-muted); padding: 4px 0; }
526
+
527
+ /* AI assistant */
528
+ .fg-ai-panel { width: 360px; display: flex; flex-direction: column; gap: 8px; }
529
+ .fg-ai-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
530
+ .fg-ai-log:empty { display: none; }
531
+ .fg-ai-msg { padding: 7px 10px; border-radius: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
532
+ .fg-ai-user { align-self: flex-end; background: var(--fg-accent); color: var(--fg-accent-fg); border-bottom-right-radius: 3px; }
533
+ .fg-ai-ai { align-self: flex-start; background: var(--fg-header-bg); border: 1px solid var(--fg-border); border-bottom-left-radius: 3px; }
534
+ .fg-ai-error { align-self: flex-start; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
535
+ .fg-ai-wait { color: var(--fg-muted); }
536
+ .fg-ai-note { margin-top: 4px; font-size: .9em; color: var(--fg-muted); }
537
+ .fg-ai-undo { margin-top: 6px; height: 24px; padding: 0 10px; }
538
+ .fg-ai-form { display: flex; gap: 6px; align-items: flex-end; }
539
+ .fg-ai-input { flex: 1; resize: vertical; min-height: 40px; max-height: 140px; padding: 6px 8px; font: inherit; }
540
+ .fg-ai-tips { display: flex; flex-wrap: wrap; gap: 6px; }
541
+ .fg-ai-tip { border: 1px solid var(--fg-border); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .92em; padding: 3px 10px; cursor: pointer; }
542
+ .fg-ai-tip:hover { background: var(--fg-row-hover); }