/* =====================================================================
   2a.qa Mail · custom skin overrides on top of Elastic
   ===================================================================== */

/* Typography */
body{
  font-family:'Inter','Tajawal','Segoe UI','Helvetica Neue',Arial,system-ui,-apple-system,sans-serif !important;
}
:lang(ar) body, html[lang="ar"] body{
  font-family:'Tajawal','Segoe UI','Helvetica Neue',Arial,system-ui,-apple-system,sans-serif !important;
}

/* Brand color overrides */
:root{
  --2a-primary:#2563eb;
  --2a-primary-dark:#1d4ed8;
  --2a-accent:#8b5cf6;
  --2a-grad:linear-gradient(135deg,#2563eb 0%,#8b5cf6 100%);
}

a, a:hover, a:focus{ color:var(--2a-primary); }

/* Primary buttons */
.btn-primary, .button.btn-primary, button.create, .btn.btn-primary, .btn-primary:focus{
  background-color:var(--2a-primary) !important;
  border-color:var(--2a-primary) !important;
  color:#fff !important;
}
.btn-primary:hover{ background-color:var(--2a-primary-dark) !important; border-color:var(--2a-primary-dark) !important; }

/* Selected message in list */
.messagelist tr.selected, .messagelist tr.focused.selected{
  background-color:rgba(37,99,235,0.08) !important;
  border-inline-start:3px solid var(--2a-primary) !important;
}
.messagelist tr.unread{ font-weight:600 }
.messagelist tr.unread .subject{ color:var(--2a-primary-dark) !important; }

/* Folder tree active */
.treelist li.selected > a, ul.treelist li.selected > div > a{
  background-color:rgba(37,99,235,0.10) !important;
  color:var(--2a-primary-dark) !important;
}

/* Toolbar primary actions */
.toolbar a.button.send, .toolbar a.button.compose, button.compose-button{
  background:var(--2a-primary) !important;
  border-color:var(--2a-primary) !important;
  color:#fff !important;
}

/* =====================================================================
   LOGIN PAGE — glassmorphism redesign + aggressive layout reset
   ===================================================================== */

body.task-login,
body.task-login.action-none{
  background:#0b1220 !important;
  background-image:
    radial-gradient(60% 80% at 20% 20%, rgba(30,58,138,0.85) 0%, transparent 60%),
    radial-gradient(60% 80% at 80% 70%, rgba(109,40,217,0.85) 0%, transparent 60%),
    #0b1220 !important;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
}

/* Hide screen-reader title + Elastic's default logo + footer */
body.task-login h1.voice,
body.task-login #logo,
body.task-login #login-footer,
body.task-login #message-content,
body.task-login .formbuttons{ /* we'll re-show formbuttons inside form */ }

body.task-login h1.voice,
body.task-login #logo,
body.task-login #login-footer{ display:none !important; }

/* Elastic icons before labels — kill them all */
body.task-login td.title::before,
body.task-login td.title label::before,
body.task-login td.title label::after,
body.task-login label[for=rcmloginuser]::before,
body.task-login label[for=rcmloginpwd]::before,
body.task-login label.icon-user::before,
body.task-login label.icon-password::before,
body.task-login .input-group-prepend,
body.task-login .input-group-text{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Force layout-content to be a flex centerer */
body.task-login #layout,
body.task-login #layout > #layout-content,
body.task-login #layout-content{
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100vh !important;
  padding:1rem !important;
  position:static !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
}

/* Force the login form to flow inline inside our card (override Elastic's positioning) */
body.task-login form#login-form{
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
}

/* Decorative orbs */
.rc2a-bg-orb{
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}
.rc2a-bg-orb-1{ top:-100px; left:-100px; width:340px; height:340px; background:#3b82f6 }
.rc2a-bg-orb-2{ bottom:-120px; right:-100px; width:380px; height:380px; background:#a855f7 }
.rc2a-bg-orb-3{ top:40%; right:30%; width:220px; height:220px; background:#06b6d4; opacity:.35 }

/* Shell + card */
.rc2a-login-shell{
  position:relative;
  width:100%;
  max-width:440px;
  margin:0 auto;
  z-index:2;
}
.rc2a-login-card{
  background:rgba(17, 24, 39, 0.62);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:2.25rem 2rem 1.75rem;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 10px 30px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  color:#e5edff;
}

.rc2a-brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1.5rem;
}
.rc2a-logo{
  width:56px; height:56px;
  border-radius:14px;
  background:var(--2a-grad);
  color:#fff;
  font-weight:800;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(37,99,235,0.45);
  font-family:'Inter',system-ui,sans-serif;
  flex-shrink:0;
}
.rc2a-brand-text strong{
  display:block;
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:-0.01em;
}
.rc2a-brand-text small{
  display:block;
  color:#9ca3b8;
  font-size:.82rem;
  margin-top:.15rem;
}

/* Restyle Elastic's loginform table */
body.task-login .rc2a-login-card form#login-form table,
body.task-login .rc2a-login-card form#login-form tbody,
body.task-login .rc2a-login-card form#login-form thead{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}
body.task-login .rc2a-login-card form#login-form tr{
  display:block !important;
  margin-bottom:.85rem !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
}
body.task-login .rc2a-login-card form#login-form td{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
}
body.task-login .rc2a-login-card form#login-form td.title{
  margin-bottom:.35rem !important;
}
body.task-login .rc2a-login-card form#login-form td.title label{
  color:#cbd5e1 !important;
  font-weight:500 !important;
  font-size:.85rem !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  display:block !important;
  letter-spacing:.01em !important;
}
body.task-login .rc2a-login-card form#login-form input[type=text],
body.task-login .rc2a-login-card form#login-form input[type=password],
body.task-login .rc2a-login-card form#login-form input[type=email],
body.task-login .rc2a-login-card form#login-form input.form-control{
  width:100% !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:10px !important;
  color:#e5edff !important;
  padding:.7rem .9rem !important;
  font-size:14.5px !important;
  font-family:inherit !important;
  transition:all .15s !important;
  box-shadow:none !important;
  height:auto !important;
  margin:0 !important;
  display:block !important;
  -webkit-appearance:none;
  appearance:none;
}
body.task-login input::placeholder{ color:#6b7390 !important }
body.task-login input:focus{
  outline:0 !important;
  border-color:#60a5fa !important;
  background:rgba(255,255,255,0.09) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,0.25) !important;
}

/* Submit button — restyle Elastic's <p class="formbuttons"><button>...</button></p> */
body.task-login .rc2a-login-card form#login-form p.formbuttons{
  margin:1.1rem 0 0 0 !important;
  padding:0 !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
}
body.task-login .rc2a-login-card form#login-form button[type=submit],
body.task-login .rc2a-login-card form#login-form .button.mainaction{
  width:100% !important;
  background:var(--2a-grad) !important;
  border:0 !important;
  border-radius:10px !important;
  color:#fff !important;
  padding:.85rem 1.2rem !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  cursor:pointer !important;
  transition:transform .12s, box-shadow .15s !important;
  box-shadow:0 8px 22px rgba(37,99,235,0.4) !important;
  letter-spacing:.01em !important;
  height:auto !important;
  text-transform:uppercase;
  font-family:inherit !important;
}
body.task-login .rc2a-login-card form#login-form button[type=submit]:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 28px rgba(37,99,235,0.55) !important;
}

/* Footer */
.rc2a-login-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  margin-top:1.25rem;
  color:#7a87aa;
  font-size:.78rem;
}
.rc2a-login-foot .rc2a-dot{ opacity:.4 }

/* Error / notice messages */
body.task-login #message{
  background:rgba(239,68,68,0.12) !important;
  border:1px solid rgba(239,68,68,0.3) !important;
  color:#fecaca !important;
  border-radius:10px !important;
  padding:.7rem .9rem !important;
  margin-bottom:1rem !important;
  font-size:.85rem !important;
}
body.task-login #message.confirmation{
  background:rgba(16,185,129,0.12) !important;
  border-color:rgba(16,185,129,0.3) !important;
  color:#bbf7d0 !important;
}
body.task-login #message.notice, body.task-login #message.warning{
  background:rgba(245,158,11,0.12) !important;
  border-color:rgba(245,158,11,0.3) !important;
  color:#fde68a !important;
}

/* Mobile login tweaks */
@media (max-width: 480px){
  .rc2a-login-card{ padding:1.75rem 1.25rem 1.25rem; border-radius:14px }
  .rc2a-logo{ width:46px; height:46px; font-size:1.15rem }
  .rc2a-brand-text strong{ font-size:1.05rem }
}

/* =====================================================================
   L1 — POST-LOGIN POLISH (inbox / compose / settings)
   CSS overlays on top of Elastic — no template changes.
   ===================================================================== */

/* Brand variables for the inside experience */
body.task-mail, body.task-settings, body.task-addressbook{
  --2a-blue-soft: rgba(37,99,235,0.10);
  --2a-blue-mid:  rgba(37,99,235,0.18);
  --2a-grad-soft: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(139,92,246,0.10) 100%);
}

/* ─── Brand area at top of left sidebar ─────────────────────────────── */
body.task-mail #logo,
body.task-settings #logo,
body.task-addressbook #logo,
body.task-mail .navbar-brand,
body.task-settings .navbar-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.4rem !important;
  padding:.85rem .5rem 1rem !important;
  text-decoration:none !important;
  position:relative !important;
  background:linear-gradient(180deg, rgba(99,102,241,0.12) 0%, transparent 100%) !important;
  border-bottom:1px solid rgba(99,102,241,0.15) !important;
  margin:0 !important;
  width:100% !important;
}
body.task-mail #logo img,
body.task-settings #logo img,
body.task-addressbook #logo img{
  width:42px !important;
  height:42px !important;
  border-radius:10px !important;
  box-shadow:0 6px 18px rgba(99,102,241,0.45) !important;
  display:block !important;
}
body.task-mail #logo::after,
body.task-settings #logo::after,
body.task-addressbook #logo::after{
  content:"2a Mail";
  display:block;
  font-family:'Inter','Tajawal',system-ui,sans-serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#cbd5e1;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
}
.dark-mode body.task-mail #logo::after,
.dark-mode body.task-settings #logo::after{
  color:#aebbe0;
  background:linear-gradient(135deg, #93c5fd 0%, #c4b5fd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ─── Top task menu (left sidebar in widescreen) ─────────────────────── */
#layout-menu .menu li.selected > a,
#taskmenu a.button.selected,
.layout-menu li.selected > a{
  color:#fff !important;
  background:var(--2a-grad) !important;
  box-shadow:0 4px 14px rgba(99,102,241,0.4);
}
#layout-menu .menu li > a:hover,
.layout-menu li > a:hover{
  background:var(--2a-blue-soft) !important;
  color:var(--2a-primary-dark) !important;
}

/* ─── Toolbar (top action bar: Compose, Reply, Forward, etc.) ────────── */
/* Toolbar — gentle polish, NOT aggressive (preserves all icons + spacing) */
.toolbar a.button.compose,
.toolbar a.button.send{
  color:var(--2a-primary-dark) !important;
}
.toolbar a.button.compose .inner,
.toolbar a.button.send .inner{ color:inherit !important }
.toolbar a.button:hover{
  background:var(--2a-blue-soft) !important;
  color:var(--2a-primary-dark) !important;
}

/* ─── Folder tree (left panel) ───────────────────────────────────────── */
.treelist{ padding:.25rem }
.treelist li > a,
.treelist li > div > a,
ul.treelist li a{
  border-radius:8px !important;
  padding:.55rem .75rem !important;
  margin:1px 0 !important;
  transition:all .12s;
}
.treelist li > a:hover,
.treelist li > div > a:hover{
  background:var(--2a-blue-soft) !important;
  color:var(--2a-primary-dark) !important;
}
.treelist li.selected > a,
.treelist li.selected > div > a,
ul.treelist li.selected a{
  background:var(--2a-grad-soft) !important;
  color:var(--2a-primary-dark) !important;
  font-weight:600 !important;
  border-inline-start:3px solid var(--2a-primary) !important;
  padding-inline-start:calc(.75rem - 3px) !important;
}

/* unread count badge in folder list */
.treelist li.unread > a .unreadcount,
.treelist li > a .unreadcount{
  background:var(--2a-grad) !important;
  color:#fff !important;
  border-radius:99px !important;
  padding:.05rem .5rem !important;
  font-size:.72rem !important;
  font-weight:600 !important;
  border:0 !important;
}

/* ─── Message list (Inbox rows) ──────────────────────────────────────── */
.messagelist{ font-family:inherit }
.messagelist thead th{
  background:linear-gradient(90deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 100%) !important;
  font-weight:600 !important;
  color:#475569 !important;
  border-bottom:1px solid rgba(99,102,241,0.15) !important;
}
.dark-mode .messagelist thead th{ color:#aebbe0 !important }

.messagelist tr{
  transition:background .15s !important;
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.dark-mode .messagelist tr{ border-bottom-color:rgba(255,255,255,0.04) }

.messagelist tr:hover{
  background:var(--2a-blue-soft) !important;
}

/* unread row: bolder + blue dot */
.messagelist tr.unread{
  font-weight:600 !important;
  position:relative;
}
.messagelist tr.unread > td:first-child::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--2a-grad);
  box-shadow:0 0 8px rgba(59,130,246,0.6);
  margin-inline-end:.5rem;
  vertical-align:middle;
}
.messagelist tr.unread .subject{ color:var(--2a-primary-dark) !important }
.dark-mode .messagelist tr.unread .subject{ color:#93c5fd !important }
.messagelist tr.unread .fromto{ color:var(--text); font-weight:700 !important }

/* selected row with stronger brand presence */
.messagelist tr.selected,
.messagelist tr.focused.selected{
  background:var(--2a-grad-soft) !important;
  border-inline-start:3px solid var(--2a-primary) !important;
}

/* ─── Message preview (when a message is opened) ─────────────────────── */
.messageheader{
  padding:1rem 1.25rem !important;
  background:linear-gradient(180deg, rgba(59,130,246,0.04) 0%, transparent 100%) !important;
  border-bottom:1px solid rgba(99,102,241,0.1) !important;
}
.messageheader .subject{
  font-size:1.2rem !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}
.messageheader .header-from .from{
  font-weight:600 !important;
  color:var(--text) !important;
}

/* ─── Compose window ─────────────────────────────────────────────────── */
.compose-headers .form-control,
#compose-headers input,
#compose-content input[type=text],
#compose-content textarea{
  border-radius:8px !important;
  transition:border-color .12s, box-shadow .12s !important;
}
.compose-headers .form-control:focus,
#compose-headers input:focus,
#compose-content input:focus,
#compose-content textarea:focus{
  border-color:var(--2a-primary) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15) !important;
}
/* don't touch editor toolbar — TinyMCE has its own layout */

/* ─── Settings tabs (preferences, identities, etc.) ──────────────────── */
.tablist{ gap:.4rem; padding:.5rem }
.tablist a, .tablist li > a{
  border-radius:8px !important;
  padding:.55rem 1rem !important;
  transition:all .15s;
  font-weight:500 !important;
}
.tablist a:hover, .tablist li > a:hover{
  background:var(--2a-blue-soft) !important;
}
.tablist a.selected,
.tablist li.selected > a,
.tablist a[aria-selected=true]{
  background:var(--2a-grad) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(99,102,241,0.4) !important;
  font-weight:600 !important;
}

/* ─── Form buttons throughout ────────────────────────────────────────── */
button.btn-primary, .btn-primary,
button.button.mainaction, button.mainaction{
  background:var(--2a-grad) !important;
  border:0 !important;
  border-radius:8px !important;
  color:#fff !important;
  padding:.5rem 1.1rem !important;
  font-weight:600 !important;
  box-shadow:0 4px 12px rgba(99,102,241,0.3) !important;
  transition:all .15s !important;
}
button.btn-primary:hover, .btn-primary:hover,
button.button.mainaction:hover, button.mainaction:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 8px 18px rgba(99,102,241,0.45) !important;
}

/* secondary buttons get brand-aware borders on hover */
button.btn-secondary, .btn-secondary{
  border-radius:8px !important;
  transition:all .15s;
}
button.btn-secondary:hover, .btn-secondary:hover{
  border-color:var(--2a-primary) !important;
  color:var(--2a-primary-dark) !important;
}

/* ─── Search bar at top of inbox ─────────────────────────────────────── */
#mailsearchform input,
.searchfilter input,
input[type=search]{
  border-radius:99px !important;
  padding-inline-start:2.5rem !important;
  padding-inline-end:1rem !important;
  transition:all .15s !important;
}
#mailsearchform input:focus,
input[type=search]:focus{
  border-color:var(--2a-primary) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* ─── Avatars / from-icons (auto-generated by Roundcube) ─────────────── */
.contact-photo, .contactphoto, .header-from .contact-photo{
  border-radius:50% !important;
  border:2px solid rgba(99,102,241,0.2) !important;
}

/* ─── Status / alert messages ────────────────────────────────────────── */
#message.notice{
  background:var(--2a-grad-soft) !important;
  border:1px solid rgba(99,102,241,0.2) !important;
  border-radius:10px !important;
}
#message.confirmation{
  background:rgba(16,185,129,0.1) !important;
  border:1px solid rgba(16,185,129,0.3) !important;
  border-radius:10px !important;
}

/* ─── Dark mode polish for all the above ─────────────────────────────── */
.dark-mode body.task-mail,
.dark-mode body.task-settings,
.dark-mode body.task-addressbook{
  --2a-blue-soft: rgba(96,165,250,0.10);
  --2a-blue-mid:  rgba(96,165,250,0.20);
  --2a-grad-soft: linear-gradient(135deg, rgba(96,165,250,0.12) 0%, rgba(167,139,250,0.12) 100%);
}
.dark-mode .messagelist tr:hover{ background:rgba(96,165,250,0.08) !important }
.dark-mode .messagelist tr.unread .subject{ color:#93c5fd !important }
.dark-mode .messageheader{ background:linear-gradient(180deg, rgba(96,165,250,0.06) 0%, transparent 100%) !important }
.dark-mode .messagelist thead th{
  background:linear-gradient(90deg, rgba(96,165,250,0.06) 0%, rgba(167,139,250,0.04) 100%) !important;
  border-bottom-color:rgba(96,165,250,0.15) !important;
}

/* ─── Smooth scrollbars (subtle but pleasant) ────────────────────────── */
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-thumb{ background:rgba(99,102,241,0.25); border-radius:99px }
*::-webkit-scrollbar-thumb:hover{ background:rgba(99,102,241,0.4) }
*::-webkit-scrollbar-track{ background:transparent }
.dark-mode *::-webkit-scrollbar-thumb{ background:rgba(96,165,250,0.25) }

/* ─── A bit more breathing room for everything ───────────────────────── */
body.task-mail #layout,
body.task-settings #layout{
  font-size:14px;
}
.messagelist td{ padding:.7rem .65rem !important }
.compose-headers td{ padding:.45rem .55rem !important }