/* PansarPost brand on top of the packaged Elastic skin (Roundcube 1.5).
   Colours come from the portal theme: roles/account/App/Public/css/site.css.
   Elastic's main blue (#37beff) is already close to the brand blue, so only
   the font, the menu, buttons, links and headers change here.
   Colour rules here apply in light mode only. pansarpost-dark.css holds the
   dark mode colours, generated from all of Elastic's dark rules. */

@font-face {
    font-family: "Fira Sans";
    src: url("fonts/fira-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PansarPost Heading";
    src: url("fonts/pansarpost-heading.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("fonts/fira-sans-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body, button, input, optgroup, select, textarea, .popover {
    font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

div.tox, div.tox :not(.svg) {
    font-family: "Fira Sans", system-ui, sans-serif !important;
}

/* :where() keeps the weight of Elastic's own link rule, so lists and menus
   that set their own text colour keep it. */
:where(html:not(.dark-mode)) a, :where(html:not(.dark-mode)) .btn-link {
    color: #00478a;
}

:where(html:not(.dark-mode)) a:hover, :where(html:not(.dark-mode)) .btn-link:hover {
    color: #001a3d;
}

/* The task menu on the left: brand navy instead of slate. On phones, Elastic
   shows the menu as a light panel, so these rules use its own breakpoint. */
@media screen and (min-width: 481px) {
    html:not(.dark-mode) #layout-menu,
    html:not(.dark-mode) #taskmenu .special-buttons {
        background-color: #00316d;
    }

    html:not(.dark-mode) #layout-menu .popover-header {
        background-color: #00316d !important;
    }

    html:not(.dark-mode) #taskmenu a.selected,
    html:not(.dark-mode) #taskmenu a:hover,
    html:not(.dark-mode) #taskmenu a:focus {
        background-color: #00478a;
    }

    html:not(.dark-mode) #taskmenu .action-buttons a {
        color: #39b5ff;
    }
}

/* White text on the light blue fails contrast. Use the dark accent. */
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .btn-primary:disabled,
html:not(.dark-mode) .btn-primary.disabled,
html:not(.dark-mode) .floating-action-buttons a.button,
html:not(.dark-mode) div.tox .tox-dialog__footer .tox-button {
    background: #00478a;
    border-color: #00478a;
    color: #fff;
}

html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .btn-primary:focus,
html:not(.dark-mode) .btn-primary:not(:disabled):not(.disabled):active,
html:not(.dark-mode) div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
    background: #00316d;
    border-color: #00316d;
    color: #fff;
}

/* Page headers, footers and dialogs: the light brand paper. */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer,
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar,
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane {
    background-color: #f1f9ff;
}

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) ul.treelist li.selected > a,
html:not(.dark-mode) ul.treelist li.selected > div > a,
html:not(.dark-mode) .table-widget table.options-table tr.selected td {
    background-color: #d0ecff;
}

/* Login page: the brand paper and a card around the form. */
html:not(.dark-mode) body.task-login,
html:not(.dark-mode) .task-login #layout-content {
    background-color: #f1f9ff;
}

/* The logo and the name, as in the portal header. The plugin wraps them.
   The wrapper takes Elastic's offset from the logo. */
.task-login .pansarpost-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    top: 16vh;
}

.task-login .pansarpost-brand #logo {
    top: 0;
    max-height: 60px;
}

.pansarpost-wordmark {
    font-style: normal;
    font-synthesis: none;
    font-family: "PansarPost Heading", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    color: #00316d;
}

html.dark-mode .pansarpost-wordmark {
    color: #e8f0f6;
}

@media screen and (max-width: 480px) {
    .task-login .pansarpost-brand {
        gap: 10px;
    }

    .task-login .pansarpost-brand #logo {
        max-height: 44px;
    }

    .pansarpost-wordmark {
        font-size: 24px;
    }
}

html:not(.dark-mode) #login-form {
    background: #fff;
    border: 1px solid #bfe3ff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 49, 109, 0.06), 0 8px 24px rgba(0, 49, 109, 0.08);
    padding: 1.5rem 1.25rem 1rem;
}