/*
 * Gaya komponen bersama platform: resources/js/src/@core/components/table-component/ExcelTable.vue
 * (blok <style scoped>; tidak ikut core.css). Penanda scoped vue dilepas:
 * ::v-deep dihapus karena di mockup tidak ada atribut data-v-*.
 * Tiga selektor tanpa awalan .excel- (.pagination, .vs__dropdown-menu, .vs--open
 * .vs__dropdown-toggle) diberi awalan .excel-container supaya tidak bocor ke
 * pagination, filter, dan modal di luar tabel — di platform cakupannya dibatasi
 * oleh scoped style komponen.
 */
.excel-table-wrapper {
    width: 100%;
    border: 1px solid #d4d4d4;
    background: #fff;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.excel-table-wrapper.is-busy {
    cursor: wait;
}

.excel-table-wrapper.is-busy .excel-table {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.1);
}

.excel-table-scroll {
    overflow: auto;
    max-height: 70vh;
    min-height: 200px;
}

.excel-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
}

.excel-th {
    background-color: #f3f3f3 !important;
    color: #333;
    font-weight: 500;
    font-size: 11px;
    padding: 10px 15px;
    border-right: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.excel-td {
    border-right: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    padding: 0 !important;
    vertical-align: stretch;
    font-size: 12px;
    height: 1px;
}

.excel-input-container {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 40px;
    align-items: stretch;
}

.excel-raw-input,
.excel-textarea {
    flex: 1;
    width: 100%;
    height: 100% !important;
    border: none;
    outline: none;
    padding: 10px 12px;
    font-size: 13px;
    background: transparent;
    display: block;
    box-sizing: border-box;
    margin: 0;
}

.excel-textarea:disabled {
    background: #f3f3f3;
    cursor: not-allowed;
    color: #888;
}

/* Wrapper transparan by default (tidak mengubah layout ~32 halaman lain yang pakai
   ExcelTable). Sebuah page skin bisa "opt-in" ke autosize CSS-only (::after mirrors
   data-replicated-value) dengan meng-override display:grid pada .excel-grow-wrap —
   lihat ticket-train-visa.scss untuk contoh penerapannya. */
.excel-grow-wrap {
    display: contents;
}

.excel-v-select {
    width: 100%;
    height: 100%;
}

.excel-v-select .vs__dropdown-toggle {
    border: none !important;
    border-radius: 0;
    height: 100%;
    min-height: 40px;
    background: transparent;
    display: flex;
    align-items: center;
}

.excel-raw-input:focus,
.excel-textarea:focus,
.excel-v-select.vs--open .vs__dropdown-toggle {
    background: #fff;
    box-shadow: inset 0 0 0 2px #217346 !important;
    z-index: 10;
}

.excel-cell-text {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.excel-tfoot-cell {
    vertical-align: middle;
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0;
    background-color: #f8f9fa !important;
    z-index: 6;
}

.excel-tfoot-label {
    z-index: 7;
    box-shadow: inset -1px 0 0 #d4d4d4;
}

.excel-col-frozen {
    position: sticky !important;
    z-index: 5;
    background-color: #fff !important;
    box-shadow: inset -1px 0 0 #d4d4d4;
}

tfoot .excel-col-frozen {
    z-index: 8 !important;
    background-color: #f8f9fa !important;
}

thead .excel-col-frozen {
    background-color: #f3f3f3 !important;
    z-index: 20;
}

.excel-container .pagination {
    margin-top: 0;
}

.excel-flatpickr {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    display: block;
}

.excel-input-container .form-control {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    padding: 10px 12px;
    font-size: 13px;
    background: transparent;
    cursor: pointer;
}

.excel-flatpickr:focus,
.excel-input-container .form-control:focus {
    background: #fff !important;
    box-shadow: inset 0 0 0 2px #217346 !important;
    z-index: 10;
}

.excel-input-container .flatpickr-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;
}

.excel-container .vs__dropdown-menu {
    z-index: 9999 !important;
    border: 1px solid #d4d4d4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.excel-container .vs--open .vs__dropdown-toggle {
    z-index: 10000;
}