/* Caboodle Spreadsheet – Copyright (C) 2026 the Caboodle authors – GNU GPL v3, see LICENSE.txt
   SPDX-License-Identifier: GPL-3.0-only */
/* Spreadsheet-specific styles (generic chrome lives in shared/kit.css). */
/* ---------- formula bar ---------- */
#formula-bar { display: flex; align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); height: 30px; flex: none; }
#name-box { width: 100px; border: 0; border-right: 1px solid var(--line); padding: 0 10px; font: 13px Arial, sans-serif; background: var(--surface); }
#name-box:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
#name-box.error { background: #fce8e6; }
.fx { display: flex; align-items: center; padding: 0 8px; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.fx:hover { background: var(--hover); color: var(--text); }
.fx:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fx .material-symbols-outlined { font-size: 18px; }
#formula-input { flex: 1; border: 0; resize: none; font: 13px Arial, sans-serif; padding: 6px 10px 0; line-height: 18px; white-space: pre; overflow: hidden; }
#formula-input:focus { outline: none; }
body[data-chrome="command"] #formula-bar { border-top: 0; }

/* ---------- grid ---------- */
#grid-container { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.grid-canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.grid-scroller { position: absolute; inset: 0; overflow: auto; z-index: 1; }
.grid-scroller[data-cursor="cell"] { cursor: cell; }
.grid-scroller[data-cursor="col-resize"] { cursor: col-resize; }
.grid-scroller[data-cursor="row-resize"] { cursor: row-resize; }
.grid-scroller[data-cursor="crosshair"] { cursor: crosshair; }
.grid-scroller[data-cursor="pointer"] { cursor: pointer; }
.grid-scroller[data-cursor="move"] { cursor: move; }
.grid-scroller[data-cursor="nwse-resize"] { cursor: nwse-resize; }
.grid-scroller[data-cursor="default"] { cursor: default; }
.grid-spacer { width: 1px; height: 1px; }
.cell-editor { position: absolute; z-index: 5; margin: 0; border: 2px solid var(--prog); padding: 1px 3px; resize: none; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); white-space: pre; outline: none; }
.cell-editor.idle { opacity: 0; pointer-events: none; width: 2px !important; height: 2px !important; border: 0; box-shadow: none; padding: 0; }
.ac-list { position: absolute; z-index: 8; background: var(--surface); border-radius: 6px; box-shadow: var(--shadow); padding: 4px 0; min-width: 160px; font: 13px Arial, sans-serif; max-height: 280px; overflow: auto; }
.ac-list div { padding: 4px 12px; cursor: pointer; }
.ac-list div.sel, .ac-list div:hover { background: #e8f0fe; }
.grid-tip { position: absolute; z-index: 7; max-width: 280px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 10px; font: 13px Arial, sans-serif; white-space: pre-wrap; pointer-events: none; border-radius: 4px; }
.grid-tip.error { border-left: 3px solid var(--danger); }
.link-chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 6px; background: var(--surface); box-shadow: var(--shadow); border-radius: 8px; padding: 4px 6px 4px 10px; font-size: 13px; max-width: 420px; }
.link-chip a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-chip a:hover { text-decoration: underline; }
.link-chip .material-symbols-outlined { font-size: 18px; color: var(--muted); }

/* ---------- sheet bar ---------- */

/* ---------- spreadsheet popovers ---------- */
.border-pop { display: flex; gap: 10px; }
.border-grid { display: grid; grid-template-columns: repeat(5, 30px); gap: 2px; }
.border-side { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line-soft); padding-left: 8px; }
.dv-list { max-height: 300px; overflow: auto; margin: -8px; padding: 6px 0; }
.dv-item { padding: 6px 14px; cursor: pointer; font-size: 13px; }
.dv-item:hover { background: var(--hover); }
.dv-item.sel { background: #e8f0fe; }
.filter-menu { width: 260px; margin: -8px; padding: 6px 0 0; }
.filter-menu .inp { margin: 4px 12px; width: calc(100% - 24px); }
.filter-title { font-weight: 500; padding: 4px 14px; font-size: 13px; }
.filter-links { padding: 0 8px; }
.filter-list { max-height: 220px; overflow: auto; padding: 4px 12px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.filter-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; cursor: pointer; }
.filter-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; }

/* ---------- spreadsheet dialogs ---------- */
.rule-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.rule-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 6px 6px 10px; }
.rule-row > div { flex: 1; min-width: 0; overflow: hidden; }
.rule-row b { font-weight: 500; font-size: 13px; }
.cf-sample { flex: none; width: 44px; height: 26px; border: 1px solid var(--line); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.cf-add { border-top: 1px solid var(--line-soft); padding-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.cf-add > .btn { align-self: flex-start; }
.cf-style { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fmt-preview { font-size: 13px; color: var(--muted); }
.fmt-list { max-height: 240px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.fmt-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.fmt-item:hover { background: var(--hover); }
.fmt-item code { font-size: 12px; color: var(--text-2); }
.find-status { min-height: 16px; }
.fn-top { display: flex; gap: 8px; }
.fn-top .inp:first-child { flex: 1; }
.fn-top select.inp { width: 180px; flex: none; }
.fn-list { height: min(420px, 55vh); overflow: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.fn-cat { position: sticky; top: 0; background: var(--sunk); font-size: 12px; font-weight: 500; padding: 4px 10px; color: var(--text-2); }
.fn-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.fn-row:hover { background: #e8f0fe; }
.fn-row code { min-width: 130px; font: 12.5px Consolas, monospace; color: var(--accent); }
.fn-row span:nth-child(2) { flex: 1; }

@media (max-width: 700px) {
  #name-box { width: 64px; }
}

/* the sheets on the left (shared/thumbs.js): a picture of each sheet's first cells */
.sh-prev { position: relative; background: #fff; font: 13px 'Geist', system-ui, sans-serif; color: #1f1f1f; overflow: hidden; }
.sh-prev > div { position: absolute; box-sizing: border-box; white-space: nowrap; overflow: hidden; padding: 0 4px; }
.sh-corner { left: 0; top: 0; background: #f4f4f6; border-right: 1px solid #d4d4da; border-bottom: 1px solid #d4d4da; }
.sh-hc { top: 0; background: #f4f4f6; border-right: 1px solid #e3e3e8; border-bottom: 1px solid #d4d4da; text-align: center; font-size: 11px; line-height: 20px; color: #6a6a74; }
.sh-hr { left: 0; background: #f4f4f6; border-bottom: 1px solid #e3e3e8; border-right: 1px solid #d4d4da; text-align: center; font-size: 11px; color: #6a6a74; display: flex; align-items: center; justify-content: center; }
.sh-c { border-right: 1px solid #ececf0; border-bottom: 1px solid #ececf0; }
#sh-sheets .th-box { box-shadow: 0 0 0 1px #d4d4da; }