/* VolunteerStyles.css
   Styles for the Green Gables Volunteer Tracker
*/

@import "../WellsEstateStyles.css";

/* ---------------------------
   Wells Estate menu
   --------------------------- */

.we-menu
{
    width: 100%;
    margin: 14px 0 18px 0;
}

.we-menu-list
{
    list-style: none;
    padding: 0;
    margin: 0;

    display: grid;
    gap: 10px;
}

.we-menu-item
{
    margin: 0;
}

.we-menu-link
{
    display: block;
    padding: 14px 16px;

    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--header-bg);

    color: var(--text);
    font-weight: 650;
    text-decoration: none;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.we-menu-link:hover,
.we-menu-link:focus
{
    background: var(--row-hover);
    border-color: var(--border);
    text-decoration: none;
    outline: none;
}

.we-menu-link:focus-visible
{
    outline: 3px solid rgba(37, 99, 235, 0.35); /* ties to --accent */
    outline-offset: 2px;
}

/* Nice on wider screens: two columns, then back to one on phones */
@media (min-width: 720px)
{
    .we-menu-list
    {
        grid-template-columns: 1fr 1fr;
    }

    .we-menu-item:last-child
    {
        grid-column: 1 / -1;
    }
}

/* ---------------------------
   Volunteer hours form
   --------------------------- */
.vv-button
{
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--header-bg);
    color: var(--text);
    font-weight: 650;
    cursor: pointer;
}

.vv-button:hover,
.vv-button:focus
{
    background: var(--row-hover);
    border-color: var(--border);
}

.vv-button--primary
{
    border-color: rgba(37, 99, 235, 0.35);
}

.vv-row--actions
{
    align-items: center;
}

.vv-label-spacer
{
    /* Occupies the label column so the right column lines up */
}

.vv-actions
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tip row styling */
.vv-row--tip
{
    align-items: start;
}

.vv-tip
{
    color: var(--muted);
    font-size: 0.95rem;
}

/* On phones, the spacer disappears naturally because rows become 1-column */
@media (max-width: 640px)
{
    .vv-actions
    {
        width: 100%;
    }

    .vv-actions button
    {
        flex: 1 1 auto; /* makes buttons nicely sized on phones */
    }
}

.vv-form
{
    width: 100%;
}

.vv-grid
{
    width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg);
    padding: 14px 14px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.vv-row
{
    display: grid;
    grid-template-columns: 12rem 1fr; /* label | control */
    align-items: center;
    gap: 8px 14px;

    padding: 10px 6px;
    border-top: 1px solid var(--border-soft);
}

.vv-row:first-child
{
    border-top: none;
}

.vv-row label
{
    justify-self: end;
    font-weight: 650;
}

.vv-row input,
.vv-row textarea,
.vv-row select
{
    width: 100%;
    box-sizing: border-box;

    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;

    background: #fff;
    color: var(--text);
}

.vv-row textarea
{
    min-height: 6.5rem;
    resize: vertical;
}

.vv-row--textarea
{
    align-items: start;
}

.vv-row input:focus,
.vv-row textarea:focus,
.vv-row select:focus
{
    outline: 3px solid rgba(37, 99, 235, 0.25); /* ties to --accent */
    outline-offset: 2px;
}

/* Optional: help placeholders look consistent */
.vv-row ::placeholder
{
    color: var(--muted);
}

/* Submit row helper (use on the div that contains your submit button) */
.vv-row--actions
{
    grid-template-columns: 12rem 1fr;
}

.vv-row--actions .vv-actions
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Phones: stack label over control */
@media (max-width: 640px)
{
    .vv-row
    {
        grid-template-columns: 1fr;
        padding: 10px 2px;
    }

    .vv-row label
    {
        justify-self: start;
    }

    .vv-grid
    {
        padding: 12px 12px;
    }
}

/* Confirmation / receipt styles */

.vv-label
{
    justify-self: end;
    font-weight: 650;
}

.vv-value
{
    width: 100%;
    box-sizing: border-box;

    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;

    background: #fff;
    color: var(--text);
}

.vv-value--multiline
{
    white-space: pre-wrap;  /* preserves line breaks if comment contains any */
    min-height: 3.5rem;
}

/* Top success message inside vv-grid */
.vv-message
{
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: var(--row-hover);
}

.vv-message--success
{
    border-color: rgba(34, 197, 94, 0.35); /* soft green edge */
}

/* Make vv-message span full width of the two-column grid */
.vv-grid .vv-message
{
    grid-column: 1 / -1;
}

/* Phone layout: label aligns left */
@media (max-width: 640px)
{
    .vv-label
    {
        justify-self: start;
    }
}