/* ============================================
   Forms Vertical Collapse Prevention
   מניעת קריסה אנכית של טקסט ושדות בטפסים
   ============================================
   
   מטרה: למנוע מצב שבו טקסט ושדות מסתדרים בטור אנכי
   (כל אות בשורה) במקום בשורה אחת תקינה.
   
   תאריך יצירה: 2025-01-27
   גרסה: 1.0.0
   ============================================ */

@layer components {
  /* ============================================
     הנחיה 1 — לא לאפשר vertical collapse
     ============================================ */
  
  /* Form Group - קבוצת שדות */
  .form-group,
  .form-group-modern,
  .input-wrapper,
  .uploader-row,
  .field-row,
  .form-field-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  
  /* אם צריך label מעל השדה - משתמשים ב-form-group-vertical */
  .form-group-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  
  /* ============================================
     הנחיה 2 — למנוע shrink
     ============================================ */
  
  .form-group *,
  .form-group-modern *,
  .input-wrapper *,
  .uploader-row *,
  .field-row *,
  .form-field-wrapper * {
    flex-shrink: 0;
  }
  
  /* שדות קלט יכולים להתכווץ רק אם יש צורך */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .form-group-modern input,
  .form-group-modern select,
  .form-group-modern textarea,
  .input-wrapper input,
  .input-wrapper select,
  .input-wrapper textarea,
  .field-row input,
  .field-row select,
  .field-row textarea {
    flex-shrink: 1;
    min-width: 0;
  }
  
  /* ============================================
     הנחיה 3 — להבטיח שיש מקום רוחבי
     ============================================ */
  
  input,
  select,
  textarea {
    min-width: 200px;
    width: auto;
    max-width: 100%;
  }
  
  /* במובייל - שדות תופסים את כל הרוחב */
  @media (max-width: 768px) {
    input,
    select,
    textarea {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
  }
  
  /* ============================================
     הנחיה 4 — איסור מוחלט על הגדרות שמפעילות קריסה
     ============================================ */
  
  /* איסור על display: block !important בטפסים */
  .form-group,
  .input-wrapper,
  .uploader-row,
  .field-row {
    /* אסור: display: block !important; */
  }
  
  /* איסור על flex-direction: column !important בטפסים */
  .form-group:not(.form-group-vertical),
  .input-wrapper:not(.input-wrapper-vertical),
  .uploader-row:not(.uploader-row-vertical),
  .field-row:not(.field-row-vertical) {
    /* אסור: flex-direction: column !important; */
  }
  
  /* איסור על flex-wrap: wrap בתוך טפסים */
  .form-group:not(.form-group-wrap),
  .input-wrapper:not(.input-wrapper-wrap),
  .uploader-row:not(.uploader-row-wrap),
  .field-row:not(.field-row-wrap) {
    /* אסור: flex-wrap: wrap; */
  }
  
  /* איסור על width: fit-content */
  .form-group,
  .input-wrapper,
  .uploader-row,
  .field-row {
    /* אסור: width: fit-content; */
  }
  
  /* איסור על height קשיח לקונטיינרים קטנים */
  .form-group,
  .input-wrapper,
  .uploader-row,
  .field-row {
    /* אסור: height: XXXpx; (רק min-height מותר) */
    min-height: auto;
  }
  
  /* ============================================
     הנחיה 5 — חובה ליצור Wrapper לכל שדה
     ============================================ */
  
  /* Field Row - שורה של שדה */
  .field-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  
  /* Field Row עם Label */
  .field-row label {
    flex-shrink: 0;
    min-width: 120px;
    margin: 0;
  }
  
  /* Field Row עם Input */
  .field-row input,
  .field-row select,
  .field-row textarea {
    flex: 1;
    min-width: 0;
  }
  
  /* ============================================
     הגנה מפני RTL + Flex בעיות
     ============================================ */
  
  [dir="rtl"] .form-group,
  [dir="rtl"] .form-group-modern,
  [dir="rtl"] .input-wrapper,
  [dir="rtl"] .uploader-row,
  [dir="rtl"] .field-row {
    flex-direction: row-reverse;
  }
  
  /* ============================================
     הגנה מפני textarea collapse
     ============================================ */
  
  textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1.6;
    white-space: normal;
    min-height: 100px;
  }
  
  /* איסור על display: flex/grid ב-textarea */
  textarea[style*="display: flex"],
  textarea[style*="display:flex"],
  textarea[style*="display: grid"],
  textarea[style*="display:grid"] {
    display: block;
  }
  
  /* איסור על flex-direction: column ב-textarea */
  textarea[style*="flex-direction"],
  textarea[style*="flex-direction: column"] {
    display: block;
  }
  
  /* ============================================
     הגנה מפני input collapse
     ============================================ */
  
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="tel"],
  input[type="url"],
  input[type="search"] {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1.5;
    white-space: normal;
  }
  
  /* איסור על display: flex/grid ב-input */
  input[style*="display: flex"],
  input[style*="display:flex"],
  input[style*="display: grid"],
  input[style*="display:grid"] {
    display: block;
  }
  
  /* ============================================
     הגנה מפני select collapse
     ============================================ */
  
  select {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1.5;
    white-space: normal;
  }
  
  /* איסור על display: flex/grid ב-select */
  select[style*="display: flex"],
  select[style*="display:flex"],
  select[style*="display: grid"],
  select[style*="display:grid"] {
    display: block;
  }
  
  /* ============================================
     הגנה מפני width: 100vw
     ============================================ */
  
  .form-group,
  .input-wrapper,
  .uploader-row,
  .field-row,
  input,
  select,
  textarea {
    /* אסור: width: 100vw; */
    /* אסור: min-width: 100vw; */
  }
  
  /* ============================================
     הגנה מפני height קשיח
     ============================================ */
  
  .form-group,
  .input-wrapper,
  .uploader-row,
  .field-row {
    /* אסור: height: XXXpx; */
    /* מותר: min-height: XXXpx; */
  }
  
  /* ============================================
     הגנה מפני line-height קטן מדי
     ============================================ */
  
  input,
  select,
  textarea {
    line-height: 1.5;
    min-height: 1.5em;
  }
  
  textarea {
    line-height: 1.6;
    min-height: 1.6em;
  }
  
  /* ============================================
     הגנה מפני transform/scale
     ============================================ */
  
  .form-group,
  .input-wrapper,
  .uploader-row,
  .field-row {
    /* אסור: transform: scale(...); */
    /* אסור: transform: translateX(...); */
  }
  
  /* ============================================
     הגנה מפני writing-mode
     ============================================ */
  
  input,
  select,
  textarea {
    /* אסור: writing-mode: vertical-rl; */
    writing-mode: horizontal-tb;
  }
  
  /* ============================================
     מובייל - התאמות נוספות
     ============================================ */
  
  @media (max-width: 768px) {
    .form-group,
    .input-wrapper,
    .uploader-row,
    .field-row {
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .field-row label {
      min-width: 100%;
      width: 100%;
    }
    
    .field-row input,
    .field-row select,
    .field-row textarea {
      width: 100%;
      min-width: 0;
    }
  }
}