/* /tools/word-cloud-generator/styles.css */

.tooly-word-cloud-page {
    margin-top: var(--tooly-spacing-xl);
}

.tooly-word-cloud-generator {
    padding: var(--tooly-spacing-xl);
}

.tooly-wc-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Input/Options vs Output */
    gap: var(--tooly-spacing-xl);
}

/* Controls Column (Input & Options) */
.tooly-wc-controls {
    display: flex;
    flex-direction: column;
    gap: var(--tooly-spacing-lg);
    min-width: 0; /* Prevent controls column from growing excessively */
}

.tooly-wc-textarea {
    width: 100%;
    border: 1px solid var(--tooly-border);
    border-radius: var(--tooly-radius-md);
    padding: var(--tooly-spacing-md);
    font-family: var(--tooly-font-family);
    font-size: var(--tooly-font-size-md);
    line-height: 1.6;
    resize: vertical;
    min-height: 200px; /* Adjusted min height */
    margin-bottom: var(--tooly-spacing-sm); /* Space below textarea */
}

/* Link below textarea */
.tooly-wc-link {
    margin-top: 0; /* Reset margin, let parent group handle */
    font-size: var(--tooly-font-size-sm);
}
.tooly-wc-link a {
    color: var(--tooly-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--tooly-spacing-xs);
}
.tooly-wc-link a:hover {
    color: var(--tooly-primary-dark);
}

/* Changed from fieldset selector to div */
.tooly-wc-options { 
    background-color: var(--tooly-bg);
    padding: var(--tooly-spacing-lg);
    border-radius: var(--tooly-radius-lg);
    border: 1px solid var(--tooly-border);
}
/* Style the H2 like the previous legend */
.tooly-wc-options h2 {
    font-weight: 600;
    margin-bottom: var(--tooly-spacing-lg); /* Increase margin below heading */
    font-size: var(--tooly-font-size-md);
    padding-bottom: var(--tooly-spacing-sm);
    border-bottom: 1px solid var(--tooly-border);
    width: 100%;
    display: block; 
    margin-top: 0; /* Remove any default margin */
}

/* Styles for the grid wrapper */
.tooly-wc-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: var(--tooly-spacing-lg); /* Gap between options */
}


.tooly-wc-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--tooly-spacing-xs);
}

/* Align checkbox */
.tooly-wc-option-checkbox {
    justify-content: flex-start;
    /* Align checkbox vertically with the start of the input field */
    align-self: start;
    padding-top: calc(var(--tooly-font-size-sm) * 1.6); /* Add padding roughly equal to label height */
}

/* Style for the new color input */
.tooly-color-input {
	height: 40px; /* Match other inputs */
    width: 40px; /* Make it square-ish */
	padding: 2px; /* Small padding */
	border-radius: var(--tooly-radius-sm);
    border: 1px solid var(--tooly-border);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
}
.tooly-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: var(--tooly-radius-sm); }
.tooly-color-input::-webkit-color-swatch { border: none; border-radius: var(--tooly-radius-sm); }
.tooly-color-input::-moz-color-swatch { border: none; border-radius: var(--tooly-radius-sm); }

.tooly-num-input {
    -moz-appearance: textfield;
}
.tooly-num-input::-webkit-outer-spin-button,
.tooly-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Button and Status Area below Options */
.tooly-wc-action-area {
    margin-top: var(--tooly-spacing-md); /* Space above action area */
    display: flex;
    flex-direction: column;
    gap: var(--tooly-spacing-md);
}
.tooly-wc-action-area .tooly-btn-primary {
    align-self: flex-start; /* Align button left */
}
.tooly-wc-action-area .tooly-btn-primary i {
    margin-right: var(--tooly-spacing-xs);
}

.tooly-wc-status {
    color: var(--tooly-text-medium); /* Default color */
    font-size: var(--tooly-font-size-sm);
    display: none; /* Hidden by default */
    text-align: left;
    padding: var(--tooly-spacing-sm) 0; /* Padding only top/bottom */
}
.tooly-wc-status.error {
    color: var(--tooly-error);
}


/* Output Column */
.tooly-wc-output-area {
    display: flex;
    flex-direction: column;
    gap: var(--tooly-spacing-sm);
    min-height: 400px; /* Ensure minimum height */
}

.tooly-wc-container {
    flex-grow: 1; /* Allow container to fill space */
    border: 1px dashed var(--tooly-border);
    border-radius: var(--tooly-radius-lg);
    display: flex; /* Use flex for centering placeholder */
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #ffffff; /* Default background, will be overridden by JS */
    padding: var(--tooly-spacing-sm);
    overflow: hidden;
    /* Explicitly set aspect-ratio for the container */
    aspect-ratio: 1 / 1; /* Default to square */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.tooly-wc-canvas {
    display: block; /* Set by JS when visible */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tooly-wc-placeholder {
    text-align: center;
    color: var(--tooly-text-light);
    font-size: var(--tooly-font-size-sm);
    padding: var(--tooly-spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tooly-wc-placeholder img {
    opacity: 0.6;
    margin-bottom: var(--tooly-spacing-sm);
}

.tooly-wc-actions {
    margin-top: var(--tooly-spacing-sm);
    text-align: center; /* Center download button */
}
.tooly-wc-actions .tooly-btn-secondary i {
     margin-right: var(--tooly-spacing-xs);
}


/* Responsive */
@media (max-width: 992px) {
    .tooly-wc-layout {
        grid-template-columns: 1fr; /* Stack columns */
    }
    .tooly-wc-output-area {
        margin-top: var(--tooly-spacing-lg); /* Add space when stacked */
        min-height: 350px; /* Adjust min height */
    }
    .tooly-wc-textarea {
        min-height: 200px; /* Adjust height */
    }
    .tooly-wc-container {
        /* Let height be determined by aspect-ratio and width */
        height: auto;
    }
     .tooly-wc-action-area .tooly-btn-primary {
        width: 100%; /* Full width generate button */
    }
    .tooly-wc-actions .tooly-btn-secondary {
        width: 100%; /* Full width download button */
    }
}

@media (max-width: 576px) {
     .tooly-wc-output-area {
         min-height: 300px;
     }
     /* Selector for the grid wrapper */
     .tooly-wc-options-grid { 
        grid-template-columns: 1fr; /* Stack options fully */
        gap: var(--tooly-spacing-md);
     }
     .tooly-wc-option-checkbox {
        /* Keep default alignment */
        padding-top: 0; /* No extra padding needed */
     }
}

/* WordCloud2 specific - hide the hover box if not using hover effects */
.wordcloud-tooltip {
    display: none !important;
}