/* Mexora global typography system.
 * Loaded after page/module styles so semantic roles stay consistent application-wide.
 */
:root {
    --font-family-global: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --type-page-size: 34px;
    --type-page-weight: 700;
    --type-section-size: 26px;
    --type-section-weight: 600;
    --type-card-size: 20px;
    --type-card-weight: 600;
    --type-body-size: 16px;
    --type-body-weight: 400;
    --type-secondary-weight: 400;
    --type-label-size: 14px;
    --type-label-weight: 500;
    --type-control-weight: 400;
    --type-small-size: 13px;
    --type-small-weight: 400;
    --type-button-size: 15px;
    --type-button-weight: 500;
    --type-tabs-size: 15px;
    --type-tabs-weight: 500;
    --type-kpi-size: 30px;
    --type-kpi-weight: 700;
    --type-eyebrow-size: 12px;
    --type-eyebrow-weight: 600;
    --type-emphasis-weight: 600;
    --type-navigation-weight: 400;
    --type-navigation-active-weight: 500;
    --type-status-weight: 500;
    --type-heading-line: 1.2;
    --type-body-line: 1.5;
    --type-ui-line: 1.25;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-family-global);
}

body {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-global);
    line-height: var(--type-heading-line);
}

/* Semantic heading levels across dashboard and every workspace module. */
body.mexora-app .app-main h1,
.auth-page .auth-main h1,
.onboarding-page .onboarding-main h1 {
    font-size: var(--type-page-size);
    font-weight: var(--type-page-weight);
    line-height: var(--type-heading-line);
}

body.mexora-app .app-main h2,
.auth-page .auth-main h2,
.onboarding-page .onboarding-main h2 {
    font-size: var(--type-section-size);
    font-weight: var(--type-section-weight);
    line-height: var(--type-heading-line);
}

body.mexora-app .app-main h3,
.auth-page .auth-main h3,
.onboarding-page .onboarding-main h3 {
    font-size: var(--type-card-size);
    font-weight: var(--type-card-weight);
    line-height: var(--type-heading-line);
}

/* Modal titles are card-level headings, irrespective of their source tag. */
body.mexora-app :is(
    dialog,
    [class*="modal"],
    [class*="dialog"]
) :is(h2, h3),
.auth-page :is(dialog, [class*="modal"], [class*="dialog"]) :is(h2, h3),
.onboarding-page :is(dialog, [class*="modal"], [class*="dialog"]) :is(h2, h3) {
    font-size: var(--type-card-size);
    font-weight: var(--type-card-weight);
    line-height: var(--type-heading-line);
}

/* Body copy and supporting text. */
body.mexora-app .app-main :is(p:not(.eyebrow):not([class*="-eyebrow"]), li, dd, blockquote),
.auth-page .auth-main :is(p:not(.eyebrow):not([class*="-eyebrow"]), li, dd, blockquote),
.onboarding-page .onboarding-main :is(p:not(.eyebrow):not([class*="-eyebrow"]), li, dd, blockquote) {
    line-height: var(--type-body-line);
}

body.mexora-app .app-main :is(
    small,
    .field-help,
    .form-hint,
    .form-section-heading p,
    .panel-toolbar p,
    [class*="-help"],
    [class*="-hint"],
    [class*="-meta"]
),
.auth-page .auth-main small,
.onboarding-page .onboarding-main small {
    font-size: var(--type-small-size);
    font-weight: var(--type-small-weight);
    line-height: var(--type-body-line);
}

body .field-error, body .service-booking-warning { font-size: var(--type-small-size) !important; font-weight: var(--type-label-weight) !important; line-height: var(--type-ui-line); }

/* Eyebrows and overlines. */
body :is(
    .eyebrow,
    [class*="-eyebrow"],
    [class*="-overline"],
    .data-table-header,
    table thead th
) {
    font-family: var(--font-family-global);
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    line-height: var(--type-ui-line);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Labels and form controls. */
body :is(
    label,
    legend,
    dt,
    .form-field,
    .field-label,
    [class*="-label"]
) {
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-ui-line);
}

body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .mx-control-trigger,
    .mx-popover-search
) {
    font-size: var(--type-body-size);
    font-weight: var(--type-control-weight);
    line-height: var(--type-ui-line);
}

/* Buttons, menu actions and compact action links. */
body :is(
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
) {
    font-family: var(--font-family-global);
    font-size: var(--type-button-size);
    font-weight: var(--type-button-weight);
    line-height: var(--type-ui-line);
}

/* Tabs in reports, settings, campaigns, team and integrations. */
body :is(
    .settings-tabs,
    .account-tabs,
    .brand-tabs,
    .report-tabs,
    .report-navigation-tabs,
    .notification-tabs,
    .team-profile-tabs,
    .integration-mode-tabs,
    .location-dialog-tabs,
    [class*="-tabs"]
) :is(a, button, [role="tab"]) {
    font-size: var(--type-tabs-size);
    font-weight: var(--type-tabs-weight);
    line-height: var(--type-ui-line);
}

/* KPI values use one shared scale in all modules. */
body.mexora-app .app-main :is(
    .metric-card,
    .platform-metric-card,
    .report-metric-card,
    .report-kpi-card,
    .report-compact-metric,
    .client-kpi,
    .notification-kpi,
    .automation-metric,
    .support-kpi,
    .resource-metric,
    .client-import-stats article,
    .reactivation-results-compact article
) > strong,
body.mexora-app .app-main :is(
    .client-kpi-copy,
    .automation-metric-copy
) > strong,
body.mexora-app .app-main :is(
    .campaign-report-metric-value,
    [class*="-kpi-value"]
) {
    font-size: var(--type-kpi-size);
    font-weight: var(--type-kpi-weight);
    line-height: var(--type-heading-line);
}

body.mexora-app .app-main :is(
    .metric-card,
    .platform-metric-card,
    .report-metric-card,
    .report-kpi-card,
    .report-compact-metric,
    .client-kpi,
    .notification-kpi,
    .automation-metric,
    .support-kpi,
    .resource-metric
) > :is(span, small) {
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-ui-line);
}

/* Tables retain hierarchy without module-specific micro type. */
body.mexora-app .app-main :is(
    table,
    .data-table,
    .report-table,
    [class*="-table"]
) {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line);
}

body.mexora-app .app-main :is(
    table,
    .data-table,
    .report-table,
    [class*="-table"]
) :is(th, .data-table-header, [class*="-table-header"]) {
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-ui-line);
}

body.mexora-app .app-main :is(
    table,
    .data-table,
    .report-table,
    [class*="-table"]
) :is(td, .data-table-row, [class*="-table-row"]) {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line);
}

body.mexora-app .app-main :is(
    table,
    .data-table,
    .report-table,
    [class*="-table"]
) small {
    font-size: var(--type-small-size);
    font-weight: var(--type-small-weight);
}

/* Header: compact search by profile, visible locale, location and SMS status. */
body.mexora-app .app-header {
    justify-content: flex-start;
}

body.mexora-app .app-header-tools {
    margin-left: auto;
}

body.mexora-app .location-switcher > summary,
body.mexora-app .location-switcher:not(details),
body.mexora-app .sms-wallet,
body.mexora-app .profile-menu > summary,
body.mexora-app .header-search-menu > summary {
    min-height: 42px;
    height: 42px;
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-ui-line);
}

body.mexora-app .header-location-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

body.mexora-app .header-location-copy strong {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    line-height: 1.15;
    white-space: nowrap;
}

body.mexora-app .header-location-copy small {
    max-width: 150px;
    overflow: hidden;
    color: var(--color-muted);
    font-size:12px;
    font-weight: var(--type-small-weight);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mexora-app .sms-wallet strong {
    text-decoration: none;
}

body.mexora-app .header-search-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #e8d7da;
    border-radius: 10px;
    color: #17233a;
    background: #fff;
    list-style: none;
}

body.mexora-app .header-search-menu > summary::-webkit-details-marker {
    display: none;
}

body.mexora-app .header-search-menu > summary svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.mexora-app .header-search-panel {
    width: min(360px, calc(100vw - 24px));
    padding: 10px;
}

body.mexora-app .header-search-panel .header-search {
    width: 100%;
    min-width: 0;
    height: 42px;
}

body.mexora-app .header-search-panel .header-search input[type="search"] {
    height: 42px;
    font-size: var(--type-body-size);
}

body.mexora-app .header-language a,
body.mexora-app .profile-menu-panel :is(a, button),
body.mexora-app .location-menu-panel :is(a, button) {
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-ui-line);
}

body.mexora-app .profile-menu-panel :is(a, button) {
    gap: 0;
}

/* Navigation is intentionally the small-text role, not an independent scale. */
body.mexora-app :is(.app-sidebar, .mobile-navigation) .app-nav-link {
    font-family: var(--font-family-global);
    font-size: var(--type-small-size);
    font-weight: var(--type-navigation-weight);
    line-height: var(--type-ui-line);
}

body.mexora-app :is(.app-sidebar, .mobile-navigation) .app-nav-link.is-active {
    font-weight: var(--type-navigation-active-weight);
}

@media (max-width: 820px) {
    body.mexora-app .location-switcher,
    body.mexora-app .sms-wallet {
        display: flex;
    }

    body.mexora-app .header-profile-copy {
        display: none;
    }

    body.mexora-app .header-search-menu > summary {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    body.mexora-app .header-search-menu > summary span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    body.mexora-app .header-location-copy small {
        display: none;
    }

    body.mexora-app .header-location-copy strong {
        max-width: 92px;
    }
}

@media (max-width: 640px) {
    :root {
        --type-page-size: 28px;
        --type-section-size: 22px;
        --type-card-size: 18px;
        --type-body-size: 15px;
        --type-label-size: 14px;
        --type-small-size: 13px;
        --type-button-size: 15px;
        --type-tabs-size: 14px;
        --type-kpi-size: 26px;
        --type-eyebrow-size: 11px;
    }

    body.mexora-app .app-header {
        gap: 5px;
        padding-inline: 8px;
    }

    body.mexora-app .app-header-tools {
        gap: 5px;
    }

    body.mexora-app .location-switcher > summary,
    body.mexora-app .location-switcher:not(details),
    body.mexora-app .sms-wallet,
    body.mexora-app .profile-menu > summary,
    body.mexora-app .header-search-menu > summary {
        min-height: 38px;
        height: 38px;
        padding-inline: 8px;
    }

    body.mexora-app .header-language {
        height: 38px;
    }

    body.mexora-app .header-language a {
        min-width: 27px;
    }

    body :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea,
        .mx-control-trigger,
        .mx-popover-search
    ) {
        font-size:16px;
    }
}

@media (max-width: 400px) {
    body.mexora-app .header-location-copy {
        display: none;
    }

    body.mexora-app .location-switcher > summary,
    body.mexora-app .location-switcher:not(details) {
        width: 38px;
        justify-content: center;
        padding: 0;
    }

    body.mexora-app .location-switcher .header-chevron {
        display: none;
    }

    body.mexora-app .sms-wallet {
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* Mobile application header: two stable rows at phone/tablet widths. */
body.mexora-app .header-mobile-search {
    display: none;
}

body.mexora-app .header-location-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--color-accent-strong);
    background: transparent;
    border-radius: 0;
    font-size: 0;
}

body.mexora-app .header-location-icon svg,
body.mexora-app .header-wallet-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.mexora-app .header-wallet-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    color: var(--color-accent-strong);
}

body.mexora-app .sms-wallet strong {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
    body.mexora-app .app-header,
    body.mexora-app.sidebar-collapsed .app-header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: 44px 46px;
        grid-template-areas:
            "menu tools"
            "search search";
        align-content: center;
        align-items: center;
        column-gap: 6px;
        row-gap: 8px;
        width: 100%;
        min-height: 114px;
        height: 114px;
        padding: 8px;
        overflow: visible;
        box-sizing: border-box;
    }

    body.mexora-app .header-sidebar-toggle {
        grid-area: menu;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        justify-self: start;
    }

    body.mexora-app .app-header-tools {
        grid-area: tools;
        display: grid;
        grid-template-columns: minmax(44px, 1fr) auto 88px 44px;
        align-items: center;
        gap: 4px;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    body.mexora-app .app-header-tools > .subscription-over-limit-banner {
        display: none;
    }

    body.mexora-app .location-switcher {
        grid-column: 1;
        min-width: 0;
        max-width: 100%;
    }

    body.mexora-app details.location-switcher > summary,
    body.mexora-app .location-switcher:not(details) {
        display: flex;
        width: 100%;
        min-width: 44px;
        max-width: 100%;
        min-height: 44px;
        height: 44px;
        padding: 0 7px;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.mexora-app .header-location-copy {
        min-width: 0;
    }

    body.mexora-app .header-location-copy strong {
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mexora-app .sms-wallet {
        grid-column: 2;
        display: inline-flex;
        min-width: 44px;
        max-width: 86px;
        min-height: 44px;
        height: 44px;
        padding: 0 8px;
        gap: 5px;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.mexora-app .sms-wallet strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mexora-app .header-language {
        grid-column: 3;
        display: grid;
        grid-template-columns: repeat(2, 44px);
        width: 88px;
        min-width: 88px;
        height: 44px;
        padding: 0;
        gap: 0;
        overflow: hidden;
    }

    body.mexora-app .header-language a {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        border-radius: 9px;
    }

    body.mexora-app .profile-menu {
        grid-column: 4;
        justify-self: end;
    }

    body.mexora-app .profile-menu > summary {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0;
    }

    body.mexora-app .profile-menu > summary .header-chevron {
        display: none;
    }

    body.mexora-app .header-avatar {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    body.mexora-app .header-search-menu {
        display: none;
    }

    body.mexora-app .header-mobile-search {
        position: relative;
        grid-area: search;
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 46px;
    }

    body.mexora-app .header-mobile-search > svg {
        position: absolute;
        z-index: 1;
        left: 14px;
        width: 19px;
        height: 19px;
        fill: none;
        stroke: var(--color-muted);
        stroke-width: 1.8;
        pointer-events: none;
    }

    body.mexora-app .header-mobile-search input[type="search"] {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        height: 46px;
        padding: 0 14px 0 43px;
        border: 1px solid #e8d7da;
        border-radius: 11px;
        outline: 0;
        color: var(--color-ink);
        background: #fff;
        font-family: var(--font-family-global);
        font-size:16px;
        font-weight: var(--type-body-weight);
        line-height: var(--type-ui-line);
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    body.mexora-app .header-mobile-search input[type="search"]:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(154, 93, 102, 0.12);
    }

    body.mexora-app .app-main,
    body.mexora-app .app-main--dashboard {
        padding-top: 138px;
    }
}

@media (min-width: 401px) and (max-width: 430px) {
    body.mexora-app .app-header-tools {
        grid-template-columns: minmax(62px, 1fr) auto 88px 44px;
    }

    body.mexora-app .header-location-copy strong {
        font-size:12px;
    }
}

@media (max-width: 400px) {
    body.mexora-app .app-header-tools {
        grid-template-columns: 44px auto 88px 44px;
    }

    body.mexora-app .header-location-copy,
    body.mexora-app .location-switcher .header-chevron {
        display: none;
    }

    body.mexora-app details.location-switcher > summary,
    body.mexora-app .location-switcher:not(details) {
        width: 44px;
        justify-content: center;
        padding: 0;
    }

    body.mexora-app .sms-wallet {
        max-width: 72px;
    }
}
/* Mobile hero density and header dropdown containment. */
@media (max-width: 640px) {
    body.mexora-app .app-main :is(
        .hero,
        .page-hero,
        .page-hero.page-hero-compact,
        .page-hero.compact-hero,
        .account-hero,
        .brand-hero,
        .notifications-hero,
        .specialist-reactivation-header,
        .automation-form-hero
    ) {
        min-height: 0;
        gap: 8px;
        padding: 9px 14px;
        border-radius: 14px;
        box-sizing: border-box;
    }

    body.mexora-app .app-main :is(
        .hero,
        .page-hero,
        .account-hero,
        .brand-hero,
        .notifications-hero,
        .specialist-reactivation-header,
        .automation-form-hero
    ) :is(.eyebrow, [class*="-eyebrow"]) {
        margin-top: 0;
        margin-bottom: 2px;
        font-size:12px;
        line-height: 1.2;
    }

    body.mexora-app .app-main :is(
        .hero,
        .page-hero,
        .account-hero,
        .brand-hero,
        .notifications-hero,
        .specialist-reactivation-header,
        .automation-form-hero
    ) h1,
    body.mexora-app .app-main .dashboard-overview-copy h1 {
        margin-top: 0;
        margin-bottom: 0;
        font-size:24px;
        line-height: 1.12;
    }

    body.mexora-app .app-main .page-hero > div:first-child > p:not(.eyebrow),
    body.mexora-app .app-main .page-hero > div:first-child > div:first-child > p:not(.eyebrow),
    body.mexora-app .app-main .hero-copy,
    body.mexora-app .app-main .account-hero p:last-child,
    body.mexora-app .app-main .brand-hero p:last-child,
    body.mexora-app .app-main .notifications-hero > div:first-child > p:last-child,
    body.mexora-app .app-main .specialist-reactivation-header p:last-child,
    body.mexora-app .app-main .automation-form-hero p:last-child {
        margin-top: 3px;
        margin-bottom: 0;
        font-size:14px;
        line-height: 1.3;
    }

    body.mexora-app .app-main :is(
        .page-hero-actions,
        .hero-actions,
        .team-header-actions,
        .team-profile-header-actions,
        .client-profile-header-actions,
        .notifications-hero-actions,
        .location-hero-actions,
        .brand-statuses
    ) {
        gap: 6px;
    }

    body.mexora-app .app-main .notifications-title-line {
        gap: 3px;
    }
}

@media (max-width: 820px) {
    body.mexora-app .sms-wallet {
        max-width: 96px;
        padding-inline: 7px;
        gap: 3px;
    }

    body.mexora-app .sms-wallet strong {
        font-size:12px;
        line-height: 1.2;
    }

    body.mexora-app .location-menu-panel {
        position: fixed;
        top: 120px;
        right: 8px;
        left: 8px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: calc(100dvh - 132px);
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }

    body.mexora-app .location-menu-item {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.mexora-app .location-menu-item > span:last-child {
        min-width: 0;
    }

    body.mexora-app .location-menu-item :is(strong, small) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    body.mexora-app .sms-wallet {
        max-width: 84px;
        padding-inline: 6px;
    }
}

/* Dashboard mobile hero: compact the full summary surface, not only its heading. */
@media (max-width: 640px) {
    body.mexora-app .app-main .dashboard-overview {
        gap: 8px;
        margin-bottom: 10px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    body.mexora-app .app-main .dashboard-overview > .dashboard-overview-main {
        gap: 9px;
    }

    body.mexora-app .app-main .dashboard-overview-copy .eyebrow {
        margin-bottom: 2px;
        font-size:12px;
        line-height: 1.2;
    }

    body.mexora-app .app-main .dashboard-period-values {
        gap: 6px;
        margin-top: 8px;
    }

    body.mexora-app .app-main .dashboard-period-values > span {
        min-height: 56px;
        padding: 8px 9px;
        border-radius: 10px;
        line-height: 1.2;
    }

    body.mexora-app .app-main .dashboard-period-values strong {
        margin-bottom: 3px;
        font-size: clamp(16px, 4.6vw, 19px);
    }

    body.mexora-app .app-main .dashboard-period-panel {
        gap: 3px;
    }

    body.mexora-app .app-main .dashboard-period-switcher {
        padding: 2px;
    }

    body.mexora-app .app-main .dashboard-period-switcher button {
        min-height: 36px;
        padding: 6px 9px;
    }

    body.mexora-app .app-main .dashboard-comparison {
        padding: 1px 3px;
    }

    body.mexora-app .app-main .dashboard-quick-actions {
        gap: 6px;
        padding-top: 0;
    }

    body.mexora-app .app-main .dashboard-quick-actions .button {
        min-height: 44px;
        padding: 7px 8px;
    }
}

/* Dashboard salon mobile: relaxed vertical rhythm with the existing two-CTA structure. */
@media (max-width: 640px) {
    body.mexora-app .app-main .dashboard-overview {
        gap: 15px;
        padding: 20px;
    }

    body.mexora-app .app-main .dashboard-overview > .dashboard-overview-main {
        gap: 15px;
    }

    body.mexora-app .app-main .dashboard-overview-copy h1 {
        font-size:24px;
        line-height: 1.1;
    }

    body.mexora-app .app-main .dashboard-period-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 15px;
    }

    body.mexora-app .app-main .dashboard-period-values > span {
        width: 100%;
        min-height: 88px;
        padding: 14px;
    }

    body.mexora-app .app-main .dashboard-period-panel {
        gap: 8px;
    }

    body.mexora-app .app-main .dashboard-period-switcher {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 2px;
        min-height: 44px;
        padding: 4px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.mexora-app .app-main .dashboard-period-switcher::-webkit-scrollbar {
        display: none;
    }

    body.mexora-app .app-main .dashboard-period-switcher button {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        height: 36px;
        min-height: 36px;
        padding: 0 8px;
        font-size:14px;
        line-height: 1.2;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    body.mexora-app .app-main .dashboard-comparison {
        min-height: 0;
        margin-top: 0;
        padding: 3px 2px;
        color: #776b6f;
        font-size:12px;
        font-weight: var(--type-secondary-weight);
        line-height: 1.3;
    }

    body.mexora-app .app-main .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-top: 0;
        border-top: 0;
    }

    body.mexora-app .app-main .dashboard-quick-actions .button {
        display: inline-flex;
        width: 100%;
        height: 52px;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 9px;
        font-size:14px;
        line-height: 1.2;
        white-space: nowrap;
    }

    body.mexora-app .app-main .dashboard-quick-actions svg {
        display: block;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    body.mexora-app .app-main .dashboard-quick-actions > :only-child {
        grid-column: 1 / -1;
    }
}

/* Global font-weight hierarchy. Loaded last to neutralize legacy module weights. */
body.mexora-app .app-main h1,
.auth-page .auth-main h1,
.onboarding-page .onboarding-main h1 {
    font-weight: var(--type-page-weight) !important;
}

body.mexora-app .app-main h2,
.auth-page .auth-main h2,
.onboarding-page .onboarding-main h2 {
    font-weight: var(--type-section-weight) !important;
}

body.mexora-app .app-main :is(h3, h4, h5, h6),
.auth-page .auth-main :is(h3, h4, h5, h6),
.onboarding-page .onboarding-main :is(h3, h4, h5, h6) {
    font-weight: var(--type-card-weight) !important;
}

body.mexora-app .app-main :is(p, li, dd, blockquote),
.auth-page .auth-main :is(p, li, dd, blockquote),
.onboarding-page .onboarding-main :is(p, li, dd, blockquote) {
    font-weight: var(--type-body-weight) !important;
}

body :is(
    small,
    .field-help,
    .form-hint,
    [class*="-description"],
    [class*="-help"],
    [class*="-hint"],
    [class*="-meta"]
) {
    font-weight: var(--type-secondary-weight) !important;
}

body :is(label, legend, dt, .field-label, [class*="-label"]) {
    font-weight: var(--type-label-weight) !important;
}

body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    output,
    .mx-control-trigger,
    .mx-popover-search
) {
    font-weight: var(--type-control-weight) !important;
}

body.mexora-app :is(.app-main, .app-header, .app-sidebar, .mobile-navigation, dialog) :is(
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
),
.auth-page :is(.auth-main, dialog) :is(.button, button, input[type="submit"], [role="button"]),
.onboarding-page :is(.onboarding-main, dialog) :is(.button, button, input[type="submit"], [role="button"]) {
    font-weight: var(--type-button-weight) !important;
}

body.mexora-app :is(.app-main, .app-header) :is(
    [class*="-tabs"],
    [class*="-switcher"],
    [class*="-filters"],
    [class*="-filter-bar"]
) :is(a, button, [role="tab"]),
body.mexora-app .app-main .dashboard-period-switcher button {
    font-weight: var(--type-tabs-weight) !important;
}

body.mexora-app :is(.app-main, .app-header) :is(.eyebrow, [class*="-eyebrow"], [class*="-overline"]),
.auth-page .auth-main :is(.eyebrow, [class*="-eyebrow"], [class*="-overline"]),
.onboarding-page .onboarding-main :is(.eyebrow, [class*="-eyebrow"], [class*="-overline"]) {
    font-weight: var(--type-eyebrow-weight) !important;
}

body.mexora-app :is(.app-main, .app-header, .app-sidebar, .mobile-navigation, dialog) :is(strong, b),
.auth-page :is(.auth-main, dialog) :is(strong, b),
.onboarding-page :is(.onboarding-main, dialog) :is(strong, b) {
    font-weight: var(--type-emphasis-weight) !important;
}

body.mexora-app .app-main :is(
    .dashboard-period-values,
    .appointment-kpis,
    .team-kpis,
    .client-import-stats,
    .client-validation-cards,
    [class*="-kpis"],
    [class*="-metric-grid"]
) strong,
body.mexora-app .app-main :is(
    .metric-card,
    .platform-metric-card,
    .report-metric-card,
    .report-kpi-card,
    .report-compact-metric,
    .client-kpi,
    .notification-kpi,
    .automation-metric,
    .support-kpi,
    .resource-metric,
    .reactivation-results-compact article
) > strong,
body.mexora-app .app-main :is(.campaign-report-metric-value, [class*="-kpi-value"]) {
    font-weight: var(--type-kpi-weight) !important;
}

body.mexora-app :is(.app-sidebar, .mobile-navigation) .app-nav-link {
    font-weight: var(--type-navigation-weight) !important;
}

body.mexora-app :is(.app-sidebar, .mobile-navigation) .app-nav-link.is-active {
    font-weight: var(--type-navigation-active-weight) !important;
}

body.mexora-app :is(.app-main, .app-header, dialog) :is(
    [class*="-badge"],
    [class*="-pill"],
    [class*="-status"]
) {
    font-weight: var(--type-status-weight) !important;
}

body.mexora-app .app-main :is(table, .data-table, .report-table, [class*="-table"]) :is(
    th,
    .data-table-header,
    [class*="-table-header"]
) {
    font-weight: var(--type-label-weight) !important;
}

body.mexora-app .app-main :is([class*="calendar"], [class*="appointment"]) time,
body.mexora-app :is(.app-header, .app-main, dialog) details > summary,
body.mexora-app .app-main [class*="-actions"] :is(a, button) {
    font-weight: var(--type-label-weight) !important;
}

/* ==== NOTIF-KPI-VAR: cifrele de notificări nu sunt titluri ==== */

body.mexora-app .app-main .notification-kpi {
    --type-kpi-weight: 500;
}

body.mexora-app .app-main .notification-kpi > strong,
body.mexora-app .app-main .notification-kpi strong {
    font-size: 19px;
    letter-spacing: -.005em;
}

@media (max-width: 640px) {
    body.mexora-app .app-main .notification-kpi > strong,
    body.mexora-app .app-main .notification-kpi strong {
        font-size: 18px;
    }
}