.fi-warp-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fi-warp-sheet-heading {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--gray-950);
}

.dark .fi-warp-sheet-heading {
    color: var(--color-white, #fff);
}

.fi-warp-sheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fi-warp-sheet-search {
    width: 18rem;
    max-width: 100%;
}

.fi-warp-sheet-progress {
    align-self: center;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}

.dark .fi-warp-sheet-progress {
    color: var(--gray-400);
}

/* フィルターの見た目を借りるための入れ物。テーブルの枠や余白は付けない */
.fi-warp-sheet-filters.fi-ta-ctn,
.dark .fi-warp-sheet-filters.fi-ta-ctn {
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.fi-warp-sheet-filters.fi-ta-ctn .fi-ta-header-toolbar {
    padding: 0;
    border: 0;
}

.fi-warp-sheet-count {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.fi-warp-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.fi-warp-sheet-frame {
    position: relative;
    min-height: 16rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 5%, transparent);
}

.dark .fi-warp-sheet-frame {
    background: var(--gray-900);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-canvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* スクロールだけを受け持つ透明な層。中身は canvas に描く */
.fi-warp-sheet-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    outline: none;
    user-select: none;
}

.fi-warp-sheet-spacer {
    pointer-events: none;
}

.fi-warp-sheet-editor {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 8px;
    border: 2px solid var(--primary-600);
    background: #fff;
    color: var(--gray-950);
    font: inherit;
    font-size: 14px;
    /* 1 行のときは input と同じに見せる（入力欄は複数行の列のために textarea） */
    line-height: 28px;
    white-space: pre;
    overflow: hidden;
    resize: none;
    outline: none;
}

/* 複数行の列の編集: 広げて折り返す */
.fi-warp-sheet-editor.is-multiline {
    padding: 4px 8px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow: auto;
}

/* 待機中: 編集していないあいだもカーソルのセルに重ねてフォーカスしておく（IME を働かせるため）。見せない */
.fi-warp-sheet-editor.is-standby {
    opacity: 0;
    pointer-events: none;
    caret-color: transparent;
}

.dark .fi-warp-sheet-editor {
    border-color: var(--primary-500);
    background: var(--gray-900);
    color: #fff;
}

.fi-warp-sheet-status {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.25rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.dark .fi-warp-sheet-status,
.dark .fi-warp-sheet-count {
    color: var(--gray-400);
}

/* 選択の列の選択肢。入力欄の下（入りきらなければ上）に出る */
.fi-warp-sheet-dropdown {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 5%, transparent);
    font-size: 14px;
}

.dark .fi-warp-sheet-dropdown {
    background: var(--gray-900);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-option,
.fi-warp-sheet-option-empty {
    overflow: hidden;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--gray-950);
}

.fi-warp-sheet-option {
    cursor: pointer;
}

.fi-warp-sheet-option:hover {
    background: var(--gray-50);
}

.fi-warp-sheet-option[aria-selected] {
    background: color-mix(in oklab, var(--primary-600) 10%, transparent);
    color: var(--primary-700);
}

.fi-warp-sheet-option-empty {
    color: var(--gray-500);
}

.dark .fi-warp-sheet-option {
    color: #fff;
}

.dark .fi-warp-sheet-option:hover {
    background: color-mix(in oklab, #fff 5%, transparent);
}

.dark .fi-warp-sheet-option[aria-selected] {
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
    color: var(--primary-400);
}

.dark .fi-warp-sheet-option-empty {
    color: var(--gray-400);
}

/* 保存前の変更の一覧: シートの右側に重ねる */
.fi-warp-sheet-changes {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(24rem, 100%);
    background: #fff;
    border-inline-start: 1px solid var(--gray-200);
    box-shadow: -8px 0 24px -12px rgb(0 0 0 / 0.15);
    font-size: 0.875rem;
}

.dark .fi-warp-sheet-changes {
    background: var(--gray-900);
    border-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-changes[x-cloak] {
    display: none;
}

.fi-warp-sheet-changes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-warp-sheet-changes-header {
    border-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-changes-close,
.fi-warp-sheet-change-revert {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.375rem;
    color: var(--gray-500);
}

.fi-warp-sheet-changes-close:hover,
.fi-warp-sheet-change-revert:hover {
    color: var(--gray-950);
    background: var(--gray-100);
}

.dark .fi-warp-sheet-changes-close:hover,
.dark .fi-warp-sheet-change-revert:hover {
    color: #fff;
    background: color-mix(in oklab, #fff 8%, transparent);
}

.fi-warp-sheet-changes-icon {
    width: 1rem;
    height: 1rem;
}

.fi-warp-sheet-changes-list {
    flex: 1;
    overflow-y: auto;
}

.fi-warp-sheet-change {
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    border-inline-start: 3px solid var(--warning-500);
}

.fi-warp-sheet-change[data-kind='new'] {
    border-inline-start-color: var(--success-500);
}

.fi-warp-sheet-change[data-kind='deleted'] {
    border-inline-start-color: var(--danger-500);
}

.dark .fi-warp-sheet-change {
    border-bottom-color: color-mix(in oklab, #fff 6%, transparent);
}

.fi-warp-sheet-change-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-warp-sheet-change-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.fi-warp-sheet-change-kind {
    font-size: 0.75rem;
    color: var(--danger-600);
}

.fi-warp-sheet-change-cell {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-warp-sheet-change-values {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0 0.375rem;
    min-width: 0;
    padding: 0.125rem 0;
    text-align: start;
    color: var(--gray-600);
}

.dark .fi-warp-sheet-change-values {
    color: var(--gray-300);
}

.fi-warp-sheet-change-label {
    color: var(--gray-500);
}

.fi-warp-sheet-change-before {
    text-decoration: line-through;
    color: var(--gray-400);
}

.fi-warp-sheet-change-after {
    font-weight: 500;
    color: var(--gray-950);
}

.dark .fi-warp-sheet-change-after {
    color: #fff;
}

.fi-warp-sheet-changes-empty,
.fi-warp-sheet-changes-more {
    padding: 0.75rem 1rem;
    color: var(--gray-500);
}

/* 「列」メニュー */
.fi-warp-sheet-column-menu {
    display: flex;
    flex-direction: column;
    padding: 0.375rem;
    font-size: 0.875rem;
}

.fi-warp-sheet-column-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.fi-warp-sheet-column-option:hover {
    background: var(--gray-50);
}

.dark .fi-warp-sheet-column-option:hover {
    background: color-mix(in oklab, #fff 5%, transparent);
}

.fi-warp-sheet-column-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.fi-warp-sheet-column-move {
    display: inline-flex;
    color: var(--gray-400);
}

.fi-warp-sheet-column-move button:hover {
    color: var(--gray-950);
}

.dark .fi-warp-sheet-column-move button:hover {
    color: #fff;
}

.fi-warp-sheet-column-reset {
    margin-top: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--gray-100);
    text-align: start;
    color: var(--gray-500);
}

.dark .fi-warp-sheet-column-reset {
    border-color: color-mix(in oklab, #fff 8%, transparent);
}

/* 「ビュー」メニュー */
.fi-warp-sheet-view-name {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    text-align: start;
}

.fi-warp-sheet-view-badge {
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    color: var(--gray-600);
    background: var(--gray-100);
}

.dark .fi-warp-sheet-view-badge {
    color: var(--gray-300);
    background: color-mix(in oklab, #fff 8%, transparent);
}

.fi-warp-sheet-views-empty {
    padding: 0.25rem 0.5rem;
    color: var(--gray-500);
}

.fi-warp-sheet-view-reset {
    margin-top: 0;
    border-top: 0;
}

/* 右クリックのメニュー */
.fi-warp-sheet-context-menu {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.25);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 8%, transparent);
    font-size: 0.875rem;
}

.dark .fi-warp-sheet-context-menu {
    background: var(--gray-900);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-context-menu[x-cloak] {
    display: none;
}

.fi-warp-sheet-context-item {
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    text-align: start;
}

.fi-warp-sheet-context-item:hover:not(:disabled) {
    background: var(--gray-100);
}

.dark .fi-warp-sheet-context-item:hover:not(:disabled) {
    background: color-mix(in oklab, #fff 6%, transparent);
}

.fi-warp-sheet-context-item:disabled {
    color: var(--gray-400);
}

/* 列ごとのフィルター */
.fi-warp-sheet-filter-panel {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 18rem;
    overflow: hidden;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.25);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 8%, transparent);
    font-size: 0.875rem;
}

.dark .fi-warp-sheet-filter-panel {
    background: var(--gray-900);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-filter-panel[x-cloak],
.fi-warp-sheet-clear-filters[x-cloak] {
    display: none;
}

.fi-warp-sheet-filter-title {
    font-weight: 600;
}

.fi-warp-sheet-filter-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--gray-600);
}

.fi-warp-sheet-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0.25rem 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: var(--primary-700);
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
}

.fi-warp-sheet-group button {
    display: inline-flex;
    align-items: center;
    color: var(--gray-600);
}

.fi-warp-sheet-group button:hover {
    color: var(--primary-600);
}

.dark .fi-warp-sheet-group {
    color: var(--primary-300);
    background: color-mix(in oklab, var(--primary-400) 15%, transparent);
}

.dark .fi-warp-sheet-group button {
    color: var(--gray-300);
}

.fi-warp-sheet-filter-sort button:hover {
    color: var(--primary-600);
}

.dark .fi-warp-sheet-filter-sort {
    color: var(--gray-300);
}

.fi-warp-sheet-filter-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.fi-warp-sheet-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--gray-500);
}

.fi-warp-sheet-filter-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--gray-300);
    background: transparent;
    color: var(--gray-950);
}

.dark .fi-warp-sheet-filter-input {
    border-color: color-mix(in oklab, #fff 15%, transparent);
    color: #fff;
}

.fi-warp-sheet-filter-values {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}

/* 枠に入りきらないときは、選択肢の一覧だけが縮んでスクロールする（ボタンはいつも見える） */
.fi-warp-sheet-filter-options {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 3rem;
    max-height: 14rem;
    overflow-y: auto;
}

.fi-warp-sheet-filter-actions,
.fi-warp-sheet-filter-title,
.fi-warp-sheet-filter-sort {
    flex: none;
}

.fi-warp-sheet-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.125rem;
    cursor: pointer;
}

.fi-warp-sheet-filter-empty {
    font-style: italic;
    color: var(--gray-500);
}

.fi-warp-sheet-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.fi-warp-sheet-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: var(--primary-700);
    background: color-mix(in oklab, var(--primary-500) 12%, transparent);
}

.dark .fi-warp-sheet-clear-filters {
    color: var(--primary-300);
}

/* シートの中の検索と置換 */
.fi-warp-sheet-finder {
    position: absolute;
    z-index: 4;
    top: 0.375rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: min(26rem, calc(100% - 1rem));
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.25);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 8%, transparent);
    font-size: 0.875rem;
}

.dark .fi-warp-sheet-finder {
    background: var(--gray-900);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

.fi-warp-sheet-finder[x-cloak] {
    display: none;
}

.fi-warp-sheet-finder-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-warp-sheet-finder-row .fi-warp-sheet-filter-input {
    flex: 1;
    min-width: 0;
}

.fi-warp-sheet-finder-status {
    min-width: 4.5rem;
    font-size: 0.75rem;
    text-align: end;
    color: var(--gray-500);
    white-space: nowrap;
}

.fi-warp-sheet-finder-spacer {
    width: 1.5rem;
}

.fi-warp-sheet-finder-button {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    color: var(--gray-700);
    background: var(--gray-100);
}

.dark .fi-warp-sheet-finder-button {
    color: var(--gray-200);
    background: color-mix(in oklab, #fff 8%, transparent);
}

.fi-warp-sheet-finder-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline-start: 1.75rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.dark .fi-warp-sheet-finder-option {
    color: var(--gray-300);
}

/* 変更の履歴（モーダル） */
.fi-warp-sheet-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.fi-warp-sheet-history-entry {
    padding-inline-start: 0.75rem;
    border-inline-start: 3px solid var(--warning-500);
}

.fi-warp-sheet-history-entry[data-operation='created'] {
    border-inline-start-color: var(--success-500);
}

.fi-warp-sheet-history-entry[data-operation='deleted'] {
    border-inline-start-color: var(--danger-500);
}

.fi-warp-sheet-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--gray-500);
}

.fi-warp-sheet-history-operation {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .fi-warp-sheet-history-operation {
    color: #fff;
}

.fi-warp-sheet-history-changes {
    margin-top: 0.25rem;
    border-collapse: collapse;
}

.fi-warp-sheet-history-changes th {
    padding-inline-end: 0.75rem;
    font-weight: 500;
    text-align: start;
    color: var(--gray-600);
    vertical-align: top;
}

.dark .fi-warp-sheet-history-changes th {
    color: var(--gray-300);
}

.fi-warp-sheet-history-changes td {
    vertical-align: top;
    white-space: pre-wrap;
}

.fi-warp-sheet-history-before {
    color: var(--gray-500);
    text-decoration: line-through;
}

.fi-warp-sheet-history-arrow {
    padding-inline: 0.375rem;
    color: var(--gray-400);
}

.fi-warp-sheet-history-empty {
    font-size: 0.875rem;
    color: var(--gray-500);
}