/*
 * Hosteaze webmail skin.
 *
 * Roundcube's Elastic skin does the work; this sits on top of it and changes
 * the colours, the typeface and the spacing so the inbox feels like the
 * familiar webmail people expect, in Hosteaze's own colours rather than a
 * generic blue.
 *
 * Everything here is an override: the import below pulls in Elastic itself, so
 * a Roundcube update keeps working and only our colours stay ours.
 */
@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    /* Hosteaze brand: pink is the exclamation mark, indigo is the foundation. */
    --color-main: #fe1e88;
    --color-main-dark: #e8127a;
    --color-main-darker: #c20f66;
    --color-black: #17182a;
    --color-font: #17182a;

    --color-link: #24266a;
    --color-link-hover: #fe1e88;

    --color-btn-primary-background: #fe1e88;
    --color-btn-primary-background-hover: #e8127a;
    --color-btn-secondary: #24266a;

    --color-layout-header-background: #ffffff;
    --color-layout-sidebar-background: #f7f8fc;
    --color-list-selected-background: #f1f3f8;
    --color-list-selected-border: #d9dde8;
    --color-list-focus-background: #f1f3f8;
    --color-message-unread: #24266a;

    --color-spinner-dark: #fe1e88;
    --color-checkbox-checked: #fe1e88;
    --color-checkbox-checked-focus: #e8127a;

    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html,
body,
.ui.input,
input,
select,
textarea,
button {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* The side menu. Elastic ships it near-black with white icons, and paints the
   logo tile and the bottom buttons in three different shades. Everything here
   is forced to one white panel with dark icons and text.
   These need !important: Elastic's own rules are written that way, so a plain
   override loses to them. */
#layout-menu,
#layout-menu .popover-header,
#layout-menu .special-buttons,
#layout-menu .special-buttons a:not(:focus) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#layout-menu {
    border-right: 1px solid #e8eaf2 !important;
}

#taskmenu a,
#layout-menu .special-buttons a {
    color: #17182a !important;
    background: transparent !important;
    border-bottom-color: #f0f1f6 !important;
}

#taskmenu a:hover,
#layout-menu .special-buttons a:hover {
    color: #17182a !important;
    background: #f7f8fc !important;
}

/* The section you are in. */
#taskmenu a.selected,
#taskmenu a.selected:hover {
    color: #17182a !important;
    background: #f1f3f8 !important;
}

/* Every panel header white. Elastic paints them #f4f4f4 with a grey rule
   underneath, which is most of what makes it look like an admin panel. */
#layout > div > .header,
#layout > div > .footer,
#layout > .header {
    background-color: #ffffff !important;
    color: #17182a !important;
    border-bottom: 1px solid #f0f1f6 !important;
}

/* Folder list, as rounded pills. This is the single biggest reason the default
   looks like an old control panel and Gmail looks modern: the same list, but
   rounded and with air around it. */
#folderlist,
.folderlist,
#layout-sidebar .scroller {
    background: #ffffff;
}

ul.treelist li > a {
    border-radius: 0 999px 999px 0;
    margin: 1px 0.75rem 1px 0;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    color: #17182a;
    border-bottom: 0 !important;
}

ul.treelist li > a:hover {
    background: #f4f5f9;
}

ul.treelist li.selected > a,
.listing li.selected > a,
.listing li.selected {
    background-color: #f1f3f8 !important;
    color: #17182a !important;
    font-weight: 600;
}

/* The unread count, as a quiet pill rather than a shouty badge. */
ul.treelist li .unreadcount,
.listing li .unreadcount {
    background: transparent;
    color: #55566a;
    font-weight: 600;
    font-size: 0.8rem;
}

ul.treelist li.selected .unreadcount {
    color: #17182a;
}

/* Search: a rounded, filled field, the way every modern inbox does it. */
.searchbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f1f6 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 0.75rem;
}

.searchbar form {
    background: #f1f3f8;
    border-radius: 999px;
    align-items: center;
    height: 38px;
    padding-right: 0.5rem;
}

.searchbar form:before {
    height: 38px !important;
    line-height: 38px !important;
    color: #6e6f82 !important;
}

.searchbar input {
    background: transparent !important;
    border: 0 !important;
    height: 38px !important;
}

/* Message list: two airy lines per message, sender above subject, with the
   unread ones carrying the weight. Rounded rows keep it feeling light. */
.messagelist tbody > tr {
    border-bottom: 1px solid #f4f5f9;
}

.messagelist tbody > tr > td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.messagelist tbody > tr td.subject span.fromto,
.messagelist tbody > tr td.subject span.date {
    color: #6e6f82;
    font-size: 0.86rem;
}

.messagelist tbody > tr td.subject span.subject {
    color: #17182a;
    font-size: 0.95rem;
}

.messagelist tbody > tr.unread td.subject span.subject {
    font-weight: 700;
    color: #17182a;
}

.messagelist tbody > tr.unread td.subject span.fromto {
    font-weight: 600;
    color: #24266a;
}

/* Selected message: quiet grey, so the only strong colour on the page is the
   one action button. */
.messagelist tbody > tr.selected td,
.listing tr.selected td {
    background-color: #f1f3f8 !important;
    color: #17182a !important;
}

.messagelist tbody > tr:hover td {
    background-color: #f7f8fc;
}

/* The unread dot in brand pink rather than the default blue. */
.messagelist td.subject span.msgicon.status:before,
.messagelist tbody > tr.unread td.flag span:before {
    color: #fe1e88 !important;
}

/* Buttons: brand pink for the action people actually want.
   Elastic hard-codes its blue for every state, including while a form is
   submitting - which is why the Login button flashed blue as it worked. Each
   state has to be named, or the blue comes back at the worst moment. */
.btn-primary,
a.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    color: #ffffff;
    background: #fe1e88;
    background-color: #fe1e88;
    border-color: #fe1e88;
}

.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: #e8127a;
    background-color: #e8127a;
    border-color: #e8127a;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    background: #e8127a;
    border-color: #e8127a;
    box-shadow: 0 0 0 0.2rem rgba(254, 30, 136, 0.35);
}

.btn-secondary {
    color: #24266a;
}

a.button.create,
.toolbar a.create {
    color: #fe1e88;
}

/* Login page: the first thing a client sees, so it should look like Hosteaze
   rather than a stock installation. Elastic puts the form straight inside
   #layout-content with the body carrying task-login, so that is what we style -
   there is no wrapper box of its own to hang the card on. */
body.task-login #layout-content {
    background: #ffffff;
}

body.task-login #login-form {
    background: #ffffff;
    border: 1px solid #e8eaf2;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(23, 24, 42, 0.05);
    padding: 2rem 1.75rem 1.5rem;
    width: min(92vw, 400px);
}

body.task-login #login-form #logo {
    max-height: 44px;
    width: auto;
    margin-bottom: 1.25rem;
}

body.task-login #login-form input.form-control:focus {
    border-color: #fe1e88;
    box-shadow: 0 0 0 3px rgba(254, 30, 136, 0.15);
}

/* Dark mode: keep the brand pink readable rather than glaring. */
@media (prefers-color-scheme: dark) {
    :root.dark-mode {
        --color-main: #ff5ba6;
        --color-link: #9fa3ff;
        --color-list-selected-background: #2a2036;
    }
}

/* Compose, as the one obviously-clickable thing on the page: a rounded button
   with a little lift, rather than another flat item in the icon rail. */
#layout-menu .special-buttons a.compose,
#taskmenu a.compose,
a.button.compose {
    background: #ffffff !important;
    color: #17182a !important;
    border: 1px solid #e3e6ef;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(23, 24, 42, 0.12);
    /* Stay inside the rail: a wider pill spills over the folder list, because
       the rail does not clip what sticks out of it. */
    display: block;
    box-sizing: border-box;
    width: calc(100% - 0.8rem);
    margin: 0.6rem auto 0.9rem;
    padding: 0.7rem 0.2rem;
    height: auto !important;
    line-height: 1.25 !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    overflow: hidden;
}

#layout-menu .special-buttons a.compose:before,
#taskmenu a.compose:before {
    font-size: 1.4em !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 0.15rem 0 !important;
}

#layout-menu .special-buttons a.compose:hover,
#taskmenu a.compose:hover {
    background: #fff0f7 !important;
    color: #fe1e88 !important;
    box-shadow: 0 2px 8px rgba(254, 30, 136, 0.2);
}

/* Softer panel edges and dividers throughout: the difference between
   "control panel" and "modern inbox" is mostly this. */
#layout > div {
    border-color: #eceef5 !important;
}

#layout-list .header,
#layout-content .header,
#layout-sidebar .header {
    background: #ffffff;
    border-bottom: 1px solid #f0f1f6;
}

/* The reading pane: give the message room to breathe. */
#messagecontframe,
#message-content {
    background: #ffffff;
}

#message-header {
    border-bottom: 1px solid #f0f1f6;
}

#message-header .subject {
    color: #17182a;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * No blue anywhere. Elastic's accent is #00acff for links and #37beff for
 * everything else, hard-coded rather than held in a variable, so each use has
 * to be named. Anything missed shows up as a stray blue link or icon.
 * ------------------------------------------------------------------------ */
a,
a:active,
.btn-link,
#message-header a,
#message-header .subject a,
.message-part a,
.boxtitle a {
    color: #fe1e88;
}

a:hover,
.btn-link:hover,
#message-header a:hover {
    color: #e8127a;
}

/* Icons that carry the accent: Details, Headers, open-in-new, attachments. */
#message-header a.headers-details:before,
#message-header a.headers-source:before,
#message-header .message-headers a:before,
a.extwin:before,
a.button.extwin:before,
.message-part a.extwin:before,
#messageheader a:before,
.listing .icon:before {
    color: #fe1e88 !important;
}

/* The bar down the side of the open message in the list. */
.messagelist tbody > tr.focused td:first-child,
.messagelist tbody > tr.selected td:first-child,
.listing tr.selected td:first-child {
    box-shadow: inset 3px 0 0 #fe1e88;
}

/* Selection, spinners and progress: all the small blues. */
::selection {
    background: rgba(254, 30, 136, 0.18);
}

a:hover {
    background-color: transparent !important;
}

.ui.alert.alert-info,
.ui.alert.alert-info:before {
    color: #24266a;
}

/* Compose, moved out of the icon rail and put above the folder list, where
   people expect the main action to be. The button is placed there by the
   template patch in webmail-setup.sh; this is only its appearance. */
.compose-wrap {
    padding: 0.85rem 0.85rem 0.6rem;
    background: #ffffff;
}

.compose-wrap a.compose {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    padding: 0.85rem 1rem !important;
    background: #ffffff !important;
    color: #17182a !important;
    border: 1px solid #e3e6ef !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(23, 24, 42, 0.14);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2 !important;
    text-align: center;
}

.compose-wrap a.compose:hover {
    background: #fdfdff !important;
    box-shadow: 0 4px 14px rgba(23, 24, 42, 0.18);
}

.compose-wrap a.compose:before {
    /* Our own plus, split corner to corner: pink above, indigo below. The
       content is emptied because Elastic's icon is a font character, and a
       font character cannot be two colours. */
    content: "" !important;
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    background: url("../images/compose-plus.svg") no-repeat center / contain;
}

/* ---------------------------------------------------------------------------
 * Dark mode.
 *
 * Roundcube puts .dark-mode on <html>. Everything above forces white with
 * !important, which in dark mode left white panels next to near-black ones.
 * These rules carry the extra specificity of html.dark-mode, so they win, and
 * they rebuild the whole thing in Hosteaze indigo rather than Elastic's grey.
 * ------------------------------------------------------------------------ */
html.dark-mode {
    --hz-bg: #171a3f;        /* the page behind everything */
    --hz-panel: #1e2150;     /* sidebars, lists, headers */
    --hz-raised: #262a63;    /* hover */
    --hz-selected: #2f3477;  /* the row or folder you are on */
    --hz-line: #32376f;      /* dividers */
    --hz-text: #e8e9f5;
    --hz-muted: #a9adcf;
}

html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-content,
html.dark-mode .iframe-wrapper,
html.dark-mode #messagecontframe {
    background-color: var(--hz-bg) !important;
    color: var(--hz-text) !important;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons,
html.dark-mode #layout-menu .special-buttons a:not(:focus),
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #folderlist,
html.dark-mode .folderlist,
html.dark-mode #layout-sidebar .scroller,
html.dark-mode .compose-wrap {
    background: var(--hz-panel) !important;
    background-color: var(--hz-panel) !important;
}

html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header,
html.dark-mode #layout-sidebar .header,
html.dark-mode .searchbar {
    background-color: var(--hz-panel) !important;
    color: var(--hz-text) !important;
    border-bottom: 1px solid var(--hz-line) !important;
}

html.dark-mode #layout-menu {
    border-right: 1px solid var(--hz-line) !important;
}

html.dark-mode #taskmenu a,
html.dark-mode #layout-menu .special-buttons a,
html.dark-mode ul.treelist li > a,
html.dark-mode .listing li a {
    color: var(--hz-text) !important;
    border-bottom-color: var(--hz-line) !important;
}

html.dark-mode #taskmenu a:hover,
html.dark-mode #layout-menu .special-buttons a:hover,
html.dark-mode ul.treelist li > a:hover {
    background: var(--hz-raised) !important;
    color: #ffffff !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover,
html.dark-mode ul.treelist li.selected > a,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected,
html.dark-mode .messagelist tbody > tr.selected td,
html.dark-mode .listing tr.selected td {
    background-color: var(--hz-selected) !important;
    color: #ffffff !important;
}

/* Search box: a lighter well so it still reads as a field. */
html.dark-mode .searchbar form {
    background: #2a2e6b;
}

html.dark-mode .searchbar input,
html.dark-mode .searchbar form:before {
    color: var(--hz-text) !important;
}

/* Message list. */
html.dark-mode .messagelist tbody > tr {
    border-bottom: 1px solid var(--hz-line);
}

html.dark-mode .messagelist tbody > tr td,
html.dark-mode .messagelist tbody > tr td.subject span.subject {
    background-color: var(--hz-panel);
    color: var(--hz-text);
}

html.dark-mode .messagelist tbody > tr td.subject span.fromto,
html.dark-mode .messagelist tbody > tr td.subject span.date,
html.dark-mode ul.treelist li .unreadcount {
    color: var(--hz-muted) !important;
}

html.dark-mode .messagelist tbody > tr.unread td.subject span.subject,
html.dark-mode .messagelist tbody > tr.unread td.subject span.fromto {
    color: #ffffff !important;
}

html.dark-mode .messagelist tbody > tr:hover td {
    background-color: var(--hz-raised);
}

/* Compose keeps its shape, in the dark palette. */
html.dark-mode .compose-wrap a.compose {
    background: var(--hz-selected) !important;
    color: #ffffff !important;
    border-color: #3d4390 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html.dark-mode .compose-wrap a.compose:hover {
    background: #383da0 !important;
}

/* The open message. */
html.dark-mode #message-header,
html.dark-mode #messageheader,
html.dark-mode .message-part,
html.dark-mode #message-content {
    background-color: var(--hz-bg) !important;
    color: var(--hz-text) !important;
    border-color: var(--hz-line) !important;
}

html.dark-mode a,
html.dark-mode #message-header a {
    color: #ff5ba6;
}

/* Pink is bright on dark, so the unread dot is softened a little. */
html.dark-mode .messagelist td.subject span.msgicon.status:before {
    color: #ff5ba6 !important;
}

/* Login page, in the dark palette. */
html.dark-mode body.task-login #layout-content {
    background: var(--hz-bg) !important;
}

html.dark-mode body.task-login #login-form {
    background: var(--hz-panel) !important;
    border-color: var(--hz-line) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* --- Dark mode: contrast and polish ------------------------------------- */

/* The wordmark is half indigo, which vanishes against a dark panel. */
html.dark-mode #logo {
    content: url("../images/hosteaze-logo-white.png");
}

/* Titles and subjects were inheriting near-black text. */
html.dark-mode #message-header .subject,
html.dark-mode #messageheader .subject,
html.dark-mode .header-title,
html.dark-mode #layout > div > .header,
html.dark-mode .boxtitle,
html.dark-mode .messagelist td.subject a,
html.dark-mode .messagelist td.subject span.subject a {
    color: var(--hz-text) !important;
}

html.dark-mode .messagelist tbody > tr.selected td.subject a,
html.dark-mode .messagelist tbody > tr.selected td.subject span.subject,
html.dark-mode .messagelist tbody > tr.selected td.subject span.fromto {
    color: #ffffff !important;
}

/* The row you are reading: a pink edge rather than a block of purple. */
html.dark-mode .messagelist tbody > tr.selected td:first-child,
.messagelist tbody > tr.selected td:first-child {
    box-shadow: inset 3px 0 0 #fe1e88;
}

/* Fields and toolbars need an edge in the dark, or they float. */
html.dark-mode .searchbar form {
    border: 1px solid #383d86;
}

html.dark-mode .toolbar a,
html.dark-mode .toolbar a .inner,
html.dark-mode #messagelist-header .toolbar a {
    color: var(--hz-text) !important;
}

html.dark-mode .toolbar a.disabled,
html.dark-mode .toolbar a.disabled .inner {
    color: #6f74ad !important;
}

/* Popups, menus and dialogs: Elastic leaves these near-white. */
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .popover .popover-header,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog .ui-dialog-content,
html.dark-mode .ui-dialog .ui-dialog-titlebar {
    background-color: var(--hz-panel) !important;
    color: var(--hz-text) !important;
    border-color: var(--hz-line) !important;
}

/* The floating message toolbar that appears on hover. */
html.dark-mode .messagelist tbody > tr .msgmenu,
html.dark-mode .messagelist .ctrl-buttons {
    background: #2a2e6b !important;
    border: 1px solid #383d86 !important;
    border-radius: 8px;
}

/* Message body and quoted text. */
html.dark-mode .message-part,
html.dark-mode .message-part div.pre {
    color: var(--hz-text) !important;
}

html.dark-mode .message-part blockquote {
    color: var(--hz-muted) !important;
    border-color: #383d86 !important;
}

/* Scrollbars, so they do not glow white against the indigo. */
html.dark-mode * {
    scrollbar-color: #3a3f86 var(--hz-panel);
}