/* =====================================================================
   «سماء الدرور» — mail.2a.qa webmail layer (2026-10-31)
   Loaded after 2a.css. Sign-in is the night sky of this hour; inside,
   indigo ink by day and Suhail's star-yellow by night.
   ===================================================================== */
:root{
  --d-night:#0E1426; --d-deep:#0A0F1E; --d-dusk:#18213F; --d-sand:#EFE6D2; --d-mute:#9AA3B8;
  --d-star:#FFD98A; --d-star-ink:#2A1F05; --d-dawn:#F08A6C; --d-sea:#6FC3B2;
  --2a-primary:#24306A; --2a-primary-dark:#1B2552; --2a-accent:#2E3B7E; --2a-grad:#24306A;
  --d-ui:"Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --d-display:"Amiri","Noto Kufi Arabic",Georgia,serif;
  --d-e:cubic-bezier(.16,1,.3,1);
}
html.dark-mode{ --2a-primary:#FFD98A; --2a-primary-dark:#FFE4AA; --2a-accent:#FFD98A; --2a-grad:#FFD98A }

body, :lang(ar) body, html[lang="ar"] body{ font-family:var(--d-ui) !important }
::selection{ background:rgba(36,48,106,.18) }
.dark-mode ::selection{ background:rgba(255,217,138,.3) }

/* primary actions: star-yellow needs dark ink, not white */
.dark-mode .btn-primary, .dark-mode .button.btn-primary, .dark-mode button.create, .dark-mode .btn.btn-primary,
.dark-mode .toolbar a.button.send, .dark-mode .toolbar a.button.compose, .dark-mode button.compose-button,
.dark-mode #layout-menu .menu li.selected > a, .dark-mode #taskmenu a.button.selected{
  color:var(--d-star-ink) !important;
}
.dark-mode #taskmenu a.button.selected, .dark-mode #layout-menu .menu li.selected > a{
  background:rgba(255,217,138,.14) !important; color:var(--d-star) !important; box-shadow:inset 0 0 0 1px rgba(255,217,138,.3) !important;
}
.dark-mode .treelist li.selected > a, .dark-mode .treelist li.selected > div > a, .dark-mode ul.treelist li.selected a,
.dark-mode .tablist a.selected, .dark-mode .tablist li.selected > a{
  background:rgba(255,217,138,.1) !important; color:var(--d-star) !important; border-inline-start-color:var(--d-star) !important;
}
.dark-mode .treelist li.selected > a *, .dark-mode .treelist li.selected > div > a *{ color:var(--d-star) !important }
.dark-mode .messagelist tr.selected, .dark-mode .messagelist tr.focused.selected{ background:rgba(255,217,138,.1) !important }
.dark-mode .messagelist tr.selected td, .dark-mode .messagelist tr.focused.selected td{ color:var(--d-sand) !important }
.dark-mode *::-webkit-scrollbar-thumb{ background:rgba(239,230,210,.18) }

/* the night rail: Elastic's left task menu */
#layout-menu{ background:linear-gradient(180deg,#0E1426,#0A0F1E) !important; border-inline-end:1px solid rgba(239,230,210,.08) !important }
#layout-menu .menu a, #taskmenu a.button{ color:#C9C6D6 !important }
#layout-menu .menu a:hover, #taskmenu a.button:hover{ color:var(--d-sand) !important; background:rgba(239,230,210,.05) !important }
#taskmenu a.button.selected, #layout-menu .menu li.selected > a{
  background:rgba(255,217,138,.12) !important; color:var(--d-star) !important; box-shadow:inset 0 0 0 1px rgba(255,217,138,.25) !important;
}
body.task-mail #logo, body.task-settings #logo, body.task-addressbook #logo{
  background:transparent !important; border-bottom:1px solid rgba(239,230,210,.08) !important;
}
body.task-mail #logo img, body.task-settings #logo img, body.task-addressbook #logo img{ border-radius:50% !important; box-shadow:0 0 18px rgba(255,217,138,.25) !important }
body.task-mail #logo::after, body.task-settings #logo::after, body.task-addressbook #logo::after,
.dark-mode body.task-mail #logo::after, .dark-mode body.task-settings #logo::after{
  font-family:var(--d-display) !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--d-sand) !important; -webkit-text-fill-color:currentColor !important; background:none !important;
}

/* unread: a small star-yellow mark instead of the blue dot */
.messagelist tr.unread .subject{ color:var(--2a-primary-dark) !important }
.dark-mode .messagelist tr.unread .subject{ color:var(--d-star) !important }

/* --- sign-in: the night sky ------------------------------------------- */
html:has(body.task-login){background:#0A0F1E}
body.task-login, body.task-login.action-none{
  color:var(--d-sand); min-height:100vh; min-height:100dvh;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(239,230,210,.75) 50%,transparent 52%),
    radial-gradient(1px 1px at 22% 42%,rgba(239,230,210,.5) 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 35% 12%,rgba(239,230,210,.6) 50%,transparent 52%),
    radial-gradient(1px 1px at 48% 30%,rgba(239,230,210,.45) 50%,transparent 52%),
    radial-gradient(1.6px 1.6px at 61% 9%,rgba(239,230,210,.8) 50%,transparent 52%),
    radial-gradient(1px 1px at 70% 38%,rgba(239,230,210,.5) 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 83% 20%,rgba(239,230,210,.6) 50%,transparent 52%),
    radial-gradient(1px 1px at 91% 48%,rgba(239,230,210,.4) 50%,transparent 52%),
    radial-gradient(1px 1px at 8% 60%,rgba(239,230,210,.35) 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 55% 56%,rgba(239,230,210,.35) 50%,transparent 52%),
    radial-gradient(140% 70% at 50% 108%,#33406F 0%,#18213F 38%,#0E1426 64%,#0A0F1E 100%) fixed !important;
}
body.task-login::after{
  content:"" !important; position:fixed !important; inset:auto 0 0 0 !important; width:auto !important; height:14vh !important; pointer-events:none; z-index:0; display:block !important;
  border-radius:0 !important; transform:none !important; margin:0 !important; border:0 !important; box-shadow:none !important; opacity:1 !important;
  background:radial-gradient(40vw 10vh at 50% 100%,rgba(240,138,108,.24),transparent),linear-gradient(180deg,transparent,rgba(240,138,108,.10) 70%,rgba(240,138,108,.16)) !important;
  border-top:1px solid rgba(239,230,210,.08) !important;
}
body.task-login::before{ display:none !important }
.rc2a-bg-orb{ display:none !important }
.suhail{position:fixed;inset-inline-start:50%;bottom:calc(14vh - 15px);width:30px;height:30px;margin-inline-start:-15px;z-index:1;color:var(--d-star);
  opacity:0;transform:translateY(24px) scale(.6);transition:transform .9s var(--d-e),opacity .6s var(--d-e);pointer-events:none}
.suhail svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 10px rgba(255,217,138,.9))}
.suhail.peek{opacity:.9;transform:translateY(8px) scale(.8)}
.suhail.risen{opacity:1;transform:translateY(-6vh) scale(1.35)}
@media (prefers-reduced-motion:reduce){.suhail,.suhail.peek,.suhail.risen{transition:none}.suhail.peek{opacity:1;transform:translateY(-14vh) scale(1.1)}}

.rc2a-login-shell{ max-width:400px }
.rc2a-login-card{
  background:rgba(14,20,38,.92); border:0; border-radius:20px; padding:2rem 1.9rem 1.5rem; color:var(--d-sand);
  box-shadow:inset 0 0 0 1px rgba(239,230,210,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.rc2a-brand{ gap:.8rem; margin-bottom:.9rem }
.rc2a-logo{ width:46px; height:46px; border-radius:50%; background:#141B33; box-shadow:inset 0 0 0 1px rgba(239,230,210,.18); color:var(--d-star) }
.rc2a-logo svg{ width:22px; height:22px; fill:currentColor; filter:drop-shadow(0 0 7px rgba(255,217,138,.6)) }
.rc2a-brand-text strong{ font-family:var(--d-display); font-weight:700; font-size:1.75rem; line-height:1.1; color:var(--d-sand); letter-spacing:0 }
.rc2a-brand-text small{ color:var(--d-mute); font-size:.82rem }
.rc2a-dateline{ margin:0 0 1.2rem; font-size:.8rem; color:#C9A97A; min-height:1.2em }
body.task-login .rc2a-login-card form#login-form td.title label{ color:#C9C6D6 !important; font-size:.82rem !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,
body.task-login .rc2a-lang-toggle select{
  background:rgba(10,15,30,.7) !important; border:1px solid rgba(239,230,210,.16) !important; color:var(--d-sand) !important;
  font-size:1rem !important; padding:.8rem .9rem !important; caret-color:var(--d-star);
}
body.task-login input::placeholder{ color:#7F88A0 !important }
body.task-login input:focus, body.task-login .rc2a-lang-toggle select:focus{
  border-color:var(--d-star) !important; background:rgba(10,15,30,.85) !important; box-shadow:0 0 0 3px rgba(255,217,138,.18) !important;
}
body.task-login .rc2a-login-card form#login-form button[type=submit],
body.task-login .rc2a-login-card form#login-form .button.mainaction{
  background:var(--d-star) !important; color:var(--d-star-ink) !important; box-shadow:none !important;
  text-transform:none !important; font-size:1rem !important; font-weight:600 !important; letter-spacing:0 !important;
}
body.task-login .rc2a-login-card form#login-form button[type=submit]:hover{ background:#FFE4AA !important; transform:none !important; box-shadow:none !important }
body.task-login .rc2a-login-card form#login-form button[type=submit]:active{ transform:scale(.98) !important }
body.task-login .rc2a-lang-toggle{ border-top-color:rgba(239,230,210,.1) !important }
body.task-login .rc2a-lang-toggle label{ color:#9AA3B8 !important; font-size:.8rem !important }
.rc2a-login-foot{ color:#7F88A0 }
body.task-login #message{ background:rgba(240,138,108,.12) !important; border-color:rgba(240,138,108,.3) !important; color:#F6B4A0 !important }
body.task-login #message.confirmation{ background:rgba(111,195,178,.12) !important; border-color:rgba(111,195,178,.3) !important; color:var(--d-sea) !important }
body.task-login #message.notice, body.task-login #message.warning{ background:rgba(242,196,109,.12) !important; border-color:rgba(242,196,109,.3) !important; color:#F2C46D !important }
body.task-login *:focus-visible{ outline:2px solid rgba(255,217,138,.6) !important; outline-offset:2px }
@media (max-width:480px){ .rc2a-login-card{ padding:1.6rem 1.25rem 1.2rem } .rc2a-brand-text strong{ font-size:1.5rem } }

.rc2a-brand, .rc2a-brand-text, .rc2a-dateline{ text-align:start }
body.task-login .rc2a-login-card form#login-form td.title, body.task-login .rc2a-login-card form#login-form td.title label,
body.task-login .rc2a-lang-toggle label{ text-align:start !important }

/* task menu: the night rail in both themes */
#taskmenu a, #taskmenu a:before, #layout-menu .special-buttons a, #layout-menu .special-buttons a:before{ color:#C9C6D6 !important }
#taskmenu a.selected, html.dark-mode #taskmenu a.selected{ background:rgba(255,217,138,.12) !important; color:#FFD98A !important }
#taskmenu a.selected:before{ color:#FFD98A !important }
#taskmenu a:hover{ background:rgba(239,230,210,.06) !important }
html.dark-mode #layout-sidebar, html.dark-mode #layout-list{ background:#111832 !important }
html.dark-mode .treelist li.selected > a{ box-shadow:none !important }
html.dark-mode .messagelist tr.unread td.subject .subject a, html.dark-mode .messagelist tr.unread .subject span{ color:#EFE6D2 !important }
/* «ضحى»: one sand family, no stray white columns */
html:not(.dark-mode) body{ background:#F3EDE1 !important }
html:not(.dark-mode) #layout-sidebar, html:not(.dark-mode) #layout-list{ background:#FBF8F1 !important }
html:not(.dark-mode) #layout-content{ background:#F3EDE1 !important }
html:not(.dark-mode) #layout-sidebar .header, html:not(.dark-mode) #layout-list .header, html:not(.dark-mode) #layout-content .header,
html:not(.dark-mode) #layout > div > .footer{ background:transparent !important }
html:not(.dark-mode) .listing li, html:not(.dark-mode) .listing tr, html:not(.dark-mode) table.listing td,
html:not(.dark-mode) .messagelist tr, html:not(.dark-mode) .messagelist td{ background-color:transparent }
html:not(.dark-mode) .listing li.selected, html:not(.dark-mode) .listing li.selected > a, html:not(.dark-mode) .messagelist tr.selected{ background:#E9E6F2 !important }

/* ---- expert panel round (31 Oct) ------------------------------------- */
.rc2a-sidedate{ padding:.1rem 1rem .6rem; font-size:.78rem; color:#8A5A0B; line-height:1.4 }
html.dark-mode .rc2a-sidedate{ color:#C9A97A }
#layout-sidebar > .header .header-title{ font-family:var(--d-display) !important; font-size:1.15rem !important; font-weight:700 !important }
/* text on star-yellow / gold fills must be night ink */
html.dark-mode .tox .tox-dialog__footer .tox-button:not(.tox-button--secondary),
html.dark-mode .floating-action-buttons a.button, html.dark-mode .floating-action-buttons a.button:before,
html.dark-mode #messagestack .alert-info, html.dark-mode #messagestack .alert-info i.icon:before{ color:#2A1F05 !important }
.turnstile2a{ border-radius:10px }
body.task-login #layout-content{padding-bottom:max(1rem,18vh) !important}
/* phones: Cloudflare's full-width check needs a >=300px box; the fields were 299px at 390 so it fell back
   to the small square. Thinner gutters (card 20px off the screen edge) clear it from 360px up.
   Same selectors as 2a.css's `padding:1rem` on both wrappers, which would otherwise win. */
@media (max-width:480px){
  body.task-login #layout, body.task-login #layout > #layout-content{ padding-left:10px !important; padding-right:10px !important }
  body.task-login .rc2a-login-card{ padding-left:14px !important; padding-right:14px !important }
}

/* LIVE pill: the dot is painted inside the pill (it used to be a separate fixed ::before that
   drifted outside whenever the pill's width changed). Start side follows the reading direction. */
body::before{ display:none !important }
body::after{
  content:"LIVE" !important; font-family:var(--d-ui) !important; font-size:.68rem !important; font-weight:600 !important; letter-spacing:.06em !important;
  line-height:1 !important; padding:.42rem .7rem .42rem 1.55rem !important; gap:0 !important;
  color:#C9C6D6 !important; border:1px solid rgba(239,230,210,.14) !important; box-shadow:none !important;
  background:radial-gradient(circle 3.5px at .8rem 50%, #2FA585 96%, transparent 100%), rgba(14,20,38,.82) !important;
  -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
}
html[lang^="ar"] body::after{
  padding:.42rem 1.55rem .42rem .7rem !important;
  background:radial-gradient(circle 3.5px at calc(100% - .8rem) 50%, #2FA585 96%, transparent 100%), rgba(14,20,38,.82) !important;
}
html:not(.dark-mode) body::after{
  color:#3E4566 !important; border-color:rgba(27,33,66,.14) !important;
  background:radial-gradient(circle 3.5px at .8rem 50%, #1A7560 96%, transparent 100%), rgba(251,248,241,.9) !important;
}
html:not(.dark-mode)[lang^="ar"] body::after{
  background:radial-gradient(circle 3.5px at calc(100% - .8rem) 50%, #1A7560 96%, transparent 100%), rgba(251,248,241,.9) !important;
}
/* one pill per window: framed pages (preferences, message preview, folder form…) carry html.iframe */
html.iframe body::after{ display:none !important }
body.task-login::after{ padding:0 !important }
html body.task-login::after, html:not(.dark-mode) body.task-login::after, html[lang^="ar"] body.task-login::after, html:not(.dark-mode)[lang^="ar"] body.task-login::after{
  content:"" !important; color:transparent !important; border:0 !important; border-top:1px solid rgba(239,230,210,.08) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:radial-gradient(40vw 10vh at 50% 100%,rgba(240,138,108,.24),transparent),linear-gradient(180deg,transparent,rgba(240,138,108,.10) 70%,rgba(240,138,108,.16)) !important;
}
/* zoom-audit fixes (1 Nov) */
#taskmenu a.selected, html.dark-mode #taskmenu a.selected{ background:#18213F !important; box-shadow:inset 0 0 0 1px rgba(255,217,138,.22) !important }
html.dark-mode .quota-widget .value{ background-color:#FFD98A !important; opacity:.8 }
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a, html.dark-mode .listing li.selected > div > a{ color:#FFD98A !important; background-color:rgba(255,217,138,.1) !important }
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a, html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span{ color:#FFD98A !important }
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before{ background-color:#FFD98A !important; border-color:#FFD98A !important }
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after{ background-color:#0E1426 !important }
html.dark-mode .popover .menu li a:not(.disabled):hover, html.dark-mode .popupmenu .listing li > a:not(.disabled):hover, html.dark-mode .popupmenu .listing li.selected{ background-color:#1E2850 !important; color:#FFD98A !important }
html.dark-mode .folderlist li.mailbox.recent > a > .unreadcount{ background:#FFD98A !important; color:#2A1F05 !important }
/* zoom-audit round 2 */
html.dark-mode a{ color:#FFD98A }
html.dark-mode .skinitem a, html.dark-mode .skinitem .license a{ color:#C9A97A }
html{ accent-color:#24306A } html.dark-mode{ accent-color:#FFD98A }
html.dark-mode .folderlist li.selected > a, html.dark-mode .folderlist li.mailbox.selected > a{ background:transparent !important }
html.dark-mode .folderlist li.selected, html.dark-mode .listing li.selected{ background-color:#1E2850 !important }
html.dark-mode .listing li.selected > a{ background-color:transparent !important }
/* phone compose footer: Send is a proper rounded action, not a square block glued to the bar edges */
.footer.menu .buttons a.button.primary.send, .footer.toolbar a.button.primary.send{
  border-radius:12px !important; padding:0 1.4rem !important; margin:0 .25rem !important; min-width:5.5rem; height:44px !important; align-self:center; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:#FFD98A !important; color:#2A1F05 !important }
html:not(.dark-mode) .footer.menu .buttons a.button.primary.send, html:not(.dark-mode) .footer.toolbar a.button.primary.send{ background:#24306A !important; color:#F6F0E2 !important }
.footer.menu .buttons a.button.primary.send .inner, .footer.toolbar a.button.primary.send .inner{ line-height:1.15 !important; padding:0 !important }
.footer.menu .buttons a.button.primary.send:before, .footer.toolbar a.button.primary.send:before{ height:20px !important; line-height:20px !important; margin:0 !important }
/* the rail stays night in both themes: light mode must not leak sand separators or the indigo header into it */
html:not(.dark-mode) #layout-menu .popover-header{ background:transparent !important; border-bottom-color:#2A3459 !important }
html:not(.dark-mode) #layout-menu #taskmenu a{ border-color:#1A2340 !important }
@media screen and (max-width:1024px){
  #layout-menu .popover-header #logo{ border-bottom:0 !important }
  #layout-menu .popover-header{ border-bottom:1px solid #2A3459 !important }
}
/* elastic's #2f3a3f rail grey (missed by the recolour map): the rail is night in both themes */
#taskmenu .special-buttons{ background-color:transparent !important }
@media screen and (min-width:481px){ #layout-menu .popover-header{ background-color:transparent !important } }
#rcmdraglayer{ background-color:#0E1426 !important; color:#EFE6D2 !important; box-shadow:0 6px 18px rgba(10,15,30,.35) !important; border:1px solid #2A3459 }
/* recipients: one frame — the ring belongs to the box, not the inner input */
html.dark-mode #compose-content .recipient-input input:focus, html #compose-content .recipient-input input:focus, html #compose-headers .recipient-input input:focus, .recipient-input input:focus{ box-shadow:none !important; border:0 !important; outline:0 !important; background:transparent !important }
.recipient-input:focus-within{ border-color:#24306A !important; box-shadow:0 0 0 3px rgba(36,48,106,.15) !important }
html.dark-mode .recipient-input:focus-within{ border-color:#FFD98A !important; box-shadow:0 0 0 3px rgba(255,217,138,.18) !important }
/* night focus rings are star, not the day indigo (invisible on night) */
html.dark-mode .compose-headers .form-control:focus, html.dark-mode #compose-headers input:focus, html.dark-mode #compose-content input:focus,
html.dark-mode #compose-content textarea:focus, html.dark-mode #mailsearchform input:focus, html.dark-mode input[type=search]:focus,
html.dark-mode .searchbar input[type="text"]:focus, html.dark-mode input.searchfield:focus{ border-color:#FFD98A !important; box-shadow:0 0 0 3px rgba(255,217,138,.18) !important }
/* secondary buttons on day: indigo outline, not elastic's grey */
html:not(.dark-mode) .btn.btn-secondary{ background:transparent !important; border:1px solid #24306A !important; color:#24306A !important }
html:not(.dark-mode) .btn.btn-secondary:hover{ background:#24306A !important; color:#F6F0E2 !important }
/* locked (disabled + on) switches: the theme's own "on" at half strength, not elastic's cyan */
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before{ background-color:#24306A !important; border-color:#24306A !important; opacity:.4 }
html.dark-mode .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before{ background-color:#FFD98A !important; border-color:#FFD98A !important; opacity:.35 }
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::after{ background-color:#F6F0E2 !important }
html.dark-mode .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::after{ background-color:#0E1426 !important }
/* Roundcube 1.7: new message-row hover menu and suspicious-address warning (absent in 1.6, so harmless there) */
.listing-hover-menu{ background-color:#FBF8F1 !important; border-color:#E2D8C5 !important; box-shadow:0 6px 18px rgba(27,33,66,.14) !important; border-radius:10px }
.listing-hover-menu a.button{ color:#24306A !important }
.listing-hover-menu span.txt{ color:#626780 !important }
html.dark-mode .listing-hover-menu{ background-color:#141B33 !important; border-color:#2A3459 !important; box-shadow:0 8px 22px rgba(0,0,0,.45) !important }
html.dark-mode .listing-hover-menu a.button{ color:#E6DECD !important }
html.dark-mode .listing-hover-menu a.button:hover{ color:#FFD98A !important }
html.dark-mode .listing-hover-menu span.txt{ color:#9AA3B8 !important }
.suspicious-address-warning:before{ color:#B27711 !important }
html.dark-mode .suspicious-address-warning:before{ color:#FFD98A !important }

/* Folders (settings): Elastic draws the expand arrow in a 21px box at the top of a 35px row; Durur rows add
   .55rem above and below, so the arrow sat high and, moved down, would cover the folder icon.
   Every row gets the same 22px arrow column so icons stay aligned whether or not a folder has children. */
#subscription-table li > a{ padding-inline-start:1.6rem !important }
#subscription-table .treetoggle{ top:.55rem !important }
#subscription-table .treetoggle:before{ height:100% !important }