/**
 * Repario Design System — Form Layouts
 *
 * Layout utilities for form structures. Combines with inputs.css.
 *
 * Usage:
 *   <form class="rep-form">
 *     <div class="rep-form-grid">
 *       <div class="rep-field">
 *         <label class="rep-label">Name</label>
 *         <input class="rep-input" type="text">
 *       </div>
 *       <div class="rep-field">
 *         <label class="rep-label">Email</label>
 *         <input class="rep-input" type="email">
 *       </div>
 *     </div>
 *     <div class="rep-form-actions">
 *       <button class="rep-btn rep-btn-secondary">Cancel</button>
 *       <button class="rep-btn rep-btn-primary">Save</button>
 *     </div>
 *   </form>
 *
 * Depends on: tokens.css, inputs.css, buttons.css
 * @package Repario_SaaS
 */

/* ── Form Container ────────────────────────────────────────────────────── */

.rep-form {
    display: flex;
    flex-direction: column;
    gap: var(--rep-space-4);
}

/* ── Grid Layouts ──────────────────────────────────────────────────────── */

.rep-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rep-space-4);
}

.rep-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rep-space-4);
}

.rep-form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rep-space-4);
}

/* ── Form Actions ──────────────────────────────────────────────────────── */

.rep-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rep-space-3);
    padding-top: var(--rep-space-4);
    border-top: 1px solid var(--rep-border-default);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rep-form-grid,
    .rep-form-grid-3 {
        grid-template-columns: 1fr;
    }
}