/* /css/my-exercises.css */

/* --- Filter Styles --- */
.exercise-filter-toggles {
    margin-bottom: 1.5em;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid #eee;
}
.filter-toggle-button {
    padding: 6px 12px;
    font-size: 0.9em;
    border: 1px solid #800080;
    background-color: #ffffff;
    color: #800080;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
    text-align: center;
}
.filter-toggle-button:hover {
    background-color: #f0e6f0;
    color: #6a006a;
}
.filter-toggle-button.active {
    background-color: #800080;
    color: #ffffff;
    border-color: #800080;
}
.filter-toggle-button.active:hover {
    background-color: #6a006a;
    border-color: #6a006a;
}

/* --- Base List Styles --- */
.my-exercises-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.my-exercises-list .month-year-group {
    margin-bottom: 1em;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
.my-exercises-list .month-year-group.hidden-by-filter {
    display: none;
}
.my-exercises-list h3.month-year-heading {
    background-color: #f0f0f0;
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Month Toggle Arrow */
.my-exercises-list h3.month-year-heading .month-toggle {
    display: inline-block;
    color: #800080;
    font-size: 0.8em;
    user-select: none;
    transition: transform 0.2s ease;
    transform-origin: center center;
}
.my-exercises-list h3.month-year-heading.collapsed .month-toggle {
   transform: rotate(-90deg);
}
.collapsible-month-exercises {
    display: none;
    padding: 0 15px 10px 15px;
    background-color: #fff;
}
.collapsible-month-exercises.visible {
    display: block;
}

/* --- Exercise Item Styles --- */
.my-exercises-list .exercise-item-wrapper {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: block;
}
.my-exercises-list .exercise-item-wrapper.hidden-by-filter {
    display: none;
}
.my-exercises-list .exercise-item-wrapper:last-child {
    border-bottom: none;
}
/* Main row container */
.my-exercises-list .exercise-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust gap between elements */
    flex-wrap: nowrap; /* Keep items on one line */
    overflow: hidden; /* Prevent content spillover */
 }
/* Type label */
.my-exercises-list .exercise-type {
    font-size: 0.8em;
    font-weight: bold;
    color: #666;
    background-color: #eee;
    padding: 2px 6px; /* Adjusted padding for height consistency */
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent type label from shrinking */
    line-height: 1.2; /* Added for height consistency */
    display: inline-flex; /* Added for alignment */
    align-items: center; /* Added for alignment */
 }
/* Level label */
.my-exercises-list .exercise-level {
    font-size: 0.75em; /* Very small */
    font-weight: bold;
    color: #333; /* Default text color, will be overridden */
    background-color: #e0e0e0; /* Gray background */
    padding: 2px 5px; /* Adjusted padding for height consistency */
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent level label from shrinking */
    margin-left: 0; /* No gap */
    line-height: 1.2; /* Adjusted for height consistency */
    text-transform: uppercase; /* Ensure A1, B2 etc. are uppercase */
    display: inline-flex; /* Added for alignment */
    align-items: center; /* Added for alignment */
}
 /* Title */
.my-exercises-list .exercise-title {
    flex-grow: 1; /* Allow title to grow */
    flex-shrink: 1; /* Allow title to shrink */
    margin: 0;
    font-size: 1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 80px; /* Prevent excessive shrinking */
}
.my-exercises-list .exercise-title.clickable-title {
    cursor: pointer;
}
/* Sub-item toggle arrow */
.my-exercises-list .subitems-toggle {
    display: inline-block;
    cursor: pointer;
    color: #800080;
    font-size: 0.8em;
    user-select: none;
    transition: transform 0.2s ease;
    flex-shrink: 0; /* Prevent arrow from shrinking */
    padding: 0 5px;
    line-height: 1;
    transform-origin: center center;
    transform: rotate(-90deg); /* Default state: Point right */
}
.my-exercises-list .subitems-toggle.expanded {
     transform: rotate(0deg); /* Point down when expanded */
}
/* Main action links container */
.my-exercises-list .exercise-links {
    flex-shrink: 0; /* Prevent link container from shrinking */
    display: flex;
    gap: 10px; /* Space between buttons */
    justify-content: flex-end; /* Align buttons right WITHIN the container */
    align-items: center;
    margin-left: auto;
 }
/* Shared button styles */
.my-exercises-list .exercise-links a.button-style,
.my-exercises-list .subitem-links a.button-style {
     display: inline-flex; align-items: center; justify-content: center;
     padding: 4px 8px; font-size: 0.85em; color: white !important;
     background-color: #800080; border-radius: 3px; text-decoration: none !important;
     white-space: nowrap; transition: background-color 0.2s ease;
     min-width: 45px; text-align: center; box-sizing: border-box; line-height: 1;
}
.my-exercises-list .exercise-links a.button-style:hover,
.my-exercises-list .subitem-links a.button-style:hover {
    background-color: #6a006a; color: white !important;
 }
/* PDF icon link */
.my-exercises-list .exercise-links a.pdf-icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 45px; text-decoration: none !important; line-height: 1;
    background-color: transparent !important; padding: 0; border: none;
}
.my-exercises-list .exercise-links a.pdf-icon-link:hover {
    background-color: transparent !important; opacity: 0.8;
}
.my-exercises-list .pdf-icon-img {
    height: 1.6em; width: auto; vertical-align: middle; margin: 0; display: block;
}
/* PDF placeholder */
.my-exercises-list .pdf-placeholder {
    display: none;
}

/* --- Styles for Hardcoded Sub-items --- */
.collapsible-subitems {
    display: none; padding-left: 40px; margin-top: 10px; margin-bottom: 8px;
}
.collapsible-subitems.visible {
    display: block;
}
.collapsible-subitems .subitem-wrapper {
    padding: 8px 0; border-bottom: 1px solid #f0f0f0;
}
.collapsible-subitems .subitem-wrapper:last-child {
     border-bottom: none; padding-bottom: 4px;
}
/* Sub-item row container */
.collapsible-subitems .subitem {
    display: flex; align-items: center; gap: 15px; flex-wrap: nowrap;
}
/* Sub-item title */
.collapsible-subitems .subitem-title {
    flex-grow: 1; font-size: 0.95em; color: #333;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Sub-item links container */
.collapsible-subitems .subitem-links {
    flex-shrink: 0; width: 170px; /* Keep fixed width for alignment */
    display: flex; justify-content: flex-start; align-items: center; gap: 10px;
}

/* --- Type Abbreviation Handling (Default) --- */
.exercise-type .type-abbr {
    display: none; /* Hide abbreviation by default */
}
.exercise-type .type-full {
    display: inline; /* Show full name by default */
}

/* --- Styles for smaller screens --- */
@media (max-width: 650px) { /* Adjust this breakpoint as needed */

    /* Shorten Exercise Type Label */
    .exercise-type .type-full {
        display: none; /* Hide full name on mobile */
    }
    .exercise-type .type-abbr {
        display: inline; /* Show abbreviation on mobile */
        font-weight: bold;
    }
    .exercise-type {
         padding: 2px 5px; /* Adjusted for mobile */
         min-width: 25px;
         text-align: center;
         line-height: 1.2; /* Consistent line height */
    }
    .exercise-level {
        font-size: 0.7em; /* Even smaller on mobile */
        padding: 2px 4px; /* Adjusted for mobile */
        margin-left: 0; /* No gap on mobile */
        line-height: 1.2; /* Consistent line height */
    }

    /* Adjust main exercise item layout */
    .my-exercises-list .exercise-item {
        gap: 8px; /* Reduce gap slightly */
    }
    .my-exercises-list h3.month-year-heading {
        font-size: 1.1em;
        padding: 8px 12px;
    }
    .my-exercises-list .exercise-title {
        font-size: 0.85em;
    }
    /* Make main links container more flexible */
    .my-exercises-list .exercise-links {
        gap: 5px; /* Reduce gap between buttons */
    }
     /* Reduce button padding/size on mobile */
    .my-exercises-list .exercise-links a.button-style,
    .my-exercises-list .subitem-links a.button-style { /* Apply to sub-items too */
        padding: 3px 6px;
        font-size: 0.8em;
        min-width: 38px;
    }
    .my-exercises-list .exercise-links a.button-style:nth-child(2),
    .my-exercises-list .subitem-links a.button-style:nth-child(2) {
        display: none;
    }
    .my-exercises-list .exercise-links a.pdf-icon-link {
        min-width: 38px; /* Match button min-width */
    }
     .my-exercises-list .pdf-icon-img {
         height: 1.5em; /* Slightly smaller icon */
     }


    /* Adjust sub-item layout */
    .collapsible-subitems .subitem {
        gap: 8px; /* Reduce gap */
        /* flex-wrap: wrap; Allow sub-item links to wrap below title if necessary */
    }
    .collapsible-subitems .subitem-title {
        font-size: 0.85em;
    }
    /* Make sub-item links container flexible */
    .collapsible-subitems .subitem-links {
        width: auto; /* Remove fixed width */
        min-width: 80px; /* Allow shrinking (View + Edit) */
        justify-content: flex-start; /* Keep align left */
        /* If wrapping: width: 100%; justify-content: flex-end; margin-top: 5px; */
        gap: 5px; /* Reduce gap */
    }
    /* Sub-item button sizes already reduced by the general rule above */

} /* End Media Query */

/* --- Level Color Coding --- */
.my-exercises-list .exercise-level.level-a1 { color: #3CB371 !important; /* MediumSeaGreen */ }
.my-exercises-list .exercise-level.level-a2 { color: #006400 !important; /* Dark Green */ }
.my-exercises-list .exercise-level.level-b1 { color: #4682B4 !important; /* SteelBlue */ }
.my-exercises-list .exercise-level.level-b2 { color: #00008B !important; /* Dark Blue */ }
.my-exercises-list .exercise-level.level-c1 { color: #F08080 !important; /* Light Red */ }
.my-exercises-list .exercise-level.level-c2 { color: #8B0000 !important; /* Dark Red */ }