.employee-main{min-height:100vh;padding:54px 0 100px}
.employee-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.employee-dashboard-head h1{margin:5px 0 10px;font-size:clamp(2.5rem,6vw,4.8rem);line-height:.95;letter-spacing:0;text-transform:uppercase}
.employee-dashboard-head p:last-child{margin:0;color:var(--muted)}
.employee-access-panel{max-width:760px;margin:42px 0}
.employee-identity-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:22px 0;border:1px solid rgba(56,232,255,.22);border-radius:8px;overflow:hidden;background:#0b0e2a}
.employee-identity-band div{min-width:0;padding:18px;border-right:1px solid rgba(255,255,255,.1)}
.employee-identity-band div:last-child{border-right:0}
.employee-identity-band span,.employee-identity-band strong{display:block}
.employee-identity-band span{color:var(--muted);font-size:.7rem;font-weight:850;text-transform:uppercase}
.employee-identity-band strong{margin-top:5px;overflow-wrap:anywhere;color:#fff;font-size:1rem}
.employee-view-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.employee-view-nav button{min-height:46px;padding:0 18px;border:1px solid rgba(56,232,255,.3);border-radius:999px;color:#fff;background:#111638;font:inherit;font-weight:900;cursor:pointer}
.employee-view-nav button:hover,.employee-view-nav button:focus-visible,.employee-view-nav button.is-active{outline:0;border-color:var(--electric);color:#080b24;background:var(--electric);box-shadow:0 0 25px rgba(248,255,70,.16)}
.employee-view{min-height:440px}
.employee-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.employee-section-heading h2{margin:2px 0 0;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:0}
.employee-hours-layout{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(380px,1.25fr);gap:22px;align-items:start}
.employee-time-form{display:grid;gap:14px;margin:0}
.employee-time-form h3{margin:0}
.employee-time-form label{display:grid;gap:7px;color:#f2f2ff;font-size:.84rem;font-weight:850}
.employee-time-form input,.employee-time-form textarea{width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;background:#080b24;font:inherit;color-scheme:dark}
.employee-time-form input{min-height:48px}
.employee-time-form textarea{resize:vertical}
.employee-time-form input:focus,.employee-time-form textarea:focus{outline:2px solid var(--cyan);outline-offset:2px}
.employee-time-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.employee-list-title{margin:0 0 14px}
.employee-time-list{display:grid;gap:12px}
.employee-time-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:17px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:linear-gradient(145deg,rgba(17,23,58,.92),rgba(7,9,27,.96))}
.employee-time-row h4,.employee-time-row p{margin:0}
.employee-time-row p{margin-top:5px;color:var(--muted);font-size:.8rem}
.employee-time-row strong{color:var(--mint)}
.employee-time-state{padding:6px 9px;border-radius:999px;color:#061820;background:var(--cyan);font-size:.68rem;font-weight:950;text-transform:uppercase}
.employee-time-state.approved{color:#06170e;background:var(--mint)}
.employee-time-state.rejected{color:#fff;background:#9b2946}
.employee-time-state.paid{color:#080b24;background:var(--electric)}
.employee-empty{padding:34px;border:1px dashed rgba(56,232,255,.3);border-radius:8px;color:var(--muted);text-align:center}
.employee-pay-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.employee-pay-summary article{padding:24px;border:1px solid rgba(56,232,255,.22);border-radius:8px;background:#0b0e2a}
.employee-pay-summary span,.employee-pay-summary strong,.employee-pay-summary small{display:block}
.employee-pay-summary span{color:var(--muted);font-size:.72rem;font-weight:850;text-transform:uppercase}
.employee-pay-summary strong{margin:8px 0 4px;color:#fff;font-size:1.55rem}
.employee-pay-summary small{color:var(--mint);font-size:1.05rem;font-weight:900}
.employee-pay-disclaimer{max-width:900px;margin:20px 0;padding:16px 18px;border-left:4px solid var(--gold);color:#d9daeb;background:rgba(255,183,77,.06);line-height:1.6}
.employee-deposit-panel{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px;border:1px solid rgba(93,255,197,.32);border-radius:8px;background:linear-gradient(145deg,rgba(13,36,43,.7),rgba(7,9,27,.97))}
.employee-deposit-panel h3{margin:10px 0 6px;font-size:1.5rem}
.employee-deposit-panel p{margin:0;color:var(--muted)}
.employee-deposit-state{display:inline-flex;padding:6px 9px;border-radius:999px;color:#080b24;background:var(--gold);font-size:.68rem;font-weight:950;text-transform:uppercase}
.employee-deposit-state.is-ready{background:var(--mint)}
@media(max-width:860px){.employee-identity-band{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-identity-band div:nth-child(2){border-right:0}.employee-identity-band div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}.employee-hours-layout{grid-template-columns:1fr}.employee-pay-summary{grid-template-columns:1fr}}
@media(max-width:620px){.employee-main{padding-top:34px}.employee-dashboard-head,.employee-section-heading,.employee-deposit-panel{align-items:stretch;flex-direction:column}.employee-dashboard-head .btn,.employee-deposit-panel .btn{width:100%}.employee-identity-band{grid-template-columns:1fr}.employee-identity-band div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.employee-identity-band div:last-child{border-bottom:0}.employee-time-grid,.employee-time-row{grid-template-columns:1fr}.employee-view-nav{display:grid;grid-template-columns:1fr}.employee-view-nav button{width:100%}}

.employee-view-nav {
  position: sticky;
  top: calc(var(--site-header-height) + var(--subnav-row-height));
  z-index: 39;
  flex-wrap: nowrap;
  min-height: var(--subnav-row-height);
  padding: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  background: rgba(7,9,27,.97);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
  backdrop-filter: blur(18px) saturate(135%);
}

.employee-view-nav button {
  flex: 0 0 auto;
  min-height: 42px;
}

@media(max-width:620px) {
  .employee-view-nav {
    display: flex;
    width: 100%;
  }
  .employee-view-nav button {
    width: auto;
  }
}