body{background:#f6f7fb;}
.card{border-radius:16px;}
.btn{border-radius:12px;}
.table thead th{position:sticky; top:0; background:#fff; z-index:1;}
/* Dashboard hero */
.page-hero{
  background: radial-gradient(1200px 700px at 15% 20%, rgba(59,130,246,.35), transparent 60%),
              radial-gradient(900px 600px at 90% 30%, rgba(16,185,129,.22), transparent 60%),
              #0b1220;
}

/* Soft card style (matches index look) */
.card-soft{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

/* Pending highlight */
.ai-pending td{
  background: rgba(255,193,7,.08);
}

/* Popup (SMS) */
.pro-popup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.pro-popup-card{
  width: min(640px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(15,23,42,.10);
}
/* Jobs page theme */
body.bg-jobs { background:#f6f8fc; }

/* Reuse your job cards */
.shell{ max-width:1400px; }
.cardx{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
.pill{
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  padding:.45rem .75rem;
  background:rgba(2,6,23,.03);
  color:#64748b;
  font-weight:700;
  font-size:.85rem;
}
.table thead th{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  background:rgba(255,255,255,.9);
}
.table tbody td{ border-top:1px solid rgba(15,23,42,.08); vertical-align:middle; }
.table-hover tbody tr:hover{ background:rgba(13,110,253,.05); }

.empty{
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  padding:16px;
  border-radius:12px;
  font-weight:700;
}

/* Status badges */
.status-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-weight:800; font-size:.82rem; }
.status-completed{ background:#dcfce7; color:#166534; border:1px solid rgba(22,101,52,.18); }
.status-incomplete{ background:#fff7ed; color:#9a3412; border:1px solid rgba(154,52,18,.18); }
.status-rejected{ background:#fee2e2; color:#991b1b; border:1px solid rgba(153,27,27,.18); }
 

/* Smooth transition */
.filter-btn {
  transition: all .2s ease-in-out;
}

/* ACTIVE = same color as category */

/* Completed (green) */
.filter-btn.btn-outline-success.active {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(25,135,84,.35);
}

/* Incomplete (yellow/orange) */
.filter-btn.btn-outline-warning.active {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #000000 !important;
  box-shadow: 0 6px 14px rgba(255,193,7,.35);
}

/* Rejected (red) */
.filter-btn.btn-outline-danger.active {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(220,53,69,.35);
}

/* Show All / neutral */
.filter-btn.btn-outline-secondary.active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(108,117,125,.35);
}

 
th.sortable {
  user-select: none;
  cursor: pointer;
}
th.sortable:hover {
  background: rgba(15, 23, 42, 0.04);
}
th.sortable .bi {
  font-size: .85rem;
  opacity: .75;
}
th.sortable.sorted-asc .bi::before { content: "\f12a"; }  /* bi-sort-down */
th.sortable.sorted-desc .bi::before { content: "\f12b"; } /* bi-sort-up */
.cardx {
  transition: transform .15s ease, box-shadow .15s ease;
}
.cardx:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15,23,42,.15);
}
/* Chart cards */
.chart-wrap{
  position: relative;
  height: 360px;
}
.chart-subtitle{
  color:#64748b;
  font-size:.88rem;
} 
/* Glass Panel */
.glass-panel{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(15,23,42,.14);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(12px);
}

/* Top gradient header */
.glass-top{
  padding: 18px;
  background: radial-gradient(1200px 500px at 10% 10%, rgba(13,110,253,.55), transparent 60%),
              radial-gradient(900px 450px at 90% 30%, rgba(79,70,229,.55), transparent 60%),
              linear-gradient(135deg, #0b1220, #111827);
  color:#fff;
}

.glass-title{
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .2px;
}
.glass-sub{
  color: rgba(255,255,255,.70);
  font-weight: 600;
  font-size: .92rem;
  max-width: 60ch;
}

/* Chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .82rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}
.chip-primary{
  background: rgba(13,110,253,.18);
  border-color: rgba(13,110,253,.35);
}
.chip-neutral{
  background: rgba(255,255,255,.10);
}

/* Meters */
.meter-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
  margin-top: 6px;
}
.meter-fill{
  height: 100%;
  border-radius: 999px;
}

/* KPI Row */
.glass-kpis{
  padding: 14px 14px 16px;
  background: rgba(255,255,255,.92);
}
.kpi-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 992px){
  .kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .kpi-row{ grid-template-columns: 1fr; }
}

.kpi-item{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(15,23,42,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15,23,42,.12);
}
.kpi-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.25rem;
}

.kpi-name{
  color:#64748b;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kpi-val{
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1.05;
  color:#0f172a;
}
.kpi-note{
  color:#64748b;
  font-weight: 700;
  font-size: .86rem;
}
.kpi-danger{
  border-color: rgba(220,53,69,.25);
}

.chart-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(15,23,42,.07);
}
.chart-wrap{
  height: 340px;
  position: relative;
}