@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Raleway:wght@400;500;600;700&display=swap");

/* ==========================================================================
   DPOM Mail. Extends Roundcube "elastic".

   STRUCTURE MATTERS. Elastic ships light AND dark. Anything setting a light
   TEXT colour or a dark GROUND must be scoped to html.dark-mode, or it lands
   white-on-white in light mode. Only red ACCENTS are global.
   ========================================================================== */

:root{
  --dpom-navy-deep:#0b0b1a; --dpom-navy:#0e0e1f; --dpom-navy-2:#1a1a2e; --dpom-band:#141a2e;
  --dpom-red:#e63946; --dpom-red-dark:#c22232; --dpom-red-glow:rgba(230,57,70,.45);
  --dpom-ink:#eef0f6; --dpom-muted:#9aa3b8;
}
body,input,select,textarea,button{font-family:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,h4,.username,.boxtitle{font-family:"Montserrat","Raleway",sans-serif;letter-spacing:-.01em}

/* ===== 1. LOGIN: always the dark space treatment. Self-contained screen. ===== */
body.task-login,body.task-login #layout,body.task-login #layout-content{
  background:
    radial-gradient(58% 42% at 82% 8%,rgba(56,110,255,.16) 0%,transparent 62%),
    radial-gradient(52% 44% at 12% 12%,rgba(168,60,190,.20) 0%,transparent 60%),
    radial-gradient(70% 55% at 50% 108%,rgba(230,57,70,.14) 0%,transparent 65%),
    linear-gradient(170deg,var(--dpom-navy) 0%,var(--dpom-navy-deep) 100%)!important;
  background-attachment:fixed}
body.task-login #layout-content::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.85) 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 76% 12%,rgba(255,255,255,.65) 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 33% 62%,rgba(255,255,255,.75) 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 88% 48%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 58% 82%,rgba(255,255,255,.60) 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 88%,rgba(255,255,255,.50) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 32%,rgba(255,255,255,.70) 50%,transparent 51%);
  background-size:520px 420px;opacity:.55}
body.task-login #login-form{position:relative;z-index:1;max-width:392px}
body.task-login #login-form .box-inner,body.task-login #login-form form{
  background:rgba(20,26,46,.72);border:1px solid rgba(255,255,255,.10);border-radius:20px;
  padding:30px 26px 26px;box-shadow:0 26px 70px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.task-login #login-form #logo{margin-bottom:22px;max-height:96px}
body.task-login #login-form input.form-control,
body.task-login #login-form input[type=text],
body.task-login #login-form input[type=password]{
  background:rgba(11,11,26,.62)!important;border:1px solid rgba(255,255,255,.14)!important;
  color:var(--dpom-ink)!important;border-radius:0 11px 11px 0!important;height:48px}
body.task-login #login-form input.form-control::placeholder{color:var(--dpom-muted)!important}
body.task-login #login-form input.form-control:focus{
  border-color:var(--dpom-red)!important;box-shadow:0 0 0 3px rgba(230,57,70,.22)!important;outline:none!important}
body.task-login #login-form .input-group-text{
  background:rgba(230,57,70,.16)!important;border:1px solid rgba(255,255,255,.14)!important;
  border-right:0!important;border-radius:11px 0 0 11px!important;color:var(--dpom-red)!important;
  min-width:52px;justify-content:center}
body.task-login #login-form button.btn-primary,body.task-login #rcmloginsubmit{
  background:linear-gradient(180deg,var(--dpom-red),var(--dpom-red-dark))!important;border:0!important;
  color:#fff!important;border-radius:999px!important;height:50px;font-family:"Montserrat",sans-serif;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 30px -10px var(--dpom-red-glow);transition:transform .25s,box-shadow .25s,filter .25s}
body.task-login #login-form button.btn-primary:hover,body.task-login #rcmloginsubmit:hover{
  transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 16px 40px -12px var(--dpom-red-glow)}
body.task-login .footer,body.task-login .product-name{color:var(--dpom-muted)}
body.task-login a{color:var(--dpom-red)}

/* ===== 2. ACCENTS: colour only, safe in BOTH modes ===== */
.btn-primary,a.btn-primary,button.btn-primary{
  background:var(--dpom-red)!important;border-color:var(--dpom-red)!important;color:#fff!important}
.btn-primary:hover,button.btn-primary:hover{
  background:var(--dpom-red-dark)!important;border-color:var(--dpom-red-dark)!important}
.btn-primary:focus,button.btn-primary:focus{box-shadow:0 0 0 3px rgba(230,57,70,.28)!important}
a{color:var(--dpom-red)}
a:hover{color:var(--dpom-red-dark)}
input.form-control:focus,select.form-control:focus,textarea.form-control:focus{
  border-color:var(--dpom-red)!important;box-shadow:0 0 0 2px rgba(230,57,70,.20)!important}
input[type=checkbox]:checked,input[type=radio]:checked{accent-color:var(--dpom-red)}
::selection{background:var(--dpom-red);color:#fff}
#taskmenu a{margin:0;border-radius:0;border:0;transition:background .18s,color .18s}
#taskmenu a.selected{background:rgba(230,57,70,.16)!important;box-shadow:inset 3px 0 0 var(--dpom-red);border:0!important}
#taskmenu a.selected:before{background:none}
#taskmenu a.compose{color:#fff!important;
  background:linear-gradient(180deg,var(--dpom-red),var(--dpom-red-dark))!important;
  box-shadow:0 8px 20px -12px var(--dpom-red-glow);border:0!important}
#taskmenu a.compose:hover{filter:brightness(1.08);color:#fff!important}
#taskmenu a.logout{color:var(--dpom-red)!important}
#taskmenu a.logout:hover{background:rgba(230,57,70,.12)!important}
#folderlist li.selected,#folderlist li.selected>a,.listing li.selected,.listing li.selected>a{
  background:linear-gradient(90deg,rgba(230,57,70,.20),rgba(230,57,70,.05))!important;
  box-shadow:inset 3px 0 0 var(--dpom-red)}
#messagelist tr.selected td,#messagelist tr.focused.selected td{background:rgba(230,57,70,.16)!important}
.unreadcount{background:var(--dpom-red);color:#fff;border-radius:999px}
.toolbar a.button:hover{color:var(--dpom-red)}
.popupmenu li a:hover{background:rgba(230,57,70,.12)}
.quota-widget .bar,.quota-text-bar .bar{background:var(--dpom-red)}
#messagestack div.notice,.ui-alert.notice{border-left:3px solid var(--dpom-red)!important}
#messagestack div.confirmation,.ui-alert.confirmation{border-left:3px solid #35c47a!important}
#messagestack div.error,.ui-alert.error{border-left:3px solid #ff5c68!important}
#messagestack div a,.ui-alert a{color:var(--dpom-red)!important}
*{scrollbar-color:rgba(230,57,70,.55) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(230,57,70,.45);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(230,57,70,.7)}
::-webkit-scrollbar-track{background:transparent}

/* ===== 3. DARK MODE ONLY: navy grounds + light text ===== */
html.dark-mode body,html.dark-mode #layout{background:var(--dpom-navy)}
html.dark-mode #layout-sidebar,html.dark-mode #layout-list{background:var(--dpom-navy-2)!important}
html.dark-mode #layout-content,html.dark-mode #messagecontframe{background:var(--dpom-navy)!important}
html.dark-mode #taskmenu{background:var(--dpom-navy-deep);border-right:1px solid rgba(255,255,255,.06)}
html.dark-mode #taskmenu a{color:var(--dpom-muted)}
html.dark-mode #taskmenu a:hover{color:#fff;background:rgba(255,255,255,.05)}
html.dark-mode #taskmenu a.selected{color:#fff!important}
html.dark-mode #layout-sidebar>.header,html.dark-mode #layout-list>.header,
html.dark-mode #layout-content>.header{background:var(--dpom-band);border-bottom:1px solid rgba(255,255,255,.07)}
html.dark-mode .toolbar{background:transparent!important;border:0!important}
html.dark-mode #folderlist li a,html.dark-mode .listing li a{color:var(--dpom-ink)}
html.dark-mode #folderlist li:hover>a,html.dark-mode .listing li:hover>a{background:rgba(255,255,255,.045)}
html.dark-mode #folderlist li.selected>a,html.dark-mode .listing li.selected>a{color:#fff!important}
html.dark-mode #messagelist thead th{background:var(--dpom-band);color:var(--dpom-muted)}
html.dark-mode #messagelist tr:hover td{background:rgba(255,255,255,.04)}
html.dark-mode #messagelist tr.unread td,html.dark-mode #messagelist tr.unread td a{font-weight:700;color:#fff}
html.dark-mode #messagelist tr.selected td{color:#fff!important}
html.dark-mode .footer,html.dark-mode .pagenav{background:var(--dpom-band);border-top:1px solid rgba(255,255,255,.07)}
html.dark-mode .popupmenu,html.dark-mode .ui-dialog,html.dark-mode .ui-dialog .ui-dialog-content{
  background:var(--dpom-navy-2);border:1px solid rgba(255,255,255,.10)}
html.dark-mode .ui-dialog .ui-dialog-titlebar{background:var(--dpom-band);border-bottom:1px solid rgba(255,255,255,.08)}
html.dark-mode #messagestack div,html.dark-mode .ui-alert{
  background:var(--dpom-band)!important;color:var(--dpom-ink)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.8)!important}
html.dark-mode .searchbar input{background:rgba(11,11,26,.5);color:var(--dpom-ink)}
html.dark-mode .searchbar input:focus{box-shadow:inset 0 -2px 0 var(--dpom-red)}

/* ===== 4. LIGHT MODE: leave elastic's light chrome alone. Only the rail is
   branded navy, because the red logo disc needs a dark ground to sit on. ===== */
html:not(.dark-mode) #taskmenu{background:var(--dpom-navy-deep)}
html:not(.dark-mode) #taskmenu a{color:rgba(255,255,255,.62)}
html:not(.dark-mode) #taskmenu a:hover{color:#fff;background:rgba(255,255,255,.08)}
html:not(.dark-mode) #taskmenu a.selected{color:#fff!important}
html:not(.dark-mode) #folderlist li a,html:not(.dark-mode) .listing li a{color:#20242e}
html:not(.dark-mode) #folderlist li.selected>a,html:not(.dark-mode) .listing li.selected>a{color:#8f1d27!important;font-weight:600}
html:not(.dark-mode) #messagelist tr.selected td{color:#8f1d27!important}