/*
 * FAJARDO WEBMAIL PREMIUM 2.1 / HUMAN-CENTERED HERO EDITION
 * Brand palette provided by Fajardo. CSS overrides ONLY; Roundcube auth
 * fields/submit/CSRF are rendered by Roundcube's native loginform object.
 * Styles are namespaced to task-login or the existing app interface.
 */
:root {
  --fj-navy: #061c2b;
  --fj-navy2: #0e3446;
  --fj-petrol: #087b8c;
  --fj-gold: #d8a55b;
  --fj-gold-light: #f5c77d;
  --fj-gold-ink: #9c6b32;
  --fj-ivory: #f9f6f0;
  --fj-paper: #fbfaf7;
  --fj-ink: #102c3b;
  --fj-muted: #516775;
  --fj-line: #dce5e4;
  --fj-serif: Georgia, 'Times New Roman', serif;
  --fj-sans: 'Segoe UI', Arial, Helvetica, sans-serif;
}
body { font-family: var(--fj-sans); -webkit-font-smoothing: antialiased; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #b97c29;
  outline-offset: 3px;
}

/* Roundcube base skin has a fixed-height, centered authentication container.
   Reset it ONLY for the login task; keep the working app shell untouched. */
html:has(body.task-login) { min-height: 100%; overflow-x: hidden; }
body.task-login,
body.task-login.action-none {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--fj-ivory) !important;
  color: var(--fj-ink) !important;
}
body.task-login #layout,
body.task-login #layout-content {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: none !important;
}
body.task-login .fj-auth-page,
body.task-login .fj-auth-page * { box-sizing: border-box; }
body.task-login .fj-auth-page { min-width: 0; min-height: 100vh; min-height: 100dvh; }
body.task-login .fj-auth-container { width: min(1320px, calc(100% - 104px)); margin-inline: auto; }

/* Fajardo's signature dark masthead. */
body.task-login .fj-auth-topbar {
  position: relative;
  z-index: 3;
  background: #061c2b;
  border-bottom: 1px solid rgba(237,192,125,.24);
  box-shadow: 0 7px 24px rgba(5,24,37,.12);
}
body.task-login .fj-auth-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  gap: 24px;
}
body.task-login .fj-auth-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 14px;
  color: #fff !important;
  text-decoration: none !important;
}
body.task-login .fj-auth-brand-icon { display:block; width: 44px; height: 52px; object-fit: contain; }
body.task-login .fj-auth-brand-type { display:flex; flex-direction:column; gap: 5px; }
body.task-login .fj-auth-brand-type strong {
  font-family: var(--fj-sans);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .18em;
  font-weight: 780;
}
body.task-login .fj-auth-brand-type small {
  font-family: var(--fj-sans);
  color: #cbdbe0;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .24em;
  font-weight: 600;
}
body.task-login .fj-auth-topbar-aside {
  display:flex;
  align-items:center;
  gap: 34px;
  color: #cbd9df;
  font: 600 11px/1.4 var(--fj-sans);
  letter-spacing: .16em;
}
body.task-login .fj-auth-topbar-aside span span { color: #b89463; padding-inline: 4px; }
body.task-login .fj-auth-topbar-aside a {
  border-left: 1px solid rgba(255,255,255,.22);
  padding-left: 26px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}
body.task-login .fj-auth-topbar-aside a:hover { color: var(--fj-gold-light); }

/* Editorial hero: people and light, not artificial abstract-tech gradients. */
body.task-login .fj-auth-hero {
  position: relative;
  isolation: isolate;
  background: #f9f6f0;
  min-height: 713px;
  overflow: hidden;
}
body.task-login .fj-auth-hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 59%;
  z-index: -2;
  background: url('../images/fajardo-hero-webmail.webp') center 44% / cover no-repeat;
}
body.task-login .fj-auth-hero-fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #f9f6f0 0%,
    rgba(249,246,240,.99) 22%,
    rgba(249,246,240,.90) 40%,
    rgba(249,246,240,.22) 58%,
    rgba(249,246,240,.00) 76%);
}
body.task-login .fj-auth-hero-inner { position:relative; z-index:1; }
body.task-login .fj-auth-copy { width: min(585px, 53%); padding: 62px 0 48px; }
body.task-login .fj-auth-eyebrow {
  color: #9a6728;
  margin: 0 0 15px;
  text-transform: uppercase;
  font: 800 11px/1.5 var(--fj-sans);
  letter-spacing: .17em;
}
body.task-login .fj-auth-eyebrow span { padding-inline: 4px; }
body.task-login .fj-auth-copy h2 {
  margin: 0;
  font: 500 clamp(45px, 4.65vw, 73px)/1.06 var(--fj-serif);
  letter-spacing: -.05em;
  color: #061c2b;
  text-wrap: balance;
}
body.task-login .fj-auth-copy h2 span { white-space: nowrap; }
body.task-login .fj-auth-copy h2 em { color: #a6763d; font-weight: 500; font-style: normal; }
body.task-login .fj-auth-subtitle {
  max-width: 540px;
  margin: 18px 0 27px;
  color: #284655;
  font: 400 clamp(15px, 1.22vw, 19px)/1.62 var(--fj-sans);
}

/* Visual container only. The native Roundcube loginform is kept intact. */
body.task-login .fj-auth-login-card {
  width: min(100%, 520px);
  padding: 25px 32px 21px;
  border: 1px solid #dfe5e7;
  border-radius: 15px;
  box-shadow: 0 16px 38px rgba(7,29,43,.075);
  background: rgba(255,255,255,.95);
  color: #102c3b;
  backdrop-filter: blur(5px);
}
body.task-login .fj-auth-login-card h3 {
  margin: 0;
  font: 500 29px/1.18 var(--fj-serif);
  color: #061c2b;
  letter-spacing: -.025em;
}
body.task-login .fj-auth-card-description {
  margin: 7px 0 17px;
  font: 400 13px/1.5 var(--fj-sans);
  color: #4e6572;
}
body.task-login #login-form,
body.task-login #login-form .box,
body.task-login #login-form .formcontent,
body.task-login #login-form .formcontainer {
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.task-login #login-form::before,
body.task-login #login-form::after,
body.task-login #login-form .formcontent::before,
body.task-login #login-form .formcontent::after { content: none !important; display: none !important; }
body.task-login #login-form table { width:100%; border:0; border-spacing:0 5px; border-collapse:separate; }
body.task-login #login-form td { padding: 0 0 8px !important; vertical-align: middle; }
body.task-login #login-form table .title { width: 28%; padding-right: 9px !important; }
body.task-login #login-form label,
body.task-login #login-form .title,
body.task-login #login-form .form-label {
  color: #203d4c !important;
  font: 650 12px/1.4 var(--fj-sans) !important;
}
body.task-login #login-form .form-group { margin-bottom: 11px !important; }
body.task-login #login-form .form-group.row { align-items: center; }
body.task-login #login-form input[type='text'],
body.task-login #login-form input[type='email'],
body.task-login #login-form input[type='password'],
body.task-login #login-form select,
body.task-login #login-form .form-control {
  box-sizing: border-box;
  display: block;
  min-width: 0 !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  border: 1px solid #d6dfe3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #102c3b !important;
  box-shadow: none !important;
  font: 500 14px/1.35 var(--fj-sans) !important;
}
body.task-login #login-form input::placeholder { color: #708792; opacity: 1; }
body.task-login #login-form .input-group,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append { max-width: 100%; }
body.task-login #login-form .input-group .form-control { flex: 1 1 auto; width: 1% !important; }
body.task-login #login-form .input-group-text {
  border-color:#d6dfe3 !important;
  background: #f7f9f8 !important;
  color:#526875 !important;
}
body.task-login #login-form input[type='text']:focus,
body.task-login #login-form input[type='email']:focus,
body.task-login #login-form input[type='password']:focus,
body.task-login #login-form select:focus,
body.task-login #login-form .form-control:focus {
  outline: 2px solid #bf8c49 !important;
  outline-offset: 1px !important;
  border-color: #b68135 !important;
}
body.task-login #rcmloginsubmit,
body.task-login #login-form button[type='submit'],
body.task-login #login-form input[type='submit'],
body.task-login #login-form .btn-primary,
body.task-login #login-form .mainaction {
  box-sizing: border-box;
  display: inline-flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 53px !important;
  margin: 12px 0 0 !important;
  padding: 11px 18px !important;
  justify-content: center;
  align-items: center;
  border: 1px solid #c9984c !important;
  border-radius: 9px !important;
  background: linear-gradient(110deg,#daa65a,#edc37d) !important;
  color: #082737 !important;
  text-align: center !important;
  font: 750 15px/1.35 var(--fj-sans) !important;
  letter-spacing: 0 !important;
  box-shadow: 0 5px 14px rgba(148,100,32,.12) !important;
  cursor: pointer;
  text-transform: none !important;
  transition: filter .15s, box-shadow .15s;
}
body.task-login #rcmloginsubmit:hover,
body.task-login #login-form button[type='submit']:hover,
body.task-login #login-form input[type='submit']:hover { filter:brightness(1.04); box-shadow:0 9px 22px rgba(148,100,32,.18) !important; }
body.task-login #login-form .formbuttons { margin-top: 12px; }
body.task-login #login-form .checkbox,
body.task-login #login-form .custom-control,
body.task-login #login-form .form-check { margin: 10px 0 0; }
body.task-login #login-footer {
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.task-login .fj-auth-account-help {
  margin: 13px 0 0;
  color: #5b6f77;
  text-align: right;
  font: 500 12px/1.6 var(--fj-sans);
}
body.task-login .fj-auth-account-help a { color: #986625; font-weight: 700; text-decoration: none; }
body.task-login .fj-auth-account-help a:hover { text-decoration: underline; }

/* Beneath the hero, the same quiet brand-promise rhythm as fajardo.me. */
body.task-login .fj-auth-benefits {
  background: #fbfaf7;
  border-top: 1px solid rgba(19,50,67,.065);
  border-bottom: 1px solid #e5e9e9;
}
body.task-login .fj-auth-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 30px;
  padding: 27px 0 31px;
}
body.task-login .fj-auth-benefit { display:flex; align-items: start; gap: 17px; min-width:0; }
body.task-login .fj-auth-benefit svg {
  width: 43px;
  height: 43px;
  flex:none;
  color: #a7793d;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
}
body.task-login .fj-auth-benefit strong {
  display:block;
  color:#061c2b;
  font: 730 15px/1.35 var(--fj-sans);
}
body.task-login .fj-auth-benefit p {
  margin: 5px 0 0;
  color:#526875;
  font: 400 13px/1.5 var(--fj-sans);
}
body.task-login .fj-auth-footer { background:#061c2b; color:#c9d8de; }
body.task-login .fj-auth-footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  min-height: 63px;
  padding-block: 16px;
  font: 400 12px/1.6 var(--fj-sans);
}
body.task-login .fj-auth-footer nav { display:flex; flex-wrap: wrap; gap: 20px; }
body.task-login .fj-auth-footer a { color: #d5e1e5; text-decoration:none; }
body.task-login .fj-auth-footer a:hover { color:var(--fj-gold-light); text-decoration:underline; }
body.task-login .fj-skip-link {
  position: fixed;
  z-index: 10020;
  top: -80px;
  left: 20px;
  padding: 10px 17px;
  background: #fff;
  border:2px solid #b78031;
  border-radius:0 0 10px 10px;
  color:#061c2b;
}
body.task-login .fj-skip-link:focus { top: 0; }
body.task-login .noscriptwarning { color:#a92121; text-align:center; }
/* Login remains light even if mail-app has dark mode selected. */
html.dark-mode body.task-login { color-scheme:light; }

@media (max-width: 1220px) {
  body.task-login .fj-auth-container { width:min(1160px,calc(100% - 74px)); }
  body.task-login .fj-auth-copy { width: min(550px, 55%); }
  body.task-login .fj-auth-copy h2 { font-size: clamp(43px,5vw,65px); }
  body.task-login .fj-auth-hero-photo { width:61%; }
}
@media (max-width: 950px) {
  body.task-login .fj-auth-container { width:calc(100% - 54px); }
  body.task-login .fj-auth-topbar-inner { min-height:76px; }
  body.task-login .fj-auth-topbar-aside > span { display:none; }
  body.task-login .fj-auth-topbar-aside a { padding-left:0; border:0; }
  body.task-login .fj-auth-copy { width: min(545px, 65%); }
  body.task-login .fj-auth-hero-photo { width:66%; }
  body.task-login .fj-auth-hero-fade { background:linear-gradient(90deg,#f9f6f0 0%,rgba(249,246,240,.98) 32%,rgba(249,246,240,.79) 55%,transparent 90%); }
  body.task-login .fj-auth-copy h2 { font-size:clamp(42px,5.7vw,60px); }
  body.task-login .fj-auth-login-card { padding-inline:26px; }
}
@media (max-width: 720px) {
  body.task-login .fj-auth-container { width:calc(100% - 40px); }
  body.task-login .fj-auth-hero { min-height:0; padding-top: 145px; }
  body.task-login .fj-auth-hero-photo {
    inset: 0 0 auto 0;
    width: 100%; height: 205px;
    background-position: center 30%;
  }
  body.task-login .fj-auth-hero-fade { background: linear-gradient(180deg,rgba(249,246,240,0) 0,rgba(249,246,240,.15) 105px,#f9f6f0 205px,#f9f6f0 100%); }
  body.task-login .fj-auth-copy { width:100%; max-width: 560px; padding: 45px 0 47px; }
  body.task-login .fj-auth-copy h2 { font-size: clamp(38px,8.5vw,56px); }
  body.task-login .fj-auth-subtitle { font-size:15px; max-width: 540px; margin-bottom:20px; }
  body.task-login .fj-auth-login-card { width:100%; }
  body.task-login .fj-auth-benefit-grid { gap:16px; padding:25px 0; }
  body.task-login .fj-auth-benefit { flex-direction:column; gap:8px; }
  body.task-login .fj-auth-benefit svg { width:34px; height:34px; }
  body.task-login .fj-auth-benefit strong { font-size:13px; }
  body.task-login .fj-auth-benefit p { font-size:12px; }
}
@media (max-width: 530px) {
  body.task-login .fj-auth-topbar-inner { min-height:73px; }
  body.task-login .fj-auth-brand { gap:10px; }
  body.task-login .fj-auth-brand-icon { width:33px;height:42px; }
  body.task-login .fj-auth-brand-type strong { font-size:19px; }
  body.task-login .fj-auth-brand-type small { font-size:9px; }
  body.task-login .fj-auth-topbar-aside { font-size:10px; }
  body.task-login .fj-auth-hero { padding-top: 112px; }
  body.task-login .fj-auth-hero-photo { height: 178px; }
  body.task-login .fj-auth-hero-fade { background:linear-gradient(180deg,rgba(249,246,240,0),rgba(249,246,240,.24) 55px,#f9f6f0 178px,#f9f6f0 100%); }
  body.task-login .fj-auth-copy { padding: 42px 0 32px; }
  body.task-login .fj-auth-eyebrow { font-size:10px; letter-spacing:.10em; }
  body.task-login .fj-auth-copy h2 { font-size:clamp(35px,8.8vw,45px); line-height:1.10; }
  body.task-login .fj-auth-copy h2 span { white-space: normal; }
  body.task-login .fj-auth-login-card { padding:23px 20px 20px; }
  body.task-login .fj-auth-login-card h3 { font-size:26px; }
  body.task-login .fj-auth-card-description { font-size:12px; }
  body.task-login #login-form table,
  body.task-login #login-form table tbody,
  body.task-login #login-form table tr,
  body.task-login #login-form table td { display:block; width:100%; }
  body.task-login #login-form table .title { padding-bottom:3px !important; }
  body.task-login .fj-auth-benefit-grid { grid-template-columns:1fr; gap:22px; }
  body.task-login .fj-auth-benefit { flex-direction:row; gap:14px; }
  body.task-login .fj-auth-footer-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 350px) {
  body.task-login .fj-auth-container { width: calc(100% - 26px); }
  body.task-login .fj-auth-topbar-aside a { font-size:9px; }
  body.task-login .fj-auth-login-card { padding:18px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  body.task-login *,body.task-login *::before,body.task-login *::after { transition:none !important; animation:none !important; }
}

/* -------- APPLICATION / EXISTING ELASTIC BRAND LAYER --------
   Scoped to NOT affect login. Keep native Roundcube functionality, dialogs,
   accessibility focus and plugin behaviors intact. */

/* ---------- POSTBOX / BASE ELASTIC DESIGN TOKENS ---------- */
body:not(.task-login) { background: var(--fj-paper); color: var(--fj-ink); }
body:not(.task-login) #layout-menu {
  background: var(--fj-navy) !important;
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 3px 0 18px rgba(6,28,43,.04);
}
body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #layout-menu .header { background: var(--fj-navy) !important; }
body:not(.task-login) #layout-menu .fj-sidebar-home {
  display: flex;
  width: 100%;
  min-height: 84px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: var(--fj-navy);
  text-decoration: none;
}
body:not(.task-login) #layout-menu .fj-sidebar-home:hover { background: #133f4d; }
body:not(.task-login) #layout-menu .fj-sidebar-logo-mark {
  width: 42px;
  height: 49px;
  background: url('../images/fajardo-icon-transparent.png') center / contain no-repeat;
}
body:not(.task-login) #taskmenu,
body:not(.task-login) #taskmenu a { background-color: transparent; }
body:not(.task-login) #taskmenu a { color: #c9dadd !important; }
body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu a.selected {
  color: var(--fj-gold-light) !important;
  background: rgba(237,182,95,.12) !important;
}
body:not(.task-login) #taskmenu a:focus-visible { outline-color: var(--fj-gold); }

body:not(.task-login) #layout-sidebar {
  background: var(--fj-ivory);
  border-right: 1px solid var(--fj-line);
}
body:not(.task-login) #layout-sidebar > .header {
  background: #f1f2ec;
  border-bottom: 1px solid var(--fj-line);
}
body:not(.task-login) #layout-sidebar > .header .username,
body:not(.task-login) #layout-sidebar .header-title { color: var(--fj-navy); font-weight: 750; }
body:not(.task-login) #folderlist-content { background: var(--fj-ivory); }
body:not(.task-login) #folderlist-content a { color: var(--fj-ink); }
body:not(.task-login) #folderlist-content a.selected,
body:not(.task-login) #folderlist-content li.selected > a {
  background: rgba(8,123,140,.10);
  color: var(--fj-petrol-deep);
  font-weight: 750;
  border-radius: 8px;
}
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content,
body:not(.task-login) #messagelist-content { background: var(--fj-surface); }
body:not(.task-login) #layout-list > .header,
body:not(.task-login) #layout-content > .header,
body:not(.task-login) #messagelist-header {
  background: var(--fj-surface);
  border-bottom: 1px solid var(--fj-line);
}
body:not(.task-login) #layout-list .header-title,
body:not(.task-login) #layout-content .header-title {
  color: var(--fj-navy);
  font-weight: 750;
}
body:not(.task-login) #mailsearchform,
body:not(.task-login) #searchform { background: var(--fj-surface-alt); }
body:not(.task-login) .searchbar input,
body:not(.task-login) #mailsearchform input {
  border-radius: 9px;
  border-color: var(--fj-line);
  color: var(--fj-ink);
}
body:not(.task-login) .listing li.selected,
body:not(.task-login) .listing tr.selected,
body:not(.task-login) #messagelist tr.selected td {
  background: #eaf3f1 !important;
  color: var(--fj-navy);
}
body:not(.task-login) .listing li:hover,
body:not(.task-login) #messagelist tr:hover td { background-color: #f3f7f4; }
body:not(.task-login) .listing .unread,
body:not(.task-login) #messagelist tr.unread { font-weight: 750; }
body:not(.task-login) .btn-primary,
body:not(.task-login) button.btn-primary {
  background: var(--fj-petrol-deep);
  border-color: var(--fj-petrol-deep);
  color: #fff;
}
body:not(.task-login) .btn-primary:hover { background: var(--fj-navy-2); border-color: var(--fj-navy-2); }
body:not(.task-login) a { accent-color: var(--fj-petrol); }
body:not(.task-login) #quotadisplay { color: var(--fj-muted); }

/* Keep system dark mode working in the mail application. */
html.dark-mode body:not(.task-login) {
  --fj-ivory: #122e3a;
  --fj-paper: #0a202c;
  --fj-ink: #e8f2f2;
  --fj-muted: #abc0c8;
  --fj-line: #315361;
  --fj-surface: #102b38;
  --fj-surface-alt: #193847;
  color: var(--fj-ink);
}
html.dark-mode body:not(.task-login) #layout-sidebar > .header { background: #163543; }
html.dark-mode body:not(.task-login) #layout-sidebar .header-title,
html.dark-mode body:not(.task-login) #layout-sidebar > .header .username,
html.dark-mode body:not(.task-login) #layout-list .header-title,
html.dark-mode body:not(.task-login) #layout-content .header-title { color: #e9f2f1; }
html.dark-mode body:not(.task-login) #folderlist-content a { color: #e2eeee; }
html.dark-mode body:not(.task-login) #folderlist-content a.selected,
html.dark-mode body:not(.task-login) .listing tr.selected,
html.dark-mode body:not(.task-login) #messagelist tr.selected td { background: #245060 !important; color: #f8f3e8; }
html.dark-mode body:not(.task-login) .listing li:hover,
html.dark-mode body:not(.task-login) #messagelist tr:hover td { background: #1b414f; }



/* Preserve the existing Elastic responsive layout; never apply login-only resets to mail. */
@media (max-width: 530px) {
  body:not(.task-login) #layout-menu .fj-sidebar-home { min-height: 56px; }
  body:not(.task-login) #layout-menu .fj-sidebar-logo-mark { width: 30px; height: 38px; }
}

/* FAJARDO WEBMAIL v2.1.3 | targeted compose + mobile login repair */
/* Compose: Roundcube Elastic renders .btn.btn-primary.send. */
#compose-content .formbuttons .btn.send,
#compose-content .formbuttons button.send,
#compose-content .formbuttons input.send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 146px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  background: #dfa95e !important;
  border: 1px solid #aa7430 !important;
  border-radius: 9px !important;
  color: #092638 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}
#compose-content .formbuttons .btn.send.disabled,
#compose-content .formbuttons .btn.send:disabled,
#compose-content .formbuttons .btn.send[aria-disabled="true"],
#compose-content .formbuttons button.send.disabled,
#compose-content .formbuttons button.send:disabled {
  background: #e0e5e9 !important;
  border-color: #b4c0c8 !important;
  color: #344654 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
}

/* Mobile: limit width adjustments to actual login controls. Do NOT
   absolutely position .icon/.input-group-text or blanket-style divs. */
@media screen and (max-width: 767px) {
  body.task-login #login-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form .input-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form .form-control,
  body.task-login #login-form input[type="text"],
  body.task-login #login-form input[type="email"],
  body.task-login #login-form input[type="password"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.task-login #login-form .input-group > .form-control {
    flex: 1 1 0% !important;
  }
  body.task-login #rcmloginsubmit {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==============================================================
   FAJARDO WEBMAIL v2.1.4 | scoped layout refinement
   No global div/input overrides, no fixed viewport clipping.
   ============================================================== */

/* Keep the actual login-page header visible as the document scrolls. */
body.task-login .fj-auth-topbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
}

/* Let the page fill a tall screen, without forcing 713px of hero height. */
body.task-login .fj-auth-page {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.task-login .fj-auth-hero {
  flex: 1 0 auto !important;
  min-height: 0 !important;
}
body.task-login .fj-auth-topbar,
body.task-login .fj-auth-benefits,
body.task-login .fj-auth-footer {
  flex-shrink: 0 !important;
}

/* On desktop, reclaim needless vertical space in the login section.
   Inputs retain their existing height, position and focus styling. */
@media screen and (min-width: 1024px) {
  body.task-login .fj-auth-copy {
    padding-top: 29px !important;
    padding-bottom: 21px !important;
  }
  body.task-login .fj-auth-eyebrow { margin-bottom: 11px !important; }
  body.task-login .fj-auth-subtitle {
    margin-top: 12px !important;
    margin-bottom: 15px !important;
  }
  body.task-login .fj-auth-login-card {
    padding-top: 18px !important;
    padding-bottom: 14px !important;
  }
  body.task-login .fj-auth-card-description {
    margin-top: 5px !important;
    margin-bottom: 11px !important;
  }
  body.task-login #login-form .form-group {
    margin-bottom: 7px !important;
  }
  body.task-login #login-form td {
    padding-bottom: 6px !important;
  }
  body.task-login #login-form .formbuttons {
    margin-top: 2px !important;
  }
  body.task-login #rcmloginsubmit,
  body.task-login #login-form button[type='submit'],
  body.task-login #login-form input[type='submit'] {
    margin-top: 7px !important;
  }
  body.task-login .fj-auth-account-help {
    margin-top: 9px !important;
  }
  body.task-login .fj-auth-benefit-grid {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  body.task-login .fj-auth-footer-inner {
    min-height: 52px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* Short laptop viewports: allow scroll, never conceal controls/footer. */
@media screen and (min-width: 1024px) and (max-height: 760px) {
  body.task-login .fj-auth-copy {
    padding-top: 20px !important;
    padding-bottom: 16px !important;
  }
  body.task-login .fj-auth-benefit-grid {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* At tablet and mobile widths, keep the known-good v2.1.3 form sizing.
   The footer remains reachable by ordinary scrolling. */
@media screen and (max-width: 1023px) {
  body.task-login .fj-auth-hero {
    min-height: 0 !important;
  }
}

/* =========================================================
   FAJARDO MOBILE LOGIN REPAIR v2.1.5
   Scoped to mobile login form; desktop remains unchanged.
   ========================================================= */
@media screen and (max-width: 767px) {
  /* The icon and input must never wrap onto different lines. */
  body.task-login #login-form .input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Icon: fixed-size left item, never an independent row. */
  body.task-login #login-form .input-group > .input-group-prepend,
  body.task-login #login-form .input-group > .input-group-append {
    display: flex !important;
    position: static !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.task-login #login-form .input-group .input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Permit a generated field wrapper as well as direct input children. */
  body.task-login #login-form .input-group > :not(.input-group-prepend):not(.input-group-append) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* Text/password: occupy all remaining width beside their icon. */
  body.task-login #login-form .input-group > .form-control,
  body.task-login #login-form .input-group > input#rcmloginuser,
  body.task-login #login-form .input-group > input#rcmloginpwd {
    display: block !important;
    position: static !important;
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.task-login #login-form .form-group.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}