/* ================================
   HaKI UI — Tailwind-like Green Theme
   ================================== */

/* Override variabel Bootstrap agar semua komponen ikut tema */
:root{
  /* Two-tone + base */
  --haki-bg: #0b1712;
  --haki-surface: #0f1f19;
  --haki-surface-2: #13271f;
  --haki-text: #e8f5ee;
  --haki-muted: #9fb9ab;

  --haki-green-1: #22c55e;
  --haki-green-2: #10b981;
  --haki-accent:  #14b8a6;

  --haki-border: rgba(255,255,255,.08);
  --haki-ring: rgba(34,197,94,.35);

  --haki-r: 1.1rem;
  --haki-r-lg: 1.6rem;
  --haki-shadow-1: 0 10px 30px rgba(0,0,0,.25);
  --haki-shadow-2: 0 5px 18px rgba(16,185,129,.15);
  --haki-shadow-3: 0 12px 45px rgba(20,184,166,.18);

  /* Bootstrap variables */
  --bs-body-bg: var(--haki-bg);
  --bs-body-color: var(--haki-text);
  --bs-border-color: var(--haki-border);
  --bs-primary: #10b981;
  --bs-success: #22c55e;
  --bs-warning: #facc15;
  --bs-danger:  #f43f5e;
}

/* Base */
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--haki-text) !important;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(16,185,129,.10), transparent 55%),
    radial-gradient(1100px 600px at -10% 110%, rgba(34,197,94,.08), transparent 55%),
    var(--haki-bg) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}

/* Jika ada kelas BS yang menyetel bg abu (mengalahkan tema) */
.bg-body-tertiary{ background: transparent !important; }

/* Container */
.container{ max-width: 1080px }

/* Utilities ala Tailwind */
.rounded-2xl{ border-radius: var(--haki-r-lg) }
.rounded-xl { border-radius: var(--haki-r) }
.shadow-soft{ box-shadow: var(--haki-shadow-1) }
.text-muted{ color: var(--haki-muted)!important }
.text-muted-2{ color:#86a69a!important }
.bg-glass{ backdrop-filter: blur(10px); background: rgba(15,31,25,.5); border:1px solid var(--haki-border) }

/* Links */
a{ color: var(--haki-green-1); text-decoration: none }
a:hover{ color: var(--haki-green-2) }

/* NAVBAR */
.navbar{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border-bottom: 1px solid var(--haki-border);
  backdrop-filter: blur(10px);
}
.navbar .navbar-brand{
  font-weight:800; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--haki-green-1), var(--haki-accent));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.navbar .nav-link{
  color: var(--haki-text) !important;
  opacity:.88; padding:.6rem .9rem !important; border-radius:.9rem;
  transition: .2s ease;
}
.navbar .nav-link:hover{
  background: rgba(16,185,129,.12); color:#eafff6 !important;
}
.navbar .dropdown-menu{
  background: var(--haki-surface) !important;
  border:1px solid var(--haki-border); border-radius: 1rem; box-shadow: var(--haki-shadow-2);
}
.navbar .dropdown-item{ color: var(--haki-text) !important }
.navbar .dropdown-item:hover{ background: var(--haki-surface-2) !important; color:#ecfff9 !important }

/* BUTTONS */
.btn{
  --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .65rem;
  border-radius: 1rem !important; border: 0 !important;
  font-weight: 700; letter-spacing:.2px;
  transform: translateZ(0);
  transition: transform .08s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:focus{ outline: 3px solid var(--haki-ring); outline-offset: 2px }
.btn:active{ transform: translateY(1px) }

.btn-primary{
  background: linear-gradient(135deg, var(--haki-green-1), var(--haki-green-2)) !important;
  box-shadow: var(--haki-shadow-2);
}
.btn-primary:hover{
  background: linear-gradient(135deg, #2ad16a, #12c48a) !important;
  box-shadow: var(--haki-shadow-3);
}

.btn-outline-secondary, .btn-outline-danger, .btn-outline-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  color: var(--haki-text) !important;
  border: 1px solid var(--haki-border) !important;
}
.btn-outline-primary{ border-color: rgba(34,197,94,.35) !important }
.btn-outline-primary:hover{ background: rgba(16,185,129,.16) !important }

/* CARDS */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
  border: 1px solid var(--haki-border) !important;
  border-radius: var(--haki-r-lg) !important;
  box-shadow: var(--haki-shadow-1) !important;
}
.card .card-body{ padding: 1.25rem 1.25rem }

/* KPI chip */
.kpi{
  display:flex; gap:.9rem; align-items:center;
  padding:1rem 1.1rem; border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(20,184,166,.08));
  border: 1px solid rgba(34,197,94,.25); box-shadow: var(--haki-shadow-2);
}
.kpi .num{ font: 800 1.3rem/1 ui-sans-serif }
.kpi .lbl{ color: var(--haki-muted) }

/* TABLES */
.table{ --bs-table-color: var(--haki-text); --bs-table-bg: transparent; --bs-table-border-color: var(--haki-border) }
.table thead th{
  color:#cfeadd; text-transform: uppercase; letter-spacing:.4px; font-size:.82rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
}
.table tbody tr{ transition: background .15s ease, transform .1s ease }
.table tbody tr:hover{ background: rgba(16,185,129,.08) }

/* BADGES & ALERTS */
.badge{ border-radius: 999px!important; padding:.45rem .7rem; font-weight:700; letter-spacing:.2px }
.bg-success{ background: rgba(34,197,94,.18)!important; color:#c8ffe1!important; border:1px solid rgba(34,197,94,.35) }
.bg-primary{ background: rgba(20,184,166,.18)!important; color:#d9fffb!important; border:1px solid rgba(20,184,166,.35) }
.bg-warning{ background: rgba(250,204,21,.18)!important; color:#fff4c6!important; border:1px solid rgba(250,204,21,.35) }
.bg-danger{  background: rgba(244,63,94,.18)!important; color:#ffd5dd!important; border:1px solid rgba(244,63,94,.35) }
.bg-secondary{ background: rgba(148,163,184,.20)!important; color:#e9eef7!important; border:1px solid rgba(148,163,184,.35) }
.bg-dark{ background: rgba(15,23,42,.45)!important; color:#e8f5ee!important; border:1px solid var(--haki-border) }

/* Alerts */
.alert{
  border-radius: 1rem; border: 1px solid var(--haki-border);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  color: var(--haki-text) !important;
}

/* FORMS */
.form-control, .form-select, .form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.03)!important; color: var(--haki-text)!important;
  border:1px solid var(--haki-border)!important; border-radius: 1rem!important; box-shadow: none!important;
}
.form-control:focus, .form-select:focus{
  outline: 3px solid var(--haki-ring); outline-offset: 1px; border-color: rgba(34,197,94,.45)!important;
}

/* LISTS & DROPDOWNS */
.list-group{
  --bs-list-group-bg: rgba(255,255,255,.02);
  --bs-list-group-color: var(--haki-text);
  --bs-list-group-border-color: var(--haki-border);
  border-radius: 1rem;
}
.list-group-item{ background: transparent !important; transition: background .15s ease }
.list-group-item:hover{ background: rgba(16,185,129,.10) !important }
.dropdown-menu{ border-radius: 1rem !important }

/* FOOTER */
footer{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
  border-top: 1px solid var(--haki-border);
}

/* MICRO-ANIMATIONS */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
.floaty{ animation: floaty 5s ease-in-out infinite }

/* Hero helper */
.haki-hero{
  background:
    radial-gradient(900px 450px at 0% 0%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(900px 550px at 100% 100%, rgba(20,184,166,.12), transparent 60%);
  border:1px solid var(--haki-border);
  border-radius: var(--haki-r-lg);
  padding: 1.5rem;
}

/* Helpers */
.btn-rounded{ border-radius: 1rem!important }
.card-rounded{ border-radius: var(--haki-r-lg)!important }
.shadow-sm, .shadow, .shadow-lg{ box-shadow: var(--haki-shadow-1)!important }

/* ==== Spacing fixes for forms & cards ==== */

/* Card body lebih lega */
.card .card-body{
  padding: 1.75rem 1.75rem !important;   /* semula 1.25rem */
}
@media (min-width: 992px){
  .card .card-body{ padding: 2rem 2rem !important; }
}

/* Hero container (register, dsb) lebih lega */
.haki-hero{
  padding: 1.75rem !important;           /* semula 1.5rem */
}
@media (min-width: 992px){
  .haki-hero{ padding: 2.25rem !important; }
}

/* Field height & “napas” input */
.form-label{ margin-bottom: .5rem !important; }
.form-control, .form-select{
  padding: .85rem 1rem !important;
  min-height: 44px !important;
}

/* Gutters kustom untuk baris form */
.row.g-form{
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1rem;
}
@media (min-width: 992px){
  .row.g-form{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.25rem;
  }
}

/* Jarak antar elemen vertikal di dalam form bila butuh */
.form-stack > * + *{ margin-top: 1rem; }