/* Styles specific to the Colour Theory Tool */

/* --- Input Section --- */
.input-section {
    /*margin-bottom: 2rem;*/
    padding-bottom: 1.5rem;
    /*border-bottom: 1px solid var(--border-color);*/
}

.input-section label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--label-text);
}

.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group input[type="text"] {
    flex-grow: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.2s;
}
.input-group input[type="text"]:focus {
    border-color: var(--accent-color);
    outline: none;
}

.input-group button[type="submit"] {
    padding: 0.6rem 1.2rem;
    background-color: var(--accent-color);
    color: var(--bg-color-light); /* Default light text */
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
body.dark-mode .input-group button[type="submit"] {
     color: var(--bg-color-dark); /* Dark text for dark mode */
}
.input-group button[type="submit"]:hover {
    opacity: 0.9;
}

.error-message {
    color: var(--error-text);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    min-height: 1.3em;
}


/* --- Results Section --- */
#color-results {
    margin-top: 2rem;
}
#color-results.hidden {
    display: none;
}

.result-subsection {
    margin-bottom: 2.5rem;
}

.result-subsection h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* --- Color Spaces Table --- */
#color-spaces-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

#color-spaces-table th,
#color-spaces-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

#color-spaces-table th {
    font-weight: 600;
    color: var(--label-text);
    width: 25%;
}

#color-spaces-table td code {
    font-family: monospace;
    background-color: var(--preview-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
}

#color-spaces-table tbody {
    border-top: 1px solid var(--border-color);
}


/* --- Color Palettes (Shades/Tints/Analogous/Triadic) --- */
.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.color-box {
    flex: 1 1 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    text-align: center;
}

.color-swatch {
    height: 80px;
    width: 80px;
    border: 1px solid var(--border-color);
    border-radius: 100%;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}
.color-swatch:hover {
    transform: scale(1.03);
}

.color-hex {
    display: block;
    font-size: 0.85rem;
    color: var(--label-text);
    font-family: monospace;
    word-break: break-all;
}


/* --- Preview Sections (Background & Text) --- */
.preview-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* Gap between preview items */
    margin-top: 1rem;
}

/* Common wrapper for each preview item (label + box) */
.bg-preview-wrapper,
.text-preview-wrapper {
    flex: 1 1 20%; /* Allow growing/shrinking, aim for ~4 across max */
    min-width: 120px;
    text-align: center;
}
.bg-preview-wrapper p,
.text-preview-wrapper p {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--label-text);
    font-weight: 500;
}

/* Outer container for background/text previews */
.preview-outer {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 100px; /* Fixed height for previews */
    display: flex; /* For centering content if needed */
    justify-content: center;
    align-items: center;
    padding: 0.5rem; /* Padding inside the outer box */
}

/* Specific Background Colors */
.black-bg { background-color: #000000; }
.white-bg { background-color: #FFFFFF; }

/* Inner color box for Background Preview */
.preview-inner-color {
    width: 70%; /* Inner box size relative to outer */
    height: 70%;
    border: none;
    border-radius: 3px;
}

/* Styling for Text Preview boxes */
.text-preview-box {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center; /* Center text horizontally */
    /* Vertical centering via flex properties on .preview-outer */
}
/* Text preview boxes have background/text set by JS */
/* Ensure text inside white box is readable in light mode */
.text-preview-box.white-bg {
    border-color: #ccc; /* Slightly darker border for white box */
}
body.dark-mode .text-preview-box.white-bg span {
    /* Potentially adjust span color if needed for contrast on white in dark mode */
     /* color: #333; */
}

/* --- Colour Blindness Simulation Styles --- */
.simulation-palette .color-box {
    flex-basis: 22%; /* Adjust for 4 items */
    min-width: 100px;
}

.simulation-palette .color-label {
    display: block;
    font-size: 0.8rem;
    color: var(--label-text);
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
    font-weight: 500;
}

.simulation-palette .color-swatch {
    height: 80px; /* Slightly smaller swatches if needed */
    cursor: default; /* No copy functionality needed here by default */
}
.simulation-palette .color-swatch:hover {
    transform: none; /* Disable hover scale effect */
}

.simulation-note {
    font-size: 0.8rem;
    text-align: center;
    color: var(--label-text);
    opacity: 0.7;
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    /*.input-group { flex-direction: column; }*/
    .color-palette { justify-content: space-around; }
    #color-spaces-table th, #color-spaces-table td { padding: 0.5rem; font-size: 0.9rem;}
    .result-subsection h2 { font-size: 1.3rem; }
     .preview-outer {
        height: 80px; /* Slightly smaller preview boxes */
    }
    
    .bg-preview-wrapper,
    .text-preview-wrapper {
        flex-basis: 40%; /* Aim for 2 across on medium screens */
        min-width: 150px;
    }
     .preview-section {
        gap: 1rem;
    }
    .text-preview-box {
        font-size: 1rem;
    }
    .simulation-palette .color-box {
        flex-basis: 45%; /* 2 across on small screens */
    }
}

/* Add these styles */

.input-section .input-group {
    /* Keep original flex behavior if needed, or adjust */
     display: flex;
     gap: 0.5rem;
     align-items: flex-start; /* Align items to the top */
}

/* Wrapper for text and color input */
.color-input-wrapper {
    display: flex;
    align-items: center; /* Align text and color vertically */
    flex-grow: 1; /* Allow wrapper to take space */
}

/* Adjust hex input to take available space within the wrapper */
.color-input-wrapper input[type="text"] {
    flex-grow: 1;
    /* Keep existing padding, border, etc. */
}

/* Style the color picker */
.color-input-wrapper input[type="color"] {
    height: 38px; /* Match text input height (adjust if needed) */
    width: 45px; /* Fixed width */
    padding: 0 3px; /* Minimal padding */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--bg-color); /* Or transparent */
    flex-shrink: 0; /* Prevent shrinking */
}
/* Remove default browser styling artifacts */
.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.color-input-wrapper input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
.color-input-wrapper input[type="color"]::-moz-color-swatch {
     border: none;
     border-radius: 3px;
}

/* Ensure submit button aligns correctly if needed */
.input-section .input-group button[type="submit"] {
     align-self: center; /* Vertically center button with inputs */
     /* Keep existing padding, background, etc. */
      height: 38px; /* Match input height */
}

/* Adjust layout on smaller screens if the flex items wrap */
@media (max-width: 600px) {
    /* No change needed here if the main input-group already handles stacking */
    .color-input-wrapper {
        width: 100%; /* Ensure wrapper takes full width when stacked */
        flex-wrap: wrap;
    }
}