/* assets/css/coachinglab.css */

.coachinglab-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.video-tile {
    border: 1px solid #ccc;
    padding: 20px;
    background: #fff;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.1);
    border-radius: 1rem;
    color: #000;
    font-size: 16px;
}

.video-tile h3 {
    font-size: 24px;
}

.mark-done {
    border: none;
    cursor: pointer;
    border-radius: 100rem;
    font-size: 0.8rem !important;
}

.mark-done:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.desc {
    margin-top: 10px;
}

#path-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 9999;
    width: 80%;
    max-width: 1080px;
}

.video-list-groups {
    max-height: 480px;
    overflow-y: scroll;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.videos-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1em;
}

.videos-list span {
	background: white;
	border-radius: 100em;
	border: 1px solid #ccc;
	padding: 0.125em 0.5em;
}

.wp-core-ui .wp-list-table .button {
line-height: 1 !important;
}

.wp-core-ui .wp-list-table .button.red {
background: red !important;
color: white !important;
}

.wp-core-ui .wp-list-table .button.green {
background: green !important;
color: white !important;
}

@media screen and (max-width: 1280px) {
.videos-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75em;
}
}

@media screen and (max-width: 960px) {
.videos-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
}
}

.videos-list {
    background: #f9f9f9;
    padding: 10px;
    margin-top: 10px;
}