/* =========================================================
 * Competenza Academy Theme V2
 * Masteriyo Account- und Portalbereich
 * ========================================================= */

:root {
    --ca-account-width: 1180px;
    --ca-account-sidebar-width: 260px;
    --ca-account-gap:
        clamp(
            32px,
            4vw,
            52px
        );
}

/* =========================================================
 * Seitenshell
 * ========================================================= */

body.ca-masteriyo-page {
    display: flex;

    min-height: 100vh;
    min-height: 100dvh;

    flex-direction: column;

    background:
        var(--ca-color-white) !important;
}

body.ca-masteriyo-page
.ca-site-header,
body.ca-masteriyo-page
.ca-site-footer {
    flex: 0 0 auto;
}

body.ca-masteriyo-page
.ca-site-main {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding:
        clamp(52px, 6vw, 82px)
        0
        clamp(74px, 8vw, 108px) !important;

    flex: 1 0 auto;

    background:
        var(--ca-color-white) !important;

    overflow: visible !important;
}

/*
 * Der normale WordPress-Seitencontainer darf den
 * React-Accountbereich nicht auf Textbreite begrenzen.
 */
body.ca-masteriyo-page
:is(
    .ca-standard-page,
    .ca-page,
    .ca-content-container,
    .ca-entry-content,
    article,
    article > div
) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

/*
 * Masteriyo besitzt eigene Bereichsüberschriften.
 * Die zusätzliche WordPress-Seitenüberschrift entfällt.
 */
body.ca-masteriyo-page
:is(
    .ca-page-header,
    .ca-page-title,
    .entry-header,
    .entry-title
) {
    display: none !important;
}

/* =========================================================
 * Account-Hauptwrapper
 * ========================================================= */

body.ca-masteriyo-page
:is(
    #masteriyo-account-page,
    .masteriyo-account-page,
    .mto-account-wrapper
) {
    box-sizing: border-box !important;

    width:
        min(
            var(--ca-account-width),
            calc(100% - 40px)
        ) !important;

    max-width:
        var(--ca-account-width) !important;

    min-width: 0 !important;

    margin:
        0
        auto !important;

    padding: 0 !important;
}

/*
 * Masteriyo liefert den eigentlichen React-Wrapper.
 */
body.ca-masteriyo-page
.mto-account-wrapper {
    display: grid !important;

    grid-template-columns:
        var(--ca-account-sidebar-width)
        minmax(0, 1fr) !important;

    gap:
        var(--ca-account-gap) !important;

    align-items: start !important;

    overflow: visible !important;

    transform: none !important;
}

/* =========================================================
 * Desktop-Sidebar
 * ========================================================= */

body.ca-masteriyo-page
.mto-account-sidebar {
    position: relative !important;

    inset: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width:
        var(--ca-account-sidebar-width) !important;

    min-width:
        var(--ca-account-sidebar-width) !important;

    max-width:
        var(--ca-account-sidebar-width) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding:
        22px
        18px !important;

    color:
        var(--ca-color-ink) !important;

    background:
        var(--ca-color-white) !important;

    border:
        1px solid
        var(--ca-color-border) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}

/*
 * Benutzerbereich im oberen Teil der Sidebar.
 */
body.ca-masteriyo-page
.mto-account-sidebar
> :first-child {
    margin-bottom: 20px;
    padding-bottom: 20px;

    border-bottom:
        1px solid
        var(--ca-color-border);
}

/*
 * Navigationseinträge.
 */
body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item,
body.ca-masteriyo-page
.mto-account-sidebar
a {
    border-radius: 0 !important;
}

/*
 * Aktiver Menüpunkt im Academy-Design.
 */
body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item[aria-current="page"],
body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item.active,
body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item.is-active,
body.ca-masteriyo-page
.mto-account-sidebar
a[aria-current="page"] {
    position: relative;

    color:
        var(--ca-color-white) !important;

    background:
        var(--ca-color-company) !important;

    border: 0 !important;

    overflow: hidden;
    isolation: isolate;
}

body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item[aria-current="page"]::before,
body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item.active::before,
body.ca-masteriyo-page
.mto-account-sidebar
.account-sidebar-menu-item.is-active::before,
body.ca-masteriyo-page
.mto-account-sidebar
a[aria-current="page"]::before {
    position: absolute;
    z-index: -1;
    inset:
        0
        auto
        0
        0;

    width: 6px;

    content: "";

    background:
        var(--ca-color-academy);
}

/* =========================================================
 * Account-Inhalt
 * ========================================================= */

body.ca-masteriyo-page
.mto-account-wrapper
> :not(.mto-account-sidebar) {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: none !important;
}

body.ca-masteriyo-page
.mto-account-wrapper
:is(
    main,
    [role="main"],
    [class*="account-content"],
    [class*="dashboard-content"],
    [class*="courses-content"]
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/*
 * Überschriftenhierarchie.
 */
body.ca-masteriyo-page
.mto-account-wrapper
h1 {
    margin:
        0
        0
        16px !important;

    color:
        var(--ca-color-ink) !important;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        ) !important;

    line-height: 1.08 !important;
}

body.ca-masteriyo-page
.mto-account-wrapper
h2 {
    color:
        var(--ca-color-ink) !important;

    font-size:
        clamp(
            1.4rem,
            2.5vw,
            2rem
        ) !important;

    line-height: 1.18 !important;
}

/* =========================================================
 * Dashboard-Kennzahlen
 * ========================================================= */

body.ca-masteriyo-page
.mto-dashboard-courses-stats {
    display: grid !important;

    width: 100% !important;

    margin-top: 34px !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap: 18px !important;
}

body.ca-masteriyo-page
.mto-dashboard-courses-stats
> * {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 142px !important;

    margin: 0 !important;
    padding:
        22px !important;

    color:
        var(--ca-color-ink) !important;

    background:
        var(--ca-color-white) !important;

    border:
        1px solid
        var(--ca-color-border) !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}

/*
 * Iconboxen der Kennzahlen.
 */
body.ca-masteriyo-page
.mto-dashboard-courses-stats
:is(
    svg,
    [class*="icon"]
) {
    color:
        var(--ca-color-academy) !important;
}

/* =========================================================
 * Weiterlernen
 * ========================================================= */

body.ca-masteriyo-page
.mto-dashboard-courses-progress {
    width: 100% !important;

    margin-top:
        clamp(
            42px,
            5vw,
            66px
        ) !important;
}

body.ca-masteriyo-page
.mto-continue-course {
    display: grid !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
        minmax(210px, 260px)
        minmax(0, 1fr)
        minmax(180px, 240px) !important;

    gap:
        clamp(
            22px,
            3vw,
            38px
        ) !important;

    align-items: center !important;

    margin: 0 !important;
    padding:
        22px
        0 !important;

    border-bottom:
        1px solid
        var(--ca-color-border) !important;

    border-radius: 0 !important;

    overflow: visible !important;
}

body.ca-masteriyo-page
.mto-continue-course
img {
    display: block;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}

/* =========================================================
 * Fortschritt
 * ========================================================= */

body.ca-masteriyo-page
.chakra-progress {
    height: 5px !important;

    border-radius: 0 !important;

    background:
        #e8ebed !important;
}

body.ca-masteriyo-page
.chakra-progress__track {
    border-radius: 0 !important;

    background:
        #e8ebed !important;
}

body.ca-masteriyo-page
.chakra-progress__indicator {
    border-radius: 0 !important;

    background:
        var(--ca-color-academy) !important;
}

/* =========================================================
 * Account-Buttons
 * ========================================================= */

body.ca-masteriyo-page
.ca-account-button,
body.ca-masteriyo-page
button,
body.ca-masteriyo-page
[role="button"] {
    border-radius: 0 !important;
}

body.ca-masteriyo-page
.mto-account-wrapper
button[type="submit"],
body.ca-masteriyo-page
.mto-account-wrapper
a[class*="button"] {
    min-height: 46px;

    border: 0 !important;
    border-radius: 0 !important;
}

/* =========================================================
 * Leere Zustände
 * ========================================================= */

body.ca-masteriyo-page
.mto-account-wrapper
:is(
    [class*="empty"],
    [class*="no-data"],
    [class*="no-certificate"],
    [class*="wishlist-empty"]
) {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 700px !important;

    margin:
        36px
        auto
        0 !important;

    padding:
        36px
        24px !important;

    text-align: center;

    background:
        var(--ca-color-surface-soft);

    border:
        1px solid
        var(--ca-color-border);

    border-radius: 0 !important;
}

/* =========================================================
 * Filter und Formulare
 * ========================================================= */

body.ca-masteriyo-page
.mto-account-wrapper
:is(
    input,
    select,
    textarea
) {
    max-width: 100%;

    border:
        1px solid
        var(--ca-color-border-strong) !important;

    border-radius: 0 !important;
}

body.ca-masteriyo-page
.mto-account-wrapper
input {
    min-height: 46px;
}

/* =========================================================
 * Footerposition auf kurzen Accountseiten
 * ========================================================= */

body.ca-masteriyo-page
.ca-site-footer {
    width: 100%;

    margin-top: auto;
}

/* =========================================================
 * Tablet
 * ========================================================= */

@media (max-width: 1100px) and (min-width: 961px) {
    :root {
        --ca-account-sidebar-width: 230px;
        --ca-account-gap: 28px;
    }

    body.ca-masteriyo-page
    .mto-dashboard-courses-stats
    > * {
        padding:
            18px !important;
    }

    body.ca-masteriyo-page
    .mto-continue-course {
        grid-template-columns:
            200px
            minmax(0, 1fr) !important;
    }

    body.ca-masteriyo-page
    .mto-continue-course
    > :last-child {
        grid-column:
            2;
    }
}

/* =========================================================
 * Mobil
 * ========================================================= */

@media (max-width: 960px) {
    body.ca-masteriyo-page
    .ca-site-main {
        padding:
            34px
            0
            calc(
                72px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    body.ca-masteriyo-page
    :is(
        #masteriyo-account-page,
        .masteriyo-account-page,
        .mto-account-wrapper
    ) {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.ca-masteriyo-page
    .mto-account-wrapper {
        display: block !important;
    }

    /*
     * Die Desktop-Sidebar wird auf Mobilgeräten entfernt.
     * Eine eigenständige App-Navigation folgt in Phase 2.3.
     */
    body.ca-masteriyo-page
    .mto-account-sidebar {
        display: none !important;
    }

    body.ca-masteriyo-page
    .mto-account-wrapper
    > :not(.mto-account-sidebar) {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-inline:
            max(
                18px,
                env(safe-area-inset-left)
            ) !important;
    }

    body.ca-masteriyo-page
    .mto-dashboard-courses-stats {
        grid-template-columns:
            1fr !important;

        gap: 12px !important;
    }

    body.ca-masteriyo-page
    .mto-dashboard-courses-stats
    > * {
        min-height: 112px !important;
    }

    body.ca-masteriyo-page
    .mto-continue-course {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 18px !important;

        padding:
            20px
            0 !important;
    }

    body.ca-masteriyo-page
    .mto-continue-course
    img {
        aspect-ratio: 16 / 9;
    }
}

/* =========================================================
 * Kleine Smartphones
 * ========================================================= */

@media (max-width: 520px) {
    body.ca-masteriyo-page
    .ca-site-main {
        padding-top:
            24px !important;
    }

    body.ca-masteriyo-page
    .mto-account-wrapper
    > :not(.mto-account-sidebar) {
        padding-inline:
            max(
                14px,
                env(safe-area-inset-left)
            ) !important;
    }

    body.ca-masteriyo-page
    .mto-account-wrapper
    h1 {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.55rem
            ) !important;
    }

    body.ca-masteriyo-page
    .mto-dashboard-courses-stats
    > * {
        padding:
            18px !important;
    }
}