/* tools/developer-tools/css-minifier/style.css - Tool-specific styles */

/* Ensure textareas have enough height and monospace font for code */
#inputText,
#outputText {
    min-height: 250px; /* Slightly taller for code */
    font-family: 'monospace', 'Courier New', Courier, monospace;
    font-size: 0.9em; /* Slightly smaller font for dense code */
    line-height: 1.5;
    white-space: pre-wrap; /* Ensure text wraps */
    word-wrap: break-word; /* Break long words */
}

/* Style for the stats grid (reused from word counter but customized) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjusted for 3 columns */
    gap: 20px;
    margin-top: 30px;
    padding: 20px;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-small);
    text-align: center;
}

.stat-item {
    padding: 15px;
    border: 1px solid var(--color-light-gray-2);
    border-radius: var(--border-radius-small);
    background-color: var(--color-light-gray);
    box-shadow: var(--shadow-x-small);
    transition: transform 0.2s ease-in-out;
}

.stat-item:hover {
    transform: translateY(-3px);
}

.stat-value {
    display: block;
    font-size: 2em; /* Slightly smaller for size values */
    font-weight: bold;
    color: var(--color-teal);
    margin-bottom: 5px;
}

.stat-label {
    display: block;
    font-size: 0.85em; /* Slightly smaller label */
    color: var(--color-dark-gray);
    font-weight: 500;
}

/* Action buttons grid (reused from common styles) */
.tool-actions {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 15px; /* Space between buttons */
    margin-top: 30px;
    justify-content: center; /* Center buttons */
}

.tool-actions .btn {
    flex: 1 1 auto; /* Allow buttons to grow/shrink, with auto basis */
    min-width: 150px; /* Ensure a minimum width */
    max-width: 200px; /* Prevent buttons from becoming too wide on large screens */
}