/* General */
body {font-family: system-ui, sans-serif;}
.card { padding: 16px; margin: 12px 0; }
.layout { display: flex; flex-direction: column; align-items: stretch;}
.layout > div:first-child {flex: 0 0 auto;}
.layout > div:last-child {flex: 0 0 auto;}
.scroller { height: 20vh; overflow: auto; border: 0px solid #ddd; background: #fff;}
.msg {padding: 12px; white-space: pre-line;}
.divider {  border: none; border-top: 1px solid #ccc;}

/* Tabs */
.tab-bar { display: flex; align-items: center; padding: 0px 0px;}
.tab { padding:6px 12px;border:1px solid #ccc;border-bottom:none;border-radius:6px 6px 0 0;margin-right:4px;cursor:pointer;user-select:none;font-size:13px}
.tab .close-btn { margin-left:6px;color:#666;font-weight:700;cursor:pointer;transition:color .2s ease;padding:0 4px}
.tab .close-btn:hover { color:#c00;}  
.tab.active { background:#ecf3fe;border-bottom:1px solid white;font-weight:bold;}  
.tab:hover { background:#cbe0ff;}  
.tab.dragging{opacity:.5;background-color:#ddd}
.tab-bar{display:flex; gap:4px}

/* Editor */
.CodeMirror .cm-keyword1 { color: #00428d; font-weight: bold; }
.CodeMirror .cm-keyword2 { color: rgb(0, 130, 7); font-weight: bold}
.CodeMirror .cm-keyword3 { color: rgb(0, 126, 199); font-weight: bold}
.CodeMirror .cm-keyword4 { color: rgb(0, 221, 255); }
.CodeMirror .cm-comment  { color: #999; font-style: italic; }
.CodeMirror .cm-string   { color: rgb(204, 0, 187); }
.CodeMirror .cm-literal  { color: rgb(127, 0, 121); }
.CodeMirror .cm-number   { color: #ff6600; font-weight: bold; }
.CodeMirror .cm-bracket  { color: #888; }
.CodeMirror .cm-operator { color: #aa5500; font-weight: bold; }
.CodeMirror .cm-markup   { color: #0088cc; }
.CodeMirror .cm-null     { color: #666; }
.CodeMirror { border: 1px solid #ddd; height: 52vh; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.4;}
.CodeMirror-gutters { background: #f0f0f0; border-right: 1px solid #ddd;}
.CodeMirror-linenumber { color: #666; padding: 0 8px; min-width: 1.5em;}
.CodeMirror .error-line { background-color: #ffebee !important;}
.CodeMirror .error-text {background: none !important;position: relative;}
.CodeMirror .error-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background-image:repeating-linear-gradient(-45deg,red 0,red 1px,transparent 1px,transparent 2px);background-size:6px 4px;pointer-events:none}
.CodeMirror .warning-text{background:none!important;position:relative}
.CodeMirror .warning-text::after{content:"";position:absolute;left:0;right:0;bottom:0px;height:4px;background-image:repeating-linear-gradient(-45deg,orange 0,orange 1px,transparent 1px,transparent 2px);background-size:6px 4px;pointer-events:none}

/* Menu options */
.dropdown {position: relative;display: inline-block;}
.dropdown-content{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #ccc;border-radius:6px;min-width:160px;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.submenu{position:relative}
.submenu-content{display:none;position:absolute;top:0;left:100%;background:#fff;border:1px solid #ccc;border-radius:6px;min-width:160px;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.submenu:hover .submenu-content{display:block}
.dropdown-content a,.submenu-content a{display:block;padding:8px 12px;color:#000;text-decoration:none}
.dropdown-content a:hover,
.submenu-content a:hover {background-color: #eee;}
.dropdown-file-label{display:inline-block;padding:6px 12px;margin-right:8px;font-size:14px;font-weight:500;color:#222;background:#f4f4f4;border:1px solid #ccc;border-radius:4px;cursor:pointer;user-select:none;transition:all .2s ease}
.dropdown-file-label:hover{background:#e0e7ff;border-color:#99a8ff;color:#111}
.file-menu-bar{display:flex;gap:6px;align-items:center;background:#fafafa;padding:4px 8px;border:1px solid #ccc;border-radius:6px}

/* Error messages */
.errors-box { color: #b00020; border:1px solid #ccc;}
.success { color: #077d3f; border:1px solid #ccc;}
.editor-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* instead of space-between */
  gap: 8px;                     /* optional: space between controls */
}
.file-name-display { font-family: monospace; font-size: 12px; color: #666; margin-top: 2px;}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

/* Modal Window */
.modal-window {
  background: white;
  padding: 20px;
  width: 320px;
  border-radius: 8px;
  box-shadow: 0px 4px 16px rgba(0,0,0,0.25);
}

/* File List */
.file-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.file-list li {
  padding: 8px 10px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: 0.15s;
}

.file-list li:hover {
  background: #e5ebff;
  border-color: #8aa3ff;
}

.modal-close {
  padding: 8px 14px;
  background: #ddd;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-window {
  background: #fff;
  padding: 20px;
  width: 360px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.modal-window h3 {
  margin-top: 0;
}

.modal-btn {
  margin-top: 16px;
  width: 100%;
  padding: 8px;
}
.save-path-display {
  font-family: monospace;
  padding: 6px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-top: 4px;
}

.unsaved-dot {
  color: red;
  font-weight: bold;
}

.translate-option.disabled {
  color: #9CA3AF;        /* greyed out */
  cursor: default;
  pointer-events: none;  /* not clickable */
  opacity: 0.6;
}

.error-entry {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.error-entry:hover {
  background-color: rgba(220, 53, 69, 0.12);
}

.error-flash {
  background-color: rgba(255, 0, 0, 0.15) !important;
  transition: background-color 0.8s ease;
}
/* Highlight just the two paren characters that bound the current context */
.cm-paren-context-edge {
  display: inline-block;          /* lets padding/border render nicely */
  box-sizing: border-box;
  padding: 0 2px;                 /* small horizontal breathing room */
  margin: 0 -1px;                 /* cancels padding so text layout barely shifts */
  border: 2px solid currentColor; /* uses token color (nice with syntax colors) */
  border-radius: 0;               /* square corners */
  background: rgba(255, 255, 0, 0.18); /* subtle fill so it's visible */
  line-height: 1.2;
}

/* Optional: highlight the whole range inside the parens */
.cm-paren-context-range {
  border-radius: 4px;
  background: rgba(120, 120, 120, 0.10);
}

/* Dark mode tweak (optional) */
@media (prefers-color-scheme: dark) {
  .cm-paren-context-edge {
    box-shadow: inset 0 -2px 0 rgba(200, 200, 200, 0.35);
  }
  .cm-paren-context-range {
    background: rgba(200, 200, 200, 0.08);
  }
}