:root{--blue:#1f4e9b;--red:#d81f3f;--green:#198754;--amber:#d99a00;--bg:#f5f7fb;--text:#172033;--muted:#6d7688;--border:#e4e8f0}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{background:white;border-bottom:1px solid var(--border);padding:10px 28px}.brand{display:flex;align-items:center;gap:12px}.brand img{height:62px;width:62px;object-fit:contain}.brand-title{font-size:24px;font-weight:700;color:var(--blue)}.brand-sub{color:var(--muted);font-size:13px}
.container{max-width:1280px;margin:28px auto;padding:0 20px}.card{background:white;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 8px 30px rgba(20,40,80,.06)}
.narrow{max-width:460px;margin:50px auto}.login-logo{display:block;height:90px;margin:0 auto 10px}.centered{text-align:center}.muted{color:var(--muted)}
label{display:block;margin-top:12px;margin-bottom:5px;font-weight:600}input,select,textarea{width:100%;padding:11px;border:1px solid #cfd6e3;border-radius:9px;font-size:15px}
button,.button-link{border:0;border-radius:9px;padding:11px 14px;font-weight:700;color:white;cursor:pointer;text-decoration:none;display:inline-block}.blue{background:var(--blue)}.green{background:var(--green)}.red{background:var(--red)}.amber{background:var(--amber)}.gray{background:#697386}.full{width:100%;margin-top:16px}.small{padding:7px 9px;font-size:12px;background:#596273}
.notice{padding:12px;background:#eef4ff;border:1px solid #c9dafd;border-radius:10px;margin:12px 0}.notice.error{background:#fff0f2;color:#8f1228}.red-text{color:var(--red)!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}.narrow-left{grid-template-columns:350px 1fr}.row-between,.row-links{display:flex;justify-content:space-between;align-items:center;gap:10px}.row-links{margin-top:18px}.row-links a{color:var(--blue);font-weight:700;text-decoration:none}.link-button{background:none;padding:0}
.punch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.punch-grid button{padding:20px;font-size:18px}
.stats,.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.stats span,.metric{background:#f8faff;border:1px solid var(--border);border-radius:12px;padding:14px}.stats b,.metric b{display:block;color:var(--blue);font-size:22px}.metric span,.metric small{display:block;color:var(--muted);margin-top:4px}
.hrnav{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}.hrnav a{color:var(--blue);font-weight:700;text-decoration:none}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--border);font-size:14px}th{background:#fafbfe;color:#556070}
.balance-form{display:grid;grid-template-columns:70px 70px 70px auto;gap:5px}.announcement{padding:10px 0;border-bottom:1px solid var(--border)}footer{text-align:center;color:var(--muted);padding:28px}
@media(max-width:900px){.grid2,.narrow-left,.stats,.metrics{grid-template-columns:1fr}.punch-grid{grid-template-columns:1fr}.balance-form{grid-template-columns:1fr}}

.employee-editor,.attendance-editor{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;background:#fbfcff}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.employee-actions{display:flex;gap:8px;align-items:center;margin-top:10px}.balance-panel{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}


/* Talem Clock v2.2 - employee list + single employee editor */
.employees-layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:22px;
}
.employee-list-card{padding:18px}
.employee-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.employee-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
}
.employee-list-row:hover{background:#f7f9fd}
.employee-list-row.selected{
  border-color:#9db8ea;
  background:#eef4ff;
}
.employee-list-row strong{display:block}
.employee-list-row span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.employee-list-meta .status-pill{color:var(--text);margin:0}
.employee-detail-card{min-height:420px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.section-divider{height:1px;background:var(--border);margin:22px 0}
.tiny-note{font-size:12px;margin-top:12px}
@media(max-width:900px){
  .employees-layout{grid-template-columns:1fr}
  .form-grid.two,.form-grid.three{grid-template-columns:1fr}
}

.version-badge{display:inline-block;background:#172033;color:white;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:14px}
.employees-master-detail{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px}
.employees-sidebar{padding:16px;max-height:75vh;overflow:auto}
.employee-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.employee-list-item{display:block;padding:12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);background:#fff}
.employee-list-item:hover{background:#f7f9fd}
.employee-list-item.active-selection{background:#eaf2ff;border-color:#7fa4e8;box-shadow:0 0 0 2px rgba(31,78,155,.08)}
.employee-list-name{font-weight:700}
.employee-list-role{font-size:13px;color:var(--muted);margin-top:3px}
.employee-list-status{font-size:12px;margin-top:6px;color:var(--blue);font-weight:700}
.employee-panel{min-height:520px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.employees-master-detail{grid-template-columns:1fr}.form-grid.two,.form-grid.three{grid-template-columns:1fr}}


/* Talem Clock v2.4 - polished employee cards and aligned actions */
.employee-directory-card{margin-bottom:22px}
.employee-directory-header{margin-bottom:18px}
.employee-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.employee-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.employee-card:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 20px rgba(30,50,90,.09);
  border-color:#b8c9e8;
}
.selected-employee-card{
  border-color:#6f96dc;
  background:#f2f6ff;
  box-shadow:0 0 0 2px rgba(31,78,155,.08);
}
.employee-avatar{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#eaf1fd;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:15px;
}
.employee-card-body{min-width:0}
.employee-card-name{
  font-weight:800;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-card-role{
  color:var(--muted);
  font-size:13px;
  margin:3px 0 7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-status{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.employee-status-active{background:#e8f7ef;color:#147343}
.employee-status-inactive{background:#f1f2f5;color:#697386}
.employee-detail-spaced{margin-top:22px}
.employee-action-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.employee-action-row form{margin:0}
.action-btn{
  min-width:150px;
  height:42px;
  padding:0 18px;
  border-radius:10px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.action-neutral{background:#5f6878}
@media(max-width:1050px){
  .employee-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .employee-card-grid{grid-template-columns:1fr}
  .employee-action-row{flex-direction:column;align-items:stretch}
  .employee-action-row form,.action-btn{width:100%}
}


/* Talem Clock v3.1 visual polish */
body{
  background:
    radial-gradient(circle at top right,rgba(79,126,196,.08),transparent 28%),
    linear-gradient(180deg,#f7f9fc 0%,#f2f5f9 100%);
}
.topbar{
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 16px rgba(26,49,86,.06);
}
.hrnav{
  background:white;
  border:1px solid #e2e8f2;
  border-radius:14px;
  padding:10px 14px;
  box-shadow:0 6px 18px rgba(25,50,90,.05);
}
.hrnav a{
  padding:8px 10px;
  border-radius:8px;
}
.hrnav a:hover{
  background:#eef4ff;
}
.card{
  border-color:#e2e8f2;
  box-shadow:0 8px 24px rgba(25,50,90,.06);
}