/* Pro Chat Desk Mail — indigo look on top of Elastic */
:root { --pcd: #4f46e5; --pcd-dark: #4338ca; --pcd-soft: #eef2ff; }

/* login page */
body.task-login { background: #f8fafc !important; }
body.task-login #layout-content { background: radial-gradient(900px 500px at 10% 0%, #e0e7ff 0%, transparent 60%), radial-gradient(800px 500px at 100% 100%, #ede9fe 0%, transparent 60%), #f8fafc !important; }
body.task-login #login-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 32px 28px 24px; box-shadow: 0 20px 50px -20px rgba(79,70,229,.25); max-width: 400px; }
body.task-login #logo { max-height: 64px !important; margin-bottom: 18px; }
body.task-login #login-form .formcontent input { border-radius: 10px; height: 44px; border-color: #cbd5e1; }
body.task-login #login-form .formcontent input:focus { border-color: var(--pcd) !important; box-shadow: 0 0 0 3px var(--pcd-soft) !important; }
body.task-login #rcmloginsubmit { background: var(--pcd) !important; border-color: var(--pcd) !important; border-radius: 10px; height: 44px; font-weight: 600; }
body.task-login #rcmloginsubmit:hover { background: var(--pcd-dark) !important; }
body.task-login #login-footer, body.task-login #login-footer a { color: #64748b !important; }

/* main colour (Elastic uses a light blue) */
.btn-primary, .button.mainaction, .formbuttons .mainaction, a.button.btn-primary, .popupmenu .selected { background-color: var(--pcd) !important; border-color: var(--pcd) !important; color: #fff !important; }
.btn-primary:hover, .button.mainaction:hover { background-color: var(--pcd-dark) !important; border-color: var(--pcd-dark) !important; }
a, a:visited, .listing li a.unread, .toolbar a.button:hover, #layout-menu a:hover { color: var(--pcd); }
.listing li.selected, .listing tr.selected td, table.records-table tr.selected td, .listing li.selected > a { background-color: var(--pcd-soft) !important; color: #1e1b4b !important; }
.listing li.focused, table.records-table tr.focused td { outline-color: var(--pcd) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--pcd) !important; border-color: var(--pcd) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--pcd) !important; box-shadow: 0 0 0 .2rem rgba(79,70,229,.2) !important; }
.badge.badge-info, .unreadcount, #layout-menu .unreadcount { background-color: var(--pcd) !important; }

/* no upstream names */
#settings-menu li.about, a.about, .menu a.about, #aboutlink, li.about { display: none !important; }

/* login stays light even when the browser/OS is in dark mode */
html.dark-mode body.task-login, html.dark-mode body.task-login #layout, html.dark-mode body.task-login #layout-content {
  background: radial-gradient(900px 500px at 10% 0%, #e0e7ff 0%, transparent 60%), radial-gradient(800px 500px at 100% 100%, #ede9fe 0%, transparent 60%), #f8fafc !important;
  color: #0f172a !important;
}
html.dark-mode body.task-login #login-form { background: #fff !important; border-color: #e2e8f0 !important; }
body.task-login img, body.task-login #logo, html.dark-mode #logo, html.dark-mode body.task-login img { filter: none !important; opacity: 1 !important; }
body.task-login #login-form .input-group { flex-wrap: nowrap; }
body.task-login #login-form .input-group-text, html.dark-mode body.task-login #login-form .input-group-text {
  background: #f1f5f9 !important; color: #64748b !important; border: 1px solid #cbd5e1 !important; border-right: 0 !important;
  border-radius: 10px 0 0 10px !important; width: 46px; justify-content: center;
}
body.task-login #login-form input.form-control, html.dark-mode body.task-login #login-form input.form-control {
  background: #fff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; border-radius: 0 10px 10px 0 !important; height: 46px; font-size: 15px;
}
body.task-login #login-form input.form-control::placeholder { color: #94a3b8 !important; }
body.task-login #login-form input.form-control:focus { border-color: var(--pcd) !important; box-shadow: 0 0 0 3px var(--pcd-soft) !important; }
body.task-login #login-form table td { padding: 5px 0 !important; }
body.task-login #rcmloginsubmit { margin-top: 8px; text-transform: none; letter-spacing: 0; font-size: 15px; }
html.dark-mode body.task-login #login-footer, html.dark-mode body.task-login #login-footer a { color: #64748b !important; }

/* notifications (login failed, saved, etc.) */
#messagestack { right: 20px !important; bottom: 20px !important; }
#messagestack div, html.dark-mode #messagestack div {
  background: #fff !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid var(--pcd) !important;
  border-radius: 12px !important; box-shadow: 0 12px 30px -10px rgba(15,23,42,.25) !important; padding: 12px 16px 12px 44px !important;
  font-size: 14px !important; min-width: 260px; opacity: 1 !important;
}
#messagestack div:before { color: var(--pcd) !important; }
#messagestack div.error, #messagestack div.warning { border-left-color: #dc2626 !important; }
#messagestack div.error:before, #messagestack div.warning:before { color: #dc2626 !important; }
#messagestack div.confirmation { border-left-color: #16a34a !important; }
#messagestack div.confirmation:before { color: #16a34a !important; }
#messagestack div.loading { border-left-color: var(--pcd) !important; }
html #messagestack div.warning, html #messagestack div.error, html.dark-mode #messagestack div.warning, html.dark-mode #messagestack div.error { border-left-color: #dc2626 !important; }
html #messagestack div.confirmation, html.dark-mode #messagestack div.confirmation { border-left-color: #16a34a !important; }
html #messagestack div i.icon, html #messagestack div i.icon:before { color: var(--pcd) !important; }
html #messagestack div.warning i.icon, html #messagestack div.warning i.icon:before, html #messagestack div.error i.icon, html #messagestack div.error i.icon:before { color: #dc2626 !important; }
html #messagestack div.confirmation i.icon, html #messagestack div.confirmation i.icon:before { color: #16a34a !important; }