/* Cyber Solutions skin — extends Roundcube Elastic 1.7.x */
:root {
    --cs-navy: #06111d;
    --cs-navy-2: #0a1828;
    --cs-surface: #102235;
    --cs-surface-hi: #16304a;
    --cs-blue: #0387bf;
    --cs-blue-deep: #036699;
    --cs-sky: #a4dceb;
    --cs-violet: #aa58ab;
    --cs-ink: #f2efe8;
    --cs-ink-soft: #b9c6d2;
    --cs-ink-muted: #8fa1b2;
    --cs-hair: rgba(164, 220, 235, .14);
    --cs-hair-strong: rgba(164, 220, 235, .25);
    --cs-shadow: 0 22px 55px -30px rgba(0, 0, 0, .85);
}

html,
body {
    background: var(--cs-navy) !important;
    color: var(--cs-ink-soft) !important;
    font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 540px at 22% -15%, rgba(3, 135, 191, .17), transparent 68%),
        radial-gradient(700px 480px at 105% 110%, rgba(170, 88, 171, .10), transparent 70%);
}

a,
.listing li a,
.listing tbody td a {
    color: var(--cs-sky);
}

a:hover,
a:focus {
    color: var(--cs-ink) !important;
}

/* Application rail */
#layout-menu {
    background: #050e18 !important;
    border-right: 1px solid var(--cs-hair) !important;
    box-shadow: 10px 0 30px -24px #000;
}

#layout-menu .popover-header,
#layout-menu .special-buttons {
    background: transparent !important;
}

#layout-menu .menu a,
#layout-menu .menu button,
#layout-menu a,
#layout-menu button {
    color: var(--cs-ink-muted) !important;
}

#layout-menu .menu a:hover,
#layout-menu .menu button:hover,
#layout-menu .selected > a,
#layout-menu .selected > button,
#layout-menu a.selected,
#layout-menu button.selected {
    background: rgba(3, 135, 191, .13) !important;
    color: var(--cs-sky) !important;
}

#layout-menu .selected > a,
#layout-menu .selected > button {
    box-shadow: inset 3px 0 0 var(--cs-violet);
}

#layout-menu .logo {
    background-image: url("../images/logo-small.svg") !important;
    background-size: 34px auto !important;
    background-position: center !important;
}

/* Sidebars, lists and content panes */
#layout-sidebar,
#layout-list,
#layout-content,
.iframe #layout-content,
.popupmenu,
.popover,
.ui-dialog,
.menu.toolbar .dropbutton .dropdown-menu {
    background: var(--cs-navy-2) !important;
    color: var(--cs-ink-soft) !important;
    border-color: var(--cs-hair) !important;
}

#layout-sidebar {
    background: #081522 !important;
    border-right: 1px solid var(--cs-hair) !important;
}

#layout-list {
    background: var(--cs-navy-2) !important;
    border-right: 1px solid var(--cs-hair) !important;
}

#layout-content {
    background: var(--cs-surface) !important;
}

.header,
.footer,
.boxtitle,
.boxfooter,
.listbox .listitem,
.listing thead td,
.listing thead th,
.toolbar,
.searchbar,
.pagenav {
    background: #0b1b2b !important;
    color: var(--cs-ink-soft) !important;
    border-color: var(--cs-hair) !important;
}

.boxtitle,
#layout-content > .header,
#layout-list > .header,
#layout-sidebar > .header {
    color: var(--cs-ink) !important;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .015em;
}

/* Message and settings lists */
.listing,
.listing tbody,
.listing tr,
.listing td,
.messagelist,
.records-table {
    background: transparent !important;
    color: var(--cs-ink-soft) !important;
    border-color: var(--cs-hair) !important;
}

.listing tbody tr,
.messagelist tr,
.records-table tr,
.listbox .listitem {
    border-color: var(--cs-hair) !important;
}

.listing tbody tr:hover,
.messagelist tr:hover,
.records-table tr:hover,
.listbox .listitem:hover {
    background: rgba(164, 220, 235, .055) !important;
}

.listing tr.selected,
.messagelist tr.selected,
.records-table tr.selected,
.listbox .listitem.selected {
    background: rgba(3, 135, 191, .16) !important;
    color: var(--cs-ink) !important;
    box-shadow: inset 3px 0 0 var(--cs-violet);
}

.messagelist tr.unread td,
.messagelist tr.unread .subject span {
    color: var(--cs-ink) !important;
    font-weight: 650;
}

.messagelist .date,
.messagelist .size,
.listing .secondary,
.listing .description,
.quota-widget,
.quota-widget .value {
    color: var(--cs-ink-muted) !important;
}

.quota-widget .bar,
.quota-widget .value {
    border-color: var(--cs-hair-strong) !important;
}

.quota-widget .bar .value,
.quota-widget .value > span {
    background: var(--cs-blue) !important;
}

/* Buttons, toolbars and controls */
.btn,
button,
.button,
input[type="button"],
input[type="submit"] {
    border-radius: 2px !important;
}

.btn-primary,
.button.mainaction,
button.mainaction,
input.mainaction {
    background: var(--cs-blue) !important;
    border-color: var(--cs-blue) !important;
    color: #fff !important;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.btn-primary:hover,
.button.mainaction:hover,
button.mainaction:hover,
input.mainaction:hover {
    background: var(--cs-blue-deep) !important;
    border-color: var(--cs-sky) !important;
}

.btn-secondary,
.button:not(.mainaction),
button:not(.mainaction) {
    color: var(--cs-ink-soft);
    border-color: var(--cs-hair-strong);
}

.toolbar a,
.toolbar button,
.toolbar .button,
.pagenav a,
.pagenav button {
    color: var(--cs-ink-muted) !important;
}

.toolbar a:hover,
.toolbar button:hover,
.toolbar .button:hover,
.pagenav a:hover,
.pagenav button:hover {
    color: var(--cs-sky) !important;
    background-color: rgba(3, 135, 191, .10) !important;
}

input.form-control,
textarea.form-control,
select.form-control,
.custom-select,
.searchbar input,
.input-group-text,
.select2-container .select2-selection {
    background: #071522 !important;
    border-color: var(--cs-hair-strong) !important;
    color: var(--cs-ink) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.custom-select:focus,
.searchbar input:focus {
    border-color: var(--cs-blue) !important;
    box-shadow: 0 0 0 2px rgba(3, 135, 191, .17) !important;
}

input::placeholder,
textarea::placeholder {
    color: #657b8e !important;
}

/* Message view and composer */
#message-header,
#message-content,
.message-part,
.message-htmlpart,
.compose-headers,
.compose-content,
.mce-content-body {
    background: var(--cs-surface) !important;
    color: var(--cs-ink-soft) !important;
    border-color: var(--cs-hair) !important;
}

#message-header .header-title,
#message-header .subject,
.compose-headers label {
    color: var(--cs-ink) !important;
}

.message-part blockquote {
    color: var(--cs-ink-muted) !important;
    border-left: 2px solid var(--cs-violet) !important;
}

.attachment,
.attachmentslist li {
    background: rgba(164, 220, 235, .05) !important;
    border-color: var(--cs-hair) !important;
}

/* Settings and forms */
.box,
.formcontent,
.formcontainer,
.propform,
.propform td,
.propform th,
fieldset {
    background: transparent !important;
    color: var(--cs-ink-soft) !important;
    border-color: var(--cs-hair) !important;
}

fieldset legend,
.propform .title,
.propform label {
    color: var(--cs-ink-soft) !important;
}

.preferences-page .section,
.settings-list .listitem {
    border-color: var(--cs-hair) !important;
}

/* Dialogs, notices and menus */
.popupmenu,
.popover,
.dropdown-menu,
.ui-dialog,
.ui-widget-content {
    background: var(--cs-surface-hi) !important;
    color: var(--cs-ink-soft) !important;
    border: 1px solid var(--cs-hair-strong) !important;
    box-shadow: var(--cs-shadow) !important;
}

.popupmenu a,
.dropdown-menu a,
.ui-menu-item {
    color: var(--cs-ink-soft) !important;
}

.popupmenu a:hover,
.dropdown-menu a:hover,
.ui-menu-item:hover,
.ui-state-active {
    background: rgba(3, 135, 191, .15) !important;
    color: var(--cs-ink) !important;
}

#messagestack .alert,
.alert {
    background: var(--cs-surface-hi) !important;
    border: 1px solid var(--cs-hair-strong) !important;
    border-left: 3px solid var(--cs-blue) !important;
    color: var(--cs-ink) !important;
    border-radius: 2px !important;
    box-shadow: var(--cs-shadow);
}

#messagestack .alert-danger,
.alert-danger {
    border-left-color: #e66a70 !important;
}

#messagestack .alert-success,
.alert-success {
    border-left-color: #4ac6a8 !important;
}

/* Login */
body.task-login #layout {
    display: flex !important;
    min-height: 100vh !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    box-sizing: border-box;
}

body.task-login #layout-content {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: min(430px, calc(100vw - 2.5rem)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 2.5rem 2.25rem 2rem !important;
    overflow: visible !important;
    background: rgba(16, 34, 53, .97) !important;
    border: 1px solid var(--cs-hair) !important;
    border-left: 3px solid var(--cs-violet) !important;
    border-radius: 4px !important;
    box-shadow: 0 32px 78px -34px #000 !important;
}

body.task-login #logo {
    position: static !important;
    order: 1;
    width: 242px !important;
    height: 52px !important;
    margin: 0 0 1.7rem !important;
    content: url("../images/logo.svg") !important;
}

body.task-login #login-form {
    position: static !important;
    order: 2;
    width: 100% !important;
    margin: 0 !important;
}

body.task-login #login-footer {
    order: 3;
    color: var(--cs-ink-muted) !important;
    border-top: 1px solid var(--cs-hair);
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
}

/* Security & Devices plugin */
.cs-security-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.6rem;
}

.cs-security-intro {
    margin-bottom: 1.4rem;
    color: var(--cs-ink-muted);
}

.cs-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cs-card {
    background: rgba(10, 24, 40, .72);
    border: 1px solid var(--cs-hair);
    border-left: 2px solid var(--cs-blue);
    padding: 1.3rem;
    box-shadow: var(--cs-shadow);
}

.cs-card--security {
    border-left-color: var(--cs-violet);
}

.cs-card h3 {
    margin: 0 0 .65rem;
    color: var(--cs-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
}

.cs-card p {
    color: #c4d0da;
}

.cs-card .button {
    display: inline-block;
    margin-top: .4rem;
    padding: .62rem .9rem;
    text-decoration: none;
}

.cs-settings {
    width: 100%;
    margin-top: .8rem;
    border-collapse: collapse;
}

.cs-settings th,
.cs-settings td {
    padding: .55rem .45rem;
    border-bottom: 1px solid var(--cs-hair);
    text-align: left;
    vertical-align: top;
}

.cs-settings td,
.cs-settings td * {
    color: var(--cs-ink-soft) !important;
}

.cs-settings th {
    width: 38%;
    color: var(--cs-ink-muted);
    font-weight: 500;
}

.cs-settings code {
    color: var(--cs-sky) !important;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

@media (max-width: 768px) {
    .cs-card-grid {
        grid-template-columns: 1fr;
    }

    .cs-security-page {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    body.task-login #layout-content {
        padding: 2rem 1.4rem 1.5rem !important;
    }

    body.task-login #logo {
        width: 210px !important;
    }
}