/**
 * Dexata Academy dashboard styles for Tutor LMS 4.0.4.
 *
 * Version 4.0.4.10
 * Loaded only on Tutor dashboard pages. The selectors intentionally target the
 * child-theme wrapper directly so the layout does not depend on a body class.
 */

/* --------------------------------------------------------------------------
 * Tutor 4.x layout reset
 * -------------------------------------------------------------------------- */

/* Kanit is the primary Dexata Academy interface font. Scope it to dashboard
 * text and form controls without overriding Tutor icon-font pseudo-elements. */
body.dexata-tutor-dashboard,
body.dexata-tutor-dashboard .dexata-dashboard-layout,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell,
body.dexata-tutor-dashboard .dexata-dashboard-layout h1,
body.dexata-tutor-dashboard .dexata-dashboard-layout h2,
body.dexata-tutor-dashboard .dexata-dashboard-layout h3,
body.dexata-tutor-dashboard .dexata-dashboard-layout h4,
body.dexata-tutor-dashboard .dexata-dashboard-layout h5,
body.dexata-tutor-dashboard .dexata-dashboard-layout h6,
body.dexata-tutor-dashboard .dexata-dashboard-layout p,
body.dexata-tutor-dashboard .dexata-dashboard-layout a,
body.dexata-tutor-dashboard .dexata-dashboard-layout span,
body.dexata-tutor-dashboard .dexata-dashboard-layout button,
body.dexata-tutor-dashboard .dexata-dashboard-layout input,
body.dexata-tutor-dashboard .dexata-dashboard-layout select,
body.dexata-tutor-dashboard .dexata-dashboard-layout textarea,
body.dexata-tutor-dashboard .dexata-dashboard-layout label,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell h1,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell h2,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell h3,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell p,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell a,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell span,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell button,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell input,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell select,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell textarea,
body.dexata-tutor-dashboard .dexata-dashboard-header-shell label {
    font-family: "Kanit", Arial, sans-serif !important;
}

.dexata-dashboard-layout.tutor-dashboard-layout {
    --tutor-font-family-body: "Kanit", sans-serif;
}

html[data-tutor-theme] {
    background: #ffffff !important;
}

body.dexata-tutor-dashboard,
body.dexata-tutor-dashboard #page,
body.dexata-tutor-dashboard #main,
body.dexata-tutor-dashboard #main-content {
    background-color: #ffffff !important;
}

.dexata-dashboard-layout.tutor-dashboard-layout {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    color: #212327;
    background: #f3f7fc !important;
}

.dexata-dashboard-main.tutor-dashboard-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f3f7fc !important;
}

.dexata-dashboard-body.tutor-dashboard-body {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 96px);
    margin: 0 !important;
    padding: 0 !important;
    background: #f3f7fc !important;
}

/* Recreate the Tutor LMS 3.9 dashboard geometry used by Dexata:
 * - the Tutor container starts 60px from the left;
 * - the old Tutor menu remains hidden and occupies no space;
 * - the visible dashboard column uses the original md-8 width (66.6667%). */
.dexata-dashboard-maincontent.tutor-container {
    display: flex !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: 60px !important;
    padding-top: 84px !important;
    padding-bottom: 80px !important;
    flex-wrap: wrap !important;
}

.dexata-dashboard-legacy-left-menu {
    display: none !important;
}

.dexata-dashboard-content-column {
    min-width: 0 !important;
}

.dexata-dashboard-layout .tutor-dashboard-page.dexata-dashboard-page {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The old Academy dashboard did not display Tutor's profile-completion panel. */
.dexata-dashboard-layout .tutor-profile-completion {
    display: none !important;
}

/* --------------------------------------------------------------------------
 * Dashboard header
 * -------------------------------------------------------------------------- */

.dexata-dashboard-header-shell {
    position: relative;
    z-index: 20;
    width: 100%;
    background: #ffffff;
}

.dexata-dashboard-header-shell .tutor-dashboard-header {
    z-index: 20 !important;
    box-sizing: border-box;
    width: 100% !important;
    height: 96px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e7eaef !important;
    box-shadow: none !important;
}

.dexata-dashboard-header-shell .tutor-dashboard-header-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Tutor's instructor greeting and analytics summary. The branded title is
 * rendered by the child-theme dashboard wrapper above the same header. */
.dexata-dashboard-header-shell .tutor-dashboard-header-left {
    visibility: hidden !important;
}

.dexata-dashboard-header-title-frame.tutor-container {
    pointer-events: none;
    position: absolute;
    z-index: 21;
    top: 0;
    left: 0;
    display: flex;
    box-sizing: border-box;
    height: 96px;
    margin-right: auto !important;
    margin-left: 60px !important;
    align-items: center;
}

/* Match the original template: a plain H5 element with no class. */
.dexata-dashboard-header-title-frame > h5 {
    margin: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-family: "Kanit", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Protect the Tutor 4 account control from the site's global Elementor button
 * declarations. */
body.elementor-kit-7.dexata-tutor-dashboard .dexata-dashboard-header-shell button.tutor-dashboard-header-user-avatar,
body.elementor-kit-7.dexata-tutor-dashboard .dexata-dashboard-header-shell button.tutor-btn-ghost,
.dexata-dashboard-header-shell .tutor-dashboard-header-user-avatar {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.dexata-dashboard-header-shell .tutor-dashboard-header-right {
    position: relative;
    z-index: 22;
}


@media (min-width: 768px) {
    .dexata-dashboard-content-column.tutor-col-md-8 {
        flex: 0 0 auto !important;
        width: 66.666667% !important;
    }
}

/* Restore the Academy's original desktop override from the legacy Additional
 * CSS. At large breakpoints the visible Tutor column expands to 90%, removing
 * the excessive empty area on the right while retaining the md-8 tablet width. */
@media (min-width: 992px) {
    .dexata-dashboard-content-column.tutor-col-lg-9 {
        flex: 0 0 auto !important;
        width: 90% !important;
        max-width: 90% !important;
    }
}

/* --------------------------------------------------------------------------
 * Branded home dashboard
 * -------------------------------------------------------------------------- */

.dexata-dashboard-welcome,
.dexata-dashboard-panel,
.dexata-dashboard-cohort-card,
.dexata-dashboard-continue,
.dexata-dashboard-stat,
.dexata-dashboard-course-card {
    box-sizing: border-box;
    font-family: "Kanit", var(--tutor-font-family-body, sans-serif);
}

.dexata-dashboard-welcome {
    display: flex;
    width: 100%;
    min-height: 198px;
    margin: 0 0 32px;
    padding: 30px 36px;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    overflow: hidden;
    color: #212327;
    background: #d4e0f4 !important;
    border: 0 !important;
    border-radius: 15px;
    box-shadow: none !important;
}

.dexata-dashboard-welcome-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 720px;
}

.dexata-dashboard-welcome h1 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #111827 !important;
    font-family: "Kanit", Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.25px !important;
    text-transform: none !important;
}

.dexata-dashboard-welcome p {
    max-width: 690px;
    margin: 0 !important;
    padding: 0 !important;
    color: #212327 !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

.dexata-dashboard-welcome-art {
    flex: 0 0 190px;
    width: 190px;
}

.dexata-dashboard-welcome-art img {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.dexata-dashboard-overview-grid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 2.55fr) minmax(275px, 1fr);
    gap: 20px;
    margin: 0 0 32px;
}

.dexata-dashboard-panel,
.dexata-dashboard-cohort-card {
    min-width: 0;
    min-height: 424px;
    border: 0 !important;
    border-radius: 15px;
}

.dexata-dashboard-panel {
    padding: 36px;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08) !important;
}

.dexata-dashboard-panel h2,
.dexata-dashboard-cohort-card h2,
.dexata-dashboard-section-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-family: "Kanit", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
}

.dexata-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 28px;
}

.dexata-dashboard-stat {
    display: flex;
    min-width: 0;
    min-height: 252px;
    padding: 24px 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #212327 !important;
    text-align: center;
    background: #ffffff !important;
    border: 1px solid #e7eaef !important;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(17, 24, 39, 0.10) !important;
}

.dexata-dashboard-stat-icon {
    display: inline-flex;
    width: 72px;
    height: 72px;
    margin: 0 0 22px;
    align-items: center;
    justify-content: center;
    color: #8aade1 !important;
    background: #f3f7fc !important;
    border-radius: 50%;
}

/* Inline SVGs are used instead of Tutor's icon font so the symbols remain
 * visible even when Tutor changes or delays its font stylesheet. */
.dexata-dashboard-stat-svg {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: #8aade1;
    fill: currentColor;
    overflow: visible;
}

.dexata-dashboard-stat-value {
    display: block !important;
    color: #212327 !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

.dexata-dashboard-stat-label {
    display: block;
    margin-top: 14px;
    color: #343a46 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
}

.dexata-dashboard-cohort-card {
    display: flex;
    padding: 40px 36px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #111827;
    background: #8aade1 !important;
    box-shadow: none !important;
}

.dexata-dashboard-cohort-card h2 {
    max-width: 215px;
    font-size: 24px !important;
    line-height: 1.25 !important;
}

.dexata-dashboard-cohort-card p {
    max-width: 215px;
    margin: 16px 0 24px !important;
    padding: 0 !important;
    color: #212327 !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
}

.dexata-dashboard-button {
    display: inline-flex !important;
    width: 100%;
    max-width: 210px;
    min-height: 78px;
    margin: 0 !important;
    padding: 14px 24px !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-family: "Kanit", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase !important;
    background: #3c76cd !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: none !important;
    transition: background-color 180ms ease, transform 180ms ease;
}

.dexata-dashboard-button:hover,
.dexata-dashboard-button:focus-visible {
    color: #ffffff !important;
    background: #2f66b9 !important;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
 * Continue-learning cards
 * -------------------------------------------------------------------------- */

.dexata-dashboard-continue {
    padding: 32px 36px 36px;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 15px;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08) !important;
}

.dexata-dashboard-section-heading {
    display: flex;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dexata-dashboard-section-heading > a {
    flex: 0 0 auto;
    color: #3c76cd !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
}

.dexata-dashboard-course-list {
    display: grid;
    gap: 18px;
}

.dexata-dashboard-course-card {
    display: grid;
    grid-template-columns: minmax(190px, 30%) minmax(0, 1fr);
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid #e7eaef !important;
    border-radius: 12px;
    box-shadow: none !important;
}

.dexata-dashboard-course-image,
.dexata-dashboard-course-image img {
    display: block;
    width: 100%;
    min-height: 210px;
}

.dexata-dashboard-course-image {
    background: #eef3fb;
}

.dexata-dashboard-course-image img {
    height: 100%;
    object-fit: cover;
}

.dexata-dashboard-course-content {
    display: flex;
    min-width: 0;
    padding: 24px 26px;
    flex-direction: column;
    justify-content: center;
}

body.logged-in .dexata-dashboard-course-card h3 {
    margin: 0 0 10px !important;
    color: #111827 !important;
    font-family: "Kanit", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

.dexata-dashboard-course-card h3 a {
    color: #111827 !important;
    text-decoration: none !important;
}

.dexata-dashboard-course-lessons {
    margin: 0 0 16px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
}

.dexata-dashboard-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.dexata-dashboard-progress {
    height: 8px;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 999px;
}

.dexata-dashboard-progress span {
    display: block;
    height: 100%;
    background: #3c76cd;
    border-radius: inherit;
}

.dexata-dashboard-progress-row > span {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
}

.dexata-dashboard-button-small {
    width: auto;
    min-height: 42px;
    padding: 10px 22px !important;
    align-self: flex-start;
    border-radius: 18px !important;
}

/* Respect Tutor's responsive utility semantics. The legacy Additional CSS
 * reversed these utilities globally. */
.dexata-dashboard-layout .tutor-d-none {
    display: none !important;
}

@media (min-width: 992px) {
    .dexata-dashboard-layout .tutor-d-lg-block {
        display: block !important;
    }

    .dexata-dashboard-layout .tutor-d-lg-flex {
        display: flex !important;
    }

    .dexata-dashboard-layout .tutor-d-lg-inline-flex {
        display: inline-flex !important;
    }
}

/* --------------------------------------------------------------------------
 * Responsive layout
 * -------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .dexata-dashboard-maincontent.tutor-container {
        padding-top: 52px !important;
    }

    .dexata-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .dexata-dashboard-panel,
    .dexata-dashboard-cohort-card {
        min-height: 0;
    }

    .dexata-dashboard-cohort-card h2,
    .dexata-dashboard-cohort-card p {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .dexata-dashboard-header-shell .tutor-dashboard-header,
    .dexata-dashboard-header-title-frame {
        height: 76px !important;
    }

    .dexata-dashboard-header-shell .tutor-dashboard-header {
        padding: 0 16px !important;
    }

    .dexata-dashboard-header-title-frame.tutor-container {
        margin-left: 16px !important;
    }

    .dexata-dashboard-header-title-frame > h5 {
        font-size: 18px !important;
    }

    .dexata-dashboard-body.tutor-dashboard-body {
        min-height: calc(100vh - 76px);
    }

    .dexata-dashboard-maincontent.tutor-container {
        width: calc(100% - 28px) !important;
        margin-left: 14px !important;
        padding: 30px 0 90px !important;
    }

    .dexata-dashboard-content-column {
        width: 100% !important;
    }

    .dexata-dashboard-welcome {
        min-height: 0;
        padding: 26px 24px;
        align-items: flex-start;
    }

    .dexata-dashboard-welcome h1 {
        font-size: 26px !important;
    }

    .dexata-dashboard-welcome-art {
        flex-basis: 120px;
        width: 120px;
    }

    .dexata-dashboard-panel,
    .dexata-dashboard-cohort-card,
    .dexata-dashboard-continue {
        padding: 28px 24px;
    }

    .dexata-dashboard-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dexata-dashboard-stat {
        min-height: 180px;
    }

    .dexata-dashboard-course-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dexata-dashboard-welcome {
        flex-direction: column;
    }

    .dexata-dashboard-welcome-art {
        align-self: flex-end;
    }

    .dexata-dashboard-cohort-card {
        align-items: stretch;
    }

    .dexata-dashboard-button {
        max-width: none;
    }
}