/* OnlyTranz brand layer for Roundcube Elastic.
   Palette: navy #0B0F24, cyan #43C6FF, violet #9B5BFF, pink #FF4FB8 */

/* ---------- Left app menu (sidebar) ---------- */
#layout-menu {
  background: linear-gradient(180deg, #0B0F24 0%, #141A33 55%, #1C1440 100%) !important;
  border-right: 1px solid #263056 !important;
}
#layout-menu .popover-header { background: #0B0F24 !important; }
#layout-menu #logo { max-height: 56px; width: auto; padding: 6px 0; }
#layout-menu .menu a,
#layout-menu .menu a:before,
#layout-menu .special-buttons a,
#layout-menu .special-buttons a:before { color: #C9CEE6 !important; }
#layout-menu .menu a:hover,
#layout-menu .menu a:focus,
#layout-menu .special-buttons a:hover { background: rgba(67,198,255,.10) !important; color: #FFFFFF !important; }
#layout-menu .menu a:hover:before { color: #43C6FF !important; }
#layout-menu .menu a.selected,
#layout-menu .menu a.selected:before {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, rgba(67,198,255,.28), rgba(255,79,184,.28)) !important;
}
#layout-menu .menu a.selected { box-shadow: inset 3px 0 0 #FF4FB8; }

/* ---------- Primary actions ---------- */
.btn-primary, .btn.btn-primary, a.btn-primary, button.mainaction, input.mainaction,
.formbuttons .mainaction, .compose.btn, a.compose {
  background: linear-gradient(135deg, #43C6FF 0%, #9B5BFF 50%, #FF4FB8 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  font-weight: 600;
}
.btn-primary:hover, button.mainaction:hover, .btn-primary:focus {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(155,91,255,.35) !important;
}
.btn-primary:disabled, button.mainaction:disabled { filter: grayscale(.4) opacity(.6); }

/* ---------- Links, focus, toggles ---------- */
a, .link, .listing li a:hover { color: #2A9FD6; }
a:hover { color: #FF4FB8; }
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus {
  border-color: #9B5BFF !important;
  box-shadow: 0 0 0 .2rem rgba(155,91,255,.22) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label:before,
input.form-check-input:checked { background-color: #9B5BFF !important; border-color: #9B5BFF !important; }

/* ---------- Folder list & lists ---------- */
.listing li.selected, .listing li.selected > a,
#folderlist-content li.selected > a, #settings-menu li.selected > a {
  background-color: rgba(155,91,255,.12) !important;
  color: #6B2FD6 !important;
}
.listing li.selected > a:before, #folderlist-content li.selected > a:before { color: #9B5BFF !important; }
#folderlist-content li.selected { box-shadow: inset 3px 0 0 #9B5BFF; }
.listing li .unreadcount, .listing li .count, .unreadcount {
  background: linear-gradient(135deg, #43C6FF, #FF4FB8) !important;
  color: #FFFFFF !important;
}
table.messagelist tr.selected td, table.records-table tr.selected td,
table.messagelist tr.focused td { background-color: rgba(67,198,255,.12) !important; }
table.messagelist tr.unread td.subject span.subject a,
table.messagelist tr.unread .subject a { color: #0B0F24 !important; }
table.messagelist tr.unread td:first-child { box-shadow: inset 3px 0 0 #FF4FB8; }
table.messagelist tr.flagged td, table.messagelist tr.flagged td a { color: #E0338F !important; }

/* ---------- Header / toolbar accents ---------- */
.header-title, .boxtitle { color: #0B0F24; }
.toolbar a.button:hover:before, .toolbar a.button:focus:before { color: #9B5BFF !important; }
.toolbar a.button.selected, .toolbar a.button.active { color: #9B5BFF !important; }
.progressbar .bar, .quota-widget .bar { background: linear-gradient(90deg, #43C6FF, #9B5BFF, #FF4FB8) !important; }

/* ---------- Login page ---------- */
body.task-login {
  background:
    radial-gradient(ellipse 60% 45% at 15% 10%, rgba(67,198,255,.18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 85% 90%, rgba(255,79,184,.18) 0%, transparent 70%),
    #0B0F24 !important;
}
body.task-login #layout-content { background: transparent !important; }
body.task-login #login-form {
  background: #141A33;
  border: 1px solid #263056;
  border-radius: 22px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(155,91,255,.08);
  max-width: 400px;
  margin-left: auto; margin-right: auto;
}
body.task-login #logo { max-height: 96px; width: auto; margin-bottom: 1rem; }
body.task-login #login-form .form-control {
  background: #0F1530 !important;
  border: 1px solid #263056 !important;
  color: #F2F4FF !important;
  border-radius: 12px;
  height: 46px;
}
body.task-login #login-form .form-control::placeholder { color: #8C93B5; }
body.task-login #login-form .input-group-text { background: #1C2342; border-color: #263056; color: #8C93B5; }
body.task-login #login-form button.mainaction { border-radius: 12px; height: 46px; font-size: 1rem; }
body.task-login #login-footer, body.task-login #login-footer a,
body.task-login .formcontainer .formbuttons, body.task-login label { color: #8C93B5 !important; }
body.task-login #message .alert, body.task-login #messagestack div { border-radius: 12px; }

/* ---------- Dark mode (Elastic's built-in toggle) ---------- */
html.dark-mode .listing li.selected > a, html.dark-mode #folderlist-content li.selected > a { color: #D9C5FF !important; }
html.dark-mode table.messagelist tr.unread .subject a { color: #FFFFFF !important; }
html.dark-mode .header-title, html.dark-mode .boxtitle { color: #F2F4FF; }
html.dark-mode a { color: #6FD3FF; }

@media (max-width: 480px) {
  body.task-login #login-form { padding: 1.5rem 1.15rem 1.25rem; border-radius: 18px; }
  body.task-login #logo { max-height: 76px; }
}