/* ============================================================
   QYVERIX MAIL — premium skin over Roundcube Elastic (v4)
   CSS-only. Violet #673de6 + gold #c8a24b. Glass + motion.
   ============================================================ */
:root{
  --qx:#673de6; --qx2:#8b5cf6; --qx-hover:#5025d1;
  --qx-soft:#efeafd; --gold:#c8a24b; --gold2:#e6c877;
  --ring:0 0 0 3px rgba(103,61,230,.16);
}

/* ---------- global accent ---------- */
a, a:hover{ color:var(--qx); }
*:focus-visible{ outline:2px solid var(--qx)!important; outline-offset:1px; }
input.form-control:focus, textarea.form-control:focus, select.form-control:focus,
input:focus, textarea:focus{ border-color:var(--qx)!important; box-shadow:var(--ring)!important; }
input.form-control, textarea.form-control, select.form-control{
  border-radius:9px!important; transition:border-color .15s, box-shadow .15s; }

/* custom scrollbars */
*{ scrollbar-width:thin; scrollbar-color:#cdbdf5 transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#cdbdf5; border-radius:6px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--qx2); }

/* ---------- primary + send buttons: gradient, lift ---------- */
.button.primary, button.primary, .btn-primary,
button.create, a.button.create, .formbuttons .button.mainaction,
a.button.send, button.send, .button.send, input[type=submit]{
  background:linear-gradient(135deg,var(--qx) 0%,var(--qx2) 100%)!important;
  border:none!important; color:#fff!important; border-radius:10px!important;
  box-shadow:0 4px 14px rgba(103,61,230,.30)!important;
  transition:transform .12s, box-shadow .2s, filter .2s!important;
}
.button.primary:hover, button.primary:hover, button.create:hover,
a.button.send:hover, button.send:hover, input[type=submit]:hover{
  transform:translateY(-1px); filter:brightness(1.06);
  box-shadow:0 7px 22px rgba(103,61,230,.42)!important;
}
a.button.send, button.send, .button.send{ border-radius:22px!important; font-weight:600; }

/* ---------- message list: hover slide + gradient selected ---------- */
#messagelist tbody tr{ transition:background .12s; }
#messagelist tbody tr:hover > td{ background:#f6f3ff!important; }
#messagelist tbody tr.selected > td,
.listing li.selected, .listing tr.selected > td{
  background:linear-gradient(90deg,var(--qx-soft),#fff)!important; color:var(--qx)!important; }
.folderlist li.selected a{
  background:var(--qx-soft)!important; color:var(--qx)!important;
  box-shadow:inset 4px 0 0 var(--qx); border-radius:0 10px 10px 0; }
.folderlist li a{ transition:background .12s; border-radius:0 10px 10px 0; }
.folderlist li a:hover{ background:#f6f3ff!important; }
.unreadcount{ background:linear-gradient(135deg,var(--qx),var(--qx2))!important; color:#fff!important; }

/* subtle gold on the app logo corner */
#taskmenu a.button.selected::after,
.special-buttons a.button.selected{ color:var(--qx); }

/* message reading pane: airy */
#messagebody{ font-size:14.5px; line-height:1.65; }
#messageheader .subject{ font-weight:700; }

/* ============================================================
   APP SHELL — left task rail as a Qyverix violet gradient
   ============================================================ */
#layout-menu, #taskmenu, .task-menu, #layout > .menu{
  background:linear-gradient(180deg,#3a2a6e 0%,#241a4d 55%,#1a1233 100%) !important;
}
/* task icons + labels: light, gold on the active one */
#taskmenu a.button{ color:rgba(255,255,255,.72) !important; transition:color .15s, background .15s; border-radius:12px; }
#taskmenu a.button:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
#taskmenu a.button.selected, #taskmenu a.button.selected *{
  color:#fff !important; }
#taskmenu a.button.selected{
  background:rgba(255,255,255,.14) !important;
  box-shadow:inset 3px 0 0 var(--gold); }
#taskmenu a.compose, #taskmenu a.button.compose{
  color:#fff !important; }
/* the logo corner above the rail */
#layout-menu .popover-header, .task-menu .special-buttons{ }

/* Compose = a filled floating action, Gmail-style */
a.button.compose, #taskmenu a.compose .inner{ }
.toolbar a.create, a.button.create.compose{
  background:linear-gradient(135deg,var(--qx),var(--qx2)) !important;
  color:#fff !important; border-radius:22px !important;
  box-shadow:0 6px 18px rgba(103,61,230,.4) !important; }

/* folder rows: rounded, soft hover, gold dot on selected */
#folderslist li a, .folderlist li a{ border-radius:10px !important; margin:1px 6px; }

/* toolbar: clean hairline + subtle depth */
.toolbar, #messagetoolbar{ border-bottom:1px solid #ece9f6 !important; }

/* message list: comfortable rows, clearer unread */
.messagelist .message.unread .subject, #messagelist tr.unread td.subject{ font-weight:700 !important; }
.contactpic, .image-attachment .attachment-thumb{ border-radius:10px; }

/* ============================================================
   SIGN-IN SCREEN — one light card, matching the Gmail-shaped app
   ------------------------------------------------------------
   Elastic positions the logo and the form independently with
   `top: 16vh` / `top: 20vh`, which cannot be made into a single
   card. Both are reset to static flow and #layout-content becomes
   the card, so the mark, the heading, the fields and the footer
   are one object the way a Google sign-in page is.
   The heading and the "Forgot password?" link are real markup,
   added by the qyverix_login plugin.
   ============================================================ */
:root{
  --lg-bg:#f6f8fc; --lg-card:#ffffff; --lg-ink:#202124; --lg-ink2:#5f6368;
  --lg-line:#dfe3ea; --lg-accent:#673de6; --lg-accent2:#8b5cf6;
}

body.task-login{
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(103,61,230,.13) 0%, transparent 60%),
    radial-gradient(900px 560px at 92% 108%, rgba(200,162,75,.16) 0%, transparent 58%),
    var(--lg-bg) !important;
  background-attachment: fixed !important;
  color: var(--lg-ink) !important;
}

body.task-login #layout{
  background: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px 16px !important;
  box-sizing: border-box;
}

/* the card */
body.task-login #layout-content{
  background: var(--lg-card) !important;
  border: 1px solid var(--lg-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.10), 0 12px 40px rgba(60,64,67,.10) !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 40px 36px 26px !important;
  box-sizing: border-box;
  display: block !important;
  text-align: center !important;
  position: static !important;
  overflow: visible !important;
  animation: qxrise .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes qxrise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* the brand mark, back in normal flow */
body.task-login #logo,
body.task-login #layout-content img{
  position: static !important;
  top: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  /* The sign-in card shows the full lockup, wordmark and tagline. It is a
     near-square stack rather than a wide bar, so it needs real height or
     the wordmark under the emblem is unreadable. */
  max-width: 250px !important;
  max-height: 178px !important;
  object-fit: contain !important;
  margin: 0 auto 14px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body.task-login #login-form{
  position: static !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left;
}

/* Elastic's script wraps each field in a Bootstrap input-group and prepends
   a person or padlock glyph, then hides the real <label> and moves its text
   into the placeholder. We want the label back above the field, which makes
   the glyph an orphan floating between the two, so the prepend goes. */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form i.input-group-text,
body.task-login #login-form td:before,
body.task-login #login-form label:before{ display: none !important; content: none !important; }
body.task-login #login-form td.title{ display: block !important; }

/* the button label is not shouted */
body.task-login button.mainaction,
body.task-login button[type=submit]{ text-transform: none !important; }

/* heading, injected by qyverix_login */
.qyx-login-head{ text-align:center; margin: 0 0 22px; }
.qyx-login-head h2{
  margin:0 0 6px; font-size:23px; font-weight:500; letter-spacing:-.01em;
  color: var(--lg-ink);
}
.qyx-login-head p{ margin:0; font-size:14.5px; color: var(--lg-ink2); }

/* fields: label above input, outlined box */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td{
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body.task-login #login-form tr{ margin-bottom: 16px !important; }
body.task-login #login-form td.title label{
  display:block; margin:0 0 6px; font-size:12.5px; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; color: var(--lg-ink2) !important;
}
body.task-login input.form-control,
body.task-login input[type=text],
body.task-login input[type=password]{
  width:100% !important; box-sizing:border-box !important;
  border:1px solid var(--lg-line) !important; border-radius:12px !important;
  padding:13px 14px !important; font-size:15px !important;
  background:#fff !important; color: var(--lg-ink) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
body.task-login input.form-control:focus{
  border-color: var(--lg-accent) !important;
  box-shadow: 0 0 0 3px rgba(103,61,230,.15) !important;
  outline: none !important;
}
body.task-login .input-group-text,
body.task-login .icon{ color: var(--lg-accent) !important; background:transparent !important; border:0 !important; }

/* "Remember me" + "Forgot password?" on one row, injected by qyverix_login */
.qyx-forgot-row{
  margin: -2px 0 20px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.qyx-check{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  font-size:14px; color: var(--lg-ink); margin:0 !important;
}
.qyx-check{ position:relative; }
.qyx-check input{ position:absolute !important; opacity:0 !important; width:1px !important;
  height:1px !important; left:0 !important; z-index:-1 !important; margin:0 !important; }
.qyx-check-box{
  width:18px; height:18px; border:2px solid #747775; border-radius:3px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s;
}
.qyx-check input:checked + .qyx-check-box{ background: var(--lg-accent); border-color: var(--lg-accent); }
.qyx-check input:checked + .qyx-check-box::after{
  content:""; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}
.qyx-check input:focus-visible + .qyx-check-box{ box-shadow: 0 0 0 3px rgba(103,61,230,.25); }
a.qyx-forgot{
  font-size:13.5px; font-weight:600; color: var(--lg-accent) !important;
  text-decoration:none; border-radius:6px; padding:2px 0;
}
a.qyx-forgot:hover{ text-decoration: underline; }

/* the button */
body.task-login button.mainaction,
body.task-login .button.primary,
body.task-login input[type=submit],
body.task-login button[type=submit]{
  width:100% !important; border:0 !important; border-radius:999px !important;
  padding:14px !important; margin:0 !important;
  font-weight:600 !important; font-size:15px !important; letter-spacing:.01em !important;
  color:#fff !important;
  background: linear-gradient(135deg, var(--lg-accent) 0%, var(--lg-accent2) 100%) !important;
  box-shadow: 0 2px 8px rgba(103,61,230,.32) !important;
  transition: box-shadow .18s, filter .18s !important;
}
body.task-login button.mainaction:hover{
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(103,61,230,.4) !important;
}
body.task-login p.formbuttons{ margin: 0 !important; }

/* footer inside the card */
body.task-login #login-footer{
  margin-top: 22px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--lg-line);
  text-align: center;
  font-size: 12.5px;
  color: var(--lg-ink2) !important;
  font-weight: 400 !important;
}
body.task-login #login-footer > div{ background: none !important; padding: 0 !important; margin: 0 !important; }

/* error / notice stack sits above the card, not over it */
body.task-login #messagestack{ z-index: 5000; }

@media (max-width: 420px){
  body.task-login #layout-content{ padding: 32px 22px 22px !important; border-radius: 18px !important; }
}

/* dark mode */
html.dark-mode body.task-login,
body.task-login.dark-mode{
  --lg-bg:#14111d; --lg-card:#1d1830; --lg-ink:#ece9f5; --lg-ink2:#a9a2bd; --lg-line:#332b47;
}
html.dark-mode body.task-login input.form-control{ background:#241d3d !important; }