/**
 * finance.css — styles for the Tablolar (spreadsheet) viewer overlay.
 * Reuses the app's design tokens (--bg, --panel, --accent, …) so it
 * feels native to the chat page. Handsontable's own theme is loaded
 * from CDN by finance.js; the overrides at the bottom retint it to dark.
 */

/* The open button in the composer footer. Inherits .ghost-btn; we just
   add the icon alignment. */
.finance-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}
.finance-open-btn .finance-open-icon {
  display: inline-flex;
  color: var(--accent);
}

/* The viewer mounts inside #finance-root, which lives in .message-feed-wrap
   (the middle row of the chat-column grid). #finance-root is a zero-size
   anchor; the overlay fills its positioned parent so the table opens in
   place of the chat thread — between the two rails and above the composer. */
#finance-root { position: static; }

/* ---------------------------------------------------------------- overlay */
.fin-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  /* Fully opaque so neither the inline nor the fullscreen view lets the
     chat thread / composer behind it bleed through. */
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--glow);
  color: var(--text);
  outline: none;
}
.fin-overlay[hidden] { display: none; }

/* Full-screen mode — lift out of the chat column to cover the viewport,
   reproducing the original full-page experience. */
.fin-overlay.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 60;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* In fullscreen the body-level chat icons (right-rail toggle, notification
   bell) composite above the app-shell, so they sit in our top-right corner.
   Pad the header so the fullscreen + close buttons shift ~200px left and no
   longer collide with them. */
.fin-overlay.is-fullscreen .fin-header {
  padding-right: 208px;
  /* Drop the title row down so it lines up with the body-level chat icons
     (rail toggle / bell), which sit at top: 1rem + 12px. */
  padding-top: calc(env(safe-area-inset-top, 0px) + 26px);
}

/* …and lift the right rail above the fullscreen overlay so its toggle icon
   actually reveals the rail instead of doing nothing. Scoped to the
   fullscreen state via body.fin-fullscreen (set by finance.js). */
body.fin-fullscreen .app-shell .right-rail { z-index: 70; }

/* ------------------------------------------------- finance "in editor" cue */
/* One shared emerald accent so the editor state reads at a glance. */
.fin-overlay { --fin-emerald: #34d399; --fin-emerald-soft: rgba(52, 211, 153, 0.12); }

/* INLINE finance open → the page's own composer turns emerald, signalling
   the user is now in the finance editor (vs. the normal dark-blue chat). */
body.fin-open:not(.fin-fullscreen) .composer { border-top-color: #34d399; }
body.fin-open:not(.fin-fullscreen) .composer textarea {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.08);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.28), 0 0 20px rgba(52, 211, 153, 0.14);
}
body.fin-open:not(.fin-fullscreen) .composer textarea:focus,
body.fin-open:not(.fin-fullscreen) .composer textarea:focus-visible {
  outline: none;        /* drop the browser's default blue focus ring */
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45), 0 0 22px rgba(52, 211, 153, 0.2);
}

/* --------------------------------------------------- fullscreen chat dock */
/* The overlay body + the right-hand chat dock sit side by side. */
.fin-main {
  display: flex;
  flex: 1;
  min-height: 0;
}
/* Inline: no dock, the table fills the whole width (unchanged behavior). */
.fin-overlay:not(.is-fullscreen) .fin-chatdock { display: none; }
/* The chat divider only exists alongside the (fullscreen-only) chat dock. */
.fin-overlay:not(.is-fullscreen) .fin-divider--chat { display: none; }

/* Drag handles between the flex columns. The 6px hit area is wider than the
   1px line it draws, so the resize target is comfortable to grab. */
.fin-divider {
  flex: 0 0 6px;
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}
.fin-divider[hidden] { display: none; }
.fin-divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line);
  transition: background 0.12s ease, width 0.12s ease;
}
.fin-divider:hover::after,
body.fin-resizing .fin-divider::after {
  background: #34d399;
  width: 2px;
}
body.fin-resizing { cursor: col-resize; user-select: none; }

.fin-chatdock {
  flex: 0 0 var(--rail-right-w, 352px);
  width: var(--rail-right-w, 352px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.fin-chatdock-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  font-size: 0.92rem;
}
.fin-chatdock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
}
/* Finance chat feed — the finance agent's OWN thread (not the sohbet one). */
.fin-chatfeed {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 0.7rem;
}
.fin-chat-empty {
  margin: auto;
  max-width: 220px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.fin-msg { display: flex; }
.fin-msg--user { justify-content: flex-end; }
.fin-msg--assistant { justify-content: flex-start; }
.fin-msg-bubble {
  max-width: 86%;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.fin-msg--user .fin-msg-bubble {
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: var(--text);
}
.fin-msg--assistant .fin-msg-bubble {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--text);
}

/* Assistant "typing" indicator — three pulsing dots. */
.fin-typing { display: inline-flex; align-items: center; gap: 5px; }
.fin-typing .fin-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: fin-blink 1.2s infinite ease-in-out both;
}
.fin-typing .fin-dot:nth-child(2) { animation-delay: 0.18s; }
.fin-typing .fin-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes fin-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Staged-edit confirm/preview card under an assistant message. */
.fin-msg--assistant { flex-direction: column; align-items: flex-start; }
.fin-diff {
  margin-top: 0.45rem;
  width: 100%;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.07);
  overflow: hidden;
  font-size: 0.8rem;
}
.fin-diff.is-applied { border-color: var(--line); background: var(--panel-strong); }
.fin-diff-head {
  padding: 0.45rem 0.6rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.1);
}
.fin-diff.is-applied .fin-diff-head { background: transparent; border-bottom-color: var(--line); }
.fin-diff-list { max-height: 220px; overflow: auto; padding: 0.25rem 0; }
.fin-diff-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}
.fin-diff-addr { font-weight: 700; color: var(--text); flex: 0 0 auto; }
.fin-diff-old {
  color: var(--muted);
  text-decoration: line-through;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-diff-arrow { color: #34d399; flex: 0 0 auto; }
.fin-diff-new {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-diff-new.is-formula { color: #1f6fb0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.fin-diff-row--sheet { gap: 0.5rem; }
.fin-diff-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #06231a;
  background: #34d399;
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
}
.fin-diff-after { color: var(--muted); }
.fin-diff-row--chart { gap: 0.5rem; flex-wrap: wrap; }
.fin-diff-badge--chart { background: #60a5fa; color: #082135; }
.fin-diff-badge--del { background: #f87171; color: #2a0707; }
.fin-diff-row--del .fin-diff-after { color: #fca5a5; }
.fin-diff-chart--del {
  border-color: #f8717155;
  background: #fff5f5;
  position: relative;
  opacity: 0.85;
}
.fin-diff-chart--del::after {
  content: "Silinecek";
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  pointer-events: none;
}
.fin-diff-chart {
  flex: 1 1 100%;
  height: 200px;
  margin: 0.3rem 0 0.1rem;
  padding: 0.4rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fin-diff-chart-canvas { width: 100% !important; height: 100% !important; }

/* Charts dock — the middle column between the table and the chat dock. */
.fin-chartsdock {
  flex: 0 0 var(--fin-charts-w, 400px);
  width: var(--fin-charts-w, 400px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.fin-chartsdock[hidden] { display: none; }
.fin-chartsdock-head {
  flex: 0 0 auto;
  padding: 0.62rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  font-size: 0.92rem;
  font-weight: 600;
}
.fin-chartsdock-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem 0.7rem;
}
.fin-chart-card {
  flex: 0 0 auto;
  height: 280px;
  padding: 0.6rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.fin-chart-canvas { width: 100% !important; height: 100% !important; }
.fin-chart-err { color: var(--muted); font-size: 0.8rem; padding: 0.4rem; }
.fin-diff-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-top: 1px solid rgba(52, 211, 153, 0.3);
}
.fin-diff-apply {
  padding: 0.34rem 0.85rem;
  border-radius: 8px;
  border: 1px solid #34d399;
  background: #34d399;
  color: #06231a;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.fin-diff-apply:hover { filter: brightness(1.08); }
.fin-diff-apply:disabled, .fin-diff-dismiss:disabled { opacity: 0.55; cursor: default; }
.fin-diff-dismiss {
  padding: 0.34rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}
.fin-diff-note {
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.fin-diff-note.is-ok { color: #0f7a52; }
.fin-diff-note.is-err { color: #c0392b; }

/* Minimal composer — just a textarea + Gönder (no PDF/model picker/etc.). */
.fin-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid var(--line);
  background: var(--panel-strong);
}
.fin-chatinput {
  flex: 1 1 auto;
  resize: none;
  min-height: 40px;
  max-height: 140px;
  border: 1px solid #34d399;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  background: rgba(52, 211, 153, 0.08);
}
.fin-chatinput:focus,
.fin-chatinput:focus-visible {
  outline: none;
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45), 0 0 18px rgba(52, 211, 153, 0.18);
}
.fin-chatinput::placeholder { color: #7f99bb; }
.fin-chatsend {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: 1px solid #34d399;
  background: #34d399;
  color: #06231a;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.fin-chatsend:hover { filter: brightness(1.08); }

/* ----------------------------------------------------------------- header */
.fin-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  backdrop-filter: blur(8px);
}
.fin-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-right: 0.6rem;
  margin-right: 0.2rem;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.fin-brand strong { font-size: 0.98rem; letter-spacing: 0.01em; }
.fin-brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-sohbet-grad, var(--accent));
  box-shadow: 0 0 12px var(--color-sohbet-shadow, var(--accent));
  align-self: center;
}
/* ------------------------------------------------------------- tab strip */
.fin-tabstrip {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  min-width: 0;        /* allow the strip (and its tabs) to shrink */
  overflow-x: auto;    /* only kicks in once tabs hit their min size */
  scrollbar-width: thin;
}
.fin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Grow up to a comfortable width, but shrink first (before the strip
     scrolls) as more tabs are added. min-width keeps the close button
     reachable; the label ellipsizes when squeezed. */
  flex: 0 1 200px;
  min-width: 58px;
  max-width: 230px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: rgba(14, 28, 52, 0.55);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.fin-tab:hover { background: rgba(20, 38, 68, 0.8); color: var(--text); }
.fin-tab.is-active {
  background: var(--panel);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 -2px 0 0 var(--accent) inset;
}
.fin-tab-ico { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.fin-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-tab-close, .fin-tab-new, .fin-close, .fin-fs {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.fin-tab-close {
  font-size: 1rem;
  padding: 0 2px;
  border-radius: 5px;
  flex: 0 0 auto;
}
.fin-tab-close:hover { background: rgba(255, 90, 110, 0.25); color: #fff; }
.fin-tab-new {
  font-size: 1.25rem;
  width: 28px; height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;   /* never shrinks — tabs shrink instead */
  align-self: center;
}
.fin-tab-new:hover { background: rgba(29, 216, 255, 0.16); color: var(--text); }
.fin-fs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  flex: 0 0 auto;
}
.fin-fs:hover { background: rgba(29, 216, 255, 0.16); color: var(--text); }
.fin-close {
  font-size: 1.5rem;
  width: 36px; height: 36px;
  border-radius: 9px;
  flex: 0 0 auto;
}
.fin-close:hover { background: rgba(255, 90, 110, 0.22); color: #fff; }

/* ------------------------------------------------------------------- body */
.fin-body {
  flex: 1;
  min-height: 0;
  /* In the horizontal .fin-main flexbox a flex item defaults to
     min-width:auto, which refuses to shrink below the table's content width.
     That wedged the charts divider (the table wouldn't yield space, so it
     "only moved right") AND stopped Handsontable from ever being narrower than
     its content, hiding the horizontal scrollbar. min-width:0 lets the column
     shrink so both work. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------------------------------------------------------------- picker */
.fin-picker {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem clamp(1rem, 6vw, 4rem);
  overflow: auto;
}
.fin-picker-head h3 { margin: 0 0 0.2rem; font-size: 1.25rem; }
.fin-picker-sub { margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; }
.fin-picker-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
.fin-search {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 20, 40, 0.7);
  color: var(--text);
  font-size: 0.9rem;
}
.fin-search:focus { outline: none; border-color: var(--accent); }
.fin-refresh {
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(14, 28, 52, 0.88);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}
.fin-refresh:hover { border-color: var(--accent); }

.fin-filelist { display: flex; flex-direction: column; gap: 6px; }
.fin-filerow {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s, background 0.15s;
}
.fin-filerow:hover { border-color: var(--accent); background: rgba(18, 34, 62, 0.92); }
.fin-filerow:active { transform: translateY(1px); }
.fin-fileext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0;
  border-radius: 7px;
  color: #04121e;
}
.fin-fileext--xlsx { background: linear-gradient(135deg, #7ee0a8, #1fb368); }
.fin-fileext--csv  { background: linear-gradient(135deg, #a8e3ff, #1f9eff); }
.fin-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.fin-filedepts { color: var(--muted); font-size: 0.76rem; text-align: right; }

.fin-empty, .fin-error {
  padding: 1.4rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.fin-error { color: #ffb4bf; }
.fin-error--block { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: auto; }

/* ----------------------------------------------------------------- loading */
.fin-loading {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted);
}
.fin-spinner {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(29, 216, 255, 0.22);
  border-top-color: var(--accent);
  animation: fin-spin 0.8s linear infinite;
}
@keyframes fin-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------- edit/save toolbar */
.fin-filetoolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  min-height: 40px;
}
.fin-filetoolbar.is-editing { background: rgba(244, 180, 70, 0.08); }
.fin-filetoolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}
.fin-toolhint {
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Undo / redo group — left edge of the toolbar, same row as Düzenle. */
.fin-histgroup { display: inline-flex; gap: 0.25rem; flex: 0 0 auto; }
.fin-hist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(14, 28, 52, 0.88);
  color: var(--text);
  cursor: pointer;
}
.fin-hist:hover:not(:disabled) { border-color: var(--accent); }
.fin-hist:disabled { opacity: 0.4; cursor: default; }
.fin-hist svg { display: block; }
.fin-filetoolbar-right { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.fin-readonly-note { font-size: 0.76rem; color: var(--muted); }
.fin-dirty-count {
  font-size: 0.76rem;
  color: #ffd79f;
  font-variant-numeric: tabular-nums;
  margin-right: 0.2rem;
}
.fin-act {
  padding: 0.42rem 0.95rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(14, 28, 52, 0.88);
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.fin-act:hover { border-color: var(--accent); }
.fin-act:disabled { opacity: 0.6; cursor: default; }
/* Düzenle disabled because another user holds the edit lock. */
.fin-act--edit.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}
.fin-act--edit.is-locked:hover { border-color: var(--line); }
/* Generic "someone else is editing" indicator (no holder name by design). */
.fin-lock-note {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.76rem;
  color: #ffd79f;
  background: rgba(244, 180, 70, 0.12);
  border: 1px solid rgba(244, 180, 70, 0.3);
  border-radius: 8px;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
}
.fin-lock-ico { display: inline-flex; opacity: 0.9; }
.fin-lock-ico svg { display: block; }
.fin-act--save {
  background: var(--accent);
  border-color: var(--accent);
  color: #06122a;
}
.fin-act--save:hover { filter: brightness(1.08); }
.fin-act--save:disabled,
.fin-act--save.is-disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted, #8b95a7);
  filter: none;
  cursor: default;
}
.fin-act--save:disabled:hover,
.fin-act--save.is-disabled:hover { filter: none; }
.fin-savenote {
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--line);
}
.fin-savenote.is-ok { background: rgba(70, 200, 140, 0.12); color: #aef0cf; }
.fin-savenote.is-warn { background: rgba(244, 180, 70, 0.12); color: #ffd79f; }
.fin-savenote.is-err { background: rgba(232, 90, 90, 0.14); color: #ffb3b3; }
.fin-sheettab.is-disabled { opacity: 0.45; cursor: default; }

/* -------------------------------------------------------------- formula bar */
.fin-formulabar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  font-size: 0.85rem;
  min-height: 34px;
}
.fin-fx { font-style: italic; color: var(--accent); font-weight: 600; }
.fin-cellref {
  min-width: 54px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.fin-fbsep { width: 1px; height: 16px; background: var(--line); }
.fin-cellval {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* <input> reset so it reads like the surrounding bar until focused */
  border: none;
  background: transparent;
  font-size: inherit;
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: 6px;
}
.fin-cellval.is-formula { color: var(--accent); }
input.fin-cellval:not(.is-readonly) { cursor: text; }
input.fin-cellval:not(.is-readonly):focus {
  outline: none;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text);
}
input.fin-cellval.is-readonly { cursor: default; }
input.fin-cellval::placeholder { color: var(--muted); opacity: 0.55; }

.fin-truncated {
  padding: 0.4rem 0.7rem;
  background: rgba(244, 180, 70, 0.12);
  color: #ffd79f;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(244, 180, 70, 0.3);
}

/* ----------------------------------------------------------------- grid */
.fin-grid {
  position: relative;  /* anchor for the custom always-visible scrollbars */
  flex: 1;
  min-height: 0;
  min-width: 0;        /* let the grid be bounded so HOT shows its scrollbars */
  overflow: hidden;
  background: #ffffff;
}

/* ------------------------------------------------------------- sheet tabs */
.fin-sheettabs {
  display: flex;
  gap: 2px;
  padding: 0.35rem 0.55rem;
  border-top: 1px solid var(--line);
  background: var(--panel-strong);
  overflow-x: auto;
  scrollbar-width: thin;
}
.fin-sheettab {
  padding: 0.3rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}
.fin-sheettab:hover { color: var(--text); background: rgba(20, 38, 68, 0.7); }
.fin-sheettab.is-active {
  color: var(--text);
  background: var(--panel);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---------------------------------------------------------------- status */
.fin-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.7rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.74rem;
}

/* ------------------------------------------ Handsontable light (white) grid
 * The table itself is white so cell fills / highlights read true; the rest of
 * the editor chrome (sheet tabs, status bar, toolbar) stays on the dark theme.
 */
.fin-grid .handsontable {
  font-size: 0.82rem;
  color: #1a2433;
}
.fin-grid .handsontable td,
.fin-grid .handsontable th {
  background: #ffffff;
  color: #1a2433;
  border-color: #e3e8f0;
}
.fin-grid .handsontable th {
  background: #f1f4f9;
  color: #5a6678;
  font-weight: 600;
}
/* Very subtle neutral zebra — light enough that a colored fill on top still
 * looks like the intended color rather than a tinted blend. */
.fin-grid .handsontable tr:nth-child(even) td { background: #f8fafc; }
.fin-grid .handsontable td.fin-cell-formula {
  background: #eef6ff;
  color: #1f6fb0;
}
.fin-grid .handsontable .htDimmed { color: #8a93a3; }
.fin-grid .handsontable td.area,
.fin-grid .handsontable td.current {
  background: rgba(52, 211, 153, 0.16) !important;
}
.fin-grid .handsontable .wtBorder.current,
.fin-grid .handsontable .wtBorder.area { background: #34d399 !important; }
.fin-grid .ht_clone_top th,
.fin-grid .ht_clone_left th,
.fin-grid .ht_clone_corner th { background: #f1f4f9; }

/* Custom always-visible scrollbars.
 * Native/overlay scrollbars on the grid's scroll container are hidden (on macOS
 * they auto-hide and never appear unless actively scrolling). In their place we
 * overlay our own draggable sliders (.fin-sb) at the right and bottom edges,
 * driven by JS in attachGridScrollbars(). These stay visible the whole time the
 * sheet overflows its frame, regardless of OS scrollbar settings. */
.fin-grid .wtHolder { scrollbar-width: none; }
.fin-grid .wtHolder::-webkit-scrollbar { width: 0; height: 0; }

.fin-sb {
  position: absolute;
  z-index: 30;
  display: none;                       /* shown by JS only when that axis overflows */
  background: rgba(20, 38, 68, 0.06);
  border-radius: 8px;
}
.fin-sb-v { top: 2px; bottom: 14px; right: 2px; width: 11px; }   /* leave the corner free */
.fin-sb-h { left: 2px; right: 14px; bottom: 2px; height: 11px; }
.fin-sb-thumb {
  position: absolute;
  background: #b3bccc;
  border-radius: 8px;
  cursor: default;
  transition: background 0.15s ease;
}
.fin-sb-v .fin-sb-thumb { left: 1px; width: 9px; top: 0; }
.fin-sb-h .fin-sb-thumb { top: 1px; height: 9px; left: 0; }
.fin-sb-thumb:hover { background: #8c97a9; }
.fin-sb-thumb.is-dragging { background: #6f7c91; }