/* ============================================================
   SIAKAD-CSF — Kartu Murid (Student ID Card) Print Styles
   ============================================================
   Format: CR80 standard (85.6mm × 54mm) — landscape
   Layout: Front (photo + identity) + Back (QR + info)
   Design: Professional, holographic, security patterns
   ============================================================ */

@page {
  size: A4 landscape;
  margin: 0;
}

* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* v2.5.3 FIX: rule ini tadinya `html, body` dan bocor ke aplikasi utama
   (file ini dimuat global untuk preview modal kartu). Kini di-scope ke
   class khusus popup cetak saja. */
body.km-print-body {
  margin: 0; padding: 0; background: #f1f5f9;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  color: #1a202c;
}

/* ============ CARD CONTAINER ============ */
.kartu-page {
  width: 297mm; height: 210mm;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 8mm; padding: 15mm;
  page-break-after: always;
  background: #fff;
}

/* ============ CARD (CR80: 85.6mm × 54mm) ============ */
.kartu {
  width: 85.6mm; height: 54mm;
  border-radius: 4mm;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  page-break-inside: avoid;
}

/* ============ FRONT SIDE ============ */
.kartu-front {
  background:
    radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 70%, #831843 100%);
  color: #fff;
}

/* Holographic strip top */
.kartu-front::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2mm;
  background: linear-gradient(90deg,
    rgba(124, 58, 237, 0.8) 0%,
    rgba(236, 72, 153, 0.8) 20%,
    rgba(34, 197, 94, 0.8) 40%,
    rgba(245, 158, 11, 0.8) 60%,
    rgba(59, 130, 246, 0.8) 80%,
    rgba(124, 58, 237, 0.8) 100%);
  z-index: 3;
}

/* Guilloché pattern overlay */
.kartu-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(255, 255, 255, 0.03) 3px, rgba(255, 255, 255, 0.03) 4px);
  z-index: 1;
  pointer-events: none;
}

/* Content */
.kartu-content {
  position: relative;
  z-index: 2;
  padding: 3mm 4mm;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Header: school name + logo */
.kartu-header {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 2mm;
}

.kartu-logo {
  width: 7mm; height: 7mm;
  border-radius: 1.5mm;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px;
  flex-shrink: 0;
}

.kartu-school {
  flex: 1; min-width: 0;
}
.kartu-school-name {
  font-size: 7pt; font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kartu-school-sub {
  font-size: 5pt;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Body: photo + identity */
.kartu-body {
  display: flex;
  gap: 3mm;
  flex: 1;
  align-items: flex-start;
}

.kartu-photo {
  width: 18mm; height: 22mm;
  border-radius: 1.5mm;
  background: linear-gradient(135deg, #c4b5fd, #f9a8d4);
  display: flex; align-items: center; justify-content: center;
  color: #6b21a8;
  font-size: 14pt;
  font-weight: 800;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  overflow: hidden;
}

.kartu-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.kartu-info {
  flex: 1;
  min-width: 0;
}

.kartu-label {
  font-size: 4.5pt;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1;
}

.kartu-value {
  font-size: 7.5pt;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.5mm 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kartu-value.large {
  font-size: 9pt;
  font-weight: 800;
}

.kartu-value.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7pt;
}

/* Footer: tahun ajaran + QR mini */
.kartu-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 1mm;
}

.kartu-tahun {
  font-size: 5pt;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.3px;
}

.kartu-qr-mini {
  width: 10mm; height: 10mm;
  background: #fff;
  border-radius: 1mm;
  padding: 0.5mm;
  display: flex; align-items: center; justify-content: center;
}
.kartu-qr-mini svg, .kartu-qr-mini img {
  width: 100%; height: 100%;
}

/* ============ BACK SIDE ============ */
.kartu-back {
  background:
    linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
  color: #1a202c;
}

.kartu-back::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2mm;
  background: linear-gradient(90deg,
    rgba(124, 58, 237, 0.8) 0%,
    rgba(236, 72, 153, 0.8) 20%,
    rgba(34, 197, 94, 0.8) 40%,
    rgba(245, 158, 11, 0.8) 60%,
    rgba(59, 130, 246, 0.8) 80%,
    rgba(124, 58, 237, 0.8) 100%);
  z-index: 3;
}

/* Magnetic strip */
.kartu-magstrip {
  position: absolute;
  top: 5mm; left: 0; right: 0;
  height: 4mm;
  background: linear-gradient(180deg, #1a1a1a, #333);
  z-index: 2;
}

.kartu-back-content {
  position: relative;
  z-index: 3;
  padding: 11mm 4mm 3mm;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 5.5pt;
}

.kartu-back-title {
  font-size: 6.5pt;
  font-weight: 800;
  color: #4c1d95;
  margin: 0 0 1mm 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kartu-back-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5mm 2mm;
  font-size: 5pt;
  color: #475569;
}

.kartu-back-info b {
  color: #1a202c;
  font-weight: 700;
}

.kartu-back-terms {
  font-size: 4pt;
  color: #94a3b8;
  line-height: 1.3;
  margin-top: 1mm;
  border-top: 0.5px solid #cbd5e1;
  padding-top: 1mm;
}

.kartu-back-signature {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.kartu-sig-line {
  border-top: 0.5px solid #475569;
  padding-top: 0.5mm;
  font-size: 3.5pt;
  color: #64748b;
  text-align: center;
  min-width: 25mm;
}

.kartu-back-qr {
  width: 12mm; height: 12mm;
  background: #fff;
  border: 0.5px solid #cbd5e1;
  padding: 0.5mm;
}
.kartu-back-qr svg, .kartu-back-qr img {
  width: 100%; height: 100%;
}

/* ============ PRINT MEDIA ============ */
@media print {
  html, body { background: #fff; margin: 0; padding: 0; }
  .kartu-page { box-shadow: none; padding: 0; gap: 0; }
  .no-print { display: none !important; }
}

/* ============ SCREEN PREVIEW (hanya popup cetak — v2.5.3) ============
   v2.5.3 FIX: tadinya `body { padding: 20px; background: #e2e8f0 }` —
   karena stylesheet ini dimuat global, rule itu menambah bingkai 20px
   di semua tepi aplikasi utama. Kini hanya berlaku di body popup cetak. */
@media screen {
  body.km-print-body { background: #e2e8f0; padding: 20px; }
  body.km-print-body .kartu-page {
    margin: 0 auto 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 4mm;
  }
}

/* ============ ADMIN GRID VIEW ============ */
.kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.kartu-grid-item {
  text-align: center;
}

.kartu-grid-item .kartu {
  margin: 0 auto 8px;
  transform: scale(0.85);
  transform-origin: top center;
}

.kartu-grid-item .kartu-actions {
  margin-top: -8mm;
}

.kartu-grid-item .kartu-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.kartu-grid-item .kartu-meta {
  font-size: 10px;
  color: var(--text-muted);
}