@import "globals.css";

/* Base Input Structure */
.generic-input-field
{
    /* Use variables for consistency */
    display: grid;
    width: 100%;
    padding-inline: var(--space-md);
    padding-block: 0.75rem; /* Optical balance between xs and md */
    
    
    background-color: var(--color-bg); /* Darker than the card surface */
    color: var(--color-text);
    
    border: var(--border-thin);
    border-radius: var(--radius-main);
    
    font-family: inherit;
    font-size: 1rem;
    
    /* Box-sizing ensures padding doesn't break the width */
    box-sizing: border-box;
    
    transition: 
        border-color 0.2s ease, 
        box-shadow 0.2s ease;
}

/* Interaction: Focus State */
.generic-input-field:focus 
{
    outline: none;
    border-color: var(--color-primary);
    /* Subtle glow using your primary color */
    box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 20%);
}

/* Placeholder Styling */
.generic-input-field::placeholder 
{
    color: oklch(from var(--color-text) l c h / 40%);
}

/* Accessibility: Error State Modifier */
.generic-input-field--error 
{
    border-color: oklch(60% 0.15 20); /* Descriptive red using OKLCH */
}

/* container to hold a label and an input (or a display value) */
.generic-field-container
{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	color: var(--color-primary);
	margin: 0;
	line-height: 1; /* Collapses the 'air' around the text */
	height: fit-content;
}

/* modifier for .generic-field-container that stacks the elements (instead of side-by-side) */
.generic-field-container--vertical
{
    flex-direction: column;
}