/*
 * CUSPID theme for the EasyAdmin 4 layout, used by every portal page after login
 * (EasyAdmin CRUD pages and the custom pages extending templates/admin/page.html.twig).
 * Loaded by App\Controller\Admin\DashboardController::configureAssets().
 */
:root {
    --color-primary: #56b2ff;
    --link-color: #2c7fc9;
    --link-hover-color: #3f546d;
    --button-primary-bg: #56b2ff;

    --sidebar-bg: #002855;
    --sidebar-border-color: #002855;
    --sidebar-logo-color: #ffffff;
    --sidebar-menu-color: #ffffff;
    --sidebar-menu-header-color: #ffffff;
    --sidebar-menu-submenu-color: #dbe7f5;
    --sidebar-menu-icon-color: #ffcc33;
    --sidebar-menu-active-item-bg: rgba(255, 255, 255, 0.15);
    --sidebar-menu-active-item-color: #ffffff;

    --responsive-header-bg: #002855;
    --responsive-header-border-color: #002855;
    --responsive-header-logo-color: #ffffff;
}

body.ea {
    font-family: "Nexa", "Myriad Pro", Helvetica, Arial, sans-serif;
}

body.ea #main-menu .menu .menu-icon {
    color: var(--sidebar-menu-icon-color);
}

body.ea #main-menu .menu .menu-item-contents:hover,
body.ea #main-menu .menu .menu-item-contents:hover .menu-icon {
    color: #ffffff;
}

/* ---- Footer (templates/bundles/EasyAdminBundle/layout.html.twig) ---- */
.cuspid-footer {
    background: #002855;
    color: #ffffff;
    font-size: 13px;
    padding: 10px 20px;
    text-align: center;
}

.cuspid-footer a {
    color: #56b2ff;
}

/* ---- Bootstrap 4 classes still used by the custom portal page templates ----
   (EasyAdmin 2 shipped Bootstrap 4; EasyAdmin 4 ships Bootstrap 5) */
.form-group {
    margin-bottom: 1rem;
}

.custom-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color, #212529);
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: auto;
}

.btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
}

.btn-default:hover {
    background-color: #e2e6ea;
}

.input-lg {
    font-size: 1.1rem;
}

/* ---- Custom portal pages: their content_header block prints its own <h1 class="title"> ---- */
.page-content .content-header {
    flex-wrap: wrap;
}

.page-content .content-header > h1.title {
    flex: 1 0 100%;
    font-size: var(--font-size-xxl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.page-content .content-header > .col-12 {
    flex: 0 0 100%;
    margin-top: 10px;
}

/* ---- Login pages (templates/security/login_layout.html.twig) ---- */
body.page-login {
    --page-login-bg: #002855;
    --page-login-form-control-button-bg: #56b2ff;
    background: #002855;
}

body.page-login .login-wrapper {
    inline-size: 28rem;
    max-inline-size: calc(100vw - 32px);
}

body.page-login .login-wrapper .main-header #header-logo {
    text-align: center;
}

body.page-login .footer,
body.page-login .footer .copyright {
    color: #ffffff;
    text-align: center;
    margin-top: 1rem;
    font-size: 13px;
}

body.page-login .footer a {
    color: #56b2ff;
}

/* icon + input (+ show-password eye) on one line (EasyAdmin 2 "form-widget-with-icon") */
.form-widget-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-widget-with-icon > input {
    flex: 1 1 auto;
}

.form-widget-with-icon > .fa,
.form-widget-with-icon > .fas {
    color: #6c757d;
}

/* EasyAdmin 4 buttons use "justify-content: space-between", which pushes the icon and the text
   to opposite ends of a full-width button (e.g. the Sign In buttons): keep them together in the center */
.btn.w-100,
.login-wrapper .btn {
    justify-content: center;
}

/* Login page country selection modal: EasyAdmin 4 buttons are single-line flex rows, which put the
   country name next to the flag and cut it off; stack the flag and the name as in the old layout */
#countrySelectModal .btn-country {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    white-space: normal;
}
#countrySelectModal .btn-country br {
    display: none;
}