/* グローバルなはみ出し修正 */

/* セクション全体の幅制限 */
section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* すべてのカード要素 */
.task-card,
.task-card-detailed,
.progress-card,
.stat-card,
.pricing-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* テキスト要素のはみ出し防止 */
h1, h2, h3, h4, h5, h6, p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* 長いテキストの省略 */
.task-info h3,
.task-name,
.user-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ボタン類のはみ出し防止 */
.btn,
.task-button,
.action-btn,
.filter-btn,
.start-btn,
.nav-btn {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* モーダルコンテンツ */
.modal-content {
    max-width: calc(100vw - 40px);
    margin: 20px;
}

/* タイムライン要素 */
.timeline,
.timeline-segments {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* プログレスダッシュボード修正 */
.progress-dashboard {
    width: 100%;
    box-sizing: border-box;
}

/* ヘッダー修正 */
.header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* モバイルでの余白調整 */
@media (max-width: 480px) {
    /* 画面全体の余白は変更しない */
    
    /* カード要素の余白調整 */
    .task-card-detailed,
    .stat-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* タスクアクションボタンの折り返し */
@media (max-width: 360px) {
    .task-card-detailed {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .task-card-detailed .task-actions {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-start;
    }
}

/* スクロールバーのスタイリング */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}