/* Kalkylblad — ista paleta i ista pravila kao FilPDF, da paket izgleda kao celina. */

:root {
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface2: #f5f6f9;
  --hover: #e6e9f0;
  --fg: #1b1d24;
  --dim: #6a7080;
  --line: #dfe3ea;
  --line2: #eceff4;
  --grid: #dcdfe6;
  --accent: #1f7a3d;          /* zelena — kalkulacije, kao na raskrsnici */
  --accent-fg: #ffffff;
  --accent-sm: #1f7a3d1f;
  --danger: #d4453c;
  --shadow: 0 1px 2px #0f172a12, 0 4px 14px #0f172a10;
  --shadow-lg: 0 10px 34px #0f172a24;

  --barh: 44px;
  --fbarh: 34px;
  --sheeth: 32px;
  --statush: 26px;
  --headw: 52px;
  --headh: 26px;

  /* Zum se NE radi CSS transformom nego skaliranjem samih mera mreže — inače
     skrol i pogađanje ćelije klikom prestanu da se poklapaju sa prikazom.
     Ovde stoji samo faktor za veličinu slova; širine/visine računa app.js. */
  --zoom: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161d;
    --surface: #1c1e27;
    --surface2: #23262f;
    --hover: #2b2f3b;
    --fg: #d7dced;
    --dim: #858da6;
    --line: #2c3040;
    --line2: #242833;
    --grid: #2b2f3d;
    --accent: #4fb36f;
    --accent-fg: #0f1a13;
    --accent-sm: #4fb36f26;
    --danger: #f2707f;
    --shadow: 0 1px 2px #0008, 0 4px 14px #0006;
    --shadow-lg: 0 12px 38px #000a;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font: 13px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  overflow: hidden; user-select: none;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  grid-template-rows: var(--barh) var(--fbarh) 1fr var(--sheeth) var(--statush);
  height: 100vh;
}
/* Redovi se dodeljuju eksplicitno — skriven element bi inače pomerio ceo raster. */
#toolbar   { grid-row: 1; }
#fbar      { grid-row: 2; }
#gridwrap  { grid-row: 3; }
#sheetbar  { grid-row: 4; }
#statusbar { grid-row: 5; }

.dim { color: var(--dim); }
.spacer { flex: 1; }
.sep { width: 1px; height: 20px; background: var(--line); margin: 0 7px; flex: none; }
code { background: var(--surface2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* ── Trake ───────────────────────────────────────────────────────────────── */
#toolbar, #fbar {
  display: flex; align-items: center; gap: 4px; padding: 0 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.tb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: transparent; color: var(--fg); text-decoration: none;
  min-width: 30px; height: 30px; padding: 0 10px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px;
  transition: background .12s;
}
.tb:hover { background: var(--hover); }
.tb.accent { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.tb.accent:hover { filter: brightness(1.08); }
.tb.home { font-size: 14px; color: var(--dim); }
.group {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface2); border: 1px solid var(--line2);
  border-radius: 9px; padding: 2px; margin: 0 3px;
}
.group .tb { height: 26px; min-width: 26px; padding: 0 6px; }
.zoomlvl { min-width: 58px; font-variant-numeric: tabular-nums; font-size: 12px; }
.tb[disabled] { opacity: .4; cursor: default; }
.tb[disabled]:hover { background: transparent; }

#fbar { background: var(--surface2); }
#cellref {
  width: 84px; height: 24px; text-align: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--fg); font-size: 12.5px;
}
.fx { color: var(--dim); font-style: italic; padding: 0 8px; font-size: 12px; }
#finput {
  flex: 1; height: 24px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--fg);
  font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px;
}
#cellref:focus, #finput:focus { outline: none; border-color: var(--accent); }

/* ── Mreža ───────────────────────────────────────────────────────────────── */
#gridwrap {
  position: relative; overflow: hidden;
  background: var(--surface);
  display: grid;
  grid-template-columns: var(--headw) 1fr;
  grid-template-rows: var(--headh) 1fr;
}
#corner {
  grid-row: 1; grid-column: 1;
  background: var(--surface2);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#colhead {
  grid-row: 1; grid-column: 2;
  overflow: hidden; position: relative;
  background: var(--surface2); border-bottom: 1px solid var(--line);
}
#rowhead {
  grid-row: 2; grid-column: 1;
  overflow: hidden; position: relative;
  background: var(--surface2); border-right: 1px solid var(--line);
}
#colhead-inner, #rowhead-inner { position: absolute; top: 0; left: 0; }

#scroller {
  grid-row: 2; grid-column: 2;
  overflow: auto; position: relative;
}
#sizer { position: absolute; top: 0; left: 0; }
#gridlines { position: absolute; top: 0; left: 0; }
#cells { position: absolute; top: 0; left: 0; }

/* Mreža se crta kao linije (jedna po granici kolone/reda), a NE kao okvir svake
   ćelije: u vidnom polju je ~600 ćelija a samo ~50 linija, pa skrolovanje ostaje
   glatko, a prazan list ipak izgleda kao list. */
.gline { position: absolute; background: var(--grid); }

.hcell, .rcell {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: calc(11.5px * var(--zoom)); color: var(--dim);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface2); overflow: hidden;
}
.hcell.on, .rcell.on { background: var(--accent-sm); color: var(--accent); font-weight: 600; }

/* Hvatište za promenu širine kolone */
.hgrip {
  position: absolute; top: 0; width: 7px; height: 100%;
  cursor: col-resize; z-index: 3;
}

/* Bez sopstvenog okvira i pozadine — linije dolaze iz sloja #gridlines ispod. */
.cell {
  position: absolute; display: flex; align-items: center;
  padding: 0 calc(6px * var(--zoom)); overflow: hidden; white-space: nowrap;
  font-size: calc(13px * var(--zoom));
}
.cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cell.err { color: var(--danger); justify-content: flex-end; }
.cell.bool { justify-content: center; }
.cell.formula::after {
  content: ""; position: absolute; top: 1px; right: 1px;
  border: 3px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent);
}

#selbox {
  position: absolute; pointer-events: none;
  background: var(--accent-sm); border: 1px solid var(--accent); z-index: 2;
}
#activebox {
  position: absolute; pointer-events: none;
  border: 2px solid var(--accent); z-index: 3;
}
#editor {
  position: absolute; z-index: 5;
  border: 2px solid var(--accent); outline: none;
  padding: 0 calc(5px * var(--zoom)); background: var(--surface); color: var(--fg);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: calc(13px * var(--zoom));
}

/* ── Listovi ─────────────────────────────────────────────────────────────── */
#sheetbar {
  display: flex; align-items: stretch; gap: 3px; padding: 0 8px;
  background: var(--surface); border-top: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
#sheetbar::-webkit-scrollbar { height: 0; }
#sheets { display: flex; gap: 3px; }
.stab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 0 0 7px 7px;
  background: transparent; color: var(--dim); border: 0;
  cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.stab:hover { background: var(--hover); color: var(--fg); }
.stab.active {
  background: var(--accent-sm); color: var(--accent); font-weight: 600;
  box-shadow: inset 0 2px 0 var(--accent);
}
.stabx { border: 0; background: transparent; color: inherit; opacity: .5; cursor: pointer; font-size: 11px; }
.stabx:hover { opacity: 1; }
.tabbtn {
  border: 0; background: transparent; color: var(--dim);
  width: 28px; cursor: pointer; font-size: 16px; border-radius: 7px;
}
.tabbtn:hover { background: var(--hover); color: var(--fg); }

/* ── Statusbar ───────────────────────────────────────────────────────────── */
#statusbar {
  display: flex; align-items: center; gap: 14px; padding: 0 8px 0 12px;
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: 11.5px; overflow: hidden;
}
#status-agg { font-variant-numeric: tabular-nums; }

/* Zum u statusnoj traci — niži i bez okvira, da stane u traku od 26 px. */
.zoomgrp { background: transparent; border: 0; padding: 0; margin: 0; gap: 0; }
.zoomgrp .tb { height: 20px; min-width: 20px; padding: 0 5px; font-size: 12px; border-radius: 5px; }
.zoomgrp .zoomlvl { min-width: 48px; font-size: 11.5px; color: var(--dim); }
.zoomgrp .zoomlvl:hover { color: var(--fg); }

/* ── Drop / toast ────────────────────────────────────────────────────────── */
#dropzone {
  position: fixed; inset: 0; z-index: 80;
  background: #0f172a55; backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.dropcard {
  background: var(--surface); color: var(--fg);
  border: 2px dashed var(--accent); border-radius: 16px;
  padding: 28px 44px; font-size: 16px; font-weight: 650; box-shadow: var(--shadow-lg);
}
#toast {
  position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%);
  z-index: 90; background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 18px; box-shadow: var(--shadow-lg); max-width: 70vw; font-size: 12.5px;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #8a90a555; border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #8a90a599; background-clip: padding-box; }