/*
 * Sylon Elastic 0.1.0 - local overrides for Roundcube Elastic.
 * License: CC BY-SA 3.0. See README.md and ELASTIC-README.md.
 * No external resources; no changes to IMAP flags or application logic.
 */

#messagelist {
    --sylon-unread-background: #e5f0fc;
    --sylon-unread-accent: #175c9e;
    --sylon-unread-text: #17344f;
}

html.dark-mode #messagelist {
    --sylon-unread-background: #203c50;
    --sylon-unread-accent: #8bc9ff;
    --sylon-unread-text: #f1f7ff;
}

/* Read messages keep the original Elastic background and text colours. */
#messagelist tr:not(.unread) td.subject span.subject,
#messagelist tr:not(.unread) td.subject span.fromto {
    font-weight: 400;
}

/* Unread: bold subject AND sender, even while the row is selected. */
#messagelist tr.unread:not(.deleted) td.subject span.subject,
#messagelist tr.unread:not(.deleted) td.subject span.fromto {
    font-weight: 700;
}

/* Do not cover the native selection, deletion or drag-and-drop state. */
#messagelist tr.unread:not(.selected):not(.deleted):not(.droptarget) > td {
    background-color: var(--sylon-unread-background);
}

/* Inset marker: does not change widths or Elastic's keyboard-focus border. */
#messagelist tr.unread:not(.selected):not(.deleted):not(.droptarget) > td.subject {
    box-shadow: inset 4px 0 0 var(--sylon-unread-accent);
}

/* Keep flagged/deleted messages and selected rows in their native colours. */
#messagelist tr.unread:not(.selected):not(.flagged):not(.deleted) td.subject span.subject a,
#messagelist tr.unread:not(.selected):not(.flagged):not(.deleted) td.subject span.fromto {
    color: var(--sylon-unread-text);
}

/* OS high-contrast mode controls its own palette; bold text still applies. */
@media (forced-colors: active) {
    #messagelist tr.unread:not(.selected):not(.deleted):not(.droptarget) > td {
        background-color: Canvas;
    }

    #messagelist tr.unread:not(.selected):not(.flagged):not(.deleted) td.subject span.subject a,
    #messagelist tr.unread:not(.selected):not(.flagged):not(.deleted) td.subject span.fromto {
        color: CanvasText;
    }
}

/* SYLON_HEADER_DELETE_021_BEGIN
 * Keep the normal desktop toolbar. In Elastic's compact layouts, place a
 * native Delete button immediately before the three-dot toolbar switch.
 * The parent skin supplies the icon, colours and active/disabled behaviour.
 */
#layout-content > .header > #sylon-header-delete {
    display: none;
}

@media screen and (max-width: 768px) {
    #layout-content > .header > #sylon-header-delete {
        display: block;
        order: 98; /* Elastic's three-dot menu has order: 99. */
        flex: 0 0 44px;
        min-width: 44px;
        min-height: 44px;
        text-align: center;
        position: relative;
    }

    #layout-content > .header > #sylon-header-delete::before {
        float: none;
        display: block;
        width: 100%;
        margin: 0;
    }

    #layout-content > .header > #sylon-header-delete:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -4px;
        border-radius: 4px;
    }
}
/* SYLON_HEADER_DELETE_021_END */