.TrainingEntriesLayout {
    display: contents;
}

#TrainingEntriesStatus {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    box-sizing: border-box;
    max-width: min(380px, calc(100vw - 32px));
    margin: 0;
    padding: 12px 16px;
    color: var(--textColor);
    background: var(--mainPageCardBgColor);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.TrainingSavedExerciseGroups {
    display: grid;
    gap: 15px;
    max-height: 620px;
    overflow: auto;
}

.TrainingSavedExerciseGroup h6 {
    margin: 0 0 7px;
    color: var(--textColor);
    opacity: 0.75;
    text-transform: capitalize;
}

.TrainingSavedExerciseGroup div {
    display: grid;
    gap: 6px;
}

.TrainingAddExerciseButton {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: inherit;
    background: var(--mainPageButtonBgColor);
    text-align: left;
    cursor: pointer;
}

.TrainingAddExerciseButton:hover {
    border-color: var(--mainPageBorderColor);
    background: var(--activeElementBgColor);
}

.TrainingAddExerciseButton span {
    opacity: 0.6;
    font-size: 0.72rem;
}

.TrainingSessionDate {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

.TrainingSessionDate input {
    padding: 8px;
    border: 1px solid var(--mainPageBorderColor, rgba(127, 127, 127, 0.3));
    border-radius: 8px;
    color: inherit;
    background: var(--mainPageButtonBgColor);
}

.TrainingSessionTable {
    width: 100%;
    border-collapse: collapse;
}

.TrainingSessionTable th,
.TrainingSessionTable td {
    padding: 10px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
    text-align: left;
    vertical-align: top;
}

.TrainingSessionTable th {
    opacity: 0.6;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.TrainingSessionRow > td:first-child {
    min-width: 150px;
}

.TrainingSessionRow > td:first-child span {
    display: block;
    margin-top: 4px;
    opacity: 0.62;
    font-size: 0.75rem;
}

.TrainingSessionRow .TrainingEntryFields {
    min-width: 280px;
    margin: 0;
}

.TrainingEntryNotes {
    box-sizing: border-box;
    min-width: 180px;
    width: 100%;
    padding: 9px;
    border: 1px solid var(--mainPageBorderColor, rgba(127, 127, 127, 0.3));
    border-radius: 8px;
    color: inherit;
    background: var(--mainPageButtonBgColor);
    font: inherit;
    resize: vertical;
}

.TrainingEntriesHistory {
    overflow-x: auto;
    border: 1px solid var(--mainPageBorderColor, rgba(127, 127, 127, 0.3));
    border-radius: 8px;
}

.TrainingHistoryActions { display:flex; gap:12px; align-items:center; }
.TrainingEntriesTable { width:100%; min-width:900px; border-collapse:collapse; }
.TrainingEntriesTable th, .TrainingEntriesTable td { padding:10px 12px; border-right:1px solid rgba(127,127,127,.12); border-bottom:1px solid rgba(127,127,127,.16); text-align:left; vertical-align:top; white-space:nowrap; }
.TrainingEntriesTable th { position:sticky; top:0; z-index:1; color:var(--textColor); background:var(--mainPageCardBgColor, var(--mainPageBodyBgColor)); font-size:.72rem; text-transform:uppercase; }
.TrainingEntriesTable tbody tr:hover { background:var(--activeElementBgColor); }
.TrainingEntriesTable td:last-child, .TrainingEntriesTable th:last-child { border-right:0; }
.TrainingEntriesTable tbody tr:last-child td { border-bottom:0; }
.TrainingEntriesTable .TrainingEntryNotesCell { min-width:180px; max-width:340px; white-space:pre-wrap; }
.TrainingExportCsvButton:disabled, #TrainingExportCsvButton:disabled { opacity:.45; cursor:not-allowed; }

.TrainingJournalComposer, .TrainingJournalList { display:grid; gap:10px; }
.TrainingJournalComposer textarea, .TrainingJournalReplyForm textarea { box-sizing:border-box; width:100%; padding:10px; border:1px solid var(--mainPageBorderColor); border-radius:8px; color:var(--textColor); background:var(--mainPageButtonBgColor); font:inherit; resize:vertical; }
.TrainingJournalComposer .TrainingPrimaryButton { justify-self:end; }
.TrainingJournalNote { padding:12px; border:1px solid var(--mainPageBorderColor); border-radius:8px; background:var(--mainPageBodyBgColor); }
.TrainingJournalNoteHeader, .TrainingJournalActions, .TrainingJournalReplyForm { display:flex; gap:8px; align-items:flex-start; }
.TrainingJournalMeta { opacity:.65; font-size:.76rem; }
.TrainingJournalContent { margin:10px 0; white-space:pre-wrap; }
.TrainingJournalReplies { display:grid; gap:7px; margin:10px 0; }
.TrainingJournalReply { padding:8px 10px; border-left:3px solid var(--activeElementBgColor); background:var(--mainPageCardBgColor); }
.TrainingJournalReply p { margin:4px 0 0; white-space:pre-wrap; }
.TrainingJournalReplyForm textarea { flex:1; }

.TrainingHistoryRow {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.8fr) minmax(180px, 1.4fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.14);
}

.TrainingHistoryRow span {
    opacity: 0.65;
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .TrainingEntriesLayout {
        grid-template-columns: 1fr;
    }

    .TrainingSavedExerciseGroups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 280px;
    }

    .TrainingSavedExerciseGroup { min-width: 0; }
}

@media (max-width: 600px) {
    #TrainingEntriesStatus {
        right: 12px;
        bottom: 12px;
        max-width: min(280px, calc(100vw - 24px));
        padding: 9px 12px;
        font-size: 0.82rem;
    }

    .TrainingSavedExerciseGroups { grid-template-columns: 1fr; }

    .TrainingHistoryRow {
        grid-template-columns: 1fr;
    }

    .TrainingSubHeader {
        flex-direction: column;
    }

    .TrainingSubHeader .TrainingPrimaryButton {
        width: 100%;
    }

    .TrainingHistoryActions { width:100%; flex-direction:column; align-items:stretch; }
}