/* ANIXE branding for Roundcube Elastic.
 * No layout dimensions are changed: Elastic remains fully responsive.
 */
:root {
    --anixe-navy: #07162d;
    --anixe-navy-active: #10233f;
    --anixe-dark-panel: #0d1c2b;
    --anixe-dark-canvas: #0d1c2b;
    --anixe-dark-line: #29405a;
    --anixe-gold: #f5b02f;
}

/* Full, unmodified ANIXE logo on the login page. */
body.task-login {
    background: linear-gradient(135deg, #07162d 0%, #10233f 100%) !important;
}

body.task-login #logo img {
    display: block;
    width: min(320px, 72vw) !important;
    height: auto !important;
    max-height: 86px !important;
    margin-inline: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Keep Elastic's original rail dimensions and make only its surface coherent. */
#layout-menu,
#layout-menu .popover-header,
#layout-menu a.button {
    background-color: var(--anixe-navy) !important;
}

#layout-menu a.button {
    color: #eef3f8 !important;
}

#layout-menu a.button.selected,
#layout-menu a.button:hover,
#layout-menu a.button:focus {
    color: var(--anixe-gold) !important;
    background-color: var(--anixe-navy-active) !important;
    box-shadow: inset 3px 0 0 var(--anixe-gold);
}

#layout-menu a.button.selected::before,
#layout-menu a.button:hover::before,
#layout-menu a.button:focus::before {
    color: var(--anixe-gold) !important;
}

/* Fit the original horizontal mark inside Elastic's existing logo slot. */
#layout-menu .popover-header img,
#layout-menu #logo img,
#layout-menu .logo img {
    display: block;
    width: calc(100% - 8px) !important;
    height: auto !important;
    max-width: 68px !important;
    max-height: 32px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Gold is used as an accent only; native light/dark surfaces stay untouched. */
#layout-sidebar .listing li.selected {
    box-shadow: inset 3px 0 0 var(--anixe-gold);
}

#layout-sidebar .listing li.selected > a::before,
#layout-list .listing li.selected > a::before,
#layout-list .listing tr.selected > td:first-child::before {
    color: var(--anixe-gold) !important;
}

.btn-primary,
button.btn-primary,
input.btn-primary {
    color: var(--anixe-navy) !important;
    background-color: var(--anixe-gold) !important;
    border-color: var(--anixe-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
    color: var(--anixe-navy) !important;
    background-color: #ffc34d !important;
    border-color: #ffc34d !important;
}

/* ANIXE blue palette for Elastic dark mode, without changing its layout. */
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
body.dark-mode #layout-sidebar,
body.dark-mode #layout-list {
    background-color: var(--anixe-dark-panel) !important;
}

html.dark-mode #layout-content,
html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #layout-content iframe,
body.dark-mode #layout-content,
body.dark-mode #layout-content .iframe-wrapper,
body.dark-mode #layout-content iframe {
    background-color: var(--anixe-dark-canvas) !important;
}

html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header,
html.dark-mode .toolbar,
body.dark-mode #layout-sidebar .header,
body.dark-mode #layout-list .header,
body.dark-mode #layout-content .header,
body.dark-mode .toolbar {
    background-color: var(--anixe-navy) !important;
    border-color: var(--anixe-dark-line) !important;
}

html.dark-mode #layout-sidebar .listing li,
html.dark-mode #layout-list .listing li,
body.dark-mode #layout-sidebar .listing li,
body.dark-mode #layout-list .listing li {
    border-color: var(--anixe-dark-line) !important;
}

html.dark-mode #layout-sidebar .listing li.selected,
html.dark-mode #layout-sidebar .listing li.selected > a,
body.dark-mode #layout-sidebar .listing li.selected,
body.dark-mode #layout-sidebar .listing li.selected > a {
    color: var(--anixe-gold) !important;
    background-color: var(--anixe-navy-active) !important;
}