:root{
  --primary:#2563eb;
  --primary-dark:#1e40af;
  --primary-soft:rgba(37,99,235,.14);

  --bg:#f4f7ff;
  --card:#ffffff;

  --text:#0f172a;
  --muted:#64748b;

  --radius:16px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }

body{
  background: linear-gradient(180deg, #eef2ff, var(--bg));
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
}

/* Container shell (dipakai di header.php) */
.app-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* ===== Card ===== */
.card{
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

/* ===== Buttons ===== */
.btn{
  border-radius: 12px;
  font-weight: 600;
  padding: .58rem .95rem;
}

.btn-primary{
  background: var(--primary);
  border: none;
}
.btn-primary:hover{
  background: var(--primary-dark);
}

.btn-success{
  background:#16a34a;
  border:none;
}
.btn-success:hover{
  background:#15803d;
}

.btn-outline-primary{
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn-outline-primary:hover{
  background: var(--primary);
  color:#fff;
}

.btn-outline-secondary{
  border-radius: 12px;
}

/* ===== Table ===== */
.table{
  margin-bottom: 0;
}
.table thead{
  background: #f1f5ff;
}
.table thead th{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #334155;
}
.table td, .table th{
  vertical-align: middle;
}

/* ===== Badge ===== */
.badge{
  border-radius: 999px;
  padding: .4rem .7rem;
  font-weight: 700;
}

/* ===== Form ===== */
.form-control, .form-select{
  border-radius: 12px;
  padding: .6rem .85rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem var(--primary-soft);
}

/* ===== Footer ===== */
.site-footer{
  margin-top: 42px;
  padding: 18px 0 26px;
}
.footer-inner{
  border-top: 1px solid rgba(2,6,23,.08);
  padding-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(15,23,42,.75);
}

/* =========================================================
   TOPBAR (FINAL, PRESISI)
========================================================= */
.topbar{
  background: linear-gradient(180deg, #1e3a8a, #2563eb);
  color:#fff;
  box-shadow: 0 12px 40px rgba(2,6,23,.18);
}

/* tinggi topbar yang konsisten */
.topbar .app-shell{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* wrapper brand biar sejajar dan rapih */
.topbar .brand-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  min-height: 64px; /* kunci tinggi */
}

/* fallback badge kalau logo belum ada */
.topbar .brand-badge{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .08em;
}

/* logo STTIN presisi */
.topbar .brand-logo{
  height: 56px;
  width: 56px;
  object-fit: contain;
  display:block;
  background: transparent;
  border-radius: 12px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* teks brand */
.topbar .brand-text .brand-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.10rem;
  line-height: 1.05;
  margin: 0;
}
.topbar .brand-text .brand-sub{
  opacity: .92;
  font-size: .88rem;
  margin-top: 2px;
}

/* tombol topbar */
.topbar .btn{
  border-radius: 12px;
}
.topbar .btn-outline-primary{
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.10);
}
.topbar .btn-outline-primary:hover{
  background: rgba(255,255,255,.18);
  color:#fff;
}
.topbar .btn-primary{
  background: #ffffff;
  color: #1e40af;
}
.topbar .btn-primary:hover{
  background: #eef2ff;
}

/* responsif */
@media (max-width: 576px){
  .topbar .brand-wrap{ min-height: 56px; }
  .topbar .brand-logo{ height: 48px; width: 48px; }
  .topbar .brand-badge{ height: 48px; width: 48px; }
  .topbar .brand-text .brand-title{ font-size: 1.02rem; }
  .topbar .brand-text .brand-sub{ font-size: .82rem; }
}