#root{ }
:root{
  --grid-border: var(--border, #1A2342);
  --grid-bg: #0E1530;
  --grid-bg-alt: #0E1530;
  --grid-head-bg: #0B1431;
  --grid-head-ink: var(--muted);
}

/* Light mode variant: full white sheet, grey headers, light lines */
body[data-theme="light"]{
  --grid-border: #e5e7eb;   /* light grey gridlines */
  --grid-bg: #ffffff;       /* entire sheet white */
  --grid-bg-alt: #ffffff;   /* no striping */
  --grid-head-bg: #D1D5DB;  /* grey header squares */
  --grid-head-ink: #111827; /* dark text for headers */
}

#gridWrap{ position:relative; overflow:auto; align-self:flex-start; background:transparent; border:0; border-radius:10px; padding:0; }
#grid{ margin:0 }
/* Make the spreadsheet hug the top-left of the preview area
   to remove the empty section above the column headers. */
.preview-wrap{ justify-content:flex-start }
.preview-area{ align-items:flex-start; justify-content:flex-start; padding:0 }
table.grid{ border-collapse: separate; border-spacing: 0; width: max-content; min-width:100% }
table.grid th, table.grid td{
  border:1px solid var(--grid-border);
  padding:8px 10px; min-width:120px; background:var(--grid-bg); color:var(--ink);
  box-sizing: border-box; /* ensure width includes padding so overlay math aligns with Excel */
}
/* Make sure light mode uses dark text and white cells */
body[data-theme="light"] table.grid th,
body[data-theme="light"] table.grid td{ color:#111827; background:#ffffff; }
table.grid th{ position:sticky; top:0; background:var(--grid-head-bg); color:var(--grid-head-ink); z-index:2 }
/* Make the row-number column slimmer like Excel */
table.grid th.rowhead{ position:sticky; left:0; z-index:3; min-width:48px; width:48px; padding:6px 8px; text-align:right; background:var(--grid-head-bg) }
table.grid td{ background:#0E1530 }
table.grid td:focus{ outline:2px solid var(--accent); background:#101A3C }
.grid td.sel{ outline:2px solid var(--accent); background:#101A3C }
/* Light focus/selection */
body[data-theme="light"] table.grid td:focus,
body[data-theme="light"] .grid td.sel{ background:#f2f8ff; }
/* Highlight cells referenced by current formula */
.grid td.ref{ outline:2px dashed #86d2ff; background:rgba(134,210,255,0.08) }
/* Highlight selected row/column headers */
.grid th.hsel{ background:#0e1a3f; color:#a7b4d4 }
body[data-theme="light"] .grid th.hsel{ background:#cfd6de; color:#111827 }
.col-resizer{ position:absolute; top:0; width:6px; cursor:col-resize; background:transparent }
.col-resizer:hover{ background:rgba(121,201,255,.25) }

/* Edit bar */
.editbar{ display:flex; align-items:center; gap:8px; margin-left:10px }
.editbar .addr{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--muted) }
.editbar .formula{ width:420px; max-width:42vw; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#0b1431; color:var(--ink) }

/* Tool panel sizing and wrapping */
.tool-panel{ width: 340px; max-width: 92vw }
.tool-panel .row{ display:flex; flex-wrap: wrap; gap:8px }
.tool-panel .row > *{ flex: 0 1 auto }
.tool-panel .row button{ flex: 1 1 46% }

/* Subtle status text styling on right rail */
#selInfo strong{ color: var(--ink); font-weight:600 }

/* Subtle pulse to draw attention when opening Files */
.card.pulse{ box-shadow: 0 0 0 2px rgba(121,201,255,.35), 0 0 22px rgba(121,201,255,.12); animation:pulseGlow .8s ease 1; }
@keyframes pulseGlow{ from{ box-shadow: 0 0 0 2px rgba(121,201,255,.0), 0 0 0 rgba(121,201,255,0);} to{ box-shadow: 0 0 0 2px rgba(121,201,255,.35), 0 0 22px rgba(121,201,255,.12);} }

/* Tabs bar for multiple open sheets */
.tabbar{
  display:flex; gap:8px; align-items:center; padding:6px 8px; margin:0 0 8px 0;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow-x:auto;
}
.tabbar .tab{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; border:1px solid #57448f; background:#2b2147; color:var(--ink); cursor:pointer; white-space:nowrap }
.tabbar .tab.active{ border-color:var(--accent); background:#3a2d5f }
.tabbar .tab .close{ background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; line-height:1 }
.tabbar .add-tab{ margin-left:4px; background:#2c2149; color:var(--ink); border:1px solid #4a3a77; border-radius:10px; padding:6px 10px; cursor:pointer }

/* Zoom support (applied via inline style in JS for cross-browser) */
#gridWrap{ --tt-zoom: 1; }