/**
 * עיצוב מודול הערות
 * Comments Module Styles
 */

@layer modules {
  /* אזור דיון */
  .entity-discussion {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    border: 1px solid var(--border-subtle);
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  
  /* סיידבר - הודעות ותקשורת - גודל קטן */
  .col-md-2 .entity-discussion,
  .col-md-3 .entity-discussion,
  .col-md-4 .entity-discussion,
  .col-md-5 .entity-discussion,
  .lg\:col-span-3 .entity-discussion {
    margin-bottom: 0;
    height: auto;
    min-height: auto;
    max-height: 500px;
    padding: 0;
    border: none;
    background: transparent;
    max-width: 100%;
    width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: none;
  }
  
  /* וידוא שכל האלמנטים בתוך col-md-3/col-md-5 לא יגרמו ל-overflow */
  .col-md-3 *,
  .col-md-3 *::before,
  .col-md-3 *::after,
  .col-md-5 *,
  .col-md-5 *::before,
  .col-md-5 *::after {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .col-md-3 .discussion-item,
  .col-md-3 .discussion-header,
  .col-md-3 .discussion-content,
  .col-md-3 .discussion-footer,
  .col-md-3 .author-info,
  .col-md-3 .author-details,
  .col-md-3 .comment-meta,
  .col-md-3 .comment-text,
  .col-md-3 .discussion-form,
  .col-md-3 .comment-textarea,
  .col-md-5 .discussion-item,
  .col-md-5 .discussion-header,
  .col-md-5 .discussion-content,
  .col-md-5 .discussion-footer,
  .col-md-5 .author-info,
  .col-md-5 .author-details,
  .col-md-5 .comment-meta,
  .col-md-5 .comment-text,
  .col-md-5 .discussion-form,
  .col-md-5 .comment-textarea {
    max-width: 100%;
    width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    box-sizing: border-box;
  }
  
  .col-md-2 .entity-discussion .discussion-list,
  .col-md-3 .entity-discussion .discussion-list,
  .col-md-4 .entity-discussion .discussion-list,
  .lg\:col-span-3 .entity-discussion .discussion-list {
    flex: 0 1 auto;
    overflow-y: auto;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    max-height: 300px;
    min-height: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* וידוא שהסיידבר ייראה טוב עם card */
  .col-md-2 .card-body .entity-discussion,
  .col-md-2 .h-100 .entity-discussion,
  .col-md-3 .card-body .entity-discussion,
  .col-md-3 .h-100 .entity-discussion,
  .col-md-4 .card-body .entity-discussion,
  .col-md-4 .h-100 .entity-discussion,
  .col-md-5 .card-body .entity-discussion,
  .col-md-5 .h-100 .entity-discussion {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  
  /* וידוא שה-card-body לא מוגבל */
  .col-md-2 .card-body,
  .col-md-3 .card-body,
  .col-md-4 .card-body,
  .col-md-5 .card-body {
    max-width: 100%;
    width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    padding: var(--spacing-3, 0.75rem);
    box-sizing: border-box;
  }
  
  /* קטון כותרות וטקסט בסיידבר */
  .col-md-2 .entity-discussion .discussion-header h3,
  .col-md-3 .entity-discussion .discussion-header h3,
  .col-md-4 .entity-discussion .discussion-header h3,
  .col-md-5 .entity-discussion .discussion-header h3 {
    font-size: var(--fs-body);
    font-weight: var(--fs-h3-weight);
    flex-wrap: wrap;
    gap: var(--spacing-1);
  }
  
  .col-md-2 .entity-discussion .discussion-header,
  .col-md-3 .entity-discussion .discussion-header,
  .col-md-4 .entity-discussion .discussion-header,
  .col-md-5 .entity-discussion .discussion-header {
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    flex-wrap: wrap;
  }
  
  .col-md-2 .entity-discussion .comments-count,
  .col-md-3 .entity-discussion .comments-count,
  .col-md-4 .entity-discussion .comments-count,
  .col-md-5 .entity-discussion .comments-count {
    font-size: var(--fs-body-small);
    padding: var(--spacing-1) var(--spacing-2);
  }
  
  /* קטון פריטי הערות */
  .col-md-2 .entity-discussion .discussion-item,
  .col-md-3 .entity-discussion .discussion-item,
  .col-md-4 .entity-discussion .discussion-item,
  .col-md-5 .entity-discussion .discussion-item {
    padding: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }
  
  .col-md-2 .entity-discussion .author-avatar,
  .col-md-3 .entity-discussion .author-avatar,
  .col-md-4 .entity-discussion .author-avatar,
  .col-md-5 .entity-discussion .author-avatar {
    width: var(--spacing-7);
    height: var(--spacing-7);
    font-size: var(--fs-body-small);
  }
  
  .col-md-2 .entity-discussion .author-name,
  .col-md-3 .entity-discussion .author-name,
  .col-md-4 .entity-discussion .author-name,
  .col-md-5 .entity-discussion .author-name {
    font-size: var(--fs-body-small);
  }
  
  .col-md-2 .entity-discussion .comment-text,
  .col-md-3 .entity-discussion .comment-text,
  .col-md-4 .entity-discussion .comment-text,
  .col-md-5 .entity-discussion .comment-text {
    font-size: var(--fs-body-small);
    line-height: 1.5;
  }
  
  /* קטון טופס הערה */
  .col-md-2 .entity-discussion .comment-textarea,
  .col-md-3 .entity-discussion .comment-textarea,
  .col-md-4 .entity-discussion .comment-textarea,
  .col-md-5 .entity-discussion .comment-textarea {
    min-height: calc(var(--spacing-15) * 1);
    padding: var(--spacing-2);
    font-size: var(--fs-body-small);
  }
  
  .col-md-2 .entity-discussion .comment-actions,
  .col-md-3 .entity-discussion .comment-actions,
  .col-md-4 .entity-discussion .comment-actions {
    margin-top: var(--spacing-2);
  }
  
  .col-md-2 .entity-discussion .btn-primary,
  .col-md-2 .entity-discussion .btn-secondary,
  .col-md-3 .entity-discussion .btn-primary,
  .col-md-3 .entity-discussion .btn-secondary,
  .col-md-4 .entity-discussion .btn-primary,
  .col-md-4 .entity-discussion .btn-secondary {
    font-size: var(--fs-body-small);
    padding: var(--spacing-1) var(--spacing-2);
  }

  .discussion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--border-subtle);
    max-width: 100%;
    width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .discussion-header h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fs-h3-weight);
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    max-width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .comments-count {
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-md);
  }

  /* רשימת הערות */
  .discussion-list {
    margin-bottom: var(--spacing-5);
  }

  .discussion-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .discussion-item:hover {
    box-shadow: var(--shadow-soft);
    border-color: var(--border-strong);
  }

  .discussion-item.reply {
    margin-inline-start: var(--spacing-6);
    background: var(--bg-secondary);
    border-inline-start: 3px solid var(--primary-500);
  }

  /* כותרת הערה */
  .discussion-item .discussion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: none;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .author-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
  }

  .author-avatar {
    width: var(--spacing-10);
    height: var(--spacing-10);
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-500);
    color: var(--text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fs-h3-weight);
    font-size: var(--fs-body);
  }

  .author-avatar.small {
    width: var(--spacing-8);
    height: var(--spacing-8);
    font-size: var(--fs-body-small);
  }

  .author-avatar.default {
    background: var(--primary-500);
  }

  .author-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
    flex: 1 1 auto;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  .author-name {
    font-size: var(--fs-body);
    font-weight: var(--fs-h3-weight);
    color: var(--text-main);
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .author-username {
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .comment-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
    min-width: 0;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  .timestamp {
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
  }

  .edited-badge {
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
  }

  /* תוכן הערה */
  .discussion-content {
    margin-bottom: var(--spacing-3);
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .comment-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* תגיות משתמשים */
  .comment-text a[href^="@"] {
    color: var(--primary-600);
    font-weight: var(--fs-h3-weight);
    text-decoration: none;
  }

  .comment-text a[href^="@"]:hover {
    text-decoration: underline;
  }

  /* תחתית הערה */
  .discussion-footer {
    display: flex;
    gap: var(--spacing-3);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--border-subtle);
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  .btn-reply,
  .btn-edit,
  .btn-delete {
    font-size: var(--fs-body-small);
    padding: var(--spacing-1) var(--spacing-2);
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
  }

  .btn-reply:hover,
  .btn-edit:hover {
    color: var(--primary-600);
  }

  .btn-delete:hover {
    color: var(--error-500);
  }

  /* תגובות */
  .discussion-replies {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-subtle);
  }

  /* טופס הערה */
  .discussion-form {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    max-width: 100%;
    width: 100%;
    /* ⚠️ הוסר overflow-x: hidden - אסור לפי חוקי זהב #9 */
    /* overflow-x: hidden; - הוסר */
    box-sizing: border-box;
  }
  
  /* הגבלת גובה טופס בסרגל צד */
  .col-md-2 .entity-discussion .discussion-form,
  .col-md-3 .entity-discussion .discussion-form,
  .col-md-4 .entity-discussion .discussion-form,
  .lg\:col-span-3 .entity-discussion .discussion-form {
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
  }

  /* FIX: מניעת Collapsed Inline Text / Forced Column Layout Bug במובייל */
  /* ✅ תיקון: הוסר !important - שימוש ב-selector מדויק יותר */
  .comment-textarea,
  .entity-discussion .comment-textarea,
  form .comment-textarea,
  textarea.comment-textarea {
    display: block; /* חובה: block בלבד, לא flex/grid */
    width: 100%;
    max-width: 100%;
    min-height: calc(var(--spacing-24) + var(--spacing-4));
    padding: var(--spacing-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s ease;
    line-height: 1.6; /* חובה: line-height >= 1.4 למניעת פירוק טקסט */
    white-space: normal; /* חובה: טקסט רגיל, לא vertical */
  }
  
  /* הגבלת גובה textarea בסרגל צד */
  .col-md-2 .entity-discussion .comment-textarea,
  .col-md-3 .entity-discussion .comment-textarea,
  .col-md-4 .entity-discussion .comment-textarea,
  .lg\:col-span-3 .entity-discussion .comment-textarea {
    min-height: 80px;
    max-height: 120px;
    padding: var(--spacing-2);
    /* צבעי טקסט ורקע - ניגודיות תקינה */
    /* משתמשים במשתנים של התמה הכהה */
    color: var(--text-main, #e9eef5);
    background: var(--bg-surface, #273245);
  }

  .comment-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
    /* וידוא שצבע הטקסט נשאר תקין גם ב-focus */
    color: var(--text-main, #e9eef5);
    background: var(--bg-surface, #273245);
  }
  
  .comment-textarea::placeholder {
    color: var(--text-secondary, #b8c2cf);
    opacity: 0.7;
  }

  .mention-hint {
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
  }

  .mention-autocomplete {
    position: absolute;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-strong);
    max-height: calc(var(--spacing-20) * 2.5);
    overflow-y: auto;
    z-index: 1000;
    margin-top: var(--spacing-1);
    display: none;
  }

  .mention-autocomplete.active {
    display: block;
  }

  .mention-autocomplete-item {
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .mention-autocomplete-item:hover {
    background: var(--bg-secondary);
  }

  .comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
  }

  /* אין הערות */
  .no-comments {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--text-secondary);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .entity-discussion {
      padding: var(--spacing-4);
    }

    .discussion-item.reply {
      margin-inline-start: var(--spacing-3);
    }

    .author-info {
      flex-direction: column;
      align-items: flex-start;
    }
    
    /* אזור הערות ושיתוף - מובייל */
    .row .col-md-4,
    .row .col-md-8,
    .grid .md\:col-span-4,
    .grid .md\:col-span-8,
    .grid [class*="md:col-span-4"],
    .grid [class*="md:col-span-8"] {
      width: 100%;
      margin-bottom: var(--spacing-4);
    }
    
    .action-buttons {
      margin-bottom: var(--spacing-3);
    }
    
    .action-buttons .btn {
      width: 100%;
      margin-bottom: var(--spacing-2);
    }
  }
  
  /* Responsive - טאבלט */
  @media (max-width: 992px) and (min-width: 769px) {
    .row .col-md-4,
    .grid .md\:col-span-4,
    .grid [class*="md:col-span-4"] {
      margin-top: var(--spacing-4);
    }
  }
  
  /* ===== Overflow Rules for Comments Module ===== */
  /* חריגה לסיידבר - לא חלים עליו חוקי overflow */
  .col-md-2,
  .col-md-2 *,
  .col-md-3,
  .col-md-3 *,
  .col-md-4,
  .col-md-4 *,
  #tab-details .col-md-2,
  #tab-details .col-md-3,
  #tab-details .col-md-3 *,
  .entity-discussion,
  .entity-discussion *,
  .card-body .entity-discussion,
  .card-body .entity-discussion * {
    max-width: none;
    overflow-x: visible;
    overflow-y: auto;
    word-wrap: normal;
  }
}