:root{
  --brand:#0b3a6d;
  --brand2:#0a2e56;
  --accent:#f2b705;
  --card:#ffffff;
  --muted:#6b7280;
}

*{ box-sizing:border-box; }
body{
  font-family:'Cairo', sans-serif;
  background:#f5f7fb;
  color:#111827;
}

.navbar-custom{
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  box-shadow: 0 10px 30px rgba(2,6,23,.18);
}
.navbar-custom .navbar-brand{ letter-spacing:.2px; }
.brand-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background: var(--accent);
  margin-left:10px;
  box-shadow:0 0 0 3px rgba(242,183,5,.25);
}

.hero{
  background: radial-gradient(900px 400px at 90% 10%, rgba(242,183,5,.22), transparent 55%),
              linear-gradient(135deg, rgba(11,58,109,.95), rgba(10,46,86,.95));
  border-radius:18px;
  padding:28px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero .badge{
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.hero-icon{
  width:54px;height:54px;border-radius:16px;
  display:grid; place-items:center;
  background: rgba(242,183,5,.14);
  border:1px solid rgba(242,183,5,.35);
}
.hero .cta{
  background: var(--accent);
  border:none;
  color:#111827;
  font-weight:700;
}
.card-soft{
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  box-shadow: 0 10px 20px rgba(2,6,23,.05);
}
.kpi{
  border-radius:16px;
  border:1px solid rgba(2,6,23,.08);
  background: #fff;
  padding:16px;
}
.kpi .kpi-icon{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(11,58,109,.08);
  border:1px solid rgba(11,58,109,.12);
}
.table thead th{
  background: rgba(11,58,109,.06);
  border-bottom:1px solid rgba(2,6,23,.12);
}
.btn-brand{
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  border:none;
}
.btn-brand:hover{ filter:brightness(1.05); }
.btn-outline-brand{
  border-color: rgba(11,58,109,.35);
  color: var(--brand);
}
.btn-outline-brand:hover{
  background: rgba(11,58,109,.08);
  border-color: rgba(11,58,109,.45);
}
.badge-dept{
  background: rgba(11,58,109,.08);
  color: var(--brand);
  border:1px solid rgba(11,58,109,.14);
}

.footer-custom{
  padding:16px 0;
  border-top:1px solid rgba(2,6,23,.08);
  background:#fff;
}
.input-group .form-control:focus{
  box-shadow:none;
  border-color: rgba(11,58,109,.35);
}

/* UI polish v1 */
.navbar-custom .nav-link.active{background:rgba(255,255,255,.14);border-radius:10px;}
.table>thead th{white-space:nowrap;}
.card{border:0;box-shadow:0 8px 20px rgba(17,24,39,.06);} 
.btn{border-radius:12px;}
.form-control,.form-select{border-radius:12px;}


/* === UI polish (Final) === */
.card{ box-shadow: 0 10px 30px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.06); }
.card .card-header{ background: linear-gradient(90deg, rgba(11,58,109,.06), rgba(10,46,86,.02)); border-bottom: 1px solid rgba(0,0,0,.06); }
.table thead th{ font-weight:700; color:#0b3a6d; }
.table-hover tbody tr:hover{ background: rgba(11,58,109,.04); }
.badge{ font-weight:700; }
.btn{ border-radius: 10px; }
.form-control,.form-select{ border-radius: 10px; }
.navbar .nav-link.active{ text-decoration: underline; text-underline-offset: 6px; }