/*
 * GOONDEX — FORMS
 * Inputs, textareas, selects, labels.
 * Neon-subtle Flamingo Pink accent + dark UI.
 */

/* ================================
 *   FORM LABELS
 *   ================================ */
label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}



/* ================================
 *   INPUT BASE STYLE
 *   (Text, search, email, password, number)
 *   ================================ */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.9rem 1rem;

    background: var(--color-bg-card);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);

    font-size: 1rem;
    outline: none;

    transition: border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

/* Hover */
input:hover,
textarea:hover,
select:hover {
    border-color: var(--color-brand);
}

/* Focus (medium neon glow) */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(255, 79, 163, 0.18),
    var(--shadow-glow-pink-soft);
    background: var(--color-bg-elevated);
}



/* ================================
 *   TEXTAREA
 *   ================================ */
textarea {
    min-height: 140px;
    resize: vertical;
}



/* ================================
 *   SELECT DROPDOWN
 *   ================================ */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23FF4FA3' height='12' viewBox='0 0 20 20' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
}



/* ================================
 *   CHECKBOXES (standard form)
 *   NOTE: GX_Checkbox.css overrides these for custom components.
 *   ================================ */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;

    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-card);

    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-glow-pink-soft);
}



/* ================================
 *   FORM GROUP SPACING
 *   ================================ */
.form-group {
    margin-bottom: 1.4rem;
}



/* ================================
 *   PLACEHOLDER TEXT
 *   ================================ */
::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}



/* ================================
 *   SEARCH BAR GLOBAL STYLE
 *   Matches Dashboard "Global Search"
 *   ================================ */
input.global-search,
#global-search.input {
padding: 1rem 1.2rem;
font-size: 1.05rem;

border-radius: var(--radius-soft);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border-soft);
}

input.global-search:hover,
#global-search.input:hover {
border-color: var(--color-brand);
}

input.global-search:focus,
#global-search.input:focus {
border-color: var(--color-brand);
background: var(--color-bg-card);
box-shadow: var(--shadow-glow-pink-soft);
}



/* ================================
 *   ERROR / WARNING STATES
 *   ================================ */
.input-error {
    border-color: var(--color-warning);
    background: rgba(255, 170, 136, 0.05);
}

.input-error:focus {
    box-shadow: 0 0 0 3px rgba(255, 170, 136, 0.25);
}