/* RESET */
body{
  margin:0;
  font-family: 'Poppins', sans-serif;
  background:#ffffff;
}
/* 🔥 STOP HORIZONTAL SCROLL */
html, body{
  overflow-x:hidden;
}
.companyName span{
  display:block;   /* 🔥 FORCE NEW LINE */
}
/* 🔥 NAVBAR */
.navbar{
  height:65px;
  background:#0f5c5c;
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;
}
.brandWrap{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 🔥 LOGO */
/* LOGO BOX */
.logoBox{
  width:40px;
  height:40px;

  background:transparent;
  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;   /* 🔥 important */
}

/* IMAGE */
.logoBox img{
  width:100%;
  height:100%;
  object-fit:cover;   /* 🔥 keeps image clean */
}

/* COMPANY NAME */
/* COMPANY NAME */
.companyName{
  font-family: 'DM Serif Display', serif;
  line-height:1.1;
  color:#fff;
}

/* 🔥 FORCE NEW LINE */
.companyName span{
  display:block;
}

/* MAIN NAME */
.companyName span:first-child{
  font-size:22px;      /* 🔥 increased */
  letter-spacing:0.6px;
}

/* SUB TEXT */
.companyName span:last-child{
  font-family: 'Poppins', sans-serif;
  font-size:12px;      /* 🔥 slightly bigger */
  letter-spacing:2px;
  opacity:0.9;
}
.companyName span:first-child{
  font-size:23px;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}

/* MENU ICON */
.menuBtn{
  font-size:20px;
  cursor:pointer;
}

/* 🔥 SIDEBAR */
.sidebar{
  position:fixed;
  top:0;
  right:-260px;   /* hidden */
  width:260px;
  height:100%;

  background:#fff;
  box-shadow:-2px 0 10px rgba(0,0,0,0.1);

  transition:0.3s;
  z-index:999;
}

/* OPEN */
.sidebar.active{
  right:0;
}

.sidebarHeader{
  padding:15px;

  font-family:'Cinzel', serif;
  font-size:18px;
  font-weight:700;

  color:#0f5c5c;
  letter-spacing:1px;

  text-align:center;

  border-bottom:1px solid #eee;
}

/* MENU LIST */
.menuList{
  padding:10px 0;
}

.menuItem{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 16px;
  font-size:14px;

  cursor:pointer;
}

.menuItem i{
  width:20px;
  color:#0f5c5c;
}

.menuItem:hover{
  background:#f5f5f5;
}

/* LOGOUT */
.logout{
  position:absolute;
  bottom:20px;
  width:100%;
}

.logout .menuItem{
  color:red;
}

/* 🔥 OVERLAY */
.overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(0,0,0,0.3);
  display:none;
  z-index:998;
}

.overlay.active{
  display:block;
}
/* 🔥 HERO SPLIT */
.heroSplit{
  display:flex;
  align-items:center;
  width:100%;
  height:300px;
}

/* LEFT SIDE */
.heroLeft{
  flex:1;
  padding:30px;
}

/* TITLE */
.heroLeft h1{
  font-size:32px;
  margin:0;
  color:#111;
}

.heroLeft h2{
  font-size:18px;
  margin:0;
  color:#555;
}

/* SUB */
.heroLeft p{
  font-size:15px;
  margin-top:10px;
  font-weight:600;
  color:#0f5c5c;
}

/* DESC */
.heroLeft span{
  display:block;
  margin-top:10px;
  font-size:13px;
  color:#555;
  line-height:1.5;
}

/* RIGHT SIDE IMAGE */
.heroRight{
  flex:1;
  height:100%;
}

.heroRight img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* GAP FROM NAVBAR (TOP SPACE) */
.heroRight{
  flex:1;
  height:100%;
  padding-top:12px;   /* 🔥 gap from navbar */
}
.heroTag{
  margin-top:15px;
  font-size:12px;
  color:#ff9800;   /* 🔥 gold */
  font-weight:600;
}

/* 🔥 LOGIN FULL SCREEN */
#loginPage{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:#ffffff;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  z-index:9999;
}

/* WRAP */
.loginWrap{
  width:100%;
  max-width:260px;
}

/* INPUT */
.loginInput{
  width:100%;
  border:none;
  border-bottom:2px solid #ccc;

  padding:12px 0;
  font-size:16px;

  outline:none;
  background:transparent;
}

/* FOCUS EFFECT */
.loginInput:focus{
  border-bottom:2px solid #0f5c5c;
}

/* BUTTON */
.nextBtn{
  margin-top:18px;
  width:100%;

  padding:12px;

  background:#0f5c5c;
  color:#fff;

  border:none;
  border-radius:6px;

  font-size:14px;
  font-weight:600;
}

/* BUTTON TAP EFFECT */
.nextBtn:active{
  transform:scale(0.97);
}

/* BACK BUTTON */
.backBtn{
  margin-top:14px;

  font-size:13px;
  color:#0f5c5c;

  text-align:left;
  cursor:pointer;
}

/* FOOTER TEXT */
.footerText{
  position:absolute;
  bottom:25px;

  text-align:center;

  font-size:12px;
  color:#777;
}
/* BACK BUTTON (same size as submit) */
.backBtnStyled{
  margin-top:10px;
  width:100%;

  padding:12px;

  background:#fff;
  color:#0f5c5c;

  border:2px solid #0f5c5c;
  border-radius:6px;

  font-size:14px;
  font-weight:600;
}

/* TAP EFFECT */
.backBtnStyled:active{
  transform:scale(0.97);
}
/* 🔥 STEP ANIMATION (OPTIONAL SMOOTH) */
#stepUser,
#stepPass{
  transition:0.3s;
}
/* 🔥 TOP IMAGE FULL WIDTH */
.loginTopImg{
  position:fixed;

  top:20px;   /* 🔥 push image down */
  left:0;

  width:100%;
  height:220px;

  overflow:hidden;
  z-index:1;
}
.loginTopImg img{
  width:100%;
  height:100%;
  object-fit:contain;

  transform:scale(1.7);   /* 🔥 increase size */
}
.loginWrap{
  margin-top:180px;   /* 🔥 push below image */
  width:100%;
  max-width:260px;
  z-index:2;
}
/* HEADING */
.loginHeading{
  text-align:center;
  margin-bottom:20px;
}

/* MAIN */
.loginHeading span{
  display:block;
  font-size:20px;
  font-weight:700;
  color:#111;
}

/* SUB */
.loginHeading small{
  display:block;
  font-size:12px;
  letter-spacing:2px;
  color:#666;
  margin-top:2px;
}
/* 🔥 SHAKE ANIMATION */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/* APPLY SHAKE */
.shake{
  animation: shake 0.3s;
  border-bottom:2px solid red !important;
}
/* WRAP */
.centerWrap{
  text-align:center;
  padding:24px;   /* slightly more space */
}

/* MAIN TEXT */
.greetMain{
  font-family:'Playfair Display', serif;
  font-size:34px;        /* 🔥 increased */
  font-weight:700;
  color:#111;

  line-height:1.3;
}

/* NAME */
.userName{
  color:#0f5c5c;
}

/* IMAGE ROW */
.greetImages{
  margin:25px 0;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

/* IMAGES */
.greetImages img{
  width:120px;
  height:120px;

  object-fit:contain;
}

/* SUB TEXT */
.greetSub{
  font-family:'Poppins', sans-serif;
  font-size:16px;        /* 🔥 bigger */
  color:#555;

  line-height:1.7;
  max-width:600px;
  margin:0 auto;
}

/* SIGN */
.greetExtra{
  margin-top:12px;

  font-size:15px;        /* 🔥 bigger */
  color:#0f5c5c;
  font-weight:600;
}
.greetMain{
  letter-spacing:0.5px;
}
/* NEWS HEADING */
.newsHeader{
  text-align:center;

  font-family:'Playfair Display', serif;
  font-size:24px;
  font-weight:700;

  color:#111;

  margin-top:30px;
  margin-bottom:10px;

  letter-spacing:0.5px;
}
/* GRID */
.newsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;

  padding:20px;
}

/* CARD */
.newsCard{
  padding:16px;

  border-radius:12px;
  background:#fff;

  border:1px solid #eee;

  transition:0.3s;
}

/* HOVER EFFECT */
.newsCard:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* HEADLINE */
.newsHeadline{
  font-size:16px;
  font-weight:700;
  color:#111;

  margin-bottom:8px;
}

/* CONTENT */
.newsContent{
  font-size:13px;
  color:#555;

  line-height:1.6;
}

/* MOBILE */
@media(max-width:768px){
  .newsGrid{
    grid-template-columns:1fr;
  }
}
/* LOADER */
/* LOADER WRAP (CENTER) */
/* CENTER */
.newsLoader{
  display:flex;
  justify-content:center;
  align-items:center;
  height:120px;
}

/* iOS SPINNER */
.iosSpinner{
  position:relative;
  width:40px;
  height:40px;
}

/* BARS */
.iosSpinner div{
  position:absolute;
  width:4px;
  height:10px;

  background:#0f5c5c;
  border-radius:2px;

  top:3px;
  left:18px;

  transform-origin:2px 17px;

  animation: iosFade 1.2s linear infinite;
}

/* ROTATE EACH BAR */
.iosSpinner div:nth-child(1){ transform:rotate(0deg); animation-delay:-1.1s; }
.iosSpinner div:nth-child(2){ transform:rotate(45deg); animation-delay:-1s; }
.iosSpinner div:nth-child(3){ transform:rotate(90deg); animation-delay:-0.9s; }
.iosSpinner div:nth-child(4){ transform:rotate(135deg); animation-delay:-0.8s; }
.iosSpinner div:nth-child(5){ transform:rotate(180deg); animation-delay:-0.7s; }
.iosSpinner div:nth-child(6){ transform:rotate(225deg); animation-delay:-0.6s; }
.iosSpinner div:nth-child(7){ transform:rotate(270deg); animation-delay:-0.5s; }
.iosSpinner div:nth-child(8){ transform:rotate(315deg); animation-delay:-0.4s; }

/* FADE EFFECT */
@keyframes iosFade{
  0%{ opacity:1; }
  100%{ opacity:0.1; }
}

/* HIDE */
.hidden{
  display:none;
}
.iosSpinner div{
  background:#666;   /* softer like iOS */
}
/* MEETING HEADING */
.meetingHeader{
  text-align:center;

  font-family:'Playfair Display', serif;
  font-size:24px;
  font-weight:700;

  color:#111;

  margin-top:20px;
  margin-bottom:15px;

  letter-spacing:0.5px;
}
/* CHAT WRAP */
.teamChat{
  padding:15px;
}

/* MESSAGE BLOCK */
.msg{
  display:flex;
  flex-direction:column;
  margin-bottom:15px;
  max-width:70%;
}

/* LEFT SIDE */
.msg.left{
  align-items:flex-start;
}

/* RIGHT SIDE */
.msg.right{
  align-items:flex-end;
  margin-left:auto;
}

/* NAME */
.msgName{
  font-size:12px;
  color:#777;
  margin-bottom:4px;
}

/* MESSAGE BOX */
.msgBox{
  padding:10px 14px;

  border-radius:12px;
  font-size:14px;

  background:#f1f1f1;
}

/* RIGHT STYLE */
.msg.right .msgBox{
  background:#0f5c5c;
  color:#fff;
}
/* POPUP */
.messagePopup{
  position:fixed;
  bottom:-100%;
  left:0;
  width:100%;
  height:60%;

  background:#fff;

  border-top-left-radius:16px;
  border-top-right-radius:16px;

  box-shadow:0 -5px 20px rgba(0,0,0,0.1);

  transition:0.3s;
  z-index:9999;
}

/* OPEN */
.messagePopup.active{
  bottom:0;
}

/* HEADER */
.popupHeader{
  padding:12px;
  font-weight:600;
  border-bottom:1px solid #eee;

  display:flex;
  justify-content:space-between;
}

/* BODY */
.popupBody{
  padding:12px;

  height:calc(100% - 110px);  /* 🔥 space for header + input */
  overflow-y:auto;

  box-sizing:border-box;
}

/* INPUT */
.popupInput{
  position:absolute;   /* 🔥 fix position */
  bottom:0;
  left:0;
  width:100%;

  display:flex;
  gap:10px;

  padding:10px;

  background:#fff;
  border-top:1px solid #eee;

  box-sizing:border-box;
}
/* 🔥 STOP SCROLL WHEN POPUP OPEN */
body.noScroll{
  overflow:hidden;
}
.popupInput input{
  flex:1;
  min-width:0;   /* 🔥 IMPORTANT (prevents overflow) */

  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
}

.popupInput button{
  padding:10px 14px;

  white-space:nowrap;   /* 🔥 prevents text break */
  border-radius:8px;

  background:#0f5c5c;
  color:#fff;
  border:none;
}
/* CLOSE BUTTON */
.popupHeader span{
  display:flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:50%;

  background:#f1f1f1;          /* light circle */
  color:#333;

  font-size:14px;
  cursor:pointer;

  transition:0.2s;
}

/* HOVER EFFECT */
.popupHeader span:hover{
  background:#0f5c5c;
  color:#fff;

  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
/* WRAP */
.attendanceMarking{
  position:relative;

  margin:20px;
  padding:20px;

  border-radius:14px;
  background:#ffffff;

  display:flex;
  align-items:center;

  overflow:hidden;
}

/* CENTER */
.attCenter{
  z-index:2;
}

/* TITLE */
.attTitle{
  font-size:20px;
  font-weight:600;
  margin-bottom:10px;
}

/* BUTTONS */
.attBtns{
  display:flex;
  gap:12px;
}

/* PRESENT */
.presentBtn{
  padding:10px 18px;
  border:none;
  border-radius:8px;

  background:#0f5c5c;
  color:#fff;
}

/* LEAVE */
.leaveBtn{
  padding:10px 18px;
  border:none;
  border-radius:8px;

  background:#eee;
  color:#333;
}

/* STATUS */
.attStatus{
  margin-top:10px;
  font-size:14px;
  color:#555;
}

/* RIGHT IMAGE */
.attImg{
  position:absolute;
  right:10px;
  top:10px;   /* 🔥 changed from bottom → top */

  height:110px;
  object-fit:contain;

  opacity:0.95;
}
.attDateTime{
  margin-top:10px;
}
.attTableHead{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  padding:10px;
  font-weight:600;
  border-bottom:2px solid #eee;
}

.attRow{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  padding:10px;
  border-bottom:1px solid #eee;
  font-size:14px;
}
#attDate{
  font-size:13px;
  color:#777;
}

#attTime{
  font-size:16px;
  font-weight:600;
  color:#0f5c5c;
}
.logoutBtn{
  padding:10px 18px;
  border:none;
  border-radius:8px;

  background:#ff9800;   /* 🔥 orange for logout */
  color:#fff;
  font-weight:500;
}

.logoutBtn:hover{
  background:#e68900;
}
.attRow{
  padding:12px;
  border-bottom:1px solid #eee;
  font-size:14px;
}
.calCard{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px;
  border-bottom:1px solid #eee;
}
.calDayNum{
  font-size:18px;
  font-weight:600;
}

.calMonth{
  font-size:12px;
  color:#888;
}

.calDate{
  min-width:70px;
  text-align:center;
}

.calDay{
  font-size:12px;
  color:#999;
}

.calTitle{
  font-size:14px;
  font-weight:500;
}
.upcoming{
  background:#ffffff;
  border-left:4px solid #0f5c5c;
}

.past{
  opacity:0.6;
}
/* 🔥 FIX CONTAINER */
#leavePopup .popupBody{
  padding:15px;
  box-sizing:border-box;
}

/* INPUT + TEXTAREA */
#leavePopup input,
#leavePopup textarea{
  width:100%;
  padding:12px;

  margin-top:8px;
  margin-bottom:12px;

  border:1px solid #ddd;
  border-radius:10px;

  box-sizing:border-box;   /* 🔥 IMPORTANT FIX */
}

/* BUTTON */
.applyBtn{
  width:100%;
  padding:12px;

  border:none;
  border-radius:10px;

  background:#b8ffb4;
  color:#fff;
  font-weight:600;

  box-sizing:border-box;   /* 🔥 FIX */
}

/* ACTIVE */
.applyBtn.active{
  background:#0f5c5c;
}

/* APPLIED */
.applyBtn.applied{
  background:#4caf50;
}
.leaveTitle{
  margin-top:15px;
  font-weight:600;
  color:#333;
}

.leaveItem{
  padding:10px;
  border-bottom:1px solid #eee;
  font-size:14px;
}

.leaveDate{
  font-weight:500;
}

.leaveReason{
  font-size:12px;
  color:#666;
}
/* POPUP BODY FIX */
#workPopup .popupBody{
  padding:16px;
  box-sizing:border-box;
}

/* LABEL */
#workPopup label{
  font-size:13px;
  color:#555;
  display:block;
  margin-top:10px;
}

/* INPUT + TEXTAREA */
#workPopup input,
#workPopup textarea{
  width:100%;
  padding:12px;

  margin-top:6px;
  margin-bottom:12px;

  border:1px solid #ddd;
  border-radius:10px;

  font-size:14px;

  box-sizing:border-box;   /* 🔥 prevents cutting */
}

/* TEXTAREA HEIGHT */
#workPopup textarea{
  min-height:100px;
  resize:none;
}

/* BUTTON */
#workPopup .applyBtn{
  width:100%;
  padding:12px;

  border:none;
  border-radius:10px;

  background:#ccc;
  color:#fff;
  font-weight:600;

  cursor:pointer;

  box-sizing:border-box;
}

/* ACTIVE STATE */
#workPopup .applyBtn.active{
  background:#0f5c5c;
}

/* SUCCESS */
#workPopup .applyBtn.applied{
  background:#4caf50;
}
.menuHeader{
  padding:15px;
  font-size:14px;
  color:#444;
  font-weight:500;

  border-bottom:1px solid #eee;
}

.menuHeader span{
  color:#0f5c5c;
  font-weight:600;
}

/* POPUP */
.reportPopup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:#f6f8f9;   /* 🔥 soft bg */
  z-index:9999;

  display:none;
  flex-direction:column;
}

.reportPopup.active{
  display:flex;
}

/* HEADER */
.reportHeader{
  padding:18px;
  font-weight:700;
  font-size:16px;

  background:#fff;
  border-bottom:1px solid #eee;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.reportHeader span{
  cursor:pointer;
  font-size:18px;
  background:#f0f0f0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

/* STATS */
.reportStats{
  display:flex;
  gap:12px;
  padding:15px;

  overflow-x:auto;
}

/* STAT CARD */
.reportStats > div{
  flex:1;
  min-width:100px;

  background:#fff;
  border-radius:14px;

  padding:15px 10px;

  text-align:center;

  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.statNum{
  font-size:22px;
  font-weight:700;
  color:#0f5c5c;
}

.statLabel{
  font-size:12px;
  color:#777;
  margin-top:5px;
}

/* GRAPH WRAP */
.graphWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  flex:1;
}

/* 🔥 CIRCLE GRAPH (UPGRADED) */
.circleGraph{
  width:180px;
  height:180px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  font-weight:700;
  color:#0f5c5c;

  position:relative;

  background:
    conic-gradient(#0f5c5c 0%, #e5e5e5 0%);
}

/* INNER WHITE CIRCLE */
.circleGraph::before{
  content:"";
  position:absolute;

  width:130px;
  height:130px;

  background:#fff;
  border-radius:50%;

  box-shadow:inset 0 2px 6px rgba(0,0,0,0.05);
}

/* TEXT ABOVE INNER CIRCLE */
.circleGraph span{
  position:relative;
  z-index:1;
}
.remarksBox{
  margin:15px;
  padding:15px;

  background:#fff;
  border-radius:14px;

  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.remarksTitle{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  color:#333;
}

#remarksText{
  font-size:13px;
  color:#666;
  line-height:1.5;
}

  .empTable{
  padding:10px;
}

.empRow{
  background:#fff;
  margin:10px;
  padding:12px;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.empHeader{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-weight:600;
}

.empDetails{
  margin-top:10px;
  font-size:13px;
  color:#555;
  display:none;
}

.empDetails div{
  margin-bottom:6px;
}

.noData{
  text-align:center;
  margin-top:40px;
  color:#888;
}
.addEmpBox{
  display:flex;
  gap:8px;
  padding:10px;
  background:#fff;
  margin:10px;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.addEmpBox input{
  flex:1;
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:13px;
}

.addEmpBox button{
  padding:10px 14px;
  border:none;
  border-radius:8px;

  background:#0f5c5c;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.addEmpBox button.loading{
  background:#999;
}

.addEmpBox button.success{
  background:#4caf50;
}
.adminOnly{
  display:none;   /* 🔥 hide for all by default */
}
.menuHeader{
  padding:15px 12px 5px 12px;
  font-size:16px;
  font-weight:600;
}

.menuEmpId{
  font-size:13px;
  color:#888;
  margin-left:2px;   /* 🔥 closer to edge */
  margin-bottom:10px;
}
.empSummaryBox{
  padding:10px;
}

.empCard{
  background:#fff;
  padding:12px;
  margin-bottom:10px;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.empTop{
  font-weight:600;
  margin-bottom:8px;
}

.empStats{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#555;
}

.empStats div{
  text-align:center;
}