/**
 * Progress Mode — Styles for Plan/Gantt inline in list-with-progress.
 */

/* Panel container */
.progress-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header: toggle group + edit button */
.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 6px 8px;
    border-bottom: 1px solid #ddd;
}

/* Toggle group — mirrors mode-toggle-group from ListModes */
.progress-toggle-group {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--itg-border-color, #e5e7eb);
    border-radius: var(--itg-border-radius, 8px);
    background-color: #fff;
    overflow: hidden;
    height: var(--itg-height, 36px);
    margin: 0;
    padding: 0;
}

.progress-toggle-group .progress-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--itg-button-padding, 8px 12px) !important;
    margin: 0 !important;
    height: 100% !important;
    min-width: 40px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
}

.progress-toggle-group .progress-tab-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: var(--itg-separator-color, #e5e7eb);
}

.progress-toggle-group .progress-tab-btn .fas {
    color: var(--itg-icon-color, #9ca3af) !important;
    font-size: var(--itg-icon-size, 16px) !important;
    transition: color 0.15s ease !important;
    margin: 0 !important;
}

.progress-toggle-group .progress-tab-btn:hover {
    background-color: var(--itg-bg-hover, #f9fafb) !important;
}

.progress-toggle-group .progress-tab-btn:hover .fas {
    color: var(--itg-icon-color-hover, #6b7280) !important;
}

.progress-toggle-group .progress-tab-btn.active {
    background-color: transparent !important;
}

.progress-toggle-group .progress-tab-btn.active .fas {
    color: var(--itg-icon-color-active, #2563EB) !important;
}

.progress-toggle-group .progress-tab-btn.active:hover {
    background-color: var(--itg-bg-hover, #f9fafb) !important;
}

/* Edit button */
.progress-edit-btn {
    margin-right: 0;
    white-space: nowrap;
}

/* Tab content area */
.progress-tab-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
    position: relative;
}

/* Right panel in progress mode */
.right-panel.progress-mode {
    overflow: hidden;
}

/* Plan table (read-only) */
.progress-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.progress-plan-table thead th {
    background: #f7f7f7;
    border-bottom: 2px solid #ddd;
    padding: 6px 8px;
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.progress-plan-table tbody tr {
    border-bottom: 1px solid #eee;
}

.progress-plan-table tbody tr:hover {
    background: #f9fafb;
}

.progress-plan-table td {
    padding: 5px 8px;
    vertical-align: middle;
}

.progress-plan-table .plan-row-mission {
    background: #fafafa;
    font-weight: 600;
}

/* Gantt container */
.progress-gantt-container {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* Placeholder */
.progress-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 14px;
    gap: 8px;
}

/* Loading */
.progress-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    gap: 6px;
}

/* Label badges in plan table */
.progress-plan-table .label {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
}