/* =========================================================
   GV GLOBAL — Employee / Staff Login Page
   ========================================================= */

.employee-login-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.employee-login-page{
  flex:1;
}

/* ============ Stats Grid (reuses login-feature-grid) ============ */
.employee-stats-grid{
  margin-bottom:26px;
}
.employee-stats-grid .login-feature{
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 12px;
}
.employee-stats-grid .login-feature i{
  margin:0; flex-shrink:0;
}
.employee-stats-grid .login-feature i.icon-red{
  background: linear-gradient(135deg, var(--red), var(--dark-red));
  color:var(--white);
}
.employee-stats-grid .login-feature i.icon-gold{
  background: linear-gradient(135deg, var(--luxury-gold), var(--dark-gold));
  color:#402c00;
}
.employee-stats-grid .login-feature strong{
  font-size:14px;
  margin-bottom:1px;
}
.employee-stats-grid .login-feature span{
  font-size:10px;
}

/* ============ Dashboard + Mobile Mockup ============ */
.employee-mockup-wrap{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding-top:10px;
}

.employee-laptop{
  max-width:300px;
  position:relative;
  z-index:2;
}
.employee-laptop .dash-stats{grid-template-columns:repeat(4,1fr); gap:6px;}
.employee-laptop .dash-stat{padding:7px 4px;}
.employee-laptop .dash-stat strong{font-size:10.5px;}
.employee-laptop .dash-stat span{font-size:7.5px;}
.employee-laptop .dash-donut{width:56px; height:56px;}
.employee-laptop .dash-donut::after{inset:10px;}
.employee-laptop .dash-bars{height:56px; gap:4px;}
.employee-laptop .dash-title{font-size:9px;}
.employee-laptop .mockup-screen{padding:7px;}
.employee-laptop .dash-body{padding:10px;}

.employee-phone{
  position:relative;
  right:auto; bottom:0;
  width:96px;
  margin-left:-18px;
  z-index:3;
}
.employee-phone .mockup-phone-screen{padding:10px 8px;}
.employee-phone .phone-notch{width:26px; height:4px; margin-bottom:7px;}
.employee-phone .phone-header{font-size:7.5px; margin-bottom:9px; gap:4px;}
.employee-phone .phone-balance{padding:8px; margin-bottom:9px;}
.employee-phone .phone-balance span{font-size:6.5px;}
.employee-phone .phone-balance strong{font-size:10.5px;}
.employee-phone .phone-actions span{font-size:6px; gap:2px;}
.employee-phone .phone-actions i{font-size:10px;}

/* Decorative plant */
.employee-plant{
  position:relative;
  width:44px; height:70px;
  margin-right:-6px;
  z-index:1;
  align-self:flex-end;
}
.plant-leaf{
  position:absolute;
  bottom:20px;
  width:16px; height:32px;
  background: linear-gradient(160deg, #7fbf6d, #3f7a37);
  border-radius:50% 50% 50% 0;
}
.plant-leaf-1{left:6px; transform:rotate(-25deg);}
.plant-leaf-2{left:14px; transform:rotate(0deg); height:38px;}
.plant-leaf-3{left:22px; transform:rotate(25deg) scaleX(-1);}
.plant-pot{
  position:absolute;
  bottom:0; left:8px;
  width:28px; height:22px;
  background: linear-gradient(160deg, var(--dark-gold), #6b4d05);
  border-radius:2px 2px 10px 10px;
}

/* Decorative mug */
.employee-mug{
  position:relative;
  width:34px; height:34px;
  margin-left:-10px;
  align-self:flex-end;
  z-index:1;
}
.mug-body{
  position:absolute;
  bottom:0; left:0;
  width:26px; height:22px;
  background: linear-gradient(160deg, #ffffff, #ece7dd);
  border:1.5px solid #ddd6c8;
  border-radius:3px 3px 6px 6px;
}
.mug-handle{
  position:absolute;
  bottom:5px; left:24px;
  width:10px; height:10px;
  border:2.5px solid #ddd6c8;
  border-left:none;
  border-radius:0 6px 6px 0;
}
.mug-steam{
  position:absolute;
  bottom:24px;
  width:2px; height:10px;
  background: rgba(150,150,150,0.4);
  border-radius:2px;
}
.mug-steam-1{left:8px;}
.mug-steam-2{left:16px; height:14px; bottom:26px;}

/* ============ Form Hints ============ */
.form-hint{
  display:block;
  font-size:11px;
  color:#9b9b9b;
  margin:-12px 0 16px 4px;
}
.form-row-branch{
  margin-top:6px;
}

/* ============ Right Panel — Staff Icon ============ */
.employee-icon-circle{
  position:relative;
  width:78px; height:78px;
  margin:0 auto 18px;
  border-radius:50%;
  background: #f2f2f2;
  border: 1px solid #eaeaea;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.employee-icon-circle i{
  font-size:30px;
  color:var(--red);
}

/* ============ Security Info Bar (dark red) ============ */
.employee-info-bar{
  background: linear-gradient(120deg, var(--red), var(--dark-red));
  padding:24px 0;
}
.employee-info-bar .info-item:not(:last-child)::after{
  background: rgba(255,255,255,0.25);
}
.employee-info-bar .info-icon{
  background: var(--white);
  color: var(--red);
}
.employee-info-bar .info-item strong{
  color:var(--white);
}
.employee-info-bar .info-item span{
  color: rgba(255,255,255,0.8);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .employee-mockup-wrap{transform:scale(0.92); transform-origin:bottom center;}
}

@media (max-width: 767px){
  .employee-stats-grid{grid-template-columns:repeat(2, 1fr) !important;}
  .employee-info-bar .info-bar-grid{grid-template-columns:repeat(2, 1fr); gap:20px;}
  .employee-info-bar .info-item:not(:last-child)::after{display:none;}
}

@media (max-width: 640px){
  .employee-mockup-wrap{display:none;}
}

@media (max-width: 420px){
  .employee-stats-grid{grid-template-columns:1fr !important;}
  .employee-info-bar .info-bar-grid{grid-template-columns:1fr;}
}