*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
:root{
    --navy:#213564;
    --navy-dark:#14243f;
    --blue:#00A3E7;
    --red:#D51F26;
    --bg:#f4f7fa;
    --text:#263548;
    --muted:#78869a;
    --line:#e5eaf0;
    --white:#fff;
}
body{background:var(--bg);color:var(--text)}
a{text-decoration:none}
.sidebar{
    position:fixed;left:0;top:0;bottom:0;width:270px;
    background:linear-gradient(180deg,var(--navy-dark),var(--navy));
    color:#fff;padding:27px 18px;display:flex;flex-direction:column
}
.brand-wrap{padding:0 11px 23px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand{font-size:22px;font-weight:800;letter-spacing:.2px}.brand span{color:var(--blue)}.brand.dark{color:var(--navy)}
.portal-label{font-size:12px;opacity:.65;margin-top:6px}
.side-nav{display:flex;flex-direction:column;gap:5px;margin-top:18px;height:100%}
.nav-section{font-size:10px;letter-spacing:1.2px;opacity:.45;padding:16px 12px 5px;font-weight:700}
.side-nav a{display:flex;align-items:center;gap:10px;color:white;padding:12px 13px;border-radius:10px;font-size:14px}
.side-nav a:hover{background:rgba(255,255,255,.09)}
.nav-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.nav-spacer{flex:1}.logout{color:#ffdede!important}
.main{margin-left:270px;min-height:100vh}
.topbar{
    height:80px;background:white;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;padding:0 34px
}
.eyebrow{font-size:10px;letter-spacing:1.2px;color:var(--blue);font-weight:800;margin-bottom:3px}
.topbar h1{font-size:18px;color:var(--navy)}
.user-box{display:flex;flex-direction:column;text-align:right;gap:3px}
.user-box strong{color:var(--navy);font-size:14px}.user-box span{font-size:12px;color:var(--muted)}
.content{padding:34px;max-width:1500px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.page-head h2{font-size:27px;color:var(--navy);margin-bottom:6px}.page-head p{color:var(--muted);font-size:14px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.cards{display:grid;gap:16px;margin-bottom:20px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}
.card,.panel,.approval-card,.org-card{
    background:white;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 5px 18px rgba(27,47,76,.04)
}
.card{padding:23px}.card.accent{border-top:3px solid var(--blue)}
.card span{display:block;color:var(--muted);font-size:12px;margin-bottom:9px}.card strong{font-size:27px;color:var(--navy)}
.panel{padding:25px;margin-bottom:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-head h3{color:var(--navy);margin-top:3px}
.panel-kicker{font-size:10px;letter-spacing:1.2px;color:var(--blue);font-weight:800}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}
th,td{padding:14px 13px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}td{font-size:14px}
td small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
tbody tr:hover{background:#fafcff}
.status,.role-badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700}
.status.waiting{background:#fff2c9;color:#846300}.status.approved{background:#e1f6e9;color:#1c6a3d}.status.rejected{background:#fde7e7;color:#982525}
.role-badge.employee{background:#eef4fb;color:#38597d}.role-badge.manager{background:#e9f6fc;color:#1175a1}.role-badge.admin{background:#f2ecfb;color:#67469a}
.table-link,.text-link{color:var(--blue);font-size:12px;font-weight:700}
.form-grid,.filter-grid{display:grid;gap:18px}.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}
.filter-grid{grid-template-columns:1.4fr 1fr 1fr .8fr auto;align-items:end}
label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:7px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #d7dfe8;border-radius:9px;background:white;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,163,231,.08)}
.checkbox-row label{display:flex;align-items:center;gap:9px}.checkbox-row input{width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--blue);color:white}.btn.light{background:white;color:var(--navy);border:1px solid var(--line)}.btn.full{width:100%;margin-top:18px}
.btn.approve{background:#21864c;color:white}.btn.reject{background:var(--red);color:white}
.filter-actions,.button-row{display:flex;gap:8px}
.alert{padding:12px 14px;border-radius:9px;margin-bottom:18px}.alert.success{background:#e4f6ea;color:#17653a}.alert.error{background:#fde7e7;color:#8c2222}
.empty{padding:34px;text-align:center;color:var(--muted)}.empty.small{padding:18px}
.mini-stats{display:grid;grid-template-columns:repeat(3,180px);gap:14px;margin-bottom:20px}
.mini-stats>div{background:white;border:1px solid var(--line);border-radius:12px;padding:15px 17px}.mini-stats span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}.mini-stats strong{font-size:21px;color:var(--navy)}
.two-col{display:grid;grid-template-columns:380px 1fr;gap:20px}.top-gap{margin-top:14px}
.department-list{display:grid;gap:10px}.department-item{border:1px solid var(--line);border-radius:10px;padding:14px 16px}.department-item strong{display:block;color:var(--navy);margin-bottom:3px}.department-item span{font-size:12px;color:var(--muted)}
.approval-list{display:grid;gap:16px}.approval-card{padding:20px;display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.approval-main h3{color:var(--navy);margin:4px 0 10px}.approval-main p{color:var(--muted);margin-top:6px}
.description{margin-top:12px;background:#f7f9fb;padding:12px;border-radius:8px}.approval-actions textarea{min-height:92px;margin-bottom:10px}
.org-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.org-card{overflow:hidden}
.org-card-head{padding:20px;border-bottom:1px solid var(--line);background:#fbfcfe}.org-card-head>span{font-size:9px;letter-spacing:1.2px;color:var(--blue);font-weight:800}.org-card-head h3{color:var(--navy);margin:4px 0}.org-card-head small{color:var(--muted)}
.org-people{padding:12px}.person-row{display:flex;align-items:center;gap:11px;padding:11px;border-bottom:1px solid var(--line)}.person-row:last-child{border-bottom:0}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eaf7fc;color:var(--blue);font-weight:800}
.person-row strong{display:block;color:var(--navy);font-size:13px}.person-row span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.login-page{min-height:100vh;background:#eef3f8}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}
.login-visual{background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:white;padding:55px;display:flex;flex-direction:column;justify-content:space-between}
.visual-copy{max-width:620px}.visual-copy>span{font-size:11px;letter-spacing:1.6px;color:#8fdcff;font-weight:800}.visual-copy h1{font-size:44px;line-height:1.08;margin:14px 0 15px}.visual-copy p{opacity:.65}
.login-panel{display:grid;place-items:center;padding:30px;background:white}.login-card{width:min(430px,92vw);padding:38px}.login-subtitle{color:var(--muted);margin:7px 0 26px}.login-card label{margin-top:14px}
@media(max-width:1050px){.filter-grid{grid-template-columns:1fr 1fr}.filter-actions{grid-column:1/-1}.cards.four{grid-template-columns:1fr 1fr}.org-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}}
@media(max-width:850px){.sidebar{position:static;width:100%;min-height:auto}.main{margin-left:0}.cards.three,.cards.four{grid-template-columns:1fr 1fr}.login-shell{grid-template-columns:1fr}.login-visual{display:none}.approval-card{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr}}
@media(max-width:620px){.cards.three,.cards.four,.form-grid,.filter-grid{grid-template-columns:1fr}.content{padding:18px}.topbar{padding:0 18px}.page-head{flex-direction:column}}
.report-filter-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(160px, 1fr));
    gap: 16px;
    align-items: end;
}

@media(max-width:1200px) {

    .report-filter-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media(max-width:650px) {

    .report-filter-grid {
        grid-template-columns:
            1fr;
    }

}