/* Styles for EGH Account Dashboard */

/* Apply to the content wrapper *inside* the specific tab panels */
/* This assumes the shortcode output is directly within the panel or has a primary wrapper */

/* Targeting panel for "Account Settings" (assuming it's the first tab, index 0) */
/* And "My Exercises" (assuming it's the second tab, index 1) */
/* A more robust way would be to have the shortcodes output a specific class we can target. */
/* For now, we target the panel and expect its direct children or a main content block to be styled. */

/* This will style the tab panel itself. If the shortcodes [account_settings] and [my_exercises]
   output their own single top-level wrapper div, it would be better to target that.
   Let's assume for now we want to constrain any direct content within these panels.
   If the shortcodes output complex structures, this might need refinement.
*/

/* Apply max-width and centering directly to known content wrappers */

.account-settings-section {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px; 
    box-sizing: border-box; 
}

.my-exercises-list {
    max-width: 900px; /* Updated max-width */
    margin-left: auto;
    margin-right: auto;
    padding: 15px; 
    box-sizing: border-box; 
}

.exercise-filter-toggles {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap to the next line if they don't fit */
    gap: 10px; /* Add some space between buttons */
    margin-bottom: 15px; /* Add some space below the filters */
}

/* Fallback for any other direct content if the specific classes above aren't found,
   though it's better to target specific known wrappers.
   This rule might be too broad if the panel contains multiple direct children.
.egh-tc-tab-panel[data-styling_context="egh-dashboard-constrained-content"] > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    box-sizing: border-box;
}
*/

/* If the content inside these panels needs further specific styling,
   you might target their children, e.g.:
   .egh-tc-tab-panel[data-styling_context="egh-dashboard-constrained-content"] > .actual-content-wrapper { ... }
   For now, this styles the panel itself.
*/

/* If we knew the specific output structure of [account_settings] and [my_exercises],
   we could target more precisely. For example, if [account_settings] outputs <div class="account-settings-wrapper">...</div>
   then we'd use:
   #egh-tc-panel-0 .account-settings-wrapper { ... }

   For now, the idea is that the shortcodes themselves should output a container that can adopt these styles,
   or we apply a general constraint. The .egh-dashboard-content-constrained class is a good approach
   if we can ensure the shortcodes use it or wrap their content in it.

   Let's modify the egh_account_dashboard_tabs_shortcode_func to wrap the content of these specific tabs.
*/