:root {
  --sisma-brand-start: #7367f0;
  --sisma-brand-end: #00bad1;
  --sisma-breadcrumb-gap: 1rem;
  --sisma-page-gap: 1.5rem;
  --sisma-surface-padding: 1.5rem;
}

.sisma-brand-mark {
  align-items: center;
  background: linear-gradient(135deg, var(--sisma-brand-start), var(--sisma-brand-end));
  border-radius: 0.625rem;
  color: #fff;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  letter-spacing: -0.04em;
  width: 2rem;
}

.sisma-brand-logo {
  border-radius: 0.625rem;
  height: 2rem;
  object-fit: contain;
  width: 2rem;
}

.sisma-brand-preview {
  background: color-mix(in srgb, var(--sisma-preview-primary) 6%, var(--bs-body-bg));
}

.sisma-brand-preview-logo {
  align-items: center;
  background: var(--sisma-preview-primary);
  border-radius: 0.75rem;
  color: #fff;
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 700;
  height: 3rem;
  justify-content: center;
  overflow: hidden;
  width: 3rem;
}

.sisma-brand-preview-logo img {
  background: var(--bs-body-bg);
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.sisma-brand-preview-button {
  background: var(--sisma-preview-primary);
  color: #fff;
}

.sisma-brand-preview-button:hover,
.sisma-brand-preview-button:focus {
  background: color-mix(in srgb, var(--sisma-preview-primary) 84%, #000);
  color: #fff;
}

.sisma-auth-copy {
  max-width: 30rem;
}

.sisma-auth-illustration {
  max-height: 70vh;
  max-width: min(36rem, 80%);
  object-fit: contain;
}

.sisma-foundation-card {
  border: 1px solid color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

.sisma-page-breadcrumb {
  margin-block: 0 var(--sisma-breadcrumb-gap);
  min-height: 1.25rem;
}

.sisma-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--sisma-page-gap);
  min-width: 0;
}

/* Vuexy mengubah header tabel dan kelompok menu menjadi huruf kapital penuh. */
body[data-sisma-title-case] .table th,
body[data-sisma-title-case] .menu-header .menu-header-text {
  text-transform: none;
}

.sisma-page-content > :where(section, article, .card, .alert, [id]) {
  margin-block: 0 !important;
  min-width: 0;
}

.sisma-page-content > [id] {
  display: flex;
  flex-direction: column;
  gap: var(--sisma-page-gap);
}

.sisma-page-content > [id] > :where(section:not(.row), article:not(.row), .card, .alert) {
  margin-block: 0 !important;
}

.sisma-page-content .card-header,
.sisma-page-content .card-body,
.sisma-page-content .card-footer,
#sisma-modal .modal-header,
#sisma-modal .modal-body {
  padding: var(--sisma-surface-padding);
}

#sisma-modal .modal-body .card-header,
#sisma-modal .modal-body .card-body,
#sisma-modal .modal-body .card-footer {
  padding: var(--sisma-surface-padding);
}

#sisma-modal .modal-body .row {
  --bs-gutter-y: 1rem;
}

.sisma-page-breadcrumb .breadcrumb {
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sisma-navbar-year {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.sisma-navbar-user {
  line-height: 1.2;
  max-width: 14rem;
}

.sisma-navbar-user > span {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sisma-navbar-avatar {
  background: var(--bs-body-bg);
  object-fit: contain;
  padding: 0.2rem;
}

/* KP-364: avatar tanpa foto = lingkaran inisial nama (avatar_inisial_html() / navbar) */
.sisma-avatar-inisial {
  display: inline-block;
  cursor: inherit;
}

.sisma-navbar-inisial {
  font-size: 0.9375rem;
}

.sisma-rombel-unit-filter {
  width: min(100%, 11rem);
}

.sisma-rombel-submit {
  padding-top: 1.72rem;
}

.sisma-rombel-stepper .bs-stepper-header {
  min-width: 16rem;
}

.sisma-rombel-stepper .bs-stepper-content {
  min-width: 0;
}

.sisma-student-filter {
  width: min(100%, 18rem);
}

.sisma-student-search {
  flex: 1 1 20rem;
  max-width: 30rem;
}

.sisma-mapel-search {
  flex: 1 1 20rem;
  max-width: 30rem;
}

.sisma-mapel-unit-filter {
  width: min(100%, 12rem);
}

.sisma-student-rombel {
  min-width: 13rem;
}

.sisma-student-address {
  min-width: 18rem;
  white-space: normal;
}

.sisma-student-status-filter {
  width: min(100%, 18rem);
}

.sisma-student-status-select,
.sisma-student-status-date {
  max-width: 14rem;
}

.sisma-employee-unit-filter {
  width: min(100%, 18rem);
}

.sisma-employee-search {
  flex: 1 1 20rem;
  max-width: 30rem;
  min-width: 14rem;
}

.sisma-employee-address {
  min-width: 18rem;
  white-space: normal;
}

.sisma-employee-photo {
  aspect-ratio: 4 / 5;
  background: var(--bs-secondary-bg);
  max-width: 14rem;
  object-fit: cover;
  width: 100%;
}

.sisma-employee-summary > div {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
  padding-block: 0.45rem;
}

.sisma-employee-summary dt {
  color: var(--bs-secondary-color);
  font-weight: 500;
}

.sisma-employee-summary dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sisma-employee-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.sisma-employee-tabs .nav-link {
  white-space: nowrap;
}

.sisma-employee-tab-content {
  min-height: 24rem;
}

.sisma-employee-document-preview {
  background: var(--bs-secondary-bg);
  height: 12rem;
  object-fit: contain;
  width: 100%;
}

.sisma-employee-log-data {
  display: inline-block;
  max-width: 24rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sisma-table-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sisma-table-toolbar .sisma-table-export {
  margin-inline-start: auto;
}

.sisma-table-toolbar .dt-buttons {
  display: inline-flex;
}

.dt-container > .sisma-datatable-controls,
.dt-container > .sisma-datatable-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
  margin: 0 !important;
  padding: 0.5rem var(--sisma-surface-padding);
}

.dt-container > .sisma-datatable-controls {
  border-bottom: 1px solid var(--bs-border-color);
}

.dt-container > .sisma-datatable-footer {
  border-top: 1px solid var(--bs-border-color);
}

.dt-container > .dt-layout-table {
  margin: 0 !important;
}

.dt-container .sisma-datatable-controls .dt-layout-cell,
.dt-container .sisma-datatable-footer .dt-layout-cell {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.dt-container .sisma-datatable-controls .dt-layout-start > *,
.dt-container .sisma-datatable-controls .dt-layout-end > * {
  margin: 0 !important;
}

.dt-container .sisma-datatable-controls .dt-length,
.dt-container .sisma-datatable-controls .dt-search {
  margin-block: 0;
}

.dt-container .sisma-datatable-controls .dt-length label {
  align-items: center;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.5rem;
  margin: 0;
}

.dt-container .sisma-datatable-controls .dt-length select {
  margin: 0 !important;
  min-width: 4.75rem;
}

.dt-container .sisma-datatable-controls .dt-search {
  width: min(15rem, 100%);
}

.dt-container .sisma-datatable-controls .dt-search label {
  display: block;
  margin: 0;
  width: 100%;
}

.dt-container .sisma-datatable-controls .dt-search input {
  margin: 0 !important;
  width: 100%;
}

.dt-container .dt-scroll-body {
  overscroll-behavior: contain;
}

.dt-container .dt-scroll {
  position: relative;
}

table.dataTable .sisma-sticky-action {
  border-inline-start: 1px solid var(--bs-border-color);
  box-shadow: -0.35rem 0 0.75rem -0.75rem rgba(47, 43, 61, 0.45);
  min-width: 7rem;
}

table.dataTable thead tr > .dtfc-fixed-end,
table.dataTable tfoot tr > .dtfc-fixed-end {
  background: var(--bs-paper-bg) !important;
  background-clip: padding-box !important;
  z-index: 4;
}

table.dataTable tbody tr > .dtfc-fixed-end {
  background: var(--bs-paper-bg) !important;
  background-clip: padding-box !important;
  isolation: isolate;
  z-index: 2;
}

table.dataTable tbody tr:hover > .dtfc-fixed-end {
  background: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-paper-bg)) !important;
}

/* Sel Opsi yang menunya sedang terbuka harus naik di atas sel baris lain.

   `isolation: isolate` di atas membuat SETIAP sel Opsi menjadi konteks tumpukan
   tersendiri — dan itu memang perlu supaya latar buramnya bekerja. Akibatnya
   `z-index: 1000` milik .dropdown-menu terkurung di dalam selnya sendiri: ia
   tidak pernah dapat naik melewati sel baris di bawahnya, yang sama-sama
   ber-z-index 2 dan digambar belakangan karena urutan DOM. Hasilnya menu
   tertimpa tombol-tombol baris berikutnya, dan tidak ada satu galat pun yang
   memberitahukannya — hanya terlihat oleh mata.

   Nilainya 6, di atas 4 milik thead/tfoot, supaya menu yang membuka ke ATAS
   (Popper membalikkannya bila ruang di bawah habis) juga tidak tertimpa kepala
   tabel yang menempel. */
table.dataTable tbody tr > .dtfc-fixed-end:has(.dropdown-menu.show),
table.dataTable tbody tr > .sisma-sticky-action:has(.dropdown-menu.show) {
  z-index: 6;
}

.dt-scroll .dtfc-top-blocker,
.dt-scroll .dtfc-bottom-blocker {
  background: var(--bs-paper-bg);
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

/* Form/detail panjang menggulir pada lapisan halaman modal, bukan di dalam modal-body. */
#sisma-modal.sisma-modal-page-scroll {
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: 1px;
  --sisma-modal-edge-gap: clamp(0.75rem, 1.5vw, 1.75rem);
  overflow-x: hidden;
  overflow-y: auto;
}

#sisma-modal .modal-header {
  padding-bottom: 1rem;
}

#sisma-modal.sisma-modal-page-scroll .modal-dialog {
  margin-block: 1.75rem;
}

#sisma-modal.sisma-modal-page-scroll .modal-dialog .modal-content {
  height: auto;
  min-height: 0;
}

#sisma-modal.sisma-modal-page-scroll .modal-dialog.modal-fullscreen {
  height: auto;
  margin: var(--sisma-modal-edge-gap) auto;
  max-width: calc(100% - var(--sisma-modal-edge-gap) - var(--sisma-modal-edge-gap));
  min-height: calc(100% - var(--sisma-modal-edge-gap) - var(--sisma-modal-edge-gap));
  width: calc(100% - var(--sisma-modal-edge-gap) - var(--sisma-modal-edge-gap));
}

#sisma-modal.sisma-modal-page-scroll .modal-dialog.modal-fullscreen .modal-content {
  border-radius: var(--bs-modal-border-radius);
  box-shadow: var(--bs-modal-box-shadow);
  min-height: calc(100vh - var(--sisma-modal-edge-gap) - var(--sisma-modal-edge-gap));
}

#sisma-modal.sisma-modal-page-scroll .modal-body {
  max-height: none;
  overflow: visible;
}

#dashboard-calendar {
  max-width: 100%;
  min-height: 35rem;
  min-width: 0;
}

.sisma-calendar-shell {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* CSS bawaan Vuexy memberi margin negatif untuk kalender pada card-body polos.
   Dashboard memakai shell sendiri, sehingga margin tersebut harus dinetralkan. */
#dashboard-calendar .fc-view-harness {
  margin-inline: 0;
}

#dashboard-calendar .fc-toolbar-title {
  font-size: 1.25rem;
}

#dashboard-calendar .fc-button-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

#dashboard-calendar .fc-button-primary:not(:disabled):hover,
#dashboard-calendar .fc-button-primary:not(:disabled):focus,
#dashboard-calendar .fc-button-primary:not(:disabled).fc-button-active {
  background-color: color-mix(in srgb, var(--bs-primary) 84%, #000);
  border-color: color-mix(in srgb, var(--bs-primary) 84%, #000);
}

.sisma-calendar-event-editable {
  cursor: pointer;
}

#dashboard-calendar .sisma-calendar-event,
#dashboard-calendar .sisma-calendar-event .fc-event-main,
#dashboard-calendar .sisma-calendar-event .fc-event-title,
#dashboard-calendar .sisma-calendar-event .fc-event-time {
  color: inherit !important;
}

#dashboard-calendar .sisma-calendar-event {
  font-weight: 600;
}

#dashboard-calendar .fc-prev-button,
#dashboard-calendar .fc-next-button {
  align-items: center;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--bs-heading-color) !important;
  display: inline-flex !important;
  flex: 0 0 2.5rem;
  justify-content: center;
  height: 2.5rem;
  padding: 0 !important;
  width: 2.5rem;
}

#dashboard-calendar .fc-prev-button:hover,
#dashboard-calendar .fc-next-button:hover {
  background: var(--bs-secondary-bg) !important;
}

#dashboard-calendar .fc-prev-button svg,
#dashboard-calendar .fc-next-button svg {
  fill: none;
  height: 1.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  width: 1.25rem;
}

#dashboard-calendar .fc-daygrid-block-event .fc-event-main {
  padding: 0.125rem 0.35rem;
}

.menu-link:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
  outline: 0.2rem solid color-mix(in srgb, var(--bs-primary) 45%, transparent);
  outline-offset: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 767.98px) {
  :root {
    --sisma-breadcrumb-gap: 0.75rem;
    --sisma-page-gap: 1rem;
    --sisma-surface-padding: 1rem;
  }

  #sisma-modal.sisma-modal-page-scroll .modal-dialog {
    margin-block: 0.75rem;
  }

  #sisma-modal.sisma-modal-page-scroll {
    --sisma-modal-edge-gap: 0.5rem;
  }

  #dashboard-calendar {
    min-height: 28rem;
  }

  #dashboard-calendar .fc-header-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  #dashboard-calendar .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }

  .sisma-rombel-submit {
    padding-top: 0;
  }

  .sisma-rombel-stepper {
    flex-direction: column;
  }

  .sisma-rombel-stepper .bs-stepper-header {
    border-bottom: 1px solid var(--bs-border-color);
    border-right: 0;
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .sisma-table-toolbar .sisma-table-export {
    margin-inline-start: 0;
  }

  .sisma-calendar-filters {
    border-bottom: 1px solid var(--bs-border-color);
  }
}
.layout-menu {
  display: flex;
  flex-direction: column;
}

.layout-menu > .menu-inner {
  flex: 1 1 auto;
  min-height: 0;
}

.sisma-sidebar-footer {
  flex: 0 0 auto;
  background: var(--bs-body-bg);
}

.sisma-sidebar-footer .menu-link {
  border: 0;
  color: var(--bs-danger);
}

.sisma-sidebar-footer .menu-link:hover,
.sisma-sidebar-footer .menu-link:focus-visible {
  color: var(--bs-danger);
  background: color-mix(in srgb, var(--bs-danger) 10%, transparent);
}

/* === Menu diciutkan: ikon saja, mengembang saat di-hover (pola Vuexy) ===
   Lebar ciut (70px) & mengembang (260px saat hover) sudah ditangani core.css
   + helpers.js (menambah kelas `.layout-menu-hover` pada <html> ketika kursor
   di atas menu). Namun struktur sidebar kustom SISMA memakai <span> untuk teks
   menu sehingga teks tidak ikut disembunyikan core.css. Aturan berikut menutup
   celah itu: teks, nama sistem, header, & submenu disembunyikan saat ciut dan
   TIDAK sedang di-hover; ketika di-hover (`.layout-menu-hover`) semuanya tampil
   kembali mengikuti pelebaran native. */
/* display:none (bukan visibility) agar elemen teks tak menyisakan ruang flex
   yang menggeser/memotong ikon saat menu sempit. */
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-text,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-link > span,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-header .menu-header-text,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .sisma-sidebar-footer .menu-link span,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-sub,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-toggle::after,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand .layout-menu-toggle {
  display: none;
}

/* Pusatkan ikon & logo: buang padding horizontal menu-link + margin ikon. */
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-link,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner .menu-link {
  justify-content: center;
  padding-inline: 0;
}

.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-icon {
  margin-inline-end: 0;
}

/* ------------------------------------------------------------------
   Warna penanda sel jadwal.

   Palet siap pilih pada form "Isi jadwal" — dulu hanya pemilih warna
   bawaan peramban, yang menuntut operator menggeser-geser roda warna
   untuk sesuatu yang sebenarnya cukup sepuluh pilihan.
   ------------------------------------------------------------------ */
.sisma-swatch {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .375rem;
  border: 1px solid rgba(0, 0, 0, .18);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
}

.sisma-swatch:hover {
  transform: translateY(-1px);
}

.sisma-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff), 0 0 0 4px var(--bs-primary, #7367f0);
}

/* Centang pada warna terpilih; warnanya gelap karena seluruh palet terang. */
.sisma-swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .45rem;
  height: .75rem;
  border: solid #191a21;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -2px);
}

.sisma-swatch-lain {
  width: 2.4rem;
  height: 1.9rem;
  padding: .1rem;
  border-radius: .375rem;
}

/* Sel jadwal yang diberi warna latar selalu berteks gelap. Latarnya dipilih
   dari palet yang seluruhnya terang, sedangkan warna teks bawaan mengikuti
   tema — pada tema gelap teks terang di atas latar terang tidak terbaca. */
.sisma-cell-warna,
.sisma-cell-warna .text-body-secondary,
.sisma-cell-warna small {
  color: #191a21 !important;
}

.sisma-cell-warna .text-body-secondary,
.sisma-cell-warna small {
  opacity: .72;
}

/* ------------------------------------------------------------------
   Penanda `bg-label-*`: warna teksnya disetel ulang demi keterbacaan.

   Tema ini membangun penanda sebagai `background: 84% warna kertas + 16%
   warna aksen` dengan `color: <warna aksen mentah>`. Aksen yang jenuh di
   atas semburat tipis dirinya sendiri hampir selalu berkontras rendah, dan
   tidak ada satu varian pun yang mencapai ambang WCAG AA 4.5:1. Diukur
   langsung di peramban pada kedua tema (rasio SEBELUM):

     tema terang  warning 1.82 · success 1.94 · info 2.03 · gray 2.55 ·
                  danger 2.70 · secondary 3.17
     tema gelap   primary 1.58 (praktis tak terbaca) · secondary 2.72 ·
                  danger 3.22 · gray 3.27 · info 4.07 · success 4.26

   Perbaikannya di sini, BUKAN dengan mengganti pemakaiannya: `bg-label-*`
   dipakai 277 kali pada 84 berkas view, dan sebagiannya dibangun dinamis
   (`bg-label-<?= $warna ?>`) sehingga penggantian satu per satu pasti bocor
   lagi pada kode berikutnya. Latarnya sengaja TIDAK diubah — hanya tintanya
   yang digelapkan (tema terang) atau diterangkan (tema gelap) secukupnya.

   Sesudahnya, kedelapan varian melewati 4.5:1 dengan margin:
     tema terang  warning 4.65 · success 4.88 · info 5.04 · gray 5.95 ·
                  danger 6.21 · secondary 6.90 · primary 9.80 · dark 12.27
     tema gelap   primary 4.80 · dark 5.37 · danger 5.65 · secondary 5.70 ·
                  gray 5.97 · info 6.09 · success 6.25 · warning 6.47

   Varian `light` dan merek sosial (facebook, slack, dan kawan-kawan)
   sengaja DILUAR aturan ini: aplikasi tidak memakainya, dan aksennya yang
   sudah mendekati putih/hitam justru MEMBURUK bila dicampur seragam
   (`light` 5.00 → 3.49 pada tema terang, `slack` → 4.14 pada tema gelap).

   `color-mix()` aman dipakai di sini: tema itu sendiri sudah memakainya untuk
   LATAR penanda yang sama, jadi tidak ada syarat peramban baru yang dibawa
   masuk aturan ini.

   Angkanya satu per tema; menyetelnya kembali cukup mengubah dua nilai. */
:root,
[data-bs-theme='light'] {
  --sisma-label-ink-amount: 60%;
  --sisma-label-ink-base: #000;
}

[data-bs-theme='dark'] {
  --sisma-label-ink-amount: 50%;
  --sisma-label-ink-base: #fff;
}

.bg-label-primary {
  color: color-mix(in sRGB, var(--bs-primary) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-secondary {
  color: color-mix(in sRGB, var(--bs-secondary) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-success {
  color: color-mix(in sRGB, var(--bs-success) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-info {
  color: color-mix(in sRGB, var(--bs-info) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-warning {
  color: color-mix(in sRGB, var(--bs-warning) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-danger {
  color: color-mix(in sRGB, var(--bs-danger) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-dark {
  color: color-mix(in sRGB, var(--bs-dark) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

.bg-label-gray {
  color: color-mix(in sRGB, var(--bs-gray) var(--sisma-label-ink-amount), var(--sisma-label-ink-base)) !important;
}

/* Keadaan hover memakai latar aksen PADAT dengan teks kontrasnya sendiri,
   jadi ia tidak boleh ikut disetel. Kekhususan selektor bawaan tema sudah
   lebih tinggi daripada aturan di atas, tetapi disebut di sini supaya
   penyunting berikutnya tidak menyamakan keduanya. */