.pulse-warn {
     background-color: #222;
     animation-name: color;
     animation-duration: 2s;
     animation-iteration-count: infinite;
 }

 @keyframes color {
     0% {
         background-color: #da251c;
     }

     50% {
         background-color: white;
     }

     100% {
         background-color: #da251c;
     }
 }

 .text-truncate-custom {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .upload-select .content {
     min-height: auto;
     padding: 1.5rem 1.75rem;
     text-align: center;
     cursor: pointer;
     border: 1px dashed var(--bs-primary);
     background-color: var(--bs-primary-light);
     border-radius: 0.475rem !important;
     display: flex;
     text-align: left;
 }

 .upload-select-disable .content {
     min-height: auto;
     padding: 1.5rem 1.75rem;
     text-align: center;
     cursor: pointer;
     border: 1px dashed var(--bs-secondary);
     background-color: var(--bs-secondary-light);
     border-radius: 0.475rem !important;
     display: flex;
     text-align: left;
 }

 .dropzone.dropzone-queue .dropzone-item .dropzone-file .dropzone-success {
     margin-top: 0.25rem;
     font-size: .9rem;
     font-weight: 400;
     color: var(--bs-success);
     text-overflow: ellipsis;
 }

 .swal-lg {
     max-height: 400px !important;
 }

 .modal-dialog.modal-xxl {
     max-width: 1600px;
     width: 90vw;
 }

 /* @media screen and (min-width: 992px) {
    .jstree-anchor {
        white-space: break-spaces !important;
        height: auto !important;
        width: 200px !important;
    }
} */

 .ranking-table-text {
     display: inline-block;
     max-width: 270px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }

 .widget-summary-slide {
     height: 215px !important;
 }

 .dropdown-dialog {
     float: right;
 }

 /* =========================================================
  * Mobile / iPad / PWA UX (Metronic shell)
  * Desktop layout tidak diubah; hanya breakpoint kecil.
  * ========================================================= */
 html {
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }

 /* Safe area (notch / home indicator) saat standalone PWA */
 @supports (padding: env(safe-area-inset-top)) {
     body.app-default {
         padding-left: env(safe-area-inset-left);
         padding-right: env(safe-area-inset-right);
     }
     #kt_app_header {
         padding-top: env(safe-area-inset-top);
     }
 }

 @media (max-width: 991.98px) {
     /* Sentuhan: tombol aksi utama min 44px */
     .btn:not(.btn-sm):not(.btn-icon) {
         min-height: 44px;
     }
     .btn.btn-sm {
         min-height: 38px;
     }
     .form-control, .form-select {
         min-height: 44px;
         font-size: 16px; /* cegah auto-zoom iOS saat fokus */
     }
     /* Tabel lebar: scroll horizontal, jangan pecah layout */
     .table-responsive {
         -webkit-overflow-scrolling: touch;
         overflow-x: auto;
     }
     /* Modal full-ish di HP */
     .modal-dialog {
         margin: 0.75rem;
         max-width: calc(100% - 1.5rem);
     }
     .modal-dialog.modal-xl,
     .modal-dialog.modal-xxl {
         max-width: calc(100% - 1.5rem);
         width: auto;
     }
     /* Kartu filter / toolbar: spasi lebih longgar */
     .card .card-header {
         flex-wrap: wrap;
         gap: 0.5rem;
     }
     /* Sidebar mobile: area sentuh menu */
     .app-sidebar .menu-link {
         min-height: 44px;
         align-items: center;
     }
 }

 @media (max-width: 575.98px) {
     .app-toolbar .page-title h1,
     .page-heading {
         font-size: 1.15rem !important;
     }
     /* DataTables length/filter stack */
     div.dataTables_wrapper div.dataTables_length,
     div.dataTables_wrapper div.dataTables_filter {
         text-align: left !important;
         float: none !important;
         margin-bottom: 0.5rem;
     }
     div.dataTables_wrapper div.dataTables_filter input {
         width: 100% !important;
         margin-left: 0 !important;
     }
 }

 /* PWA standalone: kurangi overscroll bounce */
 @media (display-mode: standalone) {
     html, body {
         overscroll-behavior-y: none;
     }
 }