:focus {
  outline: 0;
}

::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

::-webkit-scrollbar{
  width:8px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb{
  background-color: #000000;
}


.loading {
  display: none;
  position: fixed;
  top:60px;
  right: 20px;
  z-index:999999;
}

.wallet-card .wallet-footer .webcame{
  display:inline-block;
  text-align: center;
  align-items: flex-start;
  justify-content: space-between;
  margin:auto;
}

.wallet-card .wallet-footer .webcame canvas {
    width:600px;
    height:auto;
    border-radius: 10px;
    overflow:hidden;
}


div.dataTables_filter label {
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
    float: right;
}


/* --------------------------------
    Pagination
-----------------------------------*/
div.dataTables_paginate ul.pagination{
  float: right;
}
div.dataTables_info {
    padding-top: 8px;
    padding-left: 10px;
    white-space: nowrap;
}

.pagination>li>a, .pagination>li>span {
  margin: 0 1px;
  color: #333;
  padding:5px 10px;
  line-height:33px;
  font-weight:500;
  font-size:14px;
  background-color: #FFFFFF;
  border:solid 1px #eee;
}

.pagination>li>a:hover{
    color: #ffffff;
    background:#ff396f;
    border-color:#ff396f;
}

.pagination>li:first-child>a, .pagination>li:first-child>span{
    margin-left: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius:20px;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 20px;
    border-bottom-right-radius:20px;
}

.pagination>.active>a, .pagination>.active>a:focus,
.pagination>.active>a:hover, .pagination>.active>span,
.pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 2;
    color: #ffffff;
    cursor: default;
    background:#ff396f;
    border-color:#ff396f;
  
}
.avatar-section {
  position: relative;
}
.avatar-section input[type="file"] {
  display: inline-block;
  opacity: 0;
  position: absolute;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 30px;
  padding-bottom: 67px;
  width: 85%;
  z-index: 99;
  margin-top: 10px;
  cursor:pointer;
}


/* -----  ID Card -----------*/
.id-card{
  position: relative;
  width:300px;
  height:430px;
  margin:auto;
  border-radius:30px;
  overflow: hidden;
  box-shadow: 0 5px 20px 0 rgb(0 0 0 / 9%);
}

.id-card .body-id-card{
  height:100%;
  width: 100%;
  padding:20px 30px 30px 30px;
}

.id-card .body-id-card img{
  position: relative;
}

.id-card .body-id-card .logo{
  position: relative;
  display:flex;
  margin-bottom: 30px;
}
.id-card .body-id-card .logo img{
  float: left;
  height:15px;
}

.id-card .body-id-card .avatar{
  margin-bottom: 10px;
}

.id-card .body-id-card .avatar img{
  width: 50px;
  height: auto;
  object-fit: cover;
}

.id-card .body-id-card h3{
  font-size: 16px;
  text-align: center;
  margin: auto;
  color: #ffffff;
}

.id-card .body-id-card ul{
  margin:0px;
  padding: 0px;
  text-align: left;
  font-size: 13px;
  color: #ffffff;
}

.id-card .body-id-card li{
  list-style: none;
}
.id-card .body-id-card li span{
  width:50px;
  display: inline-block;
}

.id-card .body-id-card p{
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight:600;
}

.id-card .body-id-card .barcode{
  position: relative;
  display: inline-block;
  background:#ffffff;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 9%);
  margin-top:10px;
  border:solid 2px #ffffff;
  overflow: hidden;
  text-align: center;
}

.id-card .body-id-card .barcode img{
  height:90px;
  width: 90px;
  text-align: center;
  display: inline-block;
  object-fit: cover;
}


/* --------- WEBCAME -----------*/
.webcam-capture-body{
  display: inline-block;
  text-align: center;
  margin: auto;
}

.webcam-capture,
.webcam-capture video{
  display: inline-block;
  width:100%!important;
  height: auto!important;
  margin:auto;
  text-align: center;
  border-radius: 15px;
  overflow: hidden;
}


.webcam-capture-body .webcam-camera{
  position: relative;
  background:#ffffff;
  padding:20px;
  border:solid 1px #eeeeee;
  border-radius:20px;
  width:100%;
  height: auto;
}

.webcam-capture-body .webcam-camera img{
  width:100%;
  object-fit: cover;
  background: #eeeeee;
  border: solid 1px #eeeeee;
  border-radius: 10px;
  margin-bottom: 10px;
}


.webcam-capture-body  input[type="file"] {
  display: inline-block;
  opacity:0;
  position: absolute;
  margin-left: 0px;
  margin-right: 0px;
  padding-top:15px;
  padding-left:25px;
  width: 100%;
  height: 60px;
  z-index: 99;
  cursor: pointer;
}



.wallet-card .wallet-footer .webcame{
  display:inline-block;
  text-align: center;
  align-items: flex-start;
  justify-content: space-between;
  margin:auto;
}

.wallet-card .wallet-footer .webcame canvas {
    width:600px;
    height:auto;
    border-radius: 10px;
    overflow:hidden;
}



.select {
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  border: 0px;
  font-size: 15px;
  font-weight: 500;
}




/*-----------------------
 Upload Image
--------------------------*/

.upload-media{
    background: #ffffff;
    background-size: 100%!important;
    border:solid 1px #eeeeee;
    height:100px;
    width:100px;
    cursor:pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    position:relative;
    overflow: hidden;
}
 

.upload-media:hover{
    background: #fbfbfb;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(217,217,217,1);
    -moz-box-shadow: 0px 0px 10px 1px rgba(217,217,217,1);
    box-shadow: 0px 0px 10px 1px rgba(217,217,217,1);
}

.upload-media input.upload-hidden{
    width:100%;height:100px;
    position:absolute!important;
    top:0!important;
    left:0!important;
    padding:0; 
    margin-top:0px; 
    margin-left:0px;
    opacity:0!important;
    cursor:pointer;
    display: block !important;
}

.upload-media i{
  font-size: 30px;
  color: #999999;
  line-height:96px;
}
    
.upload-media img {
    vertical-align:middle;
    width:100px;
    height:100px;
    background-size: 100%;
    object-fit: contain;
  }
.upload-media .images{opacity: 0}
.upload-media .images:hover{
    opacity:1
}

.upload-content{
    position: relative;
}

.upload-content .btn.btn-primary .upload-files{
    width:100%;height:100px;
    position:absolute!important;
    top:0!important;
    left:0!important;
    padding:0; 
    margin-top:0px; 
    margin-left:0px;
    opacity:0!important;
    cursor:pointer;
    display: block !important;
}


@media only screen and (max-width:690px){
  .wallet-card .wallet-footer .webcame canvas {
      width: 100%;
      height: auto;
  }
}
@media only screen and (max-width:480px){
  .wallet-card .wallet-footer .webcame canvas {
    width: 100%;
    height:450px;
  }
  
  div.dataTables_filter label {
    float:left;
  }
  div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 180px;
  }

  .wallet-card {
    padding:10px 15px;
    position: relative;
    z-index: 1;
  }

  .id-card {
      position: relative;
      width:250px;
      height:auto;
      border-radius: 30px;
  }

  .stat-box .value {
      font-size:15px;
  }

  .hidden-sm{
    display: none;
  }
}

@media print {
  .hidden-print {
    display: none !important;
  }
  a[href]:after {
    content: none !important;
  }

 header, footer, aside, nav, form, iframe, .menu, .hero, .adslot{
    display: none;
  }

}


@page:right{
  @bottom-right {
    content: counter(page);
  }
}

@page:left{
  @bottom-left {
    content: counter(page);
  }
}
/* =====================================
   FOTO PROFIL HEADER KANAN ATAS
===================================== */

.appHeader .right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.appHeader .right .headerButton {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    padding: 2px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
    overflow: visible !important;
}

.appHeader .right .headerButton > img.profile-photo-top {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    max-width: 42px !important;
    max-height: 42px !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 50% !important;
    border: 2px solid #ffffff !important;

    display: block !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}
}

/* Foto profile pada sidebar */
.profile-photo-sidebar {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
}
/* Logo aplikasi di tengah header */
.appHeader .pageTitle .logo {
    width: auto !important;
    height: 50px !important;
    max-width: 180px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block;
}
.profile-card {
    position: relative;
    overflow: hidden;
}

.profile-image {
    position: absolute;
    right: 20px;
    bottom: 0;
    width: 220px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767px) {

    .profile-image {
        width: 130px;
        max-height: 210px;
        right: 5px;
        bottom: 0;
        object-fit: cover;
        object-position: top center;
    }

    .profile-card {
        overflow: hidden;
    }
}

/* =========================================================
   BACKGROUND HALAMAN LOGIN USER
   Hanya aktif pada halaman yang memiliki form #form-login.
   Tidak mengubah fungsi login atau halaman setelah login.
   ========================================================= */

body:has(#form-login) {
    background-image: url("/sw-content/background-login-desktop.jpg") !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* #appCapsule bawaan template dibiarkan transparan agar background body terlihat */
body:has(#form-login) #appCapsule {
    background: transparent !important;
    background-color: transparent !important;
    min-height: 100vh !important;
}

/* Area tombol bawah bawaan template semula putih */
body:has(#form-login) .form-button-group {
    background: transparent !important;
}

/* Background khusus layar HP/tablet kecil */
@media (max-width: 768px) {
    body:has(#form-login) {
        background-image: url("/sw-content/background-login-mobile.jpg?v=2") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}
/* =========================================================
   LOGIN FORM - COMPACT & MODERN
   ========================================================= */

/* Perkecil dan pusatkan card login */
body:has(#form-login) #form-login .card {
    width: 88%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;

    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Perkecil padding dalam form */
body:has(#form-login) #form-login .card .card-body {
    padding: 14px 20px !important;
}

/* Perkecil jarak email dan password */
body:has(#form-login) #form-login .form-group.basic {
    padding: 6px 0 !important;
}

/* Ukuran input lebih compact */
body:has(#form-login) #form-login .form-group.basic .form-control {
    height: 36px !important;
    font-size: 14px !important;
}

/* Label Email / Password */
body:has(#form-login) #form-login .label {
    font-size: 12px !important;
    font-weight: 500;
}

/* Placeholder */
body:has(#form-login) #form-login .form-control::placeholder {
    font-size: 14px !important;
    color: #7c828a !important;
}

/* Samakan lebar link dengan card */
body:has(#form-login) #form-login .form-links {
    width: 88%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px !important;
}

/* Pengaturan khusus HP */
@media (max-width: 768px) {

    body:has(#form-login) #form-login .card {
        width: 86%;
        max-width: 360px;
        border-radius: 18px !important;
    }

    body:has(#form-login) #form-login .card .card-body {
        padding: 12px 18px !important;
    }

    body:has(#form-login) #form-login .form-links {
        width: 86%;
        max-width: 360px;
        margin-top: 10px !important;
    }
}
/* =========================================================
   LOGIN BUTTON & LINK - MODERN LAYOUT
   ========================================================= */

/* Jadikan isi form bisa diatur urutannya */
body:has(#form-login) #form-login {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Form Email & Password */
body:has(#form-login) #form-login .card {
    order: 1;
}

/* Area tombol Masuk */
body:has(#form-login) #form-login .form-button-group {
    order: 2;

    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 88%;
    max-width: 420px;

    padding: 0 !important;
    margin: 16px auto 0 auto !important;

    background: transparent !important;
}

/* Tombol Masuk */
body:has(#form-login) #form-login .form-button-group .btn-primary {
    width: 100% !important;
    height: 46px !important;

    background: #1DCC70 !important;
    border-color: #1DCC70 !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    box-shadow: 0 6px 18px rgba(29, 204, 112, 0.28) !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Efek saat tombol ditekan / hover */
body:has(#form-login) #form-login .form-button-group .btn-primary:hover,
body:has(#form-login) #form-login .form-button-group .btn-primary:focus,
body:has(#form-login) #form-login .form-button-group .btn-primary:active {
    background: #18b963 !important;
    border-color: #18b963 !important;
}

/* Sembunyikan tombol Google saja */
body:has(#form-login) #form-login .form-button-group a.btn-danger {
    display: none !important;
}

/* Mendaftar + Lupa Password dipindah setelah tombol Masuk */
body:has(#form-login) #form-login .form-links {
    order: 3;

    width: 88%;
    max-width: 420px;

    margin: 12px auto 0 auto !important;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 13px !important;
}

/* Warna link supaya cocok dengan desain hijau */
body:has(#form-login) #form-login .form-links a {
    color: #1DCC70 !important;
    font-weight: 500;
}

/* Jangan biarkan Lupa Password abu-abu */
body:has(#form-login) #form-login .form-links a.text-muted {
    color: #1DCC70 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body:has(#form-login) #form-login .form-button-group {
        width: 86%;
        max-width: 360px;

        margin-top: 14px !important;
    }

    body:has(#form-login) #form-login .form-button-group .btn-primary {
        height: 44px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    body:has(#form-login) #form-login .form-links {
        width: 86%;
        max-width: 360px;

        margin-top: 12px !important;
        font-size: 12px !important;
    }
}
/* =========================================================
   FINAL LOGIN BOTTOM AREA
   Tombol Masuk + Link di bagian paling bawah
   ========================================================= */

/* Beri ruang agar form tidak tertutup area bawah */
body:has(#form-login) #form-login {
    padding-bottom: 130px;
}


/* ==========================
   TOMBOL MASUK
   ========================== */

body:has(#form-login) #form-login .form-button-group {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    /* Ruang untuk link Mendaftar & Lupa Password */
    bottom: 52px !important;

    transform: translateX(-50%) !important;

    width: 88% !important;
    max-width: 420px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    z-index: 1000 !important;
}


/* Tombol Masuk hijau tua */
body:has(#form-login) #form-login .form-button-group .btn-primary {
    width: 100% !important;
    height: 48px !important;

    background: #086B3A !important;
    border: 1px solid #086B3A !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    box-shadow: 0 8px 20px rgba(0, 70, 35, 0.30) !important;
}


/* Tombol ketika ditekan */
body:has(#form-login) #form-login .form-button-group .btn-primary:hover,
body:has(#form-login) #form-login .form-button-group .btn-primary:focus,
body:has(#form-login) #form-login .form-button-group .btn-primary:active {
    background: #064F2C !important;
    border-color: #064F2C !important;
}


/* Google tetap disembunyikan */
body:has(#form-login) #form-login .form-button-group .btn-danger {
    display: none !important;
}


/* ==========================
   MENDAFTAR + LUPA PASSWORD
   ========================== */

body:has(#form-login) #form-login .form-links {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    bottom: 16px !important;

    transform: translateX(-50%) !important;

    width: 88% !important;
    max-width: 420px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    font-size: 13px !important;

    z-index: 1000 !important;
}


/* Warna link */
body:has(#form-login) #form-login .form-links a,
body:has(#form-login) #form-login .form-links a.text-muted {
    color: #086B3A !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}


/* ==========================
   MOBILE
   ========================== */

@media (max-width: 768px) {

    body:has(#form-login) #form-login {
        padding-bottom: 135px;
    }

    body:has(#form-login) #form-login .form-button-group {
        width: 86% !important;
        max-width: 360px !important;

        bottom: calc(50px + env(safe-area-inset-bottom)) !important;
    }

    body:has(#form-login) #form-login .form-button-group .btn-primary {
        height: 46px !important;
        border-radius: 14px !important;
    }

    body:has(#form-login) #form-login .form-links {
        width: 86% !important;
        max-width: 360px !important;

        bottom: calc(14px + env(safe-area-inset-bottom)) !important;

        font-size: 12px !important;
    }
}
body:has(#form-login) #appCapsule .section.text-center h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body:has(#form-login) #appCapsule .section.text-center h4 {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 400 !important;
}
body:has(#form-login) #appCapsule .section.text-center h1 {
    font-size: 30px !important;
}

@media (max-width: 768px) {
    body:has(#form-login) #appCapsule .section.text-center h1 {
        font-size: 24px !important;
    }
}
@media (max-width: 768px) {

    body:has(#form-login) #appCapsule .section.text-center h1 {
        font-size: 15px !important;
        margin-top: 35px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    body:has(#form-login) #appCapsule .section.text-center h4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}
/* =========================================
   UKURAN BOX LOGIN - DESKTOP SAJA
   ========================================= */

@media (min-width: 769px) {

    body:has(#form-login) #form-login .card {
        width: 100% !important;
        max-width: 330px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(#form-login) #form-login .card .card-body {
        padding: 12px 18px !important;
    }

    body:has(#form-login) #form-login .form-group.basic {
        padding: 4px 0 !important;
    }

    body:has(#form-login) #form-login .form-group.basic .form-control {
        height: 34px !important;
        font-size: 14px !important;
    }
}
/* =========================================================
   MODERN GREEN GRADIENT - HEADER + DASHBOARD TOP
   ========================================================= */

/* Header utama */
.appHeader.bg-success,
.wallet-card-section::before {
    background: linear-gradient(
        90deg,
        #075c3b 0%,
        #0b8a54 50%,
    ) !important;
}

.appHeader.bg-success {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Area hijau di belakang kartu Selamat Datang */
.wallet-card-section::before {
    background: linear-gradient(
        90deg,
        #075c3b 0%,
        #0b8a54 50%,
    ) !important;
}
/* =========================================================
   BOTTOM MENU MOBILE - MODERN CENTER SCAN
   Home | Cuty | Scan | History | Profil
   ========================================================= */

@media (max-width: 768px) {

    /* Bottom Navigation */
    .appBottomMenu {
        height: 68px !important;
        overflow: visible !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        background: #ffffff !important;
        align-items: center !important;
    }

    /* Semua menu menjadi 5 bagian sama besar */
    .appBottomMenu .item {
        flex: 1 1 20% !important;
        width: 20% !important;
        max-width: 20% !important;
    }


    /* ===============================
       URUTAN MENU
       =============================== */

    /* Home */
    .appBottomMenu .item:nth-child(1) {
        order: 1;
    }

    /* Cuty */
    .appBottomMenu .item:nth-child(3) {
        order: 2;
    }

    /* Absen / Scan pindah ke tengah */
    .appBottomMenu .item:nth-child(2) {
        order: 3;
        overflow: visible !important;
        z-index: 10;
    }

    /* History */
    .appBottomMenu .item:nth-child(4) {
        order: 4;
    }

    /* ID Card disembunyikan sementara */
    .appBottomMenu .item:nth-child(5) {
        display: none !important;
    }

    /* Profil */
    .appBottomMenu .item:nth-child(6) {
        order: 5;
    }


    /* ===============================
       TOMBOL SCAN TENGAH
       =============================== */

    .appBottomMenu .item:nth-child(2) ion-icon {
        width: 38px !important;
        height: 38px !important;

        font-size: 30px !important;

        padding: 10px !important;

        margin:
            -30px auto
            3px auto !important;

        color: #ffffff !important;

        background: linear-gradient(
            135deg,
            #075c3b 0%,
            #0b8a54 50%,
            #20b968 100%
        ) !important;

        border: 4px solid #ffffff !important;

        border-radius: 18px !important;

        box-shadow:
            0 6px 16px
            rgba(0, 90, 50, 0.28) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* Label menu Scan */
    .appBottomMenu .item:nth-child(2) strong {
        margin-top: 0 !important;
        font-weight: 600 !important;
        color: #086B3A !important;
    }


    /* Ukuran icon menu biasa */
    .appBottomMenu .item:not(:nth-child(2)) ion-icon {
        font-size: 23px !important;
    }

}
/* =========================================================
   TAHAP 1 - MODERN DASHBOARD CARDS
   ========================================================= */


/* =========================================================
   1. CARD UTAMA
   Selamat / Nama / Jam Kerja / Menu Cepat
   ========================================================= */

#appCapsule .wallet-card {
    background: rgba(255, 255, 255, 0.98) !important;

    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 22px !important;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(15, 23, 42, 0.03) !important;

    padding: 22px 26px !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Garis pemisah menu dibuat lebih lembut */
#appCapsule .wallet-card .wallet-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding-top: 18px !important;
}


/* Icon menu di dalam card */
#appCapsule .wallet-card .wallet-footer .icon-wrapper {
    border-radius: 14px !important;

    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.10) !important;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;
}


/* Efek ketika icon ditekan */
#appCapsule .wallet-card .wallet-footer .item a:active .icon-wrapper {
    transform: scale(0.92);
}


/* =========================================================
   2. CARD ABSEN MASUK / ABSEN PULANG
   ========================================================= */

#appCapsule .stat-box {
    border-radius: 18px !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.08) !important;

    padding: 20px 24px !important;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;
}


/* Absen Masuk */
#appCapsule .stat-box.bg-warning {
    background: linear-gradient(
        135deg,
        #F59E0B 0%,
        #FBBF24 100%
    ) !important;
}


/* Absen Pulang - belum absen */
#appCapsule .stat-box.bg-secondary {
    background: linear-gradient(
        135deg,
        #64748B 0%,
        #94A3B8 100%
    ) !important;
}


/* Absen Pulang jika memakai bg-success */
#appCapsule .stat-box.bg-success {
    background: linear-gradient(
        135deg,
        #087F5B 0%,
        #20B968 100%
    ) !important;
}


/* Judul di dalam stat card */
#appCapsule .stat-box .title {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}


/* Nilai / status */
#appCapsule .stat-box .value {
    font-weight: 700 !important;
    margin-top: 4px;
}


/* Efek tekan */
#appCapsule a .stat-box:active {
    transform: scale(0.98);
}


/* =========================================================
   3. CARD HADIR / IZIN / SAKIT / TERLAMBAT
   ========================================================= */

#appCapsule .transactions .item {
    background: rgba(255, 255, 255, 0.98) !important;

    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 18px !important;

    box-shadow:
        0 7px 20px rgba(15, 23, 42, 0.06) !important;

    padding: 18px 22px !important;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;
}


/* Efek desktop */
@media (hover: hover) {

    #appCapsule .wallet-card:hover {
        box-shadow:
            0 14px 36px rgba(15, 23, 42, 0.10),
            0 3px 8px rgba(15, 23, 42, 0.04) !important;
    }

    #appCapsule .transactions .item:hover {
        transform: translateY(-2px);

        box-shadow:
            0 10px 26px rgba(15, 23, 42, 0.09) !important;
    }
}


/* Efek sentuh mobile */
#appCapsule .transactions .item:active {
    transform: scale(0.98);
}


/* =========================================================
   4. MOBILE OPTIMIZATION
   ========================================================= */

@media (max-width: 768px) {

    /* Card utama */
    #appCapsule .wallet-card {
        border-radius: 20px !important;
        padding: 18px 18px !important;

        box-shadow:
            0 8px 24px rgba(15, 23, 42, 0.07) !important;
    }


    /* Stat Absen */
    #appCapsule .stat-box {
        border-radius: 17px !important;
        padding: 18px 20px !important;
    }


    /* Hadir / Izin / Sakit / Terlambat */
    #appCapsule .transactions .item {
        border-radius: 17px !important;
        padding: 17px 18px !important;
    }


    /* Icon card utama sedikit modern */
    #appCapsule .wallet-card .wallet-footer .icon-wrapper {
        border-radius: 14px !important;
    }

}
/* =========================================================
   FINISHING TAHAP 1 - MOBILE DASHBOARD
   ========================================================= */

@media (max-width: 768px) {

    /* Card utama sedikit lebih compact */
    #appCapsule .wallet-card {
        padding: 16px 16px !important;
        border-radius: 20px !important;
    }

    /* Kurangi ruang sebelum menu icon */
    #appCapsule .wallet-card .balance {
        margin-bottom: 6px !important;
    }

    #appCapsule .wallet-card .wallet-footer {
        padding-top: 16px !important;
    }

    /* Shadow icon dibuat lebih halus */
    #appCapsule .wallet-card .wallet-footer .icon-wrapper {
        box-shadow:
            0 5px 12px rgba(15, 23, 42, 0.08) !important;
    }

    /* Absen masuk / pulang dibuat lebih compact */
    #appCapsule .stat-box {
        min-height: 106px;
        padding: 16px 20px !important;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Card Hadir / Izin / Sakit / Terlambat */
    #appCapsule .transactions .item {
        min-height: 86px;
        padding: 15px 17px !important;

        box-shadow:
            0 6px 16px rgba(15, 23, 42, 0.055) !important;
    }
}
/* =========================================================
   TAHAP 2 - MODERN SIDEBAR
   Tidak mengubah fungsi / link menu
   ========================================================= */


/* =========================================================
   1. PANEL SIDEBAR
   ========================================================= */

#sidebarPanel .modal-dialog {
    width: 320px !important;
    max-width: 88vw !important;
}

#sidebarPanel .modal-content {
    width: 100% !important;
    height: 100vh !important;

    background: #F8FAF9 !important;

    border: 0 !important;
    border-radius: 0 24px 24px 0 !important;

    box-shadow:
        10px 0 35px rgba(15, 23, 42, 0.16) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Hilangkan scrollbar tetapi tetap bisa scroll */
#sidebarPanel .modal-content::-webkit-scrollbar {
    width: 0;
}

#sidebarPanel .modal-content {
    scrollbar-width: none;
}


/* =========================================================
   2. PROFILE HEADER
   ========================================================= */

#sidebarPanel .profileBox {
    min-height: 130px !important;

    padding: 28px 20px 24px 20px !important;

    background: linear-gradient(
        135deg,
        #075C3B 0%,
        #0B8A54 50%,
        #20B968 100%
    ) !important;

    border-radius: 0 0 24px 0 !important;

    position: relative !important;

    box-shadow:
        0 8px 24px rgba(7, 92, 59, 0.18) !important;
}


/* Foto profil */
#sidebarPanel .profileBox .image-wrapper {
    margin-right: 14px !important;
}

#sidebarPanel .profileBox .image-wrapper img,
#sidebarPanel .profileBox img.profile-photo-sidebar {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 50% !important;

    border: 3px solid rgba(255,255,255,0.95) !important;

    box-shadow:
        0 5px 16px rgba(0,0,0,0.18) !important;
}


/* Nama pengguna */
#sidebarPanel .profileBox .in {
    line-height: 1.35em !important;
    padding-right: 35px !important;
}

#sidebarPanel .profileBox .in strong {
    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    margin-bottom: 4px !important;
}


/* NIP / kode pengguna */
#sidebarPanel .profileBox .in .text-muted {
    color: rgba(255,255,255,0.78) !important;

    font-size: 12px !important;
    font-weight: 400 !important;
}


/* =========================================================
   3. TOMBOL CLOSE SIDEBAR
   ========================================================= */

#sidebarPanel .sidebar-close {
    position: absolute !important;

    top: 16px !important;
    right: 14px !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #FFFFFF !important;

    background: rgba(255,255,255,0.15) !important;

    border-radius: 50% !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#sidebarPanel .sidebar-close ion-icon {
    color: #FFFFFF !important;
    font-size: 21px !important;
}


/* =========================================================
   4. JUDUL MENU
   ========================================================= */

#sidebarPanel .listview-title {
    color: #64748B !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    text-transform: uppercase;
    letter-spacing: 0.09em;

    padding: 22px 20px 8px 20px !important;

    margin: 0 !important;
}


/* =========================================================
   5. AREA MENU
   ========================================================= */

#sidebarPanel .image-listview {
    background: transparent !important;

    border-top: 0 !important;
    border-bottom: 0 !important;

    padding: 4px 10px 16px 10px !important;
}


/* Hilangkan garis bawaan antar item */
#sidebarPanel .image-listview > li:after {
    display: none !important;
}


/* Setiap item */
#sidebarPanel .image-listview > li {
    padding: 0 !important;

    margin: 3px 0 !important;

    border: 0 !important;
}


/* Link menu */
#sidebarPanel .image-listview > li > a.item {
    min-height: 54px !important;

    padding: 7px 12px !important;

    border-radius: 14px !important;

    color: #26372F !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    transition:
        background 0.20s ease,
        transform 0.15s ease,
        box-shadow 0.20s ease !important;
}


/* Hilangkan tanda panah bawaan */
#sidebarPanel .image-listview > li > a.item:after {
    display: none !important;
}


/* Hover desktop */
@media (hover: hover) {

    #sidebarPanel .image-listview > li > a.item:hover {
        background: rgba(11, 138, 84, 0.08) !important;

        transform: translateX(3px);

        box-shadow:
            0 4px 12px rgba(15, 23, 42, 0.04) !important;
    }
}


/* Saat ditekan */
#sidebarPanel .image-listview > li > a.item:active {
    background: rgba(11, 138, 84, 0.12) !important;

    transform: scale(0.98);
}


/* =========================================================
   6. ICON MENU
   ========================================================= */

#sidebarPanel .image-listview .icon-box {
    min-width: 40px !important;
    max-width: 40px !important;

    width: 40px !important;
    height: 40px !important;

    margin-right: 13px !important;

    border-radius: 12px !important;

    background: rgba(11, 138, 84, 0.10) !important;

    color: #087F5B !important;

    box-shadow: none !important;
}


/* Icon Ionicons */
#sidebarPanel .image-listview .icon-box ion-icon {
    color: #087F5B !important;

    font-size: 21px !important;
}


/* =========================================================
   7. TOMBOL KELUAR
   ========================================================= */

#sidebarPanel a[href="./logout"] {
    margin-top: 12px !important;

    color: #DC3545 !important;

    background: rgba(220, 53, 69, 0.06) !important;
}

#sidebarPanel a[href="./logout"] .icon-box {
    background: rgba(220, 53, 69, 0.10) !important;

    color: #DC3545 !important;
}

#sidebarPanel a[href="./logout"] .icon-box ion-icon {
    color: #DC3545 !important;
}

#sidebarPanel a[href="./logout"]:active {
    background: rgba(220, 53, 69, 0.13) !important;
}


/* =========================================================
   8. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #sidebarPanel .modal-dialog {
        width: 310px !important;
        max-width: 86vw !important;
    }

    #sidebarPanel .modal-content {
        border-radius: 0 22px 22px 0 !important;
    }

    #sidebarPanel .profileBox {
        min-height: 125px !important;

        padding:
            26px 18px
            22px 18px !important;

        border-radius:
            0 0 22px 0 !important;
    }

    #sidebarPanel .profileBox .image-wrapper img,
    #sidebarPanel .profileBox img.profile-photo-sidebar {
        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;
        min-height: 56px !important;
    }

    #sidebarPanel .image-listview > li > a.item {
        min-height: 52px !important;

        border-radius: 13px !important;
    }

    #sidebarPanel .image-listview .icon-box {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        max-width: 38px !important;

        border-radius: 11px !important;
    }
}
/* =========================================================
   FINISHING SIDEBAR - PROPORSIONAL & PREMIUM
   ========================================================= */


/* Sidebar dibuat lebih ramping */
#sidebarPanel .modal-dialog {
    width: 285px !important;
    max-width: 80vw !important;
}

#sidebarPanel .modal-content {
    width: 100% !important;

    border-radius: 0 20px 20px 0 !important;

    box-shadow:
        10px 0 30px rgba(15, 23, 42, 0.14) !important;
}


/* =========================================================
   PROFILE HEADER
   ========================================================= */

#sidebarPanel .profileBox {
    min-height: 112px !important;

    padding:
        22px 18px
        20px 18px !important;

    border-radius:
        0 0 20px 0 !important;
}


/* Foto dibuat lebih proporsional */
#sidebarPanel .profileBox .image-wrapper {
    margin-right: 14px !important;
}

#sidebarPanel .profileBox .image-wrapper img,
#sidebarPanel .profileBox img.profile-photo-sidebar {

    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    max-width: 48px !important;
    max-height: 48px !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 50% !important;

    border: 2px solid #ffffff !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.14) !important;
}


/* Nama */
#sidebarPanel .profileBox .in {
    padding-right: 30px !important;
    line-height: 1.25em !important;
}

#sidebarPanel .profileBox .in strong {
    font-size: 14px !important;
    line-height: 1.3 !important;

    font-weight: 600 !important;

    margin-bottom: 5px !important;
}


/* NIP */
#sidebarPanel .profileBox .in .text-muted {
    font-size: 11.5px !important;
}


/* Tombol close dibuat sedikit lebih kecil */
#sidebarPanel .sidebar-close {
    width: 32px !important;
    height: 32px !important;

    top: 14px !important;
    right: 12px !important;
}

#sidebarPanel .sidebar-close ion-icon {
    font-size: 19px !important;
}


/* =========================================================
   MENU
   ========================================================= */

#sidebarPanel .listview-title {
    padding:
        18px 18px
        7px 18px !important;

    font-size: 10.5px !important;
}


/* Area menu sedikit lebih ramping */
#sidebarPanel .image-listview {
    padding:
        3px 9px
        14px 9px !important;
}


/* Setiap menu */
#sidebarPanel .image-listview > li {
    margin: 2px 0 !important;
}

#sidebarPanel .image-listview > li > a.item {

    min-height: 48px !important;

    padding:
        6px 11px !important;

    border-radius: 12px !important;

    font-size: 13.5px !important;
}


/* Icon sedikit lebih kecil */
#sidebarPanel .image-listview .icon-box {

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    max-width: 36px !important;

    margin-right: 12px !important;

    border-radius: 11px !important;
}

#sidebarPanel .image-listview .icon-box ion-icon {
    font-size: 20px !important;
}


/* Logout */
#sidebarPanel a[href="./logout"] {
    margin-top: 10px !important;
}


/* =========================================================
   KHUSUS MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #sidebarPanel .modal-dialog {
        width: 280px !important;
        max-width: 78vw !important;
    }

    #sidebarPanel .profileBox {
        min-height: 108px !important;

        padding:
            21px 16px
            18px 16px !important;
    }

    #sidebarPanel .profileBox .image-wrapper img,
    #sidebarPanel .profileBox img.profile-photo-sidebar {

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;
    }

}
/* =========================================================
   TAHAP 3 - FINAL DASHBOARD POLISH
   Warna, Typography, Spacing & Navigation
   Hanya aktif di halaman dashboard/home
   ========================================================= */


/* =========================================================
   1. BACKGROUND DASHBOARD
   ========================================================= */

body:has(.wallet-card-section) {
    background: #F4F6F5 !important;
}

body:has(.wallet-card-section) #appCapsule {
    background:
        linear-gradient(
            180deg,
            rgba(11,138,84,0.035) 0%,
            rgba(244,246,245,0) 280px
        ) !important;
}


/* =========================================================
   2. JARAK ANTAR SECTION
   ========================================================= */

body:has(.wallet-card-section) #appCapsule > .section {
    margin-bottom: 8px;
}

/* Jarak card Absen Masuk/Pulang */
body:has(.wallet-card-section) .wallet-card-section + .section {
    margin-top: 10px !important;
}


/* =========================================================
   3. JUDUL SECTION
   Absensi Bulan / 1 Minggu Terakhir
   ========================================================= */

body:has(.wallet-card-section) .section-title {
    color: #24352D !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    letter-spacing: -0.01em;

    padding-top: 8px !important;
    padding-bottom: 8px !important;
}


/* =========================================================
   4. PILIHAN BULAN & TAHUN
   ========================================================= */

body:has(.wallet-card-section) .select-change {
    color: #087F5B !important;

    font-weight: 600 !important;

    padding: 2px 4px !important;

    border-radius: 8px !important;
}

body:has(.wallet-card-section) .section-title .text-success {
    color: #087F5B !important;
    font-weight: 600 !important;
}


/* =========================================================
   5. CARD STATISTIK
   Hadir / Izin / Sakit / Terlambat
   ========================================================= */

body:has(.wallet-card-section) .transactions .item .detail {
    align-items: center !important;
}

/* Judul */
body:has(.wallet-card-section) .transactions .item strong,
body:has(.wallet-card-section) .transactions .item .detail strong {
    color: #26372F !important;

    font-weight: 600 !important;
}

/* Nilai Hari */
body:has(.wallet-card-section) .transactions .item p {
    color: #98A09C !important;

    font-weight: 500 !important;

    margin-top: 3px !important;
}


/* =========================================================
   6. ICON STATISTIK
   ========================================================= */

body:has(.wallet-card-section) .transactions .item .icon-wrapper {
    border-radius: 12px !important;
}


/* =========================================================
   7. TABEL 1 MINGGU TERAKHIR
   ========================================================= */

body:has(.wallet-card-section) .table-responsive {
    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow:
        0 7px 20px rgba(15,23,42,0.06) !important;
}

body:has(.wallet-card-section) table {
    margin-bottom: 0 !important;
}

/* Header tabel */
body:has(.wallet-card-section) .table thead th {
    border: 0 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Isi tabel */
body:has(.wallet-card-section) .table tbody td,
body:has(.wallet-card-section) .table tbody th {
    font-size: 12px !important;

    vertical-align: middle !important;
}


/* =========================================================
   8. BOTTOM NAVIGATION
   ========================================================= */

body:has(.wallet-card-section) .appBottomMenu {
    border-top:
        1px solid rgba(15,23,42,0.06) !important;

    box-shadow:
        0 -6px 22px rgba(15,23,42,0.055) !important;

    background:
        rgba(255,255,255,0.97) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* Icon menu biasa */
body:has(.wallet-card-section) .appBottomMenu .item ion-icon {
    color: #25362E;
}


/* Label menu */
body:has(.wallet-card-section) .appBottomMenu .item strong {
    color: #25362E;

    font-weight: 500;
}


/* Menu aktif */
body:has(.wallet-card-section) .appBottomMenu .item.active ion-icon,
body:has(.wallet-card-section) .appBottomMenu .item.active strong {
    color: #087F5B !important;
}


/* Garis active bawaan dibuat hijau */
body:has(.wallet-card-section) .appBottomMenu .item.active:before {
    background: #087F5B !important;
}


/* =========================================================
   9. MOBILE FINISHING
   ========================================================= */

@media (max-width: 768px) {

    body:has(.wallet-card-section) #appCapsule {
        padding-bottom: 88px !important;
    }

    body:has(.wallet-card-section) .section-title {
        font-size: 14px !important;
    }

    /* Jarak statistik */
    body:has(.wallet-card-section) .transactions .item {
        margin-bottom: 8px !important;
    }

    /* Bottom nav */
    body:has(.wallet-card-section) .appBottomMenu {
        height: 68px !important;
    }

}
/* =========================================================
   FOTO PROFIL - BULAT & PROPORSIONAL
   ========================================================= */

.avatar-section {
    width: 160px !important;
    height: 160px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative !important;
}

.avatar-section .imaged {
    width: 160px !important;
    height: 160px !important;

    min-width: 160px !important;
    min-height: 160px !important;

    max-width: 160px !important;
    max-height: 160px !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 50% !important;

    border: 5px solid #ffffff !important;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.12) !important;
}

/* Tombol kamera */
.avatar-section .button {
    width: 42px !important;
    height: 42px !important;

    right: 2px !important;
    bottom: 5px !important;

    border: 3px solid #ffffff !important;

    background: #087F5B !important;

    box-shadow:
        0 5px 14px rgba(8, 127, 91, 0.28) !important;
}
@media (max-width: 768px) {

    .avatar-section {
        width: 145px !important;
        height: 145px !important;
    }

    .avatar-section .imaged {
        width: 145px !important;
        height: 145px !important;

        min-width: 145px !important;
        min-height: 145px !important;

        max-width: 145px !important;
        max-height: 145px !important;
    }
}
/* =========================================================
   PROFILE PAGE - FOTO BULAT
   ========================================================= */

.avatar-section {
    width: 150px !important;
    height: 150px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative !important;
}

.avatar-section .profile-avatar-circle {
    width: 150px !important;
    height: 150px !important;

    min-width: 150px !important;
    min-height: 150px !important;

    max-width: 150px !important;
    max-height: 150px !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 50% !important;

    border: 4px solid #ffffff !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.12) !important;
}


/* Tombol kamera */
.avatar-section .button {
    width: 40px !important;
    height: 40px !important;

    right: 1px !important;
    bottom: 4px !important;

    background: #087F5B !important;

    border: 3px solid #ffffff !important;

    box-shadow:
        0 5px 14px rgba(8, 127, 91, 0.25) !important;
}


/* =========================================================
   FIELD PROFILE YANG DIKUNCI
   ========================================================= */

#update-profile .profile-readonly {
    background: #F4F6F5 !important;
    color: #66736D !important;

    border-color: #E1E7E4 !important;

    cursor: not-allowed !important;

    opacity: 1 !important;

    -webkit-text-fill-color: #66736D !important;
}


/* Mobile */
@media (max-width: 768px) {

    .avatar-section {
        width: 140px !important;
        height: 140px !important;
    }

    .avatar-section .profile-avatar-circle {
        width: 140px !important;
        height: 140px !important;

        min-width: 140px !important;
        min-height: 140px !important;

        max-width: 140px !important;
        max-height: 140px !important;
    }
}