:root {
            --control-height-normal: 1.5rem;
            /* Base Input Variables */
            --input-font-size: 0.8rem;
            --input-height: 1.5rem;
            --input-padding: 0.2rem 0.7rem;
            --input-border-width: 1px;
            --input-border-radius: 0.125rem;

            --select-font-size: 0.8rem;
            --select-height: 1.5rem;
            --select-padding: 0.2rem 0.7rem;
            --select-border-width: 1px;
            --select-border-radius: 0.125rem;
            
            /* Derived Variables for Specific Input Types */
            --textarea-padding: calc(var(--input-padding) * 1.5);
            --select-padding: 0 calc(2rem + var(--input-padding-right)) calc(var(--input-padding-top)) calc(var(--input-padding-left));
            --checkbox-size: calc(var(--input-height) * 0.8);
            --radio-size: calc(var(--input-height) * 0.8);

            /*--font-name: 'Your Custom Font', sans-serif; */
            --font-size: .8rem;
            --line-height: 1.5;
            --font-weight: 400;
            /* Tab */
            --tabs-item-marker: #00b300;

/*            --hint-border-radius : 4px;*/
            --control-height:1.5rem;
            --control-height-small: 1.5rem;


        }


        #myCustomAppBarxx {
            --appbar-background: #3498db;
            --appbar-color: #ffffff;
            --appbar-item-color: #ffffff;
            --appbar-item-background-hover: rgba(255, 255, 255, 0.2);
            --appbar-item-color-hover: #ffffff;
        }

        #myCustomAppBar {
            --appbar-background: background: #8e9ff5; background: linear-gradient(90deg,rgba(142, 159, 245, 0.71) 37%, rgba(14, 14, 158, 0.84) 67%, rgba(181, 97, 250, 0.7) 100%);
            /*--appbar-color: linear-gradient(90deg, rgba(31,18,180,1) 0%, rgba(94,105,226,0.9) 68%, rgba(163,119,240,0.90) 100%);          */
            --appbar-color: #ffffff;
            /*--appbar-item-color: #ffffff;*/
            --appbar-item-background-hover: rgba(255, 255, 255, 0.2);
            --appbar-item-color-hover: #ffffff;
            --appbar-shadow: 0 2px 10px var(--color-black-100);
            --appbar-opacity: 0.96;
/*            --appbar-border-radius: 2px;*/
        }

        .nowrap {
            white-space: nowrap; /* supaya kolom tidak patah */
        }

        .scroll-container {
            height: calc(100vh - 30px);
            width: 100%;
            overflow-y: auto;
            overflow-x: auto;
            position: relative;
        }

        .scroll-container > * {
            max-width: 100%;
            box-sizing: border-box;
        }


        #apps_layout {
            padding: 1rem 1rem 0rem 1rem;
            height: calc(100vh);
            overflow-y: auto;
            overflow-x: hidden;
        }

        .page-icon {
            font-size: 25px;
            margin-right: 1rem;
            color: #ccc;
        }
        .page-title {
            font-size: 26px;
            color: #7d7d7d;
        }

        .table-entry > .service-block {
            display: none !important;
        }

        #metro-loading-indicator {
            position: fixed; /* Penting agar menutupi seluruh layar */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8); /* Overlay putih transparan */
            z-index: 9999; /* Pastikan di atas semua elemen lain */
            display: flex; /* Untuk memposisikan spinner di tengah */
            justify-content: center;
            align-items: center;
            opacity: 0; /* Mulai dengan transparan */
            visibility: hidden; /* Sembunyikan sepenuhnya dari layout */
            transition: opacity 300ms ease-in, visibility 0s linear 300ms; /* Transisi untuk fade-in/out */
            /* Transisi visibility 0s linear 300ms: visibility akan berubah setelah transisi opacity selesai */
        }

        .table  caption {
            display: none !important;
        }

        /* Tampilkan indikator saat HTMX aktif */
        .htmx-request #metro-loading-indicator {
            opacity: 1; /* Munculkan */
            visibility: visible; /* Jadikan terlihat */
            transition: opacity 300ms ease-in; /* Transisi opacity tanpa delay saat muncul */
        }
        /* Apply to All Basic Inputs */
        .input input:not([type="checkbox"]):not([type="radio"]),
        .input textarea,
        .input select,
        .input .file,
        .input .tag-container {
            font-size: var(--input-font-size) !important;
            height: var(--input-height) !important;
            padding: var(--input-padding) !important;
            border-width: var(--input-border-width) !important;
            border-radius: var(--input-border-radius) !important;
        }

        /* Textarea Specific */
        .input textarea {
            padding: var(--textarea-padding) !important;
            min-height: calc(var(--input-height) * 2) !important;
            line-height: 1.5 !important;
        }

        /* Select Specific */
        .input select {
            padding: var(--select-padding) !important;
            background-position: right var(--input-padding-right) center !important;
        }

        /* Checkbox & Radio */
        .check .check-box,
        .radio .check-box {
            width: var(--checkbox-size) !important;
            height: var(--checkbox-size) !important;
        }

        /* File Input */
        .input .file {
            padding: 0 !important;
        }

        .input .file .button {
            height: var(--input-height) !important;
            font-size: var(--input-font-size) !important;
            padding: var(--input-padding) !important;
        }

        /* Tag Input */
        .input .tag-container {
            min-height: var(--input-height) !important;
            padding: calc(var(--input-padding-top) / 2) var(--input-padding-right)) !important;
        }

        .input .tag {
            font-size: calc(var(--input-font-size) * 0.9) !important;
            padding: 0.1rem 0.3rem !important;
            margin: 0.1rem !important;
        }
        /*
        body {
            background: url(../img/bg-8.jpg) bottom right no-repeat;
            background-size: cover;
        }
        .login { background: #8e9ff5; background: linear-gradient(90deg,rgba(142, 159, 245, 1) 12%, rgba(14, 14, 158, 0.84) 2%, rgba(181, 97, 250, 0.7) 10%); }
        */
        
.full_80 {
    height: calc(100vh - 80px);
    /*overflow: auto;*/
    overflow-x: hidden;
    overflow-y: auto; 
}

.blur-effect {
  filter: blur(4px);
  transition: filter 0.3s ease;
  pointer-events: none;
  user-select: none;
}

.ag-header-center .ag-header-cell-label {
    justify-content: center;
}

/* ===== SELECT2 SINGLE (GLOBAL) ===== */
.select2-container--default .select2-selection--single {
    height: 1.5rem !important;
    min-height: 1.5rem !important;
    line-height: 1.5rem !important;
    border-radius: 2px;
}

/* Text */
.select2-container--default 
.select2-selection--single 
.select2-selection__rendered {
    line-height: 1.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 1.75rem !important;
}

/* Arrow */
.select2-container--default 
.select2-selection--single 
.select2-selection__arrow {
    height: 1.5rem !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: 1.5rem !important;
    padding: 0.1rem 0.25rem !important;
}

.select2-container--default 
.select2-selection--multiple 
.select2-selection__choice {
    margin-top: 0.1rem;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #d9d9d9;
}


/* Auto Layout untuk Dokumen */
#dokumenList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    padding: 15px;
}

.dok-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px
}

.dok-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-color: #4a89dc;
}

/* Style untuk Thumbnail Image */
.dok-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: #f5f5f5;
}

/* Style untuk Icon File */
.dok-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.dok-icon span {
    font-size: 48px !important;
    transition: transform 0.3s ease;
}

.dok-item:hover .dok-icon span {
    transform: scale(1.1);
}

/* Style untuk Nama File */
.dok-name {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

/* Warna spesifik untuk setiap tipe file */
.mif-pdf-file { color: #f44336; }
.mif-xls-file { color: #4caf50; }
.mif-doc-file { color: #2196f3; }
.mif-file-text { color: #757575; }
.mif-file-zip { color: #ff9800; }
.mif-file { color: #9e9e9e; }

/* Responsive breakpoints */
@media screen and (max-width: 768px) {
    #dokumenList {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;
        padding: 10px;
    }
    
    .dok-thumb, .dok-icon {
        height: 100px;
    }
    
    .dok-icon span {
        font-size: 36px !important;
    }
}

@media screen and (max-width: 480px) {
    #dokumenList {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        padding: 8px;
    }
    
    .dok-thumb, .dok-icon {
        height: 80px;
    }
    
    .dok-icon span {
        font-size: 30px !important;
    }
    
    .dok-name {
        font-size: 10px;
        padding: 6px;
    }
}

/* Optional: Tambahkan efek loading */
.dok-item.loading {
    position: relative;
    min-height: 150px;
}

.dok-item.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Style untuk dialog preview */
.preview-dialog .dialog-content {
    padding: 0 !important;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style untuk dialog preview dengan scroll */
.preview-dialog .dialog-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.preview-dialog .dialog-content > div {
    flex: 1;
    overflow-y: auto;
    padding: 15px !important;
}

/* Custom scrollbar */
.preview-dialog .dialog-content::-webkit-scrollbar {
    width: 8px;
}

.preview-dialog .dialog-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.preview-dialog .dialog-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.preview-dialog .dialog-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Style untuk gambar dalam dialog */
.preview-dialog img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Responsif untuk mobile */
@media screen and (max-width: 768px) {
    .preview-dialog {
        width: 95vw !important;
        height: 90vh !important;
        left: 2.5vw !important;
    }
    
    .preview-dialog .dialog-content > div {
        max-height: calc(90vh - 120px) !important;
    }
}

#apps_layout.watermark-container::before {
    content: attr(data-watermark);
    position: fixed;

    top: 0px;       /* pojok atas */
    right: 10px;

    font-size: 160px;
    font-weight: 900;
    letter-spacing: 12px;

    color: rgba(0, 0, 0, 0.05);

    pointer-events: none;
    user-select: none;

    opacity: 0;
    transform: translateY(-10px);

    animation: dropTopWatermark 1.2s ease-out forwards;
    z-index: 999;
}

@keyframes dropTopWatermark {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}