*{box-sizing:border-box}body{margin:0;background:#f4f6fa;color:#17243b;font:15px/1.55 Inter,Segoe UI,Arial,sans-serif}header{min-height:68px;background:#fff;border-bottom:1px solid #e4e9f1;display:flex;align-items:center;padding:0 4vw;gap:40px;position:sticky;top:0;z-index:2}.brand{font-weight:800;letter-spacing:.08em;color:#19345b;text-decoration:none}.brand small{color:#3868cb}nav{display:flex;gap:24px;flex:1}nav a,.user a{color:#42536d;text-decoration:none;font-weight:600}.user{margin-left:auto;color:#64748b}main{max-width:1440px;margin:36px auto;padding:0 32px;min-height:78vh}.pagehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.pagehead h1{font-size:30px;letter-spacing:-.6px;margin:0;color:#172b4d}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:800;color:#3868cb;margin:0 0 6px}.muted{color:#718096}.button,button{display:inline-flex;align-items:center;justify-content:center;background:#2859bf;color:white;border:0;border-radius:8px;padding:10px 18px;text-decoration:none;font-weight:650;cursor:pointer}.button.small{padding:6px 12px}.danger{background:#b83b48}.secondary{background:#68778d}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.stats article,.panel{background:#fff;border:1px solid #e4eaf2;border-radius:12px;padding:22px;box-shadow:0 2px 8px #19345b0a}.stats span{display:block;color:#718096}.stats b{display:block;font-size:28px;margin-top:5px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{margin-bottom:18px}.panel h2{font-size:18px;margin:0 0 16px}.panel p{border-bottom:1px solid #eef1f5;padding:8px 0;margin:0}.panel a{color:#2859bf;text-decoration:none;font-weight:600}.panel small{display:block;color:#7a8799}.status{float:right;color:#65758b;font-size:13px}label{display:block;font-weight:650;margin:14px 0}input,select,textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #d5deea;border-radius:7px;background:white;font:inherit}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf0f4}th{color:#63728a;font-size:12px;text-transform:uppercase;letter-spacing:.06em}.message{padding:12px 16px;background:#e7f3ed;border-radius:8px;margin-bottom:16px}.login{max-width:420px;margin:8vh auto;background:#fff;padding:32px;border-radius:12px;border:1px solid #e4eaf2}.login h1{margin-top:0}footer{text-align:center;color:#94a0b0;padding:24px;font-size:12px}@media(max-width:850px){header{height:auto;flex-wrap:wrap;padding:16px}nav{order:3;overflow:auto;width:100%}.stats{grid-template-columns:1fr 1fr}.columns{grid-template-columns:1fr}main{padding:0 16px}.pagehead{align-items:flex-start;gap:14px;flex-wrap:wrap}}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px}.form-grid .wide{grid-column:1/-1}.form-grid label{margin:8px 0 14px}.form-grid input[type=checkbox]{display:inline-block;width:auto;margin:10px}.required{color:#bd3545}.panel hr{border:0;border-top:1px solid #e9edf3;margin:24px 0}@media(max-width:700px){.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}}

.approval-step{padding:14px 0;border-bottom:1px solid #edf0f4}.approval-step p{padding:4px 0;border:0}.approval-step small{color:#718096}
.timeline{list-style:none;padding:0;margin:0}.timeline li{position:relative;border-left:2px solid #dce4ef;margin-left:8px;padding:0 0 22px 22px}.timeline li:before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:#2859bf}.timeline li span,.timeline li small{display:block;color:#718096;margin-top:4px}.timeline li p{border:0;padding:6px 0}.form-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.check-row{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid #e4eaf2;border-radius:8px}.check-row input{width:auto;margin:4px 0 0}.check-row small{display:block;color:#718096;font-weight:400}.overdue{color:#b42318;background:#fee4e2;border-radius:5px;padding:2px 6px}@media(max-width:700px){.form-checks{grid-template-columns:1fr}}


/* Grassroots ERP visual refresh */
:root{
 --gr-ink:#172b3a;--gr-muted:#687b89;--gr-primary:#176b55;--gr-primary-dark:#10513f;
 --gr-accent:#d7a94b;--gr-bg:#f3f6f5;--gr-line:#e2eae6;--gr-surface:#fff;
 --gr-shadow:0 10px 30px rgba(24,57,46,.07);--gr-radius:16px;
}
html{scroll-behavior:smooth}
body{background:var(--gr-bg);color:var(--gr-ink);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
header{min-height:76px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--gr-line);box-shadow:0 2px 14px rgba(20,54,43,.035);gap:28px;backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.12em;color:var(--gr-ink);white-space:nowrap}
.brand-mark{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.brand small{font-size:10px;letter-spacing:.16em;color:var(--gr-primary);background:#eaf4ef;border-radius:5px;padding:3px 6px}
nav{gap:7px;align-items:center;flex-wrap:wrap}
nav a,.user a{padding:8px 10px;border-radius:9px;font-size:13px;color:#52656d;transition:background .18s,color .18s}
nav a:hover,.user a:hover{background:#edf5f1;color:var(--gr-primary)}
.user{font-size:13px;white-space:nowrap}
main{max-width:1500px;margin:34px auto;padding:0 36px;min-height:78vh}
.pagehead{margin-bottom:28px;gap:20px}
.pagehead h1{font-size:clamp(25px,3vw,34px);font-weight:750;letter-spacing:-1px;color:var(--gr-ink);line-height:1.2}
.eyebrow{color:var(--gr-primary);font-size:10px;letter-spacing:.17em}
.muted{color:var(--gr-muted)}
.panel,.stats article{border:1px solid var(--gr-line);border-radius:var(--gr-radius);box-shadow:var(--gr-shadow);padding:25px}
.panel{margin-bottom:20px}
.panel h2{font-size:19px;font-weight:700;letter-spacing:-.25px;color:var(--gr-ink)}
.panel p{line-height:1.7}
.stats{gap:18px}
.stats article{transition:transform .18s,box-shadow .18s}
.stats article:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(24,57,46,.10)}
.stats b{font-size:30px;letter-spacing:-1px;color:var(--gr-ink)}
.stats span{font-size:13px;color:var(--gr-muted)}
.button,button{background:var(--gr-primary);border-radius:9px;padding:11px 18px;font-size:13px;font-weight:700;letter-spacing:.01em;box-shadow:0 3px 8px rgba(23,107,85,.13);transition:background .18s,transform .18s,box-shadow .18s}
.button:hover,button:hover{background:var(--gr-primary-dark);transform:translateY(-1px);box-shadow:0 6px 14px rgba(23,107,85,.18)}
.secondary{background:#65777a}.secondary:hover{background:#4c5e61}
.danger{background:#b54747}
label{font-size:13px;font-weight:700;color:#344a4e;margin:17px 0}
input,select,textarea{margin-top:7px;padding:12px 14px;min-height:45px;border:1px solid #d6e1dc;border-radius:9px;background:#fff;color:var(--gr-ink);font-family:Inter,'Segoe UI',Roboto,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.45;outline:none;transition:border-color .16s,box-shadow .16s}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#4d9b80;box-shadow:0 0 0 3px rgba(47,137,103,.12)}
input[type=checkbox],input[type=radio]{accent-color:var(--gr-primary)}
input[type=file]{padding:9px}
table{border-collapse:separate;border-spacing:0;font-size:13px}
th{background:#f6f9f7;color:#60736d;font-size:10px;letter-spacing:.1em}
th:first-child{border-top-left-radius:8px}th:last-child{border-top-right-radius:8px}
td,th{padding:13px 14px;border-bottom:1px solid #eaf0ec}
tr:last-child td{border-bottom:0}
.message{border:1px solid #cde5d8;background:#edf7f1;color:#245d45;border-radius:10px;padding:13px 16px}
.approval-step{padding:17px 0}
.timeline li:before{background:var(--gr-primary);box-shadow:0 0 0 4px #e4f1eb}
.check-row{border-color:var(--gr-line);border-radius:10px;background:#fbfdfc}
footer{padding:28px 16px 34px;color:#71817c;font-size:12px}
.footer-brand{display:inline-flex;align-items:center;gap:8px;color:#53665f;font-weight:700;letter-spacing:.08em}
.footer-brand svg{width:22px;height:22px}
.login-shell{max-width:1100px;margin:5vh auto 7vh;display:grid;grid-template-columns:1.05fr .95fr;min-height:590px;background:#fff;border:1px solid var(--gr-line);border-radius:26px;overflow:hidden;box-shadow:0 28px 80px rgba(24,57,46,.13)}
.login-aside{position:relative;overflow:hidden;padding:56px 52px;background:linear-gradient(145deg,#103f35 0%,#176b55 60%,#248365 100%);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.login-aside:before,.login-aside:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;width:430px;height:430px;right:-170px;top:-145px}
.login-aside:after{width:310px;height:310px;right:-105px;top:-85px;border-color:rgba(255,255,255,.10)}
.login-aside-content{position:relative;z-index:1;max-width:390px;margin:auto 0}
.login-aside h1{font-size:39px;line-height:1.12;letter-spacing:-1.4px;margin:24px 0 15px;color:#fff}
.login-aside p{color:rgba(255,255,255,.78);font-size:15px;max-width:350px}
.login-aside .eyebrow{color:#f0d18b}
.login-aside-foot{position:relative;z-index:1;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.08em}
.login-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;letter-spacing:.14em;font-size:13px}
.login-brand svg{width:44px;height:44px}
.login-panel{padding:62px 58px;display:flex;flex-direction:column;justify-content:center}
.login-panel h2{font-size:28px;letter-spacing:-.8px;margin:0 0 6px;color:var(--gr-ink)}
.login-panel .intro{font-size:13px;color:var(--gr-muted);margin:0 0 25px}
.login-panel form p{margin:0 0 17px}
.login-panel form label{display:block;margin:0 0 7px;font-size:12px}
.login-panel form input{margin-top:6px}
.login-panel button{width:100%;min-height:48px;margin-top:10px;font-size:14px}
.login-help{margin-top:18px;color:#82918c;font-size:11px;text-align:center}
.login-error{padding:10px 12px;background:#fff0ee;border:1px solid #f3d1cc;border-radius:9px;color:#a13e32;font-size:12px;margin-bottom:14px}
@media(max-width:950px){header{gap:14px;padding:0 20px}nav{gap:2px}nav a{font-size:12px;padding:7px}.user{font-size:12px}main{padding:0 22px}}
@media(max-width:760px){.login-shell{grid-template-columns:1fr;margin:18px 12px;border-radius:18px}.login-aside{padding:28px;min-height:240px}.login-aside h1{font-size:30px}.login-aside-content{margin:30px 0}.login-aside-foot{display:none}.login-panel{padding:34px 26px}.login-shell{min-height:auto}header{position:relative}main{margin:22px auto;padding:0 14px}.stats{grid-template-columns:1fr 1fr}}

/* Form typography correction: typed values and placeholders stay regular weight. */
input,select,textarea{font-weight:400}
input::placeholder,textarea::placeholder{font-weight:400;color:#87958f;opacity:1}

/* v11: official Grassroots identity and dashboard navigation */
.brand-logo{display:block;width:238px;max-width:24vw;height:auto;object-fit:contain}
.footer-brand img{display:block;width:210px;max-width:65vw;height:auto;object-fit:contain}
.powered-by{font-size:10px;letter-spacing:.16em;font-weight:750;color:#52665f;margin-top:8px}
.login-logo{display:block;width:min(100%,390px);height:auto;object-fit:contain}
.login-brand{display:block}
.login-brand img{display:block;width:min(100%,430px);height:auto;object-fit:contain}
.main-nav{display:flex;gap:5px;align-items:center;flex:1}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:7px}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:190px;padding:8px;background:#fff;border:1px solid var(--gr-line);border-radius:12px;box-shadow:0 14px 36px rgba(20,54,43,.14);z-index:20}
.nav-dropdown-menu a{display:block;padding:10px 12px;white-space:nowrap}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.dashboard-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.workspace-label{font-size:11px;letter-spacing:.17em;font-weight:800;color:var(--gr-muted)}
.dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.dashboard-main{min-width:0}
.dashboard-main .stats{margin-bottom:18px}
.dashboard-rail{position:sticky;top:96px;min-width:0}
.social-panel{background:#fff;border:1px solid var(--gr-line);border-radius:16px;box-shadow:var(--gr-shadow);overflow:hidden}
.social-tabs{display:flex;border-bottom:1px solid var(--gr-line);background:#fbfdfc}
.social-tab{flex:1;min-width:0;border:0;border-radius:0;background:transparent;color:#60736d;box-shadow:none;padding:15px 10px;font-size:12px;font-weight:700;border-bottom:3px solid transparent}
.social-tab:hover{background:#f1f7f3;color:var(--gr-primary);transform:none;box-shadow:none}
.social-tab.active{color:var(--gr-primary);background:#fff;border-bottom-color:var(--gr-primary)}
.tab-count{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#e8f3ed;color:var(--gr-primary);font-size:10px}
.social-tab-content{max-height:680px;overflow:auto;padding:4px 16px 12px}
.social-tab-content[hidden]{display:none}
.social-feed-item{display:block;padding:14px 2px;border-bottom:1px solid #edf2ef;text-decoration:none;color:var(--gr-ink)}
.social-feed-item strong,.social-feed-item span,.social-feed-item small{display:block}
.social-feed-item strong{font-size:13px;color:#243c35;margin-bottom:4px}
.social-feed-item span{font-size:12px;line-height:1.45;color:#687b89;font-weight:400}
.social-feed-item small{font-size:10px;color:#91a09a;margin-top:6px}
.social-feed-item.unread{border-left:3px solid var(--gr-primary);padding-left:10px;background:#f8fcf9}
.social-feed-item:hover{background:#f7faf8}
.feed-footer-link{display:block;text-align:center;padding:13px 4px 4px;font-size:12px;font-weight:700;color:var(--gr-primary);text-decoration:none}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.section-heading h2{margin:2px 0 0}
.section-heading>a{font-size:12px;font-weight:700;color:var(--gr-primary);text-decoration:none;white-space:nowrap}
.interview-day-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.interview-day{background:#f8fbf9;border:1px solid #e8f0eb;border-radius:12px;padding:14px;min-width:0}
.interview-day h3{font-size:14px;margin:0 0 8px;display:flex;justify-content:space-between;gap:8px}
.interview-day h3 small{font-size:10px;color:var(--gr-muted);font-weight:500}
.interview-item{display:block;padding:10px 0;border-top:1px solid #e8efeb;text-decoration:none}
.interview-item strong,.interview-item span,.interview-item small{display:block}
.interview-item strong{font-size:12px;color:var(--gr-primary)}
.interview-item span{font-size:11px;color:var(--gr-ink)}
.interview-item small{font-size:10px;color:var(--gr-muted);margin-top:3px}
.empty-note{font-size:12px;margin:8px 0!important}
@media(max-width:1100px){.dashboard-layout{grid-template-columns:minmax(0,1fr) 300px}.brand-logo{width:200px}}
@media(max-width:900px){.dashboard-layout{grid-template-columns:1fr}.dashboard-rail{position:static;grid-row:1}.social-tab-content{max-height:360px}.main-nav{flex-wrap:wrap}}
@media(max-width:650px){.brand-logo{width:185px;max-width:55vw}.footer-brand img{width:180px}.interview-day-grid{grid-template-columns:1fr}.dashboard-topline{margin-bottom:12px}.main-nav{order:3;width:100%;overflow:visible}.nav-dropdown-menu{left:auto;right:0}}

.leave-balance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px}
.leave-balance-card{border:1px solid #e6eee9;background:#f8fbf9;border-radius:12px;padding:14px}
.leave-balance-card>strong{display:block;margin-bottom:12px;color:#164e3d}
.leave-balance-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.leave-balance-numbers span{display:flex;flex-direction:column}
.leave-balance-numbers b{font-size:19px;color:#183b30}
.leave-balance-numbers small{font-size:10px;color:#718078}
.payroll-line-form{display:grid;grid-template-columns:repeat(4,minmax(80px,1fr)) auto;gap:5px;min-width:560px}
.payroll-line-form input{min-width:0;width:100%;padding:7px;font-size:12px}
.payroll-line-form button{padding:7px 10px;font-size:11px}
.table-scroll{overflow-x:auto}
.payroll-stats{margin-bottom:18px}

.employee-actions{white-space:nowrap}.danger-link{color:#b42318!important;font-weight:700}.employee-actions a{font-size:13px}

.filter-row{display:flex;align-items:end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.filter-row label{min-width:220px}
.grant-source-help{font-size:12px;color:var(--gr-muted)}