/* ECOM brand layer for Roundcube Elastic. Colours come from brands/<brand>/brand.css */

/* ---------- Login screen ---------- */
body.task-login #layout-content {
    background:
        radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--eb-accent) 22%, transparent), transparent 60%),
        linear-gradient(160deg, var(--eb-primary) 0%, var(--eb-primary-deep) 100%);
    min-height: 100vh;
}
body.task-login #layout-content > * { position: relative; }
body.task-login #layout-content #logo,
body.task-login #layout-content #login-form { top: 14vh !important; }
body.task-login #layout-content #logo {
    display: block;
    width: min(380px, 92vw);
    max-width: none;
    max-height: none;
    height: auto;
    margin: 0 auto !important;
    padding: 1.4rem 3.2rem 1.1rem;
    background: var(--eb-cream);
    border-radius: 16px 16px 0 0;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .30);
}
body.task-login #login-form {
    background: #fff;
    border-radius: 0 0 16px 16px;
    padding: 1.75rem 2.25rem 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    border-top: 3px solid var(--eb-accent);
    width: min(380px, 92vw);
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto !important;
}
body.task-login #login-form .formbuttons button,
body.task-login #login-form #rcmloginsubmit {
    background: var(--eb-primary);
    border-color: var(--eb-primary);
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .65rem 1rem;
}
body.task-login #login-form #rcmloginsubmit:hover { background: var(--eb-accent-ink); border-color: var(--eb-accent-ink); }
body.task-login #login-form input.form-control {
    border-radius: 10px;
    padding-top: .55rem; padding-bottom: .55rem;
}
body.task-login #login-form input.form-control:focus {
    border-color: var(--eb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-accent) 30%, transparent);
}
body.task-login #login-footer,
body.task-login #login-footer a { color: #7a8078 !important; font-size: .8rem; }
body.task-login #login-footer a:hover { color: var(--eb-accent-ink) !important; }
html.dark-mode body.task-login #login-footer,
html.dark-mode body.task-login #login-footer a { color: #9aa29c !important; }

/* ---------- Main left menu (task bar) ---------- */
#layout-menu {
    background: linear-gradient(180deg, var(--eb-primary) 0%, var(--eb-primary-deep) 100%) !important;
}
#layout-menu .menu a,
#layout-menu .popover-header,
#layout-menu .special-buttons a { color: color-mix(in srgb, var(--eb-cream) 82%, transparent) !important; }
#layout-menu .menu a:hover,
#layout-menu .special-buttons a:hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
#layout-menu .menu a.selected {
    color: #fff !important;
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: inset 4px 0 0 var(--eb-accent);
}
#layout-menu #logo { padding: .6rem .5rem; }

/* ---------- Primary actions / accents ---------- */
.btn-primary, .button.mainaction, button.mainaction, a.button.mainaction, input.button.mainaction {
    background-color: var(--eb-primary) !important;
    border-color: var(--eb-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover {
    background-color: var(--eb-accent-ink) !important;
    border-color: var(--eb-accent-ink) !important;
}
.header .toolbar a.compose, #layout-sidebar .header a.compose,
a.compose.button, .toolbar a.button.compose { color: var(--eb-primary); }
.badge-primary, .unreadcount, .listing li .unreadcount { background-color: var(--eb-accent) !important; color: #fff !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--eb-primary); border-color: var(--eb-primary); }
.form-control:focus, .custom-select:focus { border-color: var(--eb-accent); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--eb-accent) 28%, transparent); }

/* ---------- Lists: selection, unread ---------- */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) table.records-table tr.selected td,
html:not(.dark-mode) .listing li.selected > a {
    background-color: var(--eb-select) !important;
    color: var(--eb-primary-deep) !important;
}
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) table.records-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--eb-accent); }
html:not(.dark-mode) table.messagelist tr.unread td.subject span.subject a,
html:not(.dark-mode) table.messagelist tr.unread .fromto { color: var(--eb-primary-deep); }
html:not(.dark-mode) table.messagelist tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--eb-primary); }
html:not(.dark-mode) #layout-sidebar, html:not(.dark-mode) #layout-list .header, html:not(.dark-mode) #layout-sidebar .header {
    background-color: color-mix(in srgb, var(--eb-tint) 55%, #fff);
}
html:not(.dark-mode) a, html:not(.dark-mode) .link { color: var(--eb-accent-ink); }
html:not(.dark-mode) #layout-sidebar .listing li a, html:not(.dark-mode) #layout-menu a,
html:not(.dark-mode) .listing li a, html:not(.dark-mode) table.messagelist a { color: inherit; }

/* softer, more modern surfaces */
.listing li, table.messagelist td { transition: background-color .12s ease; }
.popover, .ui-dialog, .modal-content { border-radius: 12px; }
.button, .btn, .form-control, .custom-select { border-radius: 8px; }

/* ---------- Dark mode ---------- */
html.dark-mode #layout-menu { background: linear-gradient(180deg, var(--eb-primary-deep) 0%, #0d0f10 100%) !important; }
html.dark-mode .listing li.selected, html.dark-mode table.records-table tr.selected td {
    box-shadow: inset 3px 0 0 var(--eb-accent);
}
html.dark-mode body.task-login #login-form { background: #21292c; }
html.dark-mode body.task-login #layout-content #logo { background: #21292c; border-bottom: 1px solid rgba(255, 255, 255, .06); }
html.dark-mode body.task-login #layout-content {
    background:
        radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--eb-accent) 14%, transparent), transparent 60%),
        linear-gradient(160deg, var(--eb-primary-deep) 0%, #08090a 100%);
}