/* sw-custom.css - versi diperbaiki */
/* Perbaikan: jangan override perilaku default AdminLTE yang penting. */
/* Fokus: hapus overflow-x:hidden, jangan sembunyikan logo di mobile, atur canvas dan table responsive */

/* Reset focus yang aman (jangan menghilangkan semua outline untuk aksesibilitas) */
:focus {
  outline: none;
}
a:focus, button:focus, input:focus, textarea:focus {
  outline: auto 3px rgba(82,141,230,0.35);
  outline-offset: 0;
}

/* Loader kecil (tidak berubah) */
.loader {
  background:url(../img/loader.gif) no-repeat;
  height: 24px;
  width: 160px;
  position: relative;
  display: block;
  background-size:65%;
}
#barloading{ display: none; }
#success{ display: none; }
#failed{ display: none; }

.loading {
  display: none;
  position: fixed;
  top:60px;
  right: 20px;
  z-index:999999;
  box-sizing: border-box;
  width:40px;
  height:40px;
  text-indent: -9999em;
  border: 6px solid #4797e3;
  border-left: 6px solid #fff;
  border-radius: 50%;
  animation: loading_animate 0.6s infinite linear;
}
@keyframes loading_animate { 100% { transform: rotate(360deg); } }

/* Table vertical align */
table.table-bordered tbody th,
table.table-bordered tbody td {
  vertical-align: middle !important;
}

/* Datepicker small tweaks */
.datepicker-days .table>tbody>tr>td,
.datepicker-days .table>tbody>tr>th,
.datepicker-days .table>tfoot>tr>td,
.datepicker-days .table>tfoot>tr>th,
.datepicker-days .table>thead>tr>td,
.datepicker-days .table>thead>tr>th {
    padding:5px 10px;
    vertical-align: top;
    margin-bottom:0!important;
    text-align: center;
}
.datepicker-days .table>tbody>tr>td:hover,
.datepicker-days .table>tbody>tr>th:hover { background: #02e1d0!important; cursor: pointer; }
.datepicker-days .table { width: 100%; max-width: 100%; margin-bottom:0; }

/* Active row highlight */
.table>tbody>tr.active>td,
.table>tbody>tr>th.active {
    background-color: #02e1d0!important;
}

/* Notif popup */
.notif {
    width: 350px;
    z-index: 999999;
    position: fixed;
    right: 10px;
    top: 10%;
    display: none;
}

/* Alert styles */
.alert-success{
    color: #27ae60!important;
    background-color: #daf2e4!important;
    border-color: #b8e5cb!important;
}
.alert-danger {
    color: #e74c3c!important;
    background-color: #ffd1cc!important;
    border-color: #ffb8b0!important;
}

/* Upload thumbnails (keperluan lain) kept but made responsive */
.upload_file, .upload-media { box-sizing: border-box; }

/* Upload custom - make widths flexible */
.file-upload, .file-upload2 {
  background-color: #ffffff;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* validation error */
label.error {
    display: inline-block;
    max-width: 100%;
    font-weight:300;
    color: #ff0101;
}

/* Strength message */
#strength_message { color:#00e4d0; }

.alert a { text-decoration: none!important; }
textarea { max-width: 100%; }

/* Box body canvas: jangan paksa width:auto, biarkan Chart.js ukuran responsif */
.box-body canvas {
    display: block;
    width: 100% !important;
    height: 300px !important; /* tetapkan tinggi tetap agar area chart tidak melebihi */
    border-radius: 6px;
    overflow: hidden;
}

/* Payment image responsiveness */
.img-payment img{ max-width: 100%; height: auto; display: inline-block; }

/* Progress bar styles kept */
.amount-progress{ height:2px; background-color: #0091EA; position: relative; width:100%; }
.progress{ background-color: #fff; border-radius: 4px; box-shadow:none; margin:0; height:15px; position:relative; }

/* prevent .table-responsive from hiding horizontal scroll (important) */
/* AdminLTE expects overflow-x:auto so tables can be scrolled on small screens */
.table-responsive {
    overflow-x: auto !important;
}

/* MEDIA QUERIES - perbaikan: jangan sembunyikan logo pada mobile secara paksa */
@media only screen and (max-width:600px){
  .fixed .content-wrapper, .fixed .right-side{
    padding-top: 70px;
  }
  .content-header { padding: 5px 5px 0 5px; margin: 5px 5px 10px 5px; }
  .small-box h3 { font-size:20px; font-weight: bold; }
  .content { padding: 0 5px; margin: 0; }
  .invoice { position: relative; background: #fff; border: 1px solid #f4f4f4; padding: 20px; margin: 10px 5px; }
  .main-footer { text-align:center; }
  .table-responsive { overflow-x: auto!important; }
}

/* smaller screens */
@media only screen and (max-width:480px){
  .lockscreen-logo { font-size:20px; text-align: center; margin-bottom:15px; font-weight:300; line-height: 28px; }
  .small-box h3 { font-size: 15px; font-weight: bold; }
  .main-footer { text-align:center; }
  .hidden-xs2{ display: none; }
  .table-responsive { overflow-x: auto!important; }
}

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

/* Small helper: reduce top header height on small screens if needed */
@media (max-width:767px) {
  .main-header .navbar { min-height:40px; }
  .main-header .logo { height:40px; line-height:40px; }
}

/* ======================================================= */
/* >>> SOLUSI PERBAIKAN DATATABLES SEARCH BOX (Triple S) <<< */
/* ======================================================= */
/* Target elemen div terluar yang menampung Search/Filter box */
/* Ini biasanya kolom terakhir (col-md-6:last-child) di baris pertama wrapper DataTables */
.dataTables_wrapper .row:first-child .col-md-6:last-child {
    /* Hapus float yang mungkin menyebabkan elemen search tidak mengambil lebar penuh */
    float: none !important; 
    /* Paksa lebar 100% untuk kolom yang menampung search box */
    width: 100% !important;
    /* Kembalikan alignment teks ke kanan (jika sebelumnya rata kanan) */
    text-align: right; 
    /* Tambahkan margin atas agar tidak terlalu mepet dengan tombol/judul di atasnya */
    margin-top: 10px;
}

/* Opsional: Target elemen Page Length (entries) */
.dataTables_wrapper .row:first-child .col-md-6:first-child {
    /* Paksa lebar 100% untuk kolom yang menampung Page Length */
    width: 100% !important;
    /* Tambahkan margin bawah */
    margin-bottom: 5px;
}