:root {
  --bg: #0f172a;
  --bg-dark: #020617;
  --card: rgba(15,23,42,.45);
  --accent: #1d4ed8;
  --text: #e2e8f0;
  --muted: #94a3b8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
}


body:not(.dash-body):not(.tracking-page) {
  background: radial-gradient(circle at top, #1d4ed8 0%, #0f172a 40%, #020617 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.wrapper {
  width: 100%;
  max-width: 1050px;
  background: rgba(15,23,42,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}

.hero {
  background: linear-gradient(160deg,rgba(255,255,255,0.05) 0%,rgba(15,23,42,0) 70%);
  color: #fff;
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tagline { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-bottom:.5rem; }
.hero h1 { font-size:2.1rem; margin:0 0 .5rem; }
.hero-text { color:rgba(255,255,255,0.7); line-height:1.6; }

.login {
  background:#fff;
  padding:2.5rem 2.5rem 2.2rem;
  display:flex;
  flex-direction:column;
  position:relative;
  min-height:450px;
}
.login h2 { margin:0 0 .4rem; color:#0f172a; }
.desc { margin:0 0 1.3rem; color:#64748b; font-size:.9rem; }

.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.65rem; }
label { font-weight:600; color:#0f172a; font-size:.8rem; }

.input-wrap { position:relative; }
.input-wrap input {
  width:100%;
  height:46px;
  border:1px solid rgba(15,23,42,0.08);
  background:#f8fafc;
  border-radius:.9rem;
  padding-left:2.6rem;
  padding-right:2.6rem;
  outline:none;
  transition:.2s;
  font-size:.9rem;
}
.input-wrap input:focus {
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(29,78,216,0.13);
}
.input-wrap .icon {
  position:absolute;
  top:50%;
  left:.75rem;
  transform:translateY(-50%);
  color:#94a3b8;
}
.input-wrap .icon svg { width:18px; height:18px; }

.pass-eye {
  position:absolute;
  top:50%;
  right:.55rem;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:none;
  background:#fff;
  border-radius:.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
  color:#0f172a;
}
.pass-eye:hover { background:#e2e8f0; }

.login .inline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.1rem;
}

.muted-link { color:#94a3b8; font-size:.8rem; text-decoration:none; }
.muted-link:hover { text-decoration:underline; }

.alert {
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.35);
  color:#b91c1c;
  padding:.55rem .7rem;
  border-radius:.65rem;
  font-size:.78rem;
}
.success {
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.38);
  color:#166534;
  padding:.6rem .7rem;
  border-radius:.65rem;
  font-size:.78rem;
}

.btn-login {
  border:none;
  background:var(--accent);
  color:#fff;
  padding:.7rem 1.1rem;
  border-radius:.85rem;
  font-weight:600;
  cursor:pointer;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:.25s;
  box-shadow:0 16px 55px rgba(29,78,216,0.34);
  width:100%;
  justify-content:center;
  height:46px;
}
.btn-login:hover { transform:translateY(-1px); background:#1e40af; }

@media (max-width: 920px) {
  body:not(.dash-body):not(.tracking-page) { padding:0; background:#0f172a; }
  .wrapper { grid-template-columns:1fr; max-width:100%; min-height:100vh; border-radius:0; }
  .hero { order:-1; text-align:center; align-items:center; padding:1.6rem 1.1rem 1rem; }
  .login { padding:1.5rem 1.1rem 1.8rem; }
}
@media (max-width: 480px) {
  .hero h1 { font-size:1.5rem; }
}


body.dash-body,
body.tracking-page {
  background: radial-gradient(circle at top, #1d4ed8 0%, #020617 55%, #020617 100%) !important;
  min-height: 100vh;
}

.dash-nav {
  background: linear-gradient(90deg, #0f172a 0%, #020617 60%, #1d4ed8 110%) !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dash-nav .navbar-brand { color:#fff !important; }
.dash-nav .nav-link {
  color:rgba(255,255,255,.7) !important;
  font-size:.9rem;
  margin-right:.4rem;
  border-radius:.45rem;
  transition:.15s;
}
.dash-nav .nav-link.active,
.dash-nav .nav-link:hover {
  color:#fff !important;
  background:rgba(255,255,255,.06);
}


.dash-nav .dropdown-menu {
  background:#0f172a;
  border:1px solid rgba(255,255,255,.04);
  border-radius:.75rem;
  padding:.35rem 0;
  min-width:210px;
  box-shadow:0 18px 35px rgba(0,0,0,.25);
}
.dash-nav .dropdown-menu .dropdown-item {
  color:rgba(255,255,255,.85);
  font-size:.78rem;
  padding:.45rem 1rem;
  border-radius:.4rem;
}
.dash-nav .dropdown-menu .dropdown-item:hover {
  background:rgba(59,130,246,.25);
  color:#fff;
}

.dash-main {
  max-width:1180px;
  margin-inline:auto;
  padding:1.5rem 1.5rem 2rem;
}
@media (max-width: 768px) {
  .dash-main { padding-inline:.75rem; }
  .dash-nav .navbar-collapse { background:#020617; padding-bottom:.75rem; }
}


.stats-bar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mini-stat {
  background: rgba(15,23,42,.32);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 1rem;
  padding: 1rem 1.1rem .9rem;
  min-height: 92px;
  backdrop-filter: blur(6px);
}
.mini-stat .label {
  font-size: .72rem;
  color: rgba(226,232,240,.6);
  margin-bottom: .4rem;
}
.mini-stat .value {
  font-size: 1.45rem;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 768px) {
  .stats-bar { display:flex; flex-direction:column; gap:12px; }
  .mini-stat { width:100%; min-height:auto; }
}


.dash-card {
  background:rgba(15,23,42,.45);
  border:1px solid rgba(148,163,184,.18);
  border-radius:1rem;
  backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(15,23,42,.2);
  color:#e2e8f0;
}

.dash-card .table-responsive,
.table-wrap {
  border-radius:1rem;
  overflow:hidden;
}

.dash-card table.table {
  margin-bottom:0;
  border-collapse:separate;
  border-spacing:0;
}

.dash-card table.table thead tr:first-child th:first-child { border-top-left-radius:1rem; }
.dash-card table.table thead tr:first-child th:last-child { border-top-right-radius:1rem; }
.dash-card table.table tbody tr:last-child td:first-child { border-bottom-left-radius:1rem; }
.dash-card table.table tbody tr:last-child td:last-child { border-bottom-right-radius:1rem; }

body.dash-body table.table { color:#e2e8f0; }
body.dash-body .table thead th {
  background:rgba(15,23,42,.85);
  border-color:rgba(148,163,184,.15);
}
body.dash-body .table tbody tr { background:rgba(15,23,42,.3); }
body.dash-body .table tbody tr:nth-child(even) { background:rgba(15,23,42,.5); }
body.dash-body .table tbody td { border-color:rgba(148,163,184,.12); }


.table-wrap {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.table-wrap::-webkit-scrollbar { height:0; }


.table-action {
  display:flex;
  gap:.35rem;
  align-items:center;
  justify-content:flex-start;
}
.table-action .btn-icon {
  width:34px;
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.55rem;
  border-width:1px;
}
.table-action .btn-icon i { font-size:1.05rem; line-height:1; }


body.tracking-page .dash-main { max-width: 980px; }

.search-row {
  display:flex;
  gap:.75rem;
  align-items:center;
  width:100%;
}
.search-row .search-input { flex:1 1 auto; }
.search-row .search-input .form-control {
  height:46px;
  border-radius:.8rem;
  border:none;
  background:#ffffff;
  font-size:.9rem;
}
.search-row .search-btn {
  height:46px;
  border-radius:.8rem;
  padding-inline:1.5rem;
}

@media (max-width:768px) {
  .search-row { flex-direction:column; align-items:stretch; }
  .search-row .search-input,
  .search-row .search-input .form-control,
  .search-row .search-btn { width:100%; }
}


.track-card {
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 1rem;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(10px);
}
.track-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem .8rem;
  background: linear-gradient(90deg, #1d4ed8 0%, #0f172a 60%);
  color: #fff;
}
.track-meta {
  background: rgba(15,23,42,.25);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: .4rem;
  padding: .55rem 1.25rem .75rem;
}
.track-meta span { display:block; font-size:.65rem; color:rgba(226,232,240,.65); }
.track-meta strong { color:#fff; font-size:.8rem; }


.track-progress-single {
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: .9rem;
  overflow: hidden;
  margin: 0 1.25rem 1rem;
  position: relative;
  height: 15px;
}
.track-progress-fill {
  height: 15px;
  background: linear-gradient(90deg,#1d4ed8 0%,#38bdf8 100%);
  width: 0;
  transition: width .4s ease;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.track-progress-fill span {
  font-size: .7rem;
  margin-right: .35rem;
  color: #fff;
}


.track-timeline {
  margin-top: 1.25rem;
  padding: 0 1.5rem 1.5rem;
}
.track-timeline .timeline-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  margin-left: .25rem;
}
.track-timeline .timeline-list li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: .9rem;
  align-items: center;
}
.track-timeline .tl-dot {
  width: 16px;
  height: 16px;
  border: 2px solid #3b82f6;
  border-radius: 999px;
  margin-left: 6px;
}
.track-timeline .timeline-title { font-weight:500; color:#e2e8f0; }
.track-timeline .timeline-sub { font-size:.7rem; color:#94a3b8; margin-top:.15rem; }

@media (max-width:720px) {
  .track-timeline { padding:0 1rem 1.25rem; }
  .track-timeline .timeline-list li { grid-template-columns:30px 1fr; }
  .track-timeline .timeline-time { grid-column:2; font-size:.68rem; }
}


#modalDetail .modal-content,
#modalFormStok .modal-content.modal-sitta {
  background: #020617;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 1.25rem;
  overflow: hidden;
}


#modalDetail .modal-header,
#modalFormStok .modal-header.sitta-head {
  background: linear-gradient(90deg, #1d4ed8 0%, #0f172a 50%, #020617 100%);
  border-bottom: 1px solid rgba(148,163,184,.12);
  color: #fff;
  padding: .95rem 1.25rem;
}


#modalDetail .btn-close,
#modalFormStok .btn-close {
  filter: invert(1);
  opacity: .8;
}
#modalDetail .btn-close:hover,
#modalFormStok .btn-close:hover {
  opacity: 1;
}
#modalDetail .modal-content {
  background: #020617 !important;
  border: 1px solid rgba(148,163,184,.15) !important;
  border-radius: 1.25rem;
  overflow: hidden;
}

#modalDetail .modal-body {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem 1.25rem;
}

#modalDetail .detail-cover {
  flex: 0 0 220px;
  display: flex;
  justify-content: center;      
  align-items: center;          
}
#modalDetail .detail-cover img {
  width: 170px;
  max-height: 240px;
  border-radius: 1rem;
  background: #0f172a;
  object-fit: cover;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

#modalDetail .detail-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .4rem;                   
}

#modalDetail label {
  color: #e2e8f0 !important;
  font-weight: 500;
  font-size: .72rem;
  margin-bottom: .15rem;
}

#modalDetail .form-control {
  background: rgba(2,6,23,.45) !important;
  border: 1px solid rgba(148,163,184,.2) !important;
  color: #e2e8f0 !important;
  border-radius: .6rem !important;
  height: 36px !important;
  font-size: .8rem;
}
#modalDetail .form-control:focus {
  background: rgba(2,6,23,.75) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}


#modalDetail .modal-footer {
  border-top: 1px solid rgba(148,163,184,.12);
  padding: .6rem 1.2rem .85rem;
}
#modalDetail .btn-close-detail {
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: .65rem;
  padding: .45rem .95rem .45rem;
  font-weight: 500;
  display: inline-flex;
  gap: .35rem;
}
#modalDetail .btn-close-detail i {
  font-size: .9rem;
}

@media (max-width: 768px) {
  #modalDetail .modal-body {
    flex-direction: column;
  }
  #modalDetail .detail-cover {
    margin-inline: auto;
  }
  #modalDetail .detail-cover img {
    width: 150px;
    max-height: 210px;
  }
}

.modal-sitta { background:#020617; border:1px solid rgba(148,163,184,.15); border-radius:1.25rem; }
.modal-sitta .sitta-head {
  background:linear-gradient(90deg,#1d4ed8 0%,#020617 80%);
  border-bottom:1px solid rgba(148,163,184,.12);
}
.modal-sitta .sitta-body {
  display:flex;
  gap:1rem;
  padding:1rem 1.2rem 1.25rem;
}
.modal-sitta .detail-cover {
  flex:0 0 210px;
  display:flex;
  align-items:center;           
}
.modal-sitta .detail-cover img {
  width:100%;
  max-width:190px;
  border-radius:1rem;
  background:#0f172a;
  object-fit:cover;
  aspect-ratio:3/4;
  box-shadow:0 14px 35px rgba(0,0,0,.4);
}
.modal-sitta .detail-form {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.modal-sitta .detail-form .field input.form-control {
  background:rgba(15,23,42,.4);
  border:1px solid rgba(148,163,184,.16);
  color:#fff;
  border-radius:.7rem;
  height:38px;
  font-size: .8rem;
}
.modal-sitta .detail-form label {
  font-size:.7rem;
  color:rgba(226,232,240,.6);
  margin-bottom:.18rem;
  font-weight:500;
}
.modal-sitta .sitta-foot { border-top:1px solid rgba(148,163,184,.12); }
@media (max-width:768px){
  .modal-sitta .sitta-body{flex-direction:column;}
  .modal-sitta .detail-cover{justify-content:center;}
}


#modalHapus .modal-dialog {
  max-width: 420px;
}

#modalHapus .modal-content {
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 1.1rem;
  overflow: hidden;
}

#modalHapus .modal-header {
  background: linear-gradient(120deg, #1d4ed8 0%, #020617 85%);
  color: #fff;
  border-bottom: 1px solid rgba(148,163,184,.12);
  padding: .7rem 1rem .65rem;
}

#modalHapus .modal-title {
  font-size: .95rem;
  font-weight: 600;
}

#modalHapus .modal-body {
  text-align: center;
  color: #e2e8f0;
  padding: 1.1rem 1.4rem 1rem;
  font-size: .9rem;
  line-height: 1.5;
}

#modalHapus .modal-footer {
  border-top: 1px solid rgba(148,163,184,.05);
  padding: .7rem 1rem .9rem;
  justify-content: flex-end;
  gap: .5rem;
}

#modalHapus .btn-cancel {
  background: transparent;
  border: 1px solid rgba(226,232,240,.3);
  color: #fff;
  border-radius: .6rem;
  padding: .28rem .9rem .35rem;
  font-size: .78rem;
}

#modalHapus .btn-cancel:hover {
  background: rgba(226,232,240,.05);
}

#modalHapus .btn-danger {
  border-radius: .6rem;
  padding: .28rem 1rem .35rem;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}