/**
 * ============================================================================
 * Copyright (c) 2026 BAWASLU-M FH ULM. All Rights Reserved.
 * Badan Pengawas Pemilihan Umum Mahasiswa
 * Fakultas Hukum, Universitas Lambung Mangkurat
 *
 * PROPRIETARY & CONFIDENTIAL SOURCE CODE
 * ----------------------------------------------------------------------------
 * This software, web application, source code, scripts, styles, architecture,
 * and associated assets are the exclusive intellectual property of BAWASLU-M FH ULM.
 *
 * Any unauthorized copying, reproduction, distribution, scraping, decompilation,
 * reverse engineering, modification, or appropriation of this source code,
 * in whole or in part, is strictly prohibited and deemed highly unethical under
 * institutional, academic, and applicable intellectual property legal frameworks.
 * ============================================================================
 */

.pinboard-container {
  position: relative;
  background-color: var(--bg-cork);
  background-image:
    radial-gradient(circle at center, transparent 35%, rgba(10, 14, 10, 0.75) 100%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  border-bottom: 6px solid var(--ink-primary);
  overflow: hidden;
  padding: var(--space-8) var(--space-4) var(--space-16);
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pinboard-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-spotlight);
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle 340px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 250, 230, 0.35) 0%,
    rgba(255, 250, 230, 0.1) 40%,
    transparent 70%
  );
  transition: opacity var(--transition-fast);
}

.pinboard-strings-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-string);
}

.pinboard-stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
  z-index: var(--z-paper);
}

.dossier-folder {
  position: relative;
  background: var(--bg-paper-cream);
  border: var(--border-ink-thick);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pinned), 8px 8px 0px var(--ink-primary);
  padding: var(--space-8);
  transition: transform var(--transition-smooth);
}

.dossier-folder::before {
  content: "BERKAS PERKARA PEMILUMA 2026";
  position: absolute;
  top: -18px;
  left: 24px;
  background: var(--bg-folder-manila);
  border: var(--border-ink);
  border-bottom: none;
  font-family: var(--font-typewriter);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.9rem 0.1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink-primary);
  z-index: 2;
}

.torn-paper {
  position: relative;
  background: var(--bg-paper-light);
  border: var(--border-ink);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-paper);
}

.push-pin {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: var(--z-pin-head);
  cursor: grab;
  box-shadow: var(--shadow-pin-3d);
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  transition: transform var(--transition-bounce);
}

.push-pin:hover {
  transform: scale(1.25) rotate(-10deg);
}

.push-pin.pin-red {
  background: radial-gradient(circle at 35% 35%, #FF7676 0%, #D13E3E 60%, #7E1818 100%);
}

.push-pin.pin-yellow {
  background: radial-gradient(circle at 35% 35%, #FFF089 0%, #F4C430 60%, #997200 100%);
}

.push-pin.pin-blue {
  background: radial-gradient(circle at 35% 35%, #76A9FF 0%, #2A52BE 60%, #102B73 100%);
}

.scotch-tape {
  position: absolute;
  height: 22px;
  width: 70px;
  background: var(--tape-color);
  backdrop-filter: blur(1px);
  border: 1px dashed rgba(180, 170, 140, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: var(--z-pinned);
  opacity: 0.88;
}

.polaroid-card {
  position: relative;
  background: var(--bg-card-pure);
  padding: 12px 12px 28px 12px;
  border: var(--border-ink);
  box-shadow: var(--shadow-pinned);
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.polaroid-card:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.03) !important;
  box-shadow: var(--shadow-paper-hover);
  z-index: 25;
}

.polaroid-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--ink-primary);
  filter: contrast(1.05) saturate(0.95);
}

.polaroid-caption {
  font-family: var(--font-typewriter);
  font-size: var(--text-xs);
  color: var(--ink-primary);
  margin-top: 8px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sticky-note {
  position: relative;
  padding: var(--space-4);
  border: var(--border-ink);
  box-shadow: var(--shadow-paper), 3px 3px 0px rgba(0, 0, 0, 0.12);
  font-family: var(--font-typewriter);
  font-size: var(--text-sm);
  line-height: 1.45;
  transition: transform var(--transition-smooth);
}

.sticky-yellow {
  background: #FFF9D2;
  color: #383000;
}

.sticky-sage {
  background: var(--brand-sage-soft);
  color: var(--brand-sage-dark);
}

.sticky-blue {
  background: #E1EDFF;
  color: #0A3274;
}

.sticky-red {
  background: #FFE3E3;
  color: #7A0C0C;
}

.string-preview {
  height: 2px;
  background: var(--string-red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform-origin: left center;
}