/* I keep management structure independent of customer branding and legacy page grids. */
body.plant-body.admin-workspace .admin-workspace-topbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    padding: .8rem clamp(.75rem, 2vw, 1.5rem); border-bottom: 1px solid var(--ecommerce-border, #c7d2df);
    background: var(--ecommerce-card, #ffffff); color: var(--ecommerce-card-text, #172033);
}
body.admin-workspace .admin-workspace-brand { flex: 1 1 12rem; min-width: 0; color: inherit; text-decoration: none; font-weight: 800; overflow-wrap: anywhere; }
body.admin-workspace .admin-workspace-brand small { display: block; font-size: .8rem; font-weight: 400; }
body.admin-workspace .admin-workspace-topbar .btn { white-space: normal; min-height: 44px; }
body.admin-workspace .admin-profile { position: relative; }
body.admin-workspace .admin-profile summary { cursor: pointer; padding: .65rem; overflow-wrap: anywhere; }
body.admin-workspace .admin-profile > div { position: absolute; right: 0; top: 100%; z-index: 100; width: 15rem; max-width: 80vw; padding: 1rem; background: var(--ecommerce-card, #ffffff); border: 1px solid var(--ecommerce-border, #c7d2df); border-radius: .5rem; }
body.admin-workspace .admin-profile form { margin-top: .75rem; }
body.plant-body.admin-workspace .admin-workspace-shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); width: 100%; max-width: 100%; align-items: start; }
body.plant-body.admin-workspace #main-content.plant-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: clamp(.75rem, 2vw, 1.5rem) !important; box-sizing: border-box !important; }
body.plant-body.admin-workspace #main-content > :is(.shop-section, .shop-page, .branding-page) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; box-sizing: border-box !important; }
body.admin-workspace .admin-sidebar { position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; width: 100%; min-width: 0; padding: 1rem .75rem; border-right: 1px solid var(--ecommerce-border, #c7d2df); background: var(--ecommerce-card, #ffffff); color: var(--ecommerce-card-text, #172033); box-sizing: border-box; }
body.admin-workspace .admin-sidebar-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .25rem .5rem .75rem; }
body.admin-workspace .admin-sidebar-heading button { display: none; }
body.admin-workspace .admin-sidebar-link { display: block; width: 100%; min-height: 44px; padding: .7rem .75rem; text-align: left; white-space: normal; overflow-wrap: anywhere; color: inherit; font: inherit; text-decoration: none; background: transparent; border: 1px solid transparent; border-radius: .4rem; box-sizing: border-box; }
body.admin-workspace .admin-sidebar-link:hover, body.admin-workspace .admin-sidebar-link.active { background: var(--ecommerce-primary, #0f6cbd); border-color: var(--ecommerce-primary, #0f6cbd); color: var(--ecommerce-primary-text, #ffffff); }
body.admin-workspace .admin-sidebar :is(a, button, summary):focus-visible { outline: 3px solid var(--ecommerce-primary, #0f6cbd); outline-offset: 2px; }
body.admin-workspace .admin-sidebar-group { border: 0; border-bottom: 1px solid var(--ecommerce-border, #c7d2df); border-radius: 0; margin: .5rem 0; padding: .25rem 0; }
body.admin-workspace .admin-sidebar-group > summary { cursor: pointer; font-weight: 700; padding: .7rem .5rem; min-height: 44px; white-space: normal; }
body.admin-workspace .admin-sidebar-group > div { padding-left: .5rem; }
body.admin-workspace .admin-sidebar-group form { margin: 0; }
body.admin-workspace .admin-sidebar-help { margin: 1rem .5rem 0; font-size: .8rem; line-height: 1.5; }
body.admin-workspace .admin-sidebar-backdrop[hidden] { display: none; }
body.plant-body.admin-workspace #main-content .commerce-feature-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important; gap: 1rem !important; width: 100% !important; min-width: 0 !important; }
body.plant-body.admin-workspace #main-content .commerce-feature-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; }
body.plant-body.admin-workspace #main-content :is(.commerce-kpis, .commerce-form-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; min-width: 0 !important; }
body.admin-workspace #main-content :is(input, select, textarea, img, canvas) { max-width: 100%; }
body.admin-workspace #main-content :is(.shop-heading-actions, .commerce-action-row) { min-width: 0; flex-wrap: wrap; }
body.admin-workspace #main-content .shop-heading-actions:empty { display: none; }
body.admin-workspace #main-content .admin-command-header { display: none; }
body.admin-workspace #main-content .table-responsive { max-width: 100%; overflow-x: auto; }
body.admin-workspace.admin-sidebar-collapsed .admin-workspace-shell { grid-template-columns: minmax(0, 1fr); }
body.admin-workspace.admin-sidebar-collapsed .admin-sidebar { display: none; }
@media (max-width: 1000px) {
    body.plant-body.admin-workspace .admin-workspace-shell { grid-template-columns: minmax(0, 1fr); }
    body.admin-workspace .admin-sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--ecommerce-border, #c7d2df); }
    /* I retain usable navigation without JavaScript, then enhance it into a mobile drawer. */
    body.admin-workspace.admin-sidebar-ready .admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1200; width: min(19rem, 90vw); height: 100dvh; max-height: 100dvh; visibility: hidden; transform: translateX(-100%); overflow-y: auto; }
    body.admin-workspace.admin-sidebar-ready.admin-sidebar-open .admin-sidebar { visibility: visible; transform: translateX(0); }
    body.admin-workspace .admin-sidebar-heading button { display: inline-flex; }
    body.admin-workspace .admin-sidebar-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: 1190; background: rgb(0 0 0 / 55%); border: 0; width: 100%; height: 100%; }
    body.admin-workspace.admin-sidebar-open { overflow: hidden; }
}
@media (prefers-reduced-motion: no-preference) {
    body.admin-workspace.admin-sidebar-ready .admin-sidebar { transition: transform .18s ease; }
}
/* I keep the sync action visually consistent with adjacent navigation links. */
body.plant-body.admin-workspace .admin-sidebar button.admin-sidebar-link {
    background: transparent !important; border-color: transparent !important;
    color: var(--ecommerce-card-text, #172033) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.plant-body.admin-workspace .admin-sidebar button.admin-sidebar-link:hover {
    background: var(--ecommerce-primary, #0f6cbd) !important;
    color: var(--ecommerce-primary-text, #ffffff) !important;
}
/* I make sidebar text authoritative so saved link colours cannot hide active labels. */
body.plant-body.admin-workspace #adminSidebar .admin-sidebar-link {
    color: var(--ui-card-text, var(--ecommerce-card-text, #172033)) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
body.plant-body.admin-workspace #adminSidebar .admin-sidebar-link:is(.active, :hover, :focus-visible) {
    background: var(--ui-button-bg, var(--ecommerce-primary, #0f6cbd)) !important;
    border-color: var(--ui-button-bg, var(--ecommerce-primary, #0f6cbd)) !important;
    color: var(--ui-button-text, var(--ecommerce-primary-text, #ffffff)) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.plant-body.admin-workspace #adminSidebar {
    background: var(--ecommerce-card, #ffffff) !important;
    color: var(--ui-card-text, var(--ecommerce-card-text, #172033)) !important;
}
/* I prevent legacy position rules from turning an enhanced mobile drawer into another content column. */
@media (max-width: 1000px) {
    body.plant-body.admin-workspace.admin-sidebar-ready #adminSidebar {
        position: fixed !important; inset: 0 auto 0 0 !important;
        width: min(19rem, 90vw) !important; max-width: 90vw !important;
        height: 100dvh !important; max-height: 100dvh !important;
        z-index: 1200 !important; visibility: hidden !important;
        transform: translateX(-100%) !important;
    }
    body.plant-body.admin-workspace.admin-sidebar-ready.admin-sidebar-open #adminSidebar {
        visibility: visible !important; transform: translateX(0) !important;
    }
    body.plant-body.admin-workspace .admin-sidebar-backdrop:not([hidden]) {
        background: rgb(0 0 0 / 55%) !important;
    }
}

/* I preserve the rendered menu labels instead of inheriting uppercase branding rules. */
body.plant-body.ecommerce-body #adminSidebar :is(.admin-sidebar-heading, .admin-sidebar-link, .admin-sidebar-group > summary, label) {
    text-transform: none !important; letter-spacing: normal !important;
}