/* ===================== DK Product Designer – CSS ===================== */

/* Modal root */
#dkpd-modal{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  display: none;
}
#dkpd-modal.open{ display:block; }

#dkpd-modal .dkpd-backdrop{
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  background: rgba(0,0,0,.5);
}

#dkpd-modal .dkpd-dialog{
  position: relative;
  max-width: 1000px;
  margin: 5vh auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

/* Header */
.dkpd-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.dkpd-close{
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Body (desktop) */
.dkpd-body{
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-wrap: wrap;
}
.dkpd-left{
  flex: 1 1 600px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Canvas: dimenzije upravlja JS (normalizeCanvasSize) */
#dkpd-canvas{
  border: 1px dashed #ddd;
  background: #fafafa;
  display: block;
}
.dkpd-hint{ font-size:.9em; color:#555; margin-top:8px; }

.dkpd-right{
  flex: 1 1 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Upload gumb */
.dkpd-file input{ display:none; }
.dkpd-file span{
  display:inline-block;
  border:1px solid #222;
  padding:8px 12px;
  cursor:pointer;
}

/* Kontrole */
.dkpd-controls .ctrl{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
}
.dkpd-controls select{
  padding:6px 8px;
  border:1px solid #ddd;
  border-radius:6px;
}

/* Akcije */
.dkpd-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* Status – bordo (ok) in rdeča (error) */
.dkpd-status{ margin-top:6px; font-size:.95em; }
.dkpd-status.ok{ color:#8A1538; }
.dkpd-status.error{ color:#d33; }

/* Zoom toolbar pod canvasom */
.dkpd-zoom{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.dkpd-zoom-btn{
  border:1px solid #ddd;
  background:#fff;
  padding:6px 10px;
  cursor:pointer;
  border-radius:6px;
  line-height:1;
  min-width:36px;
  text-align:center;
}
.dkpd-zoom-btn:hover{ background:#f5f5f5; }
.dkpd-zoom-label{ font-size:.9em; color:#666; }

/* ---------------- Zaklep strani, ko je modal odprt ---------------- */
html.dkpd-lock, body.dkpd-lock{
  overflow: hidden;
  height: 100%;
}

/* ====================== MOBILNO (iOS & Android) ====================== */
@media (max-width:640px){
  /* Backdrop naj bo fiksno čez ekran */
  #dkpd-modal .dkpd-backdrop{
    position: fixed;
    top:0; right:0; bottom:0; left:0;
  }

  /* Dialog fullscreen in stolpec (header + body) */
  #dkpd-modal .dkpd-dialog{
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    margin:0;
    border-radius:0;
    max-width:none;
    display:flex;
    flex-direction:column;
  }

  /* Scroll se dogaja SAMO znotraj .dkpd-body */
  #dkpd-modal .dkpd-body{
    flex:1 1 auto;
    min-height:0;                 /* pomembno za pravilen izračun višine */
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch; /* gladek iOS scroll */
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;             /* iOS bug: brez wrap-a */
    overscroll-behavior:contain;  /* ne prenesi scrolla na stran */
    padding:12px;
  }

  /* Levi/desni del pod sabo, širina 100% */
  #dkpd-modal .dkpd-left,
  #dkpd-modal .dkpd-right{
    flex:0 0 auto;
    min-width:0;
    width:100%;
  }
}

/* --- Viden drsni trak v modalu (mobile overlay) --- */
#dkpd-modal .dkpd-body{ position: relative; }

/* Native scrollbari (kjer so podprti – Chrome/Firefox/desktop/Android) */
#dkpd-modal .dkpd-body{
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: rgba(0,0,0,.35) transparent;
}
#dkpd-modal .dkpd-body::-webkit-scrollbar{   /* WebKit/Blink */
  width: 8px;
}
#dkpd-modal .dkpd-body::-webkit-scrollbar-track{
  background: transparent;
}
#dkpd-modal .dkpd-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.35);
  border-radius: 8px;
}

/* Bold toggle */
#dkpd-bold { font-weight:700; }
#dkpd-bold.active {
  border-color:#8A1538;
  box-shadow:0 0 0 2px rgba(138,21,56,.12);
  color:#8A1538;
}

/* Custom overlay scrollbar (viden tudi na iOS) */
#dkpd-modal .dkpd-scrollbar{
  position: absolute;
  top: 6px; right: 2px; bottom: 6px;
  width: 6px;
  background: rgba(0,0,0,.06);
  border-radius: 6px;
  pointer-events: none;   /* da ne ovira tapov v modalu */
  display: none;          /* skrij, če vsebina ne presega višine */
  opacity: .9;
}
#dkpd-modal .dkpd-scrollbar .dkpd-thumb{
  position: absolute; left:0; right:0; top:0;
  width: 100%;
  height: 40px;           /* runtime ga preračuna */
  background: rgba(0,0,0,.38);
  border-radius: 6px;
}

/* Na večjih zaslonih ne kažemo overlay-a */
@media (min-width: 641px){
  #dkpd-modal .dkpd-scrollbar{ display: none !important; }
}

/* Canvas naj ne krade potez za page scroll (da Fabric normalno dela) */
#dkpd-canvas{ touch-action:none; }

@media (max-width: 640px){
  #dkpd-canvas{ touch-action: pan-y; }
}
/* Ko modal ni odprt, naj ne lovi dogodkov – dodatna zaščita za Android */
#dkpd-modal{ pointer-events: none; }
#dkpd-modal.open{ pointer-events: auto; }

/* Skrij poravnavo SAMO na mobilnih (iPhone/Android) */
@media (max-width: 680px){
  html body #dkpd-modal .dkpd-right .dkpd-controls .ctrl.ctrl-align{
    display: none !important;
  }
}

/* iOS: prepreči auto-zoom pri urejanju IText (Fabric ustvarja skriti textarea) */
#dkpd-modal .canvas-container textarea,
#dkpd-modal textarea[data-fabric-hiddentextarea="true"]{
  font-size: 16px !important;
}

#dkpd-modal{
  -webkit-text-size-adjust: 100%;
}

/* Poravnava – vedno pokaži ikone, skrij fallback črke */
#dkpd-modal .dkpd-align-btn svg{
  display:inline-block !important;
  width:20px; height:20px;
  fill:currentColor !important;
}

/* Če je kak plugin/tema nastavila hidden ali inline display:none, to prepišemo */
#dkpd-modal .dkpd-align-btn svg[hidden],
#dkpd-modal .dkpd-align-btn svg[style*="display: none"]{
  display:inline-block !important;
}

/* Fallback črke L/C/D skrij vedno */
#dkpd-modal .dkpd-align-btn .dkpd-align-txt{
  display:none !important;
}

/* Če je bil kje dodan fallback "če je SVG skrit, pokaži črke" – tudi to izklopi */
#dkpd-modal .dkpd-align-btn svg[hidden] + .dkpd-align-txt,
#dkpd-modal .dkpd-align-btn svg[style*="display: none"] + .dkpd-align-txt{
  display:none !important;
}

#dkpd-canvas:hover { cursor: grab; }

/* DKPD: saving state on save button */
#dkpd-save.saving {
  pointer-events: none;
  opacity: .7;
  position: relative;
}
#dkpd-save.saving::after {
  content: '…';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}