/* ============================================
   Layouts CSS - Enterprise V9 - מאוחד
   תוכנית שידרוג עיצוב Enterprise מקיף
   ============================================
   
   קובץ מאוחד - פריסות (containers, grids, sidebars)
   שימוש ב-clamp/min/max במקום fixed widths
   
   תאריך יצירה: 2025-01-27
   גרסה: 2.0.0 (מאוחד)
   ============================================ */

@layer layouts {
  /* ===== שלד בסיסי - לעולם לא מעבר ל-100% ===== */
  /* ✅ תיקון קריטי: body לא צריך להיות flex - זה גורם לקריסה */
  body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block !important; /* ✅ מונע flex על body */
  }
  
  #main,
  main,
  .content-wrapper,
  .container,
  .container-fluid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* ===== Flex / Grid – min-width: 0 למניעת שבירת Layout ===== */
  .row > [class*="col"],
  [class*="col-"],
  .grid > *,
  [class*="grid"] > *,
  [class*="col-span"],
  [class*="md:col-span"],
  [class*="lg:col-span"] {
    min-width: 0; /* ✅ מונע מעמודה אחת לדחוף את הכל החוצה */
    white-space: normal; /* ✅ תיקון: מונע פירוק אנכי של טקסט */
    flex-shrink: 0; /* ✅ תיקון: מונע התכווצות */
  }
  
  /* ✅ תיקון: מונע פירוק אנכי של טקסט ב-grid עצמו */
  .grid,
  [class*="grid"],
  [class*="grid-cols"] {
    white-space: normal;
    min-width: 0;
  }
  
  /* ✅ תיקון: מונע פירוק אנכי של טקסט ב-grid cells */
  .grid > div,
  .grid > [class*="col"],
  [class*="grid"] > div,
  [class*="grid"] > [class*="col"],
  [class*="grid-cols"] > div,
  [class*="grid-cols"] > [class*="col"] {
    white-space: normal;
    min-width: 0;
    flex-shrink: 0;
  }
  
  /* ✅ תיקון קריטי: grid-cols-12 במובייל בתוך form-section - Mobile-First */
  /* הבעיה: utilities.css מגדיר grid-cols-12 עם repeat(12, 1fr) שגורם ל-cells צרים מדי במובייל */
  /* הפתרון: במובייל, grid-cols-12 בתוך form-section הופך ל-1fr */
  @media (max-width: 768px) {
    .form-section .grid.grid-cols-12,
    .form-section [class*="grid-cols-12"] {
      grid-template-columns: 1fr;
    }
    
    .form-section .grid.grid-cols-12 > div,
    .form-section [class*="grid-cols-12"] > div,
    .form-section [class*="col-span"],
    .form-section [class*="md:col-span"] {
      grid-column: span 1;
      min-width: 0;
      white-space: normal;
    }
  }
  
  /* ===== Containers - רספונסיבי (Mobile-First) ===== */
  .container,
  .container-lg,
  .container-xl,
  .container-sm,
  .container-md,
  .container-form,
  .container-table,
  .container-fluid {
    width: 100%; /* ✅ Mobile-First - 100% במובייל */
    max-width: 100%;
    margin-inline: auto;
    margin-top: 0;
    padding-top: 0;
    padding-inline: var(--space-4);
    box-sizing: border-box;
  }

  /* דסקטופ - רוחב מקסימלי עם padding */
  @media (min-width: 1024px) {
    .container,
    .container-lg,
    .container-xl,
    .container-sm,
    .container-md,
    .container-form,
    .container-table {
      width: 100%;
      max-width: 100%;
    }
  }
  
  /* דסקטופ - הסרת padding מיותר בדף employees למניעת התכווצות */
  @media (min-width: 1024px) {
    .employees-page .container:not(.dashboard-container-wide):not(.container-fluid),
    .employees-page .container-lg:not(.dashboard-container-wide),
    .employees-page .container-xl:not(.dashboard-container-wide),
    .employees-page .container-sm:not(.dashboard-container-wide),
    .employees-page .container-md:not(.dashboard-container-wide),
    .employees-page .container-form:not(.dashboard-container-wide),
    .employees-page .container-table:not(.dashboard-container-wide) {
      padding-inline: 0;
    }
  }
  
  /* ===== Dashboard Container - יוצא דופן ===== */
  .dashboard-container-wide {
    width: min(100%, 1600px);
    max-width: 1600px;
    margin-inline: auto;
    overflow: visible;
    height: auto;
    min-height: auto;
  }
  
  /* דריסת container גלובלי בדאשבורד */
  .dashboard-page .container.dashboard-container-wide {
    width: min(100%, 1600px);
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--space-4);
    overflow: visible;
    height: auto;
    min-height: auto;
  }
  
  .dashboard-page-full-width {
    width: 100%;
    max-width: 100%;
  }
  
  /* ===== Content Wrapper בדאשבורד - יוצא דופן ===== */
  .dashboard-main .content-wrapper,
  .dashboard-page .content-wrapper,
  .dashboard-page ~ .content-wrapper,
  main:has(.dashboard-page) .content-wrapper,
  main:has(.dashboard-main) .content-wrapper {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }
  
  /* דריסת Tailwind classes בדאשבורד */
  main:has(.dashboard-page) .content-wrapper.max-w-screen-2xl,
  main:has(.dashboard-main) .content-wrapper.max-w-screen-2xl,
  .dashboard-main .content-wrapper.max-w-screen-2xl,
  .dashboard-page .content-wrapper.max-w-screen-2xl {
    max-width: 100%;
    width: 100%;
  }
  
  /* ===== Topbar - סרגל עליון ===== */
  .topbar {
    height: var(--topbar-height, 60px);
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: var(--z-navbar);
  }
  
  /* ===== Sidebar - כרטיסים/סיידבר: רוחב מקס' גמיש ===== */
  .sidebar {
    inline-size: clamp(240px, 22vw, 320px);
    flex-shrink: 0 !important; /* ✅ תיקון קריטי: מונע התכווצות */
    min-width: clamp(240px, 22vw, 320px); /* ✅ תיקון: רוחב מינימלי */
    white-space: normal; /* ✅ תיקון: מונע פירוק אנכי של טקסט */
  }
  
  /* ===== App Main - אזור תוכן ראשי ===== */
  .app-main,
  main {
    flex: 1 0 auto; /* ✅ תיקון: flex-shrink: 0 מונע התכווצות */
    flex-shrink: 0; /* ✅ תיקון קריטי: מונע התכווצות שגורמת לטקסט אנכי */
    min-width: 0; /* ✅ תיקון: מונע התכווצות מינימלית */
    margin-top: 0;
    padding-top: 0;
    margin-inline-start: var(--sidebar-width, 275px);
    padding: var(--space-6);
    min-height: calc(100vh - var(--topbar-height, 60px));
    white-space: normal; /* ✅ תיקון: מונע פירוק אנכי של טקסט */
  }
  
  /* App Main ללא sidebar - וידוא מפורש */
  .app-main.no-sidebar,
  main.no-sidebar {
    margin-inline-start: 0 !important;
  }
  
  /* ✅ תיקון: אם אין sidebar בפועל - הסר margin */
  /* רק כשאין sidebar בפועל - הסר margin */
  body:not(:has(.sidebar:not([style*="display: none"]):not(.hidden))) .app-main,
  body:not(:has(.sidebar:not([style*="display: none"]):not(.hidden))) main {
    margin-inline-start: 0 !important;
  }
  
  /* תמיכה גם ב-class מפורש (fallback) */
  body.no-sidebar .app-main,
  body.no-sidebar main {
    margin-inline-start: 0 !important;
  }
  
  /* דסקטופ - וידוא ש-main לא מגביל את הרוחב */
  @media (min-width: 1024px) {
    main#main,
    main#main-content {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-inline: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    
    /* ✅ בדסקטופ - רק אם אין sidebar בפועל, הסר margin */
    /* אם יש sidebar - שמור על margin-inline-start */
    body:not(:has(.sidebar:not([style*="display: none"]):not(.hidden))) main#main,
    body:not(:has(.sidebar:not([style*="display: none"]):not(.hidden))) main#main-content {
      margin-inline-start: 0 !important;
    }
    
    /* תמיכה גם ב-class מפורש (fallback) */
    body.no-sidebar main#main,
    body.no-sidebar main#main-content,
    main#main.no-sidebar,
    main#main-content.no-sidebar {
      margin-inline-start: 0 !important;
    }
  }
  
  /* ===== Media - אלמנטים מדיה: שומרים יחס בלי גובה קשיח ===== */
  .media {
    aspect-ratio: 16/9;
    object-fit: cover;
    inline-size: 100%;
    block-size: auto;
  }
  
  /* ===== Grid Cards - גריד רספונסיבי (Mobile-First) ===== */
  .grid-cards {
    display: grid;
    grid-template-columns: 1fr; /* ✅ Mobile-First - ברירת מחדל למובייל */
    gap: var(--space-4);
  }
  
  @media (min-width: 768px) {
    .grid-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */
    }
  }
  
  @media (min-width: 1024px) {
    .grid-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */
    }
  }
  
  /* ===== Content Wrapper - רספונסיבי (Mobile-First) ===== */
  .content-wrapper {
    width: 100%; /* ✅ Mobile-First - 100% במובייל */
    max-width: var(--page-max-width, 1280px); /* ✅ תיקון לפי חוק זהב #1 */
    margin-inline: auto;
    margin-top: 0;
    padding-top: 0;
    padding: var(--space-4);
    min-inline-size: 0;
    /* ✅ תיקון: הוספת overflow-x: hidden למניעת גלילה אופקית - מותר לפי חוק זהב #9 החדש */
    overflow-x: hidden; /* ✅ מותר לפי חוק זהב #9 */
    overflow-y: visible;
    position: relative;
    min-width: 0;
    flex-shrink: 0; /* ✅ תיקון קריטי: מונע התכווצות שגורמת לטקסט אנכי */
    box-sizing: border-box;
    height: auto;
    min-height: auto;
    white-space: normal; /* ✅ תיקון: מונע פירוק אנכי של טקסט */
  }

  /* דסקטופ - רוחב מקסימלי */
  @media (min-width: 1024px) {
    /* ✅ תיקון: הסרת :not() מורכב - לא תקין CSS */
    .content-wrapper {
      width: 100%;
      max-width: 100%;
    }
    
    /* הסרת padding מיותר בדף employees למניעת התכווצות */
    /* ⚠️ תיקון: הוסר !important - שימוש ב-selector יותר ספציפי במקום */
    /* הכלל הועבר לשכבה modules עם selector ספציפי יותר */
    /* אם יש בעיה - לבדוק ב-modules/employees.css */
  }
  
  /* דאשבורד - content-wrapper יוצא דופן - 100% רוחב ללא padding */
  .dashboard-page ~ .content-wrapper,
  main:has(.dashboard-page) .content-wrapper,
  main:has(.dashboard-main) .content-wrapper,
  .dashboard-page .content-wrapper,
  .dashboard-main .content-wrapper {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    padding-left: 0;
    padding-right: 0;
    padding: 0;
    /* ✅ תיקון: הוספת overflow-x: hidden למניעת גלילה אופקית - מותר לפי חוק זהב #9 החדש */
    overflow-x: hidden; /* ✅ מותר לפי חוק זהב #9 */
    overflow-y: visible; /* ✅ גלילה אנכית מותרת */
    height: auto;
    min-height: auto;
    max-height: none;
    display: block;
  }

  /* דאשבורד - וידוא מפורש שכל התוכן גלוי */
  .dashboard-page,
  .dashboard-main,
  .dashboard-container-wide,
  .dashboard-page .container,
  .dashboard-main .container,
  .dashboard-page .dashboard-section,
  .dashboard-main .dashboard-section {
    overflow: visible;
    height: auto;
    min-height: auto;
    max-height: none;
    display: block;
  }
  
  /* ===== Toolbar ===== */
  .toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
  }
  
  /* ===== Containers נוספים - רספונסיבי (Mobile-First) ===== */
  .wrap,
  [class*="container"]:not(.dashboard-container-wide),
  [class*="-page"]:not(.dashboard-page):not(.dashboard-page-full-width),
  [class*="max-w-"]:not(.dashboard-container-wide),
  [class*="w-full"]:not(.dashboard-page):not(.dashboard-page-full-width) {
    width: 100%; /* ✅ Mobile-First - 100% במובייל */
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* דסקטופ - רוחב מקסימלי */
  @media (min-width: 1024px) {
    .wrap,
    [class*="container"]:not(.dashboard-container-wide):not(.container-fluid),
    [class*="-page"]:not(.dashboard-page):not(.dashboard-page-full-width) {
      width: 100%;
      max-width: 100%;
    }
  }
  
  /* דאשבורד - יוצא דופן מהכללים הגלובליים */
  .dashboard-page,
  .dashboard-page-full-width,
  .dashboard-container-wide,
  .dashboard-page [class*="container"],
  .dashboard-page [class*="max-w-"],
  .dashboard-page [class*="w-full"] {
    width: auto;
    max-width: none;
  }
  
  /* ===== דריסת Tailwind classes - רספונסיבי (Mobile-First) ===== */
  .max-w-screen-2xl,
  .max-w-screen-xl,
  .max-w-screen-lg,
  .max-w-screen-md,
  .max-w-screen-sm,
  .max-w-full,
  .w-full {
    width: 100%; /* ✅ Mobile-First - 100% במובייל */
    max-width: 100%;
    box-sizing: border-box;
  }

  /* דסקטופ - רוחב מקסימלי */
  @media (min-width: 1024px) {
    .max-w-screen-2xl,
    .max-w-screen-xl,
    .max-w-screen-lg,
    .max-w-screen-md,
    .max-w-screen-sm {
      width: 100%;
      max-width: 100%;
    }
    
    /* הסרת padding מיותר בדסקטופ למניעת התכווצות */
    .w-full.px-4,
    .w-full[class*="px-4"],
    .employees-page .w-full.px-4,
    .employees-page .w-full[class*="px-4"],
    /* תיקון ספציפי לדף employees/view */
    main#main .w-full.px-4,
    main#main .w-full[class*="px-4"],
    main#main-content .w-full.px-4,
    main#main-content .w-full[class*="px-4"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-inline: 0 !important;
    }
  }
  
  /* ===== Two Column Layout ===== */
  .two-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-6);
  }
  
  @media (max-width: 1024px) {
    .two-column {
      grid-template-columns: 1fr;
    }
  }
  
  /* ===== Three Column Layout (Mobile-First) ===== */
  .three-column {
    display: grid;
    grid-template-columns: 1fr; /* ✅ Mobile-First - ברירת מחדל למובייל */
    gap: var(--space-4);
  }
  
  @media (min-width: 768px) {
    .three-column {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */
    }
  }
  
  @media (min-width: 1024px) {
    .three-column {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */
    }
  }
  
  /* ===== Flex Layouts ===== */
  .flex-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
  }
  
  .flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  
  @media (max-width: 768px) {
    .flex-row {
      flex-direction: column;
    }
  }

  /* ===== Sidebar - ניהול sidebars בדסקטופ ===== */
  /* ⚠️ הערה: קוד חסימת sidebars אגרסיבי הוסר - זה מסוכן מדי ויכול לשבור דפים */
  /* אם יש צורך להסתיר sidebars ספציפיים - יש לעשות זאת במודול הרלוונטי או ב-overrides.css */
  /* ✅ רק וידוא ש-sidebars מותרים נראים - ללא חסימה אגרסיבית */
  @media (min-width: 1024px) {
    /* וידוא ש-sidebars מותרים נראים - רק overrides ספציפיים */
    .reports-view-sidebar,
    .cpanel-file-manager .fm-sidebar,
    .fm-sidebar {
      display: block;
      visibility: visible;
      opacity: 1;
      position: relative;
      overflow: visible;
    }
    
    .cpanel-file-manager .fm-sidebar {
      display: flex;
      flex-direction: column;
      width: 260px;
    }
  }
  
  /* ===== Overflow Rules for Layouts ===== */
  /* ⚠️ הערה: חוקי overflow גלובליים רחבים מדי הוסרו - הם סתרו זה את זה */
  /* overflow-x: visible על כל flex/gap מול overflow-x: hidden על content-wrapper */
  /* אם יש צורך ב-overflow rules ספציפיים - יש לעשות זאת במודול הרלוונטי או ב-overrides.css */
  
  /* ✅ רק חריגות ספציפיות נחוצות: */
  
  /* חריגה לסרגל הניווט - לא חלים עליו חוקי overflow */
  header,
  nav,
  .premium-navbar,
  .navbar,
  #primary-nav,
  [role="banner"],
  [role="navigation"] {
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* חריגה לטאבים - גלילה אופקית במובייל */
  .hub-tabs-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
  }

  .hub-tabs {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  
  /* תיקון: וידוא ש-main לא חותך את nav-tabs-wrapper */
  main#main,
  #main,
  [role="main"],
  main#main-content,
  #main-content {
    /* ✅ תיקון: הוספת overflow-x: hidden למניעת גלילה אופקית - מותר לפי חוק זהב #9 החדש */
    overflow-x: hidden; /* ✅ מותר לפי חוק זהב #9 */
    overflow-y: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  
  /* ✅ הוסר: הגדרה כפולה וסותרת של content-wrapper */
  /* ההגדרה הנכונה נמצאת בשורות 167-210 */
  
  /* ===== טבלאות רחבות – גלילה מקומית במקום שבירת העמוד ===== */
  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  
  /* וידוא שטבלאות בתוך table-scroll לא שוברות את העיצוב */
  .table-scroll table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}