/*
 * Roundcube Elastic — Dark Command Center
 * Custom stylesheet; original Elastic files remain untouched.
 */

:root {
    color-scheme: dark;

    --cc-bg: #05090d;
    --cc-panel: #071017;
    --cc-panel-2: #09151c;
    --cc-panel-3: #0b1b23;

    --cc-line: #123641;
    --cc-line-bright: #1b6472;

    --cc-text: #d7f5f7;
    --cc-muted: #71929a;

    --cc-cyan: #58efe8;
    --cc-blue: #4b8eff;
    --cc-violet: #9b91ff;
    --cc-danger: #ff6c75;
    --cc-success: #64e6b5;
    --cc-warning: #ffd580;

    --cc-shadow: 0 12px 35px rgba(0, 0, 0, .38);
    --cc-glow: 0 0 20px rgba(88, 239, 232, .08);
}

/* Base */

html,
body {
    background: var(--cc-bg) !important;
    color: var(--cc-text) !important;
    color-scheme: dark;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace !important;

    font-size: 12px;
}

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

a,
a:link {
    color: var(--cc-cyan);
    text-decoration: none;
}

a:hover,
a:focus {
    color: #ffffff;
}

::selection {
    color: #031012;
    background: var(--cc-cyan);
}

hr,
fieldset {
    border-color: var(--cc-line) !important;
}

/* Main application panels */

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

#layout-sidebar {
    border-right: 1px solid var(--cc-line) !important;
}

#layout-list {
    border-right: 1px solid var(--cc-line) !important;
}

#layout-content {
    background-color: var(--cc-bg) !important;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header,
#layout > div > .header {
    position: relative;

    color: var(--cc-text) !important;
    background:
        linear-gradient(180deg, #08131a 0%, #050c11 100%)
        !important;

    border-bottom: 1px solid var(--cc-line) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .17);

    font-weight: 700;
}

#layout-sidebar > .header::after,
#layout-list > .header::after,
#layout-content > .header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--cc-cyan),
        transparent
    );

    opacity: .28;
    pointer-events: none;
}

#layout > div > .footer {
    color: var(--cc-muted) !important;
    background: var(--cc-panel) !important;
    border-top: 1px solid var(--cc-line) !important;
}

/* Left task menu */

#layout-menu,
#taskmenu {
    color: var(--cc-text) !important;

    background:
        linear-gradient(180deg, #08131a 0%, #050b10 100%)
        !important;

    border-color: var(--cc-line) !important;
}

#taskmenu a,
#taskmenu button,
#layout-menu a {
    color: var(--cc-muted) !important;
    transition:
        color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

#taskmenu a:hover,
#taskmenu button:hover,
#layout-menu a:hover {
    color: var(--cc-cyan) !important;
    background-color: rgba(88, 239, 232, .055) !important;
}

#taskmenu a.selected,
#taskmenu a.active,
#taskmenu .selected a,
#layout-menu a.selected {
    color: var(--cc-cyan) !important;
    background-color: rgba(88, 239, 232, .09) !important;

    box-shadow: inset 2px 0 0 var(--cc-cyan);
}

/* Folder tree and sidebar lists */

#layout-sidebar .scroller,
#folderlist-content {
    background: var(--cc-panel) !important;
}

#layout-sidebar .treelist,
#layout-sidebar .folderlist,
#layout-sidebar .listing {
    color: var(--cc-text) !important;
}

#layout-sidebar .treelist a,
#layout-sidebar .folderlist a {
    color: var(--cc-text) !important;
}

#layout-sidebar .treelist a:hover,
#layout-sidebar .folderlist a:hover {
    color: var(--cc-cyan) !important;
    background: rgba(88, 239, 232, .045) !important;
}

#layout-sidebar .treelist li.selected > a,
#layout-sidebar .folderlist li.selected > a,
#layout-sidebar .treelist li.selected > .name {
    color: var(--cc-cyan) !important;
    background: rgba(88, 239, 232, .09) !important;
}

#layout-sidebar .treelist .unread,
#layout-sidebar .folderlist .unread {
    color: var(--cc-cyan) !important;
}

/* Message list */

#layout-list .scroller,
#messagelist,
.messagelist {
    background: var(--cc-panel) !important;
    color: var(--cc-text) !important;
}

#messagelist,
.messagelist {
    border-color: var(--cc-line) !important;
}

#messagelist thead th,
.messagelist thead th {
    color: var(--cc-muted) !important;
    background: #08131a !important;
    border-color: var(--cc-line) !important;

    font-size: 10px;
    letter-spacing: .04em;
}

#messagelist tbody td,
.messagelist tbody td {
    color: var(--cc-text);
    background-color: transparent;
    border-color: rgba(18, 54, 65, .65) !important;
}

#messagelist tbody tr,
.messagelist tbody tr {
    background-color: var(--cc-panel) !important;
    transition: background-color .12s ease;
}

#messagelist tbody tr:hover,
.messagelist tbody tr:hover {
    background-color: #0a1d24 !important;
}

#messagelist tbody tr.selected,
#messagelist tbody tr.selected td,
.messagelist tbody tr.selected,
.messagelist tbody tr.selected td {
    background-color: #0b242b !important;
    color: var(--cc-text) !important;
}

#messagelist tbody tr.selected,
.messagelist tbody tr.selected {
    box-shadow: inset 2px 0 0 var(--cc-cyan);
}

#messagelist tr.unread,
#messagelist tr.unread td,
.messagelist tr.unread,
.messagelist tr.unread td {
    font-weight: 700;
}

#messagelist tr.unread .subject a,
.messagelist tr.unread .subject a {
    color: var(--cc-cyan) !important;
}

#messagelist .date,
#messagelist .size,
#messagelist .count,
#messagelist .fromto,
.messagelist .date,
.messagelist .size {
    color: var(--cc-muted);
}

/* Search and toolbar */

.toolbar,
.toolbar.menu {
    color: var(--cc-text);
}

.toolbar a,
.toolbar button {
    color: var(--cc-muted) !important;
    border-radius: 5px;
}

.toolbar a:hover,
.toolbar a:focus,
.toolbar a.active,
.toolbar button:hover {
    color: var(--cc-cyan) !important;
    background: rgba(88, 239, 232, .07) !important;
}

#mailsearchform,
.searchbar,
.searchbox {
    color: var(--cc-text);
}

#mailsearchform input,
.searchbar input,
.searchbox input {
    color: var(--cc-text) !important;
    background: #061117 !important;
    border-color: var(--cc-line-bright) !important;
}

#mailsearchform input:focus,
.searchbar input:focus,
.searchbox input:focus {
    border-color: var(--cc-cyan) !important;
    box-shadow: 0 0 0 1px rgba(88, 239, 232, .17) !important;
    outline: none;
}

/* Buttons */

a.button,
button.btn,
.btn,
input.button {
    border-radius: 5px;
    transition:
        color .15s ease,
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

#layout-content a.button,
#layout-sidebar a.button,
#layout-list a.button {
    color: var(--cc-cyan);
    border-color: var(--cc-line);
}

#layout-content a.button:hover,
#layout-sidebar a.button:hover,
#layout-list a.button:hover {
    color: #ffffff !important;
    background-color: #0a1d24 !important;
    border-color: var(--cc-line-bright) !important;
}

.btn-primary,
button.mainaction,
#rcmloginsubmit {
    color: #031012 !important;
    background: var(--cc-cyan) !important;
    border-color: var(--cc-cyan) !important;
    font-weight: 800;
}

.btn-primary:hover,
button.mainaction:hover,
#rcmloginsubmit:hover {
    color: #000 !important;
    background: #8cfff8 !important;
    border-color: #8cfff8 !important;
    box-shadow: 0 0 18px rgba(88, 239, 232, .15);
}

.btn-secondary,
.btn-outline-secondary {
    color: var(--cc-text) !important;
    background: var(--cc-panel-2) !important;
    border-color: var(--cc-line-bright) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--cc-panel-3) !important;
    border-color: var(--cc-cyan) !important;
}

/* Inputs, forms and checkboxes */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
textarea,
select,
.form-control,
.custom-select {
    color: var(--cc-text) !important;
    background-color: #061117 !important;
    border-color: var(--cc-line-bright) !important;
    border-radius: 5px;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #4e6f77 !important;
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus {
    color: var(--cc-text) !important;
    background-color: #07151b !important;
    border-color: var(--cc-cyan) !important;
    box-shadow: 0 0 0 1px rgba(88, 239, 232, .16) !important;
    outline: none;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cc-cyan);
}

label,
.form-label {
    color: var(--cc-text);
}

.form-group,
.formcontent,
.propform {
    color: var(--cc-text);
}

.formcontent table td,
.propform table td {
    border-color: rgba(18, 54, 65, .65) !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
textarea:disabled,
select:disabled {
    color: var(--cc-muted) !important;
    background: #091218 !important;
    opacity: .8;
}

/* Message view and message headers */

#message-header,
#message-header .subject,
#message-header .header,
#message-content,
.message-part,
.message-content {
    color: var(--cc-text);
    background-color: var(--cc-panel);
    border-color: var(--cc-line);
}

#message-header {
    border-bottom: 1px solid var(--cc-line);
}

#message-header .subject {
    color: var(--cc-cyan);
}

#message-header .header a {
    color: var(--cc-cyan);
}

pre,
code,
.code {
    color: var(--cc-cyan);
    background: rgba(88, 239, 232, .045);
}

blockquote {
    border-left: 2px solid var(--cc-cyan);
    padding-left: 12px;
}

/* Menus, dropdowns, popovers and dialogs */

.popupmenu,
.menu,
.dropdown-menu,
.popover,
.ui-dialog,
.modal-content {
    color: var(--cc-text) !important;
    background: #061117 !important;
    border: 1px solid var(--cc-line-bright) !important;
    box-shadow: var(--cc-shadow);
}

.dropdown-menu .dropdown-item,
.popupmenu a,
.menu a {
    color: var(--cc-text) !important;
}

.dropdown-menu .dropdown-item:hover,
.popupmenu a:hover,
.menu a:hover {
    color: var(--cc-cyan) !important;
    background: #0a1d24 !important;
}

.popover-header,
.modal-header,
.modal-footer,
.ui-dialog .ui-dialog-titlebar {
    color: var(--cc-text) !important;
    background: #08151c !important;
    border-color: var(--cc-line) !important;
}

.modal-body,
.ui-dialog .ui-dialog-content {
    color: var(--cc-text) !important;
    background: #061117 !important;
}

.close,
.btn-close {
    color: var(--cc-muted) !important;
}

/* Notifications */

.toast,
.alert,
.notification,
#messagestack {
    color: var(--cc-text);
}

.alert-info {
    color: var(--cc-cyan) !important;
    background: rgba(88, 239, 232, .06) !important;
    border-color: var(--cc-line-bright) !important;
}

.alert-success {
    color: var(--cc-success) !important;
    background: rgba(100, 230, 181, .06) !important;
    border-color: rgba(100, 230, 181, .3) !important;
}

.alert-warning {
    color: var(--cc-warning) !important;
    background: rgba(255, 213, 128, .06) !important;
    border-color: rgba(255, 213, 128, .3) !important;
}

.alert-danger,
.text-danger {
    color: var(--cc-danger) !important;
}

/* Login screen */

.task-login,
.task-login #layout,
.task-login #layout-content {
    color: var(--cc-text) !important;
    background:
        radial-gradient(
            ellipse at 50% 30%,
            #0a1b22 0%,
            #05090d 66%
        ) !important;
}

#login-form {
    color: var(--cc-text);
}

#login-form input {
    color: var(--cc-text) !important;
    background: #061117 !important;
    border-color: var(--cc-line-bright) !important;
}

#login-form input:focus {
    border-color: var(--cc-cyan) !important;
    box-shadow: 0 0 0 1px rgba(88, 239, 232, .18) !important;
}

#login-form a {
    color: var(--cc-cyan);
}

#login-footer,
#login-addon {
    color: var(--cc-muted) !important;
}

/* Scrollbars */

* {
    scrollbar-color: var(--cc-line-bright) var(--cc-bg);
    scrollbar-width: thin;
}

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

::-webkit-scrollbar-track {
    background: var(--cc-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--cc-line-bright);
    border: 2px solid var(--cc-bg);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cc-cyan);
}

/* Keyboard accessibility */

:focus-visible {
    outline: 1px solid var(--cc-cyan);
    outline-offset: 2px;
}

body.task-login #logo {
    width: 96px !important;
    height: 96px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}

/* Keep the layout and mobile behavior owned by Elastic. */