:root{
 --bg:#07111f;
 --glass:rgba(16,24,40,.58);
 --border:rgba(255,255,255,.08);
 --primary:#7c5cff;
 --secondary:#00d1ff;
 --text:#f4f7ff;
 --cyan:#3b82f6;
 --green:#22c55e;
}

/* ===== BODY ===== */
body{
 background: radial-gradient(circle at top left,#172554 0%,#07111f 45%,#030712 100%) fixed !important;
 color:var(--text)!important;
 font-family:'Poppins','Roboto',sans-serif;
 overflow-x:hidden;
 -webkit-font-smoothing:antialiased;
}

/* Fix main container white background */
.main {
 background-color: transparent !important;
}
.main .main-container {
 background-color: transparent !important;
 background: transparent !important;
}
.bg-primary-light {
 background-color: rgba(124,92,255,.08) !important;
}
.bg-white {
 background-color: var(--glass) !important;
}
body:before,body:after{
 content:'';position:fixed;inset:auto;width:420px;height:420px;border-radius:50%;filter:blur(70px);opacity:.35;z-index:-1;pointer-events:none;
}
body:before{background:#7c5cff;top:-120px;left:-100px}
body:after{background:#00d1ff;bottom:-120px;right:-100px}

/* ===== GLASS ELEMENTS ===== */
.header,.main-menu,.card,.bg-white,.list-group-item,.dropdown-menu,.modal-content,.form-control,.custom-select,.swal2-popup{
 background:var(--glass)!important;
 border:1px solid var(--border)!important;
 box-shadow:0 10px 40px rgba(0,0,0,.35);
}
/* Backdrop-filter hanya pada elemen utama (hemat GPU) */
.header,.main-menu,.modal-content,.swal2-popup{
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
}
.header{
 margin:14px;
 border-radius:28px;
 padding:8px 14px;
}
.main-menu{
 background:rgba(3,7,18,.92)!important;
 z-index:99999!important;
}
.backdrop{
 z-index:99998!important;
}

/* ===== CARDS ===== */
.card,.list-group-item,.dropdown-menu,.modal-content{
 border-radius:24px!important;
}
.card-body{
 background:transparent!important;
}

/* ===== BUTTONS ===== */
.btn,.btn-link,.menu-btn,.back-btn{
 border-radius:16px!important;
 transition:all .35s ease;
}
.btn-primary,.bg-default,.badge-primary{
 background:linear-gradient(135deg,var(--primary),var(--secondary))!important;
 border:none!important;
}
.btn:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 30px rgba(124,92,255,.35);
}

/* ===== FORMS ===== */
input,textarea,select,.form-control{
 color:#fff!important;
}
.form-control::placeholder{color:rgba(255,255,255,.55)!important}

/* ===== TEXT ===== */
.text-muted,.small,small,p,label,h1,h2,h3,h4,h5,h6,span,div,a{
 color:inherit;
}

/* ===== COUNTER ===== */
.counter{
 background:linear-gradient(135deg,#ff4fd8,#7c5cff)!important;
 color:#fff!important;
 border:none!important;
}

/* ===== LOADER ===== */
.loader-display{
 background:#020617!important;
}
.loader-ellipsis div{
 background:linear-gradient(135deg,var(--secondary),var(--primary))!important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--secondary));border-radius:20px}

/* ===== FOOTER / BOTTOM NAV ===== */
.footer{
 background:rgba(3,7,18,.95)!important;
 backdrop-filter:blur(18px)!important;
 -webkit-backdrop-filter:blur(18px)!important;
 border-top:1px solid var(--border)!important;
 box-shadow:0 -5px 30px rgba(0,0,0,.4)!important;
}
.appBottomMenu{
 background:rgba(3,7,18,.95)!important;
 backdrop-filter:blur(18px)!important;
 -webkit-backdrop-filter:blur(18px)!important;
 border-top:1px solid var(--border)!important;
}
.footer a:not(.btn),
.appBottomMenu .item a{
 color:rgba(255,255,255,.6)!important;
}
.footer a:not(.btn).active,
.footer a:not(.btn):hover,
.appBottomMenu .item a.active,
.appBottomMenu .item a:hover{
 color:var(--cyan)!important;
}
.appBottomMenu .item .icon-active,
.footer .active .material-icons{
 color:var(--cyan)!important;
}

/* ===== TABLE ===== */
.table,.table td,.table th{color:#e5edff!important}

/* ===== TABS ===== */
.nav-tabs .nav-link.active{
 background:rgba(124,92,255,.2)!important;
 border-color:rgba(124,92,255,.4)!important;
}

/* ===== AVATAR & ICONS ===== */
.avatar,.icon,.btn-40{
 box-shadow:0 0 20px rgba(0,209,255,.18);
}

/* Avatar fallback — tampilkan default jika gambar broken */
img[src*="avatar"]{
 object-fit:cover;
}
img[src*="avatar"][src$=".jpg"]:not([src*="data:"]),
img[src*="avatar"][src$=".png"]:not([src*="data:"]){
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%231e293b'/%3E%3Ccircle cx='100' cy='75' r='35' fill='%2364748b'/%3E%3Ccircle cx='100' cy='75' r='28' fill='%2394a3b8'/%3E%3Cellipse cx='100' cy='175' rx='55' ry='45' fill='%2364748b'/%3E%3C/svg%3E") center/cover no-repeat;
 min-width:30px;
 min-height:30px;
}

/* ===== HOME MENU GRID — RESPONSIVE ===== */
.row.text-center .col-4,
.row.text-center .col-md-2{
 margin-bottom:16px;
}

.row.text-center .col-4 a,
.row.text-center .col-md-2 a{
 text-decoration:none!important;
 color:var(--text)!important;
 display:block;
}

.row.text-center .icon,
.row.text-center .icon-50{
 width:60px;
 height:60px;
 border-radius:18px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 8px;
 background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(123,97,255,.15));
 border:1px solid var(--border);
 transition:all .3s ease;
}

.row.text-center .icon .material-icons,
.row.text-center .icon-50 .material-icons{
 font-size:26px;
 color:var(--cyan);
}

.row.text-center .col-4:hover .icon,
.row.text-center .col-md-2:hover .icon,
.row.text-center .col-4:hover .icon-50,
.row.text-center .col-md-2:hover .icon-50{
 transform:translateY(-4px);
 box-shadow:0 10px 30px rgba(0,229,255,.2);
 background:linear-gradient(135deg,rgba(0,229,255,.2),rgba(123,97,255,.25));
}

.row.text-center p,
.row.text-center small{
 color:rgba(255,255,255,.8)!important;
 font-size:.78rem;
 font-weight:500;
}

/* ===== ABSEN IN/OUT CARDS ===== */
.button-absent{
 padding:16px!important;
 text-align:center;
 transition:all .3s ease;
}
.button-absent:hover{
 transform:translateY(-3px);
 box-shadow:0 10px 30px rgba(0,229,255,.15);
}
.button-absent .material-icons{
 font-size:32px;
}
.button-absent p{
 font-weight:600;
 margin:6px 0 4px;
}
.button-absent small{
 font-size:.75rem;
 color:rgba(255,255,255,.6)!important;
}

/* ===== FLOATING BUTTONS ===== */
.btn-floating{
 position:fixed;
 right:16px;
 bottom:90px;
 display:flex;
 flex-direction:column;
 gap:12px;
 z-index:999;
}
.btn-floating .btn{
 width:54px;
 height:54px;
 border-radius:50%!important;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 8px 25px rgba(0,0,0,.35);
}

/* ===== MODAL ===== */
.modal-content{
 background:rgba(10,14,28,.96)!important;
 border:1px solid var(--border)!important;
 border-radius:24px!important;
}
.modal-header,.modal-footer{
 border-color:var(--border)!important;
}

/* ===== BADGE ===== */
.badge-success{background:rgba(34,197,94,.15)!important;color:#22c55e!important}
.badge-danger{background:rgba(239,68,68,.15)!important;color:#ef4444!important}
.badge-info{background:rgba(59,130,246,.15)!important;color:#3b82f6!important}
.badge-warning{background:rgba(245,158,11,.15)!important;color:#f59e0b!important}

/* ===== RESPONSIVE — MOBILE ===== */
@media(max-width:576px){

 .row.text-center .icon,
 .row.text-center .icon-50{
  width:52px;
  height:52px;
  border-radius:16px;
 }

 .row.text-center .icon .material-icons,
 .row.text-center .icon-50 .material-icons{
  font-size:22px;
 }

 .row.text-center p,
 .row.text-center small{
  font-size:.70rem;
 }

 .card{
  border-radius:18px!important;
 }

 .btn-floating{
  right:12px;
  bottom:85px;
 }

 .btn-floating .btn{
  width:48px;
  height:48px;
 }

 .button-absent{
  padding:12px!important;
 }

 .button-absent .material-icons{
  font-size:26px;
 }
}

/* ===== RESPONSIVE — TABLET ===== */
@media(min-width:577px) and (max-width:991px){

 .row.text-center .col-4{
  flex:0 0 25%;
  max-width:25%;
 }

 .row.text-center .icon,
 .row.text-center .icon-50{
  width:56px;
  height:56px;
 }
}

/* ===== RESPONSIVE — DESKTOP ===== */
@media(min-width:992px){

 .main.has-footer,
 main.container{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
 }

 .row.text-center .col-4{
  flex:0 0 16.666%;
  max-width:16.666%;
 }

 .row.text-center .icon,
 .row.text-center .icon-50{
  width:64px;
  height:64px;
  border-radius:20px;
 }

 .row.text-center .icon .material-icons,
 .row.text-center .icon-50 .material-icons{
  font-size:28px;
 }
}

/* ===== WEBCAM / CAMERA ===== */
#webcam-container,
.webcam-container{
 border-radius:18px;
 overflow:hidden;
}

/* ===== FILE UPLOAD ===== */
.image-upload-wrap{
 border:2px dashed rgba(255,255,255,.12)!important;
 border-radius:18px!important;
 background:rgba(255,255,255,.03)!important;
 background-color:rgba(255,255,255,.03)!important;
}
.image-upload-wrap:hover{
 border-color:rgba(0,229,255,.4)!important;
 background:rgba(0,229,255,.03)!important;
}
/* Override file-upload background dari style.css */
.file-upload,
.file-upload-wrap,
.file-upload-content{
 background:transparent!important;
 background-color:transparent!important;
}

/* ===== DATEPICKER DARK — SOLID BACKGROUND ===== */
.datepicker,
.datepicker-dropdown,
.datepicker-dropdown.datepicker-orient-bottom,
.datepicker-dropdown.datepicker-orient-top{
 background:#111827!important;
 background-color:#111827!important;
 border:1px solid rgba(255,255,255,.12)!important;
 border-radius:12px!important;
 color:#fff!important;
 padding:8px!important;
 box-shadow:0 12px 35px rgba(0,0,0,.6)!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 opacity:1!important;
}
.datepicker table tr td,
.datepicker table tr th{
 color:#ffffff!important;
 padding:6px 8px!important;
 text-align:center!important;
 border-radius:6px!important;
 background:transparent!important;
}
.datepicker table tr th{
 color:rgba(255,255,255,.7)!important;
 font-weight:600!important;
}
.datepicker table tr td:hover{
 background:rgba(124,92,255,.25)!important;
 color:#fff!important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active{
 background:#7c5cff!important;
 color:#fff!important;
 font-weight:700!important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover{
 background:rgba(0,229,255,.3)!important;
 color:#fff!important;
}
.datepicker table tr td.old,
.datepicker table tr td.new{
 color:rgba(255,255,255,.35)!important;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next{
 color:#fff!important;
 font-weight:600!important;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover{
 background:rgba(255,255,255,.08)!important;
 border-radius:6px;
}
.datepicker::before,
.datepicker::after{
 display:none!important;
}

/* ===== LIST ITEM AVATAR/ICON — RAPI ===== */
.postList .card,
.load-data .card,
.load-kunjungan .card{
 margin-bottom:12px!important;
}

/* Avatar/emoji icon di list items */
.postList .avatar,
.postList img.rounded-circle,
.load-data img.rounded-circle,
.card .avatar img,
img.avatar-40,
img.avatar-50,
img[class*="avatar"]{
 width:40px!important;
 height:40px!important;
 min-width:40px!important;
 border-radius:50%!important;
 object-fit:cover!important;
 border:2px solid var(--border)!important;
}

/* Fix icon yang terlalu besar di list */
.col-auto .avatar,
.col-auto img.rounded-circle{
 width:44px!important;
 height:44px!important;
 min-width:44px!important;
}

/* Histori absen list — icon rapi */
.histori-list .col-auto img,
.histori-list .avatar img,
.list-absen .col-auto img,
.list-absen .avatar img{
 width:40px!important;
 height:40px!important;
 border-radius:50%!important;
 object-fit:cover!important;
}