/* style.css */
/* General page layout */
:root{
  --ad-height: 72px;
  --col-left: 50%;
  --row-top: 50%;
  --green-pastel: #E8F7E9;
  --green-medium: #C6EFC9;
  --green-strong: #2FA84F;
  --orange-pastel: #FFF3E6;
  --orange-medium: #FFDDBB;
  --orange-strong: #FF8800;
  --panel-padding: 12px;
  --panel-radius: 8px;
  --font-base: 14px;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: var(--font-base); overflow: hidden; background:#fafafa; color:#222; }

/* ad bar */
#ad-bar {
  height: var(--ad-height);
  background: linear-gradient(180deg,#f7f7f7,#efefef);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  left:0; right:0; top:0;
  z-index:20;
}
#ad-bar .ad-content { text-align:center; font-size:1.5rem; color:#333; }
#ad-bar .ad-sub { display:block; font-size:1.2rem; color:#666; margin-top:4px; }

/* main area fits remaining viewport */
#main-area {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(var(--ad-height) + 10px);
  bottom: 10px;
  padding: 0;
}

/* grid 2x2 cells */
.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: var(--col-left) calc(100% - var(--col-left));
  grid-template-rows: var(--row-top) calc(100% - var(--row-top));
  gap: 12px;
  position: relative;
  align-items: stretch;
}

/* cell backgrounds are bound to position (color remains with the cell) */
.cell {
  padding: 6px;
  overflow: hidden;
  border-radius: 6px;
  min-width: 140px;
  min-height: 120px;
  transform: translate(-6px, -6px);
}

/* Colors per position (persistent even when content moves) */
.cell.tl { background: var(--green-medium); }
.cell.br { background: var(--green-medium); }
.cell.tr { background: var(--orange-medium); }
.cell.bl { background: var(--orange-medium); }

/* Inner draggable slot */
.slot {
  display: flex;
  height: 100%;
  width: 100%;
  cursor: grab;
}
.slot:active { cursor: grabbing; }

/* Panel style (content box inside slot) */
.panel {
  background: #fdfdfd;
  border-radius: var(--panel-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding: 8px;
  overflow: hidden;
}

.panel-title{
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 4px;
  margin-bottom: 8px;
  color:#24323a;
}

/* Panel body scroll only when absolutely necessary */
.panel-body {
  flex: 1 1 auto;
  overflow: hidden; /* important: internal scrolling handled by subareas */
  padding: var(--panel-padding);
  display:flex;
  flex-direction:column;
}

/* Tabs */

.tabs {
  display: flex;
  background: #f9f9f9;
}

.tab-button {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid transparent; /* alapból nincs keret */
  border-bottom: none;            /* alul sosem legyen */
  background: transparent;
  font-size: 1.4rem;
  font-weight: normal;
  cursor: pointer;
}

.tab-button.active {
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
  background: #fdfdfd;
  border: 1px solid #ddd;
  border-bottom: none;
  z-index: 2;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0; /* csak a felső sarkokra */
}

.hidden { display:none; }

/* Chapters scroll wrapper: if too many, internal scrollbar appears */
#chapters-scroll-wrap {
  display:block;
  height: calc(100% - 8px); /* allow for some padding and tabs */
  overflow: auto;
  padding-right: 6px;
}
#chapters-container {
  min-height: 60px;
}

/* Chapters table */
#chapters-table {
  font-size: 1.3rem;
  width:100%;
  border-collapse: collapse;
}
#chapters-table th, #chapters-table td {
  padding:6px 8px;
  text-align:left;
}
#chapters-table tr { border-bottom: 1px solid rgba(0,0,0,0.04); }
.chapter-radio { transform: scale(1.05); margin-right:8px; }

/* Task display */
.task-question { white-space: pre-wrap; font-size: 1.3rem; flex:0 0 auto; }

/* Task navigation area */
.task-nav {
  flex: 0 0 auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-top:8px;
  margin-top:auto;
}

/* nav buttons: same size, nicer 3D look */
.nav-btn {
  min-width:110px;
  max-height:25px;
  padding:5px 7px;
  border-radius:8px;
  border: none;
  background: linear-gradient(180deg,#f5f5f5,#e9eef6);
  box-shadow: 0 4px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  font-weight:700;
  cursor:pointer;
  transition: transform 0.06s ease;
}
.nav-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.06); }
.nav-btn.primary {
  background: linear-gradient(180deg,#2fa84f,#1f7f3a);
  color: white;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
}

.nav-btn:disabled {
  background: #bbb !important;
  color: #eee !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Editor */
.editor-body {
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
}
textarea#solution-text {
  width:100%;
  /* make textarea occupy the flexible available area with its own scroll */
  flex: 1 1 auto;
  min-height: 80px;
  max-height: 100%;
  overflow: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.3rem;
  padding:10px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.08);
  resize: none;
  box-shadow:none;
}

/* Editor actions pinned at bottom of panel (always visible) */
.editor-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.editor-actions .left {
  flex: 0 0 auto;
}

.editor-actions .center {
  flex: 1 1 auto;
  text-align: center;
  font-size: 12px;
  color: #555;
}

.editor-actions .right {
  flex: 0 0 auto;
}

.action-btn {
  min-width:110px;
  max-height:25px;
  padding:5px 7px;
  border-radius:8px;
  border: none;
  background: linear-gradient(180deg,#ffffff,#e6eef9);
  box-shadow: 0 4px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor:pointer;
  font-weight:700;
}
.action-btn.primary {
  background: linear-gradient(180deg,#2fa84f,#1f7f3a);
  color:white;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
}
.action-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.05); }

/* Hints */
.hint { margin-top:6px; font-size:1.3rem; color:#555; }

/* Result display (psql style) */
.result-pre {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.3rem;
  white-space: pre;
  margin:0;
  overflow:auto;
  max-height:100%;
  line-height:1.3;
}

/* Result panel coloring for pass/fail */
.panel.pass { border: 2px solid #2fa84f; box-shadow: 0 0 6px rgba(47,168,79,0.08); }
.panel.fail { border: 2px solid #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,0.08); }

/* Splitters (overlay) */
.splitter {
  position:absolute;
  z-index: 50;
  background: rgba(255,255,255,0.08);
}
.splitter.vertical {
  width: 8px;
  top: 0;
  bottom: 0;
  margin-left: -10px;
  cursor: col-resize;
  border-radius: 4px;
}
.splitter.horizontal {
  height: 8px;
  left: 0;
  right: 0;
  margin-top: -10px;
  cursor: row-resize;
  border-radius: 4px;
}

/* Responsive safeguards */
@media (max-width:2400px) {
  :root{ --font-base: 14px; }
}

@media (max-width:1600px) {
  :root{ --font-base: 10px; }
}

@media (max-width:800px) {
  :root{ --font-base: 8px; }
}



/* small visual niceties for drag hover */
.cell.drag-over {
  outline: 3px dashed rgba(0,0,0,0.08);
  outline-offset: -6px;
}

.code-font {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.3rem;
  white-space: pre-wrap;
}

.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2fa84f, #1f7f3a);
}

/* Tab tartalom középen, saját görgetéssel */
.tab-content {
  flex: 1 1 auto;
  overflow: auto;      /* belül scrollozható */
  padding-right: 6px;  /* kis hely a scrollbar mellett */
  background: #fdfdfd;
  border-top: none;
}

#task-question, #task-hint, #task-explanation {
  font-size: 1.3rem;
  padding-top: 10px;
}

.progress-bar-wrap.segmented {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: #eee;
  gap: 2px;
  padding: 0 1px;
}

.progress-segment {
  flex: 1 1 auto;
  height: 100%;
  cursor: pointer;
}

.progress-segment.solved {
  background: linear-gradient(90deg, #2fa84f, #1f7f3a);
}

.progress-segment.unsolved {
  background: #ddd;
}

.progress-segment.current {
  background: linear-gradient(90deg, #ff9900, #cc6600);
}

.task-header {
  margin-left: 8px;
  font-weight: bold;
  color: #2fa84f;
}

#task-expected {
  white-space: pre;
  overflow-x: auto;
}

#test-btn {
  background: linear-gradient(180deg,#2fa84f,#1f7f3a);
  color: white;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
}
#submit-btn {
  background: linear-gradient(180deg,#ff9900,#cc6600);
  color: white;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
}

.sql-keyword {
  color: #0077cc;
  font-weight: bold;
}

/* CodeMirror SQL kulcsszavak (pl. SELECT, FROM, WHERE...) */
.cm-keyword {
  color: #0077cc !important;  /* kékre állítva */
  font-weight: bold;
}

/* Editor panel tartalom */
.editor-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

/* Editor wrapper kitölti a szabad helyet */
#editor-wrapper {
  flex: 1 1 auto;     /* engedi, hogy nőjön */
  display: flex;
  flex-direction: column;
}

#editor-wrapper .CodeMirror {
  flex: 1 1 auto;
  width: 100%;
  height: 100% !important;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.3rem;
}

/* Action gombok mindig alul */
.editor-actions {
  flex: 0 0 auto;        /* fixen a panel aljára */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;      /* extra biztosíték */
}

#help-container {
  font-size: 1.3rem;        /* egységes a többi tabbal */
  line-height: 1.5;       /* hogy olvashatóbb legyen */
}

.CodeMirror .CodeMirror-placeholder {
  color: #888 !important;
  font-style: italic;
}

.image-container {
  width: 100%;          /* a szülő div szélessége */
  height: 100%;        /* a szülő div magassága */
  min-width: 100px;     /* minimális szélesség */
  min-height: 80px;    /* minimális magasság */
  overflow: auto;       /* ha a kép nagyobb, jön a scrollbar */
}

.image-container img {
  width: auto;
  height: 100%;       
  min-width: 100px;
  min-height: 80px;
  display: block;
}

/* uj rész */

.progress-bar-wrap.segmented {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px; /* kis távolság, hogy elkülönüljenek */
}

.progress-bar-wrap.segmented .progress-segment {
  flex: 1 1 auto;         /* egyenletesen oszlanak el */
  min-width: 20px;        /* mindig legalább ennyi széles */
  height: 10px;           /* fix magasság, kattintható */
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.progress-bar-wrap.segmented .progress-segment:hover {
  transform: scale(0.8); /* hoverre nagyobb, jobban látszik */
  background-color: #aaa;
}

/* színek állapottól függően */
.progress-segment.unsolved {
  background-color: #ddd;
}

.progress-segment.solved {
  background-color: #4caf50;
}

.progress-segment.current {
  outline: #ff9800;
}

/* chapters balra */