/* Fullscreen (brauzer Fullscreen API emas) - topnav ko'rinib turishi
   uchun, "top" JS orqali topnav balandligiga moslab qo'yiladi. */
#compiler-shell.compiler-fullscreen {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 990;
  border-radius: 0;
  overflow: auto;
  margin-bottom: 0;
}

/* .btn-icon.btn-sm o'zining formulasi bilan (calc(.625rem + 1.5em + 2px))
   31.5px chiqadi, editordagi oddiy .btn.btn-sm ("Run") esa ~30px - shu
   1.5px farq ikkala card-header balandligini bir-biriga mos kelmay
   qolishiga sabab bo'lgan. Faqat shu uch nuqtali tugma uchun 30px'ga
   tenglashtiramiz (loyihaning umumiy .btn-icon klassiga tegmasdan). */
#output-card .card-header .btn-icon.btn-sm {
  height: 30px;
  width: 30px;
}

/* Til ustuni - kengligi hech qachon belgilanmaydi (kontentga - tugmalarga -
   moslashadi), faqat balandligi (top/bottom) row'ga moslanib, sig'masa
   ichida vertikal scroll qiladi. Scrollbar ko'rinishi yashirilgan
   (.nav-scroll'dagi bilan bir xil usul). */
#compiler-lang-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#compiler-lang-sidebar::-webkit-scrollbar {
  display: none;
}

/* Editor va Output ustunlari orasidagi tortiladigan chegara. */
.panes-divider {
  position: relative;
  width: 8px;
  flex-shrink: 0;
  cursor: col-resize;
  z-index: 5;
}
.panes-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--theme-border-color);
}
.panes-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* SVG ichidagi ranglar boshqa loyihadan qattiq (hardcoded) kelgan edi -
   .card-overlay'dagi bilan bir xil naqsh (--theme-card-bg + blur) -
   shu orqali chap tomondagi doim qorong'i CodeMirror fonida ham,
   mavzuga qarab o'zgaruvchi Output fonida ham yumshoq ko'rinadi. */
.panes-divider__handle-bg {
  fill: var(--theme-card-bg);
}
.panes-divider__handle-border {
  stroke: var(--theme-border-color);
}
.panes-divider__handle-arrow {
  stroke: var(--theme-body-color);
}
.panes-divider__handle-dot {
  fill: var(--theme-border-color);
}

/* SVG logotip - rangi tugmaning o'z matn rangiga (currentColor) bog'liq,
   shuning uchun btn-primary/btn-outline-light va tungi/kunduzgi mavzu
   o'zgarganda alohida sozlashsiz avtomatik moslashadi. */
.lang-icon-svg {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Flex elementlarning standart min-width:auto xususiyati o'rnatilgan
   kengligidan (masalan 35%) kattaroq bo'lishiga yo'l qo'ymaslik uchun -
   aks holda #output-content ichida uzun (o'ralmaydigan) qator chiqsa,
   shu ustun (va u bilan birga butun qator) kengayib, buzilib chiqib
   ketadi. */
#compiler-main-column, #editor-col, #output-col {
  min-width: 0;
}
/* <pre>ning standart white-space:pre xususiyati satrni HECH QACHON
   o'ramaydi (bo'shliq bo'lsa ham) - faqat \n bo'lsa yangi qator
   boshlaydi. Xato xabarlari (masalan compiler xizmatiga ulanish xatosi)
   ko'pincha shunday - bitta uzun qator sifatida keladi va qutini
   kengaytirib, butun qatorni buzib yuborardi. pre-wrap + break-word shu
   qatorni (hatto bo'shliqsiz uzun so'z bo'lsa ham) quti kengligida
   o'rab beradi. */
#output-content {
  white-space: pre-wrap;
  word-break: break-word;
}
/* #compiler-row'ga aniq (px) balandlik berilmasa, uning balandligi
   kontentga (align-items:stretch orqali eng baland ustunga) qarab
   o'zgarardi - shuning uchun uzun chiqish matni CodeMirror'ni ham
   birga cho'zib yuborardi. Aniq balandlik bilan ikkala ustun ham
   (CodeMirror va Output) shu chegara ichida mustaqil scroll qiladi. */
#compiler-row {
  height: 420px;
}
#output-card .card-body {
  height: 100%;
  overflow-y: auto;
}
/* .CodeMirror'ning height:100% xususiyati o'zining containing block'i
   (#compiler-form) aniq balandlikka ega bo'lmasa, "auto"ga aylanib,
   CodeMirror faqat 1 qator balandligigacha qisqarib qolardi -
   shuning uchun #compiler-form'ga ham 100% berib, zanjirni to'liq
   ulaymiz (.card-body'dan CodeMirror'gacha). */
#compiler-form {
  height: 100%;
}
.CodeMirror {
  height: 100%;
}
/* .card (Bootstrap) flex-column bo'lgani uchun .card-body flex element
   hisoblanadi va uning standart min-height:auto xususiyati borligi
   sababli, uzun kod kiritilganda kontentidan (CodeMirror'ning to'liq
   balandligidan) kichikroq bo'lishga yo'l qo'ymay, #compiler-row'ning
   420px chegarasidan tashqariga cho'zilib chiqib ketardi. min-height:0
   shu standart xususiyatni bekor qiladi. */
#editor-col .card-body {
  min-height: 0;
}

/* lg (992px)'dan kichik ekranlarda editor va Output yonma-yon sig'maydi -
   shuning uchun Output va ular orasidagi divider yashiriladi, editor
   to'liq kenglikni oladi. "mobile-output-active" klassi JS orqali
   (Output tab bosilganda) qo'shilib, buning teskarisini qiladi - Output
   to'liq kenglikda ko'rinadi, editor esa yashiriladi. lg va undan katta
   ekranlarda bu qoidalar umuman qo'llanmaydi - avvalgidek ikkalasi ham
   doim yonma-yon, divider bilan o'lchami o'zgartiriladigan holicha qoladi. */
@media (max-width: 991.98px) {
  #output-col, .panes-divider {
    display: none;
  }
  #editor-col {
    width: 100% !important;
  }
  #compiler-row.mobile-output-active #editor-col {
    display: none;
  }
  #compiler-row.mobile-output-active #output-col {
    display: block;
    width: 100% !important;
  }
}