/*
 * Hanya gaya yang tidak ada di core.css platform:
 * 1) gaya <style> milik index.vue & itinerary.vue (tidak ikut terkompilasi ke core.css),
 * 2) gaya khusus mockup (legenda, warna status, dan penyesuaian skin excel
 *    /ticket-train-visa untuk tabel Usulan Baru yang barisnya hasil merge).
 */

/* Select asli disembunyikan setelah diganti tampilan v-select. */
select[data-vselect] {
    display: none;
}

/* --- index.vue --- */
.text-link {
    text-decoration: underline;
}

.operational-table th.b-table-sticky-column:nth-child(2),
.operational-table td.b-table-sticky-column:nth-child(2) {
    /* !important wajib: aturan left:0 bawaan BootstrapVue berspesifisitas lebih tinggi. */
    left: var(--sticky-offset, 363px) !important;
}

.operational-table td.b-table-sticky-column {
    background-color: #fff !important;
    background-image: none !important;
}

.operational-table th.b-table-sticky-column {
    background-color: #f3f2f7 !important;
    background-image: none !important;
}

.operational-table tbody tr:hover td.b-table-sticky-column {
    background-color: #f6f6f9 !important;
}

.vs__dropdown-menu {
    z-index: 1055 !important;
}

.modal-itinerary-dialog {
    height: inherit;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* --- itinerary.vue --- */
.cursor-pointer {
    cursor: pointer;
}

.top-heading {
    border-radius: 10px;
}

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

.itinerary-table td {
    vertical-align: top;
    word-break: break-word;
}

.drag-handle {
    cursor: move;
    user-select: none;
}

.itinerary-table tr.is-dragging {
    opacity: 0.5;
}

/* --- khusus mockup --- */
.checkbox-list {
    max-height: 180px;
    overflow-y: auto;
}

/* Vuexy menimpa .modal-dialog-scrollable .modal-content jadi overflow: visible, akibatnya isi
   pop-up panjang menjulur melewati layar dan ikon close serta tombol submit baru terlihat
   setelah halaman digulir. */
.modal-dialog-scrollable .modal-content {
    overflow: hidden;
}

/* Tiga baris kamar tampil sejak awal (satu baris ~5.45rem), sisanya digulir di dalam pop-up. */
.room-composition-rows {
    max-height: 16.4rem;
    overflow-y: auto;
}

/* Strip tab sheet platform memakai <div>; di mockup pakai <button> supaya bisa difokus
   keyboard, jadi font bawaan tombol perlu disamakan lagi. */
.excel-sheet-tab {
    font-family: inherit;
}

/* Sel Usulan Baru berisi beberapa baris (jadwal penerbangan, check in/out, hotel +
   komposisi), sedangkan .excel-cell-text milik ExcelTable satu baris dan flex.
   Pola opt-in sama seperti kolom Description/Notes di ticket-train-visa.scss. */
.proposal-sheet .excel-td {
    vertical-align: top;
}

.proposal-sheet .excel-cell-text {
    display: block;
    white-space: normal;
}

.proposal-sheet .excel-td-center .excel-cell-text {
    text-align: center;
}

/* Kolom Status: kotak v-select mengisi penuh lebar sel. */
.proposal-sheet .excel-input-container {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 6px;
}

/* Zebra bawaan skin memakai nth-child, sedangkan satu trip di sini memakan beberapa baris
   sehingga bandnya terpotong sel merge. Band dipindah ke level trip. !important dipakai
   karena latar sel beku pada ExcelTable dan skin ttv juga !important. */
.proposal-sheet .excel-table tbody tr:nth-child(even) {
    background-color: transparent;
}

.proposal-sheet .excel-table tbody tr:nth-child(even) td.excel-col-frozen {
    background-color: #fff !important;
}

.proposal-sheet .excel-table tbody tr.proposal-trip-band {
    background-color: #f8f9fa;
}

/* :not(:hover) supaya sorot baris skin tetap menang saat kursor di atasnya. */
.proposal-sheet .excel-table tbody tr.proposal-trip-band:not(:hover) td.excel-col-frozen {
    background-color: #f8f9fa !important;
}

/* Baris pertama tiap trip jadi pemisah grup, seperti garis tebal antar blok di spreadsheet. */
.proposal-sheet tbody tr.proposal-row-start td {
    border-top: 2px solid #8a8a8a;
}

/* Sel aktif navigasi keyboard memakai warna focus ring sel editable skin ini. */
.proposal-sheet .excel-td:focus {
    outline: 2px solid #e4b022;
    outline-offset: -2px;
}

/* Sorot rute penerbangan mengikuti kolom Jadwal Flight /report/tabulation-data. */
.flight-leg-route {
    background-color: #ff0;
}

/* Warna kolom Paket mengikuti getPaketStyle() /seat-availability: latar per jenis paket dan
   warna teks mengikuti luminansi latar. Selektor sorot baris skin excel ikut disebut supaya
   warna paket tidak hilang saat baris disorot; !important dipakai karena aturan skinnya juga
   !important. */
.proposal-sheet td.proposal-package,
.proposal-sheet .excel-table tbody tr:hover td.proposal-package {
    background-color: var(--package-bg) !important;
    color: var(--package-fg);
    font-weight: 600;
}

.proposal-sheet td.proposal-package--sapphire-plus {
    --package-bg: #2cc2ff;
    --package-fg: #000;
}

.proposal-sheet td.proposal-package--sapphire {
    --package-bg: #007bff;
    --package-fg: #fff;
}

.proposal-sheet td.proposal-package--ruby {
    --package-bg: #dc3545;
    --package-fg: #fff;
}

.proposal-sheet td.proposal-package--onyx {
    --package-bg: #d7b143;
    --package-fg: #000;
}

.proposal-sheet td.proposal-package--yaqin {
    --package-bg: #ff9f43;
    --package-fg: #000;
}

.proposal-sheet td.proposal-package--default {
    --package-bg: #d7b143;
    --package-fg: #000;
}

.proposal-legend {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin: 0 1rem 1rem;
    padding: 0.75rem;
    background: #f3f2f7;
    border-radius: 0.357rem;
    font-size: 0.75rem;
    list-style: none;
}

/* Warna status mengikuti mockup Excel "saudi operation mockup" (8 Okt 2026).
   Kelas menempel pada wrapper v-select, jadi warnanya diteruskan ke kotak togglenya. */
.proposal-status .vs__dropdown-toggle {
    background-color: var(--status-bg, #fff);
    cursor: pointer;
}

.proposal-status .vs__selected {
    color: var(--status-fg, inherit);
    font-weight: 600;
}

/* Nilai dan daftar opsi status rata tengah seperti acuan mockup. Kolom pencarian v-select
   dinolkan supaya label terpilih benar-benar di tengah; opsi status hanya enam, tanpa pencarian. */
.proposal-status .vs__selected-options {
    justify-content: center;
}

.proposal-status .vs__search {
    flex-grow: 0;
    padding: 0;
}

.proposal-status-menu .vs__dropdown-option {
    text-align: center;
}

.proposal-status--confirmed {
    --status-bg: #fff3b0;
    --status-fg: #6b5500;
}

.proposal-status--paid {
    --status-bg: #c8f0d8;
    --status-fg: #14663a;
}

.proposal-status--done_approval {
    --status-bg: #cfe6fb;
    --status-fg: #12527f;
}

.proposal-status--not_confirmed {
    --status-bg: #fbd1d1;
    --status-fg: #8c1d1d;
}

.proposal-status--process_amendment {
    --status-bg: #ffe0bf;
    --status-fg: #8a4b00;
}

.proposal-status--requested {
    --status-bg: #e6ebf5;
    --status-fg: #41506b;
}

/* --- marcom-report: index.vue + <style scoped> SocialIg/SocialYt/SocialTiktok/TabContentPlan --- */
/* Strip tab sheet (.excel-sheet-tabs) nilainya sama dengan ticket-train-visa.css, jadi dipakai ulang;
   yang di bawah ini hanya gaya yang tidak ada di berkas vendor. */
/* Tujuh tab sheet lebih lebar dari layar ponsel; di mockup dibiarkan turun baris supaya
   halaman tidak ikut melebar ke samping. */
.marcom-report-compact .excel-sheet-tabs {
    flex-wrap: wrap;
}

.marcom-sub-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 4px 0;
    flex-wrap: wrap;
}

.marcom-sub-tab {
    padding: 5px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 14px;
    background: #eceff1;
    color: #555;
    user-select: none;
}

.marcom-sub-tab:hover {
    background: #dfe3e6;
}

.marcom-sub-tab.active {
    background: #7367f0;
    color: #fff;
    font-weight: 600;
}

.marcom-report-compact .filter-data-row .vs__dropdown-toggle,
.marcom-report-compact .filter-data-row .form-control {
    background-color: #fff;
    height: 38px;
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

.marcom-report-compact .filter-data-row .vs__dropdown-toggle {
    align-items: center;
}

/* v-select dalam sel menyatu dengan tabel, sama seperti skin .ttv-sheet. */
.marcom-report-compact .excel-input-container {
    min-height: 0;
    align-items: center;
}

.marcom-report-compact .excel-input-container .excel-v-select {
    width: 100%;
}

.marcom-report-compact .excel-input-container .vs__dropdown-toggle {
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: 1px 4px;
    border: none;
    align-items: center;
}

.marcom-report-compact .excel-input-container .vs__selected-options {
    align-items: center;
    flex-wrap: nowrap;
    flex: 1 1 auto;
}

.marcom-report-compact .excel-input-container .vs__selected {
    margin: 0 2px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.marcom-report-compact .excel-input-container .vs__search {
    margin: 1px 2px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.4;
}

.marcom-report-compact .excel-input-container .vs__actions {
    padding: 0 4px;
    flex-shrink: 0;
}

/* !important wajib: aturan fokus .excel-v-select.vs--open di excel-table.css juga !important. */
.marcom-report-compact .excel-input-container .excel-v-select.vs--open .vs__dropdown-toggle {
    box-shadow: inset 0 0 0 2px #e4b022 !important;
}

/* Lebar kolom jadi lebar minimum, bukan lebar pasti, supaya header grup tidak terpotong. */
.marcom-report-compact .excel-table {
    table-layout: auto;
}

.marcom-report-compact .per-page-selector {
    width: 90px;
}

.dmp-table .excel-th {
    padding: 10px 8px;
}

.marcom-computed-cell {
    font-size: 13px;
    padding: 10px 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.marcom-list-cell {
    min-height: 40px;
    height: 100%;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.marcom-list-cell > * {
    flex: 1;
}

.marcom-list-ol,
.marcom-list-ul {
    font-size: 12px;
    line-height: 1.5;
    padding-left: 18px;
    margin: 0;
    word-break: break-word;
}

.marcom-list-empty {
    color: #adb5bd;
    font-size: 13px;
}

.marcom-content-cell {
    min-width: 240px;
    padding: 8px 10px;
}

.marcom-content-entry {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    gap: 4px;
}

.marcom-content-entry:last-child {
    margin-bottom: 0;
}

.marcom-content-text {
    font-size: 12px;
    white-space: pre-line;
    word-break: break-word;
}

.marcom-content-link {
    max-width: 300px;
}

.marcom-content-thumb-wrap {
    position: relative;
    width: 100%;
    line-height: 0;
}

/* Gambar di platform memakai @click pada <img>; di mockup pemicunya <button> supaya bisa
   difokus keyboard, jadi tombolnya dibuat transparan setipis mungkin. */
.marcom-thumb-button {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.marcom-content-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 4px;
    line-height: 1;
    border: none;
    border-radius: 4px;
    background: rgba(234, 57, 67, 0.85);
    color: #fff;
    z-index: 2;
}

.marcom-content-remove:hover {
    background: rgba(180, 40, 48, 0.95);
    color: #fff;
}

.marcom-content-thumb,
.tiktok-image-thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #d4d4d4;
    cursor: pointer;
}

.tiktok-image-cell {
    min-width: 140px;
    padding: 8px 10px;
}

.tiktok-image-thumb {
    margin: 0 auto 6px;
}

/* Nomor urut pop-up daftar lebarnya dikunci supaya kolom inputnya rata. */
.marcom-line-number {
    min-width: 24px;
}

/* ===== /process-equipment ===== */
/* Blok <style> process.vue platform (switch "Kirim nanti", tombol hapus evidence, item di bawah kuota). */
.btn-delete {
    position: absolute;
    right: 4px;
    top: 4px;
}

.option-later {
    position: absolute;
    right: 0;
    top: 0;
}

.option-later .custom-control-label {
    font-size: 11px;
}

.equipment-below-min {
    opacity: 0.6;
    color: #6c757d;
}

.wrap-equipment-process {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.process-equipment-table {
    max-height: 70vh;
}

.process-equipment-table .b-avatar-img img {
    object-fit: cover;
}

/* ===== Pratinjau dokumen generate (/process-equipment) ===== */
.doc-preview {
    background: #e9ecef;
    padding: 16px;
    border-radius: 6px;
}

.doc-toolbar {
    margin-bottom: 10px;
}

.doc-excel-scroll {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #ced4da;
}

.doc-excel {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 100%;
    white-space: nowrap;
}

.doc-excel caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 8px 10px;
    color: #2f2f2f;
}

.doc-excel th,
.doc-excel td {
    border: 1px solid #b7c0cd;
    padding: 6px 10px;
}

.doc-excel thead th {
    background: #217346;
    color: #fff;
    text-align: center;
    font-weight: 700;
}

.doc-excel tbody tr:nth-child(even) {
    background: #f2f7f4;
}

/* Lembar kertas untuk pratinjau PDF */
.doc-paper {
    background: #fff;
    margin: 0 auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.doc-a4 {
    width: 100%;
    max-width: 720px;
    padding: 28px;
}

.doc-labels-flow {
    max-width: 640px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.doc-brand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #d0ac4e;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.doc-brand strong {
    color: #0b6b3a;
    letter-spacing: 1px;
}

.doc-brand span {
    font-size: 11px;
    color: #777;
    text-transform: uppercase;
}

/* Shipment label */
.doc-shipment {
    position: relative;
    width: 280px;
    min-height: 200px;
    border: 1px solid #d0ac4e;
    border-radius: 6px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fffdf6, #fff);
}

.doc-shipment dl {
    margin: 0;
    font-size: 13px;
}

.doc-shipment dt {
    color: #777;
    font-weight: 400;
    margin-top: 6px;
}

.doc-shipment dd {
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
}

.doc-qr {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 2px solid #d0ac4e;
    border-radius: 6px;
    padding: 2px;
    text-align: center;
    background: #fff;
}

.doc-qr small {
    display: block;
    font-size: 9px;
    color: #999;
}

/* Name label grid (A4) */
.doc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.doc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.doc-grid-cell {
    border: 1px dashed #888;
    padding: 8px;
}

.doc-namecard {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.doc-photo {
    flex: 0 0 56px;
}

.doc-photo img {
    width: 56px;
    height: 78px;
    object-fit: cover;
    border: 1px solid #ccc;
}

.doc-name-label {
    color: #777;
    font-size: 11px;
}

.doc-name {
    display: block;
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.doc-namecard table,
.doc-laundrycard table {
    font-size: 12px;
}

.doc-namecard td:first-child,
.doc-laundrycard td:first-child {
    color: #555;
    padding-right: 6px;
}

.doc-namelabel-old {
    width: 260px;
    border: 1px solid #ccc;
    padding: 10px;
}

.doc-laundrycard {
    width: 100%;
}

.doc-laundry-old {
    width: 280px;
    border: 1px solid #ccc;
    padding: 10px;
}

/* Envelope label (tag bernomor dua kolom) */
.doc-env-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.doc-envtag {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    border: 3px solid #000;
    font-weight: 700;
    text-align: center;
    align-items: stretch;
}

.doc-envtag > span {
    padding: 6px 4px;
}

.doc-env-no {
    border-right: 3px solid #000;
}

.doc-env-name {
    text-align: left;
    padding-left: 8px;
    font-size: 13px;
}

.doc-env-gender {
    border-left: 3px solid #000;
}

/* Album / Absensi Kepulangan */
.doc-absensi-head {
    text-align: center;
    margin-bottom: 14px;
}

.doc-absensi-head h3 {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.doc-absensi-head h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: #333;
}

.doc-absensi {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.doc-absensi th,
.doc-absensi td {
    border: 1px solid #000;
    padding: 6px 8px;
    text-align: center;
}

.doc-absensi td:nth-child(3) {
    text-align: left;
}

.doc-shipment .doc-brand {
    padding-right: 64px;
}

/* ===== /manifest-haji ===== */
/* Gaya <style> index.vue platform: kartu ringkasan, legenda warna, dan pewarnaan baris excel. */
.haji-summary-card {
    border: 1px solid #ebe9f1;
    box-shadow: none;
}

.color-code {
    font-size: 100%;
    margin-right: 0.5rem;
}

.haji-legend {
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.haji-legend:hover {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.haji-legend-batal { background-color: #ef9a9a; color: #000; }
.haji-legend-batal-pindah-pin { background-color: #d32f2f; color: #fff; }
.haji-legend-belum-proses { background-color: #fdf4b8; color: #7d6a12; }
.haji-legend-berhak-lunas { background-color: #f1e4f6; color: #7b3fa0; }
.haji-legend-pindah-pin { background-color: #eceff1; color: #5a6a73; }
.haji-legend-mou { background-color: #e4f1e5; color: #3e7a42; }
.haji-legend-baru-daftar { background-color: #e67e22; color: #4a2a06; }
.haji-legend-porsi-ada { background-color: #fff; color: #5e5e5e; }
.haji-legend-porsi-draft { background-color: #e3eefc; color: #3a6ea8; }

.haji-legend-active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45); }
.haji-legend-dim { opacity: 0.45; }

.excel-table .haji-alumni-badge {
    cursor: pointer;
    font-size: 10px;
    padding: 2px 6px;
}

.excel-table .haji-name-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.excel-table td.haji-filling-cell {
    vertical-align: middle;
}

.excel-table td.haji-filling-cell input.excel-raw-input {
    text-align: center;
}

/* Pewarnaan baris mengikuti rowAppearance(); kolom beku ikut diwarnai supaya tidak belang.
   !important diperlukan karena skin excel platform menetapkan background per sel. */
.haji-table tr.row-batal td { background-color: #ef9a9a !important; color: #000 !important; }
.haji-table tr.row-batal-pindah-pin td { background-color: #d32f2f !important; color: #fff !important; }
.haji-table tr.row-belum-proses td { background-color: #fdf4b8 !important; }
.haji-table tr.row-berangkat td { background-color: #d1ac50 !important; }
.haji-table tr.row-berhak-lunas td { background-color: #f1e4f6 !important; }
.haji-table tr.row-pindah-pin td { background-color: #eceff1 !important; }
.haji-table tr.row-porsi-ada td { background-color: #fff !important; }
.haji-table tr.row-mou-terkirim td { background-color: #e4f1e5 !important; }
.haji-table tr.row-porsi-draft td { background-color: #e3eefc !important; }
.haji-table tr.row-baru-daftar td { background-color: #e67e22 !important; }

/* Tab Kemenhaj */
.kemenhaj-summary-card {
    padding: 10px 14px;
    background: #f5f1e9;
    border-radius: 6px;
}

tr.kemenhaj-row-matched td {
    background-color: #fbf5e6 !important;
}

/* Tab Report: pemilih kolom + daftar urutan kolom */
.haji-report-column-menu {
    max-height: 320px;
    overflow-y: auto;
    min-width: 320px;
}

.haji-report-column-list {
    max-height: 220px;
    overflow-y: auto;
}

.haji-report-order-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #ebe9f1;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #fff;
    cursor: grab;
    user-select: none;
}

.haji-report-order-item:active { cursor: grabbing; }
.haji-report-grip { pointer-events: none; }
.haji-report-remove { cursor: pointer; }

/* Pop-up Kelola Status: input menyatu dengan sel tabel */
.status-seamless-input {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.status-seamless-input:hover { border-color: #d8d6de; }
.status-seamless-input:focus { background-color: #fff; }

/* Pop-up Portion Number Details */
.portion-detail-body { padding: 1.25rem 1.5rem; }

.portion-detail-hero {
    text-align: center;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #f8f9fa;
}

.portion-detail-hero-label {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6e6b7b;
}

.portion-detail-hero-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #222;
    word-break: break-all;
}

.portion-detail-list { margin: 0; }

.portion-detail-item {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.portion-detail-item dt { flex: 0 0 130px; font-weight: 500; color: #6e6b7b; }
.portion-detail-item dd { flex: 1; margin: 0; color: #222; word-break: break-word; }
.portion-detail-notes { white-space: pre-line; }

.portion-detail-group-title {
    margin: 1.25rem 0 0.25rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6e6b7b;
}

.portion-detail-files { list-style: none; padding: 0; margin: 0; }
.portion-detail-files li { display: flex; align-items: center; padding: 0 0 0.3rem; word-break: break-word; }

/* Ikon ringkasan verifikasi berkas (style.scss platform) */
.checklistbox { padding: 4px; color: #fff; }

/* Empat tab sheet manifest-haji lebih lebar dari layar ponsel; dibiarkan turun baris
   supaya halaman tidak ikut melebar ke samping (pola yang sama dengan marcom-report). */
@media (max-width: 767px) {
    .excel-sheet-tabs {
        flex-wrap: wrap;
    }
}

/* --- Filter by Month (replika @core/components/month-filter/MonthFilter.vue) --- */
.month-picker-wrap {
    position: relative;
}

.month-picker-wrap .drop-view {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    padding: 16px;
    border-radius: 6px;
}

.month-picker-wrap .clicked {
    cursor: pointer;
}

.month-picker-wrap .item-list {
    cursor: pointer;
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
    border-radius: 10px;
    text-align: center;
}

.month-picker-wrap .month-grid-label {
    margin-bottom: 0.3rem;
}

/* --- /daily-stock-production (usulan tampilan baru /process-equipment) --- */
/* Mengikuti Table Style JI: wrapper .sp-table membungkus ExcelTable, sel hitung read-only
   dan seluruh kolom nominal rata kanan lewat class (tanpa inline style). */
.stock-production-compact .per-page-selector {
    width: 90px;
}

.stock-production-compact .filter-data-row .form-control {
    background-color: #ffffff;
}

/* .excel-cell-text adalah flex container, jadi sel hitung dibuat mengisi penuh supaya
   perataan teksnya benar-benar terpakai (induknya yang memberi padding). */
.sp-computed-cell {
    flex: 1;
    font-size: 13px;
}

/* Nominal/angka rata kanan — wajib per standar kolom uang. */
.sp-table .excel-td-right .excel-raw-input,
.sp-table .excel-td-right .excel-cell-text {
    text-align: right;
}

.sp-table .excel-td-right .excel-cell-text {
    justify-content: flex-end;
}

.sp-table .excel-td-center .excel-cell-text {
    text-align: center;
}

/* Penanda jenis paket LHPP: X = diberikan, R = returnable. */
.sp-flag-cell {
    text-align: center;
}

.sp-flag {
    display: inline-block;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.sp-flag--given {
    color: #0b6b3a;
    background: #e7f4ec;
}

.sp-flag--return {
    color: #a8812f;
    background: #f7eed8;
}

/* Baris TOTAL mengikuti baris "TOTAL :" di sheet LHPP. */
.sp-table tr.sp-total-row td {
    background: #f5f1e9;
    font-weight: 700;
}

/* Kolom yang punya catatan varian/SKU (di sheet ditulis sebagai baris di atas header). */
.header-label-wrapper--note {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* --- /recap-pengiriman (usulan tampilan baru /process-equipment) --- */
.pengiriman-compact .per-page-selector {
    width: 90px;
}

/* ExcelTable platform memotong judul kolom dengan ellipsis; di sini nama item perlengkapan
   harus terbaca utuh, jadi judulnya dibiarkan turun baris. */
.pengiriman-compact .excel-th {
    white-space: normal;
    text-overflow: clip;
    vertical-align: bottom;
    padding: 8px 10px;
    line-height: 1.35;
}

.pengiriman-compact .excel-th .header-label-wrapper {
    overflow-wrap: anywhere;
}

.pengiriman-compact .filter-data-row .form-control {
    background-color: #ffffff;
}

/* Baris aksi di atas toolbar: ringkasan status di kiri, kontrol seleksi massal di kanan. */
.rp-actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rp-actionbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

/* Ringkasan status pengiriman (turunan tanggal) yang sekaligus jadi filter cepat. */
.rp-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rp-summary__chip {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid #ebe9f1;
    border-radius: 999px;
    color: #6e6b7b;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    cursor: pointer;
}

.rp-summary__chip:hover {
    border-color: #d1ac50;
}

.rp-summary__count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    color: #1d1712;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    background: #e6e2db;
}

.rp-summary__chip--secondary.is-active { color: #5e5873; border-color: #b9b9c3; background: #f3f2f7; }
.rp-summary__chip--warning.is-active { color: #b8741a; border-color: #e39a2e; background: #fceed4; }
.rp-summary__chip--info.is-active { color: #3e77c4; border-color: #3e77c4; background: #e9f0fb; }
.rp-summary__chip--success.is-active { color: #3e9268; border-color: #3e9268; background: #e7f4ec; }

/* Badge status di dalam sel tabel. */
.rp-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.rp-status--secondary { color: #5e5873; background: #f3f2f7; }
.rp-status--warning { color: #b8741a; background: #fceed4; }
.rp-status--info { color: #3e77c4; background: #e9f0fb; }
.rp-status--success { color: #3e9268; background: #e7f4ec; }

/* Kolom centang seleksi massal. */
.rp-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    color: #6e6b7b;
    background: none;
    cursor: pointer;
}

.rp-check[aria-pressed="true"] {
    color: #d1ac50;
}

/* Kolom identifier: nama jamaah, lalu tombol Action + label status di bawahnya. */
.rp-jamaah {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/* `!important` menimpa tinggi penuh `.excel-raw-input` bawaan ExcelTable, karena di sel ini
   input hanya mengisi baris pertama. */
.rp-jamaah__name {
    height: auto !important;
    padding: 8px 10px 2px;
    font-weight: 600;
}

.rp-jamaah__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 0 10px 8px;
}

.rp-jamaah__actions .btn {
    padding: 4px 8px;
    font-size: 11px;
}

.rp-jamaah__actions .rp-status {
    padding: 3px 8px;
    font-size: 10px;
}

/* Baris terpilih ditandai seperti b-table-row-selected Vuexy. `!important` dipakai karena sel
   beku ExcelTable mengunci background-nya dengan `!important` juga. */
.excel-table tbody tr.rp-row-selected .excel-td,
.excel-table tbody tr.rp-row-selected td.excel-col-frozen {
    background-color: #f6f1e4 !important;
}

.rp-item-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}