/* 展開されたカード用のアニメーション */
.expanded-card {
    /* Main container is visible to allow sticky button to work */
    overflow: visible !important;
}

/* Inner content wrapper handles the expansion animation */
.expanded-card-content {
    animation: expandCard 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.expanded-card.fully-expanded .expanded-card-content {
    overflow: visible !important;
    max-height: none !important;
}

.expanded-card.collapsing .expanded-card-content {
    animation: collapseCard 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden !important;
}

@keyframes expandCard {
    from {
        max-height: 150px;
        opacity: 1;
        transform: scaleY(0.98);
        transform-origin: top;
    }

    to {
        max-height: 20000px;
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

@keyframes collapseCard {
    from {
        max-height: 20000px;
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }

    to {
        max-height: 150px;
        opacity: 1;
        transform: scaleY(0.98);
        transform-origin: top;
    }
}

/* セル編集要素の表示用（ハイライト用）スタイル */
.cell-text-display {
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    display: none;
    /* デフォルトは非表示 */
}

/* タイトル用表示スタイル */
.cell-title-display {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    min-height: 28px;
    color: var(--text-primary);
    line-height: normal;
    /* textareaの継承値に合わせるかもしくは指定 */
}

/* 値用表示スタイル */
.cell-value-display {
    font-size: 1.125rem;
    padding: 4px 0;
    color: var(--text-secondary);
    line-height: 1.5;
    min-height: 32px;
}

/* タスク用表示スタイル */
.task-cell-title-display {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    background: transparent;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    min-height: 28px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
    display: none;
}

/* 展開カード内の閉じるボタンを白色に */
.expanded-card .close-dialog-btn {
    color: rgba(255, 255, 255, 0.9);
}

.expanded-card .close-dialog-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}