@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap');

/* =====================================================================
   DonutDashTech Mail — Roundcube Elastic custom skin
   Brand: pink #EC4899 · emerald #10B981 · white · ink #0E0E1A
   ===================================================================== */

/* ---------- LOGIN PAGE ---------- */
body.task-login,
#layout-login {
  background: #ffffff !important;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(236,72,153,0.12), transparent 70%),
    radial-gradient(ellipse 65% 45% at 100% 5%, rgba(52,211,153,0.13), transparent 70%),
    radial-gradient(ellipse 55% 40% at 0% 40%, rgba(244,114,182,0.08), transparent 70%) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Hide the default Roundcube cube logo (it's an <img id="logo">) */
#logo { display: none !important; }

/* Login container: stack logo + card from the top, no big gap.
   Scoped to body.task-login so it never touches the app interface. */
body.task-login #layout-content {
  display: block !important;
  padding-top: 4vh !important;
  text-align: center !important;
}

/* DonutDashTech Mail logo, injected above the form (LOGIN PAGE ONLY) */
body.task-login #layout-content::before {
  content: "";
  display: block;
  width: 280px;
  height: 175px;
  margin: 0 auto 14px;
  background: url('https://donutdashtech.com/donutdash-mail-logo.png') center/contain no-repeat;
}

/* Login card */
#login-form {
  border: 1px solid rgba(14,14,26,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 44px -14px rgba(236,72,153,0.20) !important;
  max-width: 400px !important;
  padding: 30px 34px !important;
  margin: 0 auto !important;
  position: static !important;
  background: #fff !important;
}

/* "Sign in" heading injected at top of the form */
#login-form::before {
  content: "Sign in to your mailbox";
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0E0E1A;
  margin-bottom: 20px;
}

/* Focus tint only — leave Elastic's input layout intact */
#login-form .form-control:focus {
  border-color: #EC4899 !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.18) !important;
}

/* Submit button */
#login-form #rcmloginsubmit,
#login-form button.btn-primary,
#login-form .btn.mainaction {
  background: #EC4899 !important;
  border-color: #EC4899 !important;
  color: #fff !important;
}
#login-form #rcmloginsubmit:hover,
#login-form button.btn-primary:hover {
  background: #DB2777 !important;
  border-color: #DB2777 !important;
}

/* ---------- APP INTERFACE (branded accents, post-login) ---------- */
a.compose, a.button.compose,
.mainaction, .btn.btn-primary, button.btn-primary {
  background-color: #EC4899 !important;
  border-color: #EC4899 !important;
  color: #fff !important;
}
a.compose:hover, .mainaction:hover,
.btn.btn-primary:hover, button.btn-primary:hover {
  background-color: #DB2777 !important;
  border-color: #DB2777 !important;
}
.messagelist tbody tr.selected,
.listing li.selected > a,
.listing tr.selected {
  background-color: rgba(236,72,153,0.12) !important;
  color: #0E0E1A !important;
}
.messagelist tr.unread td.subject a,
.unreadcount, span.unreadcount { color: #EC4899 !important; }
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-color: #EC4899 !important;
  box-shadow: 0 0 0 2px rgba(236,72,153,0.15) !important;
}