/*
 * Kaliurang Adventure — kulit brand panel Filament.
 * Arah desain: admin SaaS modern low-contrast — permukaan terang bersih,
 * hijau brand hanya sebagai AKSEN (tombol, item aktif, angka penting),
 * login split-screen dengan panel ilustrasi abstrak topografi.
 */

/* ================= LOGIN (glass + ilustrasi) ================= */

/* Latar aurora pastel lembut di seluruh halaman */
.fi-simple-layout {
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%, rgb(127 174 131 / 0.35), transparent 60%),
    radial-gradient(ellipse 50% 42% at 88% 18%, rgb(240 169 46 / 0.24), transparent 62%),
    radial-gradient(ellipse 60% 50% at 78% 92%, rgb(27 95 33 / 0.22), transparent 60%),
    radial-gradient(ellipse 45% 40% at 30% 96%, rgb(240 200 120 / 0.18), transparent 65%),
    linear-gradient(160deg, #f6f7f3 0%, #eef2ea 100%);
  background-attachment: fixed;
}

/* Panel hero ilustrasi (kiri, desktop) — dirender via render hook */
.ka-login-hero { display: none; }

@media (min-width: 1024px) {
  .ka-login-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset-block: 1.5rem;
    left: 1.5rem;
    width: calc(52% - 3rem);
    border-radius: 1.75rem;
    background: rgb(255 255 255 / 0.42);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgb(255 255 255 / 0.65);
    box-shadow: 0 20px 60px -24px rgb(30 60 30 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.7);
    z-index: 0;
  }

  .fi-simple-layout {
    padding-left: 52%;
  }
}

.ka-login-hero-inner {
  text-align: center;
  padding: 3rem 3.5rem;
  max-width: 34rem;
}

.ka-login-hero-art {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

.ka-login-hero-inner h2 {
  margin-top: 1.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f2a1c;
  letter-spacing: -0.015em;
}

.ka-login-hero-inner p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5d6857;
}

/* Kartu form GLASS */
.fi-simple-main-ctn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fi-simple-main {
  background: rgb(255 255 255 / 0.55) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 0.7) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 24px 70px -28px rgb(30 60 30 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.8) !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  max-width: 26rem !important;
}

/* Filament set inline height 1.5rem di wrapper logo; brand di kartu login
   disusun vertikal (logo + 2 baris teks) jadi wajib auto agar tidak meluber
   menimpa heading "Masuk ke akun Anda" */
.fi-simple-main .fi-logo {
  height: auto !important;
  margin-inline: auto;
  filter: drop-shadow(0 6px 14px rgb(30 60 30 / 0.25));
}

.fi-simple-header-heading {
  color: #1f2a1c !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  font-size: 1.4rem !important;
}

.fi-simple-layout .fi-input-wrp {
  background: rgb(255 255 255 / 0.75);
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgb(20 40 20 / 0.06);
}

.fi-simple-layout .fi-btn-color-primary {
  border-radius: 0.7rem !important;
  padding-block: 0.65rem;
  box-shadow: 0 10px 24px -10px rgb(27 95 33 / 0.55) !important;
}

/* ================= BRAND (logo + teks) ================= */

.ka-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.ka-brand img {
  height: 2.5rem;
  width: 2.5rem;
  object-fit: contain;
}

.ka-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.ka-brand-text strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1f2a1c;
  letter-spacing: -0.01em;
}

.ka-brand-text small {
  font-size: 0.66rem;
  color: #8b9586;
  font-weight: 500;
}

/* Di kartu login: brand ditumpuk tengah dan lebih besar */
.fi-simple-main .ka-brand {
  flex-direction: column;
  gap: 0.5rem;
}

.fi-simple-main .ka-brand img {
  height: 3.75rem;
  width: 3.75rem;
  filter: drop-shadow(0 6px 14px rgb(30 60 30 / 0.25));
}

.fi-simple-main .ka-brand-text {
  align-items: center;
  text-align: center;
}

.fi-simple-main .ka-brand-text strong {
  font-size: 1rem;
}

/* ================= SIDEBAR (terang, low-contrast) ================= */

.fi-sidebar {
  background: #fbfcfa !important;
  border-inline-end: 1px solid #e7eae4 !important;
}

.fi-sidebar-header {
  background: #fbfcfa !important;
  box-shadow: inset 0 -1px 0 #eef0ea !important;
}

.fi-sidebar-group-label {
  color: #98a094 !important;
  font-size: 0.67rem !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700 !important;
}

.fi-sidebar-item-button {
  border-radius: 0.55rem !important;
  padding-block: 0.42rem !important;
}

.fi-sidebar-item-label {
  color: #46503f !important;
  font-weight: 500 !important;
  font-size: 0.855rem !important;
}

.fi-sidebar-item-icon {
  color: #8b9586 !important;
}

.fi-sidebar-item-button:hover {
  background: #eef1ea !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
  background: #e6efe4 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
  color: #14481a !important;
  font-weight: 700 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: #1b5f21 !important;
}

/* badge angka di item nav */
.fi-sidebar-item .fi-badge {
  background: #f3e8d3 !important;
  color: #8a5d10 !important;
}

/* Rapatkan jarak antar section menu */
.fi-sidebar-nav-groups {
  row-gap: 0.875rem !important;
}

.fi-sidebar-group-items {
  gap: 0.125rem !important;
}

/* ================= TOPBAR & KONTEN ================= */

.fi-topbar > nav {
  background: rgb(255 255 255 / 0.9) !important;
  border-bottom: 1px solid #e7eae4;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

.fi-main {
  background: #f4f6f2;
}

.fi-header-heading {
  color: #1f2a1c !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
}

.fi-breadcrumbs-item-label {
  color: #98a094 !important;
}

/* ================= KARTU, WIDGET, TABEL ================= */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
  border-radius: 0.85rem !important;
  border: 1px solid #e9ece6 !important;
  box-shadow: 0 1px 2px rgb(24 40 24 / 0.04) !important;
  --tw-ring-color: transparent !important;
}

.fi-wi-stats-overview-stat-value {
  color: #1f2a1c !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.fi-wi-stats-overview-stat-label {
  color: #74806e !important;
}

.fi-ta-header-cell {
  background: #fafbf9;
}

.fi-ta-header-cell-label {
  color: #74806e !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.fi-ta-row:hover > .fi-ta-cell {
  background: #f6f8f4 !important;
}

.fi-badge {
  border-radius: 999px !important;
}

.fi-btn {
  border-radius: 0.6rem !important;
}

.fi-btn-color-primary {
  box-shadow: 0 1px 2px rgb(27 95 33 / 0.25) !important;
}

.fi-input-wrp:focus-within {
  --tw-ring-color: rgb(27 95 33 / 0.45) !important;
}

/* ================= HALAMAN PROSES PELUNASAN ================= */

.ka-pel-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1100px) {
  .ka-pel-grid {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

.ka-pel-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.ka-pel-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.75rem;
  row-gap: 0.5rem;
}

@media (max-width: 640px) {
  .ka-pel-meta { grid-template-columns: 1fr; }
}

/* Picker metode pembayaran (Proses Pelunasan) — grouping + logo spt FE */
.ka-pay-group {
  margin: 0.9rem 0 0.15rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #98a094;
}

.ka-pay-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: border-color 0.15s, background 0.15s;
  margin-top: 0.5rem;
}

.ka-pay-opt:hover { border-color: #c8d4c6; }

.ka-pay-opt-active {
  border-color: #1b5f21 !important;
  background: #eef5ec;
}

.ka-pay-opt-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.ka-pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 1.55rem;
  background: #ffffff;
  border: 1px solid #eceee9;
  border-radius: 0.375rem;
  padding: 0.15rem 0.25rem;
  flex: none;
}

.ka-pay-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Accordion grup metode (default collapse) */
.ka-pay-acc { margin-top: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; }
.ka-pay-acc-group + .ka-pay-acc-group { border-top: 1px solid #eceee9; }
.ka-pay-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; padding: 0.8rem 0.9rem; background: #fff; cursor: pointer; text-align: left;
}
.ka-pay-acc-head:hover { background: #f8faf7; }
.ka-pay-acc-title { font-size: 0.875rem; font-weight: 700; color: #1f2a1c; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ka-pay-chip {
  font-size: 0.68rem; font-weight: 700; color: #14481a; background: #e6efe4;
  border-radius: 999px; padding: 0.15rem 0.55rem; letter-spacing: 0.01em;
}
.ka-pay-acc-right { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.ka-pay-acc-logos { display: flex; align-items: center; gap: 0.3rem; }
.ka-pay-logo-sm { width: 2rem; height: 1.25rem; }
.ka-pay-more { font-size: 0.68rem; font-weight: 700; color: #98a094; }
.ka-pay-chevron { width: 1.1rem; height: 1.1rem; color: #98a094; transition: transform 0.2s; }
.ka-rot { transform: rotate(180deg); }
.ka-pay-acc-body { padding: 0.25rem 0.75rem 0.75rem; background: #fbfcfa; }
.ka-pay-acc-body .ka-pay-opt { background: #fff; }

/* Tombol aksi lebar penuh di halaman Proses Pelunasan */
.ka-action-full .fi-btn { width: 100%; justify-content: center; }

/* Modal hasil scan check-in */
.ka-checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ka-checkin-code { font-family: ui-monospace, monospace; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.03em; color: #1b5f21; }
.ka-checkin-rows { margin-top: 0.9rem; display: grid; gap: 0.4rem; font-size: 0.875rem; }
.ka-checkin-rows > div { display: flex; justify-content: space-between; gap: 1rem; }
.ka-checkin-rows dt { color: #74806e; }
.ka-checkin-rows dd { font-weight: 600; text-align: right; }
.ka-checkin-items { margin-top: 0.9rem; border: 1px solid #e9ece6; border-radius: 0.65rem; overflow: hidden; }
.ka-checkin-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem; }
.ka-checkin-item + .ka-checkin-item { border-top: 1px solid #f0f2ec; }
.ka-checkin-item-name { font-weight: 700; font-size: 0.875rem; }
.ka-checkin-item-meta { font-size: 0.78rem; color: #74806e; }
.ka-checkin-alert { margin-top: 0.9rem; border-radius: 0.65rem; padding: 0.7rem 0.9rem; font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.1rem; }
.ka-checkin-alert-warning { background: #fdf3df; color: #8a5d10; }
.ka-checkin-alert-warning strong { font-size: 0.95rem; }
.ka-checkin-alert-ok { background: #e9f5e9; color: #14481a; font-weight: 700; }
.ka-checkin-alert-info { background: #e8f0f7; color: #1e4f7a; font-weight: 600; }
.ka-checkin-alert-danger { background: #fbe9e9; color: #8f1d1d; font-weight: 600; }

/* Halaman Stok & Kuota */
.ka-stok-filter { display: grid; gap: 1rem; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ka-stok-filter { grid-template-columns: 2fr 1.2fr auto; } }
.ka-stok-label { display: block; font-size: 0.8rem; font-weight: 600; color: #46503f; margin-bottom: 0.3rem; }
.ka-stok-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Hero dashboard */
.ka-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  border-radius: 1rem; padding: 1.5rem 1.75rem; color: #fff;
  background:
    radial-gradient(ellipse 55% 90% at 92% 0%, rgb(240 169 46 / 0.35), transparent 60%),
    linear-gradient(120deg, #14481a 0%, #1b5f21 60%, #2e7d36 100%);
  box-shadow: 0 10px 30px -14px rgb(20 72 26 / 0.55);
}
.ka-hero-date { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.ka-hero-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; margin-top: 0.15rem; }
.ka-hero-sub { margin-top: 0.35rem; font-size: 0.9rem; color: rgb(255 255 255 / 0.85); }
.ka-hero-sub strong { color: #ffd98a; font-weight: 700; }
.ka-hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ka-hero-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 0.65rem; font-size: 0.83rem; font-weight: 600;
  background: rgb(255 255 255 / 0.12); color: #fff; border: 1px solid rgb(255 255 255 / 0.22);
  transition: background 0.15s;
}
.ka-hero-btn:hover { background: rgb(255 255 255 / 0.22); }
.ka-hero-btn-primary { background: #f0a92e; border-color: #f0a92e; color: #241a05; }
.ka-hero-btn-primary:hover { background: #f6bd55; }
.ka-hero-ic { width: 1.05rem; height: 1.05rem; }

/* Kartu ringkasan halaman laporan — multikolom responsif */
.ka-rep-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-top: 0.5rem;
}
.ka-rep-card {
  display: flex; align-items: center; gap: 0.85rem;
  background: #fff; border: 1px solid #e9ece6; border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgb(24 40 24 / 0.04);
}
.ka-rep-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; flex: none;
}
.ka-rep-ic svg { width: 1.35rem; height: 1.35rem; }
.ka-rep-ic-green { background: #e7f1e6; color: #1b5f21; }
.ka-rep-ic-amber { background: #fdf3df; color: #b47708; }
.ka-rep-ic-info { background: #e8f0f7; color: #2563eb; }
.ka-rep-label { font-size: 0.78rem; color: #74806e; }
.ka-rep-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: #1f2a1c; line-height: 1.2; }
.ka-rep-green { color: #1b5f21; }