/* MADisoCAD Translate — sötét, kompakt lektor-felület */
* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #17151f; --surface: #201d2b; --surface2: #2a2638;
  --border: #3a3550; --text: #e8e6f0; --muted: #9a94b0;
  --accent: #7c6cf0; --green: #3ec97e; --amber: #f0b03c; --red: #ef6a6a;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, sans-serif; overflow: hidden; }
.hidden { display: none !important; }
#app { display: flex; flex-direction: column; height: 100vh; }

/* belépés */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { font-size: 18px; text-align: center; }
.error { color: var(--red); font-size: 13px; }

/* fejléc */
header { position: sticky; top: 0; z-index: 10; background: var(--surface);
  border-bottom: 1px solid var(--border); padding: 10px 16px; }
header h1 { font-size: 16px; margin-bottom: 8px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.progress { color: var(--muted); font-size: 13px; }
.chk { color: var(--muted); font-size: 13px; display: flex; gap: 4px; align-items: center; }

input, select, textarea, button {
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font: inherit;
}
input[type="search"] { min-width: 240px; }
input[type="checkbox"] { accent-color: var(--accent); }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.1); }

/* rács */
/* Sok nyelv-oszlopnal vizszintes gorgetes; a Kulcs + HU oszlop balra ragad.
   A main a gorgeto kontener (nem a body) -> a scrollbar mindig lathato alul. */
main { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 16px; }
main::-webkit-scrollbar { height: 14px; width: 12px; }
main::-webkit-scrollbar-track { background: var(--surface2); }
main::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 7px;
  border: 2px solid var(--surface2); }
main::-webkit-scrollbar-thumb:hover { background: #9c8ffa; }
/* Firefox: csak ott, ahol nincs webkit-scrollbar — Chrome-ban a scrollbar-color
   KIKAPCSOLNA a fenti ::-webkit-scrollbar stilusokat (vekony csik lenne). */
@supports not selector(::-webkit-scrollbar) {
  main { scrollbar-color: var(--accent) var(--surface2); scrollbar-width: auto; }
}
table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
th { text-align: left; padding: 8px; color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
td { padding: 6px 8px; border-bottom: 1px solid var(--surface2); vertical-align: top; }
table { --w-key: 220px; --w-src: 280px; --w-cell: 280px; }
.col-key { width: var(--w-key); min-width: var(--w-key); max-width: var(--w-key);
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted);
  word-break: break-all; position: sticky; left: 0; background: var(--bg); z-index: 1; }
/* box-sizing: border-box -> a sticky offset PONTOSAN a kulcs-oszlop szelessege */
.src { width: var(--w-src); min-width: var(--w-src); max-width: var(--w-src); color: var(--text);
  position: sticky; left: var(--w-key); background: var(--bg); z-index: 1;
  border-right: 1px solid var(--surface2); }
th.col-key, th.src { z-index: 3; } /* sarok: felul ES balra is ragad */
.col-flags { width: 40px; min-width: 40px; text-align: center; }
.editable { width: var(--w-cell); min-width: var(--w-cell); max-width: var(--w-cell);
  cursor: text; border-left: 2px solid transparent; }

/* Oszlop-szelesseg allito fogantyu a fejlecekben */
.col-resize { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 4; }
.col-resize:hover, .col-resize.active { background: var(--accent); opacity: .6; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none; }
.editable:hover, .editable:focus { border-left-color: var(--accent); background: var(--surface); outline: none; }
.editable textarea { width: 100%; min-height: 56px; resize: vertical; }

.badge { font-size: 11px; margin-left: 4px; }
.badge.edited { color: var(--accent); }
.badge.stale { color: var(--amber); }
.badge.missing { color: var(--red); }
.remark-btn { padding: 2px 6px; background: none; border: none; }
.remark-btn sup { color: var(--accent); }

/* dialógusok */
.overlay { position: fixed; inset: 0; background: rgba(10,8,18,.7); display: flex;
  align-items: center; justify-content: center; z-index: 100; }
.dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; width: min(680px, 92vw); max-height: 84vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.conflict { border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ckey { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.pick { text-align: left; }
.rlang { background: var(--surface2); border-radius: 4px; padding: 1px 6px; font-size: 11px;
  color: var(--accent); margin-left: 6px; }
#remark-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
#remark-list li { background: var(--surface2); border-radius: 6px; padding: 6px 10px; }
.rdel { float: right; background: none; border: none; color: var(--muted); }
.muted { color: var(--muted); }
textarea#remark-text { min-height: 64px; }

/* toast */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--green); color: var(--text);
  border-radius: 8px; padding: 10px 18px; z-index: 200; max-width: 80vw; }
.toast.error { border-color: var(--red); }

/* Nyelv-oszlop kapcsolók (több oszlop egyszerre ki/be) */
.lang-toggles { display: flex; gap: 3px; flex-wrap: wrap; }
.lang-chip {
  padding: 3px 8px; border-radius: 12px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border, #3a3a52); background: none;
  color: var(--muted, #8a8aa0); cursor: pointer;
}
.lang-chip:hover { border-color: var(--accent, #5ba0e8); }
.lang-chip.on {
  background: var(--accent, #5ba0e8); border-color: var(--accent, #5ba0e8); color: #fff;
}

/* Szerkesztés-visszavonó gomb (csak szerkesztett cellákban) */
.revert {
  margin-left: 4px; padding: 0 4px; border: none; border-radius: 4px;
  background: none; color: var(--muted); font-size: 12px; cursor: pointer;
}
.revert:hover { color: var(--red); background: var(--surface2); }