/* ============================================================
   VASTROX Mail — bespoke dark theme for Roundcube Elastic
   Scoped to html.vx-mail. High-craft, premium, unique.
   ============================================================ */
.vx-mail{
  --vx1:#6366f1; --vx2:#0ea5e9; --vx-acc:#8aa0ff; --vx-acc2:#5ed0f5;
  --bg:#070b16; --bg2:#0a1020; --panel:#0d1424; --panel2:#111a2e; --panel3:#16203a;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --ink:#eaf0fb; --ink2:#aeb8cc; --mut:#7b859b;
  --grad:linear-gradient(135deg,#6366f1,#0ea5e9);
  --radius:13px;
}

/* ---------- base ---------- */
.vx-mail, .vx-mail body{
  background:var(--bg)!important; color:var(--ink)!important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  -webkit-font-smoothing:antialiased; letter-spacing:.005em;
}
.vx-mail .content, .vx-mail .scroller, .vx-mail #layout,
.vx-mail #layout-sidebar, .vx-mail #layout-list, .vx-mail #layout-content,
.vx-mail .uibox, .vx-mail .boxlist, .vx-mail .box{
  background:var(--bg)!important; color:var(--ink)!important; border-color:var(--line)!important;
}
.vx-mail a{ color:var(--vx-acc); text-decoration:none; }
.vx-mail ::selection{ background:rgba(99,102,241,.35); }

/* ---------- far-left task rail ---------- */
.vx-mail #layout-menu{
  background:linear-gradient(180deg,#0c1326,#070b16)!important;
  border-right:1px solid var(--line)!important; width:84px!important; padding-top:8px;
}
.vx-mail #taskmenu{ background:transparent!important; gap:4px; padding:6px; }
.vx-mail #taskmenu a.button{
  color:var(--mut)!important; border-radius:14px!important; margin:3px 6px!important;
  padding:12px 4px!important; font-size:10.5px!important; font-weight:600!important;
  transition:.18s; border:1px solid transparent!important;
}
.vx-mail #taskmenu a.button:hover{ color:#fff!important; background:rgba(255,255,255,.06)!important; }
.vx-mail #taskmenu a.button.selected{
  color:#fff!important; background:var(--grad)!important;
  box-shadow:0 10px 24px rgba(79,70,229,.4)!important;
}
.vx-mail #taskmenu a.button.logout:hover{ color:#fda4af!important; background:rgba(244,63,94,.12)!important; }

/* ---------- column headers / toolbars ---------- */
.vx-mail .header, .vx-mail #messagelist-header,
.vx-mail #layout-sidebar .header, .vx-mail #layout-list .header, .vx-mail #layout-content .header{
  background:var(--panel)!important; color:var(--ink)!important;
  border-bottom:1px solid var(--line)!important; min-height:56px!important;
}
.vx-mail .header-title{ color:var(--ink)!important; font-weight:700!important; font-size:15px!important; }
.vx-mail .header-title.username{ color:var(--ink)!important; font-weight:600!important; }
.vx-mail .footer, .vx-mail .pagenav.footer{
  background:var(--panel)!important; border-top:1px solid var(--line)!important; color:var(--ink2)!important;
}

/* ---------- generic toolbar buttons ---------- */
.vx-mail .toolbar a.button, .vx-mail #mailtoolbar a.button, .vx-mail .toolbar-button{
  color:var(--ink2)!important; border-radius:11px!important; transition:.15s;
}
.vx-mail .toolbar a.button:hover, .vx-mail #mailtoolbar a.button:hover{
  color:#fff!important; background:rgba(255,255,255,.07)!important;
}
.vx-mail .toolbar a.button.disabled{ opacity:.32!important; }

/* Compose = gradient pill */
.vx-mail #taskmenu a.compose, .vx-mail a.button.compose, .vx-mail .compose.button{
  background:var(--grad)!important; color:#fff!important; border-radius:14px!important;
  box-shadow:0 10px 26px rgba(79,70,229,.42)!important; margin:6px!important; font-weight:700!important;
}
.vx-mail #taskmenu a.compose:hover, .vx-mail a.button.compose:hover{ filter:brightness(1.1)!important; }

/* ---------- search bar ---------- */
.vx-mail .searchbar{ background:var(--panel)!important; border-bottom:1px solid var(--line)!important; }
.vx-mail .searchbar input, .vx-mail .searchbar .input-group{
  background:var(--bg2)!important; border:1px solid var(--line)!important;
  border-radius:999px!important; color:var(--ink)!important; height:40px!important;
}
.vx-mail .searchbar input::placeholder{ color:var(--mut)!important; }
.vx-mail .searchbar input:focus{ border-color:var(--vx1)!important; box-shadow:0 0 0 3px rgba(99,102,241,.18)!important; }

/* ---------- folder list ---------- */
.vx-mail #folderlist-content, .vx-mail #layout-sidebar{ background:var(--bg)!important; padding:6px 8px; }
.vx-mail #mailboxlist li{ border:0!important; margin:1px 0; }
.vx-mail #mailboxlist li a{
  color:var(--ink2)!important; border-radius:11px!important; padding:11px 12px!important;
  font-size:14px!important; font-weight:600!important; transition:.15s; border:0!important;
}
.vx-mail #mailboxlist li a:hover{ background:rgba(255,255,255,.05)!important; color:#fff!important; }
.vx-mail #mailboxlist li.selected>a, .vx-mail #mailboxlist li.selected>a:hover{
  background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(14,165,233,.12))!important;
  color:#fff!important; box-shadow:inset 3px 0 0 var(--vx1);
}
.vx-mail #mailboxlist li a .unreadcount, .vx-mail #mailboxlist .unreadcount{
  background:var(--grad)!important; color:#fff!important; border-radius:999px!important;
  font-weight:700!important; font-size:11px!important; padding:1px 8px!important; min-width:20px;
}

/* ---------- message list ---------- */
.vx-mail #messagelist-content{ background:var(--bg)!important; }
.vx-mail #messagelist{ background:transparent!important; }
.vx-mail #messagelist thead th, .vx-mail .messagelist thead th{
  background:var(--panel)!important; color:var(--mut)!important; border-color:var(--line)!important;
  font-size:11px!important; text-transform:uppercase; letter-spacing:.04em; font-weight:700!important;
}
.vx-mail #messagelist tbody tr{
  border-bottom:1px solid var(--line)!important; transition:background .12s;
}
.vx-mail #messagelist tbody tr>td{ color:var(--ink2)!important; padding:13px 14px!important; border:0!important; }
.vx-mail #messagelist tbody tr:hover>td{ background:rgba(255,255,255,.04)!important; }
.vx-mail #messagelist tbody tr.selected>td, .vx-mail #messagelist tbody tr.focused.selected>td{
  background:linear-gradient(90deg,rgba(99,102,241,.20),rgba(14,165,233,.08))!important; color:#fff!important;
}
.vx-mail #messagelist .subject, .vx-mail #messagelist .subject a{ color:var(--ink)!important; font-weight:600!important; }
.vx-mail #messagelist .fromto, .vx-mail #messagelist .from{ color:var(--ink)!important; font-weight:700!important; }
.vx-mail #messagelist .date{ color:var(--mut)!important; font-weight:500!important; }
.vx-mail #messagelist tr.unread{ box-shadow:inset 3px 0 0 var(--vx2); }
.vx-mail #messagelist tr.unread .subject, .vx-mail #messagelist tr.unread .fromto{ color:#fff!important; font-weight:800!important; }
.vx-mail #messagelist tr.unread .subject::before{ background:var(--vx2)!important; }
.vx-mail #messagelist .flag span.flagged::before, .vx-mail .star.flagged::before{ color:#fbbf24!important; }
.vx-mail #messagelist .contactphoto, .vx-mail .contactphoto{ border-radius:50%!important; }

/* ---------- reading / content pane ---------- */
.vx-mail #layout-content{ background:var(--bg)!important; }
.vx-mail #layout-content .content, .vx-mail #messagecontframe,
.vx-mail .iframe-wrapper, .vx-mail iframe#messagecontframe, .vx-mail .preview-pane{ background:var(--bg)!important; }
.vx-mail .watermark{ background-color:var(--bg)!important; opacity:.10; }
.vx-mail .messageheaderbox, .vx-mail .message-headers, .vx-mail .headers-table{
  background:var(--panel)!important; border:1px solid var(--line)!important; border-radius:var(--radius)!important;
  color:var(--ink)!important;
}
.vx-mail .messageheaderbox .subject{ color:var(--ink)!important; font-weight:800!important; }
.vx-mail .message-htmlpart, .vx-mail .messagebody, .vx-mail #messagebody{ color:var(--ink)!important; }

/* ---------- forms / inputs / selects ---------- */
.vx-mail input:not([type=checkbox]):not([type=radio]):not([type=range]),
.vx-mail textarea, .vx-mail select, .vx-mail .form-control{
  background:var(--bg2)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-radius:11px!important;
}
.vx-mail input:focus, .vx-mail textarea:focus, .vx-mail select:focus, .vx-mail .form-control:focus{
  border-color:var(--vx1)!important; box-shadow:0 0 0 3px rgba(99,102,241,.18)!important; outline:0!important;
}
.vx-mail label, .vx-mail .label{ color:var(--ink2)!important; }
.vx-mail fieldset, .vx-mail .propform{ background:transparent!important; border-color:var(--line)!important; }

/* ---------- buttons ---------- */
.vx-mail .btn.btn-primary, .vx-mail button.btn-primary, .vx-mail a.btn-primary,
.vx-mail input.btn-primary, .vx-mail button.mainaction, .vx-mail .btn.mainaction,
.vx-mail .formbuttons .button.mainaction{
  background-image:var(--grad)!important; background-color:#4f46e5!important;
  border:0!important; color:#fff!important; border-radius:11px!important; font-weight:700!important;
  box-shadow:0 8px 22px rgba(79,70,229,.32)!important;
}
.vx-mail .btn, .vx-mail .btn-secondary, .vx-mail button.btn, .vx-mail .formbuttons .button{
  background:var(--panel2)!important; color:var(--ink)!important;
  border:1px solid var(--line2)!important; border-radius:11px!important; font-weight:600!important;
}
.vx-mail .btn:hover{ filter:brightness(1.14); }
.vx-mail .floating-action-buttons a.button{ background:var(--grad)!important; color:#fff!important; box-shadow:0 12px 30px rgba(79,70,229,.45)!important; }

/* ---------- popups / dialogs / menus ---------- */
.vx-mail .popupmenu, .vx-mail .popover, .vx-mail .ui-dialog, .vx-mail .ui-widget-content,
.vx-mail .dialog .ui-dialog-content, .vx-mail .toolbarmenu, .vx-mail .menu.popupmenu{
  background:var(--panel)!important; color:var(--ink)!important;
  border:1px solid var(--line2)!important; border-radius:14px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.55)!important;
}
.vx-mail .popupmenu a, .vx-mail .toolbarmenu a, .vx-mail .menu a{ color:var(--ink)!important; }
.vx-mail .popupmenu a:hover, .vx-mail .toolbarmenu li a:hover{ background:rgba(255,255,255,.06)!important; }
.vx-mail .popover-header, .vx-mail .ui-dialog-titlebar{ background:transparent!important; color:var(--ink)!important; border-color:var(--line)!important; }

/* ---------- quota / progress ---------- */
.vx-mail .quota_bg, .vx-mail .quota_bar, .vx-mail .progress{ background:rgba(255,255,255,.08)!important; border-radius:999px!important; }
.vx-mail .quota_text_low .bar, .vx-mail .quota_bar .bar, .vx-mail .progress-bar{ background:var(--grad)!important; }

/* ---------- scrollbars ---------- */
.vx-mail *::-webkit-scrollbar{ width:10px; height:10px; }
.vx-mail *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:10px; }
.vx-mail *::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); }
.vx-mail *::-webkit-scrollbar-track{ background:transparent; }

/* ---------- logo ---------- */
.vx-mail .menu-logo, .vx-mail #logo{ background:transparent!important; }
.vx-mail .menu-logo img, .vx-mail #logo img, .vx-mail .logo img{ max-height:30px!important; width:auto!important; }

/* ============================================================
   INBOX polish — roomier, cleaner, more bespoke
   ============================================================ */
.vx-mail #layout-list .header .header-title, .vx-mail #layout-sidebar .header .header-title{ font-weight:800!important; font-size:15px!important; }
.vx-mail #messagelist tbody tr{ cursor:pointer; }
.vx-mail #messagelist tbody tr>td{ padding:15px 16px!important; }
.vx-mail #messagelist td.subject, .vx-mail #messagelist span.subject{ font-size:14px!important; letter-spacing:.004em; }
.vx-mail #messagelist td.fromto, .vx-mail #messagelist span.fromto{ font-size:13.5px!important; }
.vx-mail #messagelist td.date, .vx-mail #messagelist span.date{ font-size:12px!important; }
.vx-mail #mailtoolbar{ padding:4px 8px!important; }
.vx-mail #mailtoolbar a.button{ border-radius:12px!important; padding:7px 12px!important; }
.vx-mail #mailtoolbar a.button:hover{ background:rgba(255,255,255,.08)!important; }
.vx-mail #messagelist-header .header, .vx-mail #messagelist-header{ background:var(--panel)!important; }
/* folder list: section label + spacing */
.vx-mail #mailboxlist li a{ font-size:14px!important; padding:12px 13px!important; }
.vx-mail #folderlist-content{ padding:8px 10px!important; }
/* reading pane message header card spacing */
.vx-mail .messageheaderbox{ padding:16px 18px!important; margin:14px!important; }

/* ============================================================
   LOGIN — premium split-screen (brand panel + login card)
   ============================================================ */
html.vx-mail body.task-login{ display:flex!important; min-height:100vh; background:#070b16!important; }
/* left brand panel (injected by plugin) */
.vx-loginbrand{ position:relative; flex:1.05; padding:56px 60px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  background:
    radial-gradient(1100px 720px at -10% -12%,rgba(99,102,241,.30),transparent 55%),
    radial-gradient(900px 620px at 112% 120%,rgba(14,165,233,.24),transparent 55%),#080d1b; }
.vx-loginbrand::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 43.5H44M43.5 0V44' stroke='rgba(255,255,255,0.028)'/%3E%3C/svg%3E"); }
.vlb-logo{ position:relative; z-index:2; display:flex; align-items:center; gap:13px; }
.vlb-logo img{ height:38px; width:auto; border-radius:8px; }
.vlb-logo b{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.vlb-logo b span{ background:linear-gradient(90deg,#a5b4fc,#7dd3fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vlb-hero{ position:relative; z-index:2; max-width:500px; }
.vlb-hero h1{ font-size:42px; line-height:1.08; font-weight:800; letter-spacing:-.03em; color:#fff; margin:0 0 18px; }
.vlb-hero h1 em{ font-style:normal; background:linear-gradient(90deg,#818cf8,#38bdf8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vlb-hero p{ color:#aeb8cc; font-size:16px; line-height:1.6; margin:0 0 30px; }
.vlb-feats{ display:flex; flex-direction:column; gap:14px; }
.vlb-feat{ display:flex; align-items:center; gap:13px; color:#cdd5e6; font-size:14.5px; }
.vlb-feat .fi{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); flex:none; }
.vlb-feat svg{ width:17px; height:17px; stroke:#9fb3ff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vlb-foot{ position:relative; z-index:2; color:#7b859b; font-size:13px; }
.vlb-foot a{ color:#8aa0ff; font-weight:700; text-decoration:none; }
/* right form side */
html.vx-mail body.task-login #layout{ flex:.95; display:flex!important; align-items:center; justify-content:center; background:transparent!important; padding:32px; height:auto!important; }
body.task-login #layout-content{ background:transparent!important; width:100%; max-width:400px; box-shadow:none!important; border:0!important; }
body.task-login #logo{ display:none!important; }
#vx-lhead{ text-align:center; margin-bottom:24px; }
#vx-lhead h2{ margin:0 0 7px; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
#vx-lhead p{ margin:0; font-size:14px; color:var(--mut); }
/* belt-and-braces: kill any white icon prefix box, force dark */
body.task-login .input-group-text, body.task-login .input-group-text.icon,
body.task-login .input-group-prepend, body.task-login .input-group-prepend .input-group-text{
  background:#0b1120!important; background-color:#0b1120!important; color:var(--mut)!important;
  border:1px solid var(--line)!important; border-right:0!important; box-shadow:none!important; }
/* Elastic builds login fields client-side as .input-group (icon prepend + input).
   Recolor the prepend dark so it reads as a premium icon field. */
body.task-login .input-group{ display:flex!important; width:100%!important; margin-bottom:14px!important; }
body.task-login .input-group-prepend, body.task-login .input-group-text,
body.task-login .input-group .input-group-prepend .input-group-text{
  background:#0b1120!important; border:1px solid var(--line)!important; border-right:0!important;
  color:var(--mut)!important; border-radius:12px 0 0 12px!important; display:flex!important; align-items:center!important; }
body.task-login .input-group-text svg, body.task-login .input-group-prepend svg{ stroke:var(--mut)!important; }
body.task-login .input-group .form-control{ flex:1!important; border-radius:0 12px 12px 0!important; border-left:0!important; }
/* if the server table survives (no JS), hide the white label/icon cell + go full width */
body.task-login #login-form td.title{ display:none!important; }
body.task-login #login-form td.input{ width:100%!important; }
body.task-login #login-form td.input input.form-control{ width:100%!important; }
body.task-login #login-form, body.task-login .box, body.task-login form.propform, body.task-login .formcontent{
  background:rgba(13,20,36,.66)!important; border:1px solid rgba(255,255,255,.09)!important;
  border-radius:20px!important; padding:30px!important; box-shadow:0 40px 100px rgba(0,0,0,.5)!important; backdrop-filter:blur(10px); }
body.task-login .input-group{ margin-bottom:14px; }
body.task-login input.form-control{ background:#0b1120!important; border:1px solid var(--line)!important; color:var(--ink)!important; border-radius:12px!important; height:48px!important; font-size:15px!important; }
body.task-login input:focus{ border-color:var(--vx1)!important; box-shadow:0 0 0 3px rgba(99,102,241,.18)!important; }
body.task-login .formbuttons{ margin-top:8px; }
body.task-login .formbuttons .btn, body.task-login button[type=submit]{
  width:100%; background-image:var(--grad)!important; border:0!important; color:#fff!important;
  border-radius:12px!important; font-weight:800!important; height:48px!important; font-size:15px!important; box-shadow:0 12px 30px rgba(79,70,229,.4)!important; }
body.task-login #login-footer{ text-align:center; color:var(--mut)!important; margin-top:16px; font-size:13px; }
@media(max-width:920px){ .vx-loginbrand{ display:none!important; } html.vx-mail body.task-login{ display:block!important; } html.vx-mail body.task-login #layout{ min-height:100vh; } }