.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: block;
     max-width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }

 /* Dashboard: col-xl-4 jadi 3 kolom di viewport 1200px, sidebar masih ~280px,
    jadi grafik 160px + skor + nominal keluar dari kartu. Dua kolom sampai 1600px. */
 .itkp-metric,
 .col-xl-4:has([id^="penilaian-a"]) {
     min-width: 0;
 }
 .itkp-metric .card,
 .col-xl-4:has([id^="penilaian-a"]) .card {
     min-width: 0;
     height: 100%;
 }
 .itkp-metric .card-body.d-flex,
 .col-xl-4:has([id^="penilaian-a"]) .card-body.d-flex {
     flex-wrap: wrap;
     align-items: center;
     min-width: 0;
     gap: 0.25rem 0.75rem;
 }
 .itkp-metric .card-body > .flex-center,
 .col-xl-4:has([id^="penilaian-a"]) .card-body > .d-flex.flex-center {
     flex: 0 1 8.5rem;
     width: 8.5rem;
     max-width: 42%;
 }
 .itkp-metric [id^="penilaian-a"],
 .col-xl-4:has([id^="penilaian-a"]) [id^="penilaian-a"] {
     width: 100% !important;
     max-width: 8.5rem;
 }
 .itkp-metric .card-body > .w-100,
 .col-xl-4:has([id^="penilaian-a"]) .card-body > .w-100 {
     flex: 1 1 11rem;
     width: auto !important;
     min-width: 0;
     max-width: 100%;
     margin-left: 0 !important;
 }
 .itkp-metric .card-body .border.bg-light,
 .col-xl-4:has([id^="penilaian-a"]) .card-body .border.bg-light {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 0.15rem 0.5rem;
 }
 .itkp-metric .fs-2x,
 .col-xl-4:has([id^="penilaian-a"]) .fs-2x {
     font-size: 1.45rem !important;
     line-height: 1.1;
 }
 .itkp-metric .card-body .row,
 .col-xl-4:has([id^="penilaian-a"]) .card-body .row {
     --bs-gutter-x: 0.5rem;
     margin-left: 0;
     margin-right: 0;
 }
 .itkp-metric .border-dashed,
 .col-xl-4:has([id^="penilaian-a"]) .border-dashed {
     min-width: 0;
     padding-left: 0.6rem !important;
     padding-right: 0.6rem !important;
 }
 .itkp-metric .border-dashed .fs-6,
 .col-xl-4:has([id^="penilaian-a"]) .border-dashed .fs-6 {
     overflow-wrap: anywhere;
 }
 .itkp-metric .card-footer,
 .col-xl-4:has([id^="penilaian-a"]) .card-footer {
     overflow-wrap: anywhere;
 }
 @media (max-width: 1599.98px) {
     .col-xl-4:has([id^="penilaian-a"]) {
         flex: 0 0 auto;
         width: 50%;
     }
     .row:has([id^="penilaian-a"]) > .col-xl-8,
     .row:has([id^="penilaian-a"]) > .col-xl-4:not(:has([id^="penilaian-a"])) {
         flex: 0 0 auto;
         width: 100%;
     }
     .row:has([id^="kt_widget_ranking_"]) > .col-xl-4,
     .row:has([id^="kt_sliders_widget_summary_"]) > .col-xl-4 {
         flex: 0 0 auto;
         width: 50%;
     }
 }
 @media (max-width: 767.98px) {
     .col-xl-4:has([id^="penilaian-a"]),
     .row:has([id^="kt_widget_ranking_"]) > .col-xl-4,
     .row:has([id^="kt_sliders_widget_summary_"]) > .col-xl-4 {
         width: 100%;
     }
 }
 @media (min-width: 1600px) {
     .itkp-metric,
     .dash-span,
     .col-xl-4:has([id^="penilaian-a"]),
     .row:has([id^="kt_widget_ranking_"]) > .col-xl-4,
     .row:has([id^="kt_sliders_widget_summary_"]) > .col-xl-4 {
         flex: 0 0 auto;
         width: 33.33333333%;
     }
 }

 [id^="kt_widget_ranking_"] .table {
     table-layout: fixed;
     width: 100%;
 }
 [id^="kt_widget_ranking_"] .min-w-140px {
     min-width: 0 !important;
     width: 38%;
 }
 [id^="kt_widget_ranking_"] td:last-child,
 [id^="kt_widget_ranking_"] td:last-child .fs-5 {
     white-space: normal;
     overflow-wrap: anywhere;
 }

 .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;
     }
 }