:root{
  --navy:#003366; --navy-dark:#00264d; --gold:#f2a900; --cyan:#00a3c4;
  --bg:#f2f5f9; --ink:#1c2b3a; --muted:#5d6b7a; --line:#dbe3ec; --panel:#fff; --head:#003366; --soft:#f8fafc;
}
*{box-sizing:border-box}
body{font-family:'Source Sans 3',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4,h5,h6{color:var(--head)}
a{color:#0b5394}
.tricolor{display:flex;height:5px}.tricolor i{flex:1}.tricolor i:nth-child(1){background:#ff9933}.tricolor i:nth-child(2){background:#fff;border-block:1px solid #e3e3e3}.tricolor i:nth-child(3){background:#138808}
.gov-strip{background:var(--navy-dark);color:#dfe8f2;font-size:.82rem;padding:.3rem 0}
.a11y-link{color:#dfe8f2;margin-right:.5rem}
.a11y-btn{background:transparent;border:1px solid #6d86a0;color:#fff;border-radius:2px;min-width:30px;height:26px;font-size:.78rem;line-height:1;cursor:pointer}
.a11y-btn:hover{background:rgba(255,255,255,.15)}
.brand-bar{background:#fff;border-bottom:4px solid var(--gold);padding:.5rem 0}
.brand-logo{height:58px;width:auto;flex:none;object-fit:contain}
.brand-logo-meity{mix-blend-mode:multiply}
.brand-divider{width:2px;height:48px;background:#e0e0e0;margin:0 .5rem}
.logo-ph{width:62px;height:62px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:700 2rem 'Merriweather',serif;border:3px solid var(--gold);flex:none;overflow:hidden}
.logo-ph img{width:100%;height:100%;object-fit:contain;background:#fff}
.brand-title{font:700 1.2rem 'Merriweather',serif;color:var(--navy);line-height:1.3}
.brand-sub{font-size:.95rem;color:var(--ink);font-weight:600}
.brand-min{font-size:.8rem;color:var(--muted)}
.brand-portal{padding-left:.25rem;color:var(--navy)}
.nielit-nav{background:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.nielit-nav .nav-link{color:#e6eef7;padding:.8rem .95rem;border-bottom:3px solid transparent}
.nielit-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nielit-nav .nav-link.active{color:#fff;border-bottom-color:var(--gold);background:rgba(255,255,255,.1)}
.dropdown-item.active,.dropdown-item:active{background:var(--navy)}
.role-pill{background:var(--gold);color:var(--navy-dark)}
.page-wrap{flex:1;padding-top:1.5rem;padding-bottom:2rem;outline:none}
.page-wrap:has(.login-wrap){padding-top:.9rem;padding-bottom:1.1rem}
.page-title{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.5rem;margin-bottom:1.1rem;border-bottom:2px solid var(--line);padding-bottom:.5rem}
.page-title i{color:var(--cyan)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 1px 3px rgba(0,30,60,.06)}
.panel-head{padding:.75rem 1.1rem;border-bottom:1px solid var(--line);font-weight:700;color:var(--head);background:var(--soft);display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.panel-body{padding:1.1rem}
.stat{display:flex;gap:.9rem;align-items:center;padding:1rem 1.1rem;border-left:5px solid var(--cyan);height:100%}
.stat .ico{width:46px;height:46px;border-radius:4px;background:#e8f1f8;color:var(--navy);display:grid;place-items:center;font-size:1.25rem;flex:none}
.stat .val{font-size:1.75rem;font-weight:700;line-height:1;color:var(--head)}
.stat .lbl{font-size:.85rem;color:var(--muted)}
.stat.gold{border-left-color:var(--gold)} .stat.green{border-left-color:#2e8b57} .stat.red{border-left-color:#c0392b}
.quick-tile{display:flex;gap:.8rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);padding:.8rem 1rem;text-decoration:none;color:var(--ink);height:100%;border-radius:3px}
.quick-tile:hover{background:#eef4fa;border-left-color:var(--navy)}
.quick-tile .ico{width:40px;height:40px;background:var(--navy);color:var(--gold);display:grid;place-items:center;border-radius:4px;flex:none}
.table thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.88rem;white-space:nowrap;border:0}
.table td{vertical-align:middle;font-size:.93rem}
.status-badge{font-weight:600;padding:.4em .65em}
.btn-navy{background:var(--navy);color:#fff;border:0}
.btn-navy:hover{background:var(--navy-dark);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy-dark);font-weight:700;border:0}
.btn-gold:hover{background:#d99700;color:var(--navy-dark)}
.form-control:focus,.form-select:focus{border-color:var(--cyan);box-shadow:0 0 0 .2rem rgba(0,163,196,.2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.form-label .req{color:#c0392b}
/* Footer ka asli design includes/footer.php ke andar hai; yahan sirf base */
.site-footer{background:var(--navy-dark);color:#b9c8d8}
.empty{padding:2rem;text-align:center;color:var(--muted)}
.empty i{font-size:2rem;color:#b7c4d1;display:block;margin-bottom:.5rem}
.notice-item{font-size:.93rem}

/* ---------- Login ---------- */
.login-wrap{max-width:460px;margin:0 auto}
.login-card{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:3px;box-shadow:0 8px 28px rgba(0,30,60,.12)}
.login-head{background:var(--navy);color:#fff;padding:.85rem 1.2rem;display:flex;align-items:center;gap:.85rem}
.login-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:1.15rem;flex:none}
.login-head h1{font-size:1.25rem;color:#fff;margin:0;line-height:1.2}
.login-head .login-sub{color:#d3e4f6;font-size:.88rem;margin-top:.15rem}
.login-body{padding:1.1rem 1.2rem 1.15rem}
.login-card .form-label{font-size:.93rem;color:var(--ink)}
.login-card .form-control,.login-card .form-select{padding-top:.42rem;padding-bottom:.42rem}
.input-group-text{background:#eef3f8;color:var(--navy)}
.captcha-row{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap}
.captcha-row .form-control{flex:1 1 110px;min-width:0}
.captcha-box{flex:0 0 auto;min-width:140px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#eef3f8,#eef3f8 6px,#e3ebf3 6px,#e3ebf3 12px);border:1px dashed var(--navy);border-radius:3px;padding:.3rem .8rem;font:700 1.2rem 'Merriweather',serif;letter-spacing:2px;color:var(--navy);user-select:none}
.ticker{background:#fff8e1;border:1px solid #f0d78a;border-left:5px solid var(--gold);display:flex;align-items:center;overflow:hidden;border-radius:3px}
.ticker-label{background:var(--gold);color:var(--navy-dark);font-weight:700;padding:.45rem .9rem;white-space:nowrap;z-index:2}
.ticker-view{overflow:hidden;flex:1}
.ticker-track{display:inline-block;white-space:nowrap;padding-left:100%;animation:tick 55s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:.45rem;margin-right:3rem;color:#5a4300;font-size:.92rem}
.tick-dot{color:var(--gold);font-size:.7rem}
@keyframes tick{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;padding-left:.75rem;white-space:normal}}
.demo-box{background:#eef7fb;border:1px solid #b9dfeb;border-radius:3px;font-size:.85rem;padding:.45rem .7rem;color:#1c2b3a}
.demo-box summary{cursor:pointer;font-weight:600}

/* ---------- Payslip ---------- */
.payslip{position:relative;overflow:hidden;background:#fff;color:#1c2b3a;border:2px solid var(--navy);padding:1.5rem}
.payslip:before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#ff9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66%)}
.payslip-brand{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.35rem 0 1rem;margin-bottom:1rem;border-bottom:2px solid var(--gold)}
.payslip-brand img{width:58px;height:58px;object-fit:contain;background:#fff}
.payslip-brand h2{font-size:1.05rem;text-align:left;margin:0;color:var(--navy);line-height:1.3}
.payslip-brand p{font-size:.8rem;color:var(--muted);margin:.25rem 0 0}
.payslip-period{display:grid;gap:.15rem;text-align:right;border-left:1px solid var(--line);padding-left:1rem}
.payslip-period span{font-size:.68rem;color:var(--muted);font-weight:700}
.payslip-period strong{color:var(--navy);white-space:nowrap}
.payslip .table th{background:#e8f1f8;color:var(--navy)}
.net-pay{background:var(--navy);color:#fff;padding:.8rem 1rem;font-size:1.15rem;font-weight:700;display:flex;justify-content:space-between}

@media (max-width:576px){.brand-title{font-size:.95rem}.brand-sub{font-size:.8rem}.brand-min{display:none}.brand-logo{height:44px}.logo-ph{width:46px;height:46px;font-size:1.4rem}.page-title{font-size:1.25rem}.payslip-brand{grid-template-columns:46px minmax(0,1fr);gap:.65rem}.payslip-brand img{width:46px;height:46px}.payslip-brand h2{font-size:.9rem}.payslip-period{grid-column:2;text-align:left;border-left:0;padding-left:0}.captcha-box{flex:1 1 100%}}
@media print{
  .no-print{display:none!important} body{background:#fff}
  .page-wrap{padding:0} .payslip{border:1px solid #000}
  .net-pay{background:#eee!important;color:#000;border:1px solid #000;-webkit-print-color-adjust:exact}
}

/* ---------- High contrast mode ---------- */
html.hc{--bg:#000;--ink:#fff;--muted:#e6e6e6;--line:#fff;--panel:#000;--head:#ffea00;--soft:#111}
html.hc a{color:#7fdbff}
html.hc .brand-bar{background:#000;border-bottom-color:#ffea00}
html.hc .brand-title,html.hc .brand-sub,html.hc .brand-portal{color:#ffea00}
html.hc .brand-logo{background:#fff;border-radius:3px;padding:2px}
html.hc .brand-logo-meity{mix-blend-mode:normal}
html.hc .brand-bar img{mix-blend-mode:normal!important;filter:none!important;background:#fff}
html.hc .table{--bs-table-bg:#000;--bs-table-color:#fff;--bs-table-border-color:#fff;--bs-table-hover-bg:#222;--bs-table-hover-color:#fff}
html.hc .table thead th{background:#ffea00;color:#000}
html.hc .form-control,html.hc .form-select,html.hc .input-group-text{background:#000;color:#fff;border-color:#fff}
html.hc .text-muted{color:#ddd!important}
html.hc .btn-navy,html.hc .btn-gold{background:#ffea00;color:#000}
html.hc .quick-tile,html.hc .list-group-item{background:#000;color:#fff;border-color:#fff}
html.hc .stat .ico,html.hc .quick-tile .ico{background:#ffea00;color:#000}
html.hc .demo-box,html.hc .bg-light{background:#111!important;color:#fff;border-color:#fff}
html.hc .dropdown-menu{background:#000;border-color:#fff}html.hc .dropdown-item{color:#fff}
html.hc .payslip{background:#fff;color:#000}
html.hc .login-head{background:#000;border-bottom:2px solid #ffea00}
html.hc .login-head .login-sub{color:#fff}
html.hc .captcha-box{background:#000;color:#ffea00;border-color:#ffea00}
html.hc .ticker{background:#000;border-color:#ffea00}
html.hc .ticker-track span{color:#fff}
html.hc .site-footer{background:#000;border-top:2px solid #fff}

/* =====================================================================
   RESPONSIVE: tables -> cards on phones (class .table-stack is added by main.js)
   Desktop / tablet par kuch nahi badalta. Print me bhi nahi (screen only).
   ===================================================================== */
@media screen and (max-width:767.98px){
  table.table-stack{border:0!important;background:transparent}
  table.table-stack thead{display:none}
  table.table-stack tbody,table.table-stack tr,table.table-stack td{display:block;width:100%}
  table.table-stack tbody{padding:.25rem .6rem .7rem}
  table.table-stack tr{margin:.7rem 0 0;padding:.4rem 0;border:1px solid #dbe3ea;border-radius:.8rem;background:#fff;box-shadow:0 1px 6px rgba(15,23,42,.06);animation:none!important}
  table.table-stack td{border:0!important;padding:.35rem .9rem!important;text-align:left!important;background:transparent!important}
  table.table-stack td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#64748b;margin-bottom:.1rem}
  table.table-stack td.d-none{display:none!important}
  table.table-stack td.stack-full{text-align:center!important}
  table.table-stack .em-acts{flex-wrap:wrap}
}
/* Small safety nets for every screen size */
img,video,svg{max-width:100%}
.table-responsive{-webkit-overflow-scrolling:touch}
main{overflow-wrap:anywhere}