/* monster-sheet – Excel-like grid control */

:host {
  --sheet-border-color: var(--monster-theme-control-border-color);
  --sheet-border-strong: var(--monster-color-primary-4);
  --sheet-border-width: var(--monster-theme-control-border-width, 1px);
  --sheet-border-style: var(--monster-theme-control-border-style, solid);
  --sheet-header-bg: var(--monster-bg-color-primary-2);
  --sheet-header-fg: var(--monster-color-primary-1);
  --sheet-cell-bg: var(--monster-bg-color-primary-1);
  --sheet-cell-fg: var(--monster-color-primary-1);
  --sheet-grid-gap: 0;
  --sheet-row-header-width: 56px;
  --sheet-header-height: 32px;
  --sheet-cell-padding-inline: 8px;
  --sheet-cell-padding-block: 6px;
  --sheet-resize-handle: 6px;
  color: var(--sheet-cell-fg);
  display: block;
  font-family: var(--monster-font-family);
}

[part="control"] {
  display: flex;
  flex-direction: column;
  gap: var(--monster-space-4);
  height: 100%;
}

[part="toolbar"] {
  display: flex;
  gap: var(--monster-space-4);
}

[part="grid-wrapper"] {
  border: var(--sheet-border-width) var(--sheet-border-style)
          var(--sheet-border-color);
  overflow: auto;
  position: relative;
  flex: 1;
  min-height: 0;
}

[part="grid"] {
  display: grid;
  gap: var(--sheet-grid-gap);
  min-width: max-content;
  background: var(--sheet-cell-bg);
}

:host([data-virtualized]) [part="grid"] {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

:host([data-virtualized]) [part="corner"],
:host([data-virtualized]) [part="column-header"],
:host([data-virtualized]) [part="row-header"] {
  position: relative;
}

:host([data-resizing]) [part="grid"] {
  user-select: none;
}

[part="corner"],
[part="column-header"],
[part="row-header"] {
  background: var(--sheet-header-bg);
  color: var(--sheet-header-fg);
  display: flex;
  align-items: center;
  font-weight: 600;
  position: sticky;
  z-index: 2;
  white-space: nowrap;
  word-break: keep-all;
}

[part="corner"] {
  left: 0;
  top: 0;
  z-index: 3;
}

[part="column-header"] {
  top: 0;
  justify-content: center;
}

[part="row-header"] {
  left: 0;
  justify-content: flex-end;
  padding-inline: var(--sheet-cell-padding-inline);
}

[part="cell"] {
  border-right: var(--sheet-border-width) var(--sheet-border-style)
                var(--sheet-border-color);
  border-bottom: var(--sheet-border-width) var(--sheet-border-style)
                 var(--sheet-border-color);
  background: var(--sheet-cell-bg);
  display: flex;
  align-items: stretch;
}

[part="column-header"],
[part="row-header"],
[part="corner"] {
  border-bottom: var(--sheet-border-width) var(--sheet-border-style)
                 var(--sheet-border-strong);
  border-right: var(--sheet-border-width) var(--sheet-border-style)
                var(--sheet-border-strong);
}

[part="column-header"],
[part="corner"] {
  border-bottom: 0;
}

[part="row-header"],
[part="corner"] {
  border-right: 0;
}

[part="cell-input"] {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: var(--sheet-cell-padding-block) var(--sheet-cell-padding-inline);
  width: 100%;
  outline: none;
}

[part="cell-input"]:focus {
  background: var(--monster-bg-color-primary-2);
}

[part="column-resize"] {
  position: absolute;
  right: -1px;
  top: 0;
  height: 100%;
  width: var(--sheet-resize-handle);
  cursor: col-resize;
  pointer-events: auto;
  touch-action: none;
  z-index: 4;
  background: linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% - 1px),
    var(--sheet-border-strong) calc(100% - 1px),
    var(--sheet-border-strong) 100%
  );
}

[part="row-resize"] {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: var(--sheet-resize-handle);
  cursor: row-resize;
  pointer-events: auto;
  touch-action: none;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - 1px),
    var(--sheet-border-strong) calc(100% - 1px),
    var(--sheet-border-strong) 100%
  );
}