/* Kintamųjų (pirmas) blokas: visada pilnas, be scroll */
.cm-vars .CodeMirror { height: auto !important; }
.cm-vars .CodeMirror-scroll { overflow: visible !important; }

/* Procedūros (antras) blokas: fiksuotas aukštis + vidinis scroll */
.cm-proc .CodeMirror { height: 420px !important; }
.cm-proc .CodeMirror-scroll { overflow: auto !important; }


    body {
      background-color: #1e1e1e;
      color: #f0f0f0;
      font-family: sans-serif;
      padding: 20px;
    }
    h1 {
      color: #00bcd4;
      margin-bottom: 10px;
    }
    .sheet-block {
      display: inline-block;
      width: 48%;
      margin: 1%;
      vertical-align: top;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    .query {
      background-color: #1e1e1e;
      color: #f8f8f2;
      padding: 4px 8px;
      border: 1px solid #444;
      font-family: monospace;
      font-size: 12px;
      margin: 0 10px;
      cursor: pointer;
    }
    .query span.keyword { color: #66d9ef; }
    .query span.table { color: #f8f8f2; }
    .query span.where { color: #f92672; }
    .query span.value { color: #a6e22e; }
    .query.copied {
      background-color: #2e7d32 !important;
      transition: background-color 0.3s ease;
    }
    .CodeMirror {
      height: auto;
      border: 1px solid #444;
    }
    button.copy {
      font-size: 12px;
      padding: 4px 10px;
      background-color: #444;
      color: #fff;
      border: 1px solid #666;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }
    button.copy:hover {
      background-color: #555;
    }
    @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-2px); }
      50% { transform: translateX(2px); }
      75% { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }
    button.copy.copied {
      background-color: #2e7d32 !important;
      animation: shake 0.3s ease;
    }
    #default-banner {
      border: 1px dashed #444;
      padding: 20px;
      margin-top: 30px;
      text-align: center;
      background-color: #2c2c2c;
      border-radius: 6px;
    }
    #default-banner .query {
      display: inline-block;
      margin-top: 15px;
    }
  
      /* === Kortelės ir grid === */
  .page { max-width: 1200px; margin-top: 30px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 16px; }

  .card {
    background-color: #222;
    border: 1px solid #444;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
  }

  .card__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-bottom: 1px solid #333; background-color: #2c2c2c;
  }
  .card__title { font-weight: 600; font-size: 13px; color: #00bcd4; display:flex; align-items:center; gap:10px; }
  .pill {
    font-family: monospace; font-size: 12px;
    background:#1e2433; color:#d8e0ff; border:1px solid #38445d; border-radius:6px;
    padding: 4px 8px; white-space: nowrap; overflow: auto; max-width: 420px;
  }

  .card__actions { display:flex; gap:8px; }
  .btn {
    background-color: #444; border: 1px solid #666; border-radius: 6px;
    color: #fff; font-size: 11px; padding: 3px 8px; cursor: pointer;
  }
  .btn:hover { background-color: #555; }

  /* ——— VISADA RODOMAS „kintamųjų“ blokas ——— */
  .card__body { max-height: 420px; overflow: auto; }
  .card__body pre { margin: 0; padding: 10px; font-family: monospace; font-size: 12px; white-space: pre; color: #f8f8f2; }
  .card__body::-webkit-scrollbar { width: 8px; } .card__body::-webkit-scrollbar-thumb { background:#555; border-radius:8px; }

  /* ——— SUSKLEIDŽIAMA „procedūra“ ——— */
  details.proc { border-top: 1px solid #333; background:#1f1f1f; }
  details.proc > summary {
    list-style: none; cursor: pointer; user-select: none;
    display:flex; align-items:center; gap:8px; padding: 8px 10px; font-weight:600; color:#cfd8dc;
  }
  details.proc > summary::-webkit-details-marker { display:none; }
  .caret { transition: transform .2s ease; }
  details.proc[open] .caret { transform: rotate(90deg); }
  .proc__body { border-top: 1px solid #333; }

/* Bendra */
.card__body pre {
  margin: 0; padding: 10px;
  font-family: monospace; font-size: 12px; white-space: pre; color: #f8f8f2;
}

/* 1) PIRMAS blokas: pilnas, be scroll */
.body--auto {
  max-height: none;     /* jokių ribų */
  overflow: visible;    /* jokių scroll */
}

/* 2) ANTRAS blokas: ribotas, su scroll */
.body--scroll {
  max-height: 420px;
  overflow: auto;
}
.body--scroll::-webkit-scrollbar { width: 8px; }
.body--scroll::-webkit-scrollbar-thumb { background:#555; border-radius:8px; }

/* --- Nuolaidų kūrimo mygtukas --- */
.discount-btn-container {
  display: flex;
  justify-content: center;
  margin: 25px 0;
}

.discount-btn {
  background: linear-gradient(145deg, #1b5e20, #2e7d32);
  color: #e8f5e9;
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.discount-btn:hover {
  background: linear-gradient(145deg, #2e7d32, #388e3c);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.4);
}

.discount-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Brand spalva kaip antraštės (h1) */
:root{
  --brand: #00bcd4;         /* tokia pati kaip h1 */
  --brand-dark: #0097a7;
  --ok-glow: rgba(0,188,212,.45);
  --err: #ff5252;
  --err-dark: #d32f2f;
}

/* Viršuje per vidurį */
.discount-btn-container{
  display:flex;
  justify-content:center;
  margin: 18px 0 8px;
}

/* Mygtukas – matinis/cian, kaip h1 */
.discount-btn{
  background: var(--brand);
  color: #0f1418;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.discount-btn:hover{ background: var(--brand-dark); transform: translateY(-1px); }
.discount-btn:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* Be-popup atsiliepimai: žalias/raudonas „blink“ */
.discount-btn.flash-success{
  box-shadow: 0 0 0 3px var(--ok-glow), 0 4px 10px rgba(0,0,0,.35);
}
.discount-btn.flash-error{
  background: var(--err);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255,82,82,.32), 0 4px 10px rgba(0,0,0,.35);
  animation: btn-shake .25s ease;
}

/* trumpas „shake“ efektas klaidai */
@keyframes btn-shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  100%{ transform: translateX(0); }
}