/* ===== DOCUMENT WRAPPER ===== */
.pr-document-wrapper {
    max-width: 1350px;
    margin: 0 auto;
}

/* ===== DOCUMENT CARD ===== */
.pr-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 4px 24px 0 rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.dark .pr-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3);
}

/* ===== DOCUMENT HEADER ===== */
.pr-doc-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    border-bottom: 2px solid #e2e8f0;
}

.dark .pr-doc-header {
    border-bottom-color: #334155;
}

.pr-doc-logo-cell {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e2e8f0;
    min-width: 120px;
}

.dark .pr-doc-logo-cell {
    border-right-color: #334155;
}

.pr-doc-logo-text {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.05em;
}

.dark .pr-doc-logo-text {
    color: #f1f5f9;
}

.pr-doc-title-cell {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pr-doc-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.dark .pr-doc-title {
    color: #f1f5f9;
}

.pr-doc-meta-cell {
    border-left: 1px solid #e2e8f0;
    min-width: 200px;
}

.dark .pr-doc-meta-cell {
    border-left-color: #334155;
}

.pr-doc-meta-row {
    display: flex;
    align-items: flex-start;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    gap: 0.5rem;
}

.pr-doc-meta-row:last-child {
    border-bottom: none;
}

.dark .pr-doc-meta-row {
    border-bottom-color: #334155;
}

.pr-doc-meta-label {
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
}

.dark .pr-doc-meta-label {
    color: #94a3b8;
}

.pr-doc-meta-value {
    color: #0f172a;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.25;
    max-width: 180px;
    display: block;
}

.dark .pr-doc-meta-value {
    color: #f1f5f9;
}

/* ===== INFO SECTION ===== */
.pr-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 2px solid #e2e8f0;
}

.dark .pr-info-section {
    border-bottom-color: #334155;
}

.pr-info-group {
    padding: 1rem 1.5rem;
}

.pr-info-group:first-child {
    border-right: 1px solid #e2e8f0;
}

.dark .pr-info-group:first-child {
    border-right-color: #334155;
}

.pr-info-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem;
    gap: 0.75rem;
}

.pr-info-row:last-child {
    margin-bottom: 0;
}

.pr-info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    min-width: 130px;
    white-space: nowrap;
}

.dark .pr-info-label {
    color: #94a3b8;
}

.pr-info-colon {
    color: #94a3b8;
    font-weight: 600;
}

.pr-info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.dark .pr-info-value {
    color: #f1f5f9;
}

/* ===== NEEDS RADIO ===== */
.pr-needs-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.pr-radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
}

.dark .pr-radio-label {
    color: #cbd5e1;
}

.pr-radio-input {
    width: 1rem;
    height: 1rem;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* ===== TABLE SECTION ===== */
.pr-table-section {
    padding: 0;
}

.pr-table-label {
    padding: 0.875rem 1.5rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.dark .pr-table-label {
    color: #94a3b8;
    border-bottom-color: #334155;
    background: #0f172a;
}

.pr-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 294px;
    /* ≈ 6 baris */
}

.pr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.pr-table thead th {
    background: #f1f5f9;
    color: #374151;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.75rem 0.875rem;
    text-align: left;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 5;
}

.dark .pr-table thead th {
    background: #1e293b;
    color: #94a3b8;
    border-bottom-color: #475569;
}

.pr-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s;
}

.pr-table tbody tr:last-child {
    border-bottom: none;
}

.dark .pr-table tbody tr {
    border-bottom-color: #334155;
}

.pr-table tbody tr:hover {
    background: #f8fafc;
}

.dark .pr-table tbody tr:hover {
    background: #0f172a;
}

.pr-table td {
    padding: 0.75rem 0.875rem;
    vertical-align: top;
}

.pr-table .col-no {
    width: 4%;
    text-align: center;
    color: #94a3b8;
    font-weight: 700;
}

.pr-table .col-cat {
    width: 11%;
}

.pr-table .col-type {
    width: 30%;
}

.pr-table .col-priority {
    width: 12%;
}

.pr-table .col-size {
    width: 14%;
}

.pr-table .col-qty {
    width: 5%;
}

.pr-table .col-unit {
    width: 7%;
}

.pr-table .col-rem {
    width: 6%;
}

/* Hide number input spin buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.pr-table .col-images {
    width: 13%;
    min-width: 110px;
    text-align: center;
}

.pr-table .col-act {
    width: 9%;
    text-align: center;
}

/* ===== IMAGE UPLOAD CELL ===== */
.pr-image-upload-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Thumbnails container */
.pr-image-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
}

.pr-thumb-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    overflow: visible;
    flex-shrink: 0;
}

.pr-thumb-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid #cbd5e1;
}

.dark .pr-thumb-img {
    border-color: #475569;
}

.pr-thumb-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 10;
}

.pr-thumb-remove:hover {
    background: #dc2626;
}

/* Upload button */
.pr-upload-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.6rem;
    border: 1.5px dashed #94a3b8;
    border-radius: 0.375rem;
    cursor: pointer;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.15s;
    width: 100%;
    min-width: 80px;
    text-align: center;
    background: transparent;
}

.pr-upload-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.dark .pr-upload-btn {
    border-color: #475569;
    color: #94a3b8;
}

.dark .pr-upload-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.05);
}

/* ===== FORM INPUTS IN TABLE ===== */
.pr-field {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.pr-field:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark .pr-field {
    background: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

.dark .pr-field:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.pr-field-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 1.1em;
    padding-right: 2rem !important;
    cursor: pointer;
}

.pr-field-error {
    font-size: 0.7rem;
    color: #ef4444;
    margin-top: 0.2rem;
    display: block;
    font-weight: 600;
}

.pr-field-invalid {
    border: 2px solid #dc2626 !important;
    /* Reverted background-color as requested */
}

.dark .pr-field-invalid {
    border-color: #f87171 !important;
}

.pr-row-invalid {
    border-left: 4px solid #dc2626 !important;
}

.dark .pr-row-invalid {
    background-color: rgba(239, 68, 68, 0.05) !important;
}

/* ===== CUSTOM NOTIFICATION STYLE ===== */

/* ===== DELETE BUTTON ===== */
.pr-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    gap: 0.4rem;
    border-radius: 0.375rem;
    border: 1px solid #fca5a5;
    background: #fff1f2;
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: all 0.15s;
}

.pr-btn-delete:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

.dark .pr-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.dark .pr-btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* ===== FOOTER ACTIONS ===== */
.pr-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 1rem 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dark .pr-footer {
    border-top-color: #334155;
    background: #0f172a;
}

.pr-item-count {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.dark .pr-item-count {
    color: #94a3b8;
}

.pr-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ===== EMPTY STATE ===== */
.pr-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pr-card {
        width: 100%;
        max-width: 100vw;
        border-radius: 0.5rem;
    }

    /* ---- HEADER: logo atas, judul tengah, meta bawah ---- */
    .pr-doc-header {
        display: flex;
        flex-direction: column;
    }

    .pr-doc-logo-cell {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 0.6rem 1rem;
        justify-content: center;
        min-width: unset;
    }

    .dark .pr-doc-logo-cell {
        border-bottom-color: #334155;
    }

    /* Judul dokumen: rata tengah, font lebih kecil sedikit */
    .pr-doc-title-cell {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        align-items: center;
        text-align: center;
    }

    .dark .pr-doc-title-cell {
        border-bottom-color: #334155;
    }

    .pr-doc-title {
        font-size: 0.9rem;
        text-align: center;
    }

    /* Meta: no dokumen & tanggal terbit dalam satu baris per item, rata tengah */
    .pr-doc-meta-cell {
        border-left: none;
        border-top: none;
        min-width: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;  /* rata tengah */
    }

    .pr-doc-meta-row {
        flex-direction: column;
        align-items: center;  /* rata tengah */
        gap: 0.1rem;
        padding: 0.45rem 1rem;
        width: 100%;
        text-align: center;
    }

    /* Sembunyikan titik dua */
    .pr-doc-meta-row > span:nth-child(2) {
        display: none;
    }

    .pr-doc-meta-label {
        font-size: 0.68rem;
        color: #94a3b8;
        min-width: unset;
        text-align: center;
    }

    .pr-doc-meta-value {
        font-size: 0.875rem;
        max-width: 100%;
        text-align: center;
    }

    /* ---- INFO SECTION ---- */
    .pr-info-section {
        grid-template-columns: 1fr;
    }

    .pr-info-group {
        padding: 0.875rem 1rem;
    }

    .pr-info-group:first-child {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 0.75rem;
    }

    .dark .pr-info-group:first-child {
        border-bottom-color: #334155;
    }

    /* Baris "Nama Kapal" & "Kebutuhan" — label kecil di atas, nilai di bawah */
    .pr-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin-bottom: 0.75rem;
    }

    /* Sembunyikan titik dua */
    .pr-info-colon {
        display: none;
    }

    .pr-info-label {
        font-size: 0.7rem;
        color: #94a3b8;
        min-width: unset;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

    .pr-info-value {
        font-size: 0.875rem;
        font-weight: 700;
    }

    /* Nama Kapal & Kebutuhan berdampingan dalam satu baris */
    .pr-info-group:first-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
        align-items: start;
    }

    .pr-info-group:first-child .pr-info-row {
        margin-bottom: 0;
    }

    /* Needs radio: tampil horizontal */
    .pr-needs-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.25rem;
    }

    /* Waktu Pengajuan — rata tengah */
    .pr-info-row-time {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .pr-info-row-time .pr-info-label {
        text-align: center;
        width: 100%;
    }

    .pr-info-row-time .pr-info-value {
        text-align: center;
        width: 100%;
        font-size: 0.8rem;
    }

    /* Tujuan Pengiriman — input lebih kecil dan center */
    .pr-info-row-dest {
        align-items: center;
        margin-top: 0.75rem;
    }

    .pr-info-row-dest .pr-info-label {
        text-align: center;
        width: 100%;
    }

    .pr-info-row-dest > div {
        max-width: 85%;
        margin: 0 auto;
        width: 85%;
    }

    .pr-info-row-dest input[type="text"] {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.6rem !important;
        text-align: center;
    }

    /* ---- TABLE & FOOTER ---- */
    .pr-table-scroll {
        width: 100%;
        max-width: 100vw;
    }

    .pr-preview-table {
        min-width: unset;
    }


    /* Sesuaikan footer aksi form */
    .pr-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

    .pr-footer-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .pr-footer-actions > button,
    .pr-footer > button {
        width: 100%;
        justify-content: center;
    }

    /* Sesuaikan footer aksi di modal preview */
    .pr-modal-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pr-modal-footer-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .pr-modal-footer-actions > *,
    .pr-modal-footer-actions button {
        width: 100%;
        justify-content: center;
    }

    /* ---- IMAGE UPLOAD — mobile: tengah, penuh lebar ---- */
    .pr-table .col-images {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.5rem 0.75rem 0.75rem;
        border-top: 1px dashed #e2e8f0;
        background: rgba(248, 250, 252, 0.5);
    }

    .dark .pr-table .col-images {
        border-top-color: #334155;
        background: rgba(15, 23, 42, 0.3);
    }

    .pr-image-upload-cell {
        align-items: center;
        width: 100%;
    }

    .pr-upload-btn {
        width: auto;
        min-width: 140px;
        max-width: 200px;
        padding: 0.6rem 1.25rem;
        font-size: 0.75rem;
        margin: 0 auto;
    }

    .pr-image-thumbs {
        justify-content: center;
        gap: 0.4rem;
        margin-bottom: 0.25rem;
    }

    .pr-thumb-wrapper {
        width: 48px;
        height: 48px;
    }

    .pr-thumb-img {
        width: 48px;
        height: 48px;
    }
}


/* ===== PREVIEW MODAL OVERLAY ===== */
.pr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    backdrop-filter: blur(2px);
    animation: fadeInOverlay 0.2s ease;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== MODAL CONTAINER ===== */
.pr-modal-container {
    background: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    animation: slideUpModal 0.25s ease;
    overflow: hidden;
}

.dark .pr-modal-container {
    background: #1e293b;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

@keyframes slideUpModal {
    from {
        transform: translateY(24px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== MODAL HEADER ===== */
.pr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border-radius: 1.25rem 1.25rem 0 0;
    flex-shrink: 0;
}

.dark .pr-modal-header {
    border-bottom-color: #334155;
}

.pr-modal-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pr-modal-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.pr-modal-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.1rem;
}

.pr-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.pr-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===== MODAL BODY (scrollable) ===== */
.pr-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ===== INFO SUMMARY CARDS ===== */
.pr-preview-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

@media (max-width: 640px) {
    .pr-preview-info-grid {
        grid-template-columns: 1fr;
    }
}

.pr-preview-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.dark .pr-preview-info-card {
    background: #0f172a;
    border-color: #334155;
}

.pr-preview-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.dark .pr-preview-info-item {
    border-bottom-color: #1e293b;
}

.pr-preview-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pr-preview-info-item:first-child {
    padding-top: 0;
}

.pr-preview-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    min-width: 110px;
    white-space: nowrap;
}

.dark .pr-preview-info-label {
    color: #94a3b8;
}

.pr-preview-info-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .pr-preview-info-value {
    color: #f1f5f9;
}

.pr-preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    letter-spacing: 0.02em;
}

.dark .pr-preview-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* ===== ITEMS SECTION LABEL ===== */
.pr-preview-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.pr-preview-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dark .pr-preview-section-title {
    color: #94a3b8;
}

.pr-preview-total-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
}

.dark .pr-preview-total-badge {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ===== PREVIEW TABLE WRAPPER ===== */
.pr-preview-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.dark .pr-preview-table-wrap {
    border-color: #334155;
}

.pr-preview-table-scroll {
    overflow-x: auto;
}

/* ===== PREVIEW TABLE ===== */
.pr-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pr-preview-table thead th {
    background: #f1f5f9;
    color: #374151;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dark .pr-preview-table thead th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #475569;
}

.pr-preview-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    font-size: 0.875rem;
}

.dark .pr-preview-table td {
    border-bottom-color: #1e293b;
    color: #e2e8f0;
}

.pr-preview-table tbody tr:last-child td {
    border-bottom: none;
}

.pr-preview-table tbody tr:hover td {
    background: #f8fafc;
}

.dark .pr-preview-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.pr-preview-table .col-no {
    width: 40px;
    text-align: center;
}

.pr-preview-table .col-qty {
    width: 80px;
    text-align: center;
}

.pr-preview-table .col-unit {
    width: 80px;
    text-align: center;
}

.pr-preview-table .col-rem {
    width: 60px;
    text-align: center;
}

.pr-preview-table .col-priority {
    width: 120px;
    text-align: center;
}

/* ===== CATEGORY DIVIDER ROW ===== */
.pr-cat-divider td {
    background: linear-gradient(90deg, #eff6ff, #f8fafc) !important;
    border-top: 2px solid #bfdbfe !important;
    border-bottom: 1px solid #bfdbfe !important;
    padding: 0.5rem 1rem !important;
}

.dark .pr-cat-divider td {
    background: linear-gradient(90deg, rgba(30, 64, 175, 0.12), rgba(15, 23, 42, 0.5)) !important;
    border-top-color: rgba(59, 130, 246, 0.3) !important;
    border-bottom-color: rgba(59, 130, 246, 0.2) !important;
}

.pr-cat-divider-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dark .pr-cat-divider-label {
    color: #93c5fd;
}

/* ===== NO COLUMN ===== */
.pr-preview-table .col-no {
    width: 4%;
    text-align: center;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.75rem;
}

.pr-preview-table .col-qty,
.pr-preview-table .col-rem {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pr-preview-table .col-unit {
    color: #64748b;
    font-size: 0.8rem;
}

.dark .pr-preview-table .col-unit {
    color: #94a3b8;
}

/* ===== MODAL FOOTER ===== */
.pr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.75rem;
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 1.25rem 1.25rem;
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.dark .pr-modal-footer {
    border-top-color: #334155;
    background: #0f172a;
}

.pr-modal-footer-info {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.dark .pr-modal-footer-info {
    color: #94a3b8;
}

.pr-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pr-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.pr-btn-back:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.dark .pr-btn-back {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

.dark .pr-btn-back:hover {
    background: #334155;
}

.pr-btn-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    letter-spacing: 0.01em;
}

.pr-btn-confirm:hover {
    background: linear-gradient(135deg, #1e40af, #2563eb);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

.pr-btn-confirm:active {
    transform: translateY(0);
}

.pr-btn-confirm:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    /* ========== ITEM CARD: tampilan kartu per barang ========== */
    .pr-table thead { display: none; }

    /* ========== RESET TABEL MENJADI BLOCK DI MOBILE ========== */

    /* Hilangkan max-height dan scroll — kartu tidak boleh terpotong */
    .pr-table-scroll {
        overflow: visible !important;
        max-height: none !important;
        padding: 1rem;
        padding-top: 0.75rem;
    }

    /* Tabel jadi block agar tr/td benar-benar block */
    .pr-table {
        display: block !important;
        min-width: unset !important;
        width: 100% !important;
        border-collapse: separate;
    }

    /* tbody sebagai container kartu */
    .pr-table tbody {
        display: block;
    }

    /* ============================================================
       KARTU BARANG — setiap baris jadi kartu vertikal mandiri
    ============================================================ */
    .pr-table tbody tr {
        display: block;
        background: #0f172a;
        border: 1px solid #1e3a5f;
        border-radius: 1rem;
        margin-bottom: 1.25rem;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    .dark .pr-table tbody tr {
        background: #1a2744;
        border-color: #2a4a7f;
    }

    /* Semua td: block, reset padding */
    .pr-table tbody td {
        display: block;
        border: none;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Label mini di atas setiap field */
    .pr-table tbody td::before {
        display: block;
        font-size: 0.6rem;
        font-weight: 800;
        color: #64748b;
        margin-bottom: 0.3rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }

    /* ============================================================
       1. NOMOR BARANG — header penuh dengan latar biru
    ============================================================ */
    .col-no {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
        padding: 0.6rem 1rem !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        color: #bfdbfe !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-sizing: border-box;
    }
    .col-no::before {
        content: "Barang  #";
        margin-bottom: 0 !important;
        margin-right: 0.2rem;
        color: #93c5fd;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* ============================================================
       2. KATEGORI — sembunyikan (auto-isi di backend)
    ============================================================ */
    .col-cat {
        display: none !important;
    }

    /* ============================================================
       3. JENIS / NAMA BARANG — full width, center
    ============================================================ */
    .col-type {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.875rem 1rem !important;
        border-bottom: 1px solid #1e3a5f;
    }
    .col-type::before {
        content: "Jenis / Nama Barang";
        color: #60a5fa;
        margin-bottom: 0.4rem;
        text-align: center;
        display: block;
        width: 100%;
    }
    /* wrapper autocomplete full width */
    .col-type > div {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .col-type > div > div,
    .col-type #input-wrapper-0,
    [id^="input-wrapper-"] {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .col-type .pr-field {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem;
        padding: 0.55rem 0.75rem;
        background: rgba(15, 23, 42, 0.7);
        border-color: #334155;
        color: #e2e8f0;
        text-align: center;
    }
    .col-type .pr-field:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
    .col-type .pr-field::placeholder {
        text-align: center;
    }

    /* ============================================================
       4. UKURAN — full width (sama dengan jenis/nama)
    ============================================================ */
    .col-size {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.875rem 1rem !important;
        border-bottom: 1px solid #1e3a5f;
    }
    .col-size::before {
        content: "Ukuran / Spesifikasi";
        text-align: center;
        display: block;
        width: 100%;
    }
    .col-size .pr-field {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem;
        padding: 0.55rem 0.75rem;
        background: rgba(15, 23, 42, 0.7);
        border-color: #334155;
        text-align: center;
    }

    /* ============================================================
       5. JUMLAH & SISA — float kiri-kanan 50%+50%
          (float menghindari masalah whitespace inline-block)
    ============================================================ */
    .col-qty {
        float: left !important;
        display: block !important;
        width: 50% !important;
        padding: 0.875rem 0.5rem 0.875rem 1rem !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #1e3a5f;
        clear: none !important;
    }
    .col-qty::before {
        content: "Jumlah";
        text-align: center;
        display: block;
        width: 100%;
    }
    .col-qty .pr-field {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem;
        font-weight: 700;
        padding: 0.55rem 0.5rem;
        text-align: center;
        background: rgba(15, 23, 42, 0.7);
        border-color: #334155;
    }

    /* ============================================================
       5. SATUAN — sembunyikan (auto-isi)
    ============================================================ */
    .col-unit {
        display: none !important;
    }

    /* ============================================================
       6. SISA DI GUDANG — float kiri 50%, di samping Jumlah
    ============================================================ */
    .col-rem {
        float: left !important;
        display: block !important;
        width: 50% !important;
        padding: 0.875rem 1rem 0.875rem 0.5rem !important;
        box-sizing: border-box !important;
        border-left: 1px solid #1e3a5f;
        border-bottom: 1px solid #1e3a5f;
        clear: none !important;
    }
    .col-rem::before {
        content: "Sisa Gudang";
        text-align: center;
        display: block;
        width: 100%;
    }
    .col-rem .pr-field {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem;
        padding: 0.55rem 0.5rem;
        text-align: center;
        background: rgba(15, 23, 42, 0.7);
        border-color: #334155;
    }

    /* ============================================================
       7. KLASIFIKASI URGENSI — full width (sama dengan jenis/nama)
    ============================================================ */
    .col-priority {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.875rem 1rem !important;
        clear: both;
        border-bottom: 1px solid #1e3a5f;
    }
    .col-priority::before {
        content: "Klasifikasi Urgensi";
        text-align: center;
        display: block;
        width: 100%;
    }
    .col-priority .pr-field-select {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem;
        padding: 0.55rem 2rem 0.55rem 0.75rem;
        background: rgba(15, 23, 42, 0.7);
        border-color: #334155;
    }

    /* ============================================================
       8. TOMBOL HAPUS — baris penuh, di bawah urgensi
    ============================================================ */
    .col-act {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem !important;
        clear: both;
    }
    .col-act::before {
        content: none !important;
    }

    /* Padding section kartu agar tidak mepet tepi */
    .pr-table-section {
        padding-bottom: 0.5rem;
    }

    /* Tombol hapus — lebar di baris sendiri */
    .pr-btn-delete {
        padding: 0.5rem 1.5rem !important;
        border-radius: 9999px !important;
        flex-direction: row;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.78rem !important;
        border-color: rgba(239, 68, 68, 0.5);
        background: rgba(239, 68, 68, 0.12);
        color: #f87171;
        width: auto;
        min-width: 120px;
        justify-content: center;
    }
    .pr-btn-delete:hover {
        background: rgba(239, 68, 68, 0.25);
        border-color: rgba(239, 68, 68, 0.7);
    }
    .pr-btn-delete svg {
        width: 0.9rem !important;
        height: 0.9rem !important;
    }
    .pr-btn-delete span {
        font-size: 0.78rem !important;
        letter-spacing: 0.03em;
        font-weight: 700;
    }
}

/* =================================================================
   PREVIEW TABLE — Mobile Card Layout
================================================================= */
@media (max-width: 768px) {

    /* Reset wrapper */
    .pr-preview-table-wrap {
        border: none;
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    .pr-preview-table-scroll {
        overflow: visible !important;
    }

    /* Tabel jadi block */
    .pr-preview-table {
        display: block !important;
        min-width: unset !important;
        width: 100% !important;
    }

    .pr-preview-table thead {
        display: none !important;
    }

    .pr-preview-table tbody {
        display: block !important;
    }

    /* CATEGORY DIVIDER */
    .pr-cat-divider {
        display: block !important;
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }

    .pr-cat-divider td {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        background: linear-gradient(90deg, rgba(30, 64, 175, 0.2), transparent) !important;
        border: 1px solid rgba(59, 130, 246, 0.25) !important;
        border-radius: 0.5rem !important;
        margin: 0 !important;
    }

    /* DATA ROW — kartu */
    .pr-preview-table tbody tr:not(.pr-cat-divider) {
        display: block !important;
        background: #0f172a;
        border: 1px solid #1e3a5f;
        border-radius: 0.875rem;
        margin-bottom: 0.875rem;
        overflow: hidden;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.4);
    }

    .dark .pr-preview-table tbody tr:not(.pr-cat-divider) {
        background: #1a2744;
        border-color: #2a4a7f;
    }

    /* Reset semua td */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        color: #e2e8f0;
        text-align: left;
        float: none;
    }

    /* td:1 NOMOR — header bar */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(1) {
        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        color: #bfdbfe !important;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        text-align: center !important;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(1)::before {
        content: "Barang  # ";
        color: #93c5fd;
        font-weight: 600;
    }

    /* td:2 KATEGORI */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(2) {
        padding: 0.6rem 1rem 0 !important;
        font-size: 0.65rem !important;
        font-weight: 800;
        color: #60a5fa !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* td:3 JENIS/NAMA — menonjol */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(3) {
        padding: 0.2rem 1rem 0.6rem !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #f1f5f9 !important;
        line-height: 1.35;
        border-bottom: 1px solid #1e3a5f !important;
    }

    /* td:4 UKURAN */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(4) {
        padding: 0.5rem 1rem 0 !important;
        font-size: 0.78rem !important;
        color: #94a3b8 !important;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(4)::before {
        content: "Ukuran: ";
        font-size: 0.7rem;
        font-weight: 600;
        color: #64748b;
    }

    /* BARIS STATISTIK: Jumlah | Satuan | Sisa */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(5) {
        float: left !important;
        display: block !important;
        width: 33.33% !important;
        padding: 0.625rem 0.4rem !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        color: #f1f5f9 !important;
        border-top: 1px solid #1e3a5f !important;
        box-sizing: border-box !important;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(5)::before {
        content: "Jumlah";
        display: block;
        font-size: 0.55rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 0.2rem;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(6) {
        float: left !important;
        display: block !important;
        width: 33.33% !important;
        padding: 0.625rem 0.4rem !important;
        text-align: center !important;
        font-size: 0.82rem !important;
        color: #94a3b8 !important;
        border-top: 1px solid #1e3a5f !important;
        border-left: 1px solid #1e3a5f !important;
        border-right: 1px solid #1e3a5f !important;
        box-sizing: border-box !important;
        font-weight: 600 !important;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(6)::before {
        content: "Satuan";
        display: block;
        font-size: 0.55rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 0.2rem;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(7) {
        float: left !important;
        display: block !important;
        width: 33.33% !important;
        padding: 0.625rem 0.4rem !important;
        text-align: center !important;
        font-size: 0.82rem !important;
        color: #94a3b8 !important;
        border-top: 1px solid #1e3a5f !important;
        box-sizing: border-box !important;
        font-weight: 600 !important;
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(7)::before {
        content: "Sisa";
        display: block;
        font-size: 0.55rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 0.2rem;
    }

    /* URGENSI — baris penuh bawah */
    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(8) {
        clear: both !important;
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 1rem !important;
        text-align: center !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-top: 1px solid #1e3a5f !important;
        box-sizing: border-box !important;
        background: rgba(15, 23, 42, 0.5);
    }

    .pr-preview-table tbody tr:not(.pr-cat-divider) td:nth-child(8)::before {
        content: "Urgensi: ";
        font-size: 0.65rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Modal */
    .pr-modal-body {
        padding: 1rem !important;
    }

    .pr-modal-container {
        border-radius: 0.75rem;
        max-height: 95vh;
    }

    .pr-preview-info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* ---- SECTION LABEL: Daftar Barang yang Diminta + badge count ---- */
    .pr-preview-section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding: 0.625rem 0.875rem;
        background: rgba(30, 58, 138, 0.12);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 0.625rem;
    }

    .pr-preview-section-title {
        font-size: 0.7rem !important;
        white-space: normal;
        line-height: 1.3;
        color: #94a3b8 !important;
    }

    .pr-preview-total-badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.75rem !important;
        border-radius: 9999px !important;
        background: rgba(59, 130, 246, 0.2) !important;
        color: #93c5fd !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
        white-space: nowrap;
    }
}