/* ============================================================
   SMART DASHBOARD LAVICIA - FILE TEMA
   ------------------------------------------------------------
   Satu-satunya file yang perlu diedit untuk mengubah tampilan.
   Jangan ubah app.css.

   Cara pakai: ubah nilainya, simpan, refresh (Ctrl+F5).

   BAGIAN 1 sampai 8 langsung aktif.
   Cukup ganti angka atau kode warnanya.

   BAGIAN 9 dan 10 harus dihidupkan dulu dengan menghapus
   tanda komentar di awal dan akhir baris tersebut.

   Kalau tampilan kacau, kosongkan saja seluruh isi file ini.
   ============================================================ */


/* ============================================================
   1. WARNA UTAMA
   ============================================================ */

:root {
  --black:      #101211;
  --yellow:     #847860;

  --green:      #e8d4bb;
  --red:        #E14535;
  --orange:     #FDA014;

  --white:      #FFFFFF;
  --off2:       #F5F5F6;
  --off1:       #EFEFF0;
  --gray-line:  #B8B9C1;
  --gray:       #929397;
  .side .user .ava {
      color: #ffffff;
}
.minirow b.g {
    color: #847860;
}
.scard b.g {
    color: #847860;
}
.mcard b.g {
    color: #847860;
}
.crumb {
    display :none;
}
.top {
    background: #f5f5f6;
    border-bottom: 0px solid var(--off1);
}
.evswitch {
        background: #ffffff;
}

    .mbava {
        color: #fff;
    }
}

/*  Keterangan:
    black      sidebar aktif, judul, tombol gelap
    yellow     aksen avatar dan badge admin
    green      teks hadir dan terkirim
    red        teks tidak hadir
    orange     teks ragu dan belum terkirim
    white      latar kartu
    off2       latar halaman
    off1       garis dan border
    gray-line  garis tegas, teks samar
    gray       teks sekunder dan label
    ============================================================ */


/* ============================================================
   2. WARNA LEMBUT
   Latar dan garis untuk badge status, tombol WhatsApp,
   tombol hapus, dropdown status, dan kotak notifikasi.
   Biasanya versi muda dari warna di bagian 1.
   ============================================================ */

:root {
  --green-soft:   #2a271e;
  --green-line:   #2a271e;

  --red-soft:     #FDEAE7;
  --red-line:     #FBDAD4;

  --orange-soft:  #FFF4E5;
  --orange-line:  #FFE2B8;

  --yellow-soft:  #FFF7DA;
  --yellow-text:  #B08900;
}

/*  Keterangan:
    green-soft    latar badge Hadir, tombol WhatsApp, notifikasi sukses
    green-line    garis tombol WhatsApp dan dropdown Terkirim
    red-soft      latar badge Tidak Hadir, notifikasi gagal
    red-line      garis tombol hapus
    orange-soft   latar badge Ragu dan dropdown Belum
    orange-line   garis dropdown Belum
    yellow-soft   latar badge VIP
    yellow-text   teks badge VIP
    ============================================================ */


/* ============================================================
   3. WARNA TOMBOL
   ============================================================ */

:root {
  --btn-bg:        #f5f5f6;
  --btn-text:      #272831;
  --btn-line:      #EFEFF0;

  --btn-dark-bg:   #272831;
  --btn-dark-text: #FFFFFF;
}

/*  Keterangan:
    btn-bg        latar tombol biasa
    btn-text      teks tombol biasa
    btn-line      garis tombol biasa
    btn-dark-bg   latar tombol utama gelap
    btn-dark-text teks tombol utama gelap
    ============================================================ */


/* ============================================================
   4. JENIS FONT
   Kalau ganti font selain Urbanist, hidupkan juga BAGIAN 5.

   Pilihan umum:
     'Urbanist', sans-serif
     'Poppins', sans-serif
     'Inter', sans-serif
     'Plus Jakarta Sans', sans-serif
     'Montserrat', sans-serif
     'Lora', serif
   ============================================================ */

:root {
  --font: 'Urbanist', sans-serif;
}


/* ============================================================
   5. IMPOR FONT GOOGLE
   Hidupkan baris di bawah kalau ganti font, lalu ganti nama
   fontnya. Biarkan bagian wght supaya semua tingkat ketebalan
   ikut termuat.
   ============================================================ */

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


/* ============================================================
   6. KETEBALAN FONT
   Angka 400 paling tipis sampai 900 paling tebal.
   Sebagian font tidak punya tingkat 900. Untuk font seperti
   itu pakai maksimal 700 atau 800.
   ============================================================ */

:root {
  --fw-heading: 700;
  --fw-bold:    700;
  --fw-label:   700;
  --fw-body:    500;
  --fw-soft:    500;
}

/*  Keterangan:
    fw-heading  judul halaman dan angka besar statistik
    fw-bold     nama tamu, tombol, menu, badge
    fw-label    label kecil huruf besar
    fw-body     teks isi dan tabel
    fw-soft     ucapan dan teks samar
    ============================================================ */


/* ============================================================
   7. SUDUT MELENGKUNG
   Angka kecil lebih tajam, angka besar lebih melengkung.
   Nilai 999px berarti bulat penuh berbentuk pil.
   ============================================================ */

:root {
  --radius-card:  16px;
  --radius-input: 11px;
  --radius-pill:  999px;
}


/* ============================================================
   8. UKURAN TATA LETAK
   ============================================================ */

:root {
  --sidebar-width: 250px;
  --logo-sidebar:  80px;
  --logo-mobile:   8px;
  --hero-height:   260px;
}

/*  Keterangan:
    sidebar-width  lebar sidebar pada desktop
    logo-sidebar   lebar logo di sidebar
    logo-mobile    tinggi logo di header ponsel
    hero-height    tinggi foto featured di dashboard
    ============================================================ */


/* ============================================================
   9. PENYETELAN TAMBAHAN
   Hidupkan dengan menghapus tanda komentar di awal dan akhir
   baris yang bersangkutan.
   ============================================================ */

/* .side { background: #FAFAFA !important; } */

/* .content { max-width: 1280px !important; } */

/* .card { box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; } */

/* body { letter-spacing: .2px !important; } */

/* .heroimg { background-position: center 30% !important; } */


/* ============================================================
   10. CONTOH TEMA SIAP PAKAI
   Hidupkan salah satu dengan menghapus tanda komentar di awal
   dan akhir blok yang diinginkan.
   ============================================================ */

/* Tema Navy
:root {
  --black: #1B2A41; --yellow: #E8B84B;
  --btn-dark-bg: #1B2A41;
}
*/

/* Tema Sage
:root {
  --black: #2F3E32; --yellow: #C9D6B4;
  --btn-dark-bg: #2F3E32;
}
*/

/* Tema Maroon
:root {
  --black: #4A1F2B; --yellow: #E0C097;
  --btn-dark-bg: #4A1F2B;
}
*/


/* ============================================================
   BATAS AKHIR PENGATURAN

   Di bawah ini mesin yang menerapkan pengaturan di atas.
   Tidak perlu diubah.
   ============================================================ */

body, input, select, textarea, button,
.btn, .minibtn, .fbtn, .tplchip, .stsel, .dateform input {
  font-family: var(--font) !important;
}

h1, h2, h3,
.pghead h1, .herotxt h2, .statbox .val, .mcard b, .scard b,
.donut-c b, .cdbox b, .minirow b, .ahead h1 {
  font-weight: var(--fw-heading) !important;
}

b, strong,
.btn, .minibtn, .fbtn, .tplchip, .stsel, .badge,
.side a, .logo .nm, .crumb, .evswitch, .tabbar a,
.wishtop b, .leg b, .credrow, .st-on, .st-off {
  font-weight: var(--fw-bold) !important;
}

label, .sec, .lbl, .lblm, .ev-lbl,
thead th, .mcard span, .scard span, .cdbox span,
.donut-c span, .minirow span, .tpllbl, .tplprevh {
  font-weight: var(--fw-label) !important;
}

body, p, td, .sub, .field input, .field select, .field textarea,
.searchbar input, .gtable tbody td, .rtable tbody td {
  font-weight: var(--fw-body) !important;
}

.wtext, .wishitem p, .leg em, .hint, .tplhint, .imphint, .cdempty {
  font-weight: var(--fw-soft) !important;
}

.badge.hadir { background: var(--green-soft) !important;  color: var(--green) !important; }
.badge.tidak { background: var(--red-soft) !important;    color: var(--red) !important; }
.badge.ragu  { background: var(--orange-soft) !important; color: var(--orange) !important; }
.badge.vip   { background: var(--yellow-soft) !important; color: var(--yellow-text) !important; }

.minibtn.wa   { background: var(--green-soft) !important; border-color: var(--green-line) !important; }
.minibtn.wa i { color: var(--green) !important; }
.minibtn.del  { border-color: var(--red-line) !important; }
.minibtn.del i{ color: var(--red) !important; }

.stsel.on {
  background-color: var(--green-soft) !important;
  color: var(--green) !important;
  border-color: var(--green-line) !important;
}
.stsel.off {
  background-color: var(--orange-soft) !important;
  color: var(--orange) !important;
  border-color: var(--orange-line) !important;
}

.credbox    { background: var(--green-soft) !important; border-color: var(--green-line) !important; }
.credbox h3 { color: var(--green) !important; }
.okbox, .flashbox.ok, .alertbox.ok { background: var(--green-soft) !important; color: var(--green) !important; }
.errbox, .flashbox.err, .alertbox.err { background: var(--red-soft) !important; color: var(--red) !important; }

.btn {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-line) !important;
}
.btn.dark {
  background: var(--btn-dark-bg) !important;
  border-color: var(--btn-dark-bg) !important;
  color: var(--btn-dark-text) !important;
}
.btn.dark i { color: var(--btn-dark-text) !important; opacity: .75; }

.card, .herocard, .mcard, .scard, .authcard, .credbox {
  border-radius: var(--radius-card) !important;
}

.btn, .minibtn, .field input, .field select, .field textarea,
.searchbar input, .statbox, .cdbox, .dateform input {
  border-radius: var(--radius-input) !important;
}

.badge, .stsel, .fbtn {
  border-radius: var(--radius-pill) !important;
}

.shell { grid-template-columns: var(--sidebar-width) 1fr !important; }
.brandlogo img { max-width: var(--logo-sidebar) !important; }
.mblogo { height: var(--logo-mobile) !important; }
.heroimg { height: var(--hero-height) !important; }

@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr !important; }
}
@media (min-width: 1101px) {
  .heroimg { height: 100% !important; min-height: var(--hero-height) !important; }
}
@media (max-width: 640px) {
  .heroimg { height: calc(var(--hero-height) * 0.72) !important; }
}