/* =========================================================
   برگه A4 و برچسب‌ها
   منبع: A4SheetPreview.tsx, PhotoBookLabel.tsx, StationeryStripLabel.tsx
   تزئینات سنگین SVG عمداً استخراج نشده‌اند — جای آن‌ها مشخص است
   ========================================================= */

.a4-stage {
  background: rgba(226, 232, 240, 0.8);
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 2px 6px rgba(15,23,42,0.06);
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 350px;
}

.a4-zoom-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
  user-select: none;
  transform-origin: top center;
  transition: transform 0.15s ease-out;
}

.a4-sheet-container {
  width: 210mm;
  height: 297mm;
  min-width: 210mm;
  min-height: 297mm;
  max-width: 210mm;
  max-height: 297mm;
  background: #fff;
  box-shadow: 0 25px 50px rgba(15,23,42,0.22);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.a4-labels-grid {
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-content: start;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.a4-header-note,
.a4-footer-note {
  position: absolute;
  left: 5mm;
  right: 5mm;
  text-align: center;
  font-size: 6.2pt;
  color: #64748b;
  pointer-events: none;
  user-select: none;
  z-index: 30;
  font-family: var(--font-vazir);
}
.a4-header-note { top: 1.2mm; }
.a4-footer-note {
  bottom: 1.2mm;
  font-size: 5.2pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- برچسب کتاب و دفتر (PhotoBookLabel) ---------- */
.book-label {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 5mm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
}

.book-label-inner {
  flex: 1;
  margin: 1.1mm;
  border-radius: 3.6mm;
  border: 0.55mm solid;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
}

.book-label-header {
  padding: 1.2mm 2mm;
  color: #fff;
  font-weight: 800;
  font-size: 6.4pt;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1mm;
  min-height: 6.4mm;
}

.book-label-body {
  flex: 1;
  display: flex;
  gap: 1.6mm;
  padding: 1.6mm 2mm 1.8mm;
  min-height: 0;
}

.book-label-photo {
  width: 11.5mm;
  min-width: 11.5mm;
  height: 14.5mm;
  border-radius: 2mm;
  overflow: hidden;
  border: 0.4mm solid rgba(15,23,42,0.12);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  box-shadow: 0 0.4mm 1mm rgba(15,23,42,0.08);
}
.book-label-photo.is-circle {
  border-radius: 999px;
  width: 13mm;
  min-width: 13mm;
  height: 13mm;
}
.book-label-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-label-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4mm;
}

.book-label-name {
  font-weight: 900;
  line-height: 1.15;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-label-line {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 6.4pt;
}
.book-label-slogan {
  font-weight: 700;
  color: #1e3a8a;
  font-size: 6pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* تزئین بیرون‌زده — PLACEHOLDER بجای SVG سنگین */
.protrude-deco {
  position: absolute;
  pointer-events: none;
  z-index: 12;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(15,23,42,0.18));
}
.protrude-deco.tl { top: -1.6mm; right: -1.4mm; font-size: 9pt; }
.protrude-deco.tr { top: -1.4mm; left: -1.2mm; font-size: 8pt; }
.protrude-deco.bl { bottom: -1.5mm; right: -1.2mm; font-size: 8.5pt; }
.protrude-deco.br { bottom: -1.4mm; left: -1.1mm; font-size: 8pt; }

/* ---------- برچسب نواری لوازم‌التحریر ---------- */
.strip-label {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.strip-pencil {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 2mm;
  overflow: hidden;
  box-shadow: 0 0.3mm 0.8mm rgba(15,23,42,0.12);
}
.strip-pencil-tip {
  width: 18%;
  background: linear-gradient(90deg, #fde68a, #fbbf24 55%, #1e293b);
  clip-path: polygon(0 50%, 100% 8%, 100% 92%);
  position: relative;
}
.strip-pencil-tip::after {
  content: '';
  position: absolute;
  left: 0;
  top: 42%;
  width: 28%;
  height: 16%;
  background: #111827;
  border-radius: 0 1px 1px 0;
}
.strip-pencil-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2mm;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.2px;
  text-shadow: 0 0.3mm 0.6mm rgba(0,0,0,0.18);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 2.4mm,
      rgba(255,255,255,0.12) 2.4mm,
      rgba(255,255,255,0.12) 2.8mm
    );
}
.strip-pencil-eraser {
  width: 14%;
  background: linear-gradient(90deg, #c0c7d1, #e2e8f0 18%, #fb7185 22%, #f472b6);
  position: relative;
}
.strip-pencil-eraser::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 22%;
  background: repeating-linear-gradient(
    180deg,
    #94a3b8 0,
    #cbd5e1 1px,
    #64748b 2px,
    #94a3b8 3px
  );
}

.strip-eraser {
  width: 100%;
  height: 100%;
  border-radius: 2.2mm;
  background: linear-gradient(90deg, #fda4af, #fb7185 50%, #67e8f9);
  border: 0.4mm solid rgba(15,23,42,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0f172a;
  box-shadow: inset 0 0 0 0.7mm rgba(255,255,255,0.35);
}

.strip-ruler {
  width: 100%;
  height: 100%;
  border-radius: 1.4mm;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  border: 0.35mm solid #b45309;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.6mm 1.4mm;
  color: #7c2d12;
  font-weight: 800;
}
.strip-ruler-ticks {
  height: 2.2mm;
  background-image: repeating-linear-gradient(
    90deg,
    #7c2d12 0,
    #7c2d12 0.25mm,
    transparent 0.25mm,
    transparent 1.6mm
  );
}

.strip-highlighter {
  width: 100%;
  height: 100%;
  border-radius: 1.8mm 4mm 4mm 1.8mm;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0.3mm 0.8mm rgba(15,23,42,0.14);
}
.strip-highlighter-cap {
  width: 16%;
  background: #0f172a;
}
.strip-highlighter-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #0f172a;
}

.strip-washi {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0f172a;
  background: repeating-linear-gradient(
    45deg,
    #fce7f3,
    #fce7f3 4px,
    #fbcfe8 4px,
    #fbcfe8 8px
  );
  clip-path: polygon(
    0 20%, 4% 0, 8% 20%, 12% 0, 16% 20%, 20% 0, 24% 20%, 28% 0, 32% 20%, 36% 0, 40% 20%, 44% 0, 48% 20%, 52% 0, 56% 20%, 60% 0, 64% 20%, 68% 0, 72% 20%, 76% 0, 80% 20%, 84% 0, 88% 20%, 92% 0, 96% 20%, 100% 0,
    100% 80%, 96% 100%, 92% 80%, 88% 100%, 84% 80%, 80% 100%, 76% 80%, 72% 100%, 68% 80%, 64% 100%, 60% 80%, 56% 100%, 52% 80%, 48% 100%, 44% 80%, 40% 100%, 36% 80%, 32% 100%, 28% 80%, 24% 100%, 20% 80%, 16% 100%, 12% 80%, 8% 100%, 4% 80%, 0 100%
  );
}

.strip-season {
  width: 100%;
  height: 100%;
  border-radius: 2mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.2mm;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  position: relative;
}
.strip-season .emoji {
  font-size: 9pt;
  line-height: 1;
}

.strip-space {
  width: 100%;
  height: 100%;
  border-radius: 2mm;
  background: radial-gradient(circle at 20% 40%, #6366f1, #0f172a 62%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2mm;
  font-weight: 800;
}

.strip-slim {
  width: 100%;
  height: 100%;
  border-radius: 1.4mm;
  background: linear-gradient(90deg, #1d4ed8, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 7pt;
}

.cute-label,
.nature-label {
  width: 100%;
  height: 100%;
  border-radius: 3mm;
  border: 0.45mm solid;
  display: flex;
  align-items: center;
  gap: 1.6mm;
  padding: 1.2mm 1.8mm;
  background: #fff;
  overflow: hidden;
}
.cute-label .emoji,
.nature-label .emoji { font-size: 11pt; }

.cut-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}