@import url(projects.css);

#project-crud-container {
    .crud-controls, .crud-form {
        max-width: 800px;
        margin: 1.5rem auto 0;
    }

    h2 {
        margin-bottom: 0.5rem;
    }

    .crud-controls {
        p {
            margin: 0 0 0.75rem;
            font-size: 0.95rem;
            color: color-mix(in oklab, var(--text-color, #222) 75%, #888);
        }
    }

    legend {
        padding: 0 0.25rem;
        font-size: 0.95rem;
        font-weight: 700;

        & + label {
            margin: 0;
        }
    }

    /* First labels have too much spacing at the top margin */
    label {
        display: block;
        margin-top: 0.75rem;
        font-weight: 600;

        /* Asterisk for required fields */
        &:has(+ :required)::after {
            content: " *";
            color: red;
            font-weight: var(--font-weight-bold, 700);
        }

        &[for='imageId']::after {
            content: " *";
            color: red;
            font-weight: var(--font-weight-bold, 700);
        }
    }

    input, textarea, select {
        width: 100%;
        max-width: 100%;
        padding: 0.45rem 0.25rem;
        border-radius: 4px;
        border: 1px solid color-mix(in oklab, var(--text-color, #222) 16%, #dde2ea);
        font-family: var(--font-theme);
        font-size: 0.95rem;
        background-color: color-mix(in oklab, var(--body-background-color) 90%, #ffffff);
    }

    textarea {
        resize: none;
    }

    fieldset {
        border: 1px solid color-mix(in oklab, var(--text-color, #222) 12%, #dde2ea);
        border-radius: 6px;
        padding: 0.75rem 1rem 1rem;
        margin: 0 0 1rem;

        #image-text-help {
            margin-top: 0.75rem;
            font-size: 0.85rem;
            color: color-mix(in oklab, var(--text-color, #222) 70%, #888);
        }
    }

    button-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.5rem;

        button {
            font-family: var(--font-theme);
            font-weight: 600;
            padding: 0.5em 1.1em;
            border-radius: 6px;
            border: 2px solid var(--button-color);
            background-color: transparent;
            color: var(--button-color);
            cursor: pointer;
            transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;

            &:hover {
                background-color: var(--button-color);
                color: var(--body-background-color);
                transform: translateY(-2px);
            }

            &:active {
                transform: translateY(0);
            }
        }
    }

    #crud-status {
        display: flex;
        align-self: center;
        /* margin-top: 0.75rem; */
        margin: 0;
        font-size: 0.9rem;
        color: var(--accent-color);
    }
}

@media (max-width: 600px) {
    #project-crud-container .crud-buttons {
        justify-content: center;
    }
}

#project-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}