/* ══════════════════════════════════════════════════════════
   assets/css/tool-page.css
   Layout dasar untuk semua halaman tool.
   Menggunakan CSS variables dari css/style.css (dark theme).
   Style SPESIFIK per-tool (.pkppk, .pkfoam, dll) tetap
   berada di file tool masing-masing sebagai <style> scoped.
   ══════════════════════════════════════════════════════════ */

/* ── Reset Minimal ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Body Tool ── */
body {
  background: var(--bg-base, #080d14);
  color: var(--tx-1, #e8edf5);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── Wrapper Halaman Tool ── */
.tool-page {
  min-height: calc(100vh - 72px);
  padding: 36px 0 80px;
}

/* ── Override Bootstrap card agar ikut dark theme ── */
.card {
  --bs-card-bg: var(--bg-card, #141c2b);
  --bs-card-border-color: rgba(255, 255, 255, 0.07);
  --bs-card-color: var(--tx-1, #e8edf5);
  background: var(--bg-card, #141c2b);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--tx-1, #e8edf5);
}

/* ── Form Controls → dark ── */
.form-control,
.form-select {
  background-color: var(--bg-card2, #1e2d42);
  color: var(--tx-1, #e8edf5);
  border-color: rgba(255, 255, 255, 0.07);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-card, #141c2b);
  color: var(--tx-1, #e8edf5);
  border-color: var(--teal, #3abecc);
  box-shadow: 0 0 0 3px rgba(58, 190, 204, 0.15);
}
.form-control::placeholder {
  color: var(--tx-2, #8a9bb5);
  opacity: .7;
}
.form-label {
  color: var(--tx-2, #8a9bb5);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Navbar tweaks untuk tool-page ── */
#mainNavbar .nav-link.active {
  background: rgba(230, 57, 70, 0.12) !important;
  border-color: rgba(230, 57, 70, 0.35) !important;
  color: #fff !important;
}

/* ── Back to top ── */
.back-to-top {
  display: none;
}