/*
 * Sylon Elastic 0.4.0 - presentation only, no JavaScript or external resources.
 * Local additions: CC BY-SA 3.0. Elastic: Roundcube Dev Team.
 * Sylon logo/brand rights remain with Sylon. This is not a logo license.
 * Screen-only: do not recolour printed messages or the message body.
 */
@media screen {
    :root {
        --sylon-brand: #28515c;        /* exact colour from the supplied SVG */
        --sylon-surface: #eceeeb;      /* flat background sampled from screenshot */
        --sylon-panel: #ffffff;
        --sylon-ui-text: #28515c;
        --sylon-muted: #53666a;
        --sylon-border: #cbd5d5;
        --sylon-accent: #087e96;       /* adapted accent, not an official brand value */
        --sylon-focus: #087e96;
        --sylon-hover: #edf5f5;
        --sylon-selected: #d9e9eb;
        --sylon-selected-text: #1d414b;
        --sylon-button: #28515c;
        --sylon-button-hover: #1e414b;
        --sylon-button-text: #ffffff;
        --sylon-unread-bg: #eaf3f4;
        --sylon-unread-ink: #234953;
        --sylon-nav: #28515c;
        --sylon-nav-hover: #376773;
        --sylon-nav-selected: #1b3c45;
        --sylon-nav-accent: #a2dbe1;
    }
    html.dark-mode {
        --sylon-surface: #202e33;
        --sylon-panel: #1b262b;
        --sylon-ui-text: #e7f1f2;
        --sylon-muted: #b4c6ca;
        --sylon-border: #40555d;
        --sylon-accent: #8acdd5;
        --sylon-focus: #8acdd5;
        --sylon-hover: #29434b;
        --sylon-selected: #355861;
        --sylon-selected-text: #ffffff;
        --sylon-button: #a2dbe1;
        --sylon-button-hover: #bee8ec;
        --sylon-button-text: #173840;
        --sylon-unread-bg: #213e47;
        --sylon-unread-ink: #ecf7f8;
        --sylon-nav: #163740;
        --sylon-nav-hover: #28515c;
        --sylon-nav-selected: #315e68;
    }

    /* Task navigation: dimensions/commands remain those of Elastic. */
    html #layout-menu,
    html.dark-mode #layout-menu,
    html #layout-menu .popover-header,
    html #layout-menu .special-buttons,
    html.dark-mode #layout-menu .popover-header,
    html.dark-mode #layout-menu .special-buttons {
        background-color: var(--sylon-nav) !important;
        color: #ffffff;
    }
    html #layout-menu #taskmenu a:not(.logout),
    html.dark-mode #layout-menu #taskmenu a:not(.logout) {
        color: #ffffff;
        background-color: transparent;
    }
    html #layout-menu #taskmenu a.selected:not(.logout),
    html.dark-mode #layout-menu #taskmenu a.selected:not(.logout) {
        color: #ffffff;
        background-color: var(--sylon-nav-selected);
        box-shadow: inset 3px 0 0 var(--sylon-nav-accent);
    }
    html #layout-menu #taskmenu a:not(.disabled):not(.logout):hover,
    html #layout-menu #taskmenu a:not(.disabled):not(.logout):focus-visible,
    html.dark-mode #layout-menu #taskmenu a:not(.disabled):not(.logout):hover,
    html.dark-mode #layout-menu #taskmenu a:not(.disabled):not(.logout):focus-visible {
        color: #ffffff;
        background-color: var(--sylon-nav-hover);
    }
    html #layout-menu #taskmenu .action-buttons a:not(.disabled),
    html.dark-mode #layout-menu #taskmenu .action-buttons a:not(.disabled) {
        color: var(--sylon-nav-accent);
    }
    html #layout-menu .popover-header .button { color: #ffffff; }
    html #layout-menu #taskmenu a:focus-visible,
    html #layout-menu .popover-header .button:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: -4px;
    }

    /* Header bars only. Do not style message-content descendants. */
    html #layout > #layout-sidebar > .header,
    html #layout > #layout-list > .header,
    html #layout > #layout-content > .header,
    html #layout > #layout-sidebar > .footer,
    html #layout > #layout-list > .footer {
        background-color: var(--sylon-surface);
        color: var(--sylon-ui-text);
        border-color: var(--sylon-border);
    }
    html #layout > div > .header a.button:not(.disabled):not(.delete),
    html.dark-mode #layout > div > .header a.button:not(.disabled):not(.delete) {
        color: var(--sylon-ui-text);
    }

    /* Folder selection: target the row link, not nested child lists. */
    html #mailboxlist li:not(.disabled):not(.droptarget) > a {
        color: var(--sylon-ui-text);
    }
    html #mailboxlist li.selected:not(.droptarget) > a {
        background-color: var(--sylon-selected);
        color: var(--sylon-selected-text);
    }
    html #mailboxlist li:not(.selected):not(.droptarget) > a:hover {
        background-color: var(--sylon-hover);
    }
    html #mailboxlist li > a .unreadcount {
        background-color: var(--sylon-brand);
        color: #ffffff;
    }
    html.dark-mode #mailboxlist li > a .unreadcount {
        background-color: #a2dbe1;
        color: #173840;
    }
    html #mailboxlist li.selected > .sylon-folder-actions {
        color: var(--sylon-selected-text);
        background-color: var(--sylon-selected);
    }
    html #mailboxlist .sylon-folder-button:not([aria-disabled="true"]):hover {
        background-color: var(--sylon-hover);
        color: var(--sylon-ui-text);
    }
    html #mailboxlist li > a:focus-visible,
    html #mailboxlist .sylon-folder-button:focus-visible {
        outline: 2px solid var(--sylon-focus);
        outline-offset: -3px;
    }

    /* Reuse the 0.1.0 unread rules; never change IMAP flags or message fonts. */
    html #messagelist,
    html.dark-mode #messagelist {
        --sylon-unread-background: var(--sylon-unread-bg);
        --sylon-unread-accent: var(--sylon-accent);
        --sylon-unread-text: var(--sylon-unread-ink);
    }
    html #messagelist tr.selected:not(.deleted):not(.droptarget) > td,
    html.dark-mode #messagelist tr.selected:not(.deleted):not(.droptarget) > td {
        background-color: var(--sylon-selected);
        color: var(--sylon-selected-text);
    }
    html #messagelist tr.selected:not(.flagged):not(.deleted):not(.droptarget) td.subject span.subject a,
    html #messagelist tr.selected:not(.flagged):not(.deleted):not(.droptarget) td.subject span.fromto,
    html.dark-mode #messagelist tr.selected:not(.flagged):not(.deleted):not(.droptarget) td.subject span.subject a,
    html.dark-mode #messagelist tr.selected:not(.flagged):not(.deleted):not(.droptarget) td.subject span.fromto {
        color: var(--sylon-selected-text);
    }

    /* Only primary controls, never warning/error/danger styles. */
    html .btn-primary,
    html.dark-mode .btn-primary {
        background-color: var(--sylon-button);
        border-color: var(--sylon-button);
        color: var(--sylon-button-text);
    }
    html .btn-primary:not(:disabled):not(.disabled):hover,
    html .btn-primary:not(:disabled):not(.disabled):active,
    html.dark-mode .btn-primary:not(:disabled):not(.disabled):hover {
        background-color: var(--sylon-button-hover);
        border-color: var(--sylon-button-hover);
        color: var(--sylon-button-text);
    }
    html .btn-primary:focus-visible {
        outline: 2px solid var(--sylon-focus);
        outline-offset: 3px;
        box-shadow: none;
    }
    html #login-form .form-control:focus,
    html #layout-sidebar .searchbar input:focus-visible,
    html #layout-list .searchbar input:focus-visible {
        border-color: var(--sylon-focus);
        outline: 2px solid var(--sylon-focus);
        outline-offset: 1px;
        box-shadow: none;
    }

    /* Original logo file is never modified. Desktop rail shows its symbol
       by clipping the existing vector canvas; phone menu shows the wordmark. */
    html #layout-menu #logo[src*="sylon-logo.svg"] {
        display: inline-block;
        width: 34px;
        height: 48px;
        max-width: none;
        max-height: none;
        padding: 0;
        margin: 4px 0;
        object-fit: cover;
        object-position: left center;
        filter: brightness(0) invert(1);
        opacity: 1;
    }
    html.layout-phone #layout-menu #logo[src*="sylon-logo.svg"] {
        width: 148px;
        height: auto;
        max-height: 48px;
        max-width: calc(100% - 48px);
        object-fit: contain;
        margin: 0;
    }
    @media (max-width: 480px) {
        html #layout-menu #logo[src*="sylon-logo.svg"] {
            width: 148px;
            height: auto;
            max-height: 48px;
            max-width: calc(100% - 48px);
            object-fit: contain;
            margin: 0;
        }
    }

    /* Login: no template duplication, use Roundcube's skin_logo mapping. */
    html body.task-login,
    html body.task-login #layout,
    html body.task-login #layout-content {
        background-color: var(--sylon-surface);
        color: var(--sylon-ui-text);
    }
    html body.task-login #layout-content { overflow-y: auto; }
    html body.task-login #logo[src*="sylon-logo.svg"] {
        top: 0;
        display: block;
        width: 252px;
        height: auto;
        max-width: calc(100% - 40px);
        max-height: none;
        margin: 5vh auto 1.5rem;
        padding: 0;
        object-fit: contain;
        filter: none;
        opacity: 1;
    }
    html.dark-mode body.task-login #logo[src*="sylon-logo.svg"] {
        filter: brightness(0) invert(1);
    }
    html body.task-login #login-form {
        top: 0;
        box-sizing: border-box;
        width: min(420px, calc(100% - 32px));
        max-width: none;
        margin: 0 auto 2rem;
        padding: 1.6rem;
        background-color: var(--sylon-panel);
        border: 1px solid var(--sylon-border);
        border-top: 3px solid var(--sylon-brand);
        border-radius: 4px;
    }
    html.dark-mode body.task-login #login-form { border-top-color: #8acdd5; }
    html body.task-login #login-footer { color: var(--sylon-muted); }
    html body.task-login #login-footer a { color: var(--sylon-accent); }
    html body.task-login #login-footer a:hover { text-decoration: underline; }
}

/* Respect OS forced colours, keep a visible logo and keyboard focus. */
@media screen and (forced-colors: active) {
    html #layout-menu,
    html #layout-menu .popover-header,
    html #layout-menu .special-buttons {
        background: Canvas !important;
        color: CanvasText !important;
    }
    html #layout-menu #taskmenu a:not(.logout), html.dark-mode #layout-menu #taskmenu a:not(.logout),
    html #layout-menu #taskmenu .action-buttons a:not(.disabled),
    html.dark-mode #layout-menu #taskmenu .action-buttons a:not(.disabled) {
        color: LinkText;
        background: Canvas;
    }
    html #layout-menu #taskmenu a.selected:not(.logout), html.dark-mode #layout-menu #taskmenu a.selected:not(.logout) {
        background: Highlight;
        color: HighlightText;
        box-shadow: none;
    }
    html #layout-menu #logo[src*="sylon-logo.svg"],
    html body.task-login #logo[src*="sylon-logo.svg"],
    html.dark-mode body.task-login #logo[src*="sylon-logo.svg"] {
        forced-color-adjust: none;
        filter: none;
        background-color: #ffffff;
    }
    html .btn-primary:focus-visible,
    html #layout-menu #taskmenu a:focus-visible,
    html #mailboxlist li > a:focus-visible,
    html #mailboxlist .sylon-folder-button:focus-visible { outline-color: Highlight; }
}