/*
 * AR Advisors – Roundcube Theme
 *
 * CSS methodology:
 *   Light rules  → prefixed with html:not(.dark-mode)
 *                  The extra element+class selector beats Elastic's plain rules
 *                  by specificity — no !important needed.
 *   Dark rules   → prefixed with html.dark-mode
 *                  Our file loads AFTER elastic's styles.min.css so same-
 *                  specificity rules win by source order — no !important needed.
 *   !important   → kept ONLY where Elastic's own compiled CSS uses it:
 *                    .special-buttons { background: transparent !important }
 *                    .btn-primary / .btn-secondary (Bootstrap overrides)
 *                    input focus box-shadows
 *
 * Light palette:  page #f5f7fc  |  sidebar #fafcff  |  blue #0161ef  |  text #222222
 * Dark palette:   base #14172a  |  panel #1a1d2e  |  hover #272c48
 *                 border #2e3352  |  text #d0d7e8  |  muted #8896bb
 */

/* ── Always hidden ──────────────────────────────────────────── */
#taskmenu a.about,
#taskmenu li.about {
    display: none;
}

/* ── Scrollbar sizing (global) ──────────────────────────────── */
:not(.touch) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* ── Message-content links only ─────────────────────────────── */
.message-htmlpart a,
.message-part a {
    color: #0161ef;
}
.message-htmlpart a:hover,
.message-part a:hover {
    color: #0154cf;
}

/* ── Buttons — global, !important required (Elastic/Bootstrap use it) ── */
.btn-primary,
.btn.btn-primary,
#rcmloginsubmit {
    background-color: #0161ef !important;
    border-color: #0154cf !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 6px rgba(1, 97, 239, 0.28) !important;
    transition: all 0.15s !important;
}
.btn-primary:hover:not(:disabled),
#rcmloginsubmit:hover {
    background-color: #0154cf !important;
    border-color: #0147c0 !important;
    box-shadow: 0 4px 12px rgba(1, 97, 239, 0.38) !important;
    transform: translateY(-1px) !important;
}
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0147c0 !important;
    box-shadow: 0 0 0 .2rem rgba(1, 97, 239, .35) !important;
}
.floating-action-buttons a.button {
    background: #0161ef !important;
    box-shadow: 0 4px 14px rgba(1, 97, 239, 0.4) !important;
}

/* Focus rings — global, kept with !important for consistent override */
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
    border-color: #0161ef !important;
    box-shadow: 0 0 0 3px rgba(1, 97, 239, 0.15) !important;
}
.multi-input > .content.focused {
    border-color: #0161ef !important;
    box-shadow: 0 0 0 3px rgba(1, 97, 239, 0.15) !important;
}

/* =============================================================
   LIGHT MODE — html:not(.dark-mode) prefix
   ============================================================= */

/* 1 · Base backgrounds */
html:not(.dark-mode) body,
html:not(.dark-mode) #rcmbody {
    background-color: #f5f7fc;
}
html:not(.dark-mode) #layout {
    background-color: #f5f7fc;
}

/* 2 · Layout panels */
html:not(.dark-mode) #layout-sidebar {
    background-color: #fafcff;
    border-right: 1px solid #d6e0f5;
}
html:not(.dark-mode) #layout-list {
    background-color: #ffffff;
    border-right: 1px solid #d6e0f5;
}
html:not(.dark-mode) #layout-content {
    background-color: #ffffff;
}

/* 3 · Taskmenu */
html:not(.dark-mode) #layout-menu {
    background: #ffffff;
    border-right: 1px solid #e2e8f5;
    position: relative;
}
/* Paint the right border on top of .special-buttons which covers it */
html:not(.dark-mode) #layout-menu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background: #e2e8f5;
    pointer-events: none;
    z-index: 10;
}
html:not(.dark-mode) #taskmenu a {
    color: #444444;
    border-color: transparent;
    border-radius: 8px;
    margin: 2px 6px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
html:not(.dark-mode) #taskmenu a::before,
html:not(.dark-mode) #taskmenu a .inner {
    color: #666666;
}
html:not(.dark-mode) #taskmenu a:hover {
    background-color: #d0e2ff;
    color: #0161ef;
}
html:not(.dark-mode) #taskmenu a:hover::before,
html:not(.dark-mode) #taskmenu a:hover .inner {
    color: #0161ef;
}
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:hover {
    background-color: #0161ef;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(1, 97, 239, 0.35);
}
html:not(.dark-mode) #taskmenu a.selected::before,
html:not(.dark-mode) #taskmenu a.selected .inner {
    color: #ffffff;
}
html:not(.dark-mode) #taskmenu .special-buttons,
html:not(.dark-mode) #layout-menu .special-buttons {
    background-color: #ffffff;
    border-top: 1px solid #c8d4ed;
}
html:not(.dark-mode) #taskmenu .action-buttons a,
html:not(.dark-mode) #taskmenu a.action {
    color: #0161ef;
}
html:not(.dark-mode) #layout-menu .popover-header {
    background: #ffffff !important;
    color: #1c2340;
    border-bottom: 1px solid #e2e8f5;
}

/* 4 · Logo (light mode: blend away white bg) */
html:not(.dark-mode) #layout-menu .logo img,
html:not(.dark-mode) #taskmenu .logo img {
    mix-blend-mode: multiply;
}

/* 5 · Toolbar */
html:not(.dark-mode) .toolbar {
    background-color: #ffffff;
    border-bottom: 1px solid #d6e0f5;
    box-shadow: 0 1px 4px rgba(1, 97, 239, 0.06);
}
html:not(.dark-mode) .toolbar a.button,
html:not(.dark-mode) .toolbar .button {
    color: #333333;
    border-radius: 6px;
}
html:not(.dark-mode) .toolbar a.button:hover:not(.disabled),
html:not(.dark-mode) .toolbar .button:hover:not(.disabled) {
    background-color: #e4edff;
    color: #0161ef;
}

/* 6 · Headers */
html:not(.dark-mode) .header,
html:not(.dark-mode) #layout-sidebar .header,
html:not(.dark-mode) #layout-list .header,
html:not(.dark-mode) #layout-content .header {
    background-color: #ffffff;
    border-bottom: 1px solid #d6e0f5;
    color: #222222;
}
html:not(.dark-mode) #layout-sidebar .header {
    background-color: #f5f7fc;
}
html:not(.dark-mode) .header-title,
html:not(.dark-mode) .header .header-title {
    color: #222222;
    font-weight: 600;
}

/* 7 · Folder list */
html:not(.dark-mode) .listing:not(.toolbar) li,
html:not(.dark-mode) .listing:not(.toolbar) tr td {
    border-color: #eef2fb;
}
html:not(.dark-mode) .listing:not(.toolbar) li > a,
html:not(.dark-mode) .listing:not(.toolbar) li > div > a {
    color: #333333;
}
html:not(.dark-mode) .listing:not(.toolbar) li > a:hover,
html:not(.dark-mode) .listing:not(.toolbar) li > div > a:hover {
    background-color: #eef4ff;
    color: #0161ef;
}
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected {
    background-color: #e4edff;
}
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing li.selected > div > a,
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) .listing tr.selected td a {
    color: #0161ef;
}
html:not(.dark-mode) .listing li.selected > span.collapsible,
html:not(.dark-mode) .listing li.selected .unreadcount {
    color: #0161ef;
}
html:not(.dark-mode) .listing li .unreadcount,
html:not(.dark-mode) .listing li .badge {
    background-color: #0161ef;
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.72em;
    font-weight: 700;
}

/* 8 · Message list */
html:not(.dark-mode) #messagelist-header,
html:not(.dark-mode) #messagelist {
    background-color: #ffffff;
}
html:not(.dark-mode) #messagelist tbody tr {
    border-color: #eef2fb;
}
html:not(.dark-mode) #messagelist tbody tr:hover td {
    background-color: #f0f6ff;
}
html:not(.dark-mode) #messagelist tbody tr.selected td {
    background-color: #e4edff;
}
html:not(.dark-mode) #messagelist tbody tr.unread td.subject a {
    color: #222222;
    font-weight: 600;
}
html:not(.dark-mode) #messagelist-header .col-header {
    background-color: #f5f7fc;
    color: #666666;
    border-bottom: 2px solid #d6e0f5;
    font-size: 0.78em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* 9 · Message view */
html:not(.dark-mode) #messagecontframe,
html:not(.dark-mode) .message-part,
html:not(.dark-mode) .message-htmlpart {
    background-color: #ffffff;
}
html:not(.dark-mode) .message-headers,
html:not(.dark-mode) .headers-table {
    background-color: #f8faff;
    border-bottom: 1px solid #d6e0f5;
    border-radius: 8px 8px 0 0;
}
html:not(.dark-mode) .headers-table .header-title {
    color: #666666;
    font-size: 0.82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
html:not(.dark-mode) .message-htmlpart blockquote,
html:not(.dark-mode) .message-part blockquote {
    border-left-color: #0161ef;
    color: #5a6480;
    background-color: #f0f6ff;
}

/* 10 · Compose */
html:not(.dark-mode) .compose-header-wrapper {
    background-color: #f8faff;
    border-bottom: 1px solid #d6e0f5;
}
html:not(.dark-mode) #compose-subject input {
    font-weight: 600;
    color: #222222;
    border-color: #d6e0f5;
}

/* 11 · Form inputs */
html:not(.dark-mode) .form-control,
html:not(.dark-mode) input[type="text"],
html:not(.dark-mode) input[type="email"],
html:not(.dark-mode) input[type="password"],
html:not(.dark-mode) input[type="search"],
html:not(.dark-mode) textarea,
html:not(.dark-mode) select {
    background-color: #ffffff;
    border-color: #d6e0f5;
    color: #111111;
    border-radius: 6px;
}
html:not(.dark-mode) ::placeholder {
    color: #aaaaaa;
    opacity: 1;
}
html:not(.dark-mode) .multi-input > .content {
    border-color: #d6e0f5;
    border-radius: 6px;
}
html:not(.dark-mode) .btn-secondary {
    border-color: #c4d4f5 !important;
    color: #1c2340 !important;
    background-color: #ffffff !important;
    border-radius: 7px !important;
}
html:not(.dark-mode) .btn-secondary:hover {
    background-color: #e4edff !important;
    border-color: #0161ef !important;
    color: #0161ef !important;
}

/* 12 · Popup menus */
html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .menu.popup {
    background-color: #ffffff;
    border: 1px solid #d6e0f5;
    box-shadow: 0 8px 24px rgba(1, 97, 239, 0.12);
    border-radius: 8px;
}
html:not(.dark-mode) .popupmenu .listing li > a:not(.disabled):hover,
html:not(.dark-mode) .menu a:not(.disabled):hover {
    background-color: #e4edff;
    color: #0161ef;
}
html:not(.dark-mode) .popupmenu .listing li > a:not(.disabled):hover::before {
    color: #0161ef;
}

/* 13 · Modals */
html:not(.dark-mode) .modal-content,
html:not(.dark-mode) .ui-dialog {
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(1, 97, 239, 0.15);
}
html:not(.dark-mode) .modal-header,
html:not(.dark-mode) .ui-dialog-titlebar {
    background-color: #f5f7fc;
    border-bottom: 1px solid #d6e0f5;
    border-radius: 12px 12px 0 0;
}
html:not(.dark-mode) .modal-header .modal-title {
    color: #222222;
    font-weight: 600;
}

/* 14 · Status / notices */
html:not(.dark-mode) #messagestack div.notice {
    background-color: #e4edff;
    border-color: #0161ef;
    color: #0154cf;
}
html:not(.dark-mode) #quotadisplay .bar {
    background-color: #0161ef;
}

/* 15 · Scrollbars */
html:not(.dark-mode) {
    scrollbar-color: #b8cdf5 #f0f4ff;
}
html:not(.dark-mode) :not(.touch) ::-webkit-scrollbar-track {
    background-color: #f0f4ff;
}
html:not(.dark-mode) :not(.touch) ::-webkit-scrollbar-thumb {
    background-color: #b8cdf5;
    border-radius: 3px;
}
html:not(.dark-mode) :not(.touch) ::-webkit-scrollbar-thumb:hover {
    background-color: #0161ef;
}

/* =============================================================
   DARK MODE — html.dark-mode prefix
   No !important on most rules: our file loads AFTER
   elastic/styles.min.css, so same-specificity rules win by order.
   ============================================================= */

/* 1 · Base — CRITICAL: must override the light-mode body rule above */
html.dark-mode,
html.dark-mode body,
html.dark-mode #rcmbody {
    background-color: #14172a;
    color: #d0d7e8;
}
html.dark-mode #layout {
    background-color: #14172a;
}

/* 2 · Taskmenu */
html.dark-mode #layout-menu {
    background: #1c1e2e;
    border-right: 1px solid #2e3352;
}
html.dark-mode #taskmenu a {
    color: #b0bce0;
    border-color: transparent;
}
html.dark-mode #taskmenu a::before,
html.dark-mode #taskmenu a .inner {
    color: #8896bb;
}
html.dark-mode #taskmenu a:hover {
    background-color: #272c48;
    color: #7aadff;
}
html.dark-mode #taskmenu a:hover::before,
html.dark-mode #taskmenu a:hover .inner {
    color: #7aadff;
}
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
    background-color: #0161ef;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(1, 97, 239, 0.45);
}
html.dark-mode #taskmenu a.selected::before,
html.dark-mode #taskmenu a.selected .inner {
    color: #ffffff;
}
/* Elastic sets .special-buttons { background: transparent !important } inside
   html.dark-mode #layout-menu — must use !important to override */
html.dark-mode #taskmenu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
    background-color: #14172a !important;
    border-top: 1px solid #2e3352;
    border-right: 1px solid #2e3352;
}
html.dark-mode #taskmenu .special-buttons a,
html.dark-mode #layout-menu .special-buttons a {
    color: #8896bb;
}
html.dark-mode #taskmenu .special-buttons a:hover,
html.dark-mode #layout-menu .special-buttons a:hover {
    background-color: #272c48;
    color: #d0d7e8;
}
html.dark-mode #layout-menu .popover-header {
    background: #14172a;
    color: #d0d7e8;
    border-bottom: 1px solid #2e3352;
}

/* 3 · Logo */
html.dark-mode #layout-menu .logo img,
html.dark-mode #taskmenu .logo img {
    filter: invert(1) brightness(1.6);
    mix-blend-mode: normal;
}

/* 4 · Layout panels */
html.dark-mode #layout-sidebar {
    background-color: #1a1d2e;
    border-right: 1px solid #2e3352;
}
html.dark-mode #layout-list {
    background-color: #1a1d2e;
    border-right: 1px solid #2e3352;
}
html.dark-mode #layout-content {
    background-color: #1a1d2e;
}
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
    border-color: #2e3352;
}

/* 5 · Headers */
html.dark-mode .header,
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
    background-color: #14172a;
    border-bottom-color: #2e3352;
    color: #d0d7e8;
}
html.dark-mode .header-title,
html.dark-mode .header .header-title {
    color: #d0d7e8;
}

/* 6 · Searchbar */
html.dark-mode .searchbar {
    background-color: #14172a;
    border-color: #2e3352;
}
html.dark-mode .searchbar input,
html.dark-mode .searchbar a {
    color: #d0d7e8;
}

/* 7 · Toolbar */
html.dark-mode .toolbar {
    background-color: #14172a;
    border-bottom-color: #2e3352;
    box-shadow: none;
}
html.dark-mode .toolbar a.button,
html.dark-mode .toolbar .button {
    color: #b0bce0;
}
html.dark-mode .toolbar a.button:hover:not(.disabled),
html.dark-mode .toolbar .button:hover:not(.disabled) {
    background-color: #272c48;
    color: #7aadff;
}

/* 8 · Folder list */
html.dark-mode .listing:not(.toolbar) li,
html.dark-mode .listing:not(.toolbar) tr td {
    border-color: #2e3352;
}
html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a {
    color: #b0bce0;
}
html.dark-mode .listing:not(.toolbar) li > a:hover,
html.dark-mode .listing:not(.toolbar) li > div > a:hover {
    background-color: #272c48;
    color: #7aadff;
}
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected {
    background-color: #1e2a50;
}
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .listing tr.selected td a {
    color: #7aadff;
}
html.dark-mode .listing li .unreadcount,
html.dark-mode .listing li .badge {
    background-color: #0161ef;
    color: #ffffff;
}
html.dark-mode .folderlist li.mailbox .unreadcount {
    font-weight: normal;
}

/* 9 · Message list */
html.dark-mode #messagelist-header,
html.dark-mode #messagelist {
    background-color: #1a1d2e;
}
html.dark-mode #messagelist-header .col-header {
    background-color: #14172a;
    color: #8896bb;
    border-bottom-color: #2e3352;
}
html.dark-mode #messagelist tbody tr {
    border-color: #2e3352;
}
html.dark-mode #messagelist tbody tr:hover td {
    background-color: #272c48;
}
html.dark-mode #messagelist tbody tr.selected td {
    background-color: #1e2a50;
}
html.dark-mode #messagelist tbody tr.unread td.subject a {
    color: #d0d7e8;
}
html.dark-mode .messagelist tr.recent td {
    color: #7aadff;
}

/* 10 · Message view */
html.dark-mode #messagecontframe,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart {
    background-color: #1a1d2e;
}
html.dark-mode .message-headers,
html.dark-mode .headers-table {
    background-color: #14172a;
    border-bottom-color: #2e3352;
}
html.dark-mode .headers-table .header-title {
    color: #8896bb;
}
html.dark-mode .message-part blockquote {
    border-color: #4d88ff;
    color: #8896bb;
    background-color: #272c48;
}

/* 11 · Compose */
html.dark-mode .compose-header-wrapper {
    background-color: #14172a;
    border-bottom-color: #2e3352;
}
html.dark-mode #compose-subject input {
    color: #d0d7e8;
    border-color: #2e3352;
}

/* 12 · Form inputs */
html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: #272c48;
    border-color: #3a4470;
    color: #d0d7e8;
    border-radius: 6px;
}
html.dark-mode .form-control:focus,
html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="search"]:focus {
    border-color: #0161ef !important;
    box-shadow: 0 0 0 3px rgba(1, 97, 239, 0.25) !important;
}
html.dark-mode .multi-input > .content {
    background-color: #272c48;
    border-color: #3a4470;
}
html.dark-mode ::placeholder {
    color: #4d5880;
    opacity: 1;
}
html.dark-mode .btn-secondary {
    background-color: #272c48 !important;
    border-color: #3a4470 !important;
    color: #b0bce0 !important;
    border-radius: 7px !important;
}
html.dark-mode .btn-secondary:hover {
    background-color: #1e2a50 !important;
    border-color: #0161ef !important;
    color: #7aadff !important;
}
html.dark-mode .floating-action-buttons a.button {
    background: #0161ef !important;
    box-shadow: 0 4px 14px rgba(1, 97, 239, 0.45) !important;
}

/* 13 · Popup menus */
html.dark-mode .popupmenu,
html.dark-mode .menu.popup {
    background-color: #1a1d2e;
    border-color: #2e3352;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):hover {
    background-color: #272c48;
    color: #7aadff;
}

/* 14 · Modals */
html.dark-mode .modal-content,
html.dark-mode .ui-dialog {
    background-color: #1a1d2e;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
html.dark-mode .modal-header,
html.dark-mode .ui-dialog-titlebar {
    background-color: #14172a;
    border-bottom-color: #2e3352;
}
html.dark-mode .modal-header .modal-title {
    color: #d0d7e8;
}

/* 15 · Status */
html.dark-mode #messagestack div.notice {
    background-color: #1e2a50;
    border-color: #0161ef;
    color: #7aadff;
}
html.dark-mode #quotadisplay .bar {
    background-color: #0161ef;
}

/* 16 · Scrollbars */
html.dark-mode {
    scrollbar-color: #3a4470 #1a1d2e;
}
html.dark-mode :not(.touch) ::-webkit-scrollbar-track {
    background-color: #1a1d2e;
}
html.dark-mode :not(.touch) ::-webkit-scrollbar-thumb {
    background-color: #3a4470;
    border-radius: 3px;
}
html.dark-mode :not(.touch) ::-webkit-scrollbar-thumb:hover {
    background-color: #0161ef;
}

/* =============================================================
   LOGIN PAGE
   ============================================================= */
body.task-login .task-logo img,
body.task-login #login-logo img,
.login .task-logo img {
    max-width: 220px;
    width: 220px;
    height: auto;
    border-radius: 0;
}
html:not(.dark-mode) body.task-login .task-logo img,
html:not(.dark-mode) .login .task-logo img {
    mix-blend-mode: multiply;
}
html.dark-mode body.task-login .task-logo img,
html.dark-mode .login .task-logo img {
    filter: invert(1) brightness(1.6);
    mix-blend-mode: normal;
}
html:not(.dark-mode) #login-form label,
html:not(.dark-mode) .login label {
    color: #333333;
    font-weight: 500;
}
html.dark-mode #login-form label,
html.dark-mode .login label {
    color: #b0bce0;
    font-weight: 500;
}
html:not(.dark-mode) #login-footer > div {
    background: #f0f5ff;
    border: 1px solid #d6e0f5;
    color: #666666;
    border-radius: 8px;
}
html.dark-mode #login-footer > div {
    background: #1a1d2e;
    border: 1px solid #2e3352;
    color: #8896bb;
    border-radius: 8px;
}