/* ===========================
   HMS STYLE FINAL v2.0
   PART 1 - GLOBAL & DASHBOARD
=========================== */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial,sans-serif;
  background:#f5f6fa;
  color:#333;
}

.layout{
  display:flex;
  min-height:100vh;
}

/* ===========================
   CONTENT
=========================== */

.content{
  flex:1;
  padding:25px;
}
/* ===========================
   PAGE
=========================== */

.page{
  display:none;
}

/* ===========================
   SIDEBAR
=========================== */

.sidebar{

  width:240px;
  background:#000;
  color:white;

  padding:70px 20px 20px;

  position:sticky;
  top:0;

  height:100vh;

  overflow-y:auto;

  transition:.3s;

}

.sidebar.hide{
  width:80px;
  padding:20px 10px;
  overflow:hidden;
}

.sidebar button{
  width:100%;
  border:none;
  background:none;
  color:white;
  padding:12px;
  margin-bottom:6px;
  cursor:pointer;
  border-radius:8px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:.3s;
}

.sidebar button:hover{
  background:rgba(
    255,
    255,
    255,
    .12
  );
}

.sidebar.hide button{
  justify-content:center;
}

.sidebar.hide .menu-text{
  display:none;
}

.sidebar.hide h2{
  display:none;
}

.menu-text{
  white-space:nowrap;
}

/* ===========================
   TOGGLE SIDEBAR
=========================== */

.toggle-sidebar{
  position:fixed;
  top:15px;
  left:15px;
  z-index:9999;

  width:45px;
  height:45px;

  border:none;
  border-radius:10px;

  background:#000;
  color:white;

  cursor:pointer;

  box-shadow:
    0 2px 10px rgba(
      0,
      0,
      0,
      .2
    );
}

/* ===========================
   DASHBOARD HEADER
=========================== */

.dashboard-header{

  display:grid;

  grid-template-columns:
    180px
    1fr
    180px;

  gap:30px;

  align-items:center;

  background:#1b1b1b;

  color:white;

  padding:30px;

  border-radius:18px;

  border:2px solid #d4af37;

  margin-bottom:25px;

}

.dashboard-logo{

  flex-shrink:0;

  display:flex;

  justify-content:center;

}

.dashboard-logo img{
  width:200px;
  height:200px;
  object-fit:contain;
}
.dashboard-info{
  flex:1;
  padding-left:70px;
}

.dashboard-info h3{
  margin:0 0 20px;

  color:#d4af37;

  font-size:30px;
}

.dashboard-info p{
  margin:10px 0;
  font-size:17px;
}

.dashboard-info strong{
  color:white;
}
.dashboard-countdown{

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

}

.countdown-number{

  font-size:60px;

  font-weight:bold;

  color:#d4af37;

  line-height:1;

}

.countdown-label{

  margin-top:10px;

  color:white;

  font-size:18px;

}
.dashboard-header-top{

  display:flex;

  justify-content:
    space-between;

  align-items:center;

}

.btnToggleNotif{

  border:none;

  background:#d4af37;

  color:#111;

  width:42px;

  height:42px;

  border-radius:50%;

  cursor:pointer;

  font-size:18px;

  font-weight:bold;

  transition:.3s;

}

.btnToggleNotif:hover{

  transform:scale(1.05);

}
/* ===========================
   PROGRESS BAR
=========================== */

.progress-bar{
  width:100%;
  max-width:700px;

  height:18px;

  background:#333;

  border:2px solid #d4af37;

  border-radius:20px;

  overflow:hidden;

  margin:15px 0;
}

.progress-fill{
  width:0;
  height:100%;

  background:#d4af37;

  transition:.8s ease;
}

/* ===========================
   DASHBOARD CARD
=========================== */

.dashboard{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px,1fr)
    );

  gap:15px;

  margin-bottom:25px;
}

.card{
  background:white;

  border-radius:15px;

  padding:20px;

  box-shadow:
    0 2px 10px rgba(
      0,
      0,
      0,
      .08
    );

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.card:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 8px 20px rgba(
      0,
      0,
      0,
      .12
    );
}

.card .label{
  color:#666;
  font-size:14px;
}

.card .value{
  margin-top:10px;

  font-size:28px;

  font-weight:bold;
}

/* ===========================
   CARD SALDO
=========================== */

.saldo{
  background:#000;

  color:white;

  border-left:
    5px solid #d4af37;
}

.saldo .label{
  color:#d4af37;
}

.saldo .value{
  color:white;
}

/* ===========================
   CHART
=========================== */

.chart-card{

  margin-top:0;

  position:relative;

  min-height:420px;

}

.chart-card h3{

  margin-top:0;

  margin-bottom:10px;

  color:#2c3e50;

}

.chart-desc{

  color:#666;

  font-size:13px;

  margin-bottom:20px;

}

.chart-wrapper{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  height:280px;
}
#dashboardChart{
  max-width:100% !important;
}

#dashboardChart{

  width:100% !important;

  height:100% !important;

}
/* ===========================
   HMS STYLE FINAL v2.0
   PART 2 - TABLE & FORM
=========================== */

/* ===========================
   BUTTON
=========================== */

.btnTambah{
  background:#000;
  color:white;

  border:none;

  padding:10px 15px;

  border-radius:8px;

  cursor:pointer;

  transition:.3s;
}

.btnTambah:hover{
  background:#222;
}

/* ===========================
   TABLE
=========================== */

table,
.tabelData{
  width:100%;

  border-collapse:collapse;

  background:white;

  border-radius:12px;

  overflow:hidden;

  box-shadow:
    0 2px 10px rgba(
      0,
      0,
      0,
      .05
    );
}

th{
  background:#000;

  color:white;

  padding:14px 12px;

  text-align:left;

  font-size:14px;
}

td{
  padding:12px;

  border-bottom:
    1px solid #eee;

  font-size:14px;
}

tbody tr:hover{
  background:#fafafa;
}

.nominal{
  text-align:right;
}

.total-row{
  background:#f7f7f7;
  font-weight:bold;
}

/* ===========================
   SEARCH BOX
=========================== */

#searchPemasukan,
#searchPengeluaran,
#searchLaporanPenyetor,
.laporan-toolbar input{

  width:260px;

  padding:10px 15px;

  border:
    1px solid #ccc;

  border-radius:8px;

  outline:none;

  transition:.3s;
}

#searchPemasukan:focus,
#searchPengeluaran:focus,
#searchLaporanPenyetor:focus,
.laporan-toolbar input:focus{

  border-color:#d4af37;

  box-shadow:
    0 0 0 3px rgba(
      212,
      175,
      55,
      .15
    );
}

/* ===========================
   INPUT & SELECT
=========================== */

input,
select,
textarea{

  width:100%;

  padding:10px 12px;

  border:
    1px solid #ccc;

  border-radius:8px;

  outline:none;

  transition:.3s;

  font-size:14px;
}

input:focus,
select:focus,
textarea:focus{

  border-color:#d4af37;

  box-shadow:
    0 0 0 3px rgba(
      212,
      175,
      55,
      .15
    );
}

textarea{
  resize:vertical;
  min-height:80px;
}

/* ===========================
   MODAL
=========================== */

.modal{
  display:none;

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    rgba(
      0,
      0,
      0,
      .5
    );

  z-index:99999;

  overflow:auto;
}

.modal-content{

  background:white;

  width:90%;

  max-width:450px;

  margin:60px auto;

  padding:25px;

  border-radius:15px;

  box-shadow:
    0 8px 25px rgba(
      0,
      0,
      0,
      .15
    );
}

.modal-content h3{
  margin-top:0;
  color:#000;
}

.modal-content button{

  padding:10px 15px;

  border:none;

  border-radius:8px;

  cursor:pointer;

  margin-right:10px;

  transition:.3s;
}

.modal-content button:first-of-type{

  background:#000;

  color:white;
}

.modal-content button:first-of-type:hover{

  background:#222;
}

.modal-content button:last-of-type{

  background:#ddd;
}

.modal-content button:last-of-type:hover{

  background:#ccc;
}

/* ===========================
   LAPORAN TOOLBAR
=========================== */

.laporan-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:15px;

  flex-wrap:wrap;

  margin:
    30px 0 15px;
}

.laporan-toolbar{

  display:flex;

  gap:10px;

  flex-wrap:wrap;
}

/* ===========================
   PAGINATION
=========================== */

.pagination-container,
#paginationAcara,
#paginationPemasukan,
#paginationPengeluaran,
#paginationLaporan{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:8px;

  flex-wrap:wrap;

  margin-top:20px;
}

.pagination-container button,
#paginationAcara button,
#paginationPemasukan button,
#paginationPengeluaran button,
#paginationLaporan button{

  padding:8px 14px;

  border:none;

  border-radius:8px;

  cursor:pointer;

  background:#eee;

  transition:.3s;
}

.pagination-container button:hover,
#paginationAcara button:hover,
#paginationPemasukan button:hover,
#paginationPengeluaran button:hover,
#paginationLaporan button:hover{

  background:#ddd;
}

.page-active{

  background:#000 !important;

  color:white;
}

.pagination-container button:disabled,
#paginationAcara button:disabled,
#paginationPemasukan button:disabled,
#paginationPengeluaran button:disabled,
#paginationLaporan button:disabled{

  opacity:.5;

  cursor:not-allowed;
}

/* ===========================
   HMS STYLE FINAL v2.0
   PART 3 - RESPONSIVE & FINISHING
=========================== */

/* ===========================
   HEADING
=========================== */

h2{
  margin-top:0;
  margin-bottom:20px;
  color:#2c3e50;
}

h3{
  color:#2c3e50;
  margin-bottom:15px;
}

/* ===========================
   SPACING
=========================== */

br{
  line-height:1.5;
}

/* ===========================
   STATUS BADGE (Opsional)
=========================== */

.badge-aktif{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:6px 12px;

  border-radius:20px;

  background:#27ae60;

  color:white;

  font-size:12px;

  font-weight:bold;

}

.badge-aktif::before{

  content:"🟢";

}

.badge-selesai{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:6px 12px;

  border-radius:20px;

  background:#7f8c8d;

  color:white;

  font-size:12px;

  font-weight:bold;

}

.badge-selesai::before{

  content:"⚫";

}
/* ===========================
   SCROLL TABLE MOBILE
=========================== */

.table-wrapper{
  overflow-x:auto;
}

/* ===========================
   ACTION BUTTON TABLE
=========================== */

td button{
  padding:6px 10px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  margin:2px;
  transition:.3s;
}

td button:hover{
  opacity:.85;
}

/* ===========================
   LOADING STATE
=========================== */

.loading{
  text-align:center;
  color:#777;
  padding:20px;
}

/* ===========================
   EMPTY STATE
=========================== */

.empty-state{
  text-align:center;
  color:#999;
  padding:25px;
}

/* ===========================
   RESPONSIVE TABLE
=========================== */

@media (max-width:768px){

  .dashboard-header{

    display:grid;

    grid-template-columns:1fr;

    text-align:center;

  }

  .dashboard-logo img{
    width:90px;
    height:90px;
  }

  .dashboard-info h3{
    font-size:24px;
  }

  .dashboard-info p{
    font-size:15px;
  }

  .dashboard{
    grid-template-columns:1fr;
  }

  .laporan-header{
    flex-direction:column;
    align-items:stretch;
  }

  .laporan-toolbar{
    flex-direction:column;
  }

  .laporan-toolbar input,
  #searchPemasukan,
  #searchPengeluaran,
  #searchLaporanPenyetor{
    width:100%;
  }

  table:not(#tblPemasukan){
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }

  .modal-content{
    width:95%;
    margin:30px auto;
  }

  .progress-bar{
    max-width:100%;
  }

  #dashboardChart{
    height:250px !important;
  }

}

/* ===========================
   EXTRA SMALL DEVICE
=========================== */

@media (max-width:480px){

  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:999;
  }

  .card .value{
    font-size:24px;
  }

  .dashboard-info h3{
    font-size:20px;
  }

  .btnTambah{
    width:100%;
    margin-bottom:10px;
  }

}

/* ===========================
   SMOOTH SCROLL
=========================== */

html{
  scroll-behavior:smooth;
}

/* ===========================
   HMS PRODUCTION READY
=========================== */
.card .label{

  display:flex;

  align-items:center;

  gap:10px;

}
.card-icon{
  width:38px;
  height:38px;

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

  border-radius:8px;

  background:#111;

  color:#d4af37;

  font-size:15px;
}
.saldo{
  position:relative;
  overflow:hidden;
}

.saldo::after{
  content:"";

  position:absolute;

  top:-30px;
  right:-30px;

  width:80px;
  height:80px;

  border-radius:50%;

  background:rgba(212,175,55,.15);
}
.card{
  transition:.3s;
}

.card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 10px 25px rgba(0,0,0,.12);
}
.subtitle{
  margin-top:-8px;

  color:#666;

  font-size:14px;
}
.acara-mobile-list{
  display:none;
}

@media(max-width:768px){

  #tblAcara{
    display:none !important;
  }

  #listAcaraMobile{
    display:block !important;
  }

  .acara-mobile-list{
    display:block !important;
  }

  .acara-card{

    background:white;

    border-radius:15px;

    padding:18px;

    margin-bottom:15px;

    box-shadow:
      0 2px 10px
      rgba(
        0,
        0,
        0,
        .08
      );

  }

  .acara-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

  }

  .acara-card-header h3{

    margin:0;

    font-size:18px;

  }

  .acara-card-body p{

    margin:8px 0;

  }

  .acara-card-footer{

    margin-top:15px;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

  }

}
/* ===========================
   ACARA PREMIUM
=========================== */

#acaraPage h2{

  display:flex;

  align-items:center;

  gap:12px;

  padding-left:15px;

  border-left:
    5px solid #d4af37;

}

#acaraPage h2::after{

  content:"";

  flex:1;

  height:2px;

  background:
    linear-gradient(
      to right,
      rgba(
        212,
        175,
        55,
        .6
      ),
      transparent
    );

}

#acaraPage .btnTambah{

  box-shadow:
    0 4px 12px rgba(
      212,
      175,
      55,
      .25
    );

}

#acaraPage .btnTambah:hover{

  transform:
    translateY(-2px);

}
.pemasukan-actions{

  display:flex;

  flex-wrap:wrap;

  gap:6px;

  align-items:center;

}

.pemasukan-actions button{

  width:40px;

  height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:16px;

  border:none;

  border-radius:10px;

  cursor:pointer;

  transition:.25s;

}

.pemasukan-actions button:hover{

  transform:translateY(-2px);

}
/* ===========================
   PEMASUKAN PREMIUM
=========================== */

#pemasukanPage h2{

  display:flex;

  align-items:center;

  gap:12px;

  padding-left:15px;

  border-left:
    5px solid #d4af37;

}

#pemasukanPage h2::after{

  content:"";

  flex:1;

  height:2px;

  background:
    linear-gradient(
      to right,
      rgba(
        212,
        175,
        55,
        .6
      ),
      transparent
    );

}
#pemasukanPage .card{

  transition:.3s;

}

#pemasukanPage .card:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 10px 25px
    rgba(
      0,
      0,
      0,
      .12
    );

}
#pemasukanPage .btnTambah{

  box-shadow:
    0 4px 12px
    rgba(
      212,
      175,
      55,
      .25
    );

}

#pemasukanPage .btnTambah:hover{

  transform:
    translateY(-2px);

}
#pemasukanPage .laporan-toolbar select,

#pemasukanPage .laporan-toolbar input{

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      .4
    );

}
#tblPemasukan tbody tr:hover{

  background:
    rgba(
      212,
      175,
      55,
      .06
    );

}
#mobilePemasukanList{

  display:none;

}

.mobile-pemasukan-card{

  display:none;

}

@media(max-width:900px){

  #tblPemasukan{

    display:none !important;

  }

  #mobilePemasukanList{

    display:block !important;

  }

  .mobile-pemasukan-card{

    display:block !important;

    background:#fff;

    border-radius:16px;

    padding:15px;

    margin-bottom:15px;

    box-shadow:
      0 4px 15px
      rgba(
        0,
        0,
        0,
        .08
      );

    border-top:
      4px solid
      #d4af37;

  }

}

@media(max-width:768px){

  #tblPemasukan{
    display:none !important;
  }

  #mobilePemasukanList{
    display:block;
  }

  .mobile-pemasukan-card{

    display:block;

    background:white;

    border-radius:18px;

    padding:16px;

    margin-bottom:16px;

    box-shadow:
      0 4px 15px
      rgba(0,0,0,.08);

    border-top:
      4px solid #d4af37;

  }

  .mobile-header{

    font-weight:bold;

    color:#d4af37;

    margin-bottom:15px;

    font-size:16px;

  }

  .mobile-pemasukan-card div{

    margin-bottom:8px;

  }

  .mobile-pemasukan-card strong{

    color:#333;

  }

  .mobile-pemasukan-card .pemasukan-actions{

    margin-top:15px;

    justify-content:center;

  }

}
.mobile-pemasukan-card{

  transition:
    .2s ease;

}

.mobile-pemasukan-card:active{

  transform:
    scale(.98);

}
/* ===========================
   STATUS BADGE PENGELUARAN
=========================== */

.status-badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  min-height:36px;

  padding:6px 14px;

  border-radius:999px;

  font-weight:700;

  font-size:13px;

}

.status-badge.aktif{

  background:#2ecc71;

  color:white;

}

.status-badge.nonaktif{

  background:#444;

  color:white;

}


/* ===========================
   WRAPPER TABEL
=========================== */

.pengeluaran-table-wrapper{

  overflow-x:auto;

  border-radius:16px;

}


/* ===========================
   TABEL PENGELUARAN
=========================== */

#tblPengeluaran{

  width:100%;

  border-collapse:collapse;

  background:white;

  border-radius:16px;

  overflow:hidden;

  box-shadow:
    0 4px 14px
    rgba(
      0,
      0,
      0,
      0.08
    );

}

#tblPengeluaran th{

  background:#000;

  color:white;

  padding:18px 12px;

  font-weight:700;

  text-align:center;

  white-space:nowrap;

}

#tblPengeluaran td{

  padding:18px 12px;

  text-align:center;

  vertical-align:middle;

  white-space:nowrap;

  border-bottom:
    1px solid #eee;

}

#tblPengeluaran tbody tr{

  background:white;

  transition:.2s;

}

#tblPengeluaran tbody tr:hover{

  background:
    rgba(
      212,
      175,
      55,
      0.05
    );

}


/* ===========================
   TOMBOL AKSI
=========================== */

.pengeluaran-actions{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:8px;

  flex-wrap:wrap;

}

.pengeluaran-actions button{

  border:none;

  border-radius:12px;

  padding:8px 14px;

  font-size:13px;

  font-weight:600;

  cursor:pointer;

  background:#f3f3f3;

  margin:0;

  transition:.2s;

}

.pengeluaran-actions button:hover{

  transform:
    translateY(-2px);

}


/* ===========================
   TOMBOL TAMBAH
=========================== */

#pengeluaranPage .btnTambah{

  background:#000;

  color:white;

  border:none;

  border-radius:12px;

  padding:10px 18px;

  font-weight:700;

  cursor:pointer;

  transition:.2s;

}

#pengeluaranPage .btnTambah:hover{

  transform:
    translateY(-2px);

}


/* ===========================
   FILTER PENGELUARAN
=========================== */

#pengeluaranPage select,

#pengeluaranPage input[type="text"]{

  width:100%;

  padding:14px 16px;

  border:
    1px solid #d4af37;

  border-radius:12px;

  background:white;

  margin-bottom:12px;

  box-sizing:border-box;

}

#pengeluaranPage select:focus,

#pengeluaranPage input:focus{

  outline:none;

  border-color:#d4af37;

  box-shadow:
    0 0 0 3px
    rgba(
      212,
      175,
      55,
      0.15
    );

}


/* ===========================
   RESPONSIVE TABLET
=========================== */

@media(max-width:900px){

  #tblPengeluaran{

    font-size:14px;

  }

  .pengeluaran-actions{

    gap:6px;

  }

  .pengeluaran-actions button{

    padding:8px 12px;

  }

}
#mobilePengeluaranList{

  display:none;

}

.mobile-pengeluaran-card{

  display:none;

}

@media(max-width:768px){

  #tblPengeluaran{

    display:none !important;

  }

  #mobilePengeluaranList{

    display:block;

  }

  .mobile-pengeluaran-card{

    display:block;

    position:relative;

    overflow:hidden;

    background:white;

    border-radius:18px;

    padding:16px;

    margin-bottom:16px;

    box-shadow:
      0 4px 15px
      rgba(0,0,0,.08);

    border-top:
      4px solid #d4af37;

  }

  .mobile-pengeluaran-card::after{

    content:"";

    position:absolute;

    top:-35px;

    right:-35px;

    width:90px;

    height:90px;

    border-radius:50%;

    background:
      rgba(
        212,
        175,
        55,
        .15
      );

  }

  .mobile-pengeluaran-card .mobile-header{

    font-weight:bold;

    color:#d4af37;

    margin-bottom:15px;

    font-size:16px;

  }

  .mobile-pengeluaran-card div{

    margin-bottom:8px;

  }

  .mobile-pengeluaran-card .pengeluaran-actions{

    margin-top:15px;

    justify-content:center;

  }

}
/* ===========================
   PENGELUARAN PREMIUM
=========================== */

#pengeluaranPage h2{

  display:flex;

  align-items:center;

  gap:12px;

  padding-left:15px;

  border-left:
    5px solid #d4af37;

}

#pengeluaranPage h2::after{

  content:"";

  flex:1;

  height:2px;

  background:
    linear-gradient(
      to right,
      rgba(
        212,
        175,
        55,
        .6
      ),
      transparent
    );

}
/* ===========================
   DASHBOARD PREMIUM
=========================== */

#dashboardPage h2{

  display:flex;

  align-items:center;

  gap:12px;

  padding-left:15px;

  border-left:
    5px solid #d4af37;

}

#dashboardPage h2::after{

  content:"";

  flex:1;

  height:2px;

  background:
    linear-gradient(
      to right,
      rgba(
        212,
        175,
        55,
        .6
      ),
      transparent
    );

}
/* ===========================
   LAPORAN PREMIUM HEADER
=========================== */

.laporan-premium-header{

  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:25px;

}

.laporan-logo img{

  width:120px;

  height:120px;

  object-fit:contain;

  border-radius:50%;

  padding:6px;

}

.laporan-title{

  flex:1;

}

#laporanPage h2{

  display:flex;

  align-items:center;

  gap:12px;

  padding-left:15px;

  border-left:
    5px solid #d4af37;

}

#laporanPage h2::after{

  content:"";

  flex:1;

  height:2px;

  background:
    linear-gradient(

      to right,

      rgba(
        212,
        175,
        55,
        .8
      ),

      transparent

    );

}

#laporanPage .subtitle{

  color:#777;

  font-size:14px;

}
@media(max-width:768px){

  .laporan-premium-header{

    flex-direction:column;

    align-items:flex-start;

  }

}
.laporan-toolbar{

  position:relative;

  display:flex;

  gap:12px;

  align-items:end;

  flex-wrap:wrap;

  margin-bottom:20px;

  padding-top:18px;

}
.laporan-toolbar::before{

  content:"";

  position:absolute;

  top:0;

  left:0;

  width:100%;

  height:2px;

  background:
    linear-gradient(

      90deg,

      transparent,

      #d4af37,

      transparent

    );

}

.laporan-toolbar input{

  flex:1;

  min-width:220px;

}

.filter-group{

  display:flex;

  flex-direction:column;

}

.filter-group label{

  margin-bottom:6px;

  font-size:13px;

  color:#666;

}

.btnRefresh{

  background:#111;

  color:white;

}

.btnExportExcel{

  background:#111;

  color:white;

}

.btnRefresh,

.btnExportExcel,

.btnExportPdf{

  border:none;

  padding:12px 18px;

  border-radius:12px;

  cursor:pointer;

  font-weight:600;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  height:40px;

}
#tblTopPenyetor{

  display:table !important;

  width:100% !important;

  table-layout:fixed;

}

#tblTopPenyetor th,
#tblTopPenyetor td{

  white-space:normal !important;

}
@media(max-width:768px){

  .laporan-toolbar{

    flex-direction:column;

    align-items:stretch;

  }

}
.btnExportPdf{

  background:#111;

  color:white;

}
.pengaturan-card{

  background:#fff;

  border-radius:20px;

  padding:28px;

  margin-bottom:24px;

  border:1px solid rgba(212,175,55,.15);

  box-shadow:
    0 4px 15px rgba(0,0,0,.08);

  transition:.3s;

  position:relative;

  overflow:hidden;

}

.pengaturan-card::after{

  content:"";

  position:absolute;

  top:-40px;

  right:-40px;

  width:120px;

  height:120px;

  border-radius:50%;

  background:
    rgba(
      212,
      175,
      55,
      .08
    );

}

.pengaturan-card:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px
    rgba(
      0,
      0,
      0,
      .12
    );

}

.pengaturan-card h3{

  margin-top:0;

  margin-bottom:20px;

  color:#1f2d3d;

  font-size:24px;

  font-weight:700;

  display:flex;

  align-items:center;

  gap:10px;

}

.pengaturan-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

  gap:20px;

}

.full-width{

  grid-column:1 / -1;

}

.logo-preview{

  width:120px;

  height:120px;

  border:2px dashed #ccc;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:20px;

}

.pengaturan-actions{

  margin-top:30px;

}

.btnSimpanPengaturan{

  background:
    linear-gradient(
      135deg,
      #D4AF37,
      #F4D03F
    );

  color:white;

  border:none;

  padding:14px 26px;

  border-radius:12px;

  font-weight:700;

  cursor:pointer;

  transition:.3s;

}

.btnSimpanPengaturan:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 8px 20px
    rgba(
      212,
      175,
      55,
      .35
    );

}

.btnSecondary{

  background:#111;

  color:white;

  border:none;

  padding:10px 20px;

  border-radius:10px;

  cursor:pointer;

}

#pengaturanPage textarea{

  min-height:100px;

  resize:vertical;

}

@media(max-width:768px){

  .pengaturan-card{

    padding:18px;

  }

}
.btnDanger{

  background:#dc3545;
  color:white;

}

.btnSuccess{

  background:#198754;
  color:white;

}
.pageHeader{

  margin-bottom:24px;

}

.pageHeader h2{

  margin:0;

  color:#111;

  font-size:28px;

  font-weight:700;

}

.pageHeader .subtitle{

  margin-top:6px;

  color:#666;

}

.goldLine{

  width:90px;

  height:4px;

  margin-top:12px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #D4AF37,
      #F4D03F
    );

}
/* ===========================
   PENGATURAN PREMIUM
=========================== */

#pengaturanPage h2{

  display:flex;

  align-items:center;

  gap:12px;

  padding-left:15px;

  border-left:5px solid #d4af37;

}

#pengaturanPage h2::after{

  content:"";

  flex:1;

  height:2px;

  background:
    linear-gradient(
      to right,
      rgba(212,175,55,.6),
      transparent
    );

}
/* ===================================
   FORM PREMIUM HMS
=================================== */

.form-group{

  margin-bottom:20px;

}

.form-group label{

  display:block;

  margin-bottom:8px;

  font-size:14px;

  font-weight:600;

  color:#2c3e50;

}

.form-group input,
.form-group textarea,
.form-group select{

  width:100%;

  padding:14px 16px;

  border:1px solid #dcdcdc;

  border-radius:12px;

  background:#fff;

  font-size:14px;

  font-family:inherit;

  color:#333;

  box-sizing:border-box;

  transition:all .25s ease;

}

.form-group textarea{

  min-height:120px;

  resize:vertical;

}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover{

  border-color:#d4af37;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

  outline:none;

  border-color:#d4af37;

  box-shadow:
    0 0 0 4px
    rgba(
      212,
      175,
      55,
      .15
    );

}

.form-group input::placeholder,
.form-group textarea::placeholder{

  color:#a0a0a0;

}

.form-group select{

  cursor:pointer;

}

/* ===================================
   READONLY FIELD
=================================== */

input[readonly]{

  background:#f8f9fa;

  color:#666;

  border-color:#e5e5e5;

  cursor:not-allowed;

}

/* ===================================
   PENGATURAN GRID
=================================== */

.pengaturan-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        250px,
        1fr
      )
    );

  gap:20px;

}

.full-width{

  grid-column:1 / -1;

}

/* ===================================
   CARD TITLE
=================================== */

.pengaturan-card h3{

  margin-top:0;

  margin-bottom:24px;

  color:#1f2d3d;

  font-size:20px;

  font-weight:700;

}

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

@media(max-width:768px){

  .form-group input,
  .form-group textarea,
  .form-group select{

    font-size:16px;

  }

}
/* ===================================
   LOGO PREMIUM HMS
=================================== */

.logo-upload-card{

  min-height:260px;

  border:2px dashed
    rgba(
      212,
      175,
      55,
      .6
    );

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fafafa
    );

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  padding:24px;

  margin-bottom:20px;

  transition:.3s;

}

.logo-upload-card:hover{

  border-color:#d4af37;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fdf8ea
    );

}

.logo-icon{

  font-size:52px;

  margin-bottom:12px;

}

.logo-text{

  font-size:18px;

  font-weight:700;

  color:#2c3e50;

}

.logo-subtext{

  margin-top:6px;

  color:#888;

  font-size:13px;

}

#previewLogo{

  max-width:220px;

  max-height:220px;

  border-radius:18px;

  object-fit:contain;

  box-shadow:
    0 8px 25px
    rgba(
      0,
      0,
      0,
      .15
    );

}

.btnLogoUpload{

  background:
    linear-gradient(
      135deg,
      #d4af37,
      #f4d03f
    );

  color:#fff;

  border:none;

  padding:12px 22px;

  border-radius:12px;

  font-weight:700;

  cursor:pointer;

  transition:.25s;

}

.btnLogoUpload:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 6px 18px
    rgba(
      212,
      175,
      55,
      .35
    );

}
/* ===========================
   ADMIN SECTION
=========================== */

.admin-section-title{

  margin:10px 0 18px;

  color:#1f2d3d;

  font-size:16px;

  font-weight:700;

  display:flex;

  align-items:center;

  gap:8px;

}
/* ===========================
   TABLE ADMIN PREMIUM
=========================== */

#tblAdmin{

  width:100%;

  border-collapse:collapse;

  overflow:hidden;

  border-radius:16px;

  background:#fff;

}

#tblAdmin thead{

  background:
    linear-gradient(
      135deg,
      #1f2d3d,
      #2c3e50
    );

}

#tblAdmin thead th{

  color:#fff;

  padding:14px;

  text-align:left;

  font-weight:600;

}

#tblAdmin tbody td{

  padding:14px;

  border-bottom:
    1px solid #eee;

}

#tblAdmin tbody tr{

  transition:.25s;

}

#tblAdmin tbody tr:hover{

  background:#FFFDF6;

}
.badgeAktif{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:6px 14px;

  border-radius:999px;

  background:#DCFCE7;

  color:#16A34A;

  font-size:12px;

  font-weight:700;

}

.badgeNonaktif{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:6px 14px;

  border-radius:999px;

  background:#FEE2E2;

  color:#DC2626;

  font-size:12px;

  font-weight:700;

}
.roleBadge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:6px 14px;

  border-radius:999px;

  font-size:12px;

  font-weight:700;

}

.roleSuperAdmin{

  background:#FFF4D6;

  color:#C28A00;

}

.roleAdmin{

  background:#E8F1FF;

  color:#2563EB;

}

.roleUmum{

  background:#F1F5F9;

  color:#64748B;

}
/* ===========================
   ADMIN STATS
=========================== */

.adminStats{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        220px,
        1fr
      )
    );

  gap:20px;

  margin-bottom:35px;

}

.adminStatCard{

  background:#fff;

  border:1px solid
    rgba(212,175,55,.15);

  border-radius:20px;

  padding:24px;

  position:relative;

  overflow:hidden;

  transition:.3s;

  box-shadow:
    0 4px 15px
    rgba(0,0,0,.05);

}

.adminStatCard:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.08);

}

.adminStatCard::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      #D4AF37,
      #F4D76A
    );

}

.adminStatCard h2{

  margin:0;

  font-size:42px;

  font-weight:800;

  color:#D4AF37;

  line-height:1;

}

.adminStatCard span{

  display:block;

  margin-top:10px;

  font-size:14px;

  color:#666;

  font-weight:600;

}

.adminStatCard .miniLine{

  width:70%;

  height:2px;

  margin:12px auto;

  background:
    linear-gradient(
      90deg,
      #D4AF37,
      transparent
    );

}
.btnEditAdmin{

  background:#111827;

  color:white;

  border:none;

  border-radius:10px;

  padding:8px 14px;

  cursor:pointer;

  font-weight:600;

}

.btnEditAdmin:hover{

  transform:translateY(-2px);

}

.btnAktifkan{

  background:#16A34A;

  color:white;

  border:none;

  border-radius:10px;

  padding:8px 14px;

  cursor:pointer;

  font-weight:600;

}

.btnNonaktifkan{

  background:#DC2626;

  color:white;

  border:none;

  border-radius:10px;

  padding:8px 14px;

  cursor:pointer;

  font-weight:600;

}
/* ===========================
   MODAL EDIT ADMIN
=========================== */

#modalBackdrop{

  position:fixed;

  inset:0;

  background:
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(4px);

  z-index:9998;

  display:none;

}

#editAdminModal{

  border-radius:24px !important;

  border:1px solid
    rgba(212,175,55,.15);

  overflow:hidden;

  animation:
    modalShow .25s ease;

}

#editAdminModal::before{

  content:"";

  position:absolute;

  top:-60px;
  right:-60px;

  width:140px;
  height:140px;

  background:
    rgba(212,175,55,.08);

  border-radius:50%;

}

@keyframes modalShow{

  from{

    opacity:0;

    transform:
      translate(-50%,-45%)
      scale(.95);

  }

  to{

    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1);

  }

}
/* ===========================
   PROPOSAL STATS
=========================== */

.proposalStats{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        220px,
        1fr
      )
    );

  gap:20px;

  margin-bottom:25px;

}

.proposalCard{

  background:#fff;

  border-radius:22px;

  padding:24px;

  position:relative;

  overflow:hidden;

  border:1px solid
    rgba(212,175,55,.15);

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.05);

}

.proposalCard::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      #D4AF37,
      #F4D76A
    );

}

.proposalNumber{

  font-size:42px;

  font-weight:800;

  color:#D4AF37;

  margin-bottom:8px;

}

.proposalLabel{

  font-size:15px;

  font-weight:600;

  color:#555;

}
/* ===========================
   TOAST HMS
=========================== */

#toastContainer{

  position:fixed;

  top:20px;

  right:20px;

  z-index:99999;

  display:flex;

  flex-direction:column;

  gap:10px;

}

.toast{

  min-width:280px;

  max-width:350px;

  padding:14px 18px;

  border-radius:12px;

  background:#fff;

  color:#333;

  font-weight:600;

  box-shadow:
    0 8px 25px
    rgba(
      0,
      0,
      0,
      .15
    );

  border-left:
    5px solid #D4AF37;

  animation:
    toastShow .3s ease;

}

.toast.success{

  border-left-color:
    #16A34A;

}

.toast.error{

  border-left-color:
    #DC2626;

}

.toast.warning{

  border-left-color:
    #F59E0B;

}

@keyframes toastShow{

  from{

    opacity:0;

    transform:
      translateX(40px);

  }

  to{

    opacity:1;

    transform:
      translateX(0);

  }

}
/* ==========================
   LOADING OVERLAY HMS
========================== */

#loadingOverlay{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  display:none;

  justify-content:center;
  align-items:center;

  background:
    rgba(
      255,
      255,
      255,
      .85
    );

  backdrop-filter:
    blur(2px);

  z-index:999998;

}

.loading-box{

  text-align:center;

}

.loading-spinner{

  width:60px;
  height:60px;

  border:5px solid #ddd;

  border-top:
    5px solid #D4AF37;

  border-radius:50%;

  animation:
    hmsSpin 1s linear infinite;

}

.loading-text{

  margin-top:12px;

  font-weight:600;

  color:#444;

}

@keyframes hmsSpin{

  from{

    transform:
      rotate(0deg);

  }

  to{

    transform:
      rotate(360deg);

  }

}
.dashboard-notif{

  background:#fff;

  border-radius:16px;

  padding:18px;

  margin:20px 0;

  box-shadow:
    0 2px 12px
    rgba(0,0,0,.08);

}

.notif-title{

  font-size:16px;

  font-weight:bold;

  margin-bottom:12px;

  color:#d4af37;

}

.dashboard-notif div{

  padding:8px 0;

  border-bottom:
    1px solid #eee;

}

.dashboard-notif div:last-child{

  border-bottom:none;

}
/* ===========================
   MOBILE APK FIX
=========================== */

@media(max-width:768px){

  .sidebar{

    width:200px !important;

    position:fixed;

    top:0;

    left:0;

    height:100vh;

    transform:translateX(-100%);

    z-index:999;

  }

  .sidebar.show{

    transform:translateX(0);

  }

  .dashboard-header{

    grid-template-columns:1fr !important;

    text-align:center;

    gap:20px;

  }

  .dashboard-logo{

    display:flex;

    justify-content:center;

  }

  .dashboard-info{

    padding-left:0 !important;

    text-align:center;

  }

  .dashboard-countdown{

    margin:auto;

  }

}
@media(max-width:768px){

  #laporanPage .tabelData{

    display:block;

    overflow-x:auto;

    max-width:100%;

  }

}
/* ===========================
   LAPORAN MOBILE CARD
=========================== */

#mobileLaporanList{

  display:none;

}

.mobile-laporan-card{

  display:none;

}

@media(max-width:768px){

 .tabel-laporan-penyetor{

  display:none !important;

}
  #mobileLaporanList{

    display:block !important;

  }

  .mobile-laporan-card{

    display:block !important;

    background:#fff;

    border-radius:18px;

    padding:16px;

    margin-bottom:15px;

    box-shadow:
      0 4px 15px
      rgba(0,0,0,.08);

    border-top:
      4px solid #d4af37;

  }

  .mobile-laporan-header{

    font-size:16px;

    font-weight:bold;

    color:#d4af37;

    margin-bottom:12px;

  }

  .mobile-laporan-card div{

    margin-bottom:8px;

  }

  .mobile-total{

    margin-top:12px;

    font-size:18px;

    font-weight:bold;

    color:#111;

  }

}
@media screen and (max-width:768px){

  table#tblAcara{
    display:none !important;
  }

  #listAcaraMobile{
    display:block !important;
  }

}
/* ===========================
   PENGATURAN MOBILE
=========================== */

@media(max-width:768px){

  .pengaturan-grid{

    grid-template-columns:1fr !important;

  }

  .pengaturan-card{

    padding:15px !important;

    overflow:hidden;

  }

  .logo-upload-card{

    width:100% !important;

    max-width:100% !important;

  }

  #previewLogo{

    max-width:100% !important;

    height:auto !important;

  }

  .proposalStats,
  .adminStats{

    grid-template-columns:1fr !important;

  }

  .pengaturan-actions{

    display:flex;

    flex-direction:column;

    gap:10px;

  }

  .pengaturan-actions button{

    width:100%;

  }

}
.admin-mobile-list{
  display:none;
}

@media(max-width:768px){

  #tblAdmin{
    display:none;
  }

  .admin-mobile-list{
    display:block;
  }

  .admin-card{

    background:#fff;

    border-radius:15px;

    padding:15px;

    margin-bottom:15px;

    box-shadow:
      0 2px 10px rgba(0,0,0,.08);

  }

  .admin-card h3{

    margin:0 0 10px 0;

    color:#1f2d3d;

  }

  .admin-card p{

    margin:6px 0;

  }

  .admin-card .aksi{

    margin-top:12px;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

  }

}
.admin-mobile-list{
  display:none;
}

@media(max-width:768px){

  #tblAdmin{
    display:none;
  }

  .admin-mobile-list{
    display:block;
  }

  .admin-card{

    background:#fff;

    border-radius:16px;

    padding:18px;

    margin-bottom:15px;

    box-shadow:
      0 2px 10px rgba(
        0,
        0,
        0,
        .08
      );

  }

  .admin-card h3{

    margin:0 0 12px 0;

    color:#1f2d3d;

  }

  .admin-card p{

    margin:6px 0;

    word-break:break-word;

  }

  .admin-card .aksi{

    margin-top:12px;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

  }

}

@media(max-width:768px){

  *{
    max-width:100%;
  }

  img{
    max-width:100% !important;
    height:auto !important;
  }

  input,
  textarea,
  select{

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

  }

  .pengaturan-card,
  .pengaturan-grid,
  .form-group,
  .admin-card,
  .logo-upload-card{

    min-width:0 !important;
    max-width:100% !important;

  }

}
/* ===========================
   ADMIN MOBILE
=========================== */

.admin-mobile-list{
  display:none;
}

@media(max-width:768px){

  #tblAdmin{
    display:none !important;
  }

  .table-responsive{
    display:none !important;
  }

  .admin-mobile-list{
    display:block !important;
  }

}