/* garden.css: styles shared by several garden components. Scoped .razor.css
   only reaches its own component's markup, and inspectors, rows and toolbars
   repeat across the bed tabs, so their look lives here, once. Every class is
   prefixed garden- so nothing leaks into the rest of the app. */

/* ---- Inspector side panel (plant, weed, seeded area) ---- */
.garden-inspector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    background: var(--surface-card, #ffffff);
}

.garden-inspector__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.garden-inspector__header h3 {
    margin: 0;
}

.garden-inspector__swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.garden-inspector__choices {
    display: flex;
    gap: 0.375rem;
}

/* Big targets: set with a thumb, standing in the bed. */
.garden-inspector__choice {
    all: unset;
    flex: 1;
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border, #e5e7eb);
    cursor: pointer;
}

.garden-inspector__choice.is-active {
    border-color: var(--color-primary, #18647a);
    background: var(--color-primary-soft, #e6f0f3);
    font-weight: 600;
}

.garden-inspector__actions {
    display: flex;
    justify-content: space-between;
}

/* ---- A tab's main area beside an optional inspector ---- */
.garden-split {
    display: grid;
    gap: 1rem;
}

@media (min-width: 900px) {
    .garden-split.has-inspector {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
    }
}

/* ---- Toolbars above a map or list ---- */
.garden-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.garden-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.garden-picked {
    font-weight: 600;
    min-width: 10rem;
}

/* ---- Tappable list rows ---- */
.garden-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.garden-row {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.375rem 0.25rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    cursor: pointer;
}

.garden-row:hover {
    background: var(--surface-muted, #f9fafb);
}

.garden-row.is-selected {
    background: var(--color-primary-soft, #e6f0f3);
}

.garden-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.375rem;
    flex-shrink: 0;
}

/* ---- Status pills. Neutral colors only: nothing here signals lateness (AC 17). ---- */
.garden-pill {
    font-size: var(--font-size-xs, 0.75rem);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-muted, #f3f4f6);
}

.garden-pill--weak,
.garden-pill--treated,
.garden-pill--germinating {
    background: #fef3c7;
}

.garden-pill--missing,
.garden-pill--present,
.garden-pill--failed {
    background: #fee2e2;
}

.garden-pill--established {
    background: #dcfce7;
}