:root{
  /* ===== Palet dasar (kompatibel mundur) ===== */
  --hijau:#3FB2A0;          /* teal-green lembut */
  --hijau-tua:#2E9587;
  --hijau-muda:#E7F6F3;
  --biru:#6FB1E4;           /* soft-blue */
  --biru-muda:#EAF3FB;
  --teks:#243c38;
  --teks-lembut:#6b8079;
  --bg:#f3f8f7;
  --kartu:#ffffff;
  --garis:#e6efee;
  --radius:16px;
  --shadow:0 8px 26px rgba(18,63,57,.08);

  /* ===== Palet premium R&K Jaya Tech (selaras login) ===== */
  --lx-teal:#2E9587; --lx-teal-d:#1c5f57; --lx-teal-dd:#123f39; --lx-teal-ddd:#0e332e;
  --lx-gold:#d4af37; --lx-gold-l:#f0d780; --lx-gold-d:#b8860b;
  --lx-ink:#16302c;
  --lx-shadow-lg:0 22px 60px rgba(12,42,39,.16);
  --lx-shadow-card:0 10px 30px rgba(18,63,57,.09), 0 1px 0 rgba(255,255,255,.6) inset;
}
*{box-sizing:border-box}
body{
  background:
    radial-gradient(1200px 600px at 110% -5%, rgba(63,178,160,.06), transparent 55%),
    var(--bg);
  color:var(--teks);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
a{color:var(--hijau-tua)}

/* ===== Sidebar ===== */
.app{display:flex;min-height:100vh}
.sidebar{
  width:260px;flex:0 0 260px;
  background:
    radial-gradient(520px 260px at 82% -8%, rgba(212,175,55,.16), transparent 60%),
    linear-gradient(178deg,#17564d 0%,var(--lx-teal-dd) 58%,var(--lx-teal-ddd) 100%);
  color:#fff;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  box-shadow:1px 0 0 rgba(255,255,255,.04), 8px 0 32px rgba(12,42,39,.14);
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(240,215,128,.4)}
.sidebar .brand{
  padding:22px 20px 18px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(212,175,55,.08),transparent);
}
.sidebar .brand .logo{
  width:46px;height:46px;border-radius:13px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--hijau-tua);
  font-size:22px;overflow:hidden;flex:0 0 46px;
  box-shadow:0 6px 16px rgba(0,0,0,.22), 0 0 0 3px rgba(212,175,55,.35);
}
.sidebar .brand .logo img{width:100%;height:100%;object-fit:cover}
.sidebar .brand b{font-size:1.05rem;line-height:1.12}
.sidebar .brand small{opacity:.82;font-size:.72rem;color:var(--lx-gold-l)}
.sidebar .nav-label{padding:14px 20px 6px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.sidebar a.item{
  display:flex;align-items:center;gap:12px;color:#e9faf6;text-decoration:none;
  padding:11px 20px;font-size:.93rem;border-left:4px solid transparent;transition:.18s;
  position:relative;
}
.sidebar a.item i{font-size:1.15rem;width:22px;text-align:center;transition:.18s}
.sidebar a.item:hover{background:rgba(255,255,255,.10);color:#fff}
.sidebar a.item:hover i{color:var(--lx-gold-l)}
.sidebar a.item.active{
  background:linear-gradient(90deg,rgba(212,175,55,.22),rgba(212,175,55,.04) 70%,transparent);
  border-left-color:var(--lx-gold);font-weight:600;color:#fff;
}
.sidebar a.item.active i{color:var(--lx-gold-l)}

/* ===== Konten ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--garis);padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;
  box-shadow:0 6px 20px rgba(18,63,57,.05);
}
.topbar h1{font-size:1.15rem;margin:0;font-weight:800;color:var(--lx-ink);letter-spacing:-.01em}
.topbar h1::before{
  content:"";display:inline-block;width:4px;height:1.05em;vertical-align:-2px;margin-right:10px;
  border-radius:4px;background:linear-gradient(180deg,var(--lx-gold-l),var(--lx-gold-d));
}
.content{padding:24px;flex:1}

/* ===== Kartu ===== */
.card{border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--lx-shadow-card);background:var(--kartu);transition:box-shadow .2s, transform .2s}
a.card:hover, .card.hover-lift:hover{box-shadow:var(--lx-shadow-lg);transform:translateY(-3px)}
.card .card-header{
  background:linear-gradient(180deg,rgba(231,246,243,.5),transparent);
  border-bottom:1px solid var(--garis);font-weight:700;padding:16px 20px;color:var(--lx-ink);
}
.stat-card{position:relative;border-radius:var(--radius);padding:20px;color:#fff;box-shadow:0 12px 30px rgba(18,63,57,.14);overflow:hidden}
.stat-card::after{content:"";position:absolute;inset:-40% -20% auto auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);pointer-events:none}
.stat-card .ikon{font-size:1.9rem;opacity:.9}
.stat-card .nilai{font-size:1.5rem;font-weight:800;margin-top:4px;letter-spacing:-.01em}
.stat-card small{opacity:.92}
.bg-hijau{background:linear-gradient(140deg,#3fc0ad,var(--lx-teal-d))}
.bg-biru{background:linear-gradient(140deg,var(--biru),#4f97cf)}
.bg-emas{background:linear-gradient(140deg,var(--lx-gold-l),var(--lx-gold-d));color:#3a2c05}
.bg-hijau-soft{background:var(--hijau-muda);color:var(--hijau-tua)}
.bg-biru-soft{background:var(--biru-muda);color:#2c6ea3}
.bg-emas-soft{background:#fbf3d8;color:#8a6a12}

/* ===== Tombol ===== */
.btn{border-radius:11px;font-weight:600}
.btn-sm{border-radius:9px}
.btn-primary{background:linear-gradient(135deg,var(--hijau) 0%,var(--hijau-tua) 100%);border:none;box-shadow:0 8px 18px rgba(46,149,135,.28)}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,var(--hijau-tua),var(--lx-teal-d));box-shadow:0 12px 24px rgba(46,149,135,.36);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-outline-primary{color:var(--hijau-tua);border-color:var(--hijau)}
.btn-outline-primary:hover{background:var(--hijau);border-color:var(--hijau)}
.btn-info{background:var(--biru);border-color:var(--biru);color:#fff}
.btn-info:hover{background:#4f97cf;border-color:#4f97cf;color:#fff}
/* Tombol emas premium (opsional untuk CTA sorotan) */
.btn-gold{position:relative;overflow:hidden;border:none;color:#3a2c05;font-weight:700;
  background:linear-gradient(135deg,var(--lx-gold-l) 0%,var(--lx-gold) 55%,var(--lx-gold-d) 100%);
  box-shadow:0 10px 22px rgba(184,134,11,.32)}
.btn-gold:hover{color:#3a2c05;transform:translateY(-1px);box-shadow:0 14px 28px rgba(184,134,11,.4)}
.btn-gold::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:.6s}
.btn-gold:hover::after{left:130%}
.text-hijau{color:var(--hijau-tua)!important}
.text-emas{color:var(--lx-gold-d)!important}
.text-biru{color:#2c6ea3!important}
.badge-lunas{background:var(--hijau-muda);color:var(--hijau-tua)}
.badge-belum{background:#fdecea;color:#d9534f}

/* ===== Tabel / Grid data ===== */
.table{--bs-table-hover-bg:var(--hijau-muda);border-color:var(--garis)}
.table thead th{
  background:linear-gradient(180deg,#eaf7f4,#dff1ec);color:var(--lx-teal-d);
  border-bottom:2px solid rgba(46,149,135,.18);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.table td,.table th{vertical-align:middle}
.table-hover tbody tr{transition:background .12s}
.table-responsive{border-radius:var(--radius)}
/* Kartu yang membungkus tabel: sudutnya rapi */
.card > .table-responsive:last-child, .card > .table-responsive:last-child .table{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}

/* ===== Form ===== */
.form-control,.form-select{border-radius:11px;border-color:#dbe7e3}
.form-control:focus,.form-select:focus{border-color:var(--hijau);box-shadow:0 0 0 .22rem rgba(46,149,135,.16)}
.form-label{font-weight:600;font-size:.88rem;color:var(--teks)}
.input-group-text{border-radius:11px}
.rounded-soft{border-radius:var(--radius)}

/* ===== Alert (selaras premium) ===== */
.alert{border:none;border-radius:var(--radius);box-shadow:0 6px 18px rgba(18,63,57,.06)}
.alert-success{background:#e7f6f0;color:#1c7a5e}
.alert-warning{background:#fdf5e2;color:#8a6a12}
.alert-danger{background:#fdecea;color:#b23b30}

/* ===== List group ===== */
.list-group-item{border-color:var(--garis)}

/* ===== Login & Portal ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1000px 500px at 12% 8%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(800px 450px at 88% 92%, rgba(63,178,160,.16), transparent 55%),
    linear-gradient(135deg,#0f3a35 0%,var(--lx-teal-dd) 48%,var(--lx-teal-ddd) 100%);
  padding:20px}
.auth-card{max-width:430px;width:100%}
.auth-hero{width:74px;height:74px;border-radius:22px;
  background:linear-gradient(140deg,var(--hijau),var(--lx-teal-d));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 5px rgba(212,175,55,.28)}

@media(max-width:820px){
  .sidebar{position:fixed;left:-280px;z-index:1050;transition:.25s}
  .sidebar.open{left:0}
  .content{padding:16px}
}
@media print{
  /* Sembunyikan navigasi & SEMUA kontrol aksi agar tak ikut tercetak */
  .sidebar,.topbar,.no-print,
  .btn,button,.ss-input,input[type=button],input[type=submit],input[type=reset]{display:none!important}
  .app,.main,.content{margin:0!important;padding:0!important}
  body{background:#fff}
  a{text-decoration:none!important;color:inherit!important}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .card-header{background:#fff!important}
  .table thead th{background:#f1f1f1!important;color:#000!important}
  .table-responsive{overflow:visible!important}
  @page{margin:12mm}
}