@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --primary:#0f6fd6;
  --primary-dark:#084c9e;
  --primary-soft:#eaf3ff;
  --secondary:#0f172a;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;
  --info:#0891b2;
  --purple:#7c3aed;
  --bg:#eef4fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbe4f0;
  --shadow:0 12px 36px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:'Inter',Arial,Helvetica,sans-serif!important;
  font-size:14px;
  line-height:1.45;
  background:
    radial-gradient(circle at 10% -10%, rgba(15,111,214,.16), transparent 35%),
    radial-gradient(circle at 95% 10%, rgba(124,58,237,.10), transparent 30%),
    linear-gradient(180deg,#f8fbff 0%,var(--bg) 55%,#e9f0f8 100%);
  min-height:100vh;
}

.container{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:28px 20px 64px;
}

h1,h2,h3,h4{
  color:#0b1220;
  letter-spacing:-.035em;
  font-weight:900;
}
h2{
  font-size:28px;
  margin:8px 0 24px;
  display:flex;
  align-items:center;
  gap:10px;
}
h2:before{
  content:"";
  width:7px;
  height:30px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--primary),var(--purple));
}
h3{font-size:19px;margin:12px 0 16px}
p{color:#334155}

/* NAVBAR */
.navbar{
  position:sticky;
  top:0;
  z-index:99;
  min-height:64px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 20px;
  background:rgba(15,23,42,.94)!important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(15,23,42,.20);
}
.navbar b{
  color:#fff;
  font-weight:900;
  display:flex;
  align-items:center;
  margin-right:14px;
  letter-spacing:-.02em;
}
.nav-logo{
  width:32px!important;
  height:32px!important;
  object-fit:contain;
  background:#fff;
  border-radius:50%;
  padding:2px;
  margin-right:9px;
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.navbar a,.navbar .dropbtn{
  color:#f8fafc!important;
  text-decoration:none!important;
  border-radius:13px;
  padding:11px 12px!important;
  font-weight:700;
  font-size:14px!important;
  transition:.2s ease;
}
.navbar a:hover,.navbar .dropbtn:hover{
  background:rgba(255,255,255,.12)!important;
  transform:translateY(-1px);
}
.dropdown-content{
  border-radius:15px!important;
  overflow:hidden;
  border:1px solid #e2e8f0;
  box-shadow:0 20px 45px rgba(15,23,42,.18)!important;
}
.dropdown-content a{
  color:#0f172a!important;
  padding:12px 15px!important;
  border-bottom:1px solid #eef2f7!important;
}
.dropdown-content a:hover{
  background:#eff6ff!important;
  transform:none;
}
.nav-user{
  margin-left:auto;
  color:#e2e8f0!important;
  font-size:12px!important;
  font-weight:800;
  background:rgba(255,255,255,.10);
  padding:7px 11px;
  border-radius:999px;
}

/* CARDS / PANELS */
.panel,.card,.box,form.form{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(219,228,240,.92);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-bottom:22px;
  backdrop-filter:blur(10px);
}
form.form{max-width:820px}

/* FORMS */
label{
  display:block;
  margin:13px 0 7px;
  font-weight:800;
  color:#0f172a;
}
input,select,textarea{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:13px;
  padding:11px 13px;
  min-height:42px;
  background:#fff;
  outline:none;
  color:#0f172a;
  transition:.2s ease;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(15,111,214,.14);
}
input[type=file]{
  background:#f8fafc;
  padding:10px;
}

/* BUTTONS */
button,.btn,input[type=submit],input[type=button]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff!important;
  padding:10px 15px;
  font-weight:900;
  text-decoration:none!important;
  cursor:pointer;
  min-height:40px;
  box-shadow:0 8px 18px rgba(15,111,214,.22);
  transition:.2s ease;
  white-space:nowrap;
}
button:hover,.btn:hover,input[type=submit]:hover,input[type=button]:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 12px 26px rgba(15,111,214,.28);
}
.smallbtn{
  font-size:12px;
  padding:8px 11px;
  min-height:34px;
  margin:2px;
}
.btn-danger,.danger,a[href*='hapus'],a[href*='delete']{
  background:linear-gradient(135deg,#ef4444,#b91c1c)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(220,38,38,.22)!important;
}
.btn-warning,a[href*='edit'],a[href*='ubah']{
  background:linear-gradient(135deg,#f59e0b,#d97706)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(245,158,11,.22)!important;
}
.btn-info,a[href*='cetak']{
  background:linear-gradient(135deg,#0ea5e9,#0369a1)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(14,165,233,.22)!important;
}
a[href*='lampiran']{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 11px;
  border-radius:12px;
  background:#f3e8ff;
  color:#6d28d9!important;
  text-decoration:none!important;
  border:1px solid #ddd6fe;
  font-weight:900;
}
a[href*='lampiran']:before{content:"📎"}
a[href*='cetak']:before{content:"🖨️"}
a[href*='edit']:before{content:"✏️"}
a[href*='hapus']:before{content:"🗑️"}

/* TABLE */
.table-responsive{
  width:100%;
  overflow-x:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  margin:17px 0 24px;
}
.table-responsive table{
  margin:0!important;
  box-shadow:none!important;
  border:0!important;
}
table{
  width:100%;
  border-collapse:separate!important;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  font-size:13px;
}
th{
  position:sticky;
  top:0;
  z-index:3;
  background:linear-gradient(180deg,#f0f5fb,#e7eef7)!important;
  color:#0f172a;
  font-weight:900;
  text-align:left;
  padding:12px 11px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td{
  padding:12px 11px;
  border-bottom:1px solid #e6edf5;
  vertical-align:middle;
}
td+td,th+th{border-left:1px solid #e6edf5}
tr:nth-child(even) td{background:#fbfdff}
tr:hover td{background:#f3f8ff}

/* STATUS BADGE */
.badge{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px!important;
  padding:7px 11px!important;
  font-weight:900!important;
  font-size:12px!important;
  background:#e2e8f0!important;
  color:#0f172a!important;
  min-width:max-content;
}
.badge:before{content:"●";font-size:10px}

/* ALERT / TOAST */
.alert,.info{
  border-left:5px solid var(--primary);
  background:#f8fbff;
  padding:15px 17px;
  border-radius:15px;
  box-shadow:var(--shadow-soft);
  color:#0f172a;
}
.toast-alert{
  position:fixed;
  right:18px;
  top:78px;
  z-index:9999;
  min-width:320px;
  max-width:min(500px,calc(100vw - 32px));
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 17px;
  border-radius:19px;
  color:#fff;
  box-shadow:0 20px 50px rgba(15,23,42,.30);
  animation:toastIn .28s ease-out;
}
.toast-success{background:linear-gradient(135deg,#15803d,#16a34a)}
.toast-error{background:linear-gradient(135deg,#b91c1c,#ef4444)}
.toast-icon{
  width:29px;height:29px;border-radius:999px;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;flex:0 0 auto;
}
.toast-text{flex:1;font-weight:900;line-height:1.35}
.toast-alert button{
  min-height:0!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:none!important;
  padding:2px 8px!important;
  border-radius:10px!important;
  font-size:18px!important;
}
.toast-hide{animation:toastOut .35s ease-in forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) translateX(12px)}to{opacity:1;transform:translateY(0) translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}

/* PAGINATION */
.pagination,.paging,.pager{
  display:flex!important;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:15px 0!important;
}
.pagination a,.pagination span,.paging a,.paging span,.pager a,.pager span,a.page-link,.page-link{
  min-width:36px;
  height:36px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:0 11px!important;
  border-radius:11px!important;
  border:1px solid #cbd5e1!important;
  background:#fff!important;
  color:#0f172a!important;
  text-decoration:none!important;
  font-weight:900!important;
  box-shadow:var(--shadow-soft);
}
.pagination .active,.paging .active,.pager .active,a.page-link.active,.page-link.active,.pagination strong,.paging strong,.pager strong{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important;
  color:#fff!important;
  border-color:transparent!important;
}
.pagination a:empty:before,.paging a:empty:before,.pager a:empty:before{
  content:"•";
  color:#94a3b8;
}

/* DASHBOARD */
.dashboard-grid,.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:24px;
}
.dashboard-card,.stat-card,.summary-card{
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.dashboard-card:after,.stat-card:after,.summary-card:after{
  content:"";
  position:absolute;
  right:-30px;top:-30px;
  width:95px;height:95px;
  border-radius:50%;
  background:rgba(15,111,214,.09);
}
.dashboard-card h3,.stat-card h3{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  letter-spacing:0;
}
.dashboard-card .num,.stat-card .num,.summary-card .num{
  font-size:32px;
  font-weight:900;
  color:#0f172a;
}

/* NOTIF */
.notif-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:21px;
  height:21px;
  padding:0 6px;
  margin-left:6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.notif-item{
  display:flex;
  gap:13px;
  align-items:flex-start;
  padding:15px;
  border:1px solid #e5eaf1;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  margin-bottom:11px;
}
.notif-item.unread{border-left:5px solid var(--primary);background:#f8fbff}
.notif-dot{width:10px;height:10px;border-radius:999px;background:var(--primary);margin-top:6px;flex:0 0 auto}
.notif-content{flex:1}
.notif-content h4{margin:0 0 5px;font-size:15px}
.notif-content p{margin:0 0 8px;color:#334155}
.notif-time{font-size:12px;color:var(--muted)}

/* MOBILE */
@media(max-width:980px){
  .container{padding:16px 10px 42px}
  .navbar{
    position:relative;
    overflow-x:auto;
    white-space:nowrap;
    padding:8px;
    min-height:58px;
  }
  .navbar a,.navbar .dropbtn{font-size:13px!important;padding:9px 10px!important}
  .nav-user{margin-left:0!important;display:inline-flex}
  h2{font-size:22px;margin-bottom:18px}
  .panel,.card,.box,form.form{padding:15px;border-radius:16px}
  table{min-width:980px;font-size:12px}
  th,td{padding:9px 8px}
  .toast-alert{left:12px;right:12px;top:70px;min-width:0}
}
@media(max-width:560px){
  body{font-size:13px}
  h2{font-size:20px}
  .dashboard-grid,.stats-grid{grid-template-columns:1fr}
  button,.btn,input[type=submit],input[type=button]{padding:9px 12px}
  .table-responsive{border-radius:14px}
}

.ajax-notif-toast{display:flex;align-items:flex-start;gap:12px;width:min(420px,calc(100vw - 28px));padding:14px 15px;border-radius:18px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;box-shadow:0 20px 50px rgba(15,23,42,.35);animation:ajaxNotifIn .25s ease-out;border:1px solid rgba(255,255,255,.12)}
.ajax-notif-icon{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);flex:0 0 auto}
.ajax-notif-body{flex:1}.ajax-notif-body strong{display:block;font-size:14px;margin-bottom:4px}.ajax-notif-body p{margin:0;color:#e2e8f0;font-size:13px;line-height:1.35}
.ajax-notif-close{min-height:0!important;height:28px!important;width:28px!important;padding:0!important;border-radius:10px!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important;color:#fff!important;font-size:18px!important;flex:0 0 auto}
.ajax-notif-hide{animation:ajaxNotifOut .35s ease-in forwards}
@keyframes ajaxNotifIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ajaxNotifOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}
@media(max-width:560px){#ajaxNotifToastArea{left:10px!important;right:10px!important;bottom:10px!important;max-width:none!important}.ajax-notif-toast{width:100%}}

/* V11.23 TOAST FIX */
.ajax-notif-toast{
  background:#0f172a!important;
  opacity:1!important;
  backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 24px 60px rgba(2,6,23,.45)!important;
}
.ajax-notif-body p{color:#e2e8f0!important}
.ajax-notif-link{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:7px 10px;
  border-radius:10px;
  background:#2563eb!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:800;
  font-size:12px;
  border:0!important;
}
.ajax-notif-link:hover{filter:brightness(1.06)}


/* V11.24 FORCE SOLID AJAX TOAST */
#ajaxNotifToastArea{
  pointer-events:none!important;
}
#ajaxNotifToastArea .ajax-notif-toast{
  pointer-events:auto!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  width:min(420px, calc(100vw - 28px))!important;
  padding:14px 15px!important;
  border-radius:18px!important;
  background:#0f172a!important;
  background-color:#0f172a!important;
  color:#ffffff!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 24px 60px rgba(2,6,23,.45)!important;
  overflow:hidden!important;
  position:relative!important;
}
#ajaxNotifToastArea .ajax-notif-toast *{
  color:inherit;
}
#ajaxNotifToastArea .ajax-notif-icon{
  width:32px!important;
  height:32px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.16)!important;
  flex:0 0 auto!important;
}
#ajaxNotifToastArea .ajax-notif-body{
  flex:1!important;
  min-width:0!important;
}
#ajaxNotifToastArea .ajax-notif-body strong{
  display:block!important;
  color:#ffffff!important;
  font-size:14px!important;
  margin-bottom:4px!important;
  font-weight:900!important;
}
#ajaxNotifToastArea .ajax-notif-body p{
  margin:0!important;
  color:#e2e8f0!important;
  font-size:13px!important;
  line-height:1.35!important;
}
#ajaxNotifToastArea .ajax-notif-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:10px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  background:#2563eb!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:800!important;
  font-size:12px!important;
  border:0!important;
}
#ajaxNotifToastArea .ajax-notif-close{
  min-height:0!important;
  height:28px!important;
  width:28px!important;
  padding:0!important;
  border-radius:10px!important;
  background:#2563eb!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:18px!important;
  flex:0 0 auto!important;
  border:0!important;
}
@media(max-width:560px){
  #ajaxNotifToastArea{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    max-width:none!important;
  }
  #ajaxNotifToastArea .ajax-notif-toast{
    width:100%!important;
  }
}