/* File: assets/css/meta-box-app.css */

/* General list item style for Questions and Answers */
.list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.list-item input[type="text"] {
    flex-grow: 1;
}

/* Q&A Points Meta Box styles */
.qa-point-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.qa-point-row:last-child {
    border-bottom: none;
}

.qa-labels {
    flex-grow: 1;
}

.qa-labels span {
    color: #555;
    font-style: italic;
}

.qa-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

#sn-qa-points-container details {
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
}

#sn-qa-points-container summary {
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    background: #f7f7f7;
}

#sn-qa-points-container details[open] > summary {
    border-bottom: 1px solid #ccd0d4;
}

.qa-answers-group {
    padding: 10px;
}

/* Sedikit penyesuaian untuk baris jawaban di dalam details */
.qa-point-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f1;
}

.qa-point-row:last-child {
    border-bottom: none;
}

/* Result Mapping Editor Styles */
.result-rule {
    background-color: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rule-logic {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.conditions-wrapper {
    background-color: #f9f9f9;
    border: 1px dashed #dcdcdc;
    padding: 10px;
    border-radius: 3px;
}

.condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.condition-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.condition-row:first-child {
    padding-top: 0;
}

.condition-row .condition-type-selector {
    flex-basis: 150px; /* Give the type selector a fixed width */
}

/* Style for the "AND" text to make it clear */
.condition-row span:first-of-type {
    font-weight: bold;
    color: #555;
    margin-right: 5px;
}

.result-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-wrapper span {
    font-weight: bold;
}

.result-wrapper .large-text {
    flex-grow: 1;
}

.conditions-wrapper .add-condition-btn {
    margin-top: 10px;
    text-align: center;
}

.result-rule > .button.button-small {
    align-self: flex-end; /* Align remove rule button to the right */
}

.button-link.button-link-delete {
    color: #d63638;
    text-decoration: none;
    font-size: 1.2em;
    padding: 0 5px;
    margin-left: auto; /* Push remove button to the end */
    cursor: pointer;
}
.button-link.button-link-delete:hover {
    color: #a02324;
}

/* Style agar dropdown Spot On berdampingan */
.spot-on-selector-group {
    display: flex;
    align-items: center;
    gap: 10px; /* jarak antar elemen */
    margin-bottom: 10px; /* jarak bawah tiap grup */
}
.spot-on-selector-group label {
    min-width: 150px; /* lebar label agar rapi */
}

/* File: assets/css/meta-box-app.css */

/* Styling for individual result rule as a collapsible section */
.result-rule {
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #fff;
}

.result-rule summary {
    padding: 10px 15px;
    font-weight: 600;
    cursor: pointer;
    background-color: #f6f7f7;
    border-bottom: 1px solid #ccd0d4;
}

/* Remove bottom border when details is open */
.result-rule[open] > summary {
    border-bottom: 1px solid #ccd0d4;
}

.result-rule .result-rule-controls {
    padding: 15px;
}

.result-rule summary:hover {
    background-color: #f0f0f1;
}

/* --- Styling for Draggable Result Rules --- */

/* Style the main container for each rule */
.result-rule {
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
}

/* Use Flexbox on the summary to align items in one row */
.result-rule > summary {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 8px; /* Space between items */
    padding: 10px;
    font-weight: 600;
    cursor: pointer;
    background-color: #f6f7f7;
}

.result-rule[open] > summary {
    border-bottom: 1px solid #ccd0d4;
}

.result-rule > summary:hover {
    background-color: #f0f0f1;
}

/* Style the drag handle */
.drag-handle {
    cursor: move; /* Change cursor to show it's draggable */
    font-size: 16px;
    color: #50575e;
}

/* Style the text part of the summary */
.summary-text {
    flex-grow: 1; /* Allow text to take up remaining space */
}

/* Padding for the content inside the collapsible area */
.result-rule .result-rule-controls {
    padding: 15px;
}

/* Indikator saat elemen diseret di atas target */
.result-rule.drag-over {
    border-top: 2px solid #2271b1; /* Warna biru WordPress */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Sedikit style untuk elemen yang sedang di-drag */
.result-rule:not([open]) {
    /* Mencegah konten terbuka saat di-drag */
    pointer-events: none;
}
.result-rule summary {
    pointer-events: auto; /* Pastikan summary tetap bisa diklik */
}
/* --- Preview & Generate Meta Box --- */

.sn-preview-controls-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    align-items: flex-end; /* Aligns items to the bottom */
    gap: 15px; /* Space between control groups */
    padding: 15px;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    background-color: #f6f7f7;
}

.sn-preview-controls-container .control-group {
    display: flex;
    flex-direction: column; /* Stack label on top of select */
    gap: 4px; /* Space between label and select */
}

.sn-preview-controls-container .control-group label {
    font-weight: 600;
    font-size: 13px;
}

.sn-preview-controls-container select {
    min-width: 150px;
}

#sn-preview-result-container {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    background: #fff;
    min-height: 50px;
}

/* CSS for Override Modal */
.sn-modal-hidden {
    display: none;
}

.sn-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sn-modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 4px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.sn-modal-content h3 {
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.sn-modal-question-group {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.sn-modal-question-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 5px;
}

.sn-modal-question-group strong {
    display: block;
    margin-bottom: 10px;
}

.sn-modal-answer-label {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

.sn-modal-answer-label input {
    margin-right: 8px;
}

.result-text-content {
    margin-top: 10px;
}

/* --- Cartesian Chart Styles --- */
.result-top {
    margin-bottom: 10px;
}

.result-middle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.result-left {
    margin-right: 10px;
}

.result-right {
    margin-right: 10px;
}

.result-bottom {
    margin-top: 10px;
}

.preview-top {
    margin-bottom: 10px;
}

.preview-middle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.preview-left {
    margin-right: 10px;
}

.preview-right {
    margin-right: 10px;
}

.preview-bottom {
    margin-top: 10px;
}
.cartesian-container {
    position: relative;
    width: 300px;  /* Sesuaikan ukuran jika perlu */
    height: 300px; /* Sesuaikan ukuran jika perlu */
    border: 1px solid #ccc;
}

.axis {
    position: absolute;
    background-color: #aaa;
}

.x-axis {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.y-axis {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
}

.user-point {
    position: absolute;
    width: auto; /* Lebar otomatis sesuai konten */
    height: auto; /* Tinggi otomatis sesuai konten */
    
    /* Variabel CSS untuk posisi, akan diisi dari style inline */
    --score-x: 0; 
    --score-y: 0;

    /* Kalkulasi posisi titik */
    left: calc(50% + (var(--score-x) * 50%));
    top: calc(50% - (var(--score-y) * 50%));
    
    /* Pusatkan asterisknya */
    transform: translate(-50%, -50%);
}

/* Ini untuk membuat asterisk merah tebal */
.user-point::before {
    content: '*';
    font-size: 24px;
    font-weight: bold;
    color: #db4437; /* Merah */
    line-height: 1;
}

/* Ini untuk menampilkan teks koordinat di sebelah kanan asterisk */
.user-point::after {
    /* Ambil nilai dari atribut data-* */
    content: ' (' attr(data-x) ', ' attr(data-y) ')'; 
    position: absolute;
    left: 100%; /* Posisi di sebelah kanan */
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #333;
    background: rgba(255, 255, 255, 0.7); /* Latar belakang semi-transparan */
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap; /* Pastikan teks tidak patah baris */
}

/* Override Modal Sticky Header */
.sn-modal-sticky-header {
    position: sticky;
    top: 0;
    background-color: #f9f9f9; /* Changed to a slightly lighter solid background color */
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    z-index: 10;
    margin: -15px -15px 15px -15px; /* Adjust to align with modal padding */
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sn-modal-scores {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sn-modal-sticky-header p {
    margin: 0;
    font-weight: bold;
    font-size: 14px;
}

.sn-modal-sticky-header span {
    display: inline-block;
    margin-right: 15px;
    background-color: #e0e0e1;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: monospace;
}

.sn-modal-content {
    max-height: 70vh;
    overflow-y: auto;
}

.point-arrows {
    font-weight: bold;
    color: #007cba;
    margin-left: 8px;
}

/* Fix for vertical alignment issues in override modal labels */
.sn-modal-answer-label {
    display: flex;
    align-items: center; /* This will vertically align all items in the label */
    gap: 5px; /* Adds a little space between the radio and the text */
}

.sn-modal-answer-label input[type="radio"] {
    margin-top: 0; /* Resetting any default browser margins */
}

.rule-action-buttons {
    margin-top: 10px;
}

.preview-rule-btn {
    float: right;
}

.quill-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.quill-toolbar {
    border: 1px solid #ccc;
}
.quill-editor {
    border: 1px solid #ccc;
    min-height: 100px;
}

.sn-pm-validation-error {
    color: #d9534f; /* Warna merah lembut */
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 4px solid #f0ad4e; /* Sedikit aksen peringatan */
    padding-left: 10px;
}

.question-item.sn-pm-validation-error-highlight {    
    /* Gunakan outline untuk garis luar */
    outline: 2px solid #e85e5e; /* Warna outline yang lembut */
    
    /* Atur jarak antara elemen (.question-item) dan outline. Ini adalah 'jarak' yang Anda cari. */
    outline-offset: 5px; 

    opacity: 1; /* Mulai dengan opacity penuh */
}

.question-item.sn-pm-validation-error-highlight.sn-pm-validation-error-fade-out {
    outline-color: #fbe9e9; /* Samarkan warna outline juga */
}

.button-group {
    display: inline-flex;
    gap: 8px;
}

.button-group button {
    font-size: 14px; /* Atur ukuran font yang lebih besar */
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.button-group button.active {
    background-color: #2271b1; /* Warna biru aktif */
    color: white;
    border-color: #1e5a8a;
}

.button-group button:hover:not(.active) {
    background-color: #e6e6e6;
}

.button-group button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.group-show-max {
    width: 80px;
}

button.button-secondary.move-rule-btn {
    margin-right: 15px;
}

#move-rule-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 10000;
    display: none;
    width: 40vw;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
}

#move-rule-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    z-index: 9999;
}

button.button-primary.btn-confirm-move-rule {
    margin-left: 10px;
}