/* CodeMirror custom styles and editor switcher */
.codemirror-container {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.cm-editor { min-height: 400px; max-height: 60vh; font-family: 'Fira Code','Consolas',monospace; }

/* View Mode (view_file.html): CodeMirror בגובה התוכן, ומי שגולל הוא מי שמחזיק אותו —
   במסך רגיל העמוד, ובמסך מלא קופסת הקוד (#codeCard:fullscreen .code-container ב-
   view_file.html). גם במסך מלא, בכוונה: שם ה-height: 100% של העורך נפל ל-auto,
   כי להורה שלו אין גובה מוגדר (CSS 2.1, סעיף 10.5), ושום דבר לא גלל. */
#codeCard .codemirror-container.cm-autoheight {
  overflow: visible;
}
#codeCard .codemirror-container.cm-autoheight .cm-editor {
  height: auto;
  min-height: 0;
  max-height: none;
}
#codeCard .codemirror-container.cm-autoheight .cm-scroller {
  height: auto;
  overflow: visible;
}
/* Modified: Default to row layout for tablets/desktop */
.editor-switcher { display:flex; flex-direction:column; align-items: stretch; gap:.5rem; margin:.5rem 0; padding:.65rem; background: rgba(255,255,255,0.05); border-radius:8px; }
.editor-switcher-row { display:flex; justify-content:flex-start; align-items:center; gap:clamp(.5rem,1.5vw,1.25rem); flex-wrap:nowrap; width:100%; min-height:48px; }
.editor-switcher-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.btn-switch-editor { padding:.5rem 1rem; background: rgba(100,100,255,0.2); border:1px solid rgba(100,100,255,0.5); border-radius:6px; color:#fff; cursor:pointer; }
.btn-switch-editor i { margin-inline-end:.35rem; }
.editor-switcher .btn-switch-editor { min-width: fit-content; }
.btn-switch-editor:hover { background: rgba(100,100,255,0.3); }
/* קבוצת הכפתורים בנויה משתי יחידות (``addSwitcherButton`` ב-``editor-manager.js``). הראשונה — "בטל", "בצע שוב",
   "בחר הכל" ו"העתק" — כולם באותו גובה: כפתור שיש בו רק אייקון נמתח לגובה של כפתור עם טקסט (``align-items``
   נשאר ``stretch``). השנייה — "הדבק", התא של ההודעות וסרגל ה-MD — לא נשברת: כשהשורה צרה היא יורדת לשורה הבאה
   כולה, ולכן MD תמיד באותה שורה עם "הדבק". היא ממלאת את מה שנשאר בשורה שלה, והתא שבתוכה את הרווח שבין "הדבק"
   לסרגל. הסרגל לא באותה יחידה עם הכפתורים של הראשונה, כי הוא גבוה מהם בקצת (נמדד: 29.8 מול 28.2), ובאותה
   יחידה היה מותח את כולם לגובה שלו. */
.editor-clipboard-actions { --editor-clip-gap:.5rem; display:flex; align-items:center; gap:var(--editor-clip-gap); flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.editor-clip-head { display:flex; gap:var(--editor-clip-gap); flex-wrap:wrap; min-width:0; }
.editor-clip-tail { display:flex; align-items:center; gap:var(--editor-clip-gap); flex:1 1 auto; min-width:max-content; align-self:stretch; }
.btn-editor-clip { padding:.35rem .75rem; border-radius:6px; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color:#fff; font-size:.85rem; display:flex; align-items:center; gap:.35rem; cursor:pointer; transition: background .2s ease, border-color .2s ease; }
.btn-editor-clip:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }
.btn-editor-clip:disabled { opacity:.6; cursor:not-allowed; }
/* "בטל" ו"בצע שוב" (``.btn-editor-history`` ב-``editor-manager.js``) — אייקון בלי טקסט. בעמוד מימין לשמאל "אחורה"
   הוא ימינה, ולכן החצים בתמונת ראי: החץ של "בטל" פונה ימינה. ``html[dir="rtl"]`` ולא ``:dir(rtl)`` — התקדים
   בריפו (ההסבר ב-``toast.css``). */
html[dir="rtl"] .btn-editor-history > i { transform: scaleX(-1); }
/* בעורך הפשוט הכפתורים מוסתרים (``hidden``), ו-``display:flex`` של ``.btn-editor-clip`` היה גובר על ``hidden``. */
.btn-editor-history[hidden] { display: none; }
.editor-info-primary { display:flex; align-items:center; gap:.4rem; font-size:.85rem; opacity:.9; margin-inline-start:auto; margin-inline-end:0; margin-left:auto; padding:.25rem .85rem; border-radius: 999px; background: rgba(255,255,255,0.04); white-space:nowrap; flex-shrink:0; }
html[dir="rtl"] .editor-info-primary { margin-left:0; margin-right:auto; }
/* הודעה זמנית ("כל הקוד סומן", "הוזרק: טבלה") — צפה בקצה הרווח שאחרי הכפתורים, ואינה תופסת מקום, ולכן השורה לא
   משנה גובה כשהיא מופיעה, והעורך לא קופץ. עד נובמבר 2026 היא ישבה באותו תא של grid עם התווית "קיצורי מקלדת
   זמינים", שהחזיקה לה את המקום; התווית הוסרה (``updateInfoBanner`` ב-``editor-manager.js``), ובלעדיה הודעה הזיזה
   את העורך — נמדד 17px בעורך הציבורי ברוחב 1024 ו-31px בעמוד העריכה ברוחב 820.
   התא (``.editor-info-slot``) יושב ביחידה האחרונה של קבוצת הכפתורים (``.editor-clip-tail``), אחרי "הדבק", וסרגל
   ה-MD של עמודי העריכה וההעלאה אחריו, אחרון ביחידה (``moveToEditorRow`` ב-``markdown-toolbar.js``). התא ממלא את
   הרווח שבין "הדבק" לסרגל, וההודעה צפה בקצה שלו — ולכן היא לא מכסה את כפתור ה-MD. כשאין רווח התא מתכווץ לאפס,
   ובזכות השוליים השליליים (בגודל הרווח שלפניו) הוא גם לא מוסיף רווח. בשורה צרה הרווח קטן מההודעה, והיא מכסה
   לכמה שניות חלק מהכפתורים שלפניה, ולכן יש לה רקע; ``pointer-events: none`` משאיר אותם לחיצים. כשהקבוצה נשברת
   לשתי שורות (בטלפון, או כשהתצוגה החיה דלוקה והשורה בחצי של העורך), היחידה יורדת כולה, והסרגל נשאר עם "הדבק".
   עד נובמבר 2026 התא והסרגל ישבו מחוץ לקבוצה, ובטלפון כל אחד מהם ירד לשורה משלו. התווית "עורך טקסט בסיסי" של
   העורך הפשוט נשארה, בקצה התא: כשהיא מוצגת התא לפחות ברוחב שלה, ובלי שוליים שליליים, כדי שלא תיחתך ולא תיצמד
   לכפתור; בזמן הודעה היא נעלמת (visibility). */
.editor-info-slot { position:relative; display:grid; align-items:center; justify-items:end; flex:1 1 0; min-width:0; align-self:stretch; margin-inline-start:calc(-1 * var(--editor-clip-gap, .5rem)); }
.editor-info-slot:has(> .editor-info-primary:not([hidden])) { min-width:max-content; margin-inline-start:0; }
.editor-info-slot > .editor-info-status,
.editor-info-slot > .editor-info-primary { grid-area: 1 / 1; }
.editor-info-slot:has(> .editor-info-status:not(:empty)) > .editor-info-primary { visibility:hidden; }
.editor-info-primary[hidden] { display:none; }
.editor-info-status { position:absolute; inset-inline-end:0; top:50%; transform:translateY(-50%); z-index:1; padding:.25rem .85rem; border-radius:999px; background: var(--bg-secondary); border:1px solid var(--glass-border, transparent); font-size:.8rem; color: var(--text-secondary, var(--primary, #8ec5ff)); white-space:nowrap; pointer-events:none; }
.editor-info-status:empty { display:none; }
.editor-loading { position: relative; min-height: 48px; display:flex; align-items:center; gap:.5rem; color:#fff; }
.editor-transitioning { opacity: .7; }
/* בזמן טעינה – ננעל רק את אזור העורך, לא את כפתור ההחלפה */
.editor-transitioning .codemirror-container { pointer-events: none; }
/* Gutters & selection to match theme */
.cm-gutters { background: rgba(0,0,0,0.3); border-right: 1px solid rgba(255,255,255,0.1); }
.cm-activeLineGutter { background: rgba(100,100,255,0.2); }
.cm-editor.cm-focused { outline: 2px solid rgba(100,100,255,0.5); }
.cm-selectionBackground { background-color: rgba(100,100,255,0.3) !important; }

/* View Mode (view_file.html): responsive font sizing
   - Mobile: match basic code view font-size (12px)
   - Tablet/Desktop: match basic view (14px) */
#codeMirrorContainer .cm-editor {
  font-size: 14px;
}
/* Telegram Mini App: basic view forces 12px, so advanced must match */
body.telegram-mini-app #codeMirrorContainer .cm-editor {
  font-size: 12px !important;
}
@media (max-width: 768px){
  .cm-editor { max-height: 50vh; font-size: 14px; }
  #codeMirrorContainer .cm-editor { font-size: 12px; }
  /* Mobile: Stack vertically */
  .editor-switcher-row { flex-direction: column; align-items: stretch; gap:.5rem; }
  /* בעמודה הגדילה (``flex-grow``) היא לגובה: בלי ``flex: 0 1 auto`` הקבוצה גדלה לגובה השורה (48px בעורך
     הציבורי), והכפתורים ירדו 10px לאמצע שלה (נמדד). */
  .editor-switcher-actions { width: 100%; flex-direction: column; flex: 0 1 auto; }
  .editor-clipboard-actions { width: 100%; }
  /* כל כפתור ברוחב הטקסט שלו. עד נובמבר 2026 הכפתורים התרחבו למלא את השורה, ו"הדבק", שירד לשורה השנייה לבד,
     תפס את כולה — וסרגל ה-MD ירד לשורה שלישית. */
  .btn-editor-clip { flex: 0 0 auto; justify-content: center; }
}

/* Upload/Edit pages: Larger code editor on mobile */
@media (max-width: 767px) {
  /* Increase editor height for upload/edit forms (+~3cm / ~113px) */
  /* Use max() to ensure max-height >= min-height on short viewports (landscape) */
  form[data-file-form-config] .cm-editor,
  form[data-file-form-config] textarea[name="code"],
  form[data-file-form-config] textarea.code-field {
    min-height: max(320px, 55vh);
    max-height: max(320px, 65vh);
  }
}

:root[data-theme="rose-pine-dawn"] .btn-switch-editor {
  background: var(--bg-secondary);
  border-color: var(--glass-border);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
:root[data-theme="rose-pine-dawn"] .btn-switch-editor:hover {
  background: color-mix(in srgb, var(--bg-secondary) 70%, #ffffff 30%);
}
:root[data-theme="rose-pine-dawn"] .btn-editor-clip {
  background: color-mix(in srgb, var(--bg-secondary) 75%, #ffffff 25%);
  border-color: var(--glass-border);
  color: var(--text-primary);
}
:root[data-theme="rose-pine-dawn"] .btn-editor-clip:hover {
  background: color-mix(in srgb, var(--bg-secondary) 60%, #ffffff 40%);
  border-color: color-mix(in srgb, var(--glass-border) 70%, rgba(0,0,0,0.05));
}
:root[data-theme="rose-pine-dawn"] .editor-info-primary {
  background: color-mix(in srgb, var(--bg-secondary) 65%, rgba(255,255,255,0.4));
  color: var(--text-secondary);
}
:root[data-theme="rose-pine-dawn"] textarea[name="code"],
:root[data-theme="rose-pine-dawn"] .editor-textarea {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}
:root[data-theme="rose-pine-dawn"] .codemirror-container {
  background: var(--code-bg);
  border-color: var(--code-border);
}

textarea[name="code"],
.editor-textarea {
  direction: ltr;
  text-align: left;
  font-family: 'Fira Code','Consolas',monospace;
}

textarea[name="code"]::placeholder,
.editor-textarea::placeholder {
  text-align: left;
}

.cm-editor {
  direction: ltr;
  text-align: left;
}

.cm-editor .cm-scroller,
.cm-editor .cm-content {
  direction: ltr;
  text-align: left;
}

/* עורך מימין לשמאל — EditorManager עם textDirection: 'rtl' (העורך הציבורי, /markdown-editor).
   העורך כולו מימין לשמאל; רק השורות של בלוק קוד מקבלות dir="ltr" מהתוסף rtlExceptCodeBlocks שבחבילה, ו-text-align:
   start מיישר כל שורה לתחילת הכיוון שלה. הכללים שלמעלה, משמאל לימין, נשארים לכל עורך אחר. ובעורך הפשוט, כש-
   CodeMirror לא עלה, הכול מימין לשמאל: ב-textarea אין כיוון לשורה בודדת. */
.codemirror-container--rtl .cm-editor,
.codemirror-container--rtl .cm-editor .cm-scroller,
.codemirror-container--rtl .cm-editor .cm-content {
  direction: rtl;
  text-align: start;
}

/* הריווח של שורה, לפי הכיוון שלה. ב-CodeMirror (``.cm-line`` בערכת הבסיס של @codemirror/view) הוא
   ``0 2px 0 6px`` — צדדים פיזיים: 6px משמאל, שם מתחילה שורה משמאל לימין. בעורך מימין לשמאל ההתחלה היא דווקא
   הצד עם 2px, והטקסט נצמד לגבול. כאן 6px בתחילת השורה ו-2px בסופה, בכל כיוון — גם לשורת קוד (dir="ltr"). */
.codemirror-container--rtl .cm-editor .cm-line {
  padding-inline: 6px 2px;
}

textarea[name="code"].editor-textarea--rtl {
  direction: rtl;
  text-align: start;
}

.cm-editor .cm-gutters {
  direction: ltr;
}

/* Dark Mode CodeMirror */
[data-theme="dark"] .codemirror-container,
[data-theme="dim"] .codemirror-container,
[data-theme="nebula"] .codemirror-container {
  background: var(--code-bg);
  border-color: var(--code-border);
}

[data-theme="dark"] .cm-editor,
[data-theme="dim"] .cm-editor,
[data-theme="nebula"] .cm-editor {
  background: var(--code-bg);
  color: var(--code-text);
}

[data-theme="dark"] .cm-gutters,
[data-theme="dim"] .cm-gutters,
[data-theme="nebula"] .cm-gutters {
  background: var(--bg-tertiary);
  border-right-color: var(--code-border);
  color: var(--text-muted);
}

[data-theme="dark"] .cm-activeLineGutter,
[data-theme="dim"] .cm-activeLineGutter,
[data-theme="nebula"] .cm-activeLineGutter {
  background: var(--glass-hover);
}

[data-theme="dark"] .cm-activeLine,
[data-theme="dim"] .cm-activeLine,
[data-theme="nebula"] .cm-activeLine {
  background: var(--glass);
}

[data-theme="dark"] .cm-selectionBackground,
[data-theme="dim"] .cm-selectionBackground,
[data-theme="nebula"] .cm-selectionBackground {
  background-color: rgba(124, 138, 255, 0.3) !important;
}

/* Custom Theme CodeMirror - uses CSS variables from imported theme */
[data-theme="custom"] .codemirror-container,
[data-theme^="shared:"] .codemirror-container {
  background: var(--code-bg, var(--bg-primary, #1e1e1e));
  border-color: var(--code-border, var(--border-color, rgba(255, 255, 255, 0.1)));
}

[data-theme="custom"] .cm-editor,
[data-theme^="shared:"] .cm-editor {
  background: var(--code-bg, var(--bg-primary, #1e1e1e));
  color: var(--code-text, var(--text-primary, #d4d4d4));
}

[data-theme="custom"] .cm-gutters,
[data-theme^="shared:"] .cm-gutters {
  background: var(--bg-tertiary, var(--bg-secondary, #252526));
  border-right-color: var(--code-border, var(--border-color, rgba(255, 255, 255, 0.1)));
  color: var(--text-muted, #6d6d6d);
}

[data-theme="custom"] .cm-activeLineGutter,
[data-theme^="shared:"] .cm-activeLineGutter {
  background: var(--glass-hover, rgba(255, 255, 255, 0.08));
}

[data-theme="custom"] .cm-activeLine,
[data-theme^="shared:"] .cm-activeLine {
  background: var(--glass, rgba(255, 255, 255, 0.05));
}

[data-theme="custom"] .cm-selectionBackground,
[data-theme^="shared:"] .cm-selectionBackground {
  background-color: var(--primary-light, rgba(86, 156, 214, 0.3)) !important;
}

[data-theme="custom"] .cm-cursor,
[data-theme^="shared:"] .cm-cursor {
  border-left-color: var(--text-primary, #d4d4d4);
}

[data-theme="custom"] .cm-editor.cm-focused,
[data-theme^="shared:"] .cm-editor.cm-focused {
  outline: 2px solid var(--primary, rgba(100, 100, 255, 0.5));
}

/* ============================================
   Search Highlighting - strong yellow for all themes
   ============================================ */

/* Search match highlighting - strong yellow */
.cm-searchMatch {
  background: #ffeb3b !important;
  box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.7), 0 0 6px rgba(255, 235, 59, 0.4);
  border-radius: 2px;
}

/* Currently selected search match - even more prominent */
.cm-searchMatch-selected,
.cm-searchMatch.cm-searchMatch-selected {
  background: #fff176 !important;
  box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.9), 0 0 10px rgba(255, 235, 59, 0.5);
}

/* Selection match highlight (when selecting text that matches search) */
.cm-selectionMatch {
  background: rgba(255, 235, 59, 0.35) !important;
}