/* =====================================================================
   GINTARA.NET DESIGN SYSTEM
   Tema biru modern — kartu statistik, badge status, sidebar putih
   dengan aksen biru, grafik tren & komposisi.
   ===================================================================== */

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

:root {
  /* Brand */
  --gn-blue: #1656d6;
  --gn-blue-2: #1f6feb;
  --gn-blue-dark: #0b3aa3;
  --gn-navy: #0a1c45;
  --gn-navy-2: #14306e;

  /* Surfaces */
  --gn-bg: #f3f5fa;
  --gn-card: #ffffff;
  --gn-border: #e7eaf2;

  /* Text */
  --gn-text: #1b2440;
  --gn-text-muted: #6b7590;
  --gn-text-soft: #94a0bd;

  /* Status */
  --gn-success: #14a157;
  --gn-success-bg: #e7f8ee;
  --gn-danger: #e0383e;
  --gn-danger-bg: #fdeaea;
  --gn-warning: #e69400;
  --gn-warning-bg: #fff3e0;
  --gn-info: #0ea5e9;
  --gn-info-bg: #e6f7fd;
  --gn-purple: #7c5cf0;
  --gn-purple-bg: #f0ecfd;

  --gn-radius: 14px;
  --gn-radius-sm: 10px;
  --gn-sidebar-width: 264px;
}

* { box-sizing: border-box; }
html, body {
  background: var(--gn-bg);
  color: var(--gn-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 { color: var(--gn-text); font-weight: 700; letter-spacing: -.01em; }

#app-wrap { min-height: 100vh; width: 100%; }

/* ============================== SIDEBAR ============================== */
.sidebar {
  width: var(--gn-sidebar-width);
  min-width: var(--gn-sidebar-width);
  background: #ffffff;
  color: var(--gn-text);
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  border-right: 1px solid var(--gn-border);
  transition: transform .25s ease;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 1.4rem 1.25rem 1.1rem;
}
.brand-logo-img {
  max-width: 100%;
  height: auto;
  display: block;
}
.brand-title { font-weight: 800; color: var(--gn-text); font-size: 1.02rem; line-height: 1.15; }
.brand-sub { font-size: .68rem; color: var(--gn-text-soft); letter-spacing: .03em; font-weight: 500; }

.sidebar-menu { padding: .5rem .75rem 1.5rem; }
.menu-group-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gn-text-soft);
  padding: 1rem .65rem .35rem;
  font-weight: 700;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  margin-bottom: 2px;
  border-radius: var(--gn-radius-sm);
  color: var(--gn-text-muted);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.menu-item i { font-size: 1rem; width: 1.2rem; text-align: center; color: var(--gn-text-soft); transition: color .15s; }
.menu-item:hover { background: #f1f5fd; color: var(--gn-blue); }
.menu-item:hover i { color: var(--gn-blue); }
.menu-item.active {
  background: linear-gradient(135deg, var(--gn-blue-2), var(--gn-blue));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(22,86,214,.25);
}
.menu-item.active i { color: #fff; }

/* ============================== TOPBAR ============================== */
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border-bottom: 1px solid var(--gn-border);
  padding: .7rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 900;
}
.topbar-search {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  border: 1px solid var(--gn-border);
  background: var(--gn-bg);
  border-radius: 999px;
  padding: .5rem 1rem .5rem 2.2rem;
  font-size: .85rem;
}
.topbar-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(22,86,214,.12); border-color: var(--gn-blue); }
.topbar-search i {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--gn-text-soft); font-size: .9rem;
}
.topbar-spacer { flex: 1; }
.topbar-user .btn { border-radius: 999px; border: 1px solid var(--gn-border); background: #fff; }
.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gn-blue-2), var(--gn-blue-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}

.page-content { padding: 1.75rem; flex: 1; }
.app-footer {
  padding: 1rem 1.75rem;
  font-size: .78rem;
  color: var(--gn-text-soft);
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ============================== CARDS ============================== */
.card {
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  box-shadow: 0 1px 2px rgba(20,30,60,.03);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--gn-border);
  font-weight: 700;
  border-radius: var(--gn-radius) var(--gn-radius) 0 0 !important;
}

/* ============================== STAT CARDS ============================== */
.card-stat {
  border-radius: var(--gn-radius);
  border: 1px solid var(--gn-border);
  box-shadow: 0 1px 3px rgba(20,30,60,.04);
  background: #fff;
  padding: 1.1rem 1.2rem;
  height: 100%;
}
.card-stat .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.card-stat .stat-label { font-size: .76rem; color: var(--gn-text-muted); font-weight: 600; }
.card-stat .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--gn-text); line-height: 1.15; }
.card-stat .stat-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.card-stat .stat-sub { font-size: .74rem; color: var(--gn-text-soft); margin-top: .3rem; }

.bg-icon-blue   { background: var(--gn-info-bg); color: var(--gn-blue); }
.bg-icon-green  { background: var(--gn-success-bg); color: var(--gn-success); }
.bg-icon-red    { background: var(--gn-danger-bg); color: var(--gn-danger); }
.bg-icon-orange { background: var(--gn-warning-bg); color: var(--gn-warning); }
.bg-icon-purple { background: var(--gn-purple-bg); color: var(--gn-purple); }

/* Delta badge (naik/turun dibanding bulan lalu) */
.delta-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
}
.delta-up   { background: var(--gn-success-bg); color: var(--gn-success); }
.delta-down { background: var(--gn-danger-bg); color: var(--gn-danger); }
.delta-flat { background: #eef0f6; color: var(--gn-text-soft); }

/* ============================== BADGES / STATUS PILLS ============================== */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .75em; font-size: .72rem; }
.pill-kritis, .pill-bahaya, .pill-rusak  { background: var(--gn-danger-bg)  !important; color: var(--gn-danger)  !important; }
.pill-aman, .pill-sehat, .pill-tersedia  { background: var(--gn-success-bg) !important; color: var(--gn-success) !important; }
.pill-waspada, .pill-rendah              { background: var(--gn-warning-bg) !important; color: var(--gn-warning) !important; }
.pill-info, .pill-terpasang              { background: var(--gn-info-bg)    !important; color: var(--gn-blue)    !important; }
.pill-netral, .pill-dikembalikan         { background: #eef0f6 !important; color: var(--gn-text-muted) !important; }

.table-sm-padding td, .table-sm-padding th { padding: .55rem .65rem; }
.section-title {
  font-weight: 700;
  color: var(--gn-text);
  margin-bottom: 1rem;
  font-size: 1rem;
}
.text-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.badge-prioritas-1 { background: var(--gn-danger); color: #fff; }
.badge-prioritas-2 { background: var(--gn-warning); color: #fff; }
.badge-prioritas-3 { background: var(--gn-text-soft); color: #fff; }

.btn-primary { background: var(--gn-blue); border-color: var(--gn-blue); }
.btn-primary:hover { background: var(--gn-blue-dark); border-color: var(--gn-blue-dark); }
.btn { border-radius: 10px; font-weight: 600; font-size: .87rem; }
.form-control, .form-select { border-radius: 10px; border-color: var(--gn-border); font-size: .88rem; }
.form-control:focus, .form-select:focus { border-color: var(--gn-blue); box-shadow: 0 0 0 3px rgba(22,86,214,.12); }
.table thead th { font-size: .73rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gn-text-soft); font-weight: 700; border-bottom-width: 1px; }
.nav-tabs .nav-link { border: none; color: var(--gn-text-muted); font-weight: 600; font-size: .88rem; }
.nav-tabs .nav-link.active { color: var(--gn-blue); border-bottom: 2px solid var(--gn-blue); background: transparent; }

/* ============================== LOGIN PAGE ============================== */
.login-page { min-height: 100vh; display: flex; }
.login-aside {
  flex: 1.05;
  background: radial-gradient(circle at 20% 20%, var(--gn-navy-2) 0%, var(--gn-navy) 65%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.75rem 3rem;
  position: relative;
  overflow: hidden;
}
.login-aside .login-brand { display: flex; align-items: center; }
.login-brand-logo { max-width: 200px; height: auto; }
.login-aside .login-tagline { font-size: .92rem; color: #cdd9f7; max-width: 320px; margin-top: 1.5rem; line-height: 1.5; }
.login-feature-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .65rem; }
.login-feature-list .lf-item { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: #e3eafc; }
.login-feature-list .lf-item i { color: #6fe3a4; font-size: 1rem; }
.login-illustration { margin: 1.5rem 0; }
.login-aside .login-copyright { font-size: .72rem; color: #8093c4; }

.login-main {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.login-form-wrap { max-width: 360px; width: 100%; }
.login-form-wrap h3 { font-weight: 800; margin-bottom: .25rem; }
.login-form-wrap .login-sub { color: var(--gn-text-muted); font-size: .88rem; margin-bottom: 1.75rem; }

/* Header bermerek khusus mobile — tampil saat panel kiri (aside) disembunyikan.
   max-width tetap dipasang di luar media query sebagai pengaman, supaya jika
   browser sempat menyimpan versi CSS lama (cache), logo tidak meluber raksasa. */
.login-mobile-header { display: none; max-width: 100%; overflow: hidden; }
.login-mobile-logo { max-width: 190px; height: auto; }

@media (max-width: 900px) {
  .login-aside { display: none; }

  body { background: var(--gn-navy); }
  .login-page { display: block; min-height: 100vh; }
  .login-main {
    min-height: 100vh;
    padding: 0;
    justify-content: flex-start;
    background: transparent;
  }

  .login-mobile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 3rem 1.5rem 4.5rem;
    background: radial-gradient(circle at 25% 20%, var(--gn-navy-2) 0%, var(--gn-navy) 70%);
    text-align: center;
  }
  .login-mobile-logo { max-width: 190px; height: auto; }
  .login-mobile-tagline {
    color: #b9c6ec;
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: .6rem;
  }

  .login-form-wrap {
    background: #fff;
    border-radius: 22px 22px 0 0;
    margin-top: -2.5rem;
    padding: 2rem 1.5rem 2.5rem;
    box-shadow: 0 -8px 30px rgba(10,28,69,.12);
    max-width: 480px;
    flex: 1;
  }
  .login-form-wrap h3 { font-size: 1.35rem; text-align: center; }
  .login-form-wrap .login-sub { text-align: center; margin-bottom: 2rem; }

  /* Target sentuh lebih besar & nyaman di HP */
  .login-form-wrap .form-control {
    padding: .85rem 1rem;
    font-size: 1rem;
    border-radius: 12px;
  }
  .login-form-wrap .form-label { font-weight: 600; font-size: .85rem; }
  .login-form-wrap button[type="submit"] {
    padding: .9rem;
    font-size: 1rem;
    border-radius: 12px;
    margin-top: .5rem;
  }
  #togglePw { padding: .6rem .75rem !important; }
}

@media (max-width: 420px) {
  .login-mobile-header { padding: 2.5rem 1.25rem 4rem; }
  .login-form-wrap { padding: 1.75rem 1.25rem 2rem; }
}


/* Responsive sidebar (mobile) */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 0 0 30px rgba(0,0,0,.15);
  }
  .sidebar.open { transform: translateX(0); }
}

/* Print styles untuk laporan bulanan */
@media print {
  .sidebar, .topbar, .app-footer, .no-print { display: none !important; }
  .main-content { width: 100% !important; }
  .page-content { padding: 0 !important; }
  body { background: #fff !important; }
  .card { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
}