/**
 * E-Askora page integration.
 *
 * Loaded only by page-e-askora.php. The selectors are deliberately scoped to
 * the E-Askora page so the Askora chat, public pages and account views remain
 * unchanged.
 */

body.askora-easkora-page-view {
    background: #f5f7fb;
    overflow-x: hidden;
}

/* Keep the invoicing workspace full-screen, but use the same collapsible
 * global header and top-menu control as the rest of the Askora portal. */
body.askora-easkora-page-view .askora-site-footer {
    display: none !important;
}

body.askora-easkora-page-view .askora-main,
body.askora-easkora-page-view .askora-main--public,
body.askora-easkora-page-view .askora-main--app {
    display: block;
    min-height: 100vh;
    overflow: visible;
    padding: 0;
    width: 100%;
}

.askora-easkora-page {
    margin: 0;
    max-width: none;
    min-height: 100vh;
    padding: clamp(12px, 1.7vw, 28px);
    width: 100%;
}

.askora-easkora-page__content {
    margin: 0 auto;
    max-width: 1760px;
    padding: 0;
    width: 100%;
}

.askora-easkora-page__content > p:empty,
.askora-easkora-page__content > br {
    display: none;
}

.askora-easkora-page__content > p {
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
}

.askora-easkora-page__content > *,
.askora-easkora-page__content .easkora-frontend-panel,
.askora-easkora-page__content .easkora-app-shell {
    max-width: none !important;
    width: 100% !important;
}

.askora-easkora-page__content .easkora-app-shell {
    margin: 0 !important;
    min-height: calc(100vh - clamp(24px, 3.4vw, 56px)) !important;
}

/* Guard against generic WordPress constrained-layout rules around shortcodes. */
.askora-easkora-page :where(.is-layout-constrained, .wp-block-group, .wp-block-post-content) > .easkora-frontend-panel,
.askora-easkora-page :where(.is-layout-constrained, .wp-block-group, .wp-block-post-content) > p:has(.easkora-frontend-panel) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

@media (max-width: 980px) {
    .askora-easkora-page {
        padding: 10px;
    }

    .askora-easkora-page__content .easkora-app-shell {
        min-height: calc(100vh - 20px) !important;
    }
}

@media (max-width: 680px) {
    .askora-easkora-page {
        padding: 0;
    }

    .askora-easkora-page__content .easkora-app-shell {
        border-left: 0 !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        margin: 0 !important;
        min-height: 100vh !important;
    }
}

/*
 * E-Askora mobile summary guard.
 *
 * The multilingual invoices page is now routed through this dedicated theme
 * template. Keep the four KPI rectangles in a compact stack even if a browser
 * or an inherited grid rule gives the summary container extra vertical space.
 */
@media (max-width: 680px) {
    body.askora-easkora-page-view.easkora-panel-page .easkora-stage16-lower,
    body.askora-easkora-page-view.easkora-panel-page .easkora-dashboard-section-stack {
        align-content: start !important;
        grid-auto-rows: max-content !important;
        height: auto !important;
        min-height: 0 !important;
        place-content: start stretch !important;
    }

    body.askora-easkora-page-view.easkora-panel-page .easkora-dashboard-stats {
        align-content: start !important;
        align-items: stretch !important;
        display: grid !important;
        gap: 12px !important;
        grid-auto-flow: row !important;
        grid-auto-rows: 124px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(4, 124px) !important;
        height: auto !important;
        justify-content: stretch !important;
        margin: 0 !important;
        max-height: none !important;
        min-height: 0 !important;
        place-content: start stretch !important;
        row-gap: 12px !important;
    }

    body.askora-easkora-page-view.easkora-panel-page .easkora-dashboard-stats > a.easkora-dashboard-stat {
        align-self: stretch !important;
        height: 124px !important;
        margin: 0 !important;
        max-height: 124px !important;
        min-height: 124px !important;
    }
}