/**
 * Sporting Club Vejle — Roundcube skin
 * Brand: #E8D520 (yellow), #0A0A0A (black), #1A1A1A (charcoal)
 * Inherits layout from Elastic, overrides all blue → SCV yellow
 */

/* ── Core accent: blue → SCV yellow ─────────────────────────────── */
:root {
    --scv-yellow:       #E8D520;
    --scv-yellow-hover: #D4C118;
    --scv-black:        #0A0A0A;
    --scv-charcoal:     #1A1A1A;
    --scv-dark:         #141414;
    --scv-white:        #F5F5F5;
    --scv-gray:         #888888;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.button.primary,
input[type=submit],
a.button.primary,
button.primary {
    background-color: var(--scv-yellow) !important;
    color: var(--scv-black) !important;
    border-color: var(--scv-yellow) !important;
    font-weight: 700;
}
.button.primary:hover,
input[type=submit]:hover,
a.button.primary:hover {
    background-color: var(--scv-yellow-hover) !important;
    border-color: var(--scv-yellow-hover) !important;
}

/* ── Links ───────────────────────────────────────────────────────── */
a, a:visited {
    color: var(--scv-yellow) !important;
}
a:hover {
    color: var(--scv-yellow-hover) !important;
}

/* ── Input focus ─────────────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--scv-yellow) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 213, 32, 0.25) !important;
    outline: none;
}

/* ── Checkboxes & toggles ────────────────────────────────────────── */
input[type=checkbox]:checked,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--scv-yellow) !important;
    border-color: var(--scv-yellow) !important;
}

/* ── Task menu (left sidebar) ────────────────────────────────────── */
#taskmenu {
    background-color: var(--scv-black) !important;
    border-right: 1px solid #222 !important;
}
#taskmenu a,
#taskmenu a span {
    color: var(--scv-white) !important;
}
#taskmenu a:hover,
#taskmenu a.selected {
    background-color: var(--scv-charcoal) !important;
    color: var(--scv-yellow) !important;
}
#taskmenu a.selected span,
#taskmenu a:hover span {
    color: var(--scv-yellow) !important;
}
#taskmenu .action-buttons a {
    color: var(--scv-yellow) !important;
}
#taskmenu .action-buttons a:hover {
    color: var(--scv-yellow-hover) !important;
    background-color: var(--scv-charcoal) !important;
}

/* ── Global dark background ──────────────────────────────────────── */
body,
html {
    background-color: var(--scv-black) !important;
    color: var(--scv-white) !important;
}
#layout,
#layout-sidebar,
#layout-list,
#layout-content,
.sidebar,
.listbox,
.contentbox {
    background-color: var(--scv-charcoal) !important;
    color: var(--scv-white) !important;
}

/* ── Toolbar / header bar ────────────────────────────────────────── */
#header,
.toolbar,
#layout-content .header,
#layout-list .header,
#layout-sidebar .header,
.listbox .header,
.searchbar {
    background-color: var(--scv-dark) !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: var(--scv-white) !important;
}
.toolbar a,
.toolbar button,
.toolbar span,
#header a,
#header span {
    color: var(--scv-white) !important;
}
.toolbar a:hover,
.toolbar button:hover {
    color: var(--scv-yellow) !important;
    background-color: #222 !important;
}

/* ── Folder list / sidebar ───────────────────────────────────────── */
#mailboxlist,
#folderlist,
.treelist {
    background-color: var(--scv-charcoal) !important;
}
#mailboxlist li a,
.treelist li a {
    color: var(--scv-white) !important;
}
#mailboxlist li a:hover,
.treelist li a:hover {
    background-color: #222 !important;
    color: var(--scv-yellow) !important;
}

/* ── Message list ────────────────────────────────────────────────── */
.listing,
table.listing,
.messagelist {
    background-color: var(--scv-charcoal) !important;
    color: var(--scv-white) !important;
}
.listing tr,
table.listing tr,
.messagelist tr {
    background-color: var(--scv-charcoal) !important;
    border-bottom: 1px solid #222 !important;
    color: var(--scv-white) !important;
}
.listing tr:hover td,
table.listing tr:hover td,
.messagelist tr:hover td {
    background-color: #222 !important;
}
.listing td, .listing th,
table.listing td, table.listing th {
    color: var(--scv-white) !important;
    border-color: #2a2a2a !important;
}

/* ── List: selected row ──────────────────────────────────────────── */
ul.treelist li a.selected,
ul.treelist li a:focus,
.listing tbody tr.selected td,
table.listing tr.selected td {
    background-color: rgba(232, 213, 32, 0.15) !important;
    color: var(--scv-yellow) !important;
}
.listing tbody tr.selected td a,
table.listing tr.selected td a {
    color: var(--scv-yellow) !important;
}

/* ── Message reading pane ────────────────────────────────────────── */
#messagecontainer,
#messagebody,
.message-part,
.rcmBody {
    background-color: var(--scv-charcoal) !important;
    color: var(--scv-white) !important;
}
.message-headers,
.headers-table {
    background-color: var(--scv-dark) !important;
    color: var(--scv-white) !important;
    border-bottom: 1px solid #2a2a2a !important;
}
.message-headers td,
.headers-table td {
    color: var(--scv-white) !important;
}

/* ── Forms and inputs (compose etc.) ────────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
textarea,
select,
.form-control {
    background-color: #111 !important;
    border-color: #333 !important;
    color: var(--scv-white) !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--scv-gray) !important;
}
label {
    color: var(--scv-white) !important;
}

/* ── Popovers / dropdowns ────────────────────────────────────────── */
.popupmenu,
.dropdownmenu,
.menu {
    background-color: var(--scv-charcoal) !important;
    border: 1px solid #333 !important;
    color: var(--scv-white) !important;
}
.popupmenu li a,
.dropdownmenu li a,
.menu li a {
    color: var(--scv-white) !important;
}

/* ── Scrollbar track ─────────────────────────────────────────────── */
::-webkit-scrollbar-track {
    background-color: var(--scv-charcoal) !important;
}

/* ── Unread / badge counters ─────────────────────────────────────── */
.unread-count,
.badge {
    background-color: var(--scv-yellow) !important;
    color: var(--scv-black) !important;
    font-weight: 700;
}

/* ── Dropdown / popover hover ────────────────────────────────────── */
.popupmenu li a:hover,
.dropdownmenu li a:hover,
.menu li a:hover {
    background-color: var(--scv-yellow) !important;
    color: var(--scv-black) !important;
}

/* ── Folder tree active ──────────────────────────────────────────── */
#mailboxlist li.selected > a,
#mailboxlist li.focused > a {
    color: var(--scv-yellow) !important;
    border-left: 3px solid var(--scv-yellow) !important;
    background-color: rgba(232, 213, 32, 0.08) !important;
}

/* ── Quota bar ───────────────────────────────────────────────────── */
.quota-value {
    color: var(--scv-yellow) !important;
}
.progressbar .bar {
    background-color: var(--scv-yellow) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background-color: #D4C118 !important;
}

/* ── Login page ──────────────────────────────────────────────────── */
body.task-login {
    background-color: var(--scv-black) !important;
}
body.task-login #layout-content {
    background-color: var(--scv-charcoal) !important;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    padding: 40px 36px 32px;
    max-width: 420px;
}
body.task-login #logo {
    display: block;
    margin: 0 auto 28px;
    max-width: 120px;
    height: auto;
}
body.task-login label {
    color: var(--scv-white) !important;
    font-weight: 600;
}
body.task-login .form-control {
    background-color: #111 !important;
    border-color: #333 !important;
    color: var(--scv-white) !important;
}
body.task-login .form-control::placeholder {
    color: var(--scv-gray) !important;
}
body.task-login input[type=submit],
body.task-login .button.primary {
    background-color: var(--scv-yellow) !important;
    color: var(--scv-black) !important;
    border: none !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 8px;
}
body.task-login input[type=submit]:hover {
    background-color: var(--scv-yellow-hover) !important;
}
body.task-login #login-footer {
    color: var(--scv-gray) !important;
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}
body.task-login #login-footer a {
    color: var(--scv-yellow) !important;
}
body.task-login h1.voice {
    color: var(--scv-white) !important;
}