/* WFH Performance v2 — Tabler-based institutional theme */
:root{--wfh-navy:#10264b;--wfh-navy-2:#0b1d3a;--wfh-blue:#206bc4;--wfh-soft:#f4f7fb}
body{background:var(--wfh-soft)}
.wfh-sidebar{background:linear-gradient(180deg,var(--wfh-navy),var(--wfh-navy-2));border:0}
.navbar-brand a,.navbar-brand a:hover{color:#fff}
.navbar-brand small{display:block;color:rgba(255,255,255,.55);font-size:.68rem;font-weight:400;margin-top:.15rem}
.brand-mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#206bc4,#4299e1);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(32,107,196,.35)}
.brand-small{width:38px;height:38px;border-radius:12px;font-size:.82rem;flex:0 0 38px}
.nav-section{padding:.9rem .75rem .35rem;color:rgba(255,255,255,.38);font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;list-style:none}
.wfh-sidebar .nav-link{border-radius:.65rem;margin:.08rem .35rem;padding:.65rem .8rem;color:rgba(255,255,255,.72)}
.wfh-sidebar .nav-link:hover,.wfh-sidebar .nav-link.active{background:rgba(255,255,255,.09);color:#fff}
.sidebar-user{padding:1rem .75rem;border-top:1px solid rgba(255,255,255,.08);margin-top:1rem}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.page-header{padding-top:1.25rem}
.login-bg{background:radial-gradient(circle at 85% 10%,rgba(32,107,196,.95),transparent 35%),linear-gradient(135deg,#071426,#10264b)}
.hero-card{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem;border-radius:1.25rem;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.18),transparent 35%),linear-gradient(135deg,#163d82,#206bc4 58%,#5a9df0);color:#fff;box-shadow:0 20px 50px rgba(32,107,196,.22)}
.hero-card h1{font-size:1.8rem;margin:.35rem 0 .4rem}.hero-card p{margin:0;color:rgba(255,255,255,.78)}.hero-kicker{font-size:.65rem;letter-spacing:.15em;font-weight:800;color:rgba(255,255,255,.68)}
.metric-card{transition:transform .18s,box-shadow .18s}.metric-card:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(15,23,42,.1)}
.metric-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.chart-lg{min-height:270px}
.compliance-card .card-body{min-height:300px}
.compliance-ring{--value:0;width:176px;height:176px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2fb344 calc(var(--value)*1%),#e8edf3 0);position:relative}
.compliance-ring:after{content:"";position:absolute;inset:15px;background:#fff;border-radius:50%}
.compliance-ring>div{position:relative;z-index:1;text-align:center}.compliance-ring strong{display:block;font-size:2rem}.compliance-ring span{font-size:.75rem;color:#667382}
.quick-actions{display:grid;gap:.75rem}.quick-action{display:flex;align-items:center;gap:.85rem;padding:.9rem;border:1px solid #e6ebf1;border-radius:.8rem;text-decoration:none;color:inherit;background:#fafbfd;transition:.15s}.quick-action:hover{border-color:#9ec5f1;background:#f2f7fd;transform:translateX(2px)}.quick-action svg{color:#206bc4;flex:0 0 auto}.quick-action strong,.quick-action small{display:block}.quick-action small{color:#667382;font-size:.72rem;margin-top:.15rem}
.data-box{padding:.85rem;border-radius:.75rem;background:#f7f9fc;border:1px solid #e8edf3;height:100%}.data-box span{display:block;color:#667382;font-size:.7rem}.data-box strong{display:block;margin-top:.25rem}
.report-side{top:6rem}.check-list{display:grid;gap:.8rem}.check-list>div{display:flex;align-items:center;gap:.65rem;color:#98a1ad}.check-list>div.done{color:#2fb344}.check-list svg{flex:0 0 auto}
.work-item{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid #e8edf3}.work-item:last-child{border-bottom:0}.work-number{width:32px;height:32px;border-radius:50%;background:#eaf2fb;color:#206bc4;display:grid;place-items:center;font-weight:700;flex:0 0 32px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem}.calendar-head{text-align:center;color:#667382;font-size:.72rem;font-weight:700;padding:.5rem}.calendar-day{min-height:90px;border:1px solid #e8edf3;border-radius:.75rem;padding:.55rem;background:#fff;position:relative}.calendar-day>span{font-weight:700}.calendar-day small{display:block;margin-top:1.2rem;font-size:.65rem;color:#667382}.calendar-day.is-wfh{background:#edf5ff;border-color:#b7d5f7}.calendar-day.is-wfh>span{color:#206bc4}.calendar-day.is-holiday{background:#fff0f0;border-color:#f4bbbb}.calendar-day.is-holiday>span{color:#d63939}.calendar-day.is-today{box-shadow:inset 0 0 0 2px #2fb344}.calendar-day.muted{background:transparent;border-style:dashed}.calendar-legend{display:flex;gap:1.25rem;flex-wrap:wrap}.calendar-legend span{display:flex;align-items:center;gap:.4rem;color:#667382;font-size:.75rem}.calendar-legend i{width:10px;height:10px;border-radius:50%}.today-dot{border:2px solid #2fb344;background:#fff}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.btn svg{margin-right:.35rem}.nav-link svg{margin:0}.icon{vertical-align:-.15em}
@media(max-width:991.98px){.hero-card{align-items:flex-start;flex-direction:column}.calendar-day{min-height:68px}.calendar-day small{margin-top:.65rem}.report-side{top:auto}}
@media(max-width:575.98px){.hero-card{padding:1.35rem}.hero-card h1{font-size:1.45rem}.calendar-grid{gap:.3rem}.calendar-day{min-height:54px;padding:.35rem;border-radius:.5rem}.calendar-day small{font-size:.55rem;margin-top:.35rem}.metric-card .card-body{padding:1rem}}