/* ════════════════════════════════════════════════════════════
   Eestikood  –  Stiilitabel
   Eesti lipp: sinine #0072CE · must #000 · valge #fff
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ── Muutujad ──────────────────────────────────────────────── */
:root {
  --c-bg      : #0d1117;
  --c-panel   : #161b22;
  --c-header  : #1c2128;
  --c-hover   : #262c36;
  --c-border  : #30363d;
  --c-text    : #cdd9e5;
  --c-dim     : #768390;
  --c-muted   : #444c56;

  --c-blue    : #0072CE;   /* Eesti lipp – sinine */
  --c-blue-l  : #2d9bf0;
  --c-blue-gl : rgba(0, 114, 206, 0.18);
  --c-black   : #000000;   /* Eesti lipp – must   */
  --c-white   : #f0f6fc;   /* Eesti lipp – valge  */

  --c-ok      : #3fb950;
  --c-err     : #f85149;
  --c-warn    : #d29922;
  --c-purple  : #bc8cff;

  --font-ui   : 'Inter', system-ui, sans-serif;
  --font-code : 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  --r         : 8px;
  --r-sm      : 5px;
  --header-h  : 54px;
  --footer-h  : 32px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background : var(--c-bg);
  color      : var(--c-text);
  font-family: var(--font-ui);
  font-size  : 14px;
  overflow   : hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ────────────────────────────────────────────────── */
body {
  display        : flex;
  flex-direction : column;
}

main {
  display   : flex;
  flex      : 1;
  overflow  : hidden;
  min-height: 0;
}

/* ════════════════════════════════════════════════════════════
   PÄIS
   ════════════════════════════════════════════════════════════ */
header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 0 20px;
  height         : var(--header-h);
  background     : var(--c-header);
  border-bottom  : 2px solid var(--c-blue);
  flex-shrink    : 0;
  gap            : 12px;
}

/* Logo */
.logo {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex-shrink: 0;
}

.logo-badge {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 38px;
  height         : 38px;
  background     : var(--c-blue);
  color          : #fff;
  font-family    : var(--font-code);
  font-weight    : 700;
  font-size      : 15px;
  border-radius  : var(--r-sm);
  letter-spacing : -1px;
  flex-shrink    : 0;
  box-shadow     : 0 2px 12px var(--c-blue-gl);
}

.logo-text {
  display       : flex;
  flex-direction: column;
  line-height   : 1.3;
}

.logo-name {
  font-size  : 17px;
  font-weight: 700;
  color      : var(--c-white);
  letter-spacing: 0.2px;
}

.logo-sub {
  font-size: 11px;
  color    : var(--c-dim);
}

/* Nav */
nav {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

/* ── Nupud ─────────────────────────────────────────────────── */
button {
  cursor     : pointer;
  border     : none;
  outline    : none;
  font-family: var(--font-ui);
  font-size  : 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition : background 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-primary {
  display    : flex;
  align-items: center;
  gap        : 6px;
  padding    : 8px 18px;
  background : var(--c-blue);
  color      : #fff;
}
.btn-primary:hover {
  background : var(--c-blue-l);
  box-shadow : 0 0 16px var(--c-blue-gl);
}
.btn-primary:active { transform: scale(0.97); }
.btn-icon { font-size: 11px; }

.btn-secondary {
  padding   : 7px 14px;
  background: var(--c-hover);
  color     : var(--c-dim);
  border    : 1px solid var(--c-border);
}
.btn-secondary:hover { color: var(--c-text); border-color: var(--c-dim); }

.btn-ghost {
  padding   : 7px 12px;
  background: transparent;
  color     : var(--c-dim);
  border    : 1px solid var(--c-border);
  font-family: var(--font-code);
  font-size : 12px;
}
.btn-ghost:hover { color: var(--c-text); border-color: var(--c-blue); }
.btn-ghost.active {
  color      : var(--c-blue-l);
  border-color: var(--c-blue);
  background : var(--c-blue-gl);
}

.btn-xs {
  padding    : 3px 8px;
  background : transparent;
  color      : var(--c-muted);
  font-size  : 11px;
  border-radius: 3px;
}
.btn-xs:hover { color: var(--c-dim); background: var(--c-hover); }

/* Select */
select {
  background   : var(--c-panel);
  color        : var(--c-text);
  border       : 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding      : 7px 10px;
  font-size    : 13px;
  font-family  : var(--font-ui);
  cursor       : pointer;
  outline      : none;
  transition   : border-color 0.15s;
  max-width    : 210px;
}
select:hover, select:focus { border-color: var(--c-blue); }
select option { background: var(--c-panel); }

/* ════════════════════════════════════════════════════════════
   PANEEL (editor + output + js)
   ════════════════════════════════════════════════════════════ */
.panel {
  display       : flex;
  flex-direction: column;
  min-width     : 0;
  overflow      : hidden;
}

.editor-panel {
  flex        : 1;
  border-right: 1px solid var(--c-border);
  min-width   : 280px;
}

.output-panel {
  flex     : 1;
  min-width: 220px;
}

.js-panel {
  flex        : 0 0 340px;
  border-left : 1px solid var(--c-border);
  overflow    : hidden;
  flex-direction: column;
}

.panel-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 7px 14px;
  background     : var(--c-panel);
  border-bottom  : 1px solid var(--c-border);
  flex-shrink    : 0;
}

.panel-title {
  font-size  : 12px;
  font-weight: 500;
  color      : var(--c-dim);
}

.panel-hint {
  font-size: 11px;
  color    : var(--c-muted);
  font-family: var(--font-code);
}

/* ════════════════════════════════════════════════════════════
   REDAKTOR
   ════════════════════════════════════════════════════════════ */
.editor-wrap {
  display : flex;
  flex    : 1;
  overflow: hidden;
}

.line-numbers {
  display        : flex;
  flex-direction : column;
  padding        : 18px 0 18px 8px;
  min-width      : 44px;
  background     : var(--c-panel);
  border-right   : 1px solid var(--c-border);
  font-family    : var(--font-code);
  font-size      : 13px;
  line-height    : 1.7;
  color          : var(--c-muted);
  text-align     : right;
  overflow       : hidden;
  user-select    : none;
  flex-shrink    : 0;
}
.line-numbers span {
  display   : block;
  padding-right: 8px;
}

#editor {
  flex       : 1;
  padding    : 18px 20px;
  background : var(--c-bg);
  color      : var(--c-text);
  border     : none;
  outline    : none;
  resize     : none;
  font-family: var(--font-code);
  font-size  : 13px;
  line-height: 1.7;
  tab-size   : 4;
  white-space: pre;
  overflow   : auto;
  caret-color: var(--c-blue-l);
}
#editor::selection { background: rgba(45, 155, 240, 0.28); }
#editor::placeholder { color: var(--c-muted); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   VÄLJUND
   ════════════════════════════════════════════════════════════ */
.output {
  flex      : 1;
  padding   : 14px 18px;
  overflow-y: auto;
  font-family: var(--font-code);
  font-size : 13px;
  line-height: 1.65;
}

.vr {
  padding-left : 10px;
  border-left  : 2px solid transparent;
  margin-bottom: 1px;
}
.vr pre {
  font-family : inherit;
  font-size   : inherit;
  white-space : pre-wrap;
  word-break  : break-word;
  color       : var(--c-text);
}
.vr.ok   { border-left-color: transparent; }
.vr.err  {
  border-left-color: var(--c-err);
}
.vr.err pre { color: var(--c-err); }
.vr.dim pre { color: var(--c-muted); font-style: italic; font-size: 12px; }
.vr.err-dim { }
.vr.err-dim pre { color: #8b3030; font-size: 12px; font-style: italic; }

/* ════════════════════════════════════════════════════════════
   JS PANEEL
   ════════════════════════════════════════════════════════════ */
.js-output {
  flex      : 1;
  overflow-y: auto;
  padding   : 14px 16px;
  font-family: var(--font-code);
  font-size : 12px;
  line-height: 1.6;
  color     : var(--c-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════
   JALUS
   ════════════════════════════════════════════════════════════ */
footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 0 18px;
  height         : var(--footer-h);
  background     : var(--c-header);
  border-top     : 1px solid var(--c-border);
  flex-shrink    : 0;
  font-size      : 11px;
  color          : var(--c-muted);
  gap            : 12px;
}

.footer-left, .footer-right {
  display : flex;
  gap     : 10px;
  align-items: center;
}

.sep { color: var(--c-border); }

.shortcut { display: flex; align-items: center; gap: 4px; }

.footer-gh {
  display    : flex;
  align-items: center;
  gap        : 5px;
  color      : var(--c-muted);
  text-decoration: none;
  font-size  : 11px;
  transition : color 0.15s;
}
.footer-gh:hover { color: var(--c-white); }
.gh-icon {
  width : 14px;
  height: 14px;
  flex-shrink: 0;
}

kbd {
  display       : inline-block;
  padding       : 1px 5px;
  background    : var(--c-hover);
  border        : 1px solid var(--c-border);
  border-radius : 3px;
  font-size     : 10px;
  font-family   : var(--font-code);
  color         : var(--c-dim);
}

/* ════════════════════════════════════════════════════════════
   DOKUMENTATSIOON-NUPP & MODAL
   ════════════════════════════════════════════════════════════ */
.docs-toggle {
  position     : fixed;
  bottom       : calc(var(--footer-h) + 16px);
  right        : 18px;
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  background   : var(--c-blue);
  color        : #fff;
  font-size    : 16px;
  font-weight  : 700;
  border       : none;
  cursor       : pointer;
  box-shadow   : 0 2px 12px rgba(0,0,0,0.4);
  z-index      : 99;
  transition   : background 0.15s;
}
.docs-toggle:hover { background: var(--c-blue-l); }

.modal {
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,0.65);
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 200;
  padding        : 20px;
}

.modal-box {
  background   : var(--c-panel);
  border       : 1px solid var(--c-border);
  border-radius: var(--r);
  width        : 100%;
  max-width    : 700px;
  max-height   : 80vh;
  display      : flex;
  flex-direction: column;
  overflow     : hidden;
  box-shadow   : 0 20px 60px rgba(0,0,0,0.5);
}

.modal-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 20px;
  border-bottom  : 1px solid var(--c-border);
}
.modal-header h2 {
  font-size  : 16px;
  font-weight: 600;
  color      : var(--c-white);
}

.modal-body {
  overflow-y: auto;
  padding   : 20px;
}
.modal-body h3 {
  font-size  : 12px;
  font-weight: 600;
  color      : var(--c-blue-l);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin     : 20px 0 8px;
}
.modal-body h3:first-child { margin-top: 0; }

/* Tabel */
table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 12.5px;
}
th {
  text-align: left;
  padding   : 6px 10px;
  background: var(--c-hover);
  color     : var(--c-dim);
  font-weight: 500;
  font-size : 11px;
}
td {
  padding   : 5px 10px;
  border-bottom: 1px solid var(--c-border);
  color     : var(--c-text);
}
td:first-child { width: 50%; }
td code, th code {
  font-family: var(--font-code);
  font-size  : 12px;
  color      : var(--c-blue-l);
}

/* ════════════════════════════════════════════════════════════
   KERIMISRIBA
   ════════════════════════════════════════════════════════════ */
::-webkit-scrollbar        { width: 7px; height: 7px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background   : var(--c-hover);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ════════════════════════════════════════════════════════════
   MOBIIL
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Üldine layout */
  main             { flex-direction: column; }
  .editor-panel    { border-right: none; border-bottom: 1px solid var(--c-border); }
  .js-panel        { flex: none; border-left: none; border-top: 1px solid var(--c-border); }

  /* Header – stack vertically */
  header {
    flex-direction: column;
    gap          : 12px;
    padding      : 14px 16px;
    height       : auto;
    border-bottom: 2px solid var(--c-blue);
  }

  .logo {
    width    : 100%;
    justify-content: space-between;
  }

  .logo-badge {
    width : 32px;
    height: 32px;
    font-size: 13px;
  }

  .logo-text {
    flex: 1;
    margin-left: 10px;
  }

  .logo-name {
    font-size: 15px;
  }

  .logo-sub { display: none; }

  /* Nav – full width stack */
  nav {
    width      : 100%;
    flex-direction: column;
    gap        : 10px;
  }

  select {
    width    : 100%;
    max-width: none;
    padding  : 12px 14px;
    font-size: 14px;
  }

  .btn-ghost, .btn-secondary {
    flex  : 1;
    padding: 12px 14px;
    font-size: 14px;
  }

  .btn-primary {
    width     : 100%;
    padding   : 14px 18px;
    font-size : 15px;
    justify-content: center;
    gap       : 8px;
    flex      : none;
  }

  .btn-icon {
    font-size: 12px;
  }

  /* Footer – optimize for mobile */
  footer {
    flex-direction: column;
    gap        : 12px;
    padding    : 12px 16px;
    font-size  : 10px;
  }

  .footer-left, .footer-right {
    width     : 100%;
    justify-content: center;
    flex-wrap : wrap;
    gap       : 8px;
  }

  .footer-gh {
    font-size: 10px;
  }

  .shortcut {
    font-size: 10px;
    gap      : 3px;
  }

  kbd {
    padding: 1px 4px;
    font-size: 9px;
  }

  .sep {
    display: none;
  }
}