.clickable-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.clickable-card:hover {
    transform: scale(1.03);
    box-shadow: 1px 1px 2px rgb(148, 235, 255);
}

.table-sm th{
    font-size: clamp(.45rem, 1.05vw, .72rem);
    vertical-align: middle !important;
    color: rgb(178,176,199) !important;
    height: 12px !important;
}

.table-sm td {
    font-size: clamp(.40rem, 1.05vw, .70rem);
    vertical-align: middle !important;
    color: rgb(178, 176, 199) !important;
}

/*TABLE RESPONSIVE*/
.table-responsive thead {
    top: 0;
    position: sticky;
    padding: 2px 6px;
    z-index: 1;
    box-shadow: 0px 4px 12px rgba(88, 88, 88, 0.811);
}

.table-responsive {
    max-height: calc(100vh - 125px);
    overflow-y: auto;
}


.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #343434d4;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
    border: 1px solid #8e8e8e;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #a92a00;
}

/*TABLE Active*/
.table-printable thead {
    top: 0;
    position: sticky;
    padding: 2px 6px;
    z-index: 1;
    box-shadow: 0px 4px 12px rgba(88, 88, 88, 0.811);
}

.table-printable {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}


.table-printable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-printable::-webkit-scrollbar-track {
    background: #343434d4;
}

.table-printable::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
    border: 1px solid #8e8e8e;
}

.table-printable::-webkit-scrollbar-thumb:hover {
    background-color: #a92a00;
}



.highlighted-row td {
    background-color: rgba(142, 0, 80, 0.274)!important;
    color: rgb(212, 212, 212) !important;
    font-weight: bold;
}

.table-sm tr:hover{
    background-color: rgba(162, 0, 92, 0.425);
    color: rgb(212, 212, 212);
}

.clickable-row {
    cursor: pointer;
}

.modal {
    overflow-y: auto;
}

.modal-header {
    top: 0;
    height: 60px;
    position: sticky;
    box-shadow: 0px 4px 12px rgba(88, 88, 88, 0.811);
}

.custom-modal-header h4 {
    position: absolute;
    bottom: 5px;
    left: 10px;
    margin: 0;
    color: rgb(152, 0, 109);
}

.custom-modal-header .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 25px;
    color: rgb(111, 111, 111);
    cursor: pointer;
}

.custom-modal-header .close-btn:hover {
    color: red;
}

.modal-content {
    position: relative;
    margin: 2% auto;
    border-radius: 10px;
    max-width: 100%;
    box-shadow: 1px 1px 6px rgb(169, 169, 169);
}

.modal-contentxtra {
    position: relative;
    background-color: transparent;
    max-width: 100%;
}


.btn:active {
    transform: scale(0.90);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px inset #797979;
}

.btn-head {
    width: 100%;
    padding: 7px;
    font-size: 10px;
    text-align: center;
    border: none;
    border-radius: 2px;
    color: rgb(200, 200, 200);
    background: #a20057;
    cursor: pointer;
}

.btn-head:hover {
    background-color: #002f47;
    box-shadow: 1px 1px 3px rgba(252, 248, 0, 0.5);
    animation: slideDown 1s ease;

}

.btn-daron {
    width: 100%;
    font-size: 10px;
    background-color: rgb(0, 48, 120);
    color: white;
    border: none;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-daron:hover {
    background-color: rgb(0, 40, 101);
    box-shadow: 1px 1px 6px rgb(169, 169, 169);
    animation: slideDown 1s ease;
}

.btn-prion {
    width: 100%;
    font-size: 10px;
    background-color: rgb(114, 0, 88);
    color: white;
    border: none;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-prion:hover {
    background-color: rgb(95, 0, 73);
    box-shadow: 1px 1px 6px rgb(169, 169, 169);
    animation: slideDown 1s ease;
}

.btn-danon {
    width: 100%;
    font-size: 10px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-danon:hover {
    background-color: #81000d;
    box-shadow: 1px 1px 2px rgb(169, 169, 169);
    animation: slideDown 1s ease;
}

.btn-sucon {
    width: 100%;
    font-size: 10px;
    background-color: rgb(0, 122, 14);
    color: white;
    border: none;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-sucon:hover {
  background-color: rgb(0, 99, 12);
  box-shadow: 1px 1px 2px rgb(169, 169, 169);
  animation: slideDown 1s ease;
}

.btn-davon {
    width: 100%;
    font-size: 10px !important;
    background-color: rgb(0, 48, 120);
    color: white;
    border: none;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
}

.btn-davon:hover {
    background-color: rgb(0, 40, 101);
    box-shadow: 1px 1px 6px rgb(169, 169, 169);
    animation: slideDown 1s ease;
}

.save-btn {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    margin-top: 5px;
}

.save-btn:hover {
    background-color: #ba0064;
    box-shadow: 1px 1px 2px rgb(169, 169, 169);
    animation: slideDown 1s ease;
}


input,
select {
    width: 100%;
    padding: 5px 10px !important;
    box-sizing: border-box;
    appearance: none;
    background: rgb(121, 121, 121);
}

input[readonly] {
    cursor: not-allowed;
}

input.form-full,
select.form-full{
    width: 100%;
    padding: 2px 10px !important;
    box-sizing: border-box;
    appearance: none;
    background: rgb(121, 121, 121);
    font-size: 12px;
}
select.form-full option {
    color: #1f1f1f;
}
select.form-head {
    font-size: 10px;
}

select.form-head option {
    color: #101010;
}

input[type="date"].form-full {
    width: 100%;
    padding: 1px 10px !important;
    box-sizing: border-box;
    appearance: none;
    background: rgb(109, 0, 38);
    color: rgb(160, 160, 160);
    font-size: 12px;
    font-weight: bold;
}

input.form-full[readonly] {
    width: 100%;
    cursor: not-allowed;
    background-color: #1b1d27 !important;
    color: rgb(197, 0, 66);
    font-size: 12px;
    font-weight: bold;
}

.rowx {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 1px;
    margin-top: 5px;
    padding: 0;
}

.rowz {
    display: grid;
    grid-template-columns: repeat(100, 1%);
    background: rgb(21, 21, 21);
    align-items: center;
    margin-bottom: 3px;
    gap: 0px;
}
.rowz .field {
    padding: 0 1px;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.colx2 {width: 2%;}
.colx3 {width: 3%;}
.colx4 {width: 4%;}
.colx5 {width: 5%;}
.colx6 {width: 6%;}
.colx8 {width: 8%;}
.colx10 {width: 10%;}
.colx12 {width: 12%;}
.colx14 {width: 14%;}
.colx15 {width: 15%;}
.colx16 {width: 16%;}
.colx18 {width: 18%;}
.colx20 {width: 20%;}
.colx25 {width: 25%;}
.colx30 {width: 30%;}
.colx35 {width: 35%;}
.colx40 {width: 40%;}
.colx45 {width: 45%;}
.colx50 {width: 50%;}
.colx60 {width: 60%;}
.colx65 {width: 65%;}
.colx70 {width: 70%;}
.colx75 {width: 75%;}
.colx80 {width: 80%;}
.colx90 {width: 90%;}
.colx100 {width: 100%;}


/*BUTTON*/


.footer {
    font-size: .675rem;
}

.disabled-btn {
    cursor: not-allowed !important;
    pointer-events: none;
}

.disabled-botton {
    cursor: not-allowed !important;
    pointer-events: none;
}

#saveRepack:disabled,
#saveRepack:disabled:hover,
#saveRepack:disabled:focus {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

#savePrinted:disabled,
#savePrinted:disabled:hover,
#savePrinted:disabled:focus {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

#addWO-btn:disabled,
#addWO-btn:disabled:hover,
#addWO-btn:disabled:focus {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

#saveList-btn[disabled],
#saveList-btn[disabled] hover,
#saveList-btn[disabled] focus {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
#saveMaster-btn[disabled],
#saveMaster-btn[disabled] hover,
#saveMaster-btn[disabled] focus {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.table-wrap td {
    white-space: normal;
    word-break: break-word;
}

.table-xs th,
.table-xs td {
    padding: 0.2rem 0.4rem;
    /* Lebih kecil dari table-sm */
    font-size: 0.55rem;
    /* Ukuran font kecil */
    vertical-align: middle;
}

.table-xs {
    border-collapse: collapse;
}

.search-container {
    position: relative;
    display: inline-block;
}

.search-box {
    padding-right: 25px;
    /* ➡️ Space untuk tombol X */
}

.clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2rem;
    color: #9b0000;
    z-index: 10;
    display: none;
}


/*ICON */
.toggle-icon {
    font-size: 1.3rem;
    cursor: pointer;
    color: #6c6c6c;
    transition: transform 0.2s, color 0.2s;
}

.toggle-icon:hover {
    color: #9e0067;
}

.toggle-icon.mdi-stop-circle-outline {
    color: #ea0000;
}

.idle-wallpaper {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.wallpaper-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .wallpaper-image {
        max-width: 100%;
    }

    .idle-wallpaper {
        padding: 10px;
    }
}

.auth-domain-text {
    text-transform: none !important;
    letter-spacing: normal;
}

#pages option {
    padding: 4px 8px;
    line-height: 1.2;
    margin-bottom: 4px;
}

#selected-pages option {
    padding: 4px 8px;
    line-height: 1.2;
    margin-bottom: 4px;
    color: #b0007b;
    text-align: right;

}

#pages option:checked {
    background-color: #4d4d4e;
    color: #fff;
}

#toggleIcon:hover {
    color: #007bff;
}

.highlight-row {
    background-color: #660050 !important;
    color: white !important;
    font-size: 14px;
    font-weight: bold;
}

.table-ar {
    table-layout: fixed;
}

.table-ar th,
.table-ar td {
    text-align: right;
    vertical-align: middle;
    padding: 0.5rem 0.4rem;
    font-size: clamp(.25rem, 1.05vw, .70rem);
}

.table-ar th:nth-child(1),
.table-ar td:nth-child(1) {
    width: 4%;
}

.table-ar th:nth-child(2),
.table-ar td:nth-child(2) {
    width: 16%;
}

.table-ar th:nth-child(3),
.table-ar td:nth-child(3) {
    width: 8%;
}

.table-ar th:nth-child(4),
.table-ar td:nth-child(4) {
    width: 8%;
    color: rgb(0, 255, 13);
}

.table-ar th:nth-child(5),
.table-ar td:nth-child(5) {
    width: 8%;
    color: rgb(150, 255, 0);
}

.table-ar th:nth-child(6),
.table-ar td:nth-child(6) {
    width: 8%;
    color: rgb(175, 255, 0);
}

.table-ar th:nth-child(7),
.table-ar td:nth-child(7) {
    width: 8%;
    color: rgb(255, 250, 0);
}
.table-ar th:nth-child(8),
.table-ar td:nth-child(8) {
    width: 8%;
    color: rgb(255, 230, 0);
}

.table-ar th:nth-child(9),
.table-ar td:nth-child(9) {
    width: 8%;
    color: rgb(255, 215, 0);
}

.table-ar th:nth-child(10),
.table-ar td:nth-child(10) {
    width: 8%;
    color: rgb(255, 175, 0);
}

.table-ar th:nth-child(11),
.table-ar td:nth-child(11) {
    width: 8%;
    color: rgb(255, 50, 0);
}
.table-ar th:nth-child(12),
.table-ar td:nth-child(12) {
    width: 8%;
    color: rgb(255, 0, 0);
}


@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-modal-content::-webkit-scrollbar {
    width: 6px;
}

.zoom-modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(150, 150, 150, 0.5);
    border-radius: 4px;
}

.disabled-menu {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(119, 0, 77, 0.65);
}

/* Pastikan semua opsi memiliki warna normal */
select option {
    color: #000000;
}

.form-control-special {
    width: 100%;
    font-size: 0.7rem;
    color: rgb(148, 148, 148);
    padding: 3px 10px !important;
    border: none;
    appearance: none;
    background: rgb(64, 64, 64);
}

.btn-sttrans[disabled],
.btn-sttrans.is-locked {
    pointer-events: none;
    opacity: .85;
    cursor: not-allowed;
}

/* Jadikan card body sebagai container untuk container-query */
.card .card-body {
    container-type: inline-size;
}

/* Bungkus fleksibel & tidak “nyangkut” ukuran */
.metric-wrap {
    min-width: 0;
}

/* Angka utama: skala mengikuti LEBAR CARD (cqi), dengan fallback vw */
.metric {
    font-weight: 500;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    /* tetap 1 baris */
    overflow: hidden;
    /* jangan tumpah */
    text-overflow: ellipsis;
    /* kalau masih kepanjangan, beri ellipsis */

    /* Utama: skala terhadap lebar container (card) */
    font-size: clamp(1.5rem, 25cqi, 2.5rem);
}

/* Fallback untuk browser lama yang belum support container queries */
@supports not (font-size: 1cqi) {
    .metric {
        font-size: clamp(1.1rem, 6vw, 2.2rem);
    }
}

/* Boleh tambah tweak khusus HP sangat kecil */
@media (max-width: 380px) {
    .metric {
        font-size: clamp(1rem, 7cqi, 1.8rem);
    }
}

/* mute desimal */
td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.dec {
    opacity: .55;
}

.form-check.human-check-scale {
    transform-origin: center;
}

@media (min-width: 768px) {
    .form-check.human-check-scale {
        transform: scale(1.6);
    }
}

.db-locked {
    opacity: 0.3;
    pointer-events: none;
    /* tidak bisa diklik */
    filter: grayscale(1);
}

.db-locked i {
    pointer-events: none;
}