/*
 * Form Tracking System CSS
 * Styling untuk form input dan halaman tracking (front-end dan admin modal)
 */

/* ==== Styles for Front-End ==== */

/* Form Style */
.tracking-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 25px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tracking-form-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    text-align: center;
}

.tracking-form .form-group {
    margin-bottom: 20px;
}

.tracking-form label:not(.radio-inline):not(.checkbox-group label) { /* Hindari styling label radio/checkbox */
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}

.tracking-form input[type="text"],
.tracking-form input[type="email"],
.tracking-form input[type="tel"],
.tracking-form textarea,
.tracking-form select { /* Penambahan select */
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
}

.tracking-form input[type="text"]:focus,
.tracking-form input[type="email"]:focus,
.tracking-form input[type="tel"]:focus,
.tracking-form textarea:focus,
.tracking-form select:focus { /* Penambahan select */
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 5px rgba(34, 113, 177, 0.2);
}

.tracking-form .submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #2271b1;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tracking-form .submit-button:hover {
    background-color: #135e96;
}

/* Styling untuk radio button dan checkbox */
.tracking-form .form-group .radio-inline,
.tracking-form .form-group .checkbox-group label {
    font-weight: normal;
    margin-right: 20px;
    display: inline-block; /* Agar sejajar */
    margin-bottom: 5px; /* Jarak jika wrap */
}
.tracking-form .checkbox-group {
    padding-top: 5px;
}

.tracking-form input[type="radio"],
.tracking-form input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

.tracking-form .required {
    color: red;
    margin-left: 3px;
}
.tracking-form small {
    font-size: 0.85em;
    color: #666;
    display: block;
    margin-top: 4px;
}


/* Success Message Style */
.tracking-success-message {
    max-width: 800px;
    margin: 20px auto; /* Penyesuaian margin */
    padding: 25px;
    background-color: #f0f9eb;
    border-left: 5px solid #52c41a;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.tracking-success-message h3 {
    color: #52c41a;
    margin-top: 0;
}

.tracking-success-message strong { /* Kode tracking */
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0;
    background-color: #e6f7ff;
    border: 1px dashed #1890ff;
    border-radius: 4px;
    color: #1890ff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Copy Button di Success Message */
.copy-code-container {
    margin-top: 15px;
}

.copy-code-button {
    background-color: #1890ff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.copy-code-button:hover {
    background-color: #40a9ff;
}


/* Tracking Page Style (Front-end) */
.tracking-page-container {
    max-width: 800px;
    margin: 0 auto;
}

.tracking-check-form {
    margin-bottom: 30px;
    padding: 25px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tracking-check-form h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    text-align: center;
}
/* Input dan button di tracking-check-form bisa menggunakan style .tracking-form di atas */

.tracking-result {
    padding: 25px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px; /* Jarak dari form cek */
}

.tracking-result h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 22px;
    text-align: center;
}

.tracking-details {
    margin-bottom: 20px;
}

.tracking-detail-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.tracking-detail-item:last-child {
    border-bottom: none;
}

.tracking-detail-item strong {
    display: inline-block;
    min-width: 150px; /* Lebar label */
    font-weight: 600;
    color: #444; /* Warna label lebih jelas */
}

/* Progress Bar Style (Front-end) */
.tracking-status-container {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.tracking-status-container h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.status-label {
    display: inline-block;
    padding: 5px 12px; /* Sedikit lebih lebar */
    border-radius: 15px; /* Lebih bulat */
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize; /* Agar konsisten kapitalisasinya */
}

.status-diterima { background-color: #3498db; }
.status-diproses { background-color: #f39c12; }
.status-selesai { background-color: #27ae60; }
.status-ditolak { background-color: #e74c3c; }
.status-sengketa { background-color: #e67e22; } /* Oranye tua */
/* Status untuk Keberatan */
.status-diajukan { background-color: #5bc0de; } /* Info blue */
.status-dalam-proses { background-color: #f0ad4e; } /* Warning orange */
.status-selesai-keberatan-diterima { background-color: #5cb85c; } /* Success green */
.status-selesai-keberatan-ditolak { background-color: #d9534f; } /* Danger red */
.status-selesai-mediasi { background-color: #777; } /* Gray */


.tracking-progress {
    margin-top: 25px;
    position: relative;
}

.progress-bar {
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    margin-bottom: 40px; /* Ruang untuk label step */
    position: relative;
    overflow: hidden; /* Agar fill tidak keluar dari radius */
}

.progress-fill {
    height: 100%;
    background-color: #2271b1; /* Warna utama */
    border-radius: 4px;
    transition: width 0.8s ease-in-out; /* Animasi lebih smooth */
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 0; /* Sejajar dengan progress-bar */
}

.progress-step {
    text-align: center;
    position: relative;
    width: 20%; /* Sesuaikan jika jumlah step berbeda */
}

.step-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc; /* Default marker abu-abu */
    display: block;
    margin: -6px auto 10px; /* Posisi di tengah bar */
    border: 2px solid #fff; /* Border putih agar kontras */
    box-shadow: 0 0 0 2px #ccc; /* Shadow luar marker */
    transition: background-color 0.3s, box-shadow 0.3s;
}

.progress-step.active .step-marker {
    background-color: #2271b1; /* Warna utama untuk step aktif */
    box-shadow: 0 0 0 2px #2271b1;
}

.step-label {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    position: absolute; /* Agar bisa diatur posisinya */
    top: 25px; /* Jarak dari marker */
    left: 50%;
    transform: translateX(-50%);
}

.progress-step.active .step-label {
    color: #2271b1; /* Warna utama untuk label step aktif */
    font-weight: 600;
}

.tracking-notes {
    margin-top: 20px; /* Konsistensi jarak */
    padding: 15px;
    background-color: #f0f8ff; /* Warna latar sedikit beda */
    border-left: 4px solid #2271b1; /* Border kiri dengan warna utama */
    border-radius: 0 3px 3px 0; /* Radius di sisi kanan */
}

.tracking-notes h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.status-notes {
    line-height: 1.6;
    color: #555;
    font-size: 14px; /* Ukuran font catatan */
}

/* Error Message (Front-end) */
.tracking-error {
    padding: 15px;
    margin-top: 20px;
    background-color: #fff2f0;
    border-left: 4px solid #ff4d4f;
    border-radius: 3px;
}

.tracking-error p {
    margin: 0;
    color: #e4393c;
}

/* Form Error Styles (JS-driven) */
.has-error input,
.has-error textarea,
.has-error select { /* Penambahan select */
    border-color: #ff4d4f !important;
}
.has-error .form-group > label:not(.radio-inline):not(.checkbox-group label) { /* Label utama di grup yang error */
    color: #ff4d4f !important;
}
.has-error .checkbox-group label,
.has-error .radio-inline { /* Untuk label radio/checkbox yang error */
    color: #ff4d4f !important;
}
.custom-error-message-js { /* Style jika menggunakan class ini dari JS */
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
    display: block; /* Pastikan di baris baru */
}

@media (max-width: 768px) {
    .progress-steps {
        display: none; /* Sembunyikan step text di mobile, bar tetap terlihat */
    }
    .tracking-detail-item strong {
        display: block; /* Label di atas value di mobile */
        margin-bottom: 5px;
        min-width: auto; /* Reset min-width */
    }
}

/* Tracking Dashboard Styles (Front-end) */
.tracking-dashboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Jarak antar item */
    margin-bottom: 30px;
    font-family: sans-serif; /* Font dashboard */
}

.tracking-dashboard-item {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex-grow: 1; /* Item akan berusaha memenuhi ruang yang tersedia */
    min-width: 150px; /* Lebar minimum item */
    border-left: 5px solid #ddd; /* Default border color */
}

.tracking-dashboard-item .dashboard-count {
    display: block;
    font-size: 2.5em; /* Ukuran angka count */
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.tracking-dashboard-item .dashboard-label {
    display: block;
    font-size: 1em; /* Ukuran label status */
    color: #555;
}

/* Warna spesifik untuk item dashboard berdasarkan status */
.tracking-dashboard-item.status-diproses-bg { border-left-color: #f39c12; }
.tracking-dashboard-item.status-diproses-bg .dashboard-count { color: #f39c12; }
.tracking-dashboard-item.status-selesai-bg { border-left-color: #27ae60; }
.tracking-dashboard-item.status-selesai-bg .dashboard-count { color: #27ae60; }
.tracking-dashboard-item.status-ditolak-bg { border-left-color: #e74c3c; }
.tracking-dashboard-item.status-ditolak-bg .dashboard-count { color: #e74c3c; }
.tracking-dashboard-item.status-sengketa-bg { border-left-color: #e67e22; }
.tracking-dashboard-item.status-sengketa-bg .dashboard-count { color: #e67e22; }

/* Objection Form Specifics */
.objection-form-container h4 { /* Judul section di form keberatan */
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.2em;
    color: #333;
}

.objection-form .radio-group label.radio-block {
    display: block; /* Membuat setiap radio button di baris baru */
    margin-bottom: 8px;
    font-weight: normal;
}

.objection-form .radio-group input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;
}


/* ==== Styles for Admin Modal Content ==== */
/* Pastikan ini tidak bentrok dengan style inline di PHP untuk .modal, .modal-content-wrapper, .modal-content */

.modal-content .entry-details-view {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Font standar admin WP */
    color: #3c434a; /* Warna teks standar admin WP */
    padding: 5px 15px 15px 15px; /* Padding dalam konten modal */
}

.modal-content .entry-details-title {
    font-size: 20px; /* Ukuran judul modal */
    font-weight: 600;
    color: #1d2327; /* Warna heading admin WP */
    margin-top: 10px; /* Jarak dari atas modal-content */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccd0d4; /* Border standar admin WP */
}

.modal-content .entry-tracking-code {
    font-size: 14px;
    margin-bottom: 15px;
    color: #50575e;
}
.modal-content .entry-tracking-code strong {
    color: #1d2327;
}

.modal-content .detail-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Kolom responsif, minimal 320px */
    gap: 25px; /* Jarak antar kolom/baris grid */
    margin-bottom: 20px;
}

.modal-content .detail-group {
    background-color: #f7f7f7; /* Latar belakang terang untuk grup */
    padding: 15px;             /* Padding di dalam grup */
    border: 1px solid #e5e5e5; /* Border terang untuk grup */
    border-radius: 4px;        /* Sudut membulat untuk grup */
}

.modal-content .detail-group h4 {
    margin-top: 0;
    margin-bottom: 15px; /* Lebih banyak jarak setelah heading */
    font-size: 16px;
    color: #1d2327;    /* Warna heading admin WP */
    padding-bottom: 10px; /* Jarak untuk border */
    border-bottom: 1px solid #dcdcde; /* Border yang jelas */
    font-weight: 600;   /* Pastikan tebal */
    line-height: 1.4;
}

.modal-content .detail-group p {
    margin-top: 0;
    margin-bottom: 10px; /* Jarak antar paragraf detail */
    line-height: 1.6;
    font-size: 14px; /* Ukuran font teks detail */
    word-wrap: break-word; /* Agar teks panjang tidak meluber */
}

.modal-content .detail-group p strong {
    font-weight: 600;
    color: #3c434a;
    min-width: 140px; /* Lebar minimum label, sesuaikan */
    display: inline-block; /* Agar min-width berlaku */
    margin-right: 5px; /* Jarak antara label dan value */
    vertical-align: top; /* Jika value panjang, label tetap di atas */
}
.modal-content .detail-group p span.value-text { /* Jika ingin membungkus value */
    display: inline-block;
    vertical-align: top;
}


.modal-content hr.detail-separator { /* Class khusus untuk HR di modal */
    border: 0;
    border-top: 1px solid #ccd0d4; /* Garis pemisah standar admin */
    margin: 25px 0; /* Jarak atas-bawah pemisah */
}

.modal-content .status-update-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccd0d4; /* Pemisah sebelum bagian update status */
}

.modal-content .status-update-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px; /* Judul bagian update status */
    font-weight: 600;
    color: #1d2327;
}

/* Styling untuk form table di dalam modal (WP-like) */
.modal-content .form-table {
    width: 100%;
    border-collapse: collapse;
}
.modal-content .form-table th,
.modal-content .form-table td {
    padding: 10px 0; /* Padding vertikal, horizontal diatur per elemen */
    vertical-align: top; /* Label sejajar dengan atas input */
    border-bottom: 1px solid #f0f0f1; /* Garis tipis antar baris form */
}
.modal-content .form-table tr:last-child th,
.modal-content .form-table tr:last-child td {
    border-bottom: none; /* Hilangkan border di baris terakhir */
}

.modal-content .form-table th {
    width: 180px; /* Lebar label form */
    font-weight: normal; /* Label tidak bold */
    text-align: left;
    padding-right: 20px; /* Jarak label ke input */
}

.modal-content .form-table td select,
.modal-content .form-table td textarea,
.modal-content .form-table td input[type="text"] { /* Jika ada input text */
    width: 100%;
    max-width: 450px; /* Batasi lebar input agar tidak terlalu panjang */
    padding: 8px;
    border: 1px solid #8c8f94; /* Border input WP */
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    box-sizing: border-box;
}
.modal-content .form-table td textarea {
    min-height: 100px; /* Tinggi minimal textarea */
}

.modal-content .form-table p.description {
    font-size: 13px; /* Ukuran font deskripsi WP */
    color: #646970; /* Warna deskripsi WP */
    margin-top: 5px;
}

.modal-content .submit { /* Kontainer tombol submit di form */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f1; /* Pemisah sebelum tombol */
    text-align: right; /* Tombol ke kanan */
}
/* Tombol di modal menggunakan class button WP */
.modal-content .button.button-primary {
    min-width: 100px;
}