/* ============================================================================
   COMPACT FORM STANDARDS
   Default formatting for compact, space-efficient forms
   ============================================================================ */

/* Form Labels - Compact */
.form-label-compact {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(236, 241, 248, 0.82);
    font-weight: 600;
    line-height: 1.35;
}

/* Form Controls - Compact (textboxes, dropdowns, selects) */
.form-control-compact,
.form-select-compact {
    font-size: 0.8125rem;
    padding: 0.35rem 0.55rem;
    height: auto;
    line-height: 1.35;
}

/* Input Groups - Compact */
.input-group-compact .form-control {
    font-size: 0.8125rem;
    padding: 0.35rem 0.55rem;
    height: auto;
    line-height: 1.35;
}

/* Buttons - Compact */
.btn-compact {
    font-size: 0.75rem;
    padding: 0.35rem 0.55rem;
    line-height: 1.2;
    font-weight: 600;
}

/* Container Spacing - Compact */
.compact-container {
    padding: 0.45rem;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Flex Layout - Top Aligned */
.flex-top-aligned {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

/* Min-widths for form fields */
.field-width-xs { min-width: 120px; }
.field-width-sm { min-width: 140px; }
.field-width-md { min-width: 180px; }
.field-width-lg { min-width: 200px; flex: 1; }

/* ============================================================================
   USAGE EXAMPLE

   <div class="flex-top-aligned">
       <div class="field-width-xs">
           <label class="form-label-compact">Type</label>
           <select class="form-select-compact">...</select>
       </div>
       <div class="field-width-sm">
           <label class="form-label-compact">Operator</label>
           <select class="form-select-compact">...</select>
       </div>
       <div class="field-width-lg">
           <label class="form-label-compact">Value(s)</label>
           <input class="form-control-compact" />
       </div>
   </div>

   ============================================================================ */

/* ============================================================================
   STANDARDS SUMMARY

   Font Sizes:    0.65rem (all text - labels, inputs, buttons)
   Padding:       0.18rem 0.3rem (vertical, horizontal)
   Button Pad:    0.18rem 0.35rem (slightly wider horizontal)
   Gaps:          0.4rem (between elements)
   Margins:       0.15rem (labels), 0.4rem (containers)
   Alignment:     flex-start (labels at top)

   Min-widths:
   - XS: 120px (Type selector)
   - SM: 140px (Operator selector)
   - MD: 180px (Values with flex:1)
   - LG: 200px+ (expandable fields)

   ============================================================================ */