:root{--navy:#0b1f33;--navy-2:#12324f;--teal:#008b8b;--bg:#f4f7fa;--danger:#c62828;--warning:#e67e22;--success:#218838}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#243444;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.app-shell{display:grid;grid-template-columns:250px minmax(774px,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:#fff;padding:1rem;display:flex;flex-direction:column}
.sidebar-brand{font-weight:700;display:flex;align-items:center;gap:.7rem;padding:.4rem .4rem 1.5rem}.brand-mark{width:48px;height:48px;border-radius:12px;background:var(--teal);display:inline-grid;place-items:center;color:#fff;font-weight:800}.brand-mark.small{width:34px;height:34px;border-radius:8px}
.sidebar .nav-link{color:#c9d5e0;padding:.75rem;border-radius:.5rem;margin:.1rem 0}.sidebar .nav-link:hover,.sidebar .nav-link.active{color:#fff;background:var(--navy-2)}.sidebar-footer{margin-top:auto}.main-content{padding:1.5rem 2rem}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.user-chip{background:#fff;border:1px solid #dce4eb;border-radius:2rem;padding:.5rem .8rem}
.btn-teal{background:var(--teal);border-color:var(--teal);color:white}.btn-teal:hover{background:#006f6f;color:white}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:1rem}.kpi-card{background:#fff;border:0;border-radius:.75rem;padding:1rem;box-shadow:0 2px 12px #102a4310}.kpi-value{font-size:1.75rem;font-weight:750}.kpi-label{font-size:.83rem;color:#657786}
.panel{background:#fff;border-radius:.75rem;padding:1.1rem;box-shadow:0 2px 12px #102a4310}.chart-wrap{height:300px}.table{font-size:.88rem}.table thead th{white-space:nowrap;color:#566674}.badge-risk-critical,.badge-risk-overdue{background:#fde7e7;color:var(--danger)}.badge-risk-at-risk{background:#fff0dc;color:#a34f00}.badge-risk-on-track{background:#e2f5e9;color:var(--success)}.badge-status{background:#e8edf2;color:#405263}.progress{height:.55rem}.skeleton{height:110px;border-radius:.75rem;background:linear-gradient(90deg,#e8edf2 25%,#f7f9fa 50%,#e8edf2 75%);background-size:200% 100%;animation:pulse 1.3s infinite}@keyframes pulse{to{background-position:-200% 0}}
.login-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),#174d68)}.login-card{width:min(440px,92vw);background:#fff;padding:2.5rem;border-radius:1rem;text-align:center}.empty-state{text-align:center;padding:3rem;color:#6c7884}.task-drawer{width:min(580px,100vw)!important}.alert-list{max-height:390px;overflow:auto}.alert-item{border-left:4px solid var(--warning);padding:.7rem;border-bottom:1px solid #edf1f4}.toolbar{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.filter-control{min-width:150px}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.main-content{padding:1rem}}@media(max-width:767px){.app-shell{display:block}.sidebar{height:auto;position:relative}.sidebar .nav{display:grid;grid-template-columns:repeat(2,1fr)}.sidebar-footer{margin-top:1rem}.main-content{padding:.8rem}.topbar{align-items:flex-start}.kpi-grid{grid-template-columns:repeat(2,1fr)}.panel.table-panel{overflow:auto}}
@media print{.sidebar,.topbar button,.toolbar{display:none!important}.app-shell{display:block}.main-content{padding:0}.panel{box-shadow:none}.kpi-grid{grid-template-columns:repeat(5,1fr)}}

/* Executive/HOD monitoring dashboard */
:root{--navy:#062b4b;--navy-2:#0b4f82;--teal:#079b9b;--bg:#f7f9fc}
.app-shell{grid-template-columns:210px minmax(814px,1fr)}
.sidebar{padding:1.35rem .75rem;background:linear-gradient(180deg,#072d4e 0%,#052641 100%)}
.sidebar-brand{justify-content:center;flex-direction:column;padding:.35rem 0 1.5rem;font-size:.78rem}
.sidebar-brand .brand-mark{width:52px;height:52px;background:#fff;color:#123a5b;border-radius:8px;box-shadow:0 5px 14px #00182b55}
.sidebar .nav-link{padding:.82rem 1rem;margin:.13rem 0;font-size:.9rem;border-radius:5px}
.sidebar .nav-link.active{background:#11639d;box-shadow:inset 3px 0 #5ebcff}
.main-content{padding:1.4rem;background:#f8fafc;min-width:0}.topbar{margin:-1.4rem -1.4rem 1rem;padding:1.15rem 1.4rem;background:#fff;border-bottom:1px solid #e5ebf1}
.topbar h1{font-size:1.65rem!important;font-weight:750;color:#0c1722}.topbar-actions{display:flex;align-items:center;gap:.65rem}
.date-range{display:flex;align-items:center;gap:.65rem;min-width:240px;padding:.55rem .8rem;border:1px solid #dbe3eb;border-radius:6px;font-size:.82rem;background:#fff}
.date-range span:nth-child(2){flex:1}.profile-chip{display:flex;align-items:center;gap:.6rem;padding:.2rem .3rem}.profile-chip>span:nth-child(2){display:flex;flex-direction:column;font-size:.8rem;line-height:1.25;min-width:100px}.profile-chip small{color:#697b8c}
.person-avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#d7ecf6,#7bc5dc);color:#0b4f73;font-size:.72rem;font-weight:800;border:3px solid #e8f2f7}.person-avatar.large{width:54px;height:54px;font-size:.9rem}
.kpi-grid{gap:.8rem}.kpi-card{min-height:105px;padding:.9rem;display:flex;align-items:center;gap:.85rem;border:1px solid #e0e7ee;border-radius:9px;box-shadow:0 2px 7px #18344d12}
.kpi-icon{display:grid;place-items:center;flex:0 0 auto;width:54px;height:54px;border-radius:50%;font-size:1.75rem;font-weight:700;color:#fff}.kpi-icon.blue{background:linear-gradient(145deg,#2386e6,#1664c3)}.kpi-icon.teal{background:linear-gradient(145deg,#1bb9b3,#078b8b)}.kpi-icon.red{background:linear-gradient(145deg,#f35b65,#d8303b)}.kpi-icon.green{background:linear-gradient(145deg,#65bc45,#3e9429)}
.kpi-card .kpi-label{font-size:.82rem;color:#263849}.kpi-card .kpi-value{font-size:1.75rem;line-height:1.1;color:#101c28}.kpi-hint{font-size:.65rem;margin-top:.25rem}.kpi-hint.blue{color:#2676cb}.kpi-hint.teal{color:#078f8f}.kpi-hint.red{color:#e13d48}.kpi-hint.green{color:#4a9d31}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:.85rem}.dashboard-main{min-width:0}.panel{border:1px solid #e0e7ee;border-radius:9px;padding:.9rem;box-shadow:0 2px 7px #18344d10}
.status-panel{padding:0;overflow:hidden}.panel-heading{min-height:54px;padding:.65rem .9rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebf0}.panel h2,.panel-heading h2{font-size:1rem;font-weight:750;margin:0;color:#162534}
.dashboard-filters{display:flex;gap:.5rem}.dashboard-filters .form-select{width:140px;font-size:.72rem;padding:.4rem 1.8rem .4rem .6rem}.filter-button{width:34px;border:1px solid #d5dee7;background:#fff;border-radius:5px;color:#53687a}
.employee-table{margin:0;font-size:.72rem}.employee-table thead{background:#f9fbfd}.employee-table thead th{padding:.58rem .65rem;text-transform:none;font-size:.69rem;color:#334657;border-bottom:1px solid #dbe5ee}.employee-table tbody td{padding:.55rem .65rem;border-color:#e7edf2;vertical-align:middle}.employee-table tbody tr{cursor:pointer}.employee-table tbody tr:hover,.employee-table tbody tr.selected{background:#f4f9fd}.employee-table tbody tr.selected{box-shadow:inset 3px 0 #188ee1}
.employee-cell{display:flex;align-items:center;gap:.5rem;min-width:120px}.employee-cell .person-avatar{width:32px;height:32px;border-width:2px;font-size:.58rem}.current-work{display:block;max-width:145px;line-height:1.35}.progress-label{text-align:left;font-size:.68rem}.employee-table .progress{width:90px;height:7px;background:#e4ebf1}.progress-bar{background:#069b9b}.due-caption{display:block;color:#e7444d;font-size:.62rem}
.badge{font-weight:600;padding:.42rem .55rem;border-radius:5px}.badge-risk-critical,.badge-risk-overdue{background:#eb4b55;color:#fff}.badge-risk-at-risk{background:#ff850b;color:#fff}.badge-risk-on-track{background:#54aa39;color:#fff}.badge-risk-not-started{background:#7d8993;color:#fff}.badge-status{background:#7d8993;color:#fff}
.task-count{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:#edf3f7;font-weight:700}.priority-pill{display:inline-block;padding:.38rem .5rem;border-radius:5px;color:#fff;font-weight:700}.priority-pill.critical{background:#e73d48}.priority-pill.high{background:#ff850b}.priority-pill.medium{background:#2580d8}.priority-pill.low{background:#7d8993}
.project-chip{display:inline-block;max-width:125px;padding:.28rem .42rem;border-radius:4px;background:#e7f3fb;color:#176798;font-size:.65rem;font-weight:700;line-height:1.25}
.employee-detail-panel{padding:.9rem;height:max-content}.employee-detail-panel>h2{padding-bottom:.75rem;border-bottom:1px solid #e4eaf0}.detail-profile{display:flex;align-items:center;gap:.7rem;padding:1rem 0}.detail-profile h3{font-size:.9rem;font-weight:750;margin:0}.detail-profile p{font-size:.7rem;color:#66798b;margin:.15rem 0 0}.detail-section{padding:.68rem 0;border-top:1px solid #e7edf2}.detail-section label{display:block;font-size:.66rem;font-weight:700;color:#213546;margin-bottom:.25rem}.detail-section p{font-size:.72rem;margin:0}.detail-between{display:flex;justify-content:space-between}.detail-progress{height:8px;margin-top:.4rem}.mini-task{display:grid;grid-template-columns:20px 1fr auto;gap:.4rem;align-items:center;padding:.55rem;border:1px solid #e4eaf0;border-radius:5px;margin-top:.4rem;font-size:.65rem}.mini-task div{display:flex;flex-direction:column;min-width:0}.mini-task strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-task small{color:#6f8190}.mini-task b{align-self:start}
.workload-panel{height:205px}.workload-chart{height:155px}.task-detail-link{font-size:.7rem;text-decoration:none}.chart-wrap{height:220px}
.project-panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.project-panel-title>span{font-size:.7rem;color:#718292}.project-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.project-summary-card{padding:.8rem;border:1px solid #e1e8ee;border-radius:7px;background:#fbfdff}.project-summary-head{display:flex;justify-content:space-between;gap:.5rem}.project-summary-head h3{font-size:.78rem;font-weight:750;margin:0}.project-summary-head small{font-size:.62rem;color:#718292}.project-resources{height:max-content;white-space:nowrap;padding:.25rem .4rem;border-radius:10px;background:#e7f5f2;color:#087e78;font-size:.6rem}.project-progress-row{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.65rem}.project-summary-card>.progress{height:7px;margin:.3rem 0 .7rem}.project-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;border-top:1px solid #e7edf2;padding-top:.55rem}.project-metrics span{display:flex;flex-direction:column;font-size:.58rem;color:#718292}.project-metrics b{font-size:.85rem;color:#1c2e3e}
.employee-management{padding:0;overflow:hidden}.employee-management-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #e3eaf0}.employee-management-header h2{margin-bottom:.25rem}.employee-management-header p{margin:0;color:#708191;font-size:.75rem}.employee-management>.toolbar{padding:.85rem 1rem 0}.employee-total{margin-left:auto;color:#718292;font-size:.75rem}.employee-admin-table{margin:0;font-size:.78rem}.employee-admin-table th,.employee-admin-table td{padding:.75rem .85rem;vertical-align:middle}.employee-state{display:inline-block;padding:.28rem .5rem;border-radius:10px;font-size:.68rem;font-weight:700}.employee-state.active{background:#e4f5e9;color:#27813f}.employee-state.inactive{background:#edf0f2;color:#697782}.inactive-row{opacity:.62;background:#fafbfc}
.admin-settings{display:flex;flex-wrap:wrap;gap:1rem 2rem;color:#526378}.admin-entity-panel{height:100%;padding:0;overflow:hidden}.admin-entity-panel .table{margin:0;font-size:1rem}.admin-entity-panel .table td:last-child{white-space:nowrap}.admin-entity-panel .admin-edit{margin-right:.35rem}
.permission-matrix{margin:1rem;border-top:1px solid #e3eaf0;padding-top:1rem}.permission-matrix h3{font-weight:750}.permission-matrix-table th:first-child,.permission-matrix-table td:first-child{position:sticky;left:0;background:#fff;z-index:1}.permission-matrix-table th:not(:first-child),.permission-matrix-table td:not(:first-child){min-width:7rem;vertical-align:middle}
@media(max-width:1280px){.dashboard-grid{grid-template-columns:minmax(0,1fr) 250px}.dashboard-filters .form-select{width:115px}.employee-table{font-size:.68rem}.kpi-icon{width:46px;height:46px}.kpi-card{gap:.55rem}}
@media(max-width:1050px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.employee-detail-panel{display:none}.topbar-actions .date-range{display:none}}
@media(max-width:900px){.project-summary-grid{grid-template-columns:1fr}}
@media(max-width:767px){.app-shell{display:block}.sidebar-brand{flex-direction:row}.dashboard-filters{display:grid;grid-template-columns:1fr 1fr}.dashboard-filters .form-select{width:auto}.panel-heading{align-items:flex-start;gap:.6rem}.topbar{margin:-.8rem -.8rem 1rem}.profile-chip small,.profile-chip>span:last-child{display:none}}

/* Readable, responsive type scale */
html{font-size:17px}
body{font-size:1rem;line-height:1.5}
.app-shell{grid-template-columns:220px minmax(0,1fr)}
.sidebar-brand{font-size:.9rem}
.sidebar .nav-link{font-size:1rem;line-height:1.35}
.sidebar-footer .form-select,.sidebar-footer .btn{font-size:.9rem}
.topbar h1{font-size:clamp(1.5rem,2vw,1.85rem)!important}
#last-refreshed,.date-range,.profile-chip>span:nth-child(2){font-size:.9rem}
.kpi-card .kpi-label{font-size:.95rem}
.kpi-card .kpi-value{font-size:clamp(1.75rem,2.5vw,2rem)}
.kpi-hint{font-size:.82rem;line-height:1.35}
.panel h2,.panel-heading h2{font-size:1.12rem}
.dashboard-filters .form-select{font-size:.88rem}
.table,.employee-table,.employee-admin-table,.admin-entity-panel .table{font-size:1.0rem}
.employee-table thead th{font-size:.8rem}
.progress-label,.due-caption{font-size:.78rem}
.project-chip{font-size:.76rem}
.detail-profile h3{font-size:1rem}
.detail-profile p,.detail-section p{font-size:.84rem}
.detail-section label{font-size:.78rem}
.mini-task{font-size:.78rem}
.task-detail-link{font-size:.84rem}
.project-panel-title>span,.project-progress-row{font-size:.8rem}
.project-summary-head h3{font-size:.92rem}
.project-summary-head small,.project-resources{font-size:.8rem}
.project-metrics span{font-size:.8rem}
.project-metrics b{font-size:1rem}
.employee-management-header p,.employee-total{font-size:.86rem}
.employee-state{font-size:.78rem}
.form-label,.form-text,.btn,.form-control,.form-select{font-size:.95rem}
.badge,.priority-pill{font-size:.78rem}

@media(max-width:1280px){
  .employee-table{font-size:.82rem}
  .app-shell{grid-template-columns:200px minmax(0,1fr)}
  .dashboard-grid{grid-template-columns:minmax(0,1fr) 270px}
}
@media(max-width:1050px){
  .app-shell{grid-template-columns:190px minmax(0,1fr)}
  .topbar{flex-wrap:wrap;gap:.8rem}
  .topbar-actions{margin-left:auto}
  .employee-table{font-size:.86rem}
  .status-panel,.admin-entity-panel{overflow:auto}
}
@media(max-width:767px){
  html{font-size:16px}
  .sidebar{padding:.85rem}
  .sidebar-brand{font-size:1rem;padding-bottom:.8rem}
  .sidebar .nav-link{font-size:.95rem;padding:.7rem .8rem}
  .sidebar-footer .form-select,.sidebar-footer .btn{font-size:1rem}
  .main-content{padding:.8rem}
  .topbar{align-items:flex-start}
  .topbar-actions{width:100%;justify-content:space-between;margin-left:0}
  .kpi-grid{grid-template-columns:1fr}
  .kpi-card{min-height:92px}
  .dashboard-filters{grid-template-columns:1fr}
  .dashboard-filters .form-select{width:100%;font-size:1rem}
  .employee-table,.employee-admin-table,.admin-entity-panel .table{font-size:.88rem}
  .form-control,.form-select,.btn{font-size:1rem}
  .project-metrics{grid-template-columns:repeat(2,1fr)}
  .employee-management-header{align-items:flex-start;gap:.75rem;flex-wrap:wrap}
}