/* NexusPanel look for Roundcube Elastic — managed by NexusPanel */
:root { --np1: #2f6ff0; --np2: #28aade; --np3: #6a3fe0; --npnavy: #0b1220; }

/* login page: dark gradient background, white card, logo of the panel */
body.task-login { background: radial-gradient(1100px 620px at 8% -12%, rgba(47,111,240,.55) 0%, transparent 60%),
    radial-gradient(900px 560px at 108% 112%, rgba(106,63,224,.45) 0%, transparent 58%), var(--npnavy) !important; min-height: 100vh; }
body.task-login #layout, body.task-login #layout-content, body.task-login .layout-content { background: transparent !important; }
body.task-login #login-form { background: #fff; border-radius: 18px; padding: 34px 30px 26px; box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
    max-width: 410px; width: calc(100% - 32px); margin: 0 auto; }
body.task-login #logo { content: url(logo.svg); width: 72px; height: 72px; max-height: none; margin: 0 auto 10px; display: block;
    filter: drop-shadow(0 8px 18px rgba(47,111,240,.45)); }
body.task-login #login-form::before { content: "Webmail"; display: block; text-align: center; font-size: 1.35rem; font-weight: 600;
    color: #111827; margin: 0 0 18px; letter-spacing: .2px; }
body.task-login #login-form input.form-control, body.task-login #login-form .input-group-text { border-radius: 10px; min-height: 44px; }
body.task-login #login-form input.form-control:focus { border-color: var(--np1); box-shadow: 0 0 0 3px rgba(47,111,240,.18); }
body.task-login #login-form button.mainaction, body.task-login #login-form .btn-primary { width: 100%; min-height: 46px; border-radius: 10px; font-weight: 600; font-size: 1rem; }
body.task-login #login-footer, body.task-login #login-footer a, body.task-login .footer, body.task-login .copyright { color: rgba(255,255,255,.65) !important; }
body.task-login #message .alert, body.task-login .messagestack .alert { border-radius: 10px; }

/* main buttons and accents */
.btn-primary, .btn.btn-primary, .button.mainaction, button.mainaction, a.button.mainaction, .formbuttons .mainaction {
    background-image: linear-gradient(135deg, var(--np2), var(--np1)) !important; border-color: var(--np1) !important; color: #fff !important; }
.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover { filter: brightness(1.07); }
a, .link, .listing li a .count, .badge-primary { color: var(--np1); }
.form-control:focus, .custom-select:focus { border-color: var(--np1) !important; box-shadow: 0 0 0 .2rem rgba(47,111,240,.18) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--np1) !important; border-color: var(--np1) !important; }

/* left menu: navy with the logo of the panel */
#layout-menu { background: linear-gradient(180deg, #0f172a 0%, #111b33 100%) !important; }
#layout-menu #logo, #layout-menu img.logo { content: url(logo.svg); width: 44px; height: 44px; max-height: none; margin: 14px auto 10px; display: block; }
#layout-menu .menu a, #layout-menu .popover-header a { color: #cbd5e1 !important; border-radius: 10px; margin: 2px 6px; }
#layout-menu .menu a:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
#layout-menu .menu a.selected, #layout-menu .menu a.active { background: linear-gradient(135deg, rgba(40,170,222,.30), rgba(47,111,240,.30)) !important; color: #fff !important; }
#layout-menu .menu a.selected::before, #layout-menu .menu a.active::before { color: #fff !important; }

/* lists, headers, selection */
.header, .layout-header, #layout-sidebar > .header, #layout-list > .header, #layout-content > .header { border-bottom-color: rgba(47,111,240,.15); }
.listing li.selected, table.records-table tr.selected td, .listing li.selected > a, table.records-table tr.focused.selected td {
    background-color: rgba(47,111,240,.10) !important; }
table.messagelist tr.unread td.subject span.subject a, table.messagelist tr.unread .subject { color: #0f172a; }
.listing li.unread > a .unreadcount, #folderlist-content .unreadcount { background: var(--np1) !important; color: #fff !important; border-radius: 10px; }
.toolbar a.button:hover, .toolbar a.button.active { color: var(--np1) !important; }
.popover { border-radius: 12px; overflow: hidden; }

/* dark mode of Elastic */
html.dark-mode body.task-login #login-form { background: #161d2d; box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
html.dark-mode body.task-login #login-form::before { color: #e5e7eb; }
html.dark-mode table.messagelist tr.unread .subject, html.dark-mode table.messagelist tr.unread td.subject span.subject a { color: #f3f4f6; }
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a { background-color: rgba(47,111,240,.22) !important; }