/* ============================================================
   BOSKIN — Digitalisasi Sekolah
   Gaya tambahan di atas Tailwind (CDN)
   ============================================================ */

:root {
  color-scheme: light;
  --boskin-navy: #0b1e33;
  --boskin-electric: #0066ff;
  --boskin-cyan: #00d2ff;
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(0, 102, 255, .18); color: #0b1e33; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; border: 2px solid transparent; background-clip: padding-box; }

*:focus-visible { outline: 2px solid #0066ff; outline-offset: 2px; }

.font-display { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; }

.text-balance { text-wrap: balance; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.shadow-soft { box-shadow: 0 1px 2px rgba(4, 13, 26, .04), 0 12px 32px -12px rgba(4, 13, 26, .14); }
.shadow-lift { box-shadow: 0 24px 60px -24px rgba(4, 13, 26, .35); }

.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 10%, #000 45%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 45%, transparent 78%);
}

.hero-glow {
  background:
    radial-gradient(closest-side, rgba(0, 210, 255, .30), transparent 70%),
    radial-gradient(closest-side, rgba(0, 102, 255, .38), transparent 72%);
  filter: blur(4px);
}

.bg-dots {
  background-image: radial-gradient(rgba(11, 30, 51, .10) 1px, transparent 1px);
  background-size: 18px 18px;
}

.gradient-text {
  background: linear-gradient(92deg, #33dcff 0%, #7aa7ff 48%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.surface-gradient {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(0, 210, 255, .16), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(0, 102, 255, .18), transparent 60%),
    linear-gradient(145deg, #071729 0%, #0b1e33 52%, #102a43 100%);
}

.glass-card {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ring-track { transition: stroke-dashoffset .7s cubic-bezier(.22, 1, .36, 1); }

.animate-fade-in { animation: boskinFadeIn .35s ease-out both; }
.animate-rise { animation: boskinRise .5s cubic-bezier(.22, 1, .36, 1) both; }
.delay-1 { animation-delay: .06s; }
.delay-2 { animation-delay: .12s; }
.delay-3 { animation-delay: .18s; }
.delay-4 { animation-delay: .24s; }

@keyframes boskinFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes boskinRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes boskinToastIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── toast ── */
.toast-item {
  animation: boskinToastIn .22s ease-out both;
  transition: opacity .25s ease, transform .25s ease;
}
.toast-item.is-hidden { opacity: 0; transform: translateY(-6px); }

/* ── kartu ── */
.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -20px rgba(11, 30, 51, .28); }

/* ── sidebar ── */
.sidebar-link { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.sidebar-link:hover { transform: translateX(2px); }

/* ── tabel ── */
.table-wrap { -webkit-overflow-scrolling: touch; }
.table-wrap table { border-collapse: separate; border-spacing: 0; }
.table-wrap th { white-space: nowrap; }
.table-wrap td { vertical-align: middle; }
.table-wrap tbody tr { transition: background-color .15s ease; }

/* ── dropzone ── */
.dropzone {
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.dropzone:hover, .dropzone.is-drag {
  border-color: #0066ff;
  background: #f0f6ff;
}
.dropzone.is-drag { transform: scale(.995); }

/* ── crop ── */
#crop-modal .crop-stage {
  height: min(58vh, 520px);
  background: #040d1a;
  border-radius: 14px;
  overflow: hidden;
}
#crop-modal .cropper-view-box,
#crop-modal .cropper-face { outline: 2px solid rgba(51, 220, 255, .9); }
.crop-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aspect-chip.is-active {
  background: #0066ff !important;
  color: #fff !important;
  border-color: #0066ff !important;
}

/* ── lang toggle ── */
.lang-btn[data-lang="en"] { letter-spacing: .04em; }

/* ── detail kecil ── */
.line-dot::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .5;
  margin: 0 7px 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0b1e33;
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 .6rem 0;
}
.skip-link:focus { left: 0; }

/* ── dokumen laporan ── */
.dokumen-laporan {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.55;
}
.dokumen-laporan h1, .dokumen-laporan h2, .dokumen-laporan h3 { color: #0b1e33; }
.dokumen-laporan table { width: 100%; border-collapse: collapse; }
.dokumen-laporan th, .dokumen-laporan td { border: 1px solid #cbd5e1; padding: 6px 7px; vertical-align: top; }
.dokumen-laporan thead th { background: #0b1e33; color: #fff; font-size: 10.5px; letter-spacing: .02em; }
.dokumen-laporan tbody tr:nth-child(even) td { background: #f8fafc; }
.dokumen-laporan .ttd-space { height: 72px; }
.dokumen-laporan a { color: #0052cc; text-decoration: underline; word-break: break-all; }
.dokumen-laporan table.identitas, .dokumen-laporan table.identitas td { border: 0 !important; padding: 2px 0 !important; background: transparent !important; }

/* ── cetak ── */
@media print {
  @page { size: A4 portrait; margin: 13mm 11mm; }

  html, body {
    background: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    font-size: 10.5pt;
  }
  .site-header, .site-footer, aside, .no-print, #toast-container,
  #lightbox-modal, #dev-modal, #crop-modal, #sidebar-overlay,
  .mobile-menu, .tab-sekolah, .hero-sekolah { display: none !important; }
  .app-shell, .app-body { display: block !important; height: auto !important; overflow: visible !important; }
  main { overflow: visible !important; padding: 0 !important; }
  .print-container {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  .dokumen-laporan { font-size: 9.8pt; }
  .dokumen-laporan th, .dokumen-laporan td { padding: 4px 5px; }
  .dokumen-laporan a { color: #0b1e33 !important; text-decoration: none !important; }
  .print-break { page-break-before: always; }
  .avoid-break { page-break-inside: avoid; }
  .print-only { display: block !important; }
  .shadow-sm, .shadow-md, .shadow-lg, .shadow-soft, .shadow-lift { box-shadow: none !important; }
}
.print-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}