/* =========================================================
   HRM SYSTEM — STYLESHEET
   Primary: #ffffff · Secondary: #00a0eb
   ========================================================= */
:root{
  --white:#ffffff;
  --secondary:#00a0eb;
  --secondary-dark:#0086c4;
  --secondary-light:#e6f6fe;
  --text:#1b2733; --muted:#6b7c8f; --border:#e3e9ef; --bg:#f5f8fb;
  --danger:#e5484d; --danger-light:#fdeaea;
  --success:#12a150; --success-light:#e6f7ee;
  --warn:#f5a524; --warn-light:#fef4e5;
  --radius:10px;
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--secondary); text-decoration:none;}
a:hover{text-decoration:underline;}
h2,h3{margin:0 0 12px;}
.hidden{display:none!important;}
.muted{color:var(--muted);}
.small{font-size:12.5px;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.nowrap{white-space:nowrap;}
.mt-0{margin-top:0}.mt-10{margin-top:10px}.mt-16{margin-top:16px}
.flex{display:flex;gap:10px;align-items:center;}
.flex-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}

/* ---------- LOGIN ---------- */
.login-wrap,.install-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  background:linear-gradient(135deg,#fff 0%,#eaf7fe 55%,#d9f0fd 100%);
}
.login-card{
  width:100%; max-width:430px; background:var(--white);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 22px 55px rgba(0,160,235,.16); padding:36px 34px 30px;
}
.login-logo{display:block;margin:0 auto 20px;width:200px;max-width:100%;height:auto;}
.login-title{text-align:center;font-size:20px;font-weight:800;margin:0 0 4px;}
.login-sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 22px;}
.role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;}
.role-tabs input{position:absolute;opacity:0;pointer-events:none;}
.role-tabs label{
  text-align:center;padding:10px 4px;border:1.5px solid var(--border);border-radius:9px;
  cursor:pointer;font-weight:700;font-size:12.5px;color:var(--muted);transition:.15s;user-select:none;
}
.role-tabs label:hover{border-color:#bfe6fa;}
.role-tabs input:checked + label{border-color:var(--secondary);background:var(--secondary-light);color:var(--secondary-dark);}
.demo-box{
  margin-top:18px;padding:12px 14px;background:#f7fbfe;border:1px dashed #bfe6fa;
  border-radius:9px;font-size:12.5px;color:#4c5c6b;line-height:1.7;
}
.demo-box strong{color:var(--secondary-dark);}

/* ---------- FORMS ---------- */
.form-group{margin-bottom:15px;}
.lbl{display:block;font-weight:700;font-size:12.5px;color:#35424f;margin-bottom:6px;}
.lbl .req{color:var(--danger);}
.input,select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;
  font:inherit;font-size:13.5px;background:var(--white);color:var(--text);outline:none;transition:.15s;
}
.input:focus,select:focus,textarea:focus{
  border-color:var(--secondary);box-shadow:0 0 0 3px rgba(0,160,235,.15);
}
textarea{resize:vertical;min-height:80px;}
select,input[type="date"]{cursor:pointer;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;}
.form-grid .full{grid-column:1/-1;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:8px;border:1.5px solid transparent;
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;
  white-space:nowrap;text-decoration:none!important;
}
.btn-primary{background:var(--secondary);color:#fff;}
.btn-primary:hover{background:var(--secondary-dark);}
.btn-outline{background:var(--white);border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--secondary);color:var(--secondary);}
.btn-danger{background:var(--white);border-color:#f3c4c5;color:var(--danger);}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--secondary);padding:5px 8px;}
.btn-ghost:hover{background:var(--secondary-light);}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ---------- LAYOUT ---------- */
.layout{display:flex;min-height:100vh;}
.sidebar{
  width:248px;background:var(--white);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:60;
  transition:transform .22s ease;
}
.brand{padding:18px 20px;border-bottom:1px solid var(--border);}
.brand img{display:block;width:100%;max-width:175px;height:auto;}
.nav{flex:1;padding:14px 10px;overflow-y:auto;}
.nav a{
  display:block;padding:10px 14px;border-radius:8px;color:#41505f;
  font-weight:600;font-size:13.5px;margin-bottom:3px;
  border-left:3px solid transparent;text-decoration:none!important;transition:.15s;
}
.nav a:hover{background:#f2f9fe;color:var(--secondary);}
.nav a.active{background:var(--secondary-light);color:var(--secondary-dark);border-left-color:var(--secondary);}
.sidebar-foot{padding:14px;border-top:1px solid var(--border);}
.main{flex:1;margin-left:248px;display:flex;flex-direction:column;min-width:0;}
.topbar{
  height:66px;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:50;
}
.topbar h1{font-size:17px;font-weight:800;margin:0;}
.menu-toggle{
  display:none;background:var(--white);border:1.5px solid var(--border);
  border-radius:8px;font-size:17px;line-height:1;padding:7px 11px;cursor:pointer;color:var(--text);
}
.user-chip{margin-left:auto;display:flex;align-items:center;gap:10px;}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--secondary);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;
}
.user-meta{display:flex;flex-direction:column;line-height:1.25;}
.user-meta strong{font-size:13.5px;}
.user-meta span{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.content{padding:22px;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,30,45,.45);z-index:55;}
.sidebar-backdrop.show{display:block;}

/* ---------- CARDS ---------- */
.card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden;
}
.card-head{
  padding:14px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.card-head h2{margin:0;font-size:15px;font-weight:800;}
.card-head .spacer{margin-left:auto;}
.card-body{padding:18px;}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:16px;margin-bottom:20px;}
.stat{
  background:var(--white);border:1px solid var(--border);border-top:3px solid var(--secondary);
  border-radius:12px;padding:17px 18px;box-shadow:var(--shadow);
}
.stat .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;}
.stat .value{font-size:26px;font-weight:800;margin-top:6px;letter-spacing:-.5px;}
.stat .sub{font-size:12px;color:var(--muted);margin-top:3px;}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th{
  text-align:left;padding:11px 14px;background:#f7fafd;color:#4c5c6b;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
table.data td{padding:11px 14px;border-bottom:1px solid #eef2f6;vertical-align:middle;}
table.data tbody tr:hover td{background:#fafdff;}
table.data tbody tr:last-child td{border-bottom:none;}
.empty-row td{text-align:center;padding:34px 14px!important;color:var(--muted);font-style:italic;}

/* ---------- BADGES ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap;}
.badge-success{background:var(--success-light);color:#0e7a3d;}
.badge-info{background:var(--secondary-light);color:#0080bd;}
.badge-warn{background:var(--warn-light);color:#b4700b;}
.badge-danger{background:var(--danger-light);color:#c62a2f;}
.badge-muted{background:#eef2f6;color:#63727f;}

/* ---------- ALERTS ---------- */
.alert{padding:12px 16px;border-radius:9px;margin-bottom:16px;font-weight:600;font-size:13.5px;}
.alert-success{background:var(--success-light);color:#0e7a3d;border:1px solid #bfe9d2;}
.alert-error{background:var(--danger-light);color:#c62a2f;border:1px solid #f5c9cb;}
.alert-info{background:var(--secondary-light);color:#0080bd;border:1px solid #bfe6fa;}

/* ---------- FILTERS ---------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;align-items:end;}
.filters .form-group{margin-bottom:0;}
.filters .filter-actions{display:flex;gap:8px;align-items:center;}

/* ---------- PROGRESS ---------- */
.progress{height:10px;border-radius:999px;background:#eef2f6;overflow:hidden;min-width:120px;}
.progress > span{display:block;height:100%;background:var(--secondary);border-radius:999px;transition:width .45s ease;}
.progress.lg{height:14px;}
.progress-label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:6px;color:#41505f;}

/* ---------- CHECK PILLS ---------- */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:9px;}
.check-item{
  display:flex;align-items:center;gap:9px;padding:9px 13px;
  border:1.5px solid var(--border);border-radius:9px;cursor:pointer;
  font-size:13px;font-weight:600;transition:.15s;background:var(--white);
}
.check-item:hover{border-color:#bfe6fa;}
.check-item input{accent-color:var(--secondary);width:16px;height:16px;cursor:pointer;}
.check-item:has(input:checked){border-color:var(--secondary);background:var(--secondary-light);color:var(--secondary-dark);}

/* ---------- MISC ---------- */
.divider{height:1px;background:var(--border);margin:18px 0;}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:#f2f6fa;color:#516272;font-size:11.5px;font-weight:700;margin:1px 3px 1px 0;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .menu-toggle{display:inline-flex;}
  .content{padding:16px;}
  .topbar{padding:0 14px;}
  .user-meta{display:none;}
  .login-card{padding:28px 22px;}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr;}
  .role-tabs{grid-template-columns:1fr;}
}