body {
  background-color: #f8f9fa;
}

.main-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
  vertical-align: middle;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dataTables_info,
.dataTables_paginate {
  padding: 0.5rem 1rem;
}

.timeline-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

#timeline>.card {
  display: inline-block;
  margin-right: 1rem;
}

/* Sembunyikan scrollbar (browser modern) */
.timeline-wrapper::-webkit-scrollbar {
  display: none;
}

.timeline-wrapper {
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* default: tampil semua teks */
.navbar .nav-text {
  display: inline;
}

/* desktop / tablet: hide teks, tampil icon saja */
@media (min-width: 768px) {
  .navbar .nav-text {
    display: none;
  }
}

.progress {
  height: 20px;
}

.progress-bar {
  font-size: 0;
  transition: width 0.8s ease;
}

td {
  vertical-align: middle;
}

table {
  table-layout: auto;
  width: 100%;
}

.swal2-popup {
  overflow: hidden !important;
}

.timeline-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

#timeline>.card {
  display: inline-block;
  margin-right: 1rem;
}

/* Sembunyikan scrollbar (browser modern) */
.timeline-wrapper::-webkit-scrollbar {
  display: none;
}

.timeline-wrapper {
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Sembunyikan scrollbar (browser modern) */
.card-body p-0 table-responsive::-webkit-scrollbar {
  display: none;
}

.card-body p-0 table-responsive {
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}




.progress {
  height: 20px;
}

.progress-bar {
  font-size: 0;
  transition: width 0.8s ease;
}

td {
  vertical-align: middle;
}

table {
  table-layout: auto;
  width: 100%;
}

.swal2-popup {
  overflow: hidden !important;
}

.small-textarea {
  resize: none;
  overflow: auto;
  height: 2.2em;
  min-width: 40px;
  font-size: 0.85rem;
  background-color: #f8f9fa;
  border-color: #ced4da;
  cursor: default;
  scrollbar-width: none;
}

.small-textarea::-webkit-scrollbar {
  display: none;
}



#approvalBadge {
  font-size: 0.65rem;
  padding: 0.3em 0.55em;
}

.nav-item .badge {
  transform: translate(-20%, -40%);
}


.login-container {
  max-width: 400px;
  margin: 5rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#tablePelanggan td {
  white-space: nowrap;
  vertical-align: middle;
}

#tablePelanggan textarea.addr {
  width: 250px;
  height: 70px;
  resize: none;
  overflow: auto;
}

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


.chart-wrapper {
  max-width: 500px;
  min-width: 300px;
  width: 100%;
}

.chart-wrapper-pie {
  max-width: 350px;
  /* Pie lebih kecil sedikit */
}

.chart-wrapper canvas {
  width: 100% !important;
  height: auto !important;
}

.table-responsive::-webkit-scrollbar {
  display: none;
}

#tablePemasukan th,
#tablePemasukan td,
#tablePemasukan th *,
#tablePemasukan td * {
  white-space: nowrap !important;
}

.table table-striped th,
.table table-striped td,
.table table-striped th *,
.table table-striped td * {
  white-space: nowrap !important;
}


/* Saat belum terseleksi */
.btn-check+.btn {
  border: 2px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  transition: all 0.3s ease;
}

/* Saat hover */

/* Saat terseleksi */
.btn-check:checked+.btn {
  background-color: #0d6efd;
  color: white;
  border-color: #0a58ca;
}

.btn-check:checked+.btn.btn-outline-warning {
  background-color: #ffc107;
  color: black;
  border-color: #e0a800;
}

.btn-check:checked+.btn.btn-outline-danger {
  background-color: #dc3545;
  color: white;
  border-color: #bb2d3b;
}


div.dataTables_length,
div.dataTables_filter {
  display: none !important;
}


#kinerjaTable td,
#kinerjaTable th {
  padding-left: 20px;
  /* atau lebih besar sesuai selera */
}

/* Desktop & tablet (min-width 768px) */
@media (min-width: 768px) {

  /* Hide text if ingin, optional */
  .nav-text {
    display: none;
  }

  /* Tambahkan outline/border pada icon saat hover/focus */
  .navbar-nav .nav-item .nav-link i {
    display: inline-block;
    padding: 0.4rem;
    border-radius: 0.25rem;

  }

  body {
    background-color: #f8f9fa;
  }

  .main-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .table th,
  .table td {
    vertical-align: middle;
  }

  .header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .dataTables_info,
  .dataTables_paginate {
    padding: 0.5rem 1rem;
  }

  .timeline-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  #timeline>.card {
    display: inline-block;
    margin-right: 1rem;
  }

  /* Sembunyikan scrollbar (browser modern) */
  .timeline-wrapper::-webkit-scrollbar {
    display: none;
  }

  .timeline-wrapper {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* default: tampil semua teks */
  .navbar .nav-text {
    display: inline;
  }

  /* desktop / tablet: hide teks, tampil icon saja */
  @media (min-width: 768px) {
    .navbar .nav-text {
      display: none;
    }
  }

  .progress {
    height: 20px;
  }

  .progress-bar {
    font-size: 0;
    transition: width 0.8s ease;
  }

  td {
    vertical-align: middle;
  }

  table {
    table-layout: auto;
    width: 100%;
  }

  .swal2-popup {
    overflow: hidden !important;
  }

  .timeline-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  #timeline>.card {
    display: inline-block;
    margin-right: 1rem;
  }

  /* Sembunyikan scrollbar (browser modern) */
  .timeline-wrapper::-webkit-scrollbar {
    display: none;
  }

  .timeline-wrapper {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* Sembunyikan scrollbar (browser modern) */
  .card-body p-0 table-responsive::-webkit-scrollbar {
    display: none;
  }

  .card-body p-0 table-responsive {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
  }




  .progress {
    height: 20px;
  }

  .progress-bar {
    font-size: 0;
    transition: width 0.8s ease;
  }

  td {
    vertical-align: middle;
  }

  table {
    table-layout: auto;
    width: 100%;
  }

  .swal2-popup {
    overflow: hidden !important;
  }

  .small-textarea {
    resize: none;
    overflow: auto;
    height: 2.2em;
    min-width: 40px;
    font-size: 0.85rem;
    background-color: #f8f9fa;
    border-color: #ced4da;
    cursor: default;
    scrollbar-width: none;
  }

  .small-textarea::-webkit-scrollbar {
    display: none;
  }



  #approvalBadge {
    font-size: 0.65rem;
    padding: 0.3em 0.55em;
  }

  .nav-item .badge {
    transform: translate(-20%, -40%);
  }


  .login-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  #tablePelanggan td {
    white-space: nowrap;
    vertical-align: middle;
  }

  #tablePelanggan textarea.addr {
    width: 250px;
    height: 70px;
    resize: none;
    overflow: auto;
  }

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


  .chart-wrapper {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
  }

  .chart-wrapper-pie {
    max-width: 350px;
    /* Pie lebih kecil sedikit */
  }

  .chart-wrapper canvas {
    width: 100% !important;
    height: auto !important;
  }

  .table-responsive::-webkit-scrollbar {
    display: none;
  }

  #tablePemasukan th,
  #tablePemasukan td,
  #tablePemasukan th *,
  #tablePemasukan td * {
    white-space: nowrap !important;
  }

  .table table-striped th,
  .table table-striped td,
  .table table-striped th *,
  .table table-striped td * {
    white-space: nowrap !important;
  }


  /* Saat belum terseleksi */
  .btn-check+.btn {
    border: 2px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    transition: all 0.3s ease;
  }

  /* Saat hover */

  /* Saat terseleksi */
  .btn-check:checked+.btn {
    background-color: #0d6efd;
    color: white;
    border-color: #0a58ca;
  }

  .btn-check:checked+.btn.btn-outline-warning {
    background-color: #ffc107;
    color: black;
    border-color: #e0a800;
  }

  .btn-check:checked+.btn.btn-outline-danger {
    background-color: #dc3545;
    color: white;
    border-color: #bb2d3b;
  }


  div.dataTables_length,
  div.dataTables_filter {
    display: none !important;
  }


  #kinerjaTable td,
  #kinerjaTable th {
    padding-left: 20px;
    /* atau lebih besar sesuai selera */
  }

  /* Desktop & tablet (min-width 768px) */
  @media (min-width: 768px) {

    /* Hide text if ingin, optional */
    .nav-text {
      display: none;
    }

    /* Default icon styling */
    .navbar-nav .nav-item .nav-link i {
      display: inline-flex;
      /* biar bisa center horizontal + vertical */
      align-items: center;
      justify-content: center;
      width: 32px;
      /* fix ukuran kotak */
      height: 32px;
      font-size: 18px;
      line-height: 1;
      border-radius: 0.25rem;
      text-align: center;
      vertical-align: middle;
      transition: all 0.2s ease;
      /* animasi halus */
    }

    /* Hover / focus effect */
    .navbar-nav .nav-item .nav-link:hover i,
    .navbar-nav .nav-item .nav-link:focus i {
      background-color: var(--bs-success);
      color: #fff;
      border-radius: 6px;
      /* tetap curve */
      outline-offset: 2px;
      /* jarak outline (kalau pakai outline) */
    }

    /* Icon aktif */
    /* Icon aktif */
    .navbar-nav .nav-link i.active-icon {
      border-bottom: 3px solid var(--bs-success);
      color: var(--bs-success);
      pointer-events: none;
      /* biar ga bisa di klik ulang */
    }
  }

  /* END OF MEDIA QUERY MIN-WIDTH 768PX */


  /* =========================================
   FIXES AND OVERRIDES (SCROLLBAR & TOOLTIPS)
   ========================================= */

  /* HIDE SCROLLBAR GLOBALLY - AGGRESSIVE (WINDOWS COMPATIBLE) */
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video,
  main,
  aside,
  * {
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE 10+ */
    -webkit-overflow-scrolling: touch !important;
  }

  /* WebKit specific (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }

  ::-webkit-scrollbar-track {
    background: transparent !important;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent !important;
  }

  /* CUSTOM TOOLTIP STYLES */
  [data-tooltip] {
    position: relative;
    cursor: help;
  }

  [data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 6px 12px;
    background-color: #0F172A;
    border: 1px solid #334155;
    color: #F8FAFC;
    font-size: 0.75rem;
    border-radius: 8px;
    white-space: normal;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    /* Ensure high z-index */
    min-width: 150px;
    max-width: 250px;
    line-height: 1.4;
    opacity: 1;
    visibility: visible;
  }

  /* REMOVE DATATABLES SORTING ICONS */
  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_desc,
  table.dataTable thead .sorting_asc_disabled,
  table.dataTable thead .sorting_desc_disabled {
    background-image: none !important;
  }

  table.dataTable thead th {
    pointer-events: none !important;
  }

  /* UTILITY CLASS FOR SPECIFIC ELEMENTS */
  .no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }

  /* ULTRA-AGGRESSIVE MOBILE SCROLLBAR HIDING */
  @media (max-width: 768px) {

    /* 1. Target ALL elements */
    * {
      scrollbar-width: none !important;
      /* Firefox */
      -ms-overflow-style: none !important;
      /* IE/Edge */
    }

    /* 2. Target Webkit Scrollbar Pseudo-elements globally */
    ::-webkit-scrollbar {
      display: none !important;
      width: 0px !important;
      height: 0px !important;
      background: transparent !important;
      -webkit-appearance: none !important;
    }

    ::-webkit-scrollbar-track {
      background: transparent !important;
      display: none !important;
    }

    ::-webkit-scrollbar-thumb {
      background: transparent !important;
      display: none !important;
    }

    /* 3. Explicitly target known containers */
    html,
    body,
    #main-content,
    .table-responsive,
    .overflow-auto,
    .overflow-x-auto,
    .overflow-y-auto {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    #main-content::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .overflow-auto::-webkit-scrollbar,
    .overflow-x-auto::-webkit-scrollbar,
    .overflow-y-auto::-webkit-scrollbar {
      display: none !important;
      width: 0px !important;
      height: 0px !important;
    }
  }