:root{
  --primary:#0f4c5c; --primary-dark:#0a3540; --accent:#c08a2e;
  --bg:#f3f5f6; --card:#ffffff; --text:#1c2b30; --text-muted:#5b6b70; --border:#e1e6e8;
  --green:#1c8a4b; --green-bg:#e6f4ec; --yellow:#a8730a; --yellow-bg:#fbf1de;
  --red:#c1392b; --red-bg:#fbeae8; --grey:#5b6b70; --grey-bg:#eef1f2; --radius:10px;
  --shadow:0 1px 3px rgba(16,32,38,.08), 0 1px 2px rgba(16,32,38,.06);
}
*{box-sizing:border-box;}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text);}
.app{display:flex; min-height:100vh;}
.sidebar{width:230px; flex-shrink:0; background:var(--primary); color:#fff; display:flex; flex-direction:column; padding:20px 0;}
.brand{padding:0 20px 18px 20px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:10px;}
.brand-title{font-size:15px; font-weight:700;}
.brand-sub{font-size:11.5px; color:rgba(255,255,255,.65); margin-top:3px;}
.periodsel{margin:10px 20px 6px;}
.periodsel select{width:100%; font-size:12.5px; padding:6px; border-radius:6px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff;}
.periodsel select option{color:#000;}
.nav-item{display:flex; align-items:center; gap:10px; padding:10px 20px; cursor:pointer; font-size:13.5px; color:rgba(255,255,255,.82); border-left:3px solid transparent;}
.nav-item:hover{background:rgba(255,255,255,.06);}
.nav-item.active{background:rgba(255,255,255,.1); border-left-color:var(--accent); color:#fff; font-weight:600;}
.nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.45); padding:14px 20px 4px;}
.nav-icon{width:18px; text-align:center; font-size:14px;}
.nav-score{margin-left:auto; font-size:11px; font-weight:700; padding:1px 6px; border-radius:20px;}
.nav-user{margin-top:auto; padding:14px 20px; border-top:1px solid rgba(255,255,255,.15); font-size:12px; color:rgba(255,255,255,.75);}
.nav-user .name{font-weight:700; color:#fff;}
.nav-user button{margin-top:8px; width:100%;}
.main{flex:1; min-width:0; padding:24px 32px 60px;}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.topbar h1{font-size:20px; margin:0 0 4px;}
.topbar .meta{font-size:12.5px; color:var(--text-muted);}
.actions{display:flex; gap:8px; flex-wrap:wrap;}
button{font-family:inherit; font-size:12.5px; cursor:pointer; border-radius:7px; border:1px solid var(--border); background:#fff; color:var(--text); padding:7px 12px; transition:.15s;}
button:hover{border-color:var(--primary); color:var(--primary);}
button:disabled{opacity:.45; cursor:not-allowed;}
button.primary{background:var(--primary); color:#fff; border-color:var(--primary);}
button.primary:hover{background:var(--primary-dark); color:#fff;}
button.danger{color:var(--red);}
button.danger:hover{border-color:var(--red);}
button.ghost{border-color:transparent; background:transparent; padding:4px 8px;}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px;}
.stat-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px;}
.stat-card .label{font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;}
.stat-card .value{font-size:26px; font-weight:700;}
.stat-card .sub{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
.badge{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap;}
.badge.green{color:var(--green); background:var(--green-bg);}
.badge.yellow{color:var(--yellow); background:var(--yellow-bg);}
.badge.red{color:var(--red); background:var(--red-bg);}
.badge.grey{color:var(--grey); background:var(--grey-bg);}
.panel{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:20px;}
.panel h2{font-size:15px; margin:0 0 14px;}
.dept-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.dept-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; cursor:pointer; border:1px solid transparent; transition:.15s;}
.dept-card:hover{border-color:var(--primary);}
.dept-card .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.dept-card .name{font-weight:700; font-size:14px;}
.dept-card .score{font-size:22px; font-weight:700; margin:4px 0 2px;}
.dept-card .count{font-size:11.5px; color:var(--text-muted);}
table{width:100%; border-collapse:collapse; font-size:12.8px;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted); padding:8px 8px; border-bottom:2px solid var(--border);}
td{padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.clickable{cursor:pointer;} tr.clickable:hover{background:#f8fafa;}
input[type=text], input[type=number], input[type=password], select{
  width:100%; font-family:inherit; font-size:12.5px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; background:#fbfcfc; color:var(--text);
}
input:disabled, select:disabled{background:#f1f3f4; color:var(--text-muted);}
input:focus, select:focus{outline:2px solid rgba(15,76,92,.25); border-color:var(--primary);}
.num{width:70px;}
.col-name{min-width:170px;}
.row-actions{white-space:nowrap;}
.emp-card{border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:12px;}
.emp-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; flex-wrap:wrap;}
.emp-head .who{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.emp-head input[type=text]{width:150px; display:inline-block;}
.chart-wrap{position:relative; height:280px;}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px;}
.hint{font-size:11.5px; color:var(--text-muted); margin-top:8px;}
.footer-note{font-size:11px; color:var(--text-muted); text-align:center; margin-top:30px;}
.empty-state{text-align:center; padding:30px 20px; color:var(--text-muted);}
.empty-state .big{font-size:34px; margin-bottom:8px;}
.toast{position:fixed; bottom:20px; right:20px; background:var(--text); color:#fff; padding:10px 16px; border-radius:8px; font-size:12.5px; box-shadow:var(--shadow); z-index:1000; opacity:0; transition:opacity .2s;}
.toast.show{opacity:1;}
.toast.error{background:var(--red);}
/* login screen */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--primary);}
.login-card{background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25); padding:36px 32px; width:340px;}
.login-card h1{font-size:17px; margin:0 0 2px;}
.login-card .sub{font-size:12px; color:var(--text-muted); margin-bottom:22px;}
.login-card label{font-size:12px; font-weight:600; display:block; margin-bottom:5px; margin-top:14px;}
.login-card button{width:100%; margin-top:20px;}
.login-error{color:var(--red); font-size:12px; margin-top:10px;}
@media(max-width:760px){
  .app{flex-direction:column;}
  .sidebar{width:100%; flex-direction:row; flex-wrap:wrap; padding:12px;}
  .brand{border:none; padding:6px 10px; width:100%;}
  .main{padding:18px;}
}