/* BillionEdge visual system. Extends Roundcube Elastic and retains its controls. */
:root {
  --be-blue:#2f5fe8;
  --be-blue-hover:#234dd2;
  --be-ink:#161d2a;
  --be-muted:#7a8596;
  --be-line:#e8ebf1;
  --be-canvas:#f2f4f8;
  --be-sidebar:#f8faff;
  --be-paper:#fff;
  --be-card:#f8f9fc;
  --be-active:#e8f0ff;
  --be-radius:18px;
}

html,body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important; -webkit-font-smoothing:antialiased; }
body { color:var(--be-ink); background:var(--be-canvas) !important; }
a,button,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--be-blue) !important; outline-offset:2px; }

/* Window and three functional mail panes. */
#layout {
  background:var(--be-paper) !important;
  box-shadow:0 24px 70px rgba(29,42,69,.07);
}
#layout-menu,#layout-sidebar,#layout-list,#layout-content { box-sizing:border-box; }
#layout-menu { background:#fbfcff !important; border-right:1px solid var(--be-line); }
#layout-sidebar { background:var(--be-sidebar) !important; border-right:1px solid var(--be-line) !important; }
#layout-list { background:var(--be-paper) !important; border-right:1px solid var(--be-line) !important; }
#layout-content { background:var(--be-paper) !important; }

/* Compact task switcher: Mail, Contacts, Settings stay accessible. */
#layout-menu .popover-header { background:transparent !important; }
#layout-menu .popover-header #logo { object-fit:contain; background:#fff; border-radius:9px; }
#taskmenu { background:transparent !important; }
#taskmenu a { color:#8994a5 !important; border-radius:13px; }
#taskmenu a:hover { color:#354d7f !important; background:#eff3fa !important; }
#taskmenu a.selected { color:var(--be-blue) !important; background:#eaf0ff !important; }
#taskmenu a.compose { color:var(--be-blue) !important; }

/* Brand, sidebar, and folder navigation. */
.be-brandbar { padding:31px 30px 18px; height:87px; display:flex; align-items:center; }
.be-brandbar img { width:196px; height:auto; display:block; max-width:100%; }
#layout-sidebar > .header { background:transparent !important; border:0 !important; padding:0 28px; min-height:46px; }
#layout-sidebar .header-title.username { font-size:13px; font-weight:500; color:#8290a2 !important; letter-spacing:-.01em; }
#layout-sidebar .sidebar-menu { color:#96a2b2; }
.be-compose { padding:18px 28px 11px; }
.be-compose-button {
  display:flex !important; align-items:center; justify-content:center; gap:11px;
  width:100%; min-height:49px; border-radius:12px !important; text-decoration:none !important;
  background:var(--be-blue) !important; color:#fff !important;
  box-shadow:0 8px 16px rgba(47,95,232,.13);
  font-size:14px; font-weight:600; transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.be-compose-button::before { content:"+"; font-size:24px; font-weight:300; line-height:1; margin-top:-2px; }
.be-compose-button:hover { color:#fff !important; background:var(--be-blue-hover) !important; box-shadow:0 10px 19px rgba(47,95,232,.18); transform:translateY(-1px); }
.be-section-label { margin:18px 30px 10px; color:#8b96a6; font-size:11px; font-weight:700; letter-spacing:.105em; }
#folderlist-content { padding:0 14px 16px; }
#mailboxlist, #mailboxlist .listing { background:transparent !important; }
#mailboxlist li { margin:2px 0; border:0 !important; background:transparent !important; }
#mailboxlist li > a {
  min-height:44px; display:flex; align-items:center; gap:9px;
  border-radius:10px !important; padding:0 14px !important;
  color:#445166 !important; font-size:14px; font-weight:500; text-decoration:none;
  background:transparent !important;
}
#mailboxlist li > a:hover { background:#edf3ff !important; color:var(--be-blue) !important; }
#mailboxlist li.selected > a { background:var(--be-active) !important; color:var(--be-blue) !important; font-weight:650; }
#mailboxlist li .unreadcount { margin-left:auto; color:var(--be-blue); font-weight:650; }
#layout-sidebar .footer { background:transparent !important; border:0 !important; }

/* List toolbar, search, and message cards. */
#messagelist-header { min-height:87px; background:#fff !important; border-bottom:1px solid var(--be-line) !important; }
#messagelist-header .header-title { color:var(--be-ink) !important; font-size:18px; font-weight:650; letter-spacing:-.035em; }
#messagelist-header .toolbar { background:transparent !important; }
.toolbar a, .toolbar .button { border-radius:8px !important; }
.toolbar a:hover, .toolbar .button:hover { background:#f1f4f9 !important; }
#mailsearchform { margin:17px 18px 9px; border:1px solid #e8ebf1 !important; border-radius:11px !important; background:#f8f9fc !important; }
#mailsearchform input { background:transparent !important; border:0 !important; box-shadow:none !important; font-size:14px; }
#messagelist-content { padding:0 10px 12px; background:#fff; }
#messagelist { border-collapse:separate !important; border-spacing:0 8px !important; }
#messagelist tbody tr { background:var(--be-card); transition:background .16s ease,box-shadow .16s ease; }
#messagelist tbody tr:hover { background:#eef4ff !important; }
#messagelist tbody tr.selected { background:#e5efff !important; }
#messagelist tbody tr td {
  background:transparent !important; border-top:1px solid #e8ecf2 !important;
  border-bottom:1px solid #e8ecf2 !important; padding-top:14px !important; padding-bottom:14px !important;
}
#messagelist tbody tr td:first-child { border-left:1px solid #e8ecf2 !important; border-radius:14px 0 0 14px; }
#messagelist tbody tr td:last-child { border-right:1px solid #e8ecf2 !important; border-radius:0 14px 14px 0; }
#messagelist tbody tr.selected td { border-color:#d5e6ff !important; }
#messagelist tbody tr.unread td { color:var(--be-ink); }
#messagelist .subject { color:#293547; }
#layout-list .footer { background:#fff !important; border-top:1px solid var(--be-line) !important; }

/* Reader and compose panes. Keep actual message HTML untouched. */
#layout-content > .header { background:#fff !important; border-bottom:1px solid var(--be-line) !important; min-height:87px; }
#layout-content > .header .toolbar { background:transparent !important; }
#layout-content .iframe-wrapper { background:#fff; }
.popupmenu,.ui-dialog { border:1px solid var(--be-line) !important; border-radius:14px !important; box-shadow:0 18px 45px rgba(18,30,54,.12) !important; }
.form-control,input[type=text],input[type=email],input[type=password],textarea,select { border-radius:10px; }
.btn-primary,button.mainaction,input.mainaction,.button.mainaction { background:var(--be-blue) !important; border-color:var(--be-blue) !important; border-radius:10px !important; color:#fff !important; }
.btn-primary:hover,button.mainaction:hover,input.mainaction:hover { background:var(--be-blue-hover) !important; }

/* Purpose-built sign in screen; Roundcube still supplies the real form. */
body.task-login { background:#f5f7fb !important; }
body.task-login #layout { display:block !important; height:100dvh !important; min-height:640px; box-shadow:none !important; overflow:auto; background:#f5f7fb !important; }
.be-login-page { min-height:100dvh; padding:clamp(18px,4vw,46px); display:flex; flex-direction:column; }
.be-login-shell { flex:1; display:grid; grid-template-columns:minmax(340px, .91fr) minmax(400px, 1.09fr); max-width:1180px; width:100%; margin:auto; min-height:650px; background:#fff; border:1px solid #e9edf3; border-radius:25px; overflow:hidden; box-shadow:0 28px 80px rgba(30,44,72,.09); }
.be-login-aside { display:flex; flex-direction:column; position:relative; overflow:hidden; background:#eff4fc; padding:clamp(32px,4vw,56px); text-align:left; }
.be-login-aside::after { content:""; position:absolute; width:470px; height:470px; border-radius:50%; right:-230px; bottom:-250px; border:1px solid rgba(80,115,186,.12); box-shadow:0 0 0 90px rgba(255,255,255,.19),0 0 0 180px rgba(255,255,255,.12); pointer-events:none; }
.be-login-brand { position:relative; z-index:1; }
.task-login #logo { position:static !important; top:auto !important; display:block; width:min(240px,100%) !important; max-height:none !important; height:auto !important; }
.be-login-aside-copy { position:relative; z-index:1; margin:auto 0; }
.be-login-dots { display:flex; gap:10px; margin-bottom:28px; }
.be-login-dots i { display:block; width:11px; height:11px; border-radius:50%; background:#ff654e; }
.be-login-dots i:nth-child(2) { background:#c9ced4; }
.be-login-dots i:nth-child(3) { background:#397d2d; }
.be-login-lead { font-size:clamp(33px,3.2vw,48px); line-height:1.13; letter-spacing:-.055em; font-weight:650; color:#182236; margin:0; }
.be-login-caption { margin:18px 0 0; color:#67778d; font-size:15px; }
.be-login-company { position:relative; z-index:1; margin:0; color:#718096; font-size:12px; }
body.task-login #layout-content.be-login-main { width:auto !important; height:auto !important; display:grid !important; place-items:center; padding:clamp(28px,7vw,100px); text-align:left !important; background:#fff !important; }
.be-login-panel { width:min(400px,100%); }
.be-login-eyebrow { color:var(--be-blue); font-size:11px; font-weight:750; letter-spacing:.14em; }
.be-login-panel h2 { font-size:clamp(31px,3vw,40px); line-height:1.1; letter-spacing:-.052em; font-weight:650; color:var(--be-ink); margin:17px 0 10px; }
.be-login-subtitle { margin:0 0 32px; color:#78859a; font-size:14px; }
#login-form { position:static !important; top:auto !important; margin:0 !important; width:100% !important; max-width:none !important; text-align:left !important; }
#login-form .row { margin:0 0 16px; }
#login-form label { color:#374257; font-size:13px; font-weight:600; }
#login-form input[type=text],#login-form input[type=password] { min-height:51px; border-radius:11px !important; border:1px solid #dde4ee !important; background:#fafbfe !important; box-shadow:none !important; padding:0 14px; font-size:15px; }
#login-form input:focus { outline:none !important; border-color:#6990f7 !important; box-shadow:0 0 0 4px rgba(47,95,232,.10) !important; }
#rcmloginsubmit { width:100%; min-height:51px; margin:9px 0 0; border:0 !important; border-radius:11px !important; background:var(--be-blue) !important; color:#fff !important; font-size:15px; font-weight:650; box-shadow:0 8px 18px rgba(47,95,232,.18); }
#login-footer { display:block; padding-top:26px; text-align:center; color:#8590a0; font-size:12px; }
#login-footer a { color:var(--be-blue); text-decoration:none; font-weight:600; }
#login-footer a:hover { text-decoration:underline; }
.be-login-legal { width:100%; max-width:1180px; margin:18px auto 0; display:flex; justify-content:space-between; gap:16px; color:#929cac; font-size:12px; }
.be-login-legal a { color:inherit; text-decoration:none; }
.be-login-legal a:hover { color:var(--be-blue); }
.be-login-mobile-brand { display:none; }

@media (min-width:1150px) {
  body:not(.task-login) #layout { width:calc(100vw - 48px); height:calc(100dvh - 48px); min-height:570px; margin:24px auto; border:1px solid #e7eaf0; border-radius:22px; overflow:hidden; }
  body.task-mail #layout-menu { width:68px !important; min-width:68px !important; flex:0 0 68px !important; }
  body.task-mail #layout-menu .popover-header { height:87px !important; padding:14px 10px !important; }
  body.task-mail #layout-menu .popover-header #logo { display:none !important; }
  body.task-mail #layout-menu .popover-header::before {
    content:""; width:8px; height:8px; border-radius:50%; background:#ff654e;
    box-shadow:12px 0 #c9ced4,24px 0 #397d2d; transform:translateX(-12px);
  }
  body.task-mail #taskmenu a { width:48px; height:48px; margin:4px auto; padding:0 !important; display:grid; place-items:center; }
  body.task-mail #taskmenu a .inner { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  body.task-mail #taskmenu .action-buttons { display:none !important; }
  body.task-mail #layout-sidebar { width:270px !important; min-width:270px !important; flex:0 0 270px !important; }
  body.task-mail #layout-list { width:390px !important; min-width:330px !important; flex:0 1 390px !important; }
  body.task-mail #layout-content { min-width:350px !important; flex:1 1 auto !important; }
}

@media (max-width:1149px) {
  body:not(.task-login) #layout { margin:0; width:100%; height:100dvh; min-height:0; border-radius:0; box-shadow:none; }
  .be-brandbar { display:none; }
  .be-compose { display:none; }
  .be-section-label { display:none; }
  #layout-sidebar > .header { padding:0 15px; background:#fff !important; border-bottom:1px solid var(--be-line) !important; }
  #folderlist-content { padding:8px 12px; }
  #messagelist-header, #layout-content > .header { min-height:60px; }
  #messagelist { border-spacing:0 5px !important; }
}
@media (max-width:820px) {
  .be-login-page { padding:14px; }
  .be-login-shell { min-height:0; max-width:540px; grid-template-columns:1fr; }
  .be-login-aside { display:none; }
  body.task-login #layout-content.be-login-main { min-height:570px; padding:36px 32px; display:flex !important; flex-direction:column; align-items:stretch; justify-content:center; }
  .be-login-mobile-brand { display:block; margin:0 auto 53px; width:min(230px,70%); }
  .be-login-mobile-brand img { width:100%; height:auto; }
  .be-login-panel { margin:0 auto; }
  .be-login-legal { max-width:540px; padding:0 10px; }
}
@media (max-width:480px) {
  .be-login-page { padding:0; }
  .be-login-shell { border:0; border-radius:0; box-shadow:none; min-height:100dvh; }
  body.task-login #layout-content.be-login-main { padding:35px 25px 64px; }
  .be-login-legal { background:#fff; margin:0; padding:0 25px 26px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }