/* =============================================
   SILVI SPJ – Shared Stylesheet
   BPS Kabupaten Bekasi | 2026
   ============================================= */

/* ---------- Google Fonts are loaded in head.php ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #0f172a;
  margin: 0;
  padding: 0;
}

/* ---- Material Symbols ---- */
.mat {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  text-transform: none !important;
}
.mat-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }

/* ---- Animated gradient (login/forgot pages) ---- */
.bg-anim {
  background: linear-gradient(135deg, #003366 0%, #004d99 40%, #0a6e4a 100%);
  background-size: 400% 400%;
  animation: gradShift 12s ease infinite;
  position: relative;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.dots {
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 28px 28px;
}
.card-glass {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* ---- Sidebar layout ---- */
.layout-wrap  { display: flex; height: 100vh; overflow: hidden; }
#sidebar {
  width: 256px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  z-index: 40;
}
.sidebar-brand { padding: 1.25rem; border-bottom: 1px solid #f1f5f9; }
.sidebar-brand-inner { display: flex; align-items: center; gap: .75rem; }
.sidebar-icon-box {
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar-logo-img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-title  { font-size: .8125rem; font-weight: 900; color: #003366; line-height: 1; }
.sidebar-sub    { font-size: .625rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-top: .125rem; }
.sidebar-nav    { flex: 1; padding: .75rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; }
.sidebar-section{ font-size: .625rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .12em; padding: .5rem .75rem; }
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  font-size: .875rem; font-weight: 600;
  text-decoration: none;
  color: #64748b;
  transition: background .15s, color .15s;
}
.nav-item:hover  { background: rgba(0,51,102,.06); color: #003366; }
.nav-item.active { background: #003366; color: #fff; box-shadow: 0 4px 12px rgba(0,51,102,.2); }
.sidebar-footer { padding: .75rem; border-top: 1px solid #f1f5f9; }
.sidebar-user {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .75rem;
  background: #f8fafc; margin-bottom: .25rem;
}
.sidebar-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: rgba(0,51,102,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-name { font-size: .75rem; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: .6875rem; color: #94a3b8; }
.btn-logout {
  width: 100%; display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .75rem;
  background: none; border: none; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: #ef4444;
  transition: background .15s;
}
.btn-logout:hover { background: #fef2f2; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 30;
  opacity: 0; transition: opacity .2s;
}

/* ---- Main area ---- */
.main-wrap  { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar {
  height: 4rem; background: #fff;
  border-bottom: 1px solid #f1f5f9;
  padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.topbar-title { font-size: .9375rem; font-weight: 900; color: #003366; }
.topbar-sub   { font-size: .75rem; color: #94a3b8; }
.main-content { flex: 1; overflow-y: auto; padding: 1.5rem; }

/* ---- Cards ---- */
.card {
  background: #fff; border-radius: 1rem;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.stat-card {
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,51,102,.1); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .625rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 700;
}

/* ---- Table ---- */
.table-wrap { overflow-x: auto; }
.silvi-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.silvi-table thead tr { background: #f8fafc; }
.silvi-table th {
  padding: .875rem 1.25rem;
  text-align: left; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: #64748b;
  border-bottom: 1px solid #f1f5f9;
}
.silvi-table tbody tr { border-bottom: 1px solid #f8fafc; transition: background .1s; }
.silvi-table tbody tr:hover { background: #f8fafc; cursor: pointer; }
.silvi-table td { padding: .875rem 1.25rem; }

/* ============================================
   STEPPER — Track-based (reliable & animated)
   ============================================ */
.stepper-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2.5rem 0 1rem;
}

/* Base grey rail behind everything */
.stepper-rail {
  position: absolute;
  top: calc(2.5rem + 1.25rem); /* padding-top + half of icon height (2.5rem/2) */
  left: calc(2.5rem / 2);
  right: calc(2.5rem / 2);
  height: 4px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  z-index: 0;
}

/* Animated progress fill on top of rail */
.stepper-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 9999px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* Shimmer animation */
  overflow: hidden;
}
.stepper-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
  background-size: 200% 100%;
}
.stepper-fill.revisi {
  background: linear-gradient(90deg, #10b981, #f97316, #ef4444);
}

/* Individual step node */
.step-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: 0.625rem;
}

/* Icon circle */
.step-node-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: #fff;
  border: 3px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  cursor: default;
}
.step-node-icon .mat {
  font-size: 1.125rem;
  color: #cbd5e1;
  transition: color 0.4s ease;
}

/* Label below icon */
.step-node-label {
  font-size: 0.625rem;
  font-weight: 800;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  transition: color 0.4s ease;
  max-width: 5.5rem;
  line-height: 1.2;
}

/* ---- STATE: completed ---- */
.step-node.completed .step-node-icon {
  background: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 5px rgba(16,185,129,0.12);
  animation: iconPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.step-node.completed .step-node-icon .mat { color: #fff; }
.step-node.completed .step-node-label { color: #059669; }

/* ---- STATE: active ---- */
.step-node.active .step-node-icon {
  background: #003366;
  border-color: #003366;
  animation: activeRing 2.4s ease-out infinite, iconPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: center;
}
.step-node.active .step-node-icon .mat { color: #fff; }
.step-node.active .step-node-label { color: #003366; font-weight: 900; }

/* ---- STATE: revisi ---- */
.step-node.revisi .step-node-icon {
  background: #ef4444;
  border-color: #ef4444;
  animation: revisiShake 0.6s ease-in-out 0.3s both, revisiRing 2.4s ease-out 0.9s infinite;
}
.step-node.revisi .step-node-icon .mat { color: #fff; }
.step-node.revisi .step-node-label { color: #dc2626; }

/* ---- Animations ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes iconPopIn {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes activeRing {
  0%   { box-shadow: 0 0 0 0 rgba(0,51,102,0.45); }
  50%  { box-shadow: 0 0 0 10px rgba(0,51,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,51,102,0); }
}

@keyframes revisiShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-3px); }
  40%     { transform: translateX(3px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}

@keyframes revisiRing {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
  50%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ---- Form fields ---- */
.field-group label { display: block; font-size: .8125rem; font-weight: 600; color: #475569; margin-bottom: .375rem; }
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%; padding: .75rem 1rem;
  border-radius: .75rem; border: 1px solid #e2e8f0;
  font-size: .875rem; color: #0f172a; background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: 'Inter', sans-serif;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none; border-color: #003366;
  box-shadow: 0 0 0 3px rgba(0,51,102,.12);
}
.field-group input.error { border-color: #ef4444; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: .75rem; font-size: .875rem; font-weight: 700; border: none; cursor: pointer; text-decoration: none; transition: all .15s; }
.btn-primary { background: #003366; color: #fff; box-shadow: 0 4px 12px rgba(0,51,102,.2); }
.btn-primary:hover { background: #00285c; }
.btn-success { background: #10b981; color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,.2); }
.btn-success:hover { background: #059669; }
.btn-ghost  { background: #f1f5f9; color: #475569; }
.btn-ghost:hover { background: #e2e8f0; }
.btn-danger { background: transparent; color: #ef4444; }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: .4rem .875rem; font-size: .8125rem; }
.btn-icon { padding: .5rem; border-radius: .5rem; }
.btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---- Notification Bell ---- */
.notif-bell { position: relative; }
.notif-bell-btn {
  position: relative;
}
.notif-bell-btn:focus-visible {
  outline: none;
}
.notif-badge {
  position: absolute;
  top: -.2rem;
  right: -.2rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  border-radius: 9999px;
  background: #ef4444;
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.35);
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  width: min(22rem, calc(100vw - 2rem));
  background: #fff;
  border: 2px solid #93c5fd;
  border-radius: 1rem;
  outline: 1px solid rgba(0,51,102,.12);
  box-shadow: 0 28px 70px rgba(15,23,42,.22), 0 0 0 5px rgba(219,234,254,.55);
  overflow: hidden;
  z-index: 45;
}
.notif-panel.hidden { display: none; }
.notif-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1rem .875rem;
  border-bottom: 1px solid #bfdbfe;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.notif-panel-kicker {
  margin: 0 0 .2rem;
  font-size: .625rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.notif-panel-title {
  margin: 0;
  font-size: .875rem;
  font-weight: 800;
  color: #0f172a;
}
.notif-panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .55rem;
  border-radius: 9999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: .6875rem;
  font-weight: 800;
}
.notif-panel-count.hidden { display: none; }
.notif-panel-body {
  max-height: 22rem;
  overflow-y: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.notif-summary {
  padding: .85rem .9rem;
  border-radius: .9rem;
  background: #eff6ff;
  border: 2px solid #93c5fd;
  box-shadow: inset 3px 0 0 #2563eb;
}
.notif-summary.admin {
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: inset 3px 0 0 #ef4444;
}
.notif-summary-title {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  color: #0f172a;
}
.notif-summary-text {
  margin: .2rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: #475569;
}
.notif-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.notif-item {
  display: block;
  padding: .8rem .9rem;
  border-radius: .9rem;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.notif-item:hover {
  background: #f8fafc;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.10), 0 0 0 3px rgba(37,99,235,.10);
}
.notif-item-title {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  color: #0f172a;
}
.notif-item-meta {
  margin: .2rem 0 0;
  font-size: .6875rem;
  color: #64748b;
}
.notif-item-desc {
  margin: .3rem 0 0;
  font-size: .75rem;
  color: #334155;
}
.notif-empty-state {
  padding: 1rem;
  border-radius: .9rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  font-size: .75rem;
  font-style: italic;
  text-align: center;
}
.notif-panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem .9rem;
  border-radius: .9rem;
  background: #f8fafc;
  color: #003366;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
}
.notif-panel-link:hover { background: #eff6ff; }

/* ---- Toast ---- */
.toast {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 500;
  transition: opacity .3s, transform .3s;
}
.toast.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.toast.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.toast.info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.toast.hidden  { display: none; }
.toast.toast-floating {
  position: fixed;
  top: 5.25rem;
  right: 1.25rem;
  z-index: 90;
  max-width: min(24rem, calc(100vw - 2rem));
  box-shadow: 0 18px 45px rgba(15,23,42,.18);
  animation: toastPop .2s ease-out;
}
@keyframes toastPop {
  from { opacity: 0; transform: translateY(-.4rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
  .toast.toast-floating {
    top: 4.75rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* ---- Modal ---- */
.modal-bg  { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: #fff; border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(0,0,0,.2); width: 100%; max-width: 30rem; padding: 1.5rem; }
.modal-bg.hidden { display: none; }
.modal-wide { max-width: 95vw; width: 100%; height: 90vh; display: flex; flex-direction: column; padding: 0; }
.modal-header-fs { padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f5f9; }
.modal-body-fs { flex: 1; background: #525659; } /* Dark background typical for PDF viewers */

/* ---- Pagination ---- */
.pagination { display: flex; align-items: center; gap: .25rem; }
.page-btn {
  width: 2rem; height: 2rem; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; background: #fff;
  font-size: .75rem; font-weight: 700; color: #475569; cursor: pointer;
  transition: all .15s;
}
.page-btn:hover     { background: #f8fafc; }
.page-btn.active    { background: #003366; color: #fff; border-color: #003366; }
.page-btn:disabled  { opacity: .4; cursor: not-allowed; }

/* ---- PDF Dropzone & Preview Styles ---- */
.drop-zone {
  width: 100%;
  padding: 2.5rem;
  border: 2px dashed #e2e8f0;
  border-radius: 1rem;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: #003366;
  background: rgba(0, 51, 102, 0.04);
}

.drop-zone .mat {
  font-size: 3rem;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.drop-zone:hover .mat {
  color: #003366;
}

/* ---- Multi-File List & Toggle Preview ---- */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.file-item {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}

.file-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  gap: 0.5rem;
}

.preview-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8fafc;
  border-top: 0 solid #f1f5f9;
}

.preview-container.open {
  max-height: 550px;
  border-top-width: 1px;
}

.preview-iframe {
  width: 100%;
  height: 500px;
  border: none;
  display: block;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  #sidebar { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; opacity: 1; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
}