/* DJSwiss Mail - Elastic skin override */

:root{
  --djs-accent-1: #3aa0ff;
  --djs-accent-2: #8b5cf6;
  --djs-bg-0: #0b1020;
  --djs-bg-1: #0f1730;
  --djs-card: rgba(255,255,255,0.06);
  --djs-border: rgba(255,255,255,0.12);
  --djs-text: rgba(255,255,255,0.92);
  --djs-muted: rgba(255,255,255,0.60);
}

/* Background + base */
html, body{
  background: radial-gradient(1200px 700px at 25% 10%, rgba(58,160,255,.22), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(139,92,246,.18), transparent 55%),
              linear-gradient(180deg, var(--djs-bg-0), var(--djs-bg-1)) !important;
  color: var(--djs-text) !important;
}

/* Links */
a{
  color: rgba(58,160,255,.95) !important;
}
a:hover{
  color: rgba(139,92,246,.95) !important;
}

/* Card feel */
.card, .box, .boxcontent, .popover, .menu, .dropdown-menu{
  background: var(--djs-card) !important;
  border-color: var(--djs-border) !important;
  backdrop-filter: blur(8px);
}

/* Login page */
body.task-login #layout,
body.task-login #login-form,
body.task-login #login-form .box{
  background: transparent !important;
}

body.task-login #login-form .box{
  border: 1px solid var(--djs-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Replace default logo (login + header) */
#logo,
#rcmlogo,
#login-logo,
#toplogo{
  background-image: url("../images/djswiss/logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

/* some installs use a span inside logo area; ensure it doesn't show text */
#logo span, #rcmlogo span, #login-logo span, #toplogo span{
  opacity: 0 !important;
}

/* Top header */
#topline, #topnav, .header, #layout > .header{
  background: rgba(0,0,0,.18) !important;
  border-bottom: 1px solid var(--djs-border) !important;
  backdrop-filter: blur(10px);
}

/* Buttons */
.btn, button, input[type="submit"], .btn-primary{
  border-radius: 12px !important;
}

.btn-primary, .button.mainaction{
  background: linear-gradient(90deg, var(--djs-accent-1), var(--djs-accent-2)) !important;
  border: 0 !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(58,160,255,.18);
}

.btn-primary:hover, .button.mainaction:hover{
  filter: brightness(1.05);
}

/* Inputs */
input, select, textarea{
  background: rgba(0,0,0,.20) !important;
  color: var(--djs-text) !important;
  border: 1px solid var(--djs-border) !important;
  border-radius: 12px !important;
}

input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(58,160,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(58,160,255,.18) !important;
}

/* Sidebar / list */
.listing thead th,
.listing tbody td,
#mailboxlist li a,
#folderlist li a{
  border-color: rgba(255,255,255,0.08) !important;
}

#mailboxlist li.selected > a,
#folderlist li.selected > a{
  background: linear-gradient(90deg, rgba(58,160,255,.18), rgba(139,92,246,.16)) !important;
  border-left: 3px solid rgba(58,160,255,.9) !important;
}

/* subtle separators */
hr, .separator{
  border-color: rgba(255,255,255,0.08) !important;
}

/* footer text */
#footer, .footer{
  color: var(--djs-muted) !important;
}