/* Shared semantics for desktop controls; layout overrides stay desktop-only. */
.table-title-button,
.table-sort-button,
.gantt-title-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.table-title-button { font-weight: 600; }
.gantt-title-button { font-size: 0.8125rem; font-weight: 500; }
.table-title-button:hover,
.table-sort-button:hover { color: var(--color-accent); }
.table-title-button:focus-visible,
.table-sort-button:focus-visible,
.gantt-title-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.table-action-label,
.desktop-review-hint { display: none; }

.list-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.list-results-count {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.list-sort-controls { flex-wrap: wrap; min-width: 0; }

@media (min-width: 1025px) {
    .sidebar { width: 220px; }
    .sidebar-header { padding: 1.25rem 1rem; }
    .sidebar-nav { padding: 1rem 0.75rem; }
    .nav-item { padding: 0.75rem; }
    .main-content { margin-left: 220px; }
    .header { padding-inline: 1.5rem; }
    .content-area { padding: 1.25rem 1.5rem; }

    .stat-cards { margin-bottom: 1rem; gap: 0.75rem; }
    .stat-cards .card { padding: 0.875rem 1.125rem !important; }
    .stat-cards .card > div:last-child { font-size: 1.625rem !important; line-height: 1.4; }
    .stat-card-label .go { opacity: 0.5; }
    .tabs { margin-bottom: 1rem; }

    .agenda-toolbar {
        grid-template-columns: minmax(240px, 1fr) minmax(380px, 1fr);
        align-items: center;
        padding: 0.875rem 1rem;
    }
    .agenda-item { padding: 0.75rem 1rem; }
    .agenda-title { white-space: normal; overflow-wrap: anywhere; }

    /* Search stays usable while columns retain readable widths. */
    .card:has(.list-filters) .card-body { padding: 1rem; }
    .list-filters { gap: 0.625rem; }
    .list-filters .search-bar { flex: 1 1 260px; max-width: none; }
    .list-filters .filter-group { flex-shrink: 0; }
    .list-filters .form-select { min-height: 36px; }
    .list-sort-controls { margin-left: auto; }
    .list-sort-controls .form-select { width: auto; }
    #video-sort-field { min-width: 140px; }
    #video-sort-direction { min-width: 95px; }

    .video-list-table,
    .clip-list-table {
        max-height: max(280px, calc(100dvh - 290px));
        overflow: auto;
        position: relative;
        isolation: isolate;
        scrollbar-gutter: stable;
    }
    .video-list-table .table,
    .clip-list-table .table {
        min-width: 1280px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .video-list-table .table th,
    .video-list-table .table td,
    .clip-list-table .table th,
    .clip-list-table .table td {
        padding: 0.625rem 0.75rem;
        vertical-align: middle;
    }
    .video-list-table .table th,
    .clip-list-table .table th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--color-bg-secondary);
    }
    .video-list-table .table td,
    .clip-list-table .table td { background: var(--color-bg-card); }
    .video-list-table .table tbody tr:hover td,
    .clip-list-table .table tbody tr:hover td { background: var(--color-bg-hover); }
    .video-list-table .table :is(th,td):first-child,
    .clip-list-table .table :is(th,td):first-child {
        position: sticky;
        left: 0;
        min-width: 280px;
        max-width: 350px;
        z-index: 2;
        border-right: 1px solid var(--color-border);
    }
    .video-list-table .table :is(th,td):last-child,
    .clip-list-table .table :is(th,td):last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        border-left: 1px solid var(--color-border);
    }
    .video-list-table .table th:first-child,
    .video-list-table .table th:last-child,
    .clip-list-table .table th:first-child,
    .clip-list-table .table th:last-child { z-index: 4; }
    .table-title-button { display: block; line-height: 1.55; overflow-wrap: anywhere; }
    .table-sort-button { min-height: 32px; white-space: nowrap; }
    .video-list-table .editor-badge,
    .video-list-table .badge,
    .clip-list-table .editor-badge,
    .clip-list-table .badge { white-space: nowrap; }
    .table-actions { align-items: center; }
    .table-actions .btn { padding: 0.375rem 0.5rem; min-height: 34px; gap: 0.25rem; }
    .table-action-label { display: inline; font-size: 0.75rem; white-space: nowrap; }

    /* Keep the date axis and horizontal scrollbar within the work area. */
    .gantt-controls { padding: 0.75rem 1rem; gap: 0.5rem; }
    .gantt-control-row { gap: 0.625rem; }
    .gantt-legend { margin-top: 0; padding-top: 0.5rem; }
    .gantt-scroll-wrapper {
        max-width: 100%;
        max-height: max(260px, calc(100dvh - 400px));
        overflow: auto;
        scrollbar-gutter: stable;
        isolation: isolate;
    }
    .gantt-time-axis { z-index: 30; }
    .gantt-today-button { min-height: 32px; }
    .gantt-title-button { width: 100%; }

    /* Dialog actions stay visible while only their content scrolls. */
    .modal-overlay .modal {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 48px);
        overflow: hidden;
    }
    .modal-header { flex: 0 0 auto; gap: 1rem; padding: 1rem 1.25rem; }
    .modal-title { min-width: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
    .modal-close { flex: 0 0 36px; width: 36px; height: 36px; }
    .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1.25rem; }
    .modal-footer { flex: 0 0 auto; background: var(--color-bg-card); }
    #video-detail-modal .modal { width: min(920px, calc(100vw - 64px)); max-width: 920px !important; }
    #video-detail-modal .vd-body { gap: 1rem; }
    #video-detail-modal .vd-body > div { min-width: 0; overflow-wrap: anywhere; }

    /* Player, timecode and composer remain visible alongside the comment queue. */
    #delivery-review-modal .modal {
        width: calc(100vw - 32px);
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
    }
    #delivery-review-modal .modal-body:has(.delivery-review-container) {
        display: flex;
        overflow: hidden;
        padding: 1rem;
    }
    #delivery-tab-content:has(.delivery-review-container) {
        flex: 1;
        min-width: 0;
        min-height: 0 !important;
    }
    #delivery-review-modal .delivery-review-container {
        height: 100%;
        min-height: 0;
        grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
        gap: 1rem;
    }
    #delivery-review-modal .delivery-player-section {
        display: grid;
        grid-template-rows: auto minmax(140px, 1fr) auto;
        gap: 0.75rem;
        min-height: 0;
    }
    #delivery-review-modal .version-selector-bar { margin: 0; padding: 0.5rem 0.75rem; gap: 0.5rem; }
    #delivery-review-modal .version-actions { gap: 0.5rem; }
    #delivery-review-modal .video-player-wrapper { aspect-ratio: auto; min-height: 0; height: 100%; }
    #delivery-review-modal .comment-input-section { padding: 0.75rem; }
    #delivery-review-modal .comment-compose textarea { min-height: 76px; max-height: 120px; resize: vertical; }
    #delivery-review-modal .desktop-review-hint { display: block; margin: 0.375rem 0 0; font-size: 0.6875rem; }
    #delivery-review-modal .delivery-comment-section { min-width: 0; min-height: 0; max-height: none; height: 100%; }
    #delivery-review-modal .comment-panel-header { flex: 0 0 auto; padding: 0.625rem 0.75rem; }
    #delivery-review-modal .comment-list { min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
    #delivery-review-modal .comment-body,
    #delivery-review-modal .comment-author { overflow-wrap: anywhere; }
    #delivery-review-modal .comment-actions { opacity: 1; flex-wrap: wrap; }
    #delivery-review-modal .comment-actions .btn { min-height: 32px; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    #delivery-review-modal .comment-timecode { min-height: 28px; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
}

/* At high browser zoom/short windows, preserve access through one outer scroll. */
@media (min-width: 1025px) and (max-height: 620px) {
    #delivery-review-modal .modal-body:has(.delivery-review-container) { overflow-y: auto; }
    #delivery-review-modal .delivery-review-container { min-height: 420px; }
}

@media (min-width: 1025px) and (max-width: 1547px) {
    .list-results-count::after {
        content: ' · 横スクロールで全項目';
        color: var(--color-text-muted);
        font-size: 0.75rem;
    }
}