/* rgb-to-cmyk/css/rgb-to-cmyk.css */

/* Lớp wrapper tổng thể cho plugin để hạn chế ảnh hưởng của CSS */
.rgb-to-cmyk-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px auto; /* Canh giữa và tạo khoảng cách */
    background-color: #f0f2f5;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1440px; /* Adjusted for 4 columns */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.rgb-to-cmyk-container h1 {
    color: #2c3e50;
    margin-bottom: 30px;
}

.rgb-to-cmyk-container .main-columns-container {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap to next line on smaller screens */
    gap: 25px; /* Space between columns */
    justify-content: center; /* Center columns if they don't fill the row */
    width: 100%; /* Take full width of parent */
    max-width: 1400px; /* Limit overall width for readability on large screens */
    margin-top: 30px;
}

.rgb-to-cmyk-container section {
    background-color: #ffffff;
    padding: 30px;
    margin-bottom: 0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    flex: 1;
    min-width: 300px; /* Minimum width before wrapping to next line */
    max-width: calc(25% - 18.75px); /* Approximately 1/4 of container width minus gap */
    display: flex;
    flex-direction: column;
}
/* Adjust section max-width for smaller screens if only 3 columns */
.rgb-to-cmyk-container .main-columns-container > section:nth-child(-n+3) {
    max-width: calc(33.33% - 16.66px); /* Back to 1/3 for the first 3 sections if 4th is hidden */
}


.rgb-to-cmyk-container h2, .rgb-to-cmyk-container h3 {
    color: #34495e;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.rgb-to-cmyk-container h3 {
    font-size: 1.1em;
    margin-top: 25px;
    border-bottom: none;
    padding-bottom: 0;
}

.rgb-to-cmyk-container .input-group {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Aligned to start to accommodate error messages */
    flex-wrap: wrap;
    gap: 15px; /* Increased gap slightly for better spacing */
}

.rgb-to-cmyk-container .input-field-wrapper {
    display: flex;
    flex-direction: column; /* Stack label, input, error vertically */
    align-items: flex-start;
    position: relative; /* For error message positioning */
    min-width: 80px; /* Ensure enough space for label + input + error */
}

.rgb-to-cmyk-container .input-field-wrapper > label { /* Target label directly inside wrapper */
    margin-bottom: 5px; /* Space between label and input */
    font-weight: bold;
    color: #555;
    min-width: unset; /* Override previous min-width */
}

.rgb-to-cmyk-container .input-field-wrapper > input[type="number"],
.rgb-to-cmyk-container .input-field-wrapper > input[type="text"] {
    width: 70px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    -moz-appearance: textfield;
    transition: border-color 0.2s;
}

.rgb-to-cmyk-container input[type="number"]::-webkit-outer-spin-button,
.rgb-to-cmyk-container input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rgb-to-cmyk-container input.error {
    border-color: #e74c3c !important;
}

.rgb-to-cmyk-container .input-error-message {
    color: #e74c3c;
    font-size: 0.75em; /* Smaller font for errors */
    min-height: 15px; /* Reserve space to prevent layout shift */
    margin-top: 2px;
    width: 100%; /* Take full width of wrapper */
    text-align: left;
}

.rgb-to-cmyk-container select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    width: 180px;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

.rgb-to-cmyk-container .button-group {
    margin-top: 10px;
    margin-bottom: 15px;
}

.rgb-to-cmyk-container button {
    background-color: #3498db;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-right: 10px;
}

.rgb-to-cmyk-container button:hover {
    background-color: #2980b9;
    transform: translateY(-1px);
}

.rgb-to-cmyk-container button:active {
    transform: translateY(0);
}

.rgb-to-cmyk-container button.clear {
    background-color: #95a5a6;
}

.rgb-to-cmyk-container button.clear:hover {
    background-color: #7f8c8d;
}

.rgb-to-cmyk-container button.random-color {
    background-color: #f39c12;
    margin-top: 10px; /* Space from slider */
    width: 100%; /* Make it full width in its section */
    margin-right: 0; /* Remove right margin */
}
.rgb-to-cmyk-container button.random-color:hover {
    background-color: #e67e22;
}

.rgb-to-cmyk-container .output-text {
    font-size: 1.1em;
    font-weight: bold;
    color: #27ae60;
    margin-top: 10px;
    min-height: 25px;
}

.rgb-to-cmyk-container .color-swatch {
    width: 120px;
    height: 120px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* --- Color Picker Specific Styles --- */
.rgb-to-cmyk-container .color-picker-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rgb-to-cmyk-container .color-display-panel {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.rgb-to-cmyk-container .selected-color-preview {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: rgb(80,199,199);
}

.rgb-to-cmyk-container .color-codes p {
    margin: 5px 0;
    font-size: 0.9em;
    font-weight: bold;
    color: #555;
    text-align: center;
}

.rgb-to-cmyk-container .color-selection-area {
    flex-grow: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rgb-to-cmyk-container .saturation-value-picker {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(to right, white, hsl(180, 100%, 50%)),
                      linear-gradient(to top, black, transparent);
    border-radius: 8px;
    overflow: hidden;
    cursor: crosshair;
}

.rgb-to-cmyk-container .picker-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1.5px #333, 0 0 5px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rgb-to-cmyk-container .hue-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 20px;
    background: linear-gradient(to right, red, #FF0, #0F0, #0FF, #00F, #F0F, red);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

.rgb-to-cmyk-container .hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3498db;
    cursor: grab;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.rgb-to-cmyk-container .hue-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3498db;
    cursor: grab;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.rgb-to-cmyk-container .output-values table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.95em;
}

.rgb-to-cmyk-container .output-values th, .rgb-to-cmyk-container .output-values td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}

.rgb-to-cmyk-container .output-values td:nth-child(2) {
    font-weight: bold;
    color: #444;
    white-space: nowrap; /* Prevent "HEX" etc. from wrapping */
    width: 60px; /* Give it a fixed width, but not too wide */
}

.rgb-to-cmyk-container .output-values td:nth-child(3) {
    font-family: 'Courier New', Courier, monospace;
    color: #007bff;
    text-align: right;
    /* white-space: nowrap; REMOVED to allow wrapping for long values */
    word-break: break-word; /* Allow breaking long words/codes */
}

.rgb-to-cmyk-container button.copy-button {
    padding: 8px 12px;
    font-size: 0.85em;
    margin-right: 0;
    background-color: #2ecc71; /* Green color as per image */
}

.rgb-to-cmyk-container button.copy-button:hover {
    background-color: #27ae60;
}

.rgb-to-cmyk-container details {
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
}

.rgb-to-cmyk-container details summary {
    font-weight: bold;
    cursor: pointer;
    color: #34495e;
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.rgb-to-cmyk-container details summary::before {
    content: '▼';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

.rgb-to-cmyk-container details[open] summary::before {
    content: '▲';
    transform: translateY(-50%) rotate(0deg);
}

/* --- Image Picker Specific Styles --- */
.rgb-to-cmyk-container .image-upload-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rgb-to-cmyk-container .image-upload-container input[type="file"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.rgb-to-cmyk-container .image-preview-area {
    position: relative;
    min-height: 150px; /* Reserve space */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #ccc;
    border-radius: 8px;
    overflow: hidden; /* Ensure image/canvas stays within bounds */
}

.rgb-to-cmyk-container .image-preview-area img,
.rgb-to-cmyk-container .image-preview-area canvas {
    display: block; /* Important for preventing extra space below image */
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Ensure image scales down nicely */
}
/* Canvas specific styling */
.rgb-to-cmyk-container .image-preview-area canvas {
    cursor: crosshair;
    border: none; /* Border already on parent div */
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .rgb-to-cmyk-container section {
        max-width: calc(33.33% - 16.66px); /* 3 columns */
    }
}

@media (max-width: 992px) {
    .rgb-to-cmyk-container section {
        max-width: calc(50% - 12.5px); /* 2 columns */
    }
}

@media (max-width: 768px) {
    .rgb-to-cmyk-container section {
        max-width: 100%; /* 1 column */
    }
    .rgb-to-cmyk-container .color-picker-container {
        flex-direction: column;
    }
    .rgb-to-cmyk-container .color-display-panel {
        width: 100%;
        flex: none;
    }
    .rgb-to-cmyk-container .color-selection-area {
        width: 100%;
        min-width: unset;
    }
}