/* =====================================================
   TEMA PASTEL GEMES - SLiMS Group 2
   Pink, Kuning, Hijau, Biru + kursor custom
   Tempel di PALING BAWAH file CSS utama template
   ===================================================== */

:root {
  --pink: #ffd1e3;
  --pink-deep: #ffb3d1;
  --yellow: #fff3b0;
  --yellow-deep: #ffe58a;
  --green: #c8f2d8;
  --green-deep: #a5e6bf;
  --blue: #cfe8ff;
  --blue-deep: #a8d4fa;
  --text: #5a4a6b;
  --text-soft: #8a7a9b;
  --white: #fffdfb;
}

/* ---------- KURSOR ---------- */
/* Kursor biasa: hati pink */
html, body, * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 28C6 20 3 14 3 10a6.5 6.5 0 0 1 13-1 6.5 6.5 0 0 1 13 1c0 4-3 10-13 18z' fill='%23ff8fba' stroke='%23ffffff' stroke-width='2'/></svg>") 8 8, auto !important;
}

/* Kursor saat di atas link/tombol: bintang kuning */
a, a *, button, button *, input[type="submit"], input[type="button"],
.btn, .btn *, .nav-link, [role="button"], select, label {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 3l4 9 10 1-7.5 6.5L25 29l-9-5-9 5 2.5-9.5L2 13l10-1z' fill='%23ffd966' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/></svg>") 16 16, pointer !important;
}

/* Kursor saat mengetik: tetap garis biasa supaya jelas */
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], textarea {
  cursor: text !important;
}

/* ---------- HALAMAN ---------- */
body {
  background: linear-gradient(160deg, var(--pink) 0%, var(--yellow) 33%, var(--green) 66%, var(--blue) 100%) fixed !important;
  color: var(--text) !important;
  font-family: "Poppins", "Quicksand", "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

p, span, li, td, th, label, small {
  color: var(--text);
}

a {
  color: #e0579a;
  transition: color .2s ease;
}
a:hover {
  color: #5aa7e8;
}

/* ---------- NAVBAR ---------- */
nav,
.navbar,
header,
header nav {
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--green), var(--blue)) !important;
  box-shadow: 0 6px 18px rgba(180, 150, 220, 0.25);
  backdrop-filter: blur(6px);
}

nav a,
.navbar a,
.navbar .nav-link,
header a {
  color: var(--text) !important;
  font-weight: 600;
  padding: 8px 16px !important;
  border-radius: 999px;
  transition: all .25s ease;
}

nav a:hover,
.navbar a:hover,
header a:hover {
  transform: translateY(-2px);
  background: var(--white) !important;
  box-shadow: 0 3px 10px rgba(150, 120, 200, 0.25);
}

nav a.active,
.navbar .active > a,
.navbar .nav-link.active {
  background: var(--white) !important;
  box-shadow: 0 2px 8px rgba(150, 120, 200, 0.3);
}

/* ---------- KOTAK PENCARIAN ---------- */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select,
.form-control {
  background: var(--white) !important;
  color: var(--text) !important;
  border: 2px solid var(--pink-deep) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(255, 179, 209, 0.25);
  transition: all .25s ease;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--blue-deep) !important;
  box-shadow: 0 0 0 4px rgba(168, 212, 250, 0.45) !important;
  outline: none !important;
}

::placeholder {
  color: var(--text-soft) !important;
  opacity: .8;
}

/* ---------- TOMBOL ---------- */
button,
.btn,
input[type="submit"],
input[type="button"] {
  background: linear-gradient(135deg, var(--pink-deep), var(--yellow-deep)) !important;
  color: var(--text) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(255, 179, 209, 0.45);
  transition: all .25s ease;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: linear-gradient(135deg, var(--green-deep), var(--blue-deep)) !important;
  transform: translateY(-2px) scale(1.03);
}

/* ---------- KARTU / KOTAK KONTEN ---------- */
.card,
.panel,
.well,
.box,
.jumbotron,
.modal-content,
.dropdown-menu,
.list-group-item,
section,
article {
  background-color: rgba(255, 253, 251, 0.85) !important;
  border: 2px solid var(--pink) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 16px rgba(180, 150, 220, 0.15);
  color: var(--text) !important;
}

/* Variasi warna kartu bergantian */
.card:nth-of-type(4n+1) { border-color: var(--pink) !important; }
.card:nth-of-type(4n+2) { border-color: var(--yellow-deep) !important; }
.card:nth-of-type(4n+3) { border-color: var(--green-deep) !important; }
.card:nth-of-type(4n+4) { border-color: var(--blue-deep) !important; }

/* ---------- TABEL ---------- */
table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
}

th {
  background: var(--blue) !important;
  color: var(--text) !important;
}

tr:nth-child(odd) td  { background: var(--white) !important; }
tr:nth-child(even) td { background: var(--yellow) !important; }
tr:hover td           { background: var(--pink) !important; }

/* ---------- PAGINATION & BADGE ---------- */
.pagination a,
.page-link,
.badge {
  background: var(--green) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  border: none !important;
}

.pagination .active a,
.page-item.active .page-link {
  background: var(--pink-deep) !important;
}

/* ---------- FOOTER ---------- */
footer,
.footer {
  background: linear-gradient(90deg, var(--blue), var(--green), var(--yellow), var(--pink)) !important;
  color: var(--text) !important;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 18px rgba(180, 150, 220, 0.2);
}

footer a,
.footer a {
  color: var(--text) !important;
  font-weight: 600;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--yellow); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--pink-deep), var(--blue-deep));
  border-radius: 999px;
  border: 2px solid var(--yellow);
}

/* ---------- SELEKSI TEKS ---------- */
::selection {
  background: var(--pink-deep);
  color: var(--text);
}