/* assets/designer/designer-mobile.css */

/* =========================
   1) Modal fullscreen mobile
   ========================= */
@media (max-width: 991.98px) {
  #designerModal .modal-dialog {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  #designerModal .modal-content {
    /* height:100% wäre hier falsch: Der Gestalter ist so hoch wie sein
       Inhalt, gescrollt wird außen (siehe designer.css, "Kein Scrollen
       INNERHALB des Gestalters"). */
    height: auto;
    border-radius: 0;
  }

  #designerModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  #designerModal .modal-body {
    padding: .75rem;
    overflow: visible;
  }
}

/* ==========================================
   2) Preview: kein Überlappen, sauber scrollen
   ========================================== */
.sg-preview-canvas {
  overflow: auto;
  /* Fallback: lieber scroll als verdecken */
  -webkit-overflow-scrolling: touch;
}

/* Canvas soll keine extra Umrandung haben (du wolltest border weg) */
.sg-preview-canvas #stampCanvas {
  border: 0 !important;
}

/* Der feine Abdruck-Rand ist im Canvas gezeichnet – kein CSS-Rand */
.sg-preview-wrap,
.sg-canvas-frame {
  border: 0 !important;
  background: transparent !important;
}

/* =========================
   3) Tabs sticky (mobile)
   ========================= */
@media (max-width: 991.98px) {
  .sg-tabs {
    /*position: sticky;*/
    top: 58px;
    /* unter Header; ggf. anpassen */
    z-index: 15;
    background: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }
}

/* ===================================
   4) Submitbar sticky unten (mobile)
   =================================== */
@media (max-width: 991.98px) {
  .sg-submitbar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: #fff;
    padding: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }
}

/* ==========================================
   5) Produktbox: Abstand und Reihenfolge ok
   ========================================== */
@media (max-width: 991.98px) {
  .sg-productbox {
    margin-top: .75rem;
  }
}

/* ==========================================
   6) Table wird auf Mobile versteckt (wir bauen
      dafür eine mobile Zeilensteuerung per JS)
   ========================================== */
@media (max-width: 991.98px) {
  .sg-desktop-lines {
    display: none !important;
    /* wrapper um deine Tabelle */
  }

  .sg-mobile-lines {
    display: block !important;
    /* wrapper den wir per JS befüllen */
  }
}

@media (min-width: 992px) {
  .sg-mobile-lines {
    display: none !important;
  }
}

/* ==========================================
   7) Mobile Controls: kompakt & fingerfreundlich
   ========================================== */
.sg-mobile-panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: .75rem;
}

.sg-mobile-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

.sg-mobile-row .btn-group .btn,
.sg-mobile-row .form-select,
.sg-mobile-row .form-control {
  min-height: 42px;
}

/* Icon-Buttons etwas größer */
.sg-mobile-panel .sg-ic {
  min-width: 42px;
  min-height: 42px;
}

/* Warnbox gut sichtbar */
@media (max-width: 991.98px) {
  #warnBox {
    position: sticky;
    top: 106px;
    /* unter header+tabs */
    z-index: 16;
  }
}

/* =========================
   8) Touch: Canvas soll nicht scroll-gesten fressen
   ========================= */
#stampCanvas {
  touch-action: none;
  /* wichtig für Drag von Clipart/Logo */
}

/* ==========================================
   Mobile Preview Breite begrenzen (max 97vw)
   ========================================== */
@media (max-width: 991.98px) {

  /* der gesamte linke Vorschau-Block */
  .sg-preview-wrap {
    max-width: 97vw;
  }

  /* Canvas-Container darf nicht breiter als Viewport werden */
  .sg-preview-canvas {
    max-width: 97vw;
    overflow: auto;
  }

  /* Wenn du einen äußeren Rahmen/Wrapper um die Vorschau hast: */
  .sg-canvas-frame {
    max-width: 97vw;
  }

  /* Lineale sollen nicht überstehen */
  #rulerTop {
    max-width: 97vw;
    overflow: hidden;
  }

  #rulerLeft {
    /* links ist vertikal, hier reicht es, wenn nix horizontal übersteht */
    max-width: 40px;
  }
}

/* ==========================================
   Tabs kompakter auf Mobile
   ========================================== */
@media (max-width: 991.98px) {
  .sg-tabs {
    gap: .25rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  /* Tab Buttons / Elemente */
  .sg-tab {
    font-size: .85rem;
    /* kleinere Schrift */
    padding: .35rem .55rem;
    /* weniger Höhe */
    line-height: 1.1;
    border-radius: 10px;
  }

  /* Wenn Tab-Icons drin sind */
  .sg-tab i,
  .sg-tab .bi {
    font-size: .95em;
  }
}

@media (max-width: 991.98px) {
  .sg-tabs {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sg-tabs::-webkit-scrollbar {
    display: none;
  }

  .sg-tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 991.98px) {

  /* Linke Spalte darf nur 97vw einnehmen */
  .sg-left {
    max-width: 97vw !important;
    width: 97vw !important;
    /* NICHT durch reines "overflow-x: hidden" ersetzen: Das macht
       .sg-left zu einem Scroll-Container-Kandidaten (Browser ergänzen
       dabei automatisch overflow-y:auto), auch ohne dass hier je etwas
       scrollt – und bricht damit position:sticky bei .sg-preview-wrap
       (Kundenwunsch: Vorschau bleibt beim Scrollen oben). "overflow-x:
       clip" schneidet genauso auf 97vw zu, erzeugt aber keinen
       Scroll-Container. "hidden" bleibt als Fallback für Browser ohne
       "overflow: clip" stehen, wird von "clip" in allen aktuellen
       Browsern aber überschrieben (gleiches Muster wie beim
       Sticky-Header-Fix im Theme stempelgigant und bei .sg-modal in
       designer.css). */
    overflow-x: hidden;
    overflow-x: clip;
    /* verhindert horizontales "Rauslaufen" */
  }

  /* Der Bereich, in dem Canvas+Lineal liegen, darf horizontal scrollen */
  .sg-preview-wrap {
    max-width: 97vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Wichtig: Top-Lineal nicht clippen */
  #rulerTop {
    display: block;
    overflow: visible !important;
    max-width: none !important;
  }

  /* Canvas-Frame darf nicht hart begrenzen */
  .sg-canvas-frame {
    max-width: none !important;
  }
}

@media (max-width: 991.98px) {

  /* Tabelle aus, Accordion an */
  #linesTableWrap {
    display: none !important;
  }

  /* falls du einen Wrapper hast */
  #linesAccordion {
    display: block !important;
  }
}

/* Falls du keinen Wrapper hast, nimm gezielt die Tabelle */
@media (max-width: 991.98px) {
  table.sg-lines-table {
    display: none !important;
  }

  #linesAccordion {
    display: block !important;
  }
}

.sg-opts-btn {
  width: 38px;
  padding: 0.25rem 0;
}

.sg-opts-btn i {
  font-size: 1rem;
}

.sg-opts-toggle i {
  display: inline-block;
  transition: transform .18s ease;
}

.sg-opts-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}


/* checkbox mobile */
@media (max-width: 991.98px) {
  .sg-check input {
    width: 40px;
    height: 40px;
  }
}