.employee-clock-shell{max-width:980px;margin:0 auto;color:var(--sc-text)}.clock-hero{border:1px solid var(--sc-border);border-radius:1rem;background:var(--sc-bg-elevated);color:var(--sc-text);padding:1.5rem;box-shadow:var(--sc-shadow-sm)}.clock-status{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.4rem .75rem;font-size:.78rem;font-weight:800;white-space:nowrap}.clock-status.off{background:#e9ecef;color:#495057}.clock-status.on{background:#d1e7dd;color:#0f5132}.clock-display{font-size:clamp(2.3rem,8vw,4.8rem);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--sc-text-strong)}.clock-action{min-height:58px;font-size:1.05rem;font-weight:800}.employee-clock-note{background:var(--sc-bg-muted)!important;color:var(--sc-text)!important;border-color:var(--sc-border)!important}.employee-clock-shell .card-sc,.employee-clock-shell .table,.employee-clock-shell .form-control,.employee-clock-shell .form-select{background-color:var(--sc-bg-elevated)!important;color:var(--sc-text)!important;border-color:var(--sc-border)!important}.employee-clock-shell .table>:not(caption)>*>*{background-color:transparent!important;color:var(--sc-text)!important;border-color:var(--sc-border)!important}.employee-clock-shell .form-control::placeholder{color:var(--sc-text-muted)}.employee-clock-shell .alert-warning{background:#fff3cd!important;color:#5c4300!important;border-color:#ffda6a!important}.employee-clock-shell .alert-warning h1,.employee-clock-shell .alert-warning strong{color:#3d2d00!important}.employee-clock-shell .alert-info{background:var(--sc-bg-muted)!important;color:var(--sc-text)!important;border-color:var(--sc-border)!important}html[data-theme="dark"] .clock-status.off{background:#263241;color:#dce5ef}html[data-theme="dark"] .clock-status.on{background:#143b2b;color:#86efac}@media(max-width:767.98px){.employee-clock-shell{width:100%}.employee-clock-shell>.d-flex{gap:.75rem;align-items:flex-start!important}.clock-hero{padding:1rem}.clock-display{font-size:2.65rem}.employee-clock-shell .card-sc{padding:1rem!important}.employee-clock-shell .table{min-width:660px}.clock-status{font-size:.7rem;padding:.35rem .55rem}}

/* Site Command v6.1.1.5 — Employee clock mobile performance recovery */
.employee-clock-shell .form-select,
.employee-clock-shell .form-control,
.employee-clock-shell .btn{min-height:48px}
.employee-clock-shell .clock-action{position:relative;z-index:2}
@media(max-width:767.98px){
 .employee-clock-shell{max-width:100%;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
 .employee-clock-shell>.d-flex{flex-wrap:wrap}
 .employee-clock-shell .clock-status{margin-left:0}
 .clock-hero{border-radius:.85rem;padding:1rem}
 .clock-display{font-size:clamp(2.35rem,14vw,3.5rem)}
 .clock-action{min-height:60px;font-size:1.08rem}
 .employee-clock-shell .row>[class*="col-"]{width:100%}
 .employee-clock-shell .table-responsive{margin-inline:-.25rem}
}
@media(max-width:575.98px){
 .employee-clock-shell{margin-inline:-.25rem}
 .employee-clock-shell .page-title{font-size:1.4rem}
 .employee-clock-shell .small-muted{line-height:1.35}
}


/* Site Command v6.1.1.6 — approved employee header and mobile cleanup */
#appShell.employee-clock-shell-mode .topbar{
  min-height:72px;
  padding-inline:18px;
  gap:12px;
}
#appShell.employee-clock-shell-mode .topbar-project-identity{
  min-width:0;
  flex:1 1 auto;
}
#appShell.employee-clock-shell-mode .topbar-project-name,
#appShell.employee-clock-shell-mode .topbar-project-location{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#appShell.employee-clock-shell-mode .topbar-actions{
  margin-left:auto!important;
  gap:8px!important;
  flex:0 0 auto;
}
#appShell.employee-clock-shell-mode .account-menu-btn{
  padding:4px;
  border:0;
}
#appShell.employee-clock-shell-mode .content{
  padding-top:20px;
}
.employee-clock-shell #employeeProject{
  font-weight:700;
}
@media(max-width:767.98px){
  #appShell.employee-clock-shell-mode .topbar{
    min-height:64px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
  }
  #appShell.employee-clock-shell-mode .mobile-nav-toggle{
    width:44px;
    height:44px;
    margin-right:0!important;
    flex:0 0 44px;
  }
  #appShell.employee-clock-shell-mode .topbar-project-identity{
    padding:0!important;
    margin:0!important;
    max-width:calc(100vw - 118px);
  }
  #appShell.employee-clock-shell-mode .topbar-project-name{
    font-size:.95rem;
    line-height:1.15;
  }
  #appShell.employee-clock-shell-mode .topbar-project-location{
    font-size:.72rem;
    line-height:1.2;
  }
  #appShell.employee-clock-shell-mode .topbar-actions .account-name,
  #appShell.employee-clock-shell-mode .topbar-actions .account-role,
  #appShell.employee-clock-shell-mode .topbar-actions .bi-chevron-down{
    display:none!important;
  }
  #appShell.employee-clock-shell-mode .avatar{
    width:44px;
    height:44px;
    min-width:44px;
  }
  #appShell.employee-clock-shell-mode .content{
    padding:16px 10px calc(20px + env(safe-area-inset-bottom));
  }
  .employee-clock-shell>.d-flex:first-child{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start!important;
    gap:10px;
  }
  .employee-clock-shell .clock-status{
    margin-top:2px;
  }
}
@media(max-width:420px){
  #appShell.employee-clock-shell-mode .topbar-project-location{
    max-width:180px;
  }
  .employee-clock-shell .page-title{
    font-size:1.28rem;
  }
  .employee-clock-shell .clock-status{
    font-size:.66rem;
    padding:.34rem .5rem;
  }
}