/*
 * AISMISR Persistent Roundcube UI — V4
 * Persistent branding + strong Read / Unread / Selected distinction.
 */

/* ==========================================================
   AISMISR BRANDING
   ========================================================== */

/*
 * Desktop Roundcube left-side brand area
 */

#layout-menu .popover-header {
    position: relative !important;
    background-image: url("../images/aismisr-logo.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

/* Hide original Roundcube logo image while preserving its container */
#layout-menu .popover-header img {
    opacity: 0 !important;
}


/* DESKTOP */

@media screen and (min-width: 481px) {

    #layout-menu .popover-header {
        min-height: 74px !important;
        height: 74px !important;

        background-size: 66px auto !important;
        background-color: #21292c !important;
    }
}


/* LARGE DESKTOP */

@media screen and (min-width: 1025px) {

    #layout-menu .popover-header {
        background-size: 70px auto !important;
    }
}


/* MOBILE */

@media screen and (max-width: 480px) {

    #layout-menu .popover-header {
        background-size: 74px auto !important;
    }
}


/* ==========================================================
   DARK MODE
   ========================================================== */


/* ---------- READ / NORMAL ---------- */

html.dark-mode .messagelist
tr:not(.unread):not(.selected):not(.flagged):not(.deleted) td {
    background-color: #1d2427 !important;
}

html.dark-mode .messagelist
tr:not(.unread):not(.selected):not(.flagged):not(.deleted)
td.subject span.subject a {
    color: #b2bec1 !important;
    font-weight: 400 !important;
}

html.dark-mode .messagelist
tr:not(.unread):not(.selected):not(.flagged):not(.deleted)
td.subject span.fromto,
html.dark-mode .messagelist
tr:not(.unread):not(.selected):not(.flagged):not(.deleted)
td.subject span.date {
    color: #74878b !important;
    font-weight: 400 !important;
}


/* ---------- UNREAD / NEW ---------- */

html.dark-mode .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted) td {
    background-color: #214657 !important;
    border-bottom-color: #37697b !important;
}

html.dark-mode .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td.subject span.subject a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.dark-mode .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td.subject span.fromto {
    color: #70d1ff !important;
    font-weight: 600 !important;
}

html.dark-mode .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td.subject span.date {
    color: #8fdbff !important;
    font-weight: 600 !important;
}


/* Unread status dot */

html.dark-mode .messagelist
td.subject span.msgicon.status.unread:before {
    color: #27b8ff !important;
    font-size: .72rem !important;
    text-shadow: 0 0 4px rgba(39,184,255,.55);
}


/* Unread left accent */

html.dark-mode .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td:first-child {
    border-left: 4px solid #27b8ff !important;
}


/* ---------- SELECTED ---------- */

html.dark-mode .messagelist tr.selected td {
    background-color: #0f6f8f !important;
    color: #ffffff !important;
    border-bottom-color: #2ea7d0 !important;
}

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

html.dark-mode .messagelist tr.selected td:first-child {
    border-left: 4px solid #7ce0ff !important;
}


/* ---------- FLAGGED ---------- */

html.dark-mode .messagelist
tr.flagged:not(.selected):not(.deleted) td {
    background-color: #453b20 !important;
}

html.dark-mode .messagelist
tr.flagged:not(.selected):not(.deleted)
td.subject span.subject a,
html.dark-mode .messagelist
tr.flagged:not(.selected):not(.deleted)
td.subject span.fromto,
html.dark-mode .messagelist
tr.flagged:not(.selected):not(.deleted)
td.subject span.date,
html.dark-mode .messagelist
tr.flagged:not(.selected):not(.deleted)
span.flagged:before {
    color: #ffd86f !important;
}

html.dark-mode .messagelist
tr.flagged:not(.selected):not(.deleted)
td:first-child {
    border-left: 4px solid #e8b83d !important;
}


/* ---------- DELETED ---------- */

html.dark-mode .messagelist tr.deleted td {
    opacity: .52;
}


/* ---------- UNREAD COUNTER ---------- */

html.dark-mode .folderlist li.mailbox .unreadcount {
    background-color: #0c97d5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* ---------- JUNK ---------- */

html.dark-mode .folderlist li.junk > a {
    color: #ff8d88 !important;
}


/* ---------- HOVER ---------- */

html.dark-mode .messagelist
tr:not(.selected):hover td {
    background-color: #2d4852 !important;
}


/* ==========================================================
   LIGHT MODE
   ========================================================== */

html:not(.dark-mode) .messagelist
tr:not(.unread):not(.selected):not(.flagged):not(.deleted) td {
    background-color: #ffffff !important;
}

html:not(.dark-mode) .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted) td {
    background-color: #dff3ff !important;
}

html:not(.dark-mode) .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td.subject span.subject a {
    color: #063b56 !important;
    font-weight: 700 !important;
}

html:not(.dark-mode) .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td.subject span.fromto {
    color: #087fb7 !important;
    font-weight: 600 !important;
}

html:not(.dark-mode) .messagelist
tr.unread:not(.selected):not(.flagged):not(.deleted)
td:first-child {
    border-left: 4px solid #1596d2 !important;
}

html:not(.dark-mode) .messagelist tr.selected td {
    background-color: #9edfff !important;
    color: #053348 !important;
}

html:not(.dark-mode) .messagelist
tr.flagged:not(.selected):not(.deleted) td {
    background-color: #fff2bd !important;
}

/* ==========================================================
   AISMISR LOGO — DESKTOP FIX V1
   The Elastic desktop layout does not expose popover-header
   in the same way as mobile, so the logo is painted directly
   on the main task sidebar.
   ========================================================== */

@media screen and (min-width: 481px) {

    #layout-menu {
        background-image:
            url("../images/aismisr-logo.webp") !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center 8px !important;

        background-size:
            62px auto !important;
    }

    /* Keep the upper branding area visually clean */
    #taskmenu {
        padding-top: 70px !important;
    }
}


/* Larger desktop */
@media screen and (min-width: 1025px) {

    #layout-menu {
        background-position:
            center 7px !important;

        background-size:
            66px auto !important;
    }

    #taskmenu {
        padding-top: 72px !important;
    }
}


/* ==========================================================
   AISMISR LOGO TUNE V2
   Fix clipped / oversized logo in left sidebar
   ========================================================== */

@media screen and (min-width: 481px) {

    #layout-menu {
        position: relative !important;
        background-image: none !important;
        overflow: visible !important;
    }

    #layout-menu::before {
        content: "" !important;
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 72px !important;
        height: 42px !important;
        background: url("../images/aismisr-logo.webp") center center / contain no-repeat !important;
        pointer-events: none !important;
        z-index: 5 !important;
        opacity: 1 !important;
    }

    #taskmenu {
        padding-top: 52px !important;
    }
}

@media screen and (min-width: 1025px) {

    #layout-menu::before {
        top: 10px !important;
        width: 78px !important;
        height: 46px !important;
    }

    #taskmenu {
        padding-top: 58px !important;
    }
}


/* ==========================================================
   AISMISR LOGO — FINAL POSITION V3
   ========================================================== */

@media screen and (min-width: 481px) {

    #layout-menu {
        position: relative !important;
        background-image: none !important;
    }

    #layout-menu::before {
        content: "" !important;

        position: absolute !important;

        top: 11px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 54px !important;
        height: 40px !important;

        background-image:
            url("../images/aismisr-logo.webp") !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center center !important;

        background-size:
            contain !important;

        pointer-events: none !important;
        z-index: 10 !important;
    }

    #taskmenu {
        padding-top: 62px !important;
    }
}


/* Wide desktop */

@media screen and (min-width: 1025px) {

    #layout-menu::before {
        top: 10px !important;

        width: 58px !important;
        height: 42px !important;
    }

    #taskmenu {
        padding-top: 64px !important;
    }
}