/* ==========================================================================
   app.css — Barkod Etiket Oluşturucu
   Sade, beyaz ağırlıklı arayüz. Bootstrap 5 üzerine ince bir katman.
   Renk ve ölçü değişkenleri tek yerde tutulur.
   ========================================================================== */

:root {
  --ink: #14161a;
  --ink-2: #5c6472;
  --ink-3: #8a93a2;
  --line: #e5e8ec;
  --line-strong: #cfd4dc;
  --bg: #f3f4f6;
  --panel: #ffffff;
  --scan: #e0322c;          /* Tek vurgu rengi: barkod okuyucu kırmızısı */
  --invalid: #d92d20;
  --invalid-soft: #fef3f2;
  --radius: 6px;
  --panel-width: 344px;
  --toolbar-height: 52px;
  --status-height: 34px;
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}

/* --- Uygulama iskeleti ---------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-rows: var(--toolbar-height) 1fr var(--status-height);
  height: 100vh;
}

/* --- Araç çubuğu --------------------------------------------------------- */
.bq-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.bq-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-right: 6px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Logo: dört çizgili minik barkod */
.bq-brand-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: linear-gradient(
    to right,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 7px,
    var(--ink) 7px 10px, transparent 10px 12px,
    var(--ink) 12px 13px, transparent 13px 15px,
    var(--scan) 15px 18px
  );
  transform: translateY(2px);
}

.bq-brand small {
  font-weight: 400;
  color: var(--ink-3);
}

.bq-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bq-toolbar-spacer { flex: 1; }

.bq-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
}

/* --- Ana bölüm ----------------------------------------------------------- */
.bq-main {
  display: grid;
  grid-template-columns: var(--panel-width) 1fr;
  min-height: 0;
}

/* Izgara hücrelerinin kendi kendine kaydırabilmesi için şart:
   min-height:0 verilmezse içerik hücreyi şişirir ve sayfa kayar. */
.bq-main > * {
  min-height: 0;
  height: 100%;
}

/* --- Sol panel ----------------------------------------------------------- */
.bq-panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bq-section { border-bottom: 1px solid var(--line); }

.bq-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}

.bq-section-head:hover { color: var(--ink); }

.bq-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.bq-section.is-open .bq-chevron { transform: rotate(-135deg); }

.bq-section-body {
  display: none;
  padding: 2px 14px 16px;
}

.bq-section.is-open .bq-section-body { display: block; }

/* --- Form alanları ------------------------------------------------------- */
.bq-field { margin-bottom: 10px; }

.bq-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
}

.bq-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 9px;
  color: var(--ink-3);
  cursor: help;
}

.bq-input-group { position: relative; }

.bq-unit {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--ink-3);
  pointer-events: none;
}

.bq-input-group input[type="number"] { padding-right: 26px; }

.bq-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}

.bq-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8px;
}

.bq-inline {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
}

.bq-check { margin-bottom: 8px; }
.bq-check .form-check-label { font-size: 12px; }

.bq-align { display: flex; width: 100%; }
.bq-align .btn { flex: 1; font-size: 11px; padding: 3px 0; }

.bq-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
}

.bq-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.bq-actions .btn { flex: 1; }

/* Yazı ayar grubu (üst yazı / numara / alt yazı) */
.bq-subgroup {
  padding: 10px 10px 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fcfcfd;
}

.bq-subgroup > .bq-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.bq-section-body hr {
  margin: 14px 0;
  border-color: var(--line);
  opacity: 1;
}

/* --- Barkod listesi ------------------------------------------------------ */
.bq-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.bq-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-2);
}

.bq-count.is-hidden { display: none; }
.bq-count.is-danger { color: var(--invalid); }

.bq-list {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
}

.bq-row:last-child { border-bottom: 0; }

.bq-row.is-invalid {
  background: var(--invalid-soft);
  color: var(--invalid);
}

.bq-row-ghost { opacity: 0.4; }

.bq-row-handle {
  width: 10px;
  height: 14px;
  background-image: radial-gradient(circle, var(--ink-3) 1px, transparent 1px);
  background-size: 5px 5px;
  cursor: grab;
  flex: none;
}

.bq-row-no {
  width: 34px;
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.bq-row-value {
  flex: 1;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bq-row-btn {
  flex: none;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.bq-row-btn:hover { color: var(--scan); }

.bq-row-empty {
  padding: 14px;
  color: var(--ink-3);
  text-align: center;
  font-size: 11px;
}

/* --- Önizleme ------------------------------------------------------------ */
.bq-preview {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 40px 60px;
  overflow: auto;
  background:
    linear-gradient(var(--bg), var(--bg)),
    repeating-linear-gradient(45deg, #eceef1 0 1px, transparent 1px 6px);
}

.bq-frame { position: relative; }

.bq-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.bq-canvas { position: relative; }

/* Kağıt */
.bq-page {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* Milimetrik cetvel — beş milimetrede ince, on milimetrede kalın çizgi */
.bq-ruler-x,
.bq-ruler-y {
  position: absolute;
  background-color: #fff;
  border: 1px solid var(--line);
}

.bq-ruler-x {
  top: -7mm;
  left: 0;
  height: 4mm;
  background-image:
    repeating-linear-gradient(to right, var(--ink-3) 0 0.2mm, transparent 0.2mm 10mm),
    repeating-linear-gradient(to right, var(--line-strong) 0 0.2mm, transparent 0.2mm 5mm);
}

.bq-ruler-y {
  left: -7mm;
  top: 0;
  width: 4mm;
  background-image:
    repeating-linear-gradient(to bottom, var(--ink-3) 0 0.2mm, transparent 0.2mm 10mm),
    repeating-linear-gradient(to bottom, var(--line-strong) 0 0.2mm, transparent 0.2mm 5mm);
}

.bq-ruler-x.is-hidden,
.bq-ruler-y.is-hidden { display: none; }

/* Kağıt üzerindeki etiket ("sticker").
   DİKKAT: bu sınıf ADI, sol paneldeki form etiketi olan .bq-label ile
   ASLA aynı olmamalı; aynı olduğunda form etiketleri position:absolute
   alıp alanların üstüne biniyor ve seçim kutuları tıklanamıyor. */
.bq-sticker {
  position: absolute;
  overflow: hidden;
}

.bq-page.show-guides .bq-sticker {
  outline: 0.2mm dashed rgba(20, 22, 26, 0.28);
  outline-offset: -0.1mm;
}

.bq-page.show-guides .bq-sticker.is-empty {
  outline-color: rgba(20, 22, 26, 0.12);
}

.bq-page.show-guides .bq-sticker.is-invalid {
  outline: 0.3mm solid var(--invalid);
}

.bq-sticker-inner {
  position: absolute;
  display: none;
}

.bq-page.show-guides .bq-sticker-inner {
  display: block;
  outline: 0.2mm dotted rgba(224, 50, 44, 0.35);
}

/* Yazı blokları */
.bq-text {
  position: absolute;
  display: flex;
  align-items: center;
  overflow: hidden;
  line-height: 1;
  white-space: nowrap;
}

/* Barkod */
.bq-barcode-slot { position: absolute; }

.bq-barcode {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.bq-barcode-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bq-barcode-img { display: block; }

.bq-barcode.is-invalid {
  align-items: center;
  border: 0.2mm solid var(--invalid);
  color: var(--invalid);
  font-size: 6pt;
  text-align: center;
}

/* Taşma uyarısı */
.bq-overflow {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  padding: 5px 12px;
  border: 1px solid #fda29b;
  border-radius: 999px;
  background: #fffbfa;
  color: var(--invalid);
  font-size: 11px;
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.bq-overflow.is-hidden { display: none; }

/* --- Durum çubuğu -------------------------------------------------------- */
.bq-status {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-2);
}

.bq-status b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bq-status .is-danger { color: var(--invalid); }

/* --- Yazdırma / ekran dışı kapsayıcılar ---------------------------------- */
#printRoot,
#offscreenRoot {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- SweetAlert2 içindeki ilerleme çubuğu -------------------------------- */
.bq-progress {
  height: 6px;
  margin: 8px 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.bq-progress-bar {
  width: 0;
  height: 100%;
  background: var(--scan);
  transition: width 0.2s ease;
}

.bq-progress-text,
.bq-swal-note {
  font-size: 12px;
  color: var(--ink-2);
}

.bq-swal-list { text-align: left; font-size: 13px; line-height: 1.7; }

/* --- Bootstrap ince ayarları -------------------------------------------- */
.form-control-sm,
.form-select-sm { font-size: 12px; }

.form-control:focus,
.form-select:focus {
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(224, 50, 44, 0.12);
}

.btn:focus-visible { box-shadow: 0 0 0 3px rgba(224, 50, 44, 0.28); }

.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn-ink:hover,
.btn-ink:focus {
  background: #000;
  border-color: #000;
  color: #fff;
}

.form-check-input:checked {
  background-color: var(--ink);
  border-color: var(--ink);
}

/* --- Duyarlı davranış ---------------------------------------------------- */
@media (max-width: 1080px) {
  body { overflow: auto; }

  .app-shell {
    grid-template-rows: auto 1fr auto;
    height: auto;
    min-height: 100vh;
  }

  .bq-main { grid-template-columns: 1fr; }

  .bq-panel {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .bq-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .bq-preview { padding: 44px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}