/* ==========================================================
   WEFOOD Roundcube 1.7.3 Brand V5 CENTERED
   Base: V4 SAFE
   Focus: login page content clusters toward center.
   No message-list/layout structural overrides.
   ========================================================== */

:root{
  --wf-navy:#0a2342;
  --wf-navy2:#123e66;
  --wf-orange:#ff8614;
  --wf-orange2:#ef7000;
  --wf-text:#20364d;
}
html,body{
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC","Segoe UI",sans-serif !important;
}

/* ---------- Login V5 centered ---------- */
body.task-login{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 18%,rgba(255,134,20,.15) 0 80px,transparent 81px),
    radial-gradient(circle at 86% 20%,rgba(10,35,66,.08) 0 125px,transparent 126px),
    linear-gradient(135deg,#fffdfa 0%,#fff6e8 46%,#eef4f9 100%) !important;
}
body.task-login #layout{
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.task-login #layout-content{
  box-sizing:border-box;
  position:relative;
  width:min(900px,calc(100% - 40px)) !important;
  min-height:500px !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(10,35,66,.08) !important;
  border-radius:28px !important;
  background:linear-gradient(90deg,#08213d 0 46%,#fff 46% 100%) !important;
  box-shadow:0 26px 72px rgba(10,35,66,.17) !important;
}
body.task-login #layout-content::before{
  content:"WEFOOD.TW";
  position:absolute;
  left:34px;
  top:48px;
  color:rgba(255,255,255,.065);
  font-size:56px;
  font-weight:900;
  letter-spacing:1px;
  transform:rotate(-6deg);
  pointer-events:none;
}
body.task-login #layout-content::after{
  content:"全台美食・一網打盡";
  position:absolute;
  left:0;
  bottom:34px;
  width:46%;
  color:rgba(255,255,255,.92);
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  text-align:center;
  pointer-events:none;
}

body.task-login #logo{
  position:absolute !important;
  left:23% !important;
  top:48% !important;
  width:245px !important;
  max-width:30% !important;
  max-height:225px !important;
  height:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:13px 16px !important;
  z-index:2;
  border:2px solid rgba(255,255,255,.32) !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.20) !important;
}

body.task-login #login-form{
  position:absolute !important;
  left:46% !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 58px 0 52px !important;
  box-sizing:border-box !important;
  text-align:left !important;
}
body.task-login #login-form::before{
  content:"WEFOOD 吃貨網信箱";
  display:block;
  margin:0 0 4px !important;
  color:var(--wf-navy);
  font-size:27px;
  line-height:1.35;
  font-weight:900;
}
body.task-login #login-form::after{
  content:"WEFOOD MAIL";
  display:block;
  position:static !important;
  margin:0 0 28px !important;
  color:#e56b00;
  font-size:11px;
  font-weight:900;
  letter-spacing:.24em;
}
body.task-login #login-form .row:first-of-type{
  margin-top:0 !important;
}
body.task-login .form-control{
  min-height:46px !important;
  border:1px solid #d0dae5 !important;
  border-radius:11px !important;
  background:#fbfcfe !important;
  color:var(--wf-text) !important;
  box-shadow:none !important;
  font-size:15px !important;
}
body.task-login .form-control:focus{
  border-color:var(--wf-orange) !important;
  box-shadow:0 0 0 4px rgba(255,134,20,.13) !important;
}
body.task-login #rcmloginsubmit,
body.task-login button.btn-primary{
  width:100% !important;
  min-height:46px !important;
  margin-top:8px !important;
  border:0 !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,#ff9e2d 0%,#ef7600 100%) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 10px 24px rgba(239,118,0,.20) !important;
}
body.task-login #login-footer{
  margin-top:18px !important;
  color:#596b7e !important;
  text-align:center !important;
  font-size:12px !important;
}

/* ---------- Safe app branding only ---------- */
#layout-menu{
  background:linear-gradient(180deg,#071c34 0%,#0a2748 62%,#0d365b 100%) !important;
}
#layout-menu #logo,
#layout-menu .popover-header img{
  max-width:78px !important;
  max-height:70px !important;
  padding:6px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:14px !important;
  background:#fff !important;
}
#taskmenu a,#taskmenu .button{color:rgba(255,255,255,.92) !important}
#taskmenu a:hover,#taskmenu .button:hover{background:rgba(255,255,255,.08) !important}
#taskmenu a.selected,
#taskmenu .button.selected,
#taskmenu a.button-selected{
  background:linear-gradient(90deg,rgba(255,134,20,.28),rgba(255,134,20,.10)) !important;
  box-shadow:inset 4px 0 0 #ff8614 !important;
  color:#fff !important;
}
.btn-primary,.button.primary,input.button.mainaction{
  background:linear-gradient(135deg,#ff9416 0%,#ef7000 100%) !important;
  border-color:#e76b00 !important;
  color:#fff !important;
}
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,select:focus{
  border-color:var(--wf-orange) !important;
  box-shadow:0 0 0 3px rgba(255,134,20,.12) !important;
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  body.task-login #layout{
    display:block !important;
  }
  body.task-login #layout-content{
    width:100% !important;
    min-height:100vh !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,#08213d 0 190px,#fff 190px 100%) !important;
    box-shadow:none !important;
  }
  body.task-login #layout-content::before{
    left:0;right:0;top:24px;
    font-size:40px;text-align:center;
  }
  body.task-login #layout-content::after{
    left:0;right:0;top:155px;bottom:auto;width:auto;
    font-size:11px;text-align:center;
  }
  body.task-login #logo{
    position:relative !important;
    left:auto !important;top:auto !important;
    width:auto !important;max-width:160px !important;max-height:135px !important;
    transform:none !important;
    display:block !important;
    margin:24px auto 0 !important;
    padding:8px 10px !important;
    border-radius:18px !important;
  }
  body.task-login #login-form{
    position:relative !important;
    left:auto !important;right:auto !important;top:auto !important;
    transform:none !important;
    width:min(100% - 40px,430px) !important;
    margin:38px auto 0 !important;
    padding:0 !important;
  }
  body.task-login #login-form::before{
    font-size:23px !important;
    text-align:center !important;
  }
  body.task-login #login-form::after{
    text-align:center !important;
    margin-bottom:24px !important;
  }
}