/* VR Digital unified application design system
   Loaded after page-level CSS. It intentionally changes presentation only;
   page IDs, forms, routes and JavaScript behaviour remain untouched. */
:root{
  --nnv-ink:#0A0E1A;
  --nnv-ink-2:#111731;
  --nnv-indigo:#4F46E5;
  --nnv-indigo-dark:#3730A3;
  --nnv-violet:#8B5CF6;
  --nnv-sky:#38BDF8;
  --nnv-paper:#F7F8FC;
  --nnv-white:#FFFFFF;
  --nnv-text:#1E2433;
  --nnv-muted:#667085;
  --nnv-line:#E4E7F1;
  --nnv-green:#16865A;
  --nnv-red:#C93F3F;
  --nnv-amber:#996300;
  --nnv-grad:linear-gradient(135deg,var(--nnv-indigo),var(--nnv-violet) 55%,var(--nnv-sky));
  --nnv-sidebar:linear-gradient(180deg,var(--nnv-ink) 0%,var(--nnv-ink-2) 100%);
  --nnv-shadow:0 8px 26px rgba(17,23,49,.07);
  --nnv-shadow-sm:0 3px 12px rgba(17,23,49,.06);
  --nnv-radius:14px;
}

.nnv-app{
  background:var(--nnv-paper) !important;
  color:var(--nnv-text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
.nnv-app *{box-sizing:border-box}
.nnv-app a{transition:color .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease}

/* ---------- Existing AdminLTE application pages ---------- */
.nnv-admin .main-sidebar{
  background:var(--nnv-sidebar) !important;
  box-shadow:8px 0 28px rgba(10,14,26,.08) !important;
}
.nnv-admin .brand-link{border-bottom:1px solid rgba(255,255,255,.08) !important}
.nnv-admin .brand-mark,
.nnv-admin .avatar-chip{
  background:var(--nnv-grad) !important;
  color:#fff !important;
}
.nnv-admin .brand-text{color:#fff !important;font-weight:750 !important;letter-spacing:.1px}
.nnv-admin .nav-sidebar>.nav-item>.nav-link{
  color:#B9C0D4 !important;
  border-radius:9px !important;
  margin:2px 8px !important;
}
.nnv-admin .nav-sidebar>.nav-item>.nav-link:hover{background:rgba(255,255,255,.065) !important;color:#fff !important}
.nnv-admin .nav-sidebar>.nav-item>.nav-link.active{
  background:linear-gradient(90deg,rgba(79,70,229,.38),rgba(139,92,246,.16)) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 var(--nnv-sky);
}
.nnv-admin .nav-sidebar .nav-icon{color:#8890AC !important}
.nnv-admin .nav-sidebar>.nav-item>.nav-link.active .nav-icon{color:var(--nnv-sky) !important}
.nnv-admin .main-header,
.nnv-admin .app-header{
  background:#fff !important;
  border-bottom:1px solid var(--nnv-line) !important;
  box-shadow:0 2px 12px rgba(17,23,49,.035);
}
.nnv-admin .content-wrapper{background:var(--nnv-paper) !important}
.nnv-admin .content-header h1,
.nnv-admin .content-header .h1{color:var(--nnv-ink) !important;font-weight:800 !important;letter-spacing:-.02em}
.nnv-admin .panel,
.nnv-admin .card,
.nnv-admin .small-box,
.nnv-admin .info-box{
  border-color:var(--nnv-line) !important;
  border-radius:var(--nnv-radius) !important;
  box-shadow:var(--nnv-shadow-sm) !important;
}
.nnv-admin .panel{background:#fff !important}
.nnv-admin .btn-brand,
.nnv-admin .btn-primary:not(.btn-soft){
  background:linear-gradient(90deg,var(--nnv-indigo),#5668e9) !important;
  border-color:transparent !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:0 4px 12px rgba(79,70,229,.18);
}
.nnv-admin .btn-brand:hover,
.nnv-admin .btn-primary:not(.btn-soft):hover{opacity:.93;transform:translateY(-1px)}
.nnv-admin input:not([type="checkbox"]):not([type="radio"]),
.nnv-admin select,
.nnv-admin textarea,
.nnv-admin .form-control,
.nnv-admin .cf-input{
  border-color:var(--nnv-line) !important;
  border-radius:9px !important;
}
.nnv-admin input:focus,
.nnv-admin select:focus,
.nnv-admin textarea:focus,
.nnv-admin .form-control:focus,
.nnv-admin .cf-input:focus{
  border-color:var(--nnv-indigo) !important;
  box-shadow:0 0 0 3px rgba(79,70,229,.11) !important;
  outline:none !important;
}
.nnv-admin table thead th,
.nnv-admin .table thead th{
  background:#F8FAFF !important;
  color:#59647A !important;
  border-color:var(--nnv-line) !important;
  font-weight:750 !important;
}
.nnv-admin table td,
.nnv-admin .table td{border-color:var(--nnv-line) !important}
.nnv-admin tbody tr:hover td{background:#FBFCFF}
.nnv-admin .main-footer{border-top:1px solid var(--nnv-line) !important;background:#fff !important;color:var(--nnv-muted) !important}

/* ---------- HR workspace: same visual language as main admin ---------- */
.nnv-admin.nnv-hr-page{--navy:var(--nnv-ink);--blue:var(--nnv-indigo);--sky:var(--nnv-sky);--bg:var(--nnv-paper);--card:#fff;--text:var(--nnv-text);--muted:var(--nnv-muted);--line:var(--nnv-line)}
.nnv-hr-page>header{
  height:64px !important;
  padding:0 22px !important;
  background:var(--nnv-sidebar) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 5px 18px rgba(10,14,26,.18) !important;
}
.nnv-hr-page>header .brand{font-size:15px;letter-spacing:.1px}
.nnv-hr-page>header .brand img{
  width:36px !important;height:36px !important;border-radius:9px !important;
  background:#fff !important;padding:3px !important;
}
.nnv-hr-page .head-actions a,
.nnv-hr-page .head-actions button{
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.07) !important;
  border-radius:9px !important;
  padding:8px 12px !important;
}
.nnv-hr-page .head-actions a:hover,
.nnv-hr-page .head-actions button:hover{background:rgba(255,255,255,.13) !important}
.nnv-hr-page .layout{grid-template-columns:250px 1fr !important;min-height:calc(100vh - 64px) !important}
.nnv-hr-page aside{
  top:64px !important;height:calc(100vh - 64px) !important;
  background:var(--nnv-sidebar) !important;
  border-right:1px solid rgba(255,255,255,.035);
  padding:16px 10px !important;
}
.nnv-hr-page .aside-title{color:#7D87A4 !important;padding:10px 13px !important}
.nnv-hr-page .navbtn{
  color:#B9C0D4 !important;
  padding:10px 12px !important;
  border-radius:9px !important;
  margin:2px 0 !important;
  font-weight:650 !important;
}
.nnv-hr-page .navbtn:hover{background:rgba(255,255,255,.065) !important;color:#fff !important}
.nnv-hr-page .navbtn.active{
  background:linear-gradient(90deg,rgba(79,70,229,.40),rgba(139,92,246,.16)) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 var(--nnv-sky);
}
.nnv-hr-page .main{padding:24px 26px !important;background:var(--nnv-paper)}
.nnv-hr-page .pagebar{margin-bottom:19px !important}
.nnv-hr-page .pagebar h1{font-size:25px !important;color:var(--nnv-ink) !important;font-weight:800 !important;letter-spacing:-.025em}
.nnv-hr-page .sub{color:var(--nnv-muted) !important}
.nnv-hr-page .monthbox,
.nnv-hr-page .kpi,
.nnv-hr-page .panel{
  border:1px solid var(--nnv-line) !important;
  background:#fff !important;
  border-radius:var(--nnv-radius) !important;
  box-shadow:var(--nnv-shadow-sm) !important;
}
.nnv-hr-page .kpi{padding:16px !important}
.nnv-hr-page .kpi strong{color:var(--nnv-ink) !important;font-weight:800 !important}
.nnv-hr-page .panel-head{background:#fff;border-bottom:1px solid var(--nnv-line) !important;padding:14px 16px !important}
.nnv-hr-page .panel-head h3{color:var(--nnv-ink);font-weight:800}
.nnv-hr-page .input,
.nnv-hr-page .select,
.nnv-hr-page .formgrid input,
.nnv-hr-page .formgrid select,
.nnv-hr-page .formgrid textarea{
  border-color:var(--nnv-line) !important;
  border-radius:9px !important;
  background:#fff !important;
}
.nnv-hr-page .input:focus,
.nnv-hr-page .select:focus,
.nnv-hr-page .formgrid input:focus,
.nnv-hr-page .formgrid select:focus,
.nnv-hr-page .formgrid textarea:focus{
  border-color:var(--nnv-indigo) !important;
  box-shadow:0 0 0 3px rgba(79,70,229,.11) !important;
  outline:none;
}
.nnv-hr-page .btn{border-radius:9px !important;padding:9px 12px !important;font-weight:750 !important}
.nnv-hr-page .btn-primary{background:var(--nnv-indigo) !important;color:#fff !important;box-shadow:0 4px 12px rgba(79,70,229,.16)}
.nnv-hr-page .btn-primary:hover{background:var(--nnv-indigo-dark) !important}
.nnv-hr-page .btn-soft{background:#EEF2FF !important;color:#4338CA !important}
.nnv-hr-page .btn-green{background:#ECFDF3 !important;color:#16724A !important}
.nnv-hr-page .btn-danger{background:#FFF1F1 !important;color:#B83131 !important}
.nnv-hr-page .btn-amber{background:#FFF7E5 !important;color:#875900 !important}
.nnv-hr-page table th{background:#F8FAFF !important;color:#59647A !important;border-color:var(--nnv-line) !important;font-weight:750 !important}
.nnv-hr-page table td{border-color:var(--nnv-line) !important}
.nnv-hr-page table tbody tr:hover td{background:#FBFCFF !important}
.nnv-hr-page dialog{border-radius:18px !important;box-shadow:0 26px 80px rgba(10,14,26,.28) !important}
.nnv-hr-page dialog::backdrop{background:rgba(10,14,26,.62) !important}
.nnv-hr-page .toast{background:var(--nnv-ink) !important;border-radius:10px !important;box-shadow:var(--nnv-shadow)}

/* ---------- Staff portal & employee pages ---------- */
.nnv-staff{--navy:var(--nnv-ink);--blue:var(--nnv-indigo);--bg:var(--nnv-paper);--text:var(--nnv-text);--muted:var(--nnv-muted);--line:var(--nnv-line)}
.nnv-staff>header{
  min-height:64px !important;
  padding:0 4% !important;
  background:var(--nnv-sidebar) !important;
  box-shadow:0 5px 18px rgba(10,14,26,.16) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nnv-staff>header .brand{font-size:16px !important;font-weight:800 !important}
.nnv-staff>header .brand img{width:38px !important;height:38px !important;border-radius:9px !important;padding:3px !important}
.nnv-staff .out,
.nnv-staff .back,
.nnv-staff .logout-btn{
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.075) !important;
  color:#fff !important;
  border-radius:9px !important;
  padding:8px 12px !important;
  font-weight:700 !important;
}
.nnv-staff .out:hover,
.nnv-staff .back:hover,
.nnv-staff .logout-btn:hover{background:rgba(255,255,255,.14) !important}
.nnv-staff .wrap,
.nnv-staff .page{max-width:1240px !important;margin-left:auto !important;margin-right:auto !important}
.nnv-staff .hero,
.nnv-staff .card,
.nnv-staff .kpi,
.nnv-staff .panel,
.nnv-staff .stat-card,
.nnv-staff .ip-card,
.nnv-staff .tabs-card,
.nnv-staff .table-card,
.nnv-staff .slip{
  background:#fff !important;
  border:1px solid var(--nnv-line) !important;
  border-radius:var(--nnv-radius) !important;
  box-shadow:var(--nnv-shadow-sm) !important;
}
.nnv-staff .hero{border-top:3px solid var(--nnv-indigo) !important}
.nnv-staff .hero h1,
.nnv-staff .toolbar h1,
.nnv-staff .top h1{color:var(--nnv-ink) !important;font-weight:800 !important;letter-spacing:-.025em}
.nnv-staff .muted,
.nnv-staff .hero p,
.nnv-staff .card p,
.nnv-staff .privacy{color:var(--nnv-muted) !important}
.nnv-staff .icon,
.nnv-staff .stat-icon.blue,
.nnv-staff .ip-icon{background:#EEF2FF !important;color:var(--nnv-indigo) !important}
.nnv-staff .card:hover{
  transform:translateY(-3px) !important;
  border-color:#C7D2FE !important;
  box-shadow:0 14px 30px rgba(79,70,229,.11) !important;
}
.nnv-staff .control,
.nnv-staff .tool{
  background:#fff !important;
  border:1px solid var(--nnv-line) !important;
  border-radius:9px !important;
}
.nnv-staff .control input,
.nnv-staff .tool input{color:var(--nnv-text)}
.nnv-staff .print,
.nnv-staff .btn-refresh,
.nnv-staff .tab-btn.active{
  background:var(--nnv-indigo) !important;
  color:#fff !important;
  border-color:var(--nnv-indigo) !important;
  border-radius:9px !important;
  box-shadow:0 4px 12px rgba(79,70,229,.18) !important;
}
.nnv-staff .print:hover,
.nnv-staff .btn-refresh:hover{background:var(--nnv-indigo-dark) !important;transform:translateY(-1px)}
.nnv-staff .tab-btn{border-color:var(--nnv-line) !important}
.nnv-staff table th{background:#F8FAFF !important;color:#59647A !important;border-color:var(--nnv-line) !important;font-weight:750 !important}
.nnv-staff table td{border-color:var(--nnv-line) !important}
.nnv-staff tbody tr:hover td{background:#FBFCFF !important}
.nnv-staff .pill{background:#EEF2FF !important;color:#4338CA !important}
.nnv-staff .pay{background:#F8FAFF !important;border-color:var(--nnv-line) !important;border-radius:12px !important}
.nnv-staff .pay.net{background:#EEF2FF !important;border-color:#C7D2FE !important}
.nnv-staff .draft{background:#FFF7E5 !important;border-color:#F1D593 !important;color:#875900 !important}
.nnv-staff .note{background:#fff !important;border-color:var(--nnv-line) !important;border-left:3px solid var(--nnv-sky) !important}

/* My Campaigns has a dedicated compact header; align it with Staff Portal. */
.nnv-staff.nnv-campaign-page>header{height:64px !important;padding:0 24px !important}
.nnv-staff.nnv-campaign-page>header .brand{color:#fff !important}
.nnv-staff.nnv-campaign-page .brand-dot{background:var(--nnv-sky) !important}
.nnv-staff.nnv-campaign-page .welcome-chip{background:rgba(255,255,255,.09) !important;border:1px solid rgba(255,255,255,.10)}
.nnv-staff.nnv-campaign-page .logout-btn{background:rgba(255,255,255,.075) !important;color:#fff !important}
.nnv-staff.nnv-campaign-page .btn-refresh{padding:7px 11px !important;box-shadow:none !important}
.nnv-staff.nnv-campaign-page .stats-row{gap:14px !important}
.nnv-staff.nnv-campaign-page .stat-value{color:var(--nnv-ink) !important}
.nnv-staff.nnv-campaign-page .table-card{overflow:hidden}
.nnv-staff.nnv-campaign-page .link-btn{background:#EEF2FF !important;border-color:#C7D2FE !important;color:#4338CA !important}
.nnv-staff.nnv-campaign-page .link-btn:hover{background:var(--nnv-indigo) !important;color:#fff !important;border-color:var(--nnv-indigo) !important}

/* ---------- Authentication pages: keep same brand language ---------- */
.nnv-auth{--ink:#0A0E1A;--ink-2:#111731;--indigo:#4F46E5;--violet:#8B5CF6;--sky:#38BDF8}
.nnv-auth .card{border-radius:20px !important}
.nnv-auth .btn-primary{background:var(--nnv-grad) !important}

/* ---------- responsive consistency ---------- */
@media(max-width:1100px){
  .nnv-hr-page .layout{grid-template-columns:220px 1fr !important}
  .nnv-staff.nnv-campaign-page .header-right{gap:8px !important;flex-wrap:wrap;justify-content:flex-end}
}
@media(max-width:760px){
  .nnv-hr-page .layout{display:block !important}
  .nnv-hr-page aside{position:static !important;height:auto !important;display:flex !important;overflow:auto !important;padding:8px !important}
  .nnv-hr-page .main{padding:14px !important}
  .nnv-staff>header{padding:10px 16px !important;min-height:64px !important}
  .nnv-staff.nnv-campaign-page>header{height:auto !important;min-height:64px !important;align-items:flex-start !important;padding:10px 14px !important;gap:10px}
  .nnv-staff.nnv-campaign-page .header-right{gap:6px !important}
  .nnv-staff.nnv-campaign-page .welcome-chip{display:none}
  .nnv-staff.nnv-campaign-page .btn-refresh{font-size:0 !important;width:36px;height:36px;padding:0 !important;justify-content:center}
  .nnv-staff.nnv-campaign-page .btn-refresh::first-letter{font-size:15px}
}

@media print{
  .nnv-staff{background:#fff !important}
  .nnv-staff .slip{box-shadow:none !important}
}