/**
 * PsihoProfile Elementor Integration CSS
 * UPDATED: Forcing vertical scale stacking on mobile.
 */

/* --- Grid, Item, Modal, Header, Buttons, etc. (Largely Unchanged) --- */
/* [...] Keep existing styles [...] */
.psihoprofile-reports-grid { display: grid; gap: 20px; margin-top: 20px; }
.psihoprofile-report-item { background-color: #ffffff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 20px; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.psihoprofile-report-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.psihoprofile-report-name { margin-top: 0; margin-bottom: 10px; color: #333; font-size: 18px; font-weight: bold; }
.psihoprofile-report-date { color: #666; font-size: 14px; margin-bottom: 10px; }
.psihoprofile-report-status { margin-bottom: 15px; font-size: 14px; }
.status-completed { color: #28a745; font-weight: bold; }
.status-pending { color: #ffc107; font-style: italic; }
.refresh-status { font-size: 12px; margin-left: 5px; color: #0073aa; text-decoration: none; }
.refresh-status:hover { text-decoration: underline; }
.psihoprofile-report-actions { margin-top: auto; padding-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.view-report-button, .view-original-button { display: inline-block; padding: 6px 12px; text-decoration: none; border-radius: 4px; font-size: 14px; transition: background-color 0.3s, color 0.3s; text-align: center; border: 1px solid transparent; cursor: pointer; }
.view-report-button { background-color: #2271b1; color: #fff !important; border-color: #2271b1; }
.view-report-button:hover { background-color: #135e96; color: #fff !important; border-color: #135e96; text-decoration: none; }
.view-original-button { background-color: #6c757d; color: #fff !important; border-color: #6c757d; }
.view-original-button:hover { background-color: #5a6268; color: #fff !important; border-color: #5a6268; text-decoration: none; }
.report-not-available { color: #666; font-style: italic; font-size: 14px; margin-top: auto; padding-top: 15px; }
.psihoprofile-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); animation: fadeIn 0.3s ease-out; }
.psihoprofile-modal-content { background-color: #fefefe; margin: 5% auto; padding: 30px; border: 1px solid #ddd; border-radius: 8px; width: 90%; max-width: 1000px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; position: relative; }
.psihoprofile-modal-close { color: #aaa; font-size: 32px; font-weight: bold; cursor: pointer; position: absolute; right: 15px; top: 10px; line-height: 1; padding: 5px; }
.psihoprofile-modal-close:hover, .psihoprofile-modal-close:focus { color: black; text-decoration: none; }
.psihoprofile-modal-header { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 25px; }
.psihoprofile-modal-header h2 { margin: 0; font-size: 24px; color: #333; }
.psihoprofile-modal-body { position: relative; min-height: 150px; }
.psihoprofile-modal-loading { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); z-index: 10; }
.psihoprofile-modal-loading:after { content: ''; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1.5s linear infinite; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.psihoprofile-report-content-widget { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.6; }
.report-header { background-color: #fff; padding: 20px; margin-bottom: 30px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-left: 5px solid #2271b1; }
.report-header h1 { margin-top: 0; margin-bottom: 15px; color: #2271b1; font-size: 22px; }
.report-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px; font-size: 14px; color: #555; }
.report-meta div { margin-bottom: 0; }
.report-meta strong { font-weight: 600; color: #333; margin-right: 5px; }
.report-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.report-actions button, .report-actions a { background-color: #2271b1; color: white !important; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; text-decoration: none; transition: background-color 0.3s; display: inline-block; }
.report-actions button:hover, .report-actions a:hover { background-color: #135e96; color: white !important; }
.report-actions .view-original-button { background-color: #6c757d; }
.report-actions .view-original-button:hover { background-color: #5a6268; }
/* --- End Largely Unchanged Styles --- */


/* Factor styles */
.factor-section {
    background-color: #fff;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid transparent;
}

.factor-title {
    margin-top: 0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    color: #2271b1;
    font-size: 20px;
    text-align: center;
}

.factor-result-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
}

/* Wrapper for Poles and Scale - Horizontal Layout */
.factor-poles-and-scale-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
    flex-wrap: wrap;
}

/* Region Containers (Left, Center, Right) */
.poles-scale-region {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 30%; /* Default basis, overridden by Elementor */
    min-width: 50px;
    box-sizing: border-box;
}

.poles-scale-left { align-items: flex-start; text-align: left; justify-content: flex-start; }
.poles-scale-center { align-items: center; text-align: center; flex-grow: 1; justify-content: center; }
.poles-scale-right { align-items: flex-end; text-align: right; justify-content: flex-end; }

.poles-scale-region > * { max-width: 100%; box-sizing: border-box; }
.poles-scale-region .factor-scale-container { width: 100%; }

/* Factor Poles (Common Styles) */
.factor-pole {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    color: #333;
    width: auto;
    max-width: 100%;
}
.factor-pole strong { display: block; margin-bottom: 5px; font-weight: bold; color: #111; }
.factor-pole .pole-description { font-style: italic; color: #6c757d; margin: 0; font-size: 0.9em; display: inline-block; max-width: 100%; box-sizing: border-box; }
.factor-pole .pole-description p { margin-bottom: 0.5em; }
.factor-pole .pole-description p:last-child { margin-bottom: 0; }

/* Scale Container Layout */
.factor-scale-container { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; }

/* Scale Styles (Inner container) */
.factor-scale { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; max-width: 100%; flex-shrink: 1; }

.scale-segment { display: inline-flex; justify-content: center; align-items: center; color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: none; transition: all 0.3s ease; flex-shrink: 0; flex-grow: 0; position: relative; }
.scale-segment:last-child { border-right: none; border-bottom: none; }
.scale-segment.active { z-index: 1; }

/* Main Factor Description */
.factor-description-main { margin-top: 20px; padding: 15px; font-size: 15px; color: #333; clear: both; width: 100%; box-sizing: border-box; }
.factor-description-main p { margin-bottom: 1em; }
.factor-description-main p:last-child { margin-bottom: 0; }

/* Report data table */
.report-data-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.report-data-table td, .report-data-table th { padding: 10px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
.report-data-table th { background-color: #f5f5f5; font-weight: bold; }
.report-data-table tr:nth-child(even) td { background-color: #fdfdfd; }
.report-data-table pre { white-space: pre-wrap; word-wrap: break-word; background-color: #f0f0f0; padding: 5px; border-radius: 3px; font-size: 0.9em; }

/* Empty state */
.psihoprofile-reports-empty { padding: 30px; text-align: center; color: #666; background-color: #f9f9f9; border: 1px dashed #ddd; border-radius: 4px; }

/* Error messages */
.psihoprofile-error-message, .psihoprofile-error, .factor-error, .factor-nodata { padding: 15px; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 4px; margin-bottom: 20px; }

/* Print styles */
@media print {
    body * { visibility: hidden; }
    .psihoprofile-report-content-widget, .psihoprofile-report-content-widget * { visibility: visible; }
    .psihoprofile-report-content-widget { position: absolute; left: 0; top: 0; width: 100%; }
    .report-header, .factor-section { box-shadow: none; border: 1px solid #ddd !important; page-break-inside: avoid; }
    .report-actions button, .report-actions a, .psihoprofile-modal-close, .elementor-section-wrap > :not(.psihoprofile-report-content-widget), #wpadminbar { display: none !important; }
    .factor-poles-and-scale-wrapper { background-color: transparent !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important; }
    .poles-scale-region { flex-direction: column !important; align-items: center !important; text-align: center !important; flex-basis: 33% !important; flex-grow: 1 !important; }
    .factor-scale-container { background-color: transparent !important; width: auto !important; }
    .factor-scale { border: 1px solid #ccc !important; flex-direction: row !important; width: auto !important; }
    .scale-segment { border-right: 1px solid #eee !important; border-bottom: none !important; width: auto !important; height: auto !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .scale-segment:last-child { border-right: none !important; }
    .scale-segment.active { border: 2px solid #333 !important; }
    .factor-pole .pole-description, .factor-description-main { background-color: transparent !important; border: none !important; padding: 0 !important; }
}

/* Responsive styles */
@media (max-width: 767px) {
    .report-meta { flex-direction: column; gap: 5px; }
    .psihoprofile-modal-content { width: 95%; margin: 20px auto; padding: 20px; }

    .factor-poles-and-scale-wrapper { flex-direction: column; align-items: center; gap: 20px; }
    .poles-scale-region { width: 100%; align-items: center !important; text-align: center !important; flex-basis: auto !important; flex-grow: 0 !important; min-width: unset; }

    /* --- Vertical Scale on Mobile --- */
    .factor-scale-container {
        justify-content: center;
        width: auto; /* Allow container to shrink */
        max-width: 100px; /* Adjust max-width as needed */
    }
    .factor-scale {
        flex-direction: column !important; /* Force vertical stacking */
        width: auto !important; /* Allow scale width to adjust */
        max-width: 100%;
        border-radius: 4px;
    }
    .scale-segment {
        width: 100% !important; /* Force full width */
        height: auto !important; /* Auto height */
        padding: 5px 10px !important; /* Add padding */
        line-height: 1.4 !important; /* Adjust line-height */
        border-right: none !important; /* Remove right border */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Add bottom border */
        text-align: center !important;
    }
    .scale-segment:last-child {
        border-bottom: none !important; /* No bottom border on last */
    }
    /* --- End Vertical Scale on Mobile --- */

    .factor-title { font-size: 18px; }
    .factor-pole .pole-description { text-align: center !important; }
}

@media (max-width: 480px) {
    .factor-pole { font-size: 13px; }
    .factor-section { padding: 15px; }
    .factor-poles-and-scale-wrapper { gap: 15px; }
    .scale-segment {
         font-size: 12px !important;
         padding: 4px 8px !important;
    }
    .factor-scale-container {
        max-width: 80px; /* Further constrain width */
    }
}