/*
 * Em Vida remote theme for the official Moodle App.
 *
 * Configure this file in:
 * Site administration > Mobile app > Mobile appearance > CSS
 *
 * Suggested URL:
 * https://ead.emvida.com/theme/emvida/style/mobileapp.css?v=20260511-1
 */

body {
    --brand-color: #0f47ad;

    --ion-color-primary: #0f47ad;
    --ion-color-primary-rgb: 15, 71, 173;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #0d3f98;
    --ion-color-primary-tint: #2758b5;

    --background-color: #f2f3f7;
    --ion-background-color-rgb: 242, 243, 247;
    --text-color: #213053;
    --ion-text-color-rgb: 33, 48, 83;
    --subdued-text-color: #667085;
    --core-link-color: #0f47ad;

    --core-header-toolbar-background: #0f47ad;
    --core-header-toolbar-color: #ffffff;
    --core-header-toolbar-border-width: 0;

    --core-bottom-tabs-background: #ffffff;
    --core-bottom-tabs-background-selected: rgba(15, 71, 173, 0.08);
    --core-bottom-tabs-color: #667085;
    --core-bottom-tabs-color-selected: #0f47ad;
    --core-bottom-tabs-badge-color: #f7bf29;
    --core-bottom-tabs-badge-text-color: #213053;

    --ion-item-background: #ffffff;
    --item-divider-background: #f8f9fa;
    --item-divider-color: #213053;
    --spacer-background: #f2f3f7;

    --core-login-background: #0f47ad;
    --core-login-text-color: #ffffff;
    --core-login-input-background: #ffffff;
    --core-login-input-color: #213053;
}

body.dark {
    --background-color: #0f172a;
    --ion-background-color-rgb: 15, 23, 42;
    --text-color: #f8fafc;
    --ion-text-color-rgb: 248, 250, 252;
    --subdued-text-color: #cbd5e1;
    --core-link-color: #9fc0ff;

    --core-header-toolbar-background: #0c2748;
    --core-bottom-tabs-background: #182233;
    --core-bottom-tabs-background-selected: rgba(159, 192, 255, 0.14);
    --core-bottom-tabs-color: #d0d5dd;
    --core-bottom-tabs-color-selected: #ffffff;

    --ion-item-background: #182233;
    --item-divider-background: #0f172a;
    --item-divider-color: #f8fafc;
    --spacer-background: #0f172a;
}

ion-content,
.ion-page,
body {
    --background: var(--background-color);
}

ion-header ion-toolbar {
    box-shadow: 0 10px 24px rgba(15, 71, 173, 0.16);
}

ion-header ion-toolbar.in-toolbar h1,
ion-header ion-toolbar.in-toolbar h2,
ion-title {
    font-weight: 700;
    letter-spacing: 0.01em;
}

ion-tab-bar.mainmenu-tabs {
    border-top: 1px solid rgba(15, 71, 173, 0.08);
    box-shadow: 0 -8px 24px rgba(15, 71, 173, 0.08);
}

ion-tab-button.tab-selected {
    font-weight: 600;
}

ion-searchbar {
    --background: #ffffff;
    --border-radius: 14px;
    --box-shadow: 0 6px 18px rgba(15, 71, 173, 0.08);
}

body.dark ion-searchbar {
    --background: #182233;
}

ion-button {
    --border-radius: 14px;
    --box-shadow: 0 10px 20px rgba(15, 71, 173, 0.18);
    font-weight: 600;
}

ion-button::part(native) {
    text-transform: none;
}

ion-card,
page-core-mainmenu-home ion-card,
page-core-sitehome ion-card {
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 71, 173, 0.08);
    overflow: hidden;
}

ion-item {
    --inner-border-width: 0;
    --border-color: transparent;
    --border-radius: 14px;
    margin-bottom: 0.5rem;
}

ion-list {
    background: transparent;
}

core-format-text,
.core-format-text-content,
ion-card-content {
    line-height: 1.6;
}

core-format-text h1,
core-format-text h2,
core-format-text h3,
.core-format-text-content h1,
.core-format-text-content h2,
.core-format-text-content h3 {
    color: var(--text-color);
    font-weight: 700;
}

core-format-text p,
.core-format-text-content p,
ion-card p {
    color: var(--subdued-text-color);
}

core-format-text a,
.core-format-text-content a,
ion-card a {
    color: var(--core-link-color);
    font-weight: 600;
}

ion-app core-course-format .core-course-thumb,
ion-app .core-course-thumb {
    display: block !important;
    border-radius: 16px;
    overflow: hidden;
}

ion-app .core-course-thumb img,
ion-app core-course-format .core-course-thumb img {
    border-radius: 16px;
}

page-core-mainmenu-home .item,
page-core-sitehome .item,
page-core-mainmenu-home ion-item,
page-core-sitehome ion-item {
    --background: #ffffff;
}

body.dark page-core-mainmenu-home .item,
body.dark page-core-sitehome .item,
body.dark page-core-mainmenu-home ion-item,
body.dark page-core-sitehome ion-item {
    --background: #182233;
}