/* Quadros (espaço infinito) como itens do calendário */
/* ── QUADROS (ESPAÇO INFINITO) COMO ITENS DO CALENDÁRIO ──
   Um quadro é um JSON com data, igual a uma nota: aparece no calendário,
   na tabela e na galeria, e abre com a mesma animação. */
.cal-note-chip[data-kind="quadro"] {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed var(--chip-color);
  border-left: 3px solid var(--chip-color);
  background: color-mix(in oklch, var(--chip-color) 8%, var(--bg));
  cursor: pointer;
}

.cal-note-chip[data-kind="quadro"]::before {
  content: 'space_dashboard';
  font-family: 'Material Symbols Rounded';
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--chip-color);
}

.board-thumb { width: 100%; height: 100%; display: block; }
.board-thumb rect { fill: color-mix(in oklch, var(--tc) 28%, var(--bg)); stroke: var(--tc); stroke-width: 6; }
.board-thumb line { stroke: var(--graph-edge); stroke-width: 5; }

.type-tag {
  font-size: 10.5px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.type-tag .material-symbols-rounded { font-size: 14px; }

/* Superfície do quadro dentro da célula/coluna expandida (reaproveita #inCellNotepad) */
.board-surface { display: none; flex: 1; flex-direction: column; min-height: 0; min-width: 0; }
.in-cell-notepad.is-board > .notepad-body,
.in-cell-notepad.is-board > .notepad-footer { display: none; }
.in-cell-notepad.is-board > .board-surface { display: flex; }

.board-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.board-tool {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.board-tool:hover { background: var(--bg-hover); color: var(--text); }
.board-tool.is-active { border-color: var(--border); background: var(--bg-hover); color: var(--accent); }
.board-tool .material-symbols-rounded { font-size: 18px; }
.board-toolbar-spacer { flex: 1; }
.board-zoom-label { min-width: 44px; text-align: center; font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.board-canvas {
  --bz: 1;
  --bx: 0px;
  --by: 0px;
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--border) 1.2px, transparent 1.4px);
  background-size: calc(24px * var(--bz)) calc(24px * var(--bz));
  background-position: var(--bx) var(--by);
}

.board-canvas.bg-grid {
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
}

.board-canvas.bg-none { background-image: none; }
.board-canvas.is-panning { cursor: grabbing; }

.board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.board-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.board-edges.is-hidden-edges { display: none; }
.board-edges path { fill: none; stroke: var(--graph-edge); stroke-width: 2; }

.board-card {
  --card-color: var(--accent);
  position: absolute;
  width: 150px;
  height: 60px;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: color-mix(in oklch, var(--card-color) 14%, var(--bg));
  border: 1px solid var(--card-color);
  border-left: 4px solid var(--card-color);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: move;
  user-select: none;
}

.board-card[data-group="projeto"] { --card-color: var(--graph-projeto); }
.board-card[data-group="reuniao"] { --card-color: var(--graph-reuniao); }
.board-card[data-group="ideia"]   { --card-color: var(--graph-ideia); }
.board-card[data-group="pessoal"] { --card-color: var(--graph-pessoal); }

.board-hint {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
  pointer-events: none;
}

.bg-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bg-segmented button {
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.bg-segmented button:hover { background: var(--bg-hover); color: var(--text); }
.bg-segmented button.is-active { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); font-weight: 600; }
#boardZoomRange { width: 120px; accent-color: var(--accent); }