/* ==========================================================================
   Webnane — PDF Düzenleyici çalışma alanı
   ==========================================================================
   Tek editör, iki yerleşim:
     · Masaüstü — solda sayfalar, ortada geniş tuval, sağda seçim paneli.
     · Telefon  — tuval tam genişlik, altta dokunmatik araç çubuğu.

   ALT ARAÇ ÇUBUĞU ORTAK BİLEŞENDİR: Capacitor iOS/Android uygulaması aynı
   biçimlendirmeyi kullanır. Bu yüzden güvenli alan (safe-area) dolgusu ve
   48px dokunma hedefleri burada tanımlıdır, sayfaya özel değil.
   ========================================================================== */

.pe { display: grid; gap: var(--s3); }

/* --- Üst şerit ------------------------------------------------------------ */
.pe-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.pe-file { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-bar-actions { display: flex; gap: var(--s2); margin-left: auto; }

/* --- Yetenek rozeti -------------------------------------------------------
   Kullanıcı teknik terim görmez. Renk TEK BAŞINA anlam taşımaz: her rozetin
   kendi simgesi ve metni vardır. */
.pe-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s3); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 650; line-height: 1.3;
  border: 1px solid transparent;
}
.pe-badge svg { flex: none; }
.pe-badge-full    { background: #e7f4ec; color: #14563c; border-color: #b9dfc9; }
.pe-badge-limited { background: #fdf3e3; color: #8a5a00; border-color: #f0d9a8; }
.pe-badge-overlay { background: #eef2f7; color: #3d5166; border-color: #ccd8e6; }
.pe-badge-blocked { background: #fdeceb; color: #a32717; border-color: #f3c6c1; }
.pe-badge-note { display: block; margin-top: var(--s2); color: var(--muted); font-size: var(--t-xs); }

/* --- Çalışma alanı -------------------------------------------------------- */
.pe-work { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .pe-work { grid-template-columns: 190px minmax(0, 1fr) 280px; align-items: start; }
}

.pe-panel {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s3);
}
.pe-panel h2 { font-size: var(--t-sm); margin: 0 0 var(--s2); }

/* Tuval: sayfa ortalanır, taşma kendi kutusunda kaydırılır. */
.pe-stage {
  position: relative; overflow: auto; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  min-height: 48vh; display: grid; place-items: center; padding: var(--s3);
  overscroll-behavior: contain;
}
.pe-canvas-wrap { position: relative; line-height: 0; box-shadow: 0 2px 14px rgba(16, 26, 23, .13); }
.pe-canvas-wrap canvas { display: block; max-width: none; height: auto; }
.pe,.pe>* ,.pe-work,.pe-work>div,.pe-stage,.pe-panel{min-width:0;max-width:100%}.pe-bar-actions{flex-wrap:wrap;max-width:100%}.pe-file{max-width:100%}.pe-stage{place-items:start;justify-items:start}.pe-canvas-wrap{flex-shrink:0}

/* Metin nesnesi kutuları — tuvalin üstünde saydam katman */
.pe-layer { position: absolute; inset: 0; }
.pe-hit {
  position: absolute; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; touch-action: manipulation;   /* 300ms dokunma gecikmesi olmasın */
  background: transparent; padding: 0;
}
.pe-hit:hover, .pe-hit:focus-visible { border-color: var(--brand); background: rgba(20, 86, 60, .09); }
.pe-hit[aria-pressed="true"] { border-color: var(--brand); background: rgba(20, 86, 60, .17); }
/* Doğrudan düzenlenemeyen nesneler farklı çerçeveyle işaretlenir. */
.pe-hit[data-tier="limited"]:hover { border-color: #c58a1a; background: rgba(197, 138, 26, .12); }

.pe-marks { position: absolute; inset: 0; pointer-events: none; }
.pe-mark-white { position: absolute; background: #fff; outline: 1px dashed #9fb0a8; }
.pe-mark-text { position: absolute; color: #14563c; font-weight: 600; white-space: pre; }

/* --- Sayfa şeridi --------------------------------------------------------- */
.pe-pages { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); }
@media (min-width: 1024px) { .pe-pages { display: grid; max-height: 62vh; overflow-y: auto; } }
.pe-page {
  position: relative; border: 2px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; padding: 0; cursor: pointer; flex: none; width: 84px;
  touch-action: manipulation;
}
.pe-page[aria-current="true"] { border-color: var(--brand); }
.pe-page canvas { display: block; width: 100%; height: auto; border-radius: 2px; }
.pe-page-no {
  position: absolute; left: 4px; bottom: 4px; background: rgba(16, 26, 23, .74);
  color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
}
.pe-page-ops { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }

/* --- Seçim / özellik paneli ----------------------------------------------- */
.pe-empty { color: var(--muted); font-size: var(--t-sm); }
.pe-field { display: grid; gap: 6px; margin-bottom: var(--s3); }
.pe-field label { font-size: var(--t-xs); font-weight: 650; color: var(--ink-soft); }
.pe-row { display: flex; gap: var(--s2); }
.pe-row > * { flex: 1; min-width: 0; }

/* --- Dokunmatik alt araç çubuğu (ORTAK — Capacitor ile paylaşılır) --------
   Telefonda tek elle erişilebilir olması için ekranın altına sabitlenir.
   Güvenli alan dolgusu iPhone çentik/çubuk alanını hesaba katar. */
.pe-tools {
  display: flex; gap: var(--s2); overflow-x: auto;
  padding: var(--s2); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
}
@media (max-width: 1023px) {
  .pe-tools {
    /* Uygulamanın kendi alt menüsünün (.tabbar) ÜSTÜNE oturur. Sıfır
       konumlandırılırsa ikisi üst üste biner ve araçlar tıklanamaz hâle
       gelir — Capacitor uygulamasında da aynı yığın geçerlidir. */
    position: sticky; bottom: calc(var(--tabbar-h) + var(--sab)); z-index: 30;
    border-radius: var(--r-md);
    box-shadow: 0 -6px 18px rgba(16, 26, 23, .10);
  }
  /* Son öge alt menünün altında kalmasın */
  .pe { padding-bottom: calc(var(--tabbar-h) + var(--sab) + var(--s3)); }
}
.pe-tool {
  flex: 1 0 auto; min-width: 64px; min-height: 48px;      /* iOS 44pt / Android 48dp üstü */
  display: grid; place-items: center; gap: 2px;
  padding: 6px var(--s2); border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  touch-action: manipulation;
}
.pe-tool svg { width: 20px; height: 20px; }
.pe-tool:hover { background: var(--brand-soft); }
.pe-tool[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.pe-tool:disabled { opacity: .42; cursor: not-allowed; }

/* Telefonda yan paneller açılır bölme olur */
@media (max-width: 1023px) {
  .pe-side { display: none; }
  .pe-side.is-open { display: block; }
}
.pe-signature-dialog{box-sizing:border-box;width:min(580px,calc(100vw - 24px));max-height:90dvh;overflow:auto;border:1px solid #cbd8c3;border-radius:16px;padding:24px;color:#193d2f;background:#fff}.pe-signature-dialog::backdrop{background:#102c235e}.pe-signature-dialog h2{font-size:24px;margin:0 0 12px}.pe-signature-dialog p{font-size:12px;line-height:1.7;margin:12px 0}.pe-signature-dialog canvas{display:block;width:100%;height:180px;background:repeating-linear-gradient(0deg,#f7faf5,#f7faf5 29px,#e5ecdf 30px);border:1px dashed #9eb28f;border-radius:8px;touch-action:none;cursor:crosshair}.pe-signature-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.pe-signature-actions .btn{min-height:44px}.pe-signature-upload{display:block;font-size:13px;margin-top:16px}.pe-signature-upload input{display:block;max-width:100%;margin-top:10px}.pe-signature-consent{display:flex;gap:10px;align-items:start;font-size:12px;line-height:1.7}.pe-signature-consent input{width:20px;height:20px;flex-shrink:0}.pe-signature-box{position:absolute;z-index:20;border:1px dashed #39714f;box-sizing:border-box;line-height:normal}.pe-signature-move{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;color:transparent;background:transparent;touch-action:none;cursor:move}.pe-signature-controls{position:absolute;top:100%;left:0;display:flex;gap:3px;background:white;border-radius:5px;box-shadow:0 2px 7px #1233}.pe-signature-controls button{padding:5px 9px;font-size:12px;min-width:36px;min-height:36px;border-radius:4px;white-space:nowrap}.pe-signature-box:focus-within{outline:2px solid #49764d}#peLeadBridge[hidden]{display:none!important}#peLeadBridge{margin:24px auto;max-width:1100px}@media(max-width:600px){.pe-signature-dialog{padding:18px}.pe-signature-dialog canvas{height:180px}.pe-signature-actions .btn{flex:1;font-size:12px;min-width:80px}.pe-signature-controls button{min-height:44px;min-width:40px}.pe-tools [data-tool=signature]{white-space:nowrap}}