/* ============================================================================
   STYLE.CSS
   Berisi gaya tambahan yang tidak tersedia langsung dari utility class
   Tailwind (mis. state aktif tombol, animasi toast, tabel state 4x4).
   ========================================================================== */

/* ---------- Tombol Mode (Encrypt / Decrypt) & Tipe Input (Teks / Hex) ---------- */
.mode-btn, .type-btn {
  color: #64748b; /* slate-500 */
}
.mode-btn-active, .type-btn-active {
  background-color: #0f172a; /* slate-900 */
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ---------- Tabel State Matrix 4x4 ---------- */
.state-table {
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.state-table td {
  width: 2.75rem;
  height: 2.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background-color: #fafafa;
}

/* ---------- Panah antar tahap proses ---------- */
.flow-arrow {
  display: flex;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.1rem;
  padding: 0.15rem 0;
}

/* ---------- Accordion ---------- */
.accordion-header {
  cursor: pointer;
  user-select: none;
}
.accordion-chevron {
  transition: transform 0.2s ease;
}
.accordion-open .accordion-chevron {
  transform: rotate(180deg);
}
.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.accordion-open .accordion-body {
  max-height: none;
}

/* ---------- Badge warna tiap operasi AES ---------- */
.badge-subbytes     { background-color: #dbeafe; color: #1d4ed8; } /* biru */
.badge-shiftrows     { background-color: #dcfce7; color: #15803d; } /* hijau */
.badge-mixcolumns    { background-color: #fef9c3; color: #a16207; } /* kuning */
.badge-addroundkey   { background-color: #fee2e2; color: #b91c1c; } /* merah */
.badge-keyexpansion  { background-color: #f3e8ff; color: #7e22ce; } /* ungu */
.badge-final         { background-color: #d1fae5; color: #047857; } /* emerald */
.badge-round         { background-color: #e2e8f0; color: #334155; } /* netral abu untuk header ronde */

.border-l-subbytes   { border-left-color: #3b82f6; }
.border-l-shiftrows   { border-left-color: #22c55e; }
.border-l-mixcolumns  { border-left-color: #eab308; }
.border-l-addroundkey { border-left-color: #ef4444; }
.border-l-keyexpansion{ border-left-color: #a855f7; }
.border-l-final       { border-left-color: #10b981; }

/* ---------- Toast animasi ---------- */
#toast {
  animation: toastIn 0.2s ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Scrollbar tipis untuk daftar word W0-W43 ---------- */
.thin-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }