:root{
  --primary:#6c5ce7;
  --primary-dark:#5b4bd6;
  --sidebar-w:260px;
  --bg:#f5f6fc;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 4px 18px rgba(31,32,65,.06);
  --shadow-hover:0 10px 28px rgba(31,32,65,.12);
}
*{box-sizing:border-box;}
/* Safety net: any <img> without its own explicit size (e.g. a candidate/employee photo
   uploaded straight from a phone camera at 3000x4000px) must never overflow its container.
   Elements with their own fixed width/height (.topbar-avatar, .profile-avatar, etc.) are
   unaffected since max-width only caps, never forces, size. */
img{max-width:100%; height:auto;}
body{background:var(--bg); font-family:'Inter','Segoe UI',Arial,sans-serif; color:#2d2d3d;}
a{color:var(--primary);}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#d3d3ea; border-radius:10px;}

/* ---------- Login / Auth pages ---------- */
.login-body{background:linear-gradient(135deg,var(--primary),#3730a3); min-height:100vh; display:flex; align-items:center; justify-content:center;}
.login-wrapper{width:100%; padding:20px;}
.login-card{max-width:400px; margin:0 auto; background:#fff; border-radius:20px; padding:36px 32px; box-shadow:0 25px 60px rgba(0,0,0,.28);}
.login-logo{max-height:60px;}
.login-card .btn-primary{border-radius:10px; padding:10px; font-weight:600;}
.login-card .form-control{border-radius:10px; padding:10px 14px;}

/* ---------- App Layout ---------- */
.app-wrapper{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); background:linear-gradient(180deg,#1e1b3a,#221f42); color:#fff; flex-shrink:0;
  position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:1030;
  transition:transform .25s ease;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:22px 18px; border-bottom:1px solid rgba(255,255,255,.08);}
.brand-logo{max-height:36px; border-radius:8px;}
.brand-text{font-weight:700; font-size:15px; letter-spacing:.2px;}
.sidebar-nav{padding:14px 10px;}
.sidebar-nav .nav-item{margin-bottom:2px;}
.sidebar-nav .nav-link{
  color:#c9c6e8; padding:10px 14px; font-size:14px; display:flex; align-items:center; gap:11px;
  border-radius:10px; transition:background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i{font-size:16px; width:18px; text-align:center;}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.07); color:#fff;}
.sidebar-nav .nav-link.active{background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(108,92,231,.35);}
.sidebar-section-label{
  color:rgba(255,255,255,.4); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  padding:16px 14px 6px; margin-top:4px;
}
.sidebar-section-label:first-child{margin-top:0; padding-top:6px;}
.app-content{margin-left:var(--sidebar-w); flex-grow:1; width:100%; min-height:100vh; display:flex; flex-direction:column;}
.topbar{background:#fff; padding:12px 24px; box-shadow:0 1px 6px rgba(0,0,0,.05); position:sticky; top:0; z-index:1020;}
.page-body{padding:24px;}
.topbar .dropdown-toggle::after{display:none;}
.topbar-avatar{width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #eee;}

/* ---------- App-like feel on touch devices ---------- */
html{-webkit-tap-highlight-color:transparent;}
body{overflow-x:hidden; -webkit-overflow-scrolling:touch;}
@media (max-width:991.98px){
  /* Every tappable control gets a real 44px minimum touch target (Apple/Google HIG) */
  .btn, .form-control, .form-select, .nav-link, .dropdown-item{min-height:42px;}
  .btn-sm{min-height:36px;}
  .table td, .table th{vertical-align:middle;}
}

/* ---------- Tablet tuning (iPad / 768–991px) ---------- */
@media (min-width:768px) and (max-width:991.98px){
  .page-body{padding:18px;}
  table.dataTable{font-size:14px;}
  .stat-card h3{font-size:23px;}
}

@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.show{transform:translateX(0);}
  .app-content{margin-left:0;}
  body.sidebar-open{overflow:hidden;}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1025;}
  body.sidebar-open .sidebar-backdrop{display:block;}
}

/* Respect notched phones (iPhone safe area) so content isn't hidden under the status bar / home indicator */
.topbar{padding-top:calc(12px + env(safe-area-inset-top,0px));}
.app-content{padding-bottom:env(safe-area-inset-bottom,0px);}

@media (max-width:767.98px){
  .page-body{padding:12px;}
  .topbar{padding:10px 14px;}
  .card{border-radius:var(--radius-sm);}
  .card.p-3{padding:12px !important;}
  .card.p-4{padding:16px !important;}
  h5.fw-semibold{font-size:16px;}
  .stat-card h3{font-size:19px;}
  .stat-card h4{font-size:16px;}
  .btn-sm{padding:.32rem .6rem; font-size:.78rem;}
  .modal-dialog{margin:.5rem;}
  .modal-dialog-scrollable .modal-body{max-height:65vh;}
  .row.g-3 > *{margin-bottom:2px;}
  table.dataTable{font-size:13px;}
  .dt-buttons .btn{padding:.28rem .5rem; font-size:.72rem;}
}

/* ---------- Buttons & Forms (consistent everywhere) ---------- */
.btn{border-radius:10px; font-weight:500;}
.btn-primary{background:var(--primary); border-color:var(--primary);}
.btn-primary:hover, .btn-primary:focus{background:var(--primary-dark); border-color:var(--primary-dark);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary); border-color:var(--primary);}
.form-control, .form-select{border-radius:10px; border-color:#e2e2f0; padding:9px 12px;}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(108,92,231,.15);}
.form-check-input:checked{background-color:var(--primary); border-color:var(--primary);}
.badge{font-weight:500; border-radius:6px;}
.nav-tabs .nav-link.active{border-color:var(--primary); color:var(--primary); font-weight:600;}

/* ---------- Cards (uniform look, everywhere) ---------- */
.card{border:none; border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow .15s ease;}
.table thead{background:#f4f3fc;}
.table thead th{font-size:13px; text-transform:uppercase; letter-spacing:.3px; color:#6b6b85; font-weight:600;}

/* ---------- Stat cards: equal height, premium icon badge ---------- */
.row.g-3 > [class*="col-"] > a{display:block; height:100%; text-decoration:none;}
.stat-card{
  border:none; border-radius:var(--radius); color:#fff; padding:20px; height:100%;
  box-shadow:0 8px 20px rgba(31,32,65,.12); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; min-height:104px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(31,32,65,.2);}
.stat-card::after{
  content:''; position:absolute; right:-18px; top:-18px; width:80px; height:80px;
  background:rgba(255,255,255,.12); border-radius:50%;
}
.stat-card small{opacity:.9; font-weight:500; letter-spacing:.2px;}
.stat-card h3{font-weight:800; margin:2px 0 0; font-size:26px;}
.stat-card h4{font-weight:700; margin:2px 0 0;}
.bg-grad-1{background:linear-gradient(135deg,var(--primary),#8b7bff);}
.bg-grad-2{background:linear-gradient(135deg,#0ea5e9,#0284c7);}
.bg-grad-3{background:linear-gradient(135deg,#22c55e,#16a34a);}
.bg-grad-4{background:linear-gradient(135deg,#f97316,#ea580c);}
.bg-grad-5{background:linear-gradient(135deg,#ec4899,#db2777);}

/* Icon badge used in section headers / stat tiles for a "premium" feel */
.icon-badge{
  width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(255,255,255,.2); color:#fff; flex-shrink:0;
}
h6.fw-bold i, h5.fw-bold i{color:var(--primary);}

/* ---------- Department cards (logo, hover lift) ---------- */
.dept-logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#8b7bff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;flex-shrink:0;}
.dept-card{transition:transform .15s ease, box-shadow .15s ease; overflow:visible;}
.dept-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover);}

/* ---------- DataTables: modern toolbar, buttons, pagination ---------- */
.dataTables_wrapper{width:100%;}
.dt-toolbar{gap:8px;}
.dataTables_wrapper .dataTables_filter label{display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:#6b6b85;}
.dataTables_wrapper .dataTables_filter input{
  border:1px solid #e2e2f0; border-radius:10px; padding:7px 12px; margin-left:0; min-width:200px;
}
.dataTables_wrapper .dataTables_length select{
  border:1px solid #e2e2f0; border-radius:10px; padding:5px 28px 5px 10px;
}
.dataTables_wrapper .dataTables_info{color:#6b6b85; font-size:13px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:8px !important; margin-left:3px; padding:5px 11px !important; border:1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:#f1f0ff !important; border:1px solid #e2e2f0 !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--primary) !important; color:#fff !important; border:none !important;
}
.dt-buttons{display:flex; flex-wrap:wrap; gap:6px;}
.dt-buttons .btn{border-radius:8px; font-size:.8rem; display:inline-flex !important; align-items:center; gap:5px; opacity:1 !important; visibility:visible !important; color:#fff !important; border:none !important;}
.dt-buttons .btn span, .dt-buttons .btn i{color:inherit; display:inline-block;}
.dt-buttons .btn.buttons-excel{background:#16a34a;}
.dt-buttons .btn.buttons-excel:hover{background:#128a3e;}
.dt-buttons .btn.buttons-pdf{background:#dc2626;}
.dt-buttons .btn.buttons-pdf:hover{background:#b91c1c;}
.dt-buttons .btn.buttons-print{background:var(--primary);}
.dt-buttons .btn.buttons-print:hover{background:var(--primary-dark);}
table.dataTable thead th{outline:none;}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control{cursor:pointer;}
@media (max-width:575.98px){
  .dataTables_wrapper .dataTables_filter input{width:100%; min-width:0;}
  .dt-toolbar{justify-content:flex-start !important;}
}

/* ---------- Progress bars ---------- */
.progress{border-radius:20px; background:#eeeef8;}
.progress-bar{border-radius:20px;}

/* ---------- Printable Document (A4) ---------- */
.doc-sheet{background:#fff; max-width:800px; margin:0 auto; padding:50px; border:1px solid #ddd;}
@page{ size:A4; margin:15mm; }
@media print{
  .no-print{display:none !important;}
  .doc-sheet{border:none; padding:0; max-width:100%;}
  body{background:#fff;}
}

/* ---------- Consistent solid buttons EVERYWHERE (was a mix of outline/solid
   with inconsistent contrast — this makes every button the same filled style
   with guaranteed readable text, app-wide, without editing every page) ---------- */
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-danger,
.btn-outline-warning,.btn-outline-info,.btn-outline-dark,.btn-outline-light{
  color:#fff !important; border-color:transparent !important;
}
.btn-outline-primary{background:var(--primary) !important;}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:var(--primary-dark) !important; color:#fff !important;}
.btn-outline-secondary{background:#6c757d !important;}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{background:#565e64 !important; color:#fff !important;}
.btn-outline-success{background:#16a34a !important;}
.btn-outline-success:hover,.btn-outline-success:focus{background:#128a3e !important; color:#fff !important;}
.btn-outline-danger{background:#dc2626 !important;}
.btn-outline-danger:hover,.btn-outline-danger:focus{background:#b91c1c !important; color:#fff !important;}
.btn-outline-info{background:#0284c7 !important;}
.btn-outline-info:hover,.btn-outline-info:focus{background:#0369a1 !important; color:#fff !important;}
.btn-outline-warning{background:#d97706 !important;}
.btn-outline-warning:hover,.btn-outline-warning:focus{background:#b45309 !important; color:#fff !important;}
.btn-outline-dark{background:#343a40 !important;}
.btn-outline-dark:hover,.btn-outline-dark:focus{background:#212529 !important; color:#fff !important;}
.btn-outline-light{background:#adb5bd !important; color:#212529 !important;}
.btn:disabled,.btn.disabled{opacity:.65 !important;}
/* ---------- Badge text contrast (was invisible on Admin pages: status badges
   using bg-light/bg-warning/bg-info had no text color set, so Bootstrap's
   default white badge text was unreadable on light/yellow/cyan backgrounds — 
   this is what made "admin ka DataTable color sahi nahi" ) ---------- */
.badge.bg-light{color:#495057 !important; border:1px solid #dee2e6;}
.badge.bg-warning{color:#664500 !important;}
.badge.bg-info{color:#055160 !important;}
/* Any icon-only button keeps its icon centered and readable at any size */
.btn i,.btn .bi{vertical-align:-2px;}

/* ---------- Celebration popup: confetti + balloon animation ---------- */
.celeb-confetti-wrap{position:absolute; inset:0; overflow:hidden; pointer-events:none; height:140px;}
.celeb-confetti{
  position:absolute; top:-20px; width:8px; height:14px; opacity:.9;
  animation-name:celebConfettiFall; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes celebConfettiFall{
  0%{ top:-20px; opacity:1; }
  100%{ top:160px; opacity:0; }
}
.celeb-balloon{
  position:absolute; bottom:-60px; width:34px; height:42px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation-name:celebBalloonRise; animation-timing-function:ease-out; animation-duration:2.6s; animation-fill-mode:forwards;
  box-shadow:inset -6px -6px 0 rgba(0,0,0,.06);
}
.celeb-balloon::after{
  content:''; position:absolute; left:50%; bottom:-14px; width:1px; height:14px; background:rgba(0,0,0,.25); transform:translateX(-50%);
}
@keyframes celebBalloonRise{
  0%{ bottom:-60px; opacity:1; transform:translateX(0) rotate(0deg); }
  50%{ transform:translateX(6px) rotate(3deg); }
  100%{ bottom:150px; opacity:0; transform:translateX(-6px) rotate(-3deg); }
}