:root{
  --brand:#d97706; /* orange */
  --brand-dark:#b45309;
  --brand-soft:#fff7ed;
  --ink:#1f2937;
}

body{
  color:var(--ink);
  background:#f6f7fb;
}

.bg-brand{ background:var(--brand)!important; }
.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }

.text-brand{ color:var(--brand)!important; }
.border-brand{ border-color:var(--brand)!important; }

.sidebar{
  min-height:100vh;
  background:#fff;
  border-right:1px solid #e5e7eb;
}
.sidebar .nav-link{
  color:#374151;
  border-radius:.75rem;
  padding:.6rem .75rem;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover{
  background:var(--brand-soft);
  color:var(--brand-dark);
}

.topbar{
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  color:#fff;
}
.topbar .badge{
  background: rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
}

.card{
  border:0;
  border-radius:1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.table thead th{
  font-weight:600;
  color:#4b5563;
  background:#fff;
}
.table tbody td{
  vertical-align:middle;
}

.badge-soft{
  background:var(--brand-soft);
  color:var(--brand-dark);
  border:1px solid #fed7aa;
}

.status-pill{
  padding:.35rem .6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.75rem;
  border:1px solid transparent;
}
.status-new{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.status-progress{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.status-done{ background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.status-wait{ background:#fefce8; color:#a16207; border-color:#fde68a; }
.status-reject{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

.stepper{
  display:flex;
  gap: .75rem;
  align-items:center;
  flex-wrap:wrap;
}
.step{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.step .dot{
  width:26px;height:26px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;
  background:#fff;
  border:2px solid #e5e7eb;
  color:#6b7280;
}
.step.active .dot{
  border-color:var(--brand);
  color:var(--brand);
}
.step.done .dot{
  border-color: #10b981;
  background:#10b981;
  color:#fff;
}
.step .label{ font-size:.85rem; color:#6b7280; }
.step.active .label{ color:var(--ink); font-weight:600; }

.preview-frame{
  width:100%;
  height:72vh;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  background:#fff;
}

.small-help{ color:#6b7280; font-size:.875rem; }


/* Sticky sidebar on desktop */
@media (min-width: 992px){
  .sidebar{
    position: sticky;
    top: 72px; /* approx topbar height */
    height: calc(100vh - 72px);
    overflow-y: auto;
  }
}


/* --- UI Enhancements: smooth animations & shadows --- */
.sidebar{
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.offcanvas{
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.20);
}
.nav-link{
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-link:hover{
  transform: translateX(2px);
}
.card, .shadow-sm, .stepper, .table{
  transition: box-shadow .20s ease, transform .20s ease;
}
.card:hover{
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

/* Smooth offcanvas */
.offcanvas.offcanvas-start{
  transition: transform .28s ease-in-out;
}

/* --- Status Badge / Pill --- */
.status-pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .60rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.08);
}

.status-pill::before{
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
}

/* Default */
.status-neutral{ color: #374151; background: #F3F4F6; }
.status-progress{ color: #B45309; background: #FFF7ED; } /* orange-ish */
.status-success{ color: #15803D; background: #ECFDF5; }
.status-danger{  color: #B91C1C; background: #FEF2F2; }
.status-info{    color: #1D4ED8; background: #EFF6FF; }

/* --- Sticky sidebar on desktop (keep) --- */
@media (min-width: 992px){
  .sidebar{
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
  }
}

/* Role badges */
.role-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  border:1px solid rgba(0,0,0,.08);
}
.role-pemohon{ background:#EFF6FF; color:#1D4ED8; }
.role-admin{ background:#FFF7ED; color:#B45309; }
.role-penera{ background:#ECFDF5; color:#15803D; }
.role-kepala{ background:#FEF2F2; color:#B91C1C; }
.role-publik{ background:#F3F4F6; color:#374151; }