/* WRITE CUSTOM CSS HERE */



/* =========================
   PREMIUM SPLASH SCREEN
========================= */
#app-content {
  display: block;
}

#app-content.show {
  display: block;
}

#app-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(86, 141, 255, 0.18) 0%, transparent 32%),
    radial-gradient(circle at bottom right, rgba(22, 94, 255, 0.18) 0%, transparent 35%),
    linear-gradient(180deg, #f8faff 0%, #eef3fb 52%, #f5f8fd 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#app-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================
   BACKGROUND GRAPHICS
========================= */
.loader-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* floating glowing orbs */
.loader-bg .orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.9;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.loader-bg .orb-1 {
  width: 360px;
  height: 360px;
  top: -80px;
  left: -90px;
  background: radial-gradient(circle, rgba(120, 166, 255, 0.35) 0%, rgba(120, 166, 255, 0.08) 45%, transparent 72%);
  animation: floatOrb1 8s infinite;
}

.loader-bg .orb-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -110px;
  background: radial-gradient(circle, rgba(28, 98, 255, 0.30) 0%, rgba(28, 98, 255, 0.08) 48%, transparent 72%);
  animation: floatOrb2 10s infinite;
}

.loader-bg .orb-3 {
  width: 180px;
  height: 180px;
  top: 18%;
  right: 20%;
  background: radial-gradient(circle, rgba(93, 142, 255, 0.18) 0%, rgba(93, 142, 255, 0.05) 50%, transparent 75%);
  animation: pulseOrb 6s infinite;
}

/* animated abstract lines */
.loader-bg .line {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(75, 132, 255, 0.22) 50%, transparent 100%);
  filter: blur(0.5px);
  opacity: 0.75;
}

.loader-bg .line-1 {
  width: 460px;
  height: 2px;
  top: 28%;
  left: -120px;
  transform: rotate(18deg);
  animation: moveLine1 7s linear infinite;
}

.loader-bg .line-2 {
  width: 520px;
  height: 2px;
  bottom: 24%;
  right: -160px;
  transform: rotate(-22deg);
  animation: moveLine2 8s linear infinite;
}

/* =========================
   CENTER AREA
========================= */
.loader-inner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.42) 38%, rgba(255, 255, 255, 0.06) 72%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* glow ring */
.logo-wrap::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(86, 131, 255, 0.15);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 0 28px rgba(59, 110, 255, 0.10),
    0 0 55px rgba(59, 110, 255, 0.08);
  animation: ringPulse 2.8s ease-in-out infinite;
}

/* secondary aura */
.logo-wrap::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 110, 255, 0.12) 0%, rgba(54, 110, 255, 0.04) 42%, transparent 72%);
  filter: blur(18px);
  animation: auraPulse 3.2s ease-in-out infinite;
}

/* =========================
   LOGO
========================= */
#loader-logo {
  position: relative;
  z-index: 3;
  display: block;
  width: 150px;
  max-width: 62vw;
  height: auto;

  opacity: 0;
  transform: scale(0.82) translateY(10px);
  animation: logoReveal 1s cubic-bezier(.22, .8, .24, 1) forwards;

  user-select: none;
  -webkit-user-drag: none;

  /* background ko page ke saath blend karega */
  mix-blend-mode: multiply;

  /* contrast badhake V ko highlight karega */
  filter:
    brightness(1.15) contrast(1.25) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0 0 25px rgba(70, 110, 255, 0.25)) drop-shadow(0 0 45px rgba(70, 110, 255, 0.18));
}

#loader-logo {
  animation: logoReveal 1s cubic-bezier(.22, .8, .24, 1) forwards,
    vGlow 3s ease-in-out infinite;
}

@keyframes vGlow {

  0%,
  100% {
    filter:
      drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0 0 18px rgba(80, 120, 255, 0.30)) drop-shadow(0 0 35px rgba(80, 120, 255, 0.20));
  }

  50% {
    filter:
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.14)) drop-shadow(0 0 30px rgba(80, 120, 255, 0.45)) drop-shadow(0 0 60px rgba(80, 120, 255, 0.30));
  }
}

/* =========================
   ANIMATIONS
========================= */
@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(10px);
    filter:
      drop-shadow(0 8px 14px rgba(34, 94, 255, 0.08)) drop-shadow(0 0 6px rgba(64, 120, 255, 0.08));
  }

  55% {
    opacity: 1;
    transform: scale(1.03) translateY(0);
    filter:
      drop-shadow(0 20px 34px rgba(34, 94, 255, 0.20)) drop-shadow(0 0 24px rgba(64, 120, 255, 0.18));
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08)) drop-shadow(0 0 18px rgba(80, 120, 255, 0.20)) drop-shadow(0 0 30px rgba(80, 120, 255, 0.15));
  }
}

@keyframes ringPulse {

  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes auraPulse {

  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes floatOrb1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(28px, 34px);
  }
}

@keyframes floatOrb2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-32px, -24px);
  }
}

@keyframes pulseOrb {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes moveLine1 {
  0% {
    transform: translateX(0) rotate(18deg);
    opacity: 0.35;
  }

  50% {
    transform: translateX(90px) rotate(18deg);
    opacity: 0.8;
  }

  100% {
    transform: translateX(0) rotate(18deg);
    opacity: 0.35;
  }
}

@keyframes moveLine2 {
  0% {
    transform: translateX(0) rotate(-22deg);
    opacity: 0.30;
  }

  50% {
    transform: translateX(-85px) rotate(-22deg);
    opacity: 0.75;
  }

  100% {
    transform: translateX(0) rotate(-22deg);
    opacity: 0.30;
  }
}

/* =========================
   RESPONSIVE
========================= */

/* mobile */
@media (max-width: 767px) {
  .logo-wrap {
    width: 170px;
    height: 170px;
  }

  #loader-logo {
    width: 105px;
    max-width: 58vw;
  }

  .loader-bg .orb-1 {
    width: 220px;
    height: 220px;
    top: -50px;
    left: -60px;
  }

  .loader-bg .orb-2 {
    width: 260px;
    height: 260px;
    right: -70px;
    bottom: -70px;
  }

  .loader-bg .orb-3 {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 12%;
  }

  .loader-bg .line-1 {
    width: 260px;
    top: 24%;
  }

  .loader-bg .line-2 {
    width: 280px;
    bottom: 22%;
  }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .logo-wrap {
    width: 210px;
    height: 210px;
  }

  #loader-logo {
    width: 130px;
    max-width: 34vw;
  }
}

/* desktop */
@media (min-width: 1024px) {
  .logo-wrap {
    width: 250px;
    height: 250px;
  }

  #loader-logo {
    width: 160px;
    max-width: 18vw;
  }
}

/* very large desktop */
@media (min-width: 1440px) {
  .logo-wrap {
    width: 280px;
    height: 280px;
  }

  #loader-logo {
    width: 180px;
  }
}


/* =========================
   DARK MODE - PREMIUM SPLASH SCREEN
========================= */

.dark-mode #app-loader,
body.dark-mode #app-loader {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12) 0%, transparent 30%),
    radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.14) 0%, transparent 34%),
    linear-gradient(180deg, #020617 0%, #0f172a 52%, #111827 100%) !important;
}

/* =========================
   BACKGROUND GRAPHICS
========================= */

.dark-mode .loader-bg .orb-1,
body.dark-mode .loader-bg .orb-1 {
  background: radial-gradient(circle,
      rgba(96, 165, 250, 0.20) 0%,
      rgba(96, 165, 250, 0.06) 45%,
      transparent 72%) !important;
}

.dark-mode .loader-bg .orb-2,
body.dark-mode .loader-bg .orb-2 {
  background: radial-gradient(circle,
      rgba(37, 99, 235, 0.22) 0%,
      rgba(37, 99, 235, 0.06) 48%,
      transparent 72%) !important;
}

.dark-mode .loader-bg .orb-3,
body.dark-mode .loader-bg .orb-3 {
  background: radial-gradient(circle,
      rgba(147, 197, 253, 0.12) 0%,
      rgba(147, 197, 253, 0.04) 50%,
      transparent 75%) !important;
}

.dark-mode .loader-bg .line,
body.dark-mode .loader-bg .line {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(96, 165, 250, 0.18) 50%,
      transparent 100%) !important;
  opacity: 0.6 !important;
}

/* =========================
   CENTER AREA
========================= */

.dark-mode .logo-wrap,
body.dark-mode .logo-wrap {
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 38%,
      rgba(255, 255, 255, 0.01) 72%,
      transparent 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.dark-mode .logo-wrap::before,
body.dark-mode .logo-wrap::before {
  border: 1px solid rgba(96, 165, 250, 0.16) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 28px rgba(59, 130, 246, 0.12),
    0 0 55px rgba(59, 130, 246, 0.08) !important;
}

.dark-mode .logo-wrap::after,
body.dark-mode .logo-wrap::after {
  background: radial-gradient(circle,
      rgba(59, 130, 246, 0.16) 0%,
      rgba(59, 130, 246, 0.05) 42%,
      transparent 72%) !important;
  filter: blur(20px) !important;
}

/* =========================
   LOGO
========================= */

.dark-mode #loader-logo,
body.dark-mode #loader-logo {
  mix-blend-mode: normal !important;
  filter:
    brightness(1.05) contrast(1.15) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 24px rgba(96, 165, 250, 0.28)) drop-shadow(0 0 45px rgba(59, 130, 246, 0.18)) !important;
}

/* optional: stronger animated glow in dark */
@keyframes vGlowDark {

  0%,
  100% {
    filter:
      drop-shadow(0 10px 18px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 18px rgba(96, 165, 250, 0.28)) drop-shadow(0 0 35px rgba(59, 130, 246, 0.18));
  }

  50% {
    filter:
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.36)) drop-shadow(0 0 30px rgba(96, 165, 250, 0.42)) drop-shadow(0 0 60px rgba(59, 130, 246, 0.28));
  }
}

.dark-mode #loader-logo,
body.dark-mode #loader-logo {
  animation:
    logoReveal 1s cubic-bezier(.22, .8, .24, 1) forwards,
    vGlowDark 3s ease-in-out infinite !important;
}




/* =========================================================
   LOGIN PIXEL PATCH (Screenshot EXACT)
   Paste at END of main.css
========================================================= */

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

body.task-login,
body.task-error {
  background: #fff !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  color: #111 !important;
}

/* remove roundcube default wrappers */
body.task-login #layout,
body.task-error #layout {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* remove default h1 */
body.task-login h1.voice,
body.task-error h1.voice {
  display: none !important;
}

.input-group-text {
  display: none !important;
}

/* full screen */
.main-wrapper {
  height: 100vh !important;
  background: #fff !important;
}

/* LEFT IMAGE */
.left-section {
  /* position:relative; */
  height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fff !important;
}

.left-section img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0px 421px 26px 0px !important;
}

/* BIG WHITE CIRCLE CUT (exact) */
.left-section::after {
  content: "" !important;
  position: absolute !important;
  right: -515px !important;
  top: -80px !important;
  width: 1100px !important;
  height: 1100px !important;
  /* background: #fff !important; */
  border-radius: 50% !important;
}

/* RIGHT SIDE */
.right-section {
  height: 100vh !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* exact form block position */
.right-inner {
      padding: 28px !important;
  width: 560px !important;
  transform: translate(-10px, -18px) !important;
}

/* brand block */
.brand {
  margin-bottom: 18px !important;
}

.brand small {
  display: block !important;
  margin-top: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7b8794 !important;
  letter-spacing: .2px !important;
}

/* Titles EXACT */
.welcome-title {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 10px 0 8px 0 !important;
  letter-spacing: -0.6px !important;
}

.subtitle {
  font-size: 14px !important;
  color: #7b8794 !important;
  font-weight: 600 !important;
  margin: 0 0 28px 0 !important;
}

/* reset layout-content */
#layout-content {
  background: #fff !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================
   Roundcube loginform TABLE -> stacked
========================================== */
#login-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force table to block */
#login-form table,
#login-form tbody,
#login-form tr,
#login-form td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* label EXACT */
#login-form label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 16px 0 8px 0 !important;
}

/* input EXACT */
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
  width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  border: 1px solid #cfcfcf !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* placeholder EXACT */
#login-form input::placeholder {
  color: #020d73 !important;
  font-weight: 500 !important;
}

/* focus EXACT */
#login-form input:focus {
  border-color: #78a0ff !important;
  box-shadow: 0 0 0 2px rgba(120, 160, 255, .18) !important;
}

/* remember row EXACT (Roundcube differs; force alignment) */
#login-form input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 14px 8px 0 0 !important;
  vertical-align: middle !important;
}

#login-form input[type="checkbox"]+label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 14px 0 0 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111 !important;
}

/* submit button EXACT */
/* BUTTON */
#login-form button[type="submit"] {
  width: 100% !important;
  height: 46px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: linear-gradient(90deg, #4F79D8, #6A8FE8) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(79, 121, 216, 0.35) !important;
  transition: .3s !important;
  margin-top: 18px !important;
  cursor: pointer !important;
}

/* Hover */
#login-form button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(79, 121, 216, 0.45) !important;
}

/* Remove default browser style */
#login-form button[type="submit"]:focus {
  outline: none !important;
}

/* footer */
#login-footer {
  margin-top: 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7b8794 !important;
}

#login-footer a {
  color: #2f62d9 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#login-footer a:hover {
  text-decoration: underline !important;
}

/* mobile */
@media (max-width: 992px) {
  .left-section {
    display: none !important;
  }

  .right-inner {
    width: min(560px, 92vw) !important;
    transform: none !important;
  }

  body.task-login,
  body.task-error {
    overflow: auto !important;
  }
}


#layout-content-login .input-group-append,
.input-group-prepend {
  /* display: -ms-flexbox; */
  display: none !important;
}


.support-btn {
  display: inline-block !important;
  padding: 10px 4px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease;

  background: linear-gradient(90deg, #4e73df, #224abe) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.support-btn:hover {
  background: linear-gradient(90deg, #224abe, #1b3c9e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transform: translateY(-2px) !important;
  text-decoration: underline !important;
}




/* =========================================================
   LOGIN DARK MODE PATCH
========================================================= */

body.dark-mode.task-login,
body.dark-mode.task-error,
.dark-mode body.task-login,
.dark-mode body.task-error {
  background: #0b1220 !important;
  color: #e5e7eb !important;
}

/* wrappers */
body.dark-mode.task-login #layout,
body.dark-mode.task-error #layout,
.dark-mode body.task-login #layout,
.dark-mode body.task-error #layout {
  background: transparent !important;
}

/* main */
body.dark-mode.task-login .main-wrapper,
body.dark-mode.task-error .main-wrapper,
.dark-mode body.task-login .main-wrapper,
.dark-mode body.task-error .main-wrapper {
  background: #0b1220 !important;
}

/* left image side */
body.dark-mode.task-login .left-section,
body.dark-mode.task-error .left-section,
.dark-mode body.task-login .left-section,
.dark-mode body.task-error .left-section {
  background: #0b1220 !important;
}

body.dark-mode.task-login .left-section img,
body.dark-mode.task-error .left-section img,
.dark-mode body.task-login .left-section img,
.dark-mode body.task-error .left-section img {
  filter: brightness(0.82) contrast(1.05) !important;
}

/* right side */
body.dark-mode.task-login .right-section,
body.dark-mode.task-error .right-section,
.dark-mode body.task-login .right-section,
.dark-mode body.task-error .right-section {
  background: #0b1220 !important;
}

/* inner area */
body.dark-mode.task-login .right-inner,
body.dark-mode.task-error .right-inner,
.dark-mode body.task-login .right-inner,
.dark-mode body.task-error .right-inner {
  background: transparent !important;
}

/* brand */
body.dark-mode.task-login .brand small,
body.dark-mode.task-error .brand small,
.dark-mode body.task-login .brand small,
.dark-mode body.task-error .brand small {
  color: #94a3b8 !important;
}

body.dark-mode.task-login .welcome-title,
body.dark-mode.task-error .welcome-title,
.dark-mode body.task-login .welcome-title,
.dark-mode body.task-error .welcome-title {
  color: #f8fafc !important;
}

body.dark-mode.task-login .subtitle,
body.dark-mode.task-error .subtitle,
.dark-mode body.task-login .subtitle,
.dark-mode body.task-error .subtitle {
  color: #94a3b8 !important;
}

/* layout content */
body.dark-mode.task-login #layout-content,
body.dark-mode.task-error #layout-content,
.dark-mode body.task-login #layout-content,
.dark-mode body.task-error #layout-content {
  background: transparent !important;
}

/* labels */
body.dark-mode.task-login #login-form label,
body.dark-mode.task-error #login-form label,
.dark-mode body.task-login #login-form label,
.dark-mode body.task-error #login-form label {
  color: #e5e7eb !important;
}

/* inputs */
body.dark-mode.task-login #login-form input[type="text"],
body.dark-mode.task-login #login-form input[type="email"],
body.dark-mode.task-login #login-form input[type="password"],
body.dark-mode.task-error #login-form input[type="text"],
body.dark-mode.task-error #login-form input[type="email"],
body.dark-mode.task-error #login-form input[type="password"],
.dark-mode body.task-login #login-form input[type="text"],
.dark-mode body.task-login #login-form input[type="email"],
.dark-mode body.task-login #login-form input[type="password"],
.dark-mode body.task-error #login-form input[type="text"],
.dark-mode body.task-error #login-form input[type="email"],
.dark-mode body.task-error #login-form input[type="password"] {
  background: #111827 !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

/* placeholder */
body.dark-mode.task-login #login-form input::placeholder,
body.dark-mode.task-error #login-form input::placeholder,
.dark-mode body.task-login #login-form input::placeholder,
.dark-mode body.task-error #login-form input::placeholder {
  color: #94a3b8 !important;
}

/* focus */
body.dark-mode.task-login #login-form input:focus,
body.dark-mode.task-error #login-form input:focus,
.dark-mode body.task-login #login-form input:focus,
.dark-mode body.task-error #login-form input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18) !important;
}

/* checkbox */
body.dark-mode.task-login #login-form input[type="checkbox"],
body.dark-mode.task-error #login-form input[type="checkbox"],
.dark-mode body.task-login #login-form input[type="checkbox"],
.dark-mode body.task-error #login-form input[type="checkbox"] {
  accent-color: #4f79d8 !important;
}

body.dark-mode.task-login #login-form input[type="checkbox"]+label,
body.dark-mode.task-error #login-form input[type="checkbox"]+label,
.dark-mode body.task-login #login-form input[type="checkbox"]+label,
.dark-mode body.task-error #login-form input[type="checkbox"]+label {
  color: #cbd5e1 !important;
}

/* submit button */
body.dark-mode.task-login #login-form button[type="submit"],
body.dark-mode.task-error #login-form button[type="submit"],
.dark-mode body.task-login #login-form button[type="submit"],
.dark-mode body.task-error #login-form button[type="submit"] {
  background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}

body.dark-mode.task-login #login-form button[type="submit"]:hover,
body.dark-mode.task-error #login-form button[type="submit"]:hover,
.dark-mode body.task-login #login-form button[type="submit"]:hover,
.dark-mode body.task-error #login-form button[type="submit"]:hover {
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.42) !important;
}

/* footer */
body.dark-mode.task-login #login-footer,
body.dark-mode.task-error #login-footer,
.dark-mode body.task-login #login-footer,
.dark-mode body.task-error #login-footer {
  color: #94a3b8 !important;
}

body.dark-mode.task-login #login-footer a,
body.dark-mode.task-error #login-footer a,
.dark-mode body.task-login #login-footer a,
.dark-mode body.task-error #login-footer a {
  color: #60a5fa !important;
}

/* support button */
body.dark-mode.task-login .support-btn,
body.dark-mode.task-error .support-btn,
.dark-mode body.task-login .support-btn,
.dark-mode body.task-error .support-btn {
  background: linear-gradient(90deg, #60a5fa, #2563eb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.dark-mode.task-login .support-btn:hover,
body.dark-mode.task-error .support-btn:hover,
.dark-mode body.task-login .support-btn:hover,
.dark-mode body.task-error .support-btn:hover {
  background: linear-gradient(90deg, #93c5fd, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* optional glass card look on desktop */
@media (min-width: 993px) {

  body.dark-mode.task-login .right-inner,
  body.dark-mode.task-error .right-inner,
  .dark-mode body.task-login .right-inner,
  .dark-mode body.task-error .right-inner {
    padding: 28px !important;
    border-radius: 24px !important;
    /* background: rgba(15, 23, 42, 0.72) !important; */
    /* border: 1px solid rgba(148, 163, 184, 0.12) !important; */
    /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important; */
    /* backdrop-filter: blur(10px) !important; */
  }
}






/* =====================================================================
   MAILV PIXEL PACK v3 (Roundcube Elastic DOM) — NO RENAMES
   Targets: #layout-menu / #layout-sidebar / #layout-list / #layout-content
   NOTE: Add at END of styles.min.css
===================================================================== */

:root {
  --mv-bg: #f4f7ff;
  --mv-card: #ffffff;
  --mv-soft: #f7f9ff;
  --mv-border: #e6efff;
  --mv-border2: #e9eefc;
  --mv-primary: #2f6bff;
  --mv-primary-2: #2563eb;
  --mv-text: #0f172a;
  --mv-muted: #6b7280;
  --mv-muted2: #94a3b8;
  --mv-radius: 18px;
  --mv-radius-sm: 14px;
  --mv-shadow: 0 8px 22px rgba(15, 23, 42, .06);


  --topbar: #2c2c2c;
  --text: #111;
  --muted-log: #082e716e;
  --border: #cfcfcf;
  --link: #2f62d9;
  --btn: #78a0ff;
  --panel: #fff;

  --bg: #f5f7fb;
  --muted: #7b8794;
  --muted2: #a3afc2;
  --line: #e6ebf2;
  --line2: #edf2f9;
  --blue: #2f6bff;
  --blue-2: #3b82f6;
  --blueSoft: #eaf2ff;
  --chip: #eef2ff;
  --shadow: 0 10px 30px rgba(17, 24, 39, .06);
  --radius: 18px;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;

  --rail: 76px;
  --side: 290px;
  --list: 410px;
  --top: 72px;


  --leftCal: 360px;
  /* left calendar panel width like screenshot */
  --timeCol: 86px;
  /* time column width */
  --rowH: 58px;
  /* hour row height */

  --leftNav: 360px;
  /* screenshot like */
}


/* .menu.toolbar li {
    display: inline-block;
    height: 35px !important;
} */
body.task-mail #layout-content .iframe-wrapper {
  /* padding: 14px !important;
    background: var(--mv-bg) !important; */
  /* flex: 1 1 auto !important; */
}


#message-header>.header img.contactphoto {

  background: #ffff !important;
}

#message-header>.subject {
  font-size: 2rem !important;
  font-weight: 900 !important;
  border-bottom: 2px dashed #1535bd59 !important;
  padding: 2px 0 4px 0 !important;
  margin-bottom: 8px !important;
}

/* a {
    color: #042771 !important;
} */
#message-header>.subject a.extwin:before {

  color: #0653f7 !important;
}

/* .menu.toolbar .dropbutton a.dropdown:before {
    line-height: 24px !important;
    font-size: 24px;
} */















/* body.task-mail #messagecontframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06) !important;
} */

/* bottom nav */
/* body.task-mail #layout-content .footer.menu.toolbar {
    border-top: 1px solid var(--mv-border2) !important;
    padding: 12px 14px !important;
} */














#taskmenu {
  margin: 10px 10px 0px 10px !important;
  transition: background-color .18s ease, color .18s ease !important;
}


/* =========================================================
   ROUNDcube TOAST / TOASTER UI (ULTRA OVERRIDE + ICON FIX)
   loader: black | success: green | error: red | warning: yellow | info/other: blue
========================================================= */

/* ---- Container ---- */
body #messagestack {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 999999 !important;
  width: 360px !important;
  max-width: calc(100vw - 36px) !important;
  max-height: calc(100vh - 36px) !important;
  overflow: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mobile bottom */
@media (max-width:480px) {
  body #messagestack {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* ---- Base toast card (layout only) ---- */
body #messagestack .ui.alert,
body #messagestack .ui.message,
body #messagestack .alert,
body #messagestack .message,
body #messagestack>div {
  position: relative !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  /* ✅ icon space */
  /* padding-left: 44px !important; */
  padding: 12px 14px 12px 44px !important;
  margin: 0 0 12px 0 !important;
  font-size: xx-large !important;

  border-radius: 14px !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-left-width: 6px !important;

  background-image: none !important;
  filter: none !important;
  outline: none !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;


  animation: rcToastIn .25s ease-out both !important;
}

/* Mobile card full width */
@media (max-width:480px) {

  body #messagestack .ui.alert,
  body #messagestack .ui.message,
  body #messagestack .alert,
  body #messagestack .message,
  body #messagestack>div {
    border-radius: 0 !important;
    margin: 0 !important;
    border-left-width: 0 !important;
    border-top-width: 1px !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .30) !important;
  }
}

/* ---- Text ---- */
body #messagestack .ui.alert span,
body #messagestack .ui.message span,
body #messagestack .alert span,
body #messagestack .message span,
body #messagestack>div span {
  flex: 1 1 auto !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  opacity: .96 !important;
  color: inherit !important;
}

/* Links */
body #messagestack a {
  color: inherit !important;
  text-decoration: underline !important;
}

/* =========================================================
   ✅ ICON INJECT (WORKS EVEN IF <i> NOT EXISTS)
========================================================= */



/* Default icon box */
body #messagestack .ui.alert::before,
body #messagestack .ui.message::before,
body #messagestack .alert::before,
body #messagestack .message::before,
body #messagestack>div::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;

  width: 18px !important;
  height: 18px !important;

  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* If your skin already has <i class="icon">, hide it to avoid double icon */
body #messagestack i.icon {
  display: none !important;
}

/* =========================================================
   VARIANTS (PROPER COLORS + ICONS)
========================================================= */

/* INFO / OTHER (BLUE) */
body #messagestack .alert-info,
body #messagestack .information,
body #messagestack .notice,
body #messagestack .ui.message.info,
body #messagestack .ui.message.information {
  background-color: rgba(37, 99, 235, .18) !important;
  border-color: rgba(37, 99, 235, .32) !important;
  border-left-color: #2563EB !important;
  /* BLUE */
  color: #021636 !important;
}

body #messagestack .alert-info::before,
body #messagestack .information::before,
body #messagestack .notice::before,
body #messagestack .ui.message.info::before,
body #messagestack .ui.message.information::before {
  background-image: url('../images/info.svg') !important;
  /* info-circle */
  color: #2563EB !important;
}

/* SUCCESS (GREEN) */
body #messagestack .alert-success,
body #messagestack .success,
body #messagestack .confirmation,
body #messagestack .ui.message.success {
  background-color: rgba(22, 163, 74, .18) !important;
  border-color: rgba(22, 163, 74, .32) !important;
  border-left-color: #16A34A !important;
  /* GREEN */
  color: #002710 !important;
}

body #messagestack .alert-success::before,
body #messagestack .success::before,
body #messagestack .confirmation::before,
body #messagestack .ui.message.success::before {
  background-image: url('../images/success.svg') !important;
  /* check-circle */
  color: #16A34A !important;
}

/* WARNING (YELLOW) */
body #messagestack .alert-warning,
body #messagestack .warning,
body #messagestack .ui.message.warning {
  background-color: rgba(234, 179, 8, .22) !important;
  border-color: rgba(234, 179, 8, .38) !important;
  border-left-color: #EAB308 !important;
  /* YELLOW */
  color: #1a1a1a !important;
  /* readable on yellow glass */
}

body #messagestack .alert-warning::before,
body #messagestack .warning::before,
body #messagestack .ui.message.warning::before {
  background-image: url('../images/warning.svg') !important;
  /* exclamation-triangle (FA) */
  color: #0d0d0c !important;
}

/* ERROR / DANGER (RED) */
body #messagestack .alert-danger,
body #messagestack .error,
body #messagestack .errorbox,
body #messagestack .ui.message.error {
  background-color: rgba(220, 38, 38, .20) !important;
  border-color: rgba(220, 38, 38, .34) !important;
  border-left-color: #DC2626 !important;
  /* RED */
  color: #760000 !important;
}

body #messagestack .alert-danger::before,
body #messagestack .error::before,
body #messagestack .errorbox::before,
body #messagestack .ui.message.error::before {
  background-image: url('../images/error.svg') !important;
  /* exclamation-circle */
  color: #760000 !important;
}


/* LOADING (BLACK BACKGROUND + WHITE SPINNER) */
body #messagestack .loading,
body #messagestack .alert-loading,
body #messagestack .ui.message.loading {
  background-color: #00000069 !important;
  /* PURE BLACK */
  border-color: #000000 !important;
  border-left-color: #000000 !important;
  color: #ffffff !important;
  /* white text */
}

/* White Spinner */
body #messagestack .loading::before,
body #messagestack .alert-loading::before,
body #messagestack .ui.message.loading::before {
  background-image: url('../images/loader.svg') !important;
  /* FontAwesome spinner */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;

  color: #ffffff !important;
  /* WHITE SPINNER */
  animation: rcSpin 1s linear infinite !important;
  display: inline-block !important;
}

/* Smooth Spin */
@keyframes rcSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* ===============================
   WARNING ALERT STYLE
================================= */
#remote-objects-message {
  /* width: 50%; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui.alert.boxwarning {
  /* background-color: rgb(240 183 11 / 20%); */
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 8px 15px rgb(255 192 0 / 20%);
  border: 1px solid rgba(240, 183, 11, 0.35);
  margin: 20px 0 20px;
}






/* =========================================================
   DARK MODE - ROUNDcube TOAST / TOASTER UI
========================================================= */

/* ---- Container ---- */
body.dark-mode #messagestack,
.dark-mode body #messagestack {
  background: transparent !important;
}

/* ---- Base toast card ---- */
body.dark-mode #messagestack .ui.alert,
body.dark-mode #messagestack .ui.message,
body.dark-mode #messagestack .alert,
body.dark-mode #messagestack .message,
body.dark-mode #messagestack>div,
.dark-mode body #messagestack .ui.alert,
.dark-mode body #messagestack .ui.message,
.dark-mode body #messagestack .alert,
.dark-mode body #messagestack .message,
.dark-mode body #messagestack>div {
  color: #e5e7eb !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ---- Text ---- */
body.dark-mode #messagestack .ui.alert span,
body.dark-mode #messagestack .ui.message span,
body.dark-mode #messagestack .alert span,
body.dark-mode #messagestack .message span,
body.dark-mode #messagestack>div span,
.dark-mode body #messagestack .ui.alert span,
.dark-mode body #messagestack .ui.message span,
.dark-mode body #messagestack .alert span,
.dark-mode body #messagestack .message span,
.dark-mode body #messagestack>div span {
  color: inherit !important;
}

/* links */
body.dark-mode #messagestack a,
.dark-mode body #messagestack a {
  color: inherit !important;
}

/* =========================================================
   VARIANTS - DARK MODE
========================================================= */

/* INFO / OTHER */
body.dark-mode #messagestack .alert-info,
body.dark-mode #messagestack .information,
body.dark-mode #messagestack .notice,
body.dark-mode #messagestack .ui.message.info,
body.dark-mode #messagestack .ui.message.information,
.dark-mode body #messagestack .alert-info,
.dark-mode body #messagestack .information,
.dark-mode body #messagestack .notice,
.dark-mode body #messagestack .ui.message.info,
.dark-mode body #messagestack .ui.message.information {
  background-color: rgba(37, 99, 235, 0.16) !important;
  border-color: rgba(96, 165, 250, 0.24) !important;
  border-left-color: #60a5fa !important;
  color: #dbeafe !important;
}

/* SUCCESS */
body.dark-mode #messagestack .alert-success,
body.dark-mode #messagestack .success,
body.dark-mode #messagestack .confirmation,
body.dark-mode #messagestack .ui.message.success,
.dark-mode body #messagestack .alert-success,
.dark-mode body #messagestack .success,
.dark-mode body #messagestack .confirmation,
.dark-mode body #messagestack .ui.message.success {
  background-color: rgba(22, 163, 74, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.24) !important;
  border-left-color: #4ade80 !important;
  color: #dcfce7 !important;
}

/* WARNING */
body.dark-mode #messagestack .alert-warning,
body.dark-mode #messagestack .warning,
body.dark-mode #messagestack .ui.message.warning,
.dark-mode body #messagestack .alert-warning,
.dark-mode body #messagestack .warning,
.dark-mode body #messagestack .ui.message.warning {
  background-color: rgba(234, 179, 8, 0.16) !important;
  border-color: rgba(250, 204, 21, 0.26) !important;
  border-left-color: #facc15 !important;
  color: #fef3c7 !important;
}

/* ERROR / DANGER */
body.dark-mode #messagestack .alert-danger,
body.dark-mode #messagestack .error,
body.dark-mode #messagestack .errorbox,
body.dark-mode #messagestack .ui.message.error,
.dark-mode body #messagestack .alert-danger,
.dark-mode body #messagestack .error,
.dark-mode body #messagestack .errorbox,
.dark-mode body #messagestack .ui.message.error {
  background-color: rgba(220, 38, 38, 0.16) !important;
  border-color: rgba(248, 113, 113, 0.24) !important;
  border-left-color: #f87171 !important;
  color: #fee2e2 !important;
}

/* LOADING */
body.dark-mode #messagestack .loading,
body.dark-mode #messagestack .alert-loading,
body.dark-mode #messagestack .ui.message.loading,
.dark-mode body #messagestack .loading,
.dark-mode body #messagestack .alert-loading,
.dark-mode body #messagestack .ui.message.loading {
  background-color: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  border-left-color: #0f172a !important;
  color: #ffffff !important;
}

/* =========================================================
   REMOTE OBJECTS WARNING
========================================================= */
body.dark-mode .ui.alert.boxwarning,
.dark-mode body .ui.alert.boxwarning {
  background-color: rgba(234, 179, 8, 0.12) !important;
  border: 1px solid rgba(250, 204, 21, 0.22) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26) !important;
  color: #fef3c7 !important;
}

/* optional stronger glass look */
body.dark-mode #messagestack .ui.alert,
body.dark-mode #messagestack .ui.message,
body.dark-mode #messagestack .alert,
body.dark-mode #messagestack .message,
body.dark-mode #messagestack>div,
.dark-mode body #messagestack .ui.alert,
.dark-mode body #messagestack .ui.message,
.dark-mode body #messagestack .alert,
.dark-mode body #messagestack .message,
.dark-mode body #messagestack>div {
  background-clip: padding-box !important;
}












.quota-widget .bar {
  flex: 1;
  height: 16px !important;
  margin: 0 1rem;
  background-color: #fff;
  border: 1px solid #d4dbde;
  border-radius: 20px !important;
  overflow: hidden;
}









html.dark-mode #layout-content {
  background-color: #090808 !important;
  border-right: 1px solid #4d6066 !important;
}













.mail-sidebar-right {
  /* position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 2;
    max-width: 30% !important;
    min-width: 220px !important; */
  /* border-right: 1px solid #d4dbde; */
  background-color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* =========================
   DARK MODE - mail-sidebar-right
========================= */

.dark-mode .mail-sidebar-right,
body.dark-mode .mail-sidebar-right {
  /* position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 2;
  max-width: 30% !important;
  min-width: 220px !important; */

  /* dark background */
  background-color: #090808 !important;

  border-radius: 10px !important;
 border-right: 1px solid #4d6066;

  /* subtle dark shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;

  /* optional border for separation */
  border: 1px solid #1f2937 !important;
}

/* ==========================================
   ROUNDcube MAILBOX ICONS (LOCAL SVG + MASK)
   Default: gray
   Hover: per-folder color
   Active: per-folder color (stronger)
========================================== */

/* ---------- Base link ---------- */
body.task-mail #mailboxlist>li>a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  margin: 2px !important;

  /* DEFAULT */
  color: #6b7280 !important;

  transition: background-color .18s ease, color .18s ease !important;
}

/* Default hover bg (fallback) */
body.task-mail #mailboxlist>li>a:hover {
  background: #f3f7ff !important;
}

/* ---------- Base icon (MASK) ---------- */
body.task-mail #mailboxlist>li>a:before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 10px !important;

  /* DEFAULT ICON GRAY */
  background-color: #9ca3af !important;

  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 28px 28px !important;

  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 28px 28px !important;


  -webkit-mask-image: url("../images/mb-icons/file.svg") !important;
  mask-image: url("../images/mb-icons/file.svg") !important;


  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

/* ---------- Icon shape mapping ---------- */
body.task-mail #mailboxlist>li>a[rel="INBOX"]:before {
  -webkit-mask-image: url("../images/mb-icons/inbox.svg") !important;
  mask-image: url("../images/mb-icons/inbox.svg") !important;
}

body.task-mail #mailboxlist>li>a[rel="Drafts"]:before {
  -webkit-mask-image: url("../images/mb-icons/drafts.svg") !important;
  mask-image: url("../images/mb-icons/drafts.svg") !important;
}

body.task-mail #mailboxlist>li>a[rel="Sent"]:before {
  -webkit-mask-image: url("../images/mb-icons/sent.svg") !important;
  mask-image: url("../images/mb-icons/sent.svg") !important;
}

body.task-mail #mailboxlist>li>a[rel="Trash"]:before {
  -webkit-mask-image: url("../images/mb-icons/trash.svg") !important;
  mask-image: url("../images/mb-icons/trash.svg") !important;
}

body.task-mail #mailboxlist>li>a[rel="Archive"]:before {
  -webkit-mask-image: url("../images/mb-icons/archive.svg") !important;
  mask-image: url("../images/mb-icons/archive.svg") !important;
}

body.task-mail #mailboxlist>li>a[rel="Spam"]:before {
  -webkit-mask-image: url("../images/mb-icons/junk.svg") !important;
  mask-image: url("../images/mb-icons/junk.svg") !important;
}


/* =================================================
   HOVER STATE (different per folder)
================================================= */

/* INBOX hover */
body.task-mail #mailboxlist>li>a[rel="INBOX"]:hover {
  background: #eaf2ff !important;
  color: #2563eb !important;
}

body.task-mail #mailboxlist>li>a[rel="INBOX"]:hover:before {
  background-color: #2563eb !important;
  transform: scale(1.06) !important;
}

/* DRAFTS hover */
body.task-mail #mailboxlist>li>a[rel="Drafts"]:hover {
  background: #fff6e8 !important;
  color: #f59e0b !important;
}

body.task-mail #mailboxlist>li>a[rel="Drafts"]:hover:before {
  background-color: #f59e0b !important;
  transform: scale(1.06) !important;
}

/* SENT hover */
body.task-mail #mailboxlist>li>a[rel="Sent"]:hover {
  background: #eafff0 !important;
  color: #16a34a !important;
}

body.task-mail #mailboxlist>li>a[rel="Sent"]:hover:before {
  background-color: #16a34a !important;
  transform: scale(1.06) !important;
}

/* TRASH hover */
body.task-mail #mailboxlist>li>a[rel="Trash"]:hover {
  background: #ffecec !important;
  color: #ef4444 !important;
}

body.task-mail #mailboxlist>li>a[rel="Trash"]:hover:before {
  background-color: #ef4444 !important;
  transform: scale(1.06) !important;
}

/* ARCHIVE hover */
body.task-mail #mailboxlist>li>a[rel="Archive"]:hover {
  background: #e9effb !important;
  color: #001e65 !important;
}

body.task-mail #mailboxlist>li>a[rel="Archive"]:hover:before {
  background-color: #001e65 !important;
  transform: scale(1.06) !important;
}

/* SPAM hover */
body.task-mail #mailboxlist>li>a[rel="Spam"]:hover {
  background: #f3ecff !important;
  color: #8b5cf6 !important;
}

body.task-mail #mailboxlist>li>a[rel="Spam"]:hover:before {
  background-color: #8b5cf6 !important;
  transform: scale(1.06) !important;
}

/* =================================================
   ACTIVE / SELECTED STATE (different per folder)
   Roundcube adds .selected on LI
================================================= */

body.task-mail #mailboxlist>li.selected>a {
  font-weight: 700 !important;
}

/* INBOX active */
body.task-mail #mailboxlist>li.selected>a[rel="INBOX"] {
  background: #eaf2ff !important;
  color: #2563eb !important;
  border: none !important;
}

body.task-mail #mailboxlist>li.selected>a[rel="INBOX"]:before {
  background-color: #2563eb !important;
  box-shadow: 0 10px 18px rgba(37, 99, 235, .22) !important;
  transform: scale(1.10) !important;
}

/* DRAFTS active */
body.task-mail #mailboxlist>li.selected>a[rel="Drafts"] {
  background: #fff6e8 !important;
  color: #f59e0b !important;
}

body.task-mail #mailboxlist>li.selected>a[rel="Drafts"]:before {
  background-color: #f59e0b !important;
  box-shadow: 0 10px 18px rgba(245, 158, 11, .22) !important;
  transform: scale(1.10) !important;
}

/* SENT active */
body.task-mail #mailboxlist>li.selected>a[rel="Sent"] {
  background: #eafff0 !important;
  color: #16a34a !important;
}

body.task-mail #mailboxlist>li.selected>a[rel="Sent"]:before {
  background-color: #16a34a !important;
  box-shadow: 0 10px 18px rgba(22, 163, 74, .22) !important;
  transform: scale(1.10) !important;
}

/* TRASH active */
body.task-mail #mailboxlist>li.selected>a[rel="Trash"] {
  background: #ffecec !important;
  color: #ef4444 !important;
}

body.task-mail #mailboxlist>li.selected>a[rel="Trash"]:before {
  background-color: #ef4444 !important;
  box-shadow: 0 10px 18px rgba(239, 68, 68, .22) !important;
  transform: scale(1.10) !important;
}

/* ARCHIVE active */
body.task-mail #mailboxlist>li.selected>a[rel="Archive"] {
  background: #e9effb !important;
  color: #001e65 !important;
}

body.task-mail #mailboxlist>li.selected>a[rel="Archive"]:before {
  background-color: #001e65 !important;
  box-shadow: 0 10px 18px rgba(19, 46, 99, 0.22) !important;
  transform: scale(1.10) !important;
}

/* SPAM active */
body.task-mail #mailboxlist>li.selected>a[rel="Spam"] {
  background: #f3ecff !important;
  color: #8b5cf6 !important;
}

body.task-mail #mailboxlist>li.selected>a[rel="Spam"]:before {
  background-color: #8b5cf6 !important;
  box-shadow: 0 10px 18px rgba(139, 92, 246, .22) !important;
  transform: scale(1.10) !important;
}

/* =================================================
   GLOBAL OVERRIDE (so global rule doesn't kill colors)
================================================= */

body.task-mail #mailboxlist>li.selected>a {
  border-color: transparent !important;
  background: rgb(212, 254, 254) !important;
  /* remove global bg */
  color: rgb(2, 119, 151) !important;
  border: none !important;
  /* remove global color */
}

body.task-mail #mailboxlist>li>a:hover {
  background: #c3eaf8 !important;
  border-color: transparent !important;
  color: rgb(2, 119, 151) !important;
}

/* ==========================================
   DARK MODE - ROUNDcube MAILBOX ICONS
========================================== */

/* ---------- Base link ---------- */
.dark-mode body.task-mail #mailboxlist>li>a,
body.dark-mode.task-mail #mailboxlist>li>a {
  color: #94a3b8 !important;
  background: transparent !important;
}

/* default hover fallback */
.dark-mode body.task-mail #mailboxlist>li>a:hover,
body.dark-mode.task-mail #mailboxlist>li>a:hover {
  background: #182235 !important;
  color: #e2e8f0 !important;
}

/* ---------- Base icon ---------- */
.dark-mode body.task-mail #mailboxlist>li>a:before,
body.dark-mode.task-mail #mailboxlist>li>a:before {
  background-color: #64748b !important;
}


/* =================================================
   HOVER STATE
================================================= */

/* INBOX hover */
.dark-mode body.task-mail #mailboxlist>li>a[rel="INBOX"]:hover,
body.dark-mode.task-mail #mailboxlist>li>a[rel="INBOX"]:hover {
  background: rgba(37, 99, 235, 0.16) !important;
  color: #60a5fa !important;
}

.dark-mode body.task-mail #mailboxlist>li>a[rel="INBOX"]:hover:before,
body.dark-mode.task-mail #mailboxlist>li>a[rel="INBOX"]:hover:before {
  background-color: #60a5fa !important;
  transform: scale(1.06) !important;
}

/* DRAFTS hover */
.dark-mode body.task-mail #mailboxlist>li>a[rel="Drafts"]:hover,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Drafts"]:hover {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
}

.dark-mode body.task-mail #mailboxlist>li>a[rel="Drafts"]:hover:before,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Drafts"]:hover:before {
  background-color: #fbbf24 !important;
  transform: scale(1.06) !important;
}

/* SENT hover */
.dark-mode body.task-mail #mailboxlist>li>a[rel="Sent"]:hover,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Sent"]:hover {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #4ade80 !important;
}

.dark-mode body.task-mail #mailboxlist>li>a[rel="Sent"]:hover:before,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Sent"]:hover:before {
  background-color: #4ade80 !important;
  transform: scale(1.06) !important;
}

/* TRASH hover */
.dark-mode body.task-mail #mailboxlist>li>a[rel="Trash"]:hover,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Trash"]:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #f87171 !important;
}

.dark-mode body.task-mail #mailboxlist>li>a[rel="Trash"]:hover:before,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Trash"]:hover:before {
  background-color: #f87171 !important;
  transform: scale(1.06) !important;
}

/* ARCHIVE hover */
.dark-mode body.task-mail #mailboxlist>li>a[rel="Archive"]:hover,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Archive"]:hover {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #93c5fd !important;
}

.dark-mode body.task-mail #mailboxlist>li>a[rel="Archive"]:hover:before,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Archive"]:hover:before {
  background-color: #93c5fd !important;
  transform: scale(1.06) !important;
}

/* SPAM hover */
.dark-mode body.task-mail #mailboxlist>li>a[rel="Spam"]:hover,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Spam"]:hover {
  background: rgba(139, 92, 246, 0.14) !important;
  color: #c4b5fd !important;
}

.dark-mode body.task-mail #mailboxlist>li>a[rel="Spam"]:hover:before,
body.dark-mode.task-mail #mailboxlist>li>a[rel="Spam"]:hover:before {
  background-color: #c4b5fd !important;
  transform: scale(1.06) !important;
}


/* =================================================
   ACTIVE / SELECTED STATE
================================================= */

.dark-mode body.task-mail #mailboxlist>li.selected>a,
body.dark-mode.task-mail #mailboxlist>li.selected>a {
  font-weight: 700 !important;
  border-color: transparent !important;
}

/* INBOX active */
.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="INBOX"],
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="INBOX"] {
  background: rgba(37, 99, 235, 0.16) !important;
  color: #60a5fa !important;
}

.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="INBOX"]:before,
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="INBOX"]:before {
  background-color: #60a5fa !important;
  box-shadow: 0 10px 18px rgba(96, 165, 250, 0.18) !important;
  transform: scale(1.10) !important;
}

/* DRAFTS active */
.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Drafts"],
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Drafts"] {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
}

.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Drafts"]:before,
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Drafts"]:before {
  background-color: #fbbf24 !important;
  box-shadow: 0 10px 18px rgba(251, 191, 36, 0.18) !important;
  transform: scale(1.10) !important;
}

/* SENT active */
.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Sent"],
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Sent"] {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #4ade80 !important;
}

.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Sent"]:before,
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Sent"]:before {
  background-color: #4ade80 !important;
  box-shadow: 0 10px 18px rgba(74, 222, 128, 0.18) !important;
  transform: scale(1.10) !important;
}

/* TRASH active */
.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Trash"],
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Trash"] {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #f87171 !important;
}

.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Trash"]:before,
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Trash"]:before {
  background-color: #f87171 !important;
  box-shadow: 0 10px 18px rgba(248, 113, 113, 0.18) !important;
  transform: scale(1.10) !important;
}

/* ARCHIVE active */
.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Archive"],
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Archive"] {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #93c5fd !important;
}

.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Archive"]:before,
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Archive"]:before {
  background-color: #93c5fd !important;
  box-shadow: 0 10px 18px rgba(147, 197, 253, 0.18) !important;
  transform: scale(1.10) !important;
}

/* SPAM active */
.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Spam"],
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Spam"] {
  background: rgba(139, 92, 246, 0.14) !important;
  color: #c4b5fd !important;
}

.dark-mode body.task-mail #mailboxlist>li.selected>a[rel="Spam"]:before,
body.dark-mode.task-mail #mailboxlist>li.selected>a[rel="Spam"]:before {
  background-color: #c4b5fd !important;
  box-shadow: 0 10px 18px rgba(196, 181, 253, 0.18) !important;
  transform: scale(1.10) !important;
}


/* =================================================
   GLOBAL DARK OVERRIDE
================================================= */

.dark-mode body.task-mail #mailboxlist>li.selected>a,
body.dark-mode.task-mail #mailboxlist>li.selected>a {
  background: #1b2638 !important;
  color: #e2e8f0 !important;
}

.dark-mode body.task-mail #mailboxlist>li>a:hover,
body.dark-mode.task-mail #mailboxlist>li>a:hover {
  border-color: transparent !important;
}


























/* ===============================
   POPOVER MENU FULL STYLE
================================= */
.popover {
  box-shadow: 3px 6px 28px #6e7397 !important;
  border: none !important;
  padding: 0 !important;
  z-index: 1300 !important;
  background: #ffffff !important;
}



/* Default Link Style */
.popover .menu li a {
  height: unset;
  max-width: 100%;
  width: 100%;
  line-height: 35px;
  display: block;
  padding: 0 12px;
  text-align: left;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Hover Effect (Modern Blue UI) */
.popover .menu li a:hover {
  background: linear-gradient(135deg, #4e73df, #224abe) !important;
  color: #ffffff !important;
  padding-left: 16px;
  cursor: pointer !important;
}

/* Active / Selected Item */
.popover .menu li.active a {
  background: #eef2ff !important;
  color: #224abe !important;
  font-weight: 600;
}

/* Optional: Icon inside menu */
.popover .menu li a i {
  margin-right: 8px;
  transition: color 0.3s ease;
}

/* Icon color change on hover */
.popover .menu li a:hover i {
  color: #ffffff !important;
}

/* Optional subtle shadow for menu */
.popover .menu {
  border-radius: 12px;
  /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); */
  padding: 6px;
}

/* ---- Safety: hide old column resizers visually ---- */
body.task-mail .column-resizer {
  display: none !important;
}



/* ===============================
   DARK MODE - POPOVER MENU
================================= */
.dark-mode .popover,
body.dark-mode .popover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid #243041 !important;
  padding: 0 !important;
  z-index: 1300 !important;
  background: #0f172a !important;
}

/* menu wrapper */
.dark-mode .popover .menu,
body.dark-mode .popover .menu {
  border-radius: 12px;
  box-shadow: none !important;
  padding: 6px;
  background: #090808 !important;
}

/* Default link */
.dark-mode .popover .menu li a,
body.dark-mode .popover .menu li a {
  height: unset;
  max-width: 100%;
  width: 100%;
  line-height: 35px;
  display: block;
  padding: 0 12px;
  text-align: left;
  color: #dbe4f0 !important;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Hover */
.dark-mode .popover .menu li a:hover,
body.dark-mode .popover .menu li a:hover {
  background: linear-gradient(135deg, #4e73df, #224abe) !important;
  color: #ffffff !important;
  padding-left: 16px;
  cursor: pointer !important;
}

/* Active */
.dark-mode .popover .menu li.active a,
body.dark-mode .popover .menu li.active a {
  background: rgba(78, 115, 223, 0.18) !important;
  color: #8fb3ff !important;
  font-weight: 600;
}

/* Icon */
.dark-mode .popover .menu li a i,
body.dark-mode .popover .menu li a i {
  margin-right: 8px;
  color: #94a3b8 !important;
  transition: color 0.3s ease;
}

/* icon hover */
.dark-mode .popover .menu li a:hover i,
body.dark-mode .popover .menu li a:hover i {
  color: #ffffff !important;
}

/* old column resizer */
body.dark-mode.task-mail .column-resizer,
.dark-mode body.task-mail .column-resizer {
  display: none !important;
}











.ui-draggable .ui-dialog-titlebar {
  cursor: move !important;
  border-radius: 20px 20px 0px 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #cddcff 50%, #eef2fb 100%) !important;
}

/* =========================
   DARK MODE - DIALOG TITLEBAR
========================= */

.dark-mode .ui-draggable .ui-dialog-titlebar,
body.dark-mode .ui-draggable .ui-dialog-titlebar {
  cursor: move !important;
  border-radius: 20px 20px 0px 0 !important;

  /* dark gradient */
  background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #111827 100%) !important;

  color: #e2e8f0 !important;

  border-bottom: 1px solid #1f2937 !important;
}





.ui-widget-content {
  background-color: #fff !important;
  border: none !important;
  border-radius: 20px;
  /* border-radius: 0 0 20px 20px  !important; */

}

/* =========================
   DARK MODE - UI WIDGET CONTENT
========================= */

.dark-mode .ui-widget-content,
body.dark-mode .ui-widget-content {
  background-color: #0f172a !important;
  border: 1px solid #1f293700 !important;
  border-radius: 20px !important;

  /* better depth for dark UI */
  /* box-shadow: 0 10px 25px rgba(0,0,0,0.45) !important; */
}

.ui-dialog .ui-dialog-buttonpane {

  height: 5rem !important;
  border-radius: 0 0 20px 20px !important;
  background-color: #f2f2fc !important;

  box-shadow:
    0 -4px 12px rgba(79, 121, 216, 0.10),
    0 4px 12px rgba(79, 121, 216, 0.10) !important;
}





/* =========================
   DARK MODE - DIALOG BUTTON PANE
========================= */

.dark-mode .ui-dialog .ui-dialog-buttonpane,
body.dark-mode .ui-dialog .ui-dialog-buttonpane {
  height: 5rem !important;
  border-radius: 0 0 20px 20px !important;

  /* dark background */
  background-color: #0f172a !important;

  border-top: 1px solid #1f2937 !important;

  /* darker shadow */
  box-shadow:
    0 -4px 12px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

.btn-primary {
  background: linear-gradient(90deg, #4F79D8, #6A8FE8) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(79, 121, 216, 0.35) !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.btn-primary:hover {
  background: linear-gradient(90deg, #6A8FE8, #4F79D8) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(79, 121, 216, 0.35) !important;
  transform: translateY(-2px) !important;
}






.ui-dialog-titlebar .ui-dialog .ui-dialog-titlebar-close {
  background-color: transparent !important;
  border: none !important;
  top: -11px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

.ui-dialog-titlebar .ui-dialog .ui-dialog-titlebar-close:hover {
  color: #000 !important;
  transform: translateY(-2px) !important;
  background-color: transparent !important;

}

/* =========================
   ATTACH BUTTON - LIGHT MODE
========================= */
button.btn.btn-secondary.attach,
.btn-secondary.attach {
  background: linear-gradient(135deg, #f8fbff 0%, #dbeafe 45%, #eef4ff 100%) !important;
  border: 1px solid #cbdafc !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12) !important;
  color: #1e3a8a !important;
  transition: all 0.3s ease !important;
}

/* hover - light mode */
button.btn.btn-secondary.attach:hover,
.btn-secondary.attach:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 45%, #dbeafe 100%) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.18) !important;
  color: #1e40af !important;
}


/* =========================
   ATTACH BUTTON - DARK MODE
========================= */
body.dark-mode button.btn.btn-secondary.attach,
html.dark-mode button.btn.btn-secondary.attach,
body.dark-mode .btn-secondary.attach,
html.dark-mode .btn-secondary.attach {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #020617 100%) !important;
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.28) !important;
  color: #dbeafe !important;
  transition: all 0.3s ease !important;
}

/* hover - dark mode */
body.dark-mode button.btn.btn-secondary.attach:hover,
html.dark-mode button.btn.btn-secondary.attach:hover,
body.dark-mode .btn-secondary.attach:hover,
html.dark-mode .btn-secondary.attach:hover {
  background: linear-gradient(135deg, #111827 0%, #1d4ed8 45%, #020617 100%) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
  color: #ffffff !important;
}



/* Dark mode autofill background + text color */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill:hover,
body.dark-mode textarea:-webkit-autofill:focus,
body.dark-mode select:-webkit-autofill,
body.dark-mode select:-webkit-autofill:hover,
body.dark-mode select:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
  box-shadow: 0 0 0px 1000px #0f172a inset !important;
  border: 1px solid #334155 !important;
  caret-color: #f8fafc !important;
  transition: background-color 5000s ease-in-out 0s !important;
}


.folderlist li.mailbox .unreadcount {
  position: absolute;
  top: 3px !important;
  right: 0;
  min-width: 2em;
  line-height: 1.4rem;
  margin: 7.7px;
  padding: 5px 1.3em !important;
  border-radius: 16px !important;
  background: #dbeafe !important;
  color: #0a2ce3 !important;
  border-color: #0a2ce3 !important;
  text-align: center;
  font-weight: 700;
  /* box-shadow: 0 2px 6px rgba(91, 171, 215, 0.3) !important; */

  /* Floating animation */
  animation: floatBadge 2.5s ease-in-out infinite;
}

/* =========================
   DARK MODE - UNREAD BADGE
========================= */

.dark-mode .folderlist li.mailbox .unreadcount,
body.dark-mode .folderlist li.mailbox .unreadcount {
  position: absolute;
  top: 3px !important;
  right: 0;

  min-width: 2em;
  line-height: 1.4rem;

  margin: 7.7px;
  padding: 5px 1.3em !important;

  border-radius: 16px !important;

  /* dark badge style */
  background: linear-gradient(180deg, #15254b, #131f3c) !important;
  color: #e0ecff !important;
  /* border: 1px solid #3b82f6 !important; */

  text-align: center;
  font-weight: 700;

  /* box-shadow: 0 4px 10px rgba(0,0,0,0.45) !important; */

  /* floating animation */
  animation: floatBadge 2.5s ease-in-out infinite;
}

/* Keyframes */
/* @keyframes floatBadge {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0px);
    }
} */


.searchbar form {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 20px 0px !important;
}

/* search icon */
.searchbar form:before {

  font-weight: 900 !important;
  display: inline-block !important;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  margin-left: .75rem;
  font-size: 16px;

  background: linear-gradient(180deg, #2f6bff 0%, #174ae6 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  border-radius: 30px;
}

.searchbar {
  height: 56px;
  margin: 1px 6px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f3f6fa) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 0.3px solid #d7e9ff !important;
  padding: 0 !important;

}


.searchbar input {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 10px 14px;
  line-height: normal;
  outline: none;

  border-radius: 30px;
  font-size: 14px;
  color: #1e293b;

  transition: all 0.25s ease;
}

/* focus state */
.searchbar input:focus {
  border-color: #2f6bff;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15);
}

/* placeholder style */
.searchbar input::placeholder {
  color: #94a3b8;
}

/* #4e73df, #224abe */



/* reset icon */






.sidebar-right {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 2;
  max-width: 30%;
  min-width: 220px;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#layout-menu {
  /* background-color: #ffffff !important; */
  color: #878c90 !important;
  /* border: none !important; */
  /* border-radius: 12px !important; */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Added subtle shadow for depth */


}

.card-header {
  border-bottom: none !important;
  border-radius: 10px !important;
  margin: 7px !important;
  padding: 12px 16px !important;

  /* 1st gradient = text
     2nd gradient = background */
  background-image:
    linear-gradient(180deg, #4e73df 0%, #224abe 100%),
    linear-gradient(180deg, #f6f7fb, #f6f7fb 100%) !important;

  background-clip: text, padding-box;
  -webkit-background-clip: text, padding-box;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 19px;
  font-weight: 600;
}




.attachmentslist li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  margin: 4px;

  font-size: 13px;
  font-weight: 500;

  border-radius: 50px;

  /* background: #e7f1ff; */
  background: linear-gradient(180deg, #eef5ff, #dbeafe);
  border: 1px solid #b6d4fe;

  color: #084298;

  line-height: normal;
}

/* file name */
.attachmentslist li .attachment-name {
  font-weight: 600;
}

/* size text */
.attachmentslist li .attachment-size {
  opacity: .7;
  font-size: 12px;
}

.attachmentslist li:hover {
  background: #d0e2ff;
  border-color: #9ec5fe;
}

.card.attachment-card {
  border-right: 1px solid #d4dbde !important;
  background-color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
      border: none !important;
          max-height: 394px;
    height: 100%;
  /* margin-top: 35px; */
}

.attachmentslist li:before {
  /* content: "📎" !important; */
  height: 1.5rem;
  font-size: 20px;
  margin: 0;

}

.attachmentslist {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 5px !important;

  background-color: #fcfcfc;
  border: 1px solid #f4f4f4;
}

/* =========================
   DARK MODE - ATTACHMENT CARD
========================= */
/* Dark mode */
body.dark-mode .card-header,
.dark-mode .card-header {
  border-bottom: none !important;
  border-radius: 10px !important;
  margin: 7px !important;
  padding: 12px 16px !important;
  display: block !important;

  background-image:
    linear-gradient(180deg,#60a5fa 0%, #3b82f6   100%),
    linear-gradient(180deg, #23252980 0%, #23252980 100%) !important;

  background-clip: text, padding-box;
  -webkit-background-clip: text, padding-box;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  border-right: 1px solid #4d6066 !important;


}

/* attachment card */
.dark-mode .card.attachment-card,
body.dark-mode .card.attachment-card {
  border-right: 1px solid #4d6066 !important;
  background-color: #090808 !important;
  border-radius: 10px !important;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
  /* margin-top: 35px; */
}

/* attachments list */
.dark-mode .attachmentslist,
body.dark-mode .attachmentslist {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 5px !important;

  background-color: #111827 !important;
  border: 1px solid #1f2937 !important;
}

/* attachment icon */
.dark-mode .attachmentslist li:before,
body.dark-mode .attachmentslist li:before {
  height: 1.5rem;
  font-size: 20px;
  margin: 0;
  color: #94a3b8 !important;
}

/* attachment items hover */
.dark-mode .attachmentslist li:hover,
body.dark-mode .attachmentslist li:hover {
  background: rgba(59, 130, 246, 0.12) !important;
}

/* =========================
   DARK MODE - ATTACHMENT PILLS
========================= */

.dark-mode .attachmentslist li,
body.dark-mode .attachmentslist li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  margin: 4px;

  font-size: 13px;
  font-weight: 500;

  border-radius: 50px;

  /* dark gradient */
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 1px solid #334155 !important;

  color: #93c5fd !important;
  line-height: normal;
}

/* file name */
.dark-mode .attachmentslist li .attachment-name,
body.dark-mode .attachmentslist li .attachment-name {
  font-weight: 600;
  color: #e2e8f0 !important;
}

/* file size */
.dark-mode .attachmentslist li .attachment-size,
body.dark-mode .attachmentslist li .attachment-size {
  opacity: .75;
  font-size: 12px;
  color: #94a3b8 !important;
}

/* hover */
.dark-mode .attachmentslist li:hover,
body.dark-mode .attachmentslist li:hover {
  background: linear-gradient(180deg, #1d4ed8, #1e40af) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}






/* FORM */
.form-control {
      padding: 8px 11px !important;
    border-radius: 6px !important;
  border: 1px solid #dbe3ef !important;
}

.form-control:focus {
  border-color: #78a0ff !important;
  box-shadow: 0 0 0 2px rgba(120, 160, 255, .18) !important;
}

.html-editor .editor-toolbar {

  border-radius: 20px 20px 0px 0px !important;
  border: none !important;
  /* gradient background */
  background: linear-gradient(180deg, #ffffff, #e6f1ff) !important;

  /* bottom shadow */
  box-shadow: 0 6px 6px rgb(230, 236, 255);
}


/* Dark mode */
body.dark-mode .html-editor .editor-toolbar,
.dark-mode .html-editor .editor-toolbar {
  border-radius: 20px 20px 0 0 !important;
  border: none !important;
  background: linear-gradient(180deg, #1f2937, #111827) !important;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.35) !important;
}

/* MOBILE */
@media (max-width: 991px) {
  .contact-map iframe {
    height: 300px;
  }
}

/* MOBILE */
@media (max-width: 991px) {
  .map-container {
    height: 300px;
  }
}




.input-group .icon {
  text-decoration: none !important;
  padding: 5px .5rem;
}

.input-group-text {
  color: #ecfaff;
  background-color: #4f79d8;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex !important;
  -ms-flex-align: center;
  align-items: center;
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  gap: 4px !important;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}



.float-right a {
  text-decoration: none !important;
  border: 1px solid #4f79d8;
  border-radius: 20px;
  padding: 6px 14px;
  color: #4f79d8;
  box-shadow: 0 4px 10px rgba(79, 121, 216, 0.25);

  transition: all 0.25s ease;
}

.float-right a:hover {
  background: #4f79d8;
  color: #fff !important;

  box-shadow: 0 8px 18px rgba(79, 121, 216, 0.35);
  transform: translateY(-2px);
}

body.task-login #layout {
  height: 100% !important;
}


#layout {
  height: 92% !important;
}



/* =================================================
   CUSTOM TOP HEADER
================================================= */

.custom-top-header {
  /* flex-direction: column; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 18px -8px 18px;
  padding: 10px 18px;
  background: #fff !important;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-height: 70px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-top-header-left {
  display: flex;
  align-items: center;
  min-width: 150px;
}

.custom-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.custom-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}


.custom-brand-text {
  font-size: 25px;
  font-weight: 800;
  /* color: #011d58; */
  background: linear-gradient(87deg, #102c69 0%, #004ffd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  line-height: 1;
}

.custom-top-header-center {
  flex: 1;
}

.custom-search-wrap {
  position: relative;
  width: 100%;
}

.custom-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #8a94a6;
  pointer-events: none;
}

.custom-search-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 42px;
  border: 1px solid #dde3ec;
  border-radius: 999px;
  background: #eceff3;
  outline: none;
  box-sizing: border-box;
  font-size: 14px;
  color: #475569;
}

.custom-top-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.custom-theme-btn {
  width: 42px;
  height: 42px;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  background: #fff;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
}

.custom-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 16px;
  min-width: 220px;
  box-sizing: border-box;
}

.custom-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff1e6;
  color: #f97316;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.custom-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.custom-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.custom-user-email {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-user-arrow {
  font-size: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* =================================================
   DARK MODE - CUSTOM TOP HEADER
================================================= */

.dark-mode .custom-top-header {
  background: #090808 !important;
  border: 1px solid #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.dark-mode .custom-brand-text {
  /* color: #f8fafc; */

  background: linear-gradient(87deg, #c8d9f2 0%, #004ffd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark-mode .custom-brand-icon img {
  mix-blend-mode: normal;
}

.dark-mode .custom-search-icon {
  color: #94a3b8;
}

.dark-mode .custom-search-wrap input {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}

.dark-mode .custom-search-wrap input::placeholder {
  color: #94a3b8;
}

.dark-mode .custom-theme-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}

.dark-mode .custom-theme-btn:hover {
  background: #334155;
  color: #ffffff;
}

.dark-mode .custom-user-card {
  background: #1e293b;
  border: 1px solid #334155;
}

.dark-mode .custom-user-avatar {
  background: #3b2a1d;
  color: #fb923c;
}

.dark-mode .custom-user-name {
  color: #f8fafc;
}

.dark-mode .custom-user-email {
  color: #94a3b8;
}

.dark-mode .custom-user-arrow {
  color: #94a3b8;
}

/* Desktop + tablet pe show */
@media screen and (min-width: 768px) {
  .custom-top-header {
    display: flex;
  }

  .action-preview .custom-top-header {
    display: none !important;
  }

  .desk-user {
    display: none !important;
  }

  .popover-header #logo {
    display: none !important;
  }

  .header .username {
    display: none !important;

  }

  .header .foldername {
    display: block !important;
  }


/* Default Light Mode */
#sideDark {
    display: none !important;
}

#sideLight {
    display: block !important;
}

/* Dark Mode */
.dark-mode body.task-login #sideDark {
    display: block !important;
}

.dark-mode body.task-login #sideLight {
    display: none !important;
}






/* =========================
   LOGIN PAGE ACTION BUTTONS
   Theme + Logout Fixed Alignment
========================= */

body.task-login .right-section {
    position: relative !important;
}

/* Main taskmenu position */
body.task-login .right-section #taskmenu,
.dark-mode body.task-login .right-section #taskmenu {
    position: absolute !important;
    top: 22px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    transform: none !important;
}

/* Special buttons wrapper */
body.task-login .right-section #taskmenu .special-buttons,
.dark-mode body.task-login .right-section #taskmenu .special-buttons {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    transform: none !important;
}

/* =========================
   COMMON BUTTON STYLE
========================= */

body.task-login .right-section #taskmenu .special-buttons a,
body.task-login .right-section #taskmenu .special-buttons button,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button {
    position: relative;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 14px !important;
    border: 1px solid rgba(91, 124, 250, 0.16) !important;

    background: #ffffff !important;
    color: #3154c9 !important;

    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;

    box-shadow: 0 6px 18px rgba(20, 40, 90, 0.08);

    line-height: 1 !important;
    vertical-align: middle !important;

    transform: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* =========================
   ICON ALIGNMENT
========================= */

body.task-login .right-section #taskmenu .special-buttons a::before,
body.task-login .right-section #taskmenu .special-buttons button::before,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a::before,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px;
    height: 20px;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1 !important;

    background: linear-gradient(180deg, #7777f0 0%, #76a9f5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    color: #3154c9;
}

/* Hide text label */
body.task-login .right-section #taskmenu .special-buttons a .inner,
body.task-login .right-section #taskmenu .special-buttons button .inner,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a .inner,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button .inner {
    display: none !important;
}

/* Remove extra indicator */
body.task-login .right-section #taskmenu .special-buttons a::after,
body.task-login .right-section #taskmenu .special-buttons button::after,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a::after,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button::after {
    display: none !important;
}

/* =========================
   HOVER STATE
========================= */

body.task-login .right-section #taskmenu .special-buttons a:hover,
body.task-login .right-section #taskmenu .special-buttons button:hover,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a:hover,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button:hover {
    background: #f8faff !important;
    border-color: rgba(91, 124, 250, 0.28) !important;
    box-shadow: 0 10px 24px rgba(49, 84, 201, 0.14);
    transform: translateY(-2px);
}

/* =========================
   THEME BUTTON
========================= */

body.task-login .right-section #taskmenu .special-buttons a.theme,
body.task-login .right-section #taskmenu .special-buttons button.theme {
    background: #ffffff !important;
    color: #3154c9 !important;
    border-color: rgba(91, 124, 250, 0.16) !important;
}

/* Dark mode theme button */
.dark-mode body.task-login .right-section #taskmenu .special-buttons a.theme,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button.theme {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}

.dark-mode body.task-login .right-section #taskmenu .special-buttons a.theme::before,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button.theme::before {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

.dark-mode body.task-login .right-section #taskmenu .special-buttons a.theme:hover,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button.theme:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

/* =========================
   LOGOUT BUTTON
========================= */

body.task-login .right-section #taskmenu .special-buttons a.logout,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a.logout {
    background: linear-gradient(180deg, #ff6b6b 0%, #dc3545 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;

    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.20);
}

body.task-login .right-section #taskmenu .special-buttons a.logout::before,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a.logout::before {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;

    color: #ffffff !important;
}

body.task-login .right-section #taskmenu .special-buttons a.logout:hover,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a.logout:hover {
    background: linear-gradient(180deg, #ff6b6b 0%, #dc3545 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px rgba(220, 53, 69, 0.30);
    transform: translateY(-2px);
}

/* =========================
   FOCUS STATE
========================= */

body.task-login .right-section #taskmenu .special-buttons a:focus,
body.task-login .right-section #taskmenu .special-buttons button:focus,
body.task-login .right-section #taskmenu .special-buttons a:focus-visible,
body.task-login .right-section #taskmenu .special-buttons button:focus-visible,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a:focus,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button:focus,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a:focus-visible,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button:focus-visible {
    outline: none !important;
    border-color: rgba(91, 124, 250, 0.35) !important;

    box-shadow:
        0 0 0 3px rgba(91, 124, 250, 0.16),
        0 8px 22px rgba(20, 40, 90, 0.10);
}

body.task-login .right-section #taskmenu .special-buttons a.logout:focus,
body.task-login .right-section #taskmenu .special-buttons a.logout:focus-visible,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a.logout:focus,
.dark-mode body.task-login .right-section #taskmenu .special-buttons a.logout:focus-visible {
    box-shadow:
        0 0 0 3px rgba(220, 53, 69, 0.16),
        0 10px 24px rgba(220, 53, 69, 0.24);
}

/* =========================
   MOBILE ALIGNMENT
========================= */

@media screen and (max-width: 480px) {

    body.task-login .right-section #taskmenu,
    .dark-mode body.task-login .right-section #taskmenu {
        top: 14px !important;
        right: 14px !important;
    }

    body.task-login .right-section #taskmenu .special-buttons,
    .dark-mode body.task-login .right-section #taskmenu .special-buttons {
        gap: 8px !important;
    }

    body.task-login .right-section #taskmenu .special-buttons a,
    body.task-login .right-section #taskmenu .special-buttons button,
    .dark-mode body.task-login .right-section #taskmenu .special-buttons a,
    .dark-mode body.task-login .right-section #taskmenu .special-buttons button {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        border-radius: 12px !important;
    }

    body.task-login .right-section #taskmenu .special-buttons a::before,
    body.task-login .right-section #taskmenu .special-buttons button::before,
    .dark-mode body.task-login .right-section #taskmenu .special-buttons a::before,
    .dark-mode body.task-login .right-section #taskmenu .special-buttons button::before {
        font-size: 17px !important;
    }
}


  

  /* icon container */
  #messagelist-header .iconized li {
    height: 48px !important;
    width: 60px !important;
    border-radius: 16px !important;
    background: transparent !important;
    /* background: #eaf2ff !important; */
    padding: 0 5px !important;
    margin: 0 4px !important;
    transition: all 0.25s ease;
  }

  /* icon link */
  #messagelist-header .iconized li a {
    font-size: 18px !important;

    /* BLUE GRADIENT ICON */
    /* #4e73df, #224abe */
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.8rem !important;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  /* hover on li */
  #messagelist-header .iconized li:hover {
    /* background: linear-gradient(180deg, #4e73df 0%, #224abe 100%) !important; */
    background: #eef4ff !important;
    transform: translateY(-2px);
  }

  /* hover icon white */
  #messagelist-header .iconized li:hover a {
    -webkit-text-fill-color: #4e73df !important;
    background: none !important;
  }

  #messagelist-header .iconized li a .inner {
    display: none !important;
  }


  /* refresh button */
  #messagelist-header .refresh {
    height: 48px !important;
    width: 60px !important;
    border-radius: 16px !important;
    background: transparent !important;
    /* background: #eaf2ff !important; */
    padding: 10px 0px !important;
    margin: 5px 0px !important;
    transition: all 0.25s ease;
  }

  /* refresh icon gradient */
  #messagelist-header .refresh:before {
    font-size: 18px !important;

    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* hover button */
  #messagelist-header .refresh:hover {
    /* background: linear-gradient(180deg, #4e73df 0%, #224abe 100%) !important; */
    background: #eef4ff !important;

    transform: translateY(-2px);
  }

  /* hover icon white */
  #messagelist-header .refresh:hover:before {
    -webkit-text-fill-color: #4e73df !important;
    background: none !important;
  }

  #messagelist-header .refresh .inner {
    /* font-size: 0 !important; */
    display: none !important;
  }






  .header .sidebar-menu {
    /* background: #eaf2ff !important; */
    background: #eaf2ff;

    margin: 4px;
    border-radius: 10px;
    font-weight: bolder;
    transition: all .25s ease;
    color: #4e73df !important;
  }

  /* ICON GRADIENT */
  /* .header .sidebar-menu:before{
  background: linear-gradient(180deg,#4e73df 0%,#224abe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */

  /* hover button */
  .header .sidebar-menu:hover {
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%) !important;
    /* transform: translateY(-2px); */
  }

  /* hover icon white */
  .header .sidebar-menu:hover:before {
    -webkit-text-fill-color: #ffffff;
    background: none;
  }



  .header .iconized li a .inner {
    display: none !important;
  }






  /* icon container */
  .header .iconized li {
    height: 48px !important;
    /* width: 60px !important; */
    border-radius: 16px !important;
    background: transparent !important;
    /* background: #eaf2ff !important; */
    padding: 0 5px !important;
    /* margin: 0px 0px !important; */
            margin: -7px -5px !important;
    transition: all 0.25s ease;
  }

  /* icon link */
  .header .iconized li a {
    font-size: 18px !important;

    /* BLUE GRADIENT ICON */
    /* #4e73df, #224abe */
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


    line-height: 3.4rem !important;
    /* width: 100%;
    height: 100%; */
    text-decoration: none;
  }

  .header .iconized li a .dropdown {
    display: none !important;
  }


  .header.iconized li a:before {
    /* display: none !important; */
    margin: 12px 0px !important;
  }

  .header .iconized li .dropbutton {
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* hover on li */
  .header .iconized li:hover {
    /* background: linear-gradient(180deg, #4e73df 0%, #224abe 100%) !important; */
    background: #eef4ff !important;

    /* transform: translateY(-2px); */
  }

  /* hover icon white */
  .header .iconized li:hover a {
    -webkit-text-fill-color: #4e73df !important;
    background: none !important;
  }



  /* =========================================
   DARK MODE - MESSAGE LIST HEADER ICONS
========================================= */

  .dark-mode #messagelist-header .iconized li {
    background: transparent !important;
  }

  .dark-mode #messagelist-header .iconized li a {

    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* hover */
  .dark-mode #messagelist-header .iconized li:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  }

  .dark-mode #messagelist-header .iconized li:hover a {
    -webkit-text-fill-color: #ffffff !important;
  }



  /* =========================================
   DARK MODE - REFRESH BUTTON
========================================= */

  .dark-mode #messagelist-header .refresh {
    background: transparent !important;
  }

  .dark-mode #messagelist-header .refresh:before {

    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .dark-mode #messagelist-header .refresh:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  }

  .dark-mode #messagelist-header .refresh:hover:before {
    -webkit-text-fill-color: #ffffff !important;
  }



  /* =========================================
   DARK MODE - SIDEBAR MENU BUTTON
========================================= */

  .dark-mode .header .sidebar-menu {
    /* background: transparent !important; */
    color: #60a5fa !important;
  }

  .dark-mode .header .sidebar-menu:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
  }










  /* =========================
   DARK MODE - HEADER ICONS
========================= */

  .dark-mode .header .iconized li,
  body.dark-mode .header .iconized li {
    height: 48px !important;
    border-radius: 16px !important;
    background: transparent !important;
    padding: 0 5px !important;
    margin: 0px 0px !important;
    transition: all 0.25s ease;
  }

  /* icon link */
  .dark-mode .header .iconized li a,
  body.dark-mode .header .iconized li a {
    font-size: 18px !important;

    /* lighter gradient for dark UI */
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    line-height: 3.4rem !important;
    text-decoration: none;
  }

  /* dropdown hidden */
  .dark-mode .header .iconized li a .dropdown,
  body.dark-mode .header .iconized li a .dropdown {
    display: none !important;
  }

  /* icon spacing */
  .dark-mode .header.iconized li a:before,
  body.dark-mode .header.iconized li a:before {
    margin: 12px 0px !important;
  }

  /* dropbutton */
  .dark-mode .header .iconized li .dropbutton,
  body.dark-mode .header .iconized li .dropbutton {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* hover */
  .dark-mode .header .iconized li:hover,
  body.dark-mode .header .iconized li:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  }

  /* hover icon white */
  .dark-mode .header .iconized li:hover a,
  body.dark-mode .header .iconized li:hover a {
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
  }








  .cancel {
    background: linear-gradient(90deg, #d4d5d6, #aaacb1);
    border: none !important;
    box-shadow: 0 4px 10px rgba(135, 136, 138, 0.35);
    color: #333 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
  }

  .cancel:hover {
    background-color: #cfcfcf;
    border-color: #cfcfcf !important;
    color: #333 !important;
    transform: translateY(-2px) !important;
  }


}

/* Mobile pe hide */
@media screen and (max-width: 767px) {
  .custom-top-header {
    display: none !important;
  }

  #layout {
    height: 100% !important;
    padding: 5px !important;
  }

  .action-preview .custom-top-header {
    display: none !important;
  }

  .desk-user {
    display: block !important;
  }

  .popover-header #logo {
    display: block !important;
  }

  .header .username {
    display: block !important;

  }

  .header .foldername {
    display: none !important;
  }


  html .menu.toolbar a {
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 9px 0;
    border: none !important;
    border-color: #2c373a00 !important;
  }

  html .menu.toolbar a.selected {
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    border: none !important;


  }

  html.dark-mode .menu.toolbar a {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 9px 0;
    border: none !important;
    border-color: #2c373a00 !important;
  }

  html.dark-mode .menu.toolbar a.selected {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%) !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    border: none !important;


  }

}


/* table checkbox cell align */
.listing td.selection {
  text-align: center;
  vertical-align: middle !important;
  width: 52px;
}

/* hide default ugly checkbox style */
.listing td.selection>input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  position: relative;

  border: 2px solid #c9d3e5;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.22s ease;
}

/* hover */
.listing td.selection>input[type="checkbox"]:hover {
  border-color: #4f7cff;
  background: #f5f8ff;
  box-shadow: 0 4px 12px rgba(79, 124, 255, 0.16);
  transform: translateY(-1px);
}

/* checked */
.listing td.selection>input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #2f6bff 0%, #174ae6 100%);
  border-color: #174ae6;
  box-shadow: 0 6px 16px rgba(47, 107, 255, 0.28);
}

/* tick mark */
.listing td.selection>input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* focus accessibility */
.listing td.selection>input[type="checkbox"]:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(47, 107, 255, 0.18),
    0 4px 12px rgba(79, 124, 255, 0.16);
}

/* disabled */
.listing td.selection>input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: #eef2f7;
  border-color: #d7deea;
  box-shadow: none;
  transform: none;
}



/* tooltip box */
.tooltip .tooltip-inner {
  background: linear-gradient(180deg, #2f6bff 0%, #174ae6 100%);
  box-shadow:
    0 0 0 3px rgba(47, 107, 255, 0.18),
    0 4px 12px rgba(79, 124, 255, 0.16);

  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 500;
}

/* arrow */
.tooltip .tooltip-arrow::before {
  border-top-color: #afc4e9 !important;
}










.input-group-append a {
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #4e73df, #224abe) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(79, 121, 216, 0.35) !important;
  transition: all 0.25s ease;
  margin: 2px 0px 1px 5px !important;
  border: none !important;
}



/* #messagelist th.date, */

/* hide extra old columns visually */

/* =========================================================
   ROUNDCUBE MESSAGE LIST - IMAGE STYLE UI
========================================================= */

#messagelist-content.scroller {
  padding: 0 !important;
  background: #f5f7fa !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
}

/* fixed duplicate header visually hidden */
#messagelist-fixedcopy {
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* table */
#messagelist {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
  table-layout: fixed !important;
}

/* header */
#messagelist thead th {
  background: #f8fafc !important;
  color: #7a8699 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 8px 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#messagelist thead th a,
#messagelist thead th span {
  color: #7a8699 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* row base */
#messagelist tbody tr.message {
  position: relative !important;
}

/* row cells */
#messagelist tbody tr.message td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0.5px solid #eceff3 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  height: 72px !important;
  /* border-radius: 20px !important; */
}

/* hover */
#messagelist tbody tr.message:hover td {
  background: #f0f0f0 !important;
}

#messagelist tbody tr.message.focused td,
#messagelist tbody tr.message.current td {
  background: #fff !important;
}

#messagelist tbody tr.message.selected td {
  background: #eaf2ff !important;
}

/* unread blue left accent */
#messagelist tbody tr.message.unread td:first-child,
#messagelist tbody tr.message.unreadchildren td:first-child {
  box-shadow: inset 3px 0 0 #60a5fa;
}

/* =========================================================
   COLUMNS
========================================================= */

/* checkbox column */
#messagelist th.selection,
#messagelist td.selection {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  text-align: center !important;
  vertical-align: middle !important;

}

/* thread arrow column */
#messagelist th.threads,
#messagelist td.threads {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  text-align: center !important;
  vertical-align: middle !important;
  position: relative !important;
  z-index: 1 !important;
}

/* subject main area */
#messagelist th.subject,
#messagelist td.subject {
  width: 100% !important;
  padding-right: 0;
}

/* hide extra old columns visually */
#messagelist th.status,
#messagelist th.fromto,
#messagelist th.date,
#messagelist th.size,
#messagelist td.status,
#messagelist td.fromto,
#messagelist td.date,
#messagelist td.size {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* flag/attachment */
#messagelist th.flag,
#messagelist th.attachment,
#messagelist td.flags {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* =========================================================
   CHECKBOX
========================================================= */

#messagelist td.selection {
  padding-left: 8px !important;
}

#messagelist td.selection input[type="checkbox"],
#messagelist th.selection input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 0.5px solid #9ca3af;
  border-radius: 30px;
  background: #fff;
  cursor: pointer;
  margin: 25px 8px !important;
  position: relative;
  vertical-align: middle;
}

#messagelist td.selection input[type="checkbox"]:checked,
#messagelist th.selection input[type="checkbox"]:checked {
  background: #2563eb;
  border-color: #2563eb;
}

#messagelist td.selection input[type="checkbox"]:checked::after,
#messagelist th.selection input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================================
   THREAD ICON
========================================================= */

#messagelist td.threads {
  padding-right: 2px !important;
}

#messagelist td.threads .threads {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 72px !important;
  min-height: 72px !important;
  position: relative !important;
  z-index: 1 !important;
}

#messagelist td.threads div[id^="rcmexpandor"] {
  width: 16px;
  height: 16px;
  position: relative;
  cursor: pointer;
  background: transparent !important;
  border-radius: 50%;
  font-size: 0;
  flex-shrink: 0;
  z-index: 1 !important;
}

#messagelist td.threads div[id^="rcmexpandor"].collapsed::before {
  content: "";
  position: absolute;
  top: 112%;
  left: 65%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #0069ff;
  border-bottom: 2px solid #0655c7;
  transform: translate(-60%, -52%) rotate(317deg);
}

#messagelist td.threads div[id^="rcmexpandor"].expanded::before {
  content: "";
  position: absolute;
  top: 102%;
  left: 65%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #0069ff;
  border-bottom: 2px solid #0655c7;
  transform: translate(-50%, -72%) rotate(45deg);
}

/* =========================================================
   SUBJECT BLOCK
========================================================= */

#messagelist td.subject {
  position: relative;
  padding: 12px 90px 12px 0 !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

/* sender line */
#messagelist td.subject>.fromto {
  display: block !important;
  margin-bottom: 4px;
  line-height: 1.2;
  min-width: 0;
  padding-right: 60px;
  overflow: hidden !important;
}

/* sender */
#messagelist td.subject>.fromto .adr,
#messagelist td.subject>.fromto .rcmContactAddress {
  display: inline-flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #093d91 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

/* date - same top line right side */
#messagelist td.subject>.date {
  display: block !important;
  position: absolute !important;
  top: 18px !important;
  right: 8px !important;
  z-index: 5 !important;
  margin: 0 !important;
  color: #7a7f87 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* size open */
#messagelist td.subject>.size {
  display: block !important;
  position: absolute;
  top: 56px;
  right: 8px;
  margin: 0 !important;
  color: #7a7f87 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  line-height: 1.2;
}

/* second line = subject */
#messagelist td.subject .subject {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  line-height: 1.3;
}

/* bullet/dot icon */
#messagelist td.subject .subject .msgicon {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f2937;
  margin-top: 7px;
}

/* unread yellow dot */
#messagelist td.subject .subject .msgicon.unread,
#messagelist td.subject .subject .msgicon.unreadchildren {
  /* background: #f4c542; */
  background: linear-gradient(135deg, #ffd84d 0%, #f4b400 100%) !important;
}

/* replied */
#messagelist td.subject .subject .msgicon.replied {
  /* background: #2563eb; */
}

/* subject link */
#messagelist td.subject .subject a {
  display: block;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  text-decoration: none !important;
  overflow: hidden;
}

#messagelist td.subject .subject a span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f2937 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* unread subject bold */
#messagelist tbody tr.message.unread td.subject .subject a span,
#messagelist tbody tr.message.unreadchildren td.subject .subject a span {
  font-weight: 700 !important;
  color: #3d7ef1 !important;
}

/* child row slight indent */
#messagelist tbody tr.message.expanded td.subject {
  padding-left: 4px !important;
}

/* =========================================================
   ATTACHMENT / FLAG
========================================================= */

#messagelist td.flags {
  padding-right: 10px !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

#messagelist td.flags .flag,
#messagelist td.flags .attachment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 2px;
}

#messagelist td.flags .flag span,
#messagelist td.flags .attachment span {
  width: 16px;
  height: 16px;
  display: inline-block;
}

#messagelist td.flags .flag .unflagged {
  opacity: 0.35;
}

#messagelist td.flags .attachment .attachment {
  opacity: 0.9;
}




















/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode #messagelist-content.scroller,
.dark-mode #messagelist-content.scroller {
  background: #090808 !important;
}

body.dark-mode #messagelist,
.dark-mode #messagelist {
  background: #090808 !important;
}

body.dark-mode #messagelist thead th,
.dark-mode #messagelist thead th {
  background: #090808 !important;
  color: #94a3b8 !important;
  border-bottom-color: #243244 !important;
}

body.dark-mode #messagelist thead th a,
body.dark-mode #messagelist thead th span,
.dark-mode #messagelist thead th a,
.dark-mode #messagelist thead th span {
  color: #94a3b8 !important;
}

body.dark-mode #messagelist tbody tr.message td,
.dark-mode #messagelist tbody tr.message td {
  background: transparent !important;
  border-bottom-color: #243244 !important;
}

body.dark-mode #messagelist tbody tr.message:hover td,
.dark-mode #messagelist tbody tr.message:hover td {
  background: #162235 !important;
}


body.dark-mode #messagelist tbody tr.message.focused td,
body.dark-mode #messagelist tbody tr.message.current td,

.dark-mode #messagelist tbody tr.message.focused td,
.dark-mode #messagelist tbody tr.message.current td {
  background: #090808 !important;
}

body.dark-mode #messagelist tbody tr.message.selected td,
.dark-mode #messagelist tbody tr.message.selected td {
  background: #1e293b !important;
}

body.dark-mode #messagelist td.selection input[type="checkbox"],
.dark-mode #messagelist td.selection input[type="checkbox"] {
  background: #0f172a;
  border-color: #475569;
}

body.dark-mode #messagelist td.selection input[type="checkbox"]:checked,
.dark-mode #messagelist td.selection input[type="checkbox"]:checked {
  background: #2563eb;
  border-color: #2563eb;
}

body.dark-mode #messagelist td.subject>.fromto .adr,
body.dark-mode #messagelist td.subject>.fromto .rcmContactAddress,
.dark-mode #messagelist td.subject>.fromto .adr,
.dark-mode #messagelist td.subject>.fromto .rcmContactAddress {
  color: #94a3b8 !important;
}

body.dark-mode #messagelist td.subject>.date,
.dark-mode #messagelist td.subject>.date {
  color: #94a3b8 !important;
}

body.dark-mode #messagelist td.subject .subject a span,
.dark-mode #messagelist td.subject .subject a span {
  color: #e5e7eb !important;
}

body.dark-mode #messagelist td.subject .subject .msgicon,
.dark-mode #messagelist td.subject .subject .msgicon {
  background: #cbd5e1;
}

body.dark-mode #messagelist td.subject .subject .msgicon.unread,
body.dark-mode #messagelist td.subject .subject .msgicon.unreadchildren,
.dark-mode #messagelist td.subject .subject .msgicon.unread,
.dark-mode #messagelist td.subject .subject .msgicon.unreadchildren {
  background: #f4c542;
}

body.dark-mode #messagelist td.threads div[id^="rcmexpandor"].collapsed::before,
body.dark-mode #messagelist td.threads div[id^="rcmexpandor"].expanded::before,
.dark-mode #messagelist td.threads div[id^="rcmexpandor"].collapsed::before,
.dark-mode #messagelist td.threads div[id^="rcmexpandor"].expanded::before {
  border-right-color: #cbd5e1;
  border-bottom-color: #cbd5e1;
}

#messagelist td.subject .subject .msgicon {
  width: 10px;
  height: 10px;
  margin: 6px 4px 2px 4px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6c757d 0%, #00247a 100%);
}

.messagelist td.subject span.msgicon.status.forwarded:before {
  content: "\f064";
  font-weight: 900;
  font-size: 1rem;
}

.messagelist td.subject span.msgicon.status:before {
  /* content: "\f111"; */
  content: "";
  cursor: pointer;
  font-size: .4rem;
  width: 1.1rem;
  height: 2rem;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  #messagelist th.selection,
  #messagelist td.selection {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
  }

  #messagelist th.threads,
  #messagelist td.threads {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }

  #messagelist th.flag,
  #messagelist th.attachment,
  #messagelist td.flags {
    width: 34px !important;
    min-width: 64px !important;
    max-width: 34px !important;
  }

  #messagelist td.subject>.fromto .adr,
  #messagelist td.subject>.fromto .rcmContactAddress {
    font-size: 14px !important;
    max-width: calc(100% - 78px);
  }

  #messagelist td.subject>.date {
    font-size: 11px !important;
  }

  #messagelist td.subject .subject a span {
    font-size: 17px !important;
  }

  #messagelist td.subject .subject .msgicon {
    width: 10px;
    height: 10px;
    margin: 6px 4px 2px 4px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: linear-gradient(180deg, #6c757d 0%, #00247a 100%);
  }


  /* sender */
  #messagelist td.subject>.fromto .adr,
  #messagelist td.subject>.fromto .rcmContactAddress {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #093d91 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 2 !important;
  }

  /* date - same top line right side */
  #messagelist td.subject>.date {
    position: absolute;
    top: 12px;
    right: 65px;
    margin: 0 !important;
    color: #7a7f87 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    line-height: .2;
  }


  #messagelist td.subject>.date {
    display: block !important;
    position: absolute !important;
    top: 18px !important;
    right: 43px !important;
    z-index: 5 !important;
    margin: 0 !important;
    color: #7a7f87 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  #messagelist td.subject>.size {
    position: absolute;
    top: 56px;
    right: 43px;
    line-height: 1.2;
    display: block !important;
    color: rgb(122, 127, 135) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    margin: 0px !important;
  }
}




















#settings-menu {
  margin: 0 !important;
  padding: 5px !important;

}

#settings-menu .listitem {
  color: #2c363a !important;
  /* background-color: #ebf9ff !important; */

}

.iconized li a,
.iconized tbody td {
  padding: 9px 1rem !important;
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(180deg, #5b7cfa 0%, #3154c9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #3154c9 !important;
}

.iconized li.selected,
.iconized tr.selected td {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #5b7cfa 0%, #3154c9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #3154c9 !important;
  border: 1px solid #5b7cfa !important;
}




/* =========================
   SIDEBAR QUOTA WIDGET
   Exact Alignment
========================= */

#layout-sidebar, #layout-list {
    overflow: hidden !important;
}

#layout-list #quotadisplay.quota-widget, #layout-sidebar #quotadisplay.quota-widget {
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 10px 10px 12px 10px !important;
    padding: 10px 14px !important;

    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;

    column-gap: 7px !important;
    row-gap: 7px !important;

    background: #f3f5fc !important;
    border: 0.5px solid #eaeaea !important;
    border-radius: 10px !important;

    color: #2563eb !important;

    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* =========================
   ICON + STORAGE
========================= */

#layout-list #quotadisplay.quota-widget .voice , #layout-sidebar #quotadisplay.quota-widget .voice {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 1 !important;

    color: transparent !important;
}

#layout-list #quotadisplay.quota-widget .voice::before, #layout-sidebar #quotadisplay.quota-widget .voice::before {
    content: "" !important;

    display: inline-block !important;

    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;

    margin: 0 7px 0 0 !important;

    border-radius: 4px !important;

    background: linear-gradient(180deg, #5b7cfa 0%, #2563eb 100%) !important;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.18) !important;
}

#layout-sidebar #quotadisplay.quota-widget .voice::after, #layout-list #quotadisplay.quota-widget .voice::after {
    content: "STORAGE" !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;

    color: #8b9ab3 !important;
    text-align: left !important;
}

/* =========================
   TOP RIGHT PERCENTAGE
========================= */

#layout-sidebar #quotadisplay.quota-widget .count, #layout-list #quotadisplay.quota-widget .count {
    grid-column: 3 !important;
    grid-row: 1 !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;
    font-weight: 800 !important;

    color: #2563eb !important;
    text-align: right !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Keep original 10% visible */
#layout-sidebar #quotadisplay.quota-widget .count[title] , #layout-list #quotadisplay.quota-widget .count[title] {
    font-size: 12px !important;
}

#layout-sidebar #quotadisplay.quota-widget .count[title]::after , #layout-list #quotadisplay.quota-widget .count[title]::after {
    content: none !important;
}

/* =========================
   PROGRESS BAR
========================= */

#layout-sidebar #quotadisplay.quota-widget .bar , #layout-list #quotadisplay.quota-widget .bar {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;

    display: block !important;

    width: 100% !important;
    height: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #e2e8f0 !important;
    border-radius: 999px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

#layout-sidebar #quotadisplay.quota-widget .bar .value, #layout-list #quotadisplay.quota-widget .bar .value {
    display: block !important;

    height: 100% !important;
    min-width: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #2563eb !important;
    border-radius: 999px !important;

    box-sizing: border-box !important;
}

/* =========================
   BOTTOM FULL TEXT
========================= */
#layout-sidebar #quotadisplay.quota-widget::after, #layout-list #quotadisplay.quota-widget::after {
    content: attr(data-original-title) !important;

    grid-column: 1 / 4 !important;
    grid-row: 3 !important;

    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;
    font-weight: 700 !important;

    color: #8a97aa !important;
    text-align: left !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =========================
   DARK MODE - SIDEBAR QUOTA WIDGET
   html.dark-mode
========================= */

html.dark-mode #layout-sidebar #quotadisplay.quota-widget, html.dark-mode #layout-list #quotadisplay.quota-widget {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;

    color: #8ab4ff !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 22px rgba(0, 0, 0, 0.18) !important;
}

/* STORAGE text */
html.dark-mode #layout-sidebar #quotadisplay.quota-widget .voice::after, html.dark-mode #layout-list #quotadisplay.quota-widget .voice::after {
    color: #9ca3af !important;
}

/* Storage icon */
html.dark-mode #layout-sidebar #quotadisplay.quota-widget .voice::before , html.dark-mode #layout-list #quotadisplay.quota-widget .voice::before {
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

/* Top right percentage */
html.dark-mode #layout-sidebar #quotadisplay.quota-widget .count, html.dark-mode #layout-list #quotadisplay.quota-widget .count {
    color: #93c5fd !important;
}

/* Progress bar background */
html.dark-mode #layout-sidebar #quotadisplay.quota-widget .bar, html.dark-mode #layout-list #quotadisplay.quota-widget .bar {
    background: rgba(148, 163, 184, 0.22) !important;
}

/* Progress bar fill */
html.dark-mode #layout-sidebar #quotadisplay.quota-widget .bar .value, html.dark-mode #layout-list #quotadisplay.quota-widget .bar .value {
    background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%) !important;
}

/* Bottom full text */
html.dark-mode #layout-sidebar #quotadisplay.quota-widget::after, html.dark-mode #layout-list #quotadisplay.quota-widget::after {
    color: #9ca3af !important;
}




/* =========================
   SEARCH BAR PROFESSIONAL UI
========================= */

.searchbar {
    position: relative !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 1px 10px !important;
    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;

    border-radius: 10px !important;
    background: #ffffff !important;

    border: 1px solid #dbe3ef !important;
    box-shadow: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* =========================
   SEARCH FORM ALIGNMENT
========================= */

.searchbar form {
    position: relative !important;

    flex: 1 1 auto !important;

    display: flex !important;
    align-items: center !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 8px 0 38px !important;

    background: transparent !important;
    border: none !important;

    box-sizing: border-box !important;
}

/* =========================
   SEARCH ICON
========================= */

.searchbar form:before {
    position: absolute !important;
    content: "\f002" !important;

    left: 8px !important;
    top: 50% !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    transform: translateY(-50%) !important;

    background: linear-gradient(180deg, #2f6bff 0%, #174ae6 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    border-radius: 0 !important;
}

/* =========================
   INPUT FIELD
========================= */

.searchbar input,
.searchbar input[type="text"],
.searchbar input[type="search"] {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;

    color: #64748b !important;

    font-size: 14px !important;
    line-height: 56px !important;
    font-weight: 500 !important;

    box-sizing: border-box !important;
}

.searchbar input::placeholder {
    color: #9aa6b8 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* =========================
   RIGHT SIDE ICON BUTTONS
========================= */

.searchbar a {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;

    margin: 0 2px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #2563eb !important;
    text-decoration: none !important;

    line-height: 1 !important;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.searchbar a:before {
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    font-size: 17px !important;
    line-height: 1 !important;

    background: linear-gradient(180deg, #2f6bff 0%, #174ae6 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    transition: all 0.25s ease !important;
}

.searchbar a:hover {
    background: #eef4ff !important;
    transform: translateY(-1px) !important;
}

.searchbar a:hover:before {
    background: linear-gradient(180deg, #174ae6 0%, #1038bf 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
/* =========================
   DEFAULT HIDE BUTTONS
========================= */

.searchbar a.reset,
.searchbar a.search {
    display: none !important;
}

/* Search button always hidden */
.searchbar a.search {
    display: none !important;
}

/* =========================
   RESET BUTTON SHOW ONLY WHEN INPUT HAS VALUE
   Modern browser support
========================= */

.searchbar:has(input:not(:placeholder-shown)) a.reset {
    display: inline-flex !important;
}

/* Keep search hidden even when input has value */
.searchbar:has(input:not(:placeholder-shown)) a.search {
    display: none !important;
}
/* =========================
   SEARCHBAR FOCUS
========================= */

.searchbar:focus-within {
    border-color: #c7d7fe !important;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.08) !important;
    background: #ffffff !important;
}

/* =========================
   DARK MODE
========================= */

html.dark-mode .searchbar {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

html.dark-mode .searchbar input,
html.dark-mode .searchbar input[type="text"],
html.dark-mode .searchbar input[type="search"] {
    color: #e5e7eb !important;
    background: transparent !important;
}

html.dark-mode .searchbar input::placeholder {
    color: #9ca3af !important;
}

html.dark-mode .searchbar a:hover {
    background: rgba(96, 165, 250, 0.12) !important;
}

html.dark-mode .searchbar:focus-within {
    border-color: rgba(96, 165, 250, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12) !important;
}









html.dark-mode #layout>div>.footer {
    background-color: #090808;
    border-color: #242a38 !important;
}












/* =========================
   LOGIN PAGE TOP ACTIONS
   Theme + Logout
========================= */

body.task-login .right-section #taskmenu {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
}

body.task-login .right-section #taskmenu .special-buttons {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
}

/* =========================
   COMMON BUTTON STYLE
========================= */

body.task-login .right-section #taskmenu .special-buttons a,
body.task-login .right-section #taskmenu .special-buttons button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 14px !important;
    border: 1px solid rgba(91, 124, 250, 0.16) !important;

    background: #ffffff !important;
    color: #3154c9 !important;

    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;

    box-shadow: 0 6px 18px rgba(20, 40, 90, 0.08);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Icon */
body.task-login .right-section #taskmenu .special-buttons a::before,
body.task-login .right-section #taskmenu .special-buttons button::before {
    font-size: 18px;
    line-height: 1;

    background: linear-gradient(180deg, #7777f0 0%, #76a9f5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    color: #3154c9;
}

/* Hide text but keep accessibility */
body.task-login .right-section #taskmenu .special-buttons .inner {
    position: absolute;
    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}

/* =========================
   THEME BUTTON
========================= */

body.task-login .right-section #taskmenu .special-buttons a.theme,
body.task-login .right-section #taskmenu .special-buttons button.theme {
    background: #ffffff !important;
}

body.task-login .right-section #taskmenu .special-buttons a.theme:hover,
body.task-login .right-section #taskmenu .special-buttons button.theme:hover {
    background: #f8faff !important;
    border-color: rgba(91, 124, 250, 0.28) !important;
    box-shadow: 0 10px 24px rgba(49, 84, 201, 0.14);
    transform: translateY(-2px);
}

/* =========================
   LOGOUT BUTTON
========================= */

body.task-login .right-section #taskmenu .special-buttons a.logout {
    background: linear-gradient(180deg, #ff6b6b 0%, #dc3545 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;

    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.20);
}

body.task-login .right-section #taskmenu .special-buttons a.logout::before {
    background: none !important;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #ffffff;

    color: #ffffff;
}

body.task-login .right-section #taskmenu .special-buttons a.logout:hover {
    background: linear-gradient(180deg, #ff6b6b 0%, #dc3545 100%) !important;
    box-shadow: 0 12px 28px rgba(220, 53, 69, 0.30);
    transform: translateY(-2px);
}

/* =========================
   FOCUS STATE
========================= */

body.task-login .right-section #taskmenu .special-buttons a:focus,
body.task-login .right-section #taskmenu .special-buttons button:focus,
body.task-login .right-section #taskmenu .special-buttons a:focus-visible,
body.task-login .right-section #taskmenu .special-buttons button:focus-visible {
    outline: none !important;
    border-color: rgba(91, 124, 250, 0.35) !important;

    box-shadow:
        0 0 0 3px rgba(91, 124, 250, 0.16),
        0 8px 22px rgba(20, 40, 90, 0.10);
}

/* Logout focus */
body.task-login .right-section #taskmenu .special-buttons a.logout:focus,
body.task-login .right-section #taskmenu .special-buttons a.logout:focus-visible {
    box-shadow:
        0 0 0 3px rgba(220, 53, 69, 0.16),
        0 10px 24px rgba(220, 53, 69, 0.24);
}

/* =========================
   DARK MODE SUPPORT
========================= */

.dark-mode body.task-login .right-section #taskmenu .special-buttons a.theme,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button.theme {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none;
}

.dark-mode body.task-login .right-section #taskmenu .special-buttons a.theme:hover,
.dark-mode body.task-login .right-section #taskmenu .special-buttons button.theme:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* =========================
   MOBILE ADJUSTMENT
========================= */

@media screen and (max-width: 480px) {
    body.task-login .right-section #taskmenu {
        top: 14px;
        right: 14px;
    }

    body.task-login .right-section #taskmenu .special-buttons {
        gap: 8px;
    }

    body.task-login .right-section #taskmenu .special-buttons a,
    body.task-login .right-section #taskmenu .special-buttons button {
        width: 40px;
        height: 40px;
        border-radius: 12px !important;
    }
}






.card-body {
   
    padding: .8rem !important;
    max-height: 1000px !important;
}










































/* =====================================================
   ROUND CUBE MAIL PREVIEW - STRONG PROFESSIONAL OVERRIDE
   Paste this CSS at the END of your custom stylesheet
===================================================== */

/* Main page background */
body .content.frame-content {
    background: #f4f7fb !important;
    padding: 20px !important;
    min-height: 100vh !important;
    color: #1f2937 !important;
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* Reset default Roundcube message layout */
body #message-header,
body #message-content,
body #message-content .leftcol,
body #message-content .rightcol {
    float: none !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Common width */
body #message-header,
body #message-content {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================
   Header Card
========================= */

body #message-header {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07) !important;
}

/* Subject row */
body #message-header h2.subject,
body #message-header .subject {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #edf1f7 !important;
    color: #111827 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    background: transparent !important;
}

/* Hide subject label text */
body #message-header .subject .voice {
    display: none !important;
}

/* Open new window button */
body #message-header .subject a.extwin {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: max-content !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid #dbe5ff !important;
    background: linear-gradient(135deg, #eef4ff, #e7edff) !important;
    color: #3154c9 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

body #message-header .subject a.extwin:hover {
    background: linear-gradient(135deg, #5b7cfa, #3154c9) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(49, 84, 201, 0.25) !important;
}

body #message-header .subject a.extwin .inner {
    color: inherit !important;
    font-size: inherit !important;
}

/* =========================
   Sender Info
========================= */

body #message-header .short-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Avatar */
body #message-header .short-header img.contactphoto,
body #message-header img.contactphoto {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
    padding: 8px !important;
    object-fit: cover !important;
    background: linear-gradient(135deg, #eef4ff, #ffffff) !important;
    border: 1px solid #dbe5ff !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

/* Header text content */
body #message-header .header-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body #message-header .header-subject {
    color: #6b7280 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

body #message-header .header-subject > span {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Email contact */
body #message-header .adr,
body #message-header .adr a.rcmContactAddress {
    color: #111827 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

body #message-header .adr a.rcmContactAddress:hover {
    color: #3154c9 !important;
}

/* Date pill */
body #message-header .text-nowrap {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Add contact icon */
body #message-header .rcmaddcontact {
    display: inline-flex !important;
    opacity: 0.65 !important;
    margin-left: 4px !important;
}

body #message-header .rcmaddcontact:hover {
    opacity: 1 !important;
}

/* Details button */
body #message-header .header-links {
    margin-top: 10px !important;
}

body #message-header .header-links a.envelope {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #3154c9 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body #message-header .header-links a.envelope:hover {
    background: #eef4ff !important;
    border-color: #cfdcff !important;
}

/* =========================
   Expanded Details Table
========================= */

body #message-header .message-partheaders {
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
}

body #message-header table.headers-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body #message-header table.headers-table td {
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px !important;
    vertical-align: top !important;
}

body #message-header table.headers-table .header-title {
    width: 80px !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

body #message-header table.headers-table .header {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* =========================
   Message Content Card
========================= */

body #message-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07) !important;
    overflow: hidden !important;
    min-height: 280px !important;
}

/* Hide attachment column when not needed */
body #message-content .leftcol {
    display: none !important;
}

/* Body column */
body #message-content .rightcol {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 28px 32px !important;
    background: #ffffff !important;
    border: 0 !important;
}

/* Hide accessibility headings visually */
body .voice {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
}

/* =========================
   Message Body
========================= */

body #messagebody {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #1f2937 !important;
}

body #messagebody .message-part {
    display: block !important;
    width: 100% !important;
    max-width: 850px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Important: email body formatting */
body #messagebody .pre {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #1f2937 !important;
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    letter-spacing: 0.01em !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Links */
body #messagebody a {
    color: #3154c9 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body #messagebody a:hover {
    text-decoration: underline !important;
}

/* Remote object warning */
body #remote-objects-message {
    border-radius: 14px !important;
    border: 1px solid #fde68a !important;
    background: #fffbeb !important;
    color: #92400e !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
}

/* =========================
   Mobile Responsive
========================= */

@media (max-width: 768px) {
    body .content.frame-content {
        padding: 12px !important;
    }

    body #message-header {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    body #message-header h2.subject,
    body #message-header .subject {
        flex-direction: column !important;
        align-items: flex-start !important;
        font-size: 19px !important;
    }

    body #message-header .short-header {
        gap: 12px !important;
    }

    body #message-header .short-header img.contactphoto,
    body #message-header img.contactphoto {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    body #message-content {
        border-radius: 16px !important;
    }

    body #message-content .rightcol {
        padding: 20px !important;
    }

    body #messagebody .pre {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}