/*
 * Africanode - a light, quiet webmail theme.
 *
 * Deployed to /usr/share/roundcube/skins/africanode/styles/styles.css.
 * meta.json declares `extends: elastic`, so every template, image and script
 * still comes from Elastic and Roundcube upgrades keep working. This file
 * replaces only Elastic's stylesheet, so it imports it first and then
 * repaints. Do not restyle by copying Elastic - the import is what keeps this
 * maintainable.
 *
 * Everything is driven by the custom properties below. To rebrand (a
 * per-customer accent, say), change --accent and nothing else.
 */

@import url("../../elastic/styles/styles.css");

:root {
    --bg: #f6f8fb;            /* app background, soft off-white            */
    --surface: #ffffff;       /* panels, lists, headers                    */
    --surface-2: #eef2f8;     /* hover                                     */
    --surface-3: #e3eaf5;     /* active rows                               */
    --border: rgba(15, 23, 42, 0.09);
    --border-strong: rgba(15, 23, 42, 0.16);

    --text: #1b2431;
    --text-muted: #5b6982;
    --text-faint: #93a0b5;

    --accent: #2563eb;        /* single accent - calm blue                 */
    --accent-dim: rgba(37, 99, 235, 0.10);
    --accent-glow: rgba(37, 99, 235, 0.20);
    --danger: #dc2626;

    --radius: 10px;
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */

html,
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

#layout,
#layout > div,
.content,
.frame-content,
#main {
    background: var(--bg);
    color: var(--text);
}

a {
    color: var(--accent);
}

/* ---------- task rail (far-left icon bar) ---------- */

#layout-menu,
#taskmenu {
    background: #ffffff;
    border-right: 1px solid var(--border);
}

#taskmenu a {
    color: var(--text-faint);
    border-radius: var(--radius);
    margin: 2px 6px;
    transition: color .15s ease, background .15s ease;
}

#taskmenu a:hover {
    color: var(--text);
    background: var(--surface-2);
}

#taskmenu a.selected {
    color: var(--accent);
    background: var(--accent-dim);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* ---------- columns ---------- */

#layout-sidebar,
#layout-list,
#layout-content {
    background: var(--bg);
    border-color: var(--border) !important;
}

#layout-sidebar,
#layout-list {
    border-right: 1px solid var(--border);
}

/* ---------- headers / toolbars ---------- */

.header,
#layout > div > .header,
.footer,
.toolbar {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.header .header-title,
.header a.button,
.toolbar a.button {
    color: var(--text);
}

.header a.button:hover,
.toolbar a.button:hover {
    color: var(--accent);
    background: var(--surface-2);
    border-radius: var(--radius);
}

/* ---------- lists (folders, messages, contacts) ---------- */

.listing,
.messagelist,
table.listing tbody,
#messagelist {
    background: transparent;
    color: var(--text);
}

.listing li,
.listing tr,
table.messagelist tbody tr {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.listing li:hover,
table.messagelist tbody tr:hover {
    background: var(--surface-2);
}

.listing li.selected,
.listing tr.selected,
table.messagelist tbody tr.selected {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* unread mail is the one thing that should shout */
table.messagelist tbody tr.unread,
.listing li.unread {
    color: #0b1220;
    font-weight: 600;
}

table.messagelist tbody tr.unread td.subject {
    color: #0b1220;
}

.listing li a,
.listing td,
table.messagelist td {
    color: inherit;
    border-color: var(--border);
}

.listing .subject,
.listing .fromto {
    color: var(--text);
}

.listing .date,
.listing .size,
.msgmenu .date {
    color: var(--text-muted);
}

/* folder counters */
.listing li .unreadcount {
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 999px;
}

/* ---------- message view ---------- */

#messageheader,
.message-part,
.message-htmlpart,
#messagebody {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#messageheader .subject {
    color: var(--text);
    font-weight: 600;
}

#messageheader .adr,
#messageheader .rcmContactAddress {
    color: var(--text-muted);
}

/* HTML mail is authored for light backgrounds, which now matches ours. */
.message-htmlpart div,
#messagebody .message-part div {
    background: #ffffff;
    color: #16181d;
    border-radius: var(--radius);
}

/* ---------- forms ---------- */

input,
select,
textarea,
.form-control,
.input-group-text {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

/* ---------- buttons ---------- */

.btn-primary,
button.btn-primary,
.btn.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    font-weight: 600;
    border-radius: var(--radius);
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: #1d4fd8;
    border-color: #1d4fd8;
    box-shadow: 0 0 18px var(--accent-glow);
}

.btn-secondary,
.btn.btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius);
}

.btn-secondary:hover {
    background: var(--surface-3);
    color: var(--accent);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

/* ---------- dialogs, popovers, menus ---------- */

.ui-dialog,
.ui-dialog-content,
.popover,
.popupmenu,
.ui-widget-content,
#rcmKSearchpane {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14) !important;
}

.popupmenu li a:hover,
.ui-menu-item:hover {
    background: var(--surface-3);
    color: var(--accent);
}

/* ---------- login ---------- */

#login-form,
.login-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

#login-form .box-inner {
    background: transparent;
}

#login-form #logo {
    opacity: 0.9;
}

/* ---------- scrollbars ---------- */

* {
    scrollbar-color: var(--surface-3) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #c2ccdb;
    background-clip: content-box;
}

/* ---------- misc ---------- */

.watermark,
#messagelist-title,
.boxtitle {
    color: var(--text-muted);
    background: transparent;
}

hr,
.separator {
    border-color: var(--border);
}

/* ---------- content pane ----------
 * Elastic paints the reading pane white. Left alone it is a huge white slab
 * next to the dark UI, which is the single most obvious flaw. */

#layout-content,
#layout-content > .content,
.content,
.content > iframe,
#messagecontframe,
#messagepartframe,
.iframe-loader,
.watermark {
    background: var(--bg) !important;
}

/* ---------- folder list ----------
 * The selected folder keeps Elastic's light highlight otherwise, giving a
 * bright white bar in the sidebar. */

#mailboxlist li,
#folderlist li,
.listing.folderlist li {
    background: transparent !important;
    color: var(--text) !important;
}

#mailboxlist li > a,
#folderlist li > a,
.listing.folderlist li > a {
    color: var(--text) !important;
}

#mailboxlist li:hover,
.listing.folderlist li:hover {
    background: var(--surface-2) !important;
}

#mailboxlist li.selected,
#mailboxlist li.selected > a,
#folderlist li.selected,
.listing.folderlist li.selected,
.listing.folderlist li.selected > a {
    background: var(--surface-3) !important;
    color: var(--accent) !important;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- readability ----------
 * Already-read messages inherit a low-contrast grey from Elastic that is hard
 * to read on a dark background. Unread stays brighter + bolder so the
 * distinction survives. */

table.messagelist tbody tr td,
table.messagelist tbody tr td span,
table.messagelist tbody tr td a,
.listing li span,
.listing li div {
    color: var(--text);
}

table.messagelist tbody tr td.subject,
table.messagelist tbody tr td.fromto {
    color: var(--text);
}

table.messagelist tbody tr.unread td.subject,
table.messagelist tbody tr.unread td.fromto {
    color: #ffffff;
}

table.messagelist tbody tr td.date,
table.messagelist tbody tr td.size {
    color: var(--text-muted);
}

/* ---------- toolbar contrast ---------- */

.toolbar a.button,
.header a.button,
.toolbar a.button span,
.header a.button span {
    color: var(--text) !important;
}

.toolbar a.button.disabled,
.header a.button.disabled,
.toolbar a.button.disabled span {
    color: var(--text-faint) !important;
}

/* ---------- footer / pagination ---------- */

.footer,
.footer.pagenav,
#messagelistfooter,
.pagenav {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.pagenav .pagenav-text,
#messagelistfooter .pagenav-text {
    color: var(--text-muted) !important;
}

.pagenav a.button {
    color: var(--text) !important;
}

/* ---------- unbranded ----------
 * Neutral product: no Roundcube wordmark or watermark logo. */

#login-form .box-inner .product-name,
.footer .product-name,
#layout-menu .popover-header .product-name {
    display: none !important;
}

.watermark img,
#messagecontframe + .watermark img {
    opacity: 0.05;
    filter: grayscale(1);
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- task rail, final pass ----------
 * Elastic paints #layout-menu dark navy with higher specificity than a plain
 * selector, leaving dark blocks above Compose and below Logout. */

#layout-menu,
#layout-menu .menu,
#layout-menu > .header,
#layout-menu .popover-header,
#taskmenu,
#taskmenu.popupmenu {
    background: #ffffff !important;
    border-right: 1px solid var(--border) !important;
}

#layout-menu > .header .header-title,
#layout-menu .popover-header * {
    color: var(--text) !important;
}

/* logo tile at the top of the rail */
#layout-menu #logo,
#layout-menu .header #logo {
    background: transparent !important;
}

/* Elastic gives the About/Logout group its own hardcoded dark background
 * (rgb(47,58,63)), which shows as a dark slab at the bottom of a light rail.
 * It must stay OPAQUE: the group is absolutely positioned over the Contacts
 * and Settings buttons, so making it transparent lets both labels render on
 * top of each other. Recolour it, never un-fill it. */
#taskmenu .special-buttons {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
}

#taskmenu .special-buttons a {
    color: var(--text-muted) !important;
}

#taskmenu .special-buttons a:hover {
    color: var(--accent) !important;
    background: var(--surface-2) !important;
}

#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.logout:hover {
    color: var(--danger) !important;
}