/* CSS milik aplikasi. Seminimal mungkin — utamakan komponen AdminLTE/Bootstrap
   yang sudah ada sebelum menambah aturan baru di sini. */

/* Inisial pengganti foto profil. Aplikasi tidak menyimpan foto pengguna;
   kalau nanti Keycloak menyediakannya, ganti elemen ini dengan <img>. */
.avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--bs-primary);
  border-radius: 50%;
}

/* Menandai field yang hanya boleh dilihat ADMIN/DEVELOPER. Penanda ini murni
   visual — penyembunyian sesungguhnya terjadi di server (lihat poin 5
   CLAUDE.md), bukan lewat CSS. */
.field-sensitive {
  border-left: 3px solid var(--bs-warning);
  padding-left: 0.6rem;
}

.brand-image.bi {
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 0.5rem;
}

/* Nilai monospace untuk URL, versi, dan potongan konfigurasi. */
.value-mono {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  /* anywhere hanya memotong saat benar-benar tidak muat, tidak seperti
     break-all yang memotong di tengah kata meski masih ada ruang. */
  overflow-wrap: anywhere;
}

/* Dipakai di kolom tabel yang sempit: lebih baik terpotong dengan elipsis
   daripada patah di tengah alamat sehingga sulit dibaca. */
.value-nowrap {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Wadah untuk HTML buatan pengguna (fitur & "Tentang Aplikasi"). Isinya sudah
   disaring safeHTML; aturan di sini hanya merapikan jarak agar tidak merusak
   tata letak kartu. */
.rich-text > *:last-child {
  margin-bottom: 0;
}

.rich-text ul,
.rich-text ol {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.rich-text table {
  width: 100%;
  margin-bottom: 0.5rem;
}

.rich-text th,
.rich-text td {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bs-border-color);
}