/* 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): allow page-level scrolling (auto height) */
#codeCard:not(:fullscreen) .codemirror-container.cm-autoheight {
  overflow: visible;
}
#codeCard:not(:fullscreen) .codemirror-container.cm-autoheight .cm-editor {
  height: auto;
  min-height: 0;
  max-height: none;
}
#codeCard:not(:fullscreen) .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); }
.editor-clipboard-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.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; }
.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; }
.editor-info { display:flex; flex-direction:column; gap:.15rem; font-size:.85rem; opacity:.85; min-width:0; width:100%; align-items:flex-start; text-align:start; }
.editor-info-status { font-size:.8rem; color: var(--text-secondary, var(--primary, #8ec5ff)); min-height:1.1em; }
.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; }
  .editor-switcher-actions { width: 100%; flex-direction: column; }
  .editor-clipboard-actions { width: 100%; }
  .btn-editor-clip { flex: 1 1 auto; justify-content: center; }
  .editor-info-primary { margin-left: 0; width: 100%; justify-content: center; text-align: 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);
  }
}

/* Hide keyboard shortcuts hint on small mobile devices only */
@media (max-width: 767px) {
  .editor-info-primary.is-keyboard-hint { display: none; }
}

: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;
}

.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;
}