.boilerplate-logo {
  width: 100%;
  height: 38px;
  object-fit: contain
}

.app-brand-link {
  flex: 1 1 auto;
  min-width: 0
}

.app-brand-logo.demo {
  width: 100% !important;
  flex: 1 1 auto;
  min-width: 0
}

.app-brand-text {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.sidebar-core-status {
  margin: auto 1rem 1rem;
  padding: 1rem;
  border-radius: .5rem;
  background: var(--bs-gray-100)
}

[data-bs-theme=dark] .sidebar-core-status {
  background: rgba(255, 255, 255, .05)
}

.auth-illustration {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #f5f5f9
}

.auth-cover-image {
  width: 100%;
  height: 100vh;
  object-fit: cover
}

.auth-cover-copy {
  position: absolute;
  left: 8%;
  bottom: 9%;
  max-width: 440px;
  padding: 1.5rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 .5rem 1.5rem rgba(34, 48, 62, .12)
}

.login-logo {
  width: 74px;
  height: 74px;
  object-fit: contain
}

.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600
}

.page-title-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem
}

.table td {
  vertical-align: middle
}

.table .form-control,
.table .form-select {
  min-width: 130px
}

.table .form-control+.form-control {
  margin-top: .4rem
}

.card-header-title {
  display: flex;
  align-items: center;
  gap: .75rem
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  font-size: 1.4rem
}

.dashboard-welcome {
  background: linear-gradient(135deg, #696cff, #8c8fff);
  color: #fff;
  overflow: hidden
}

.dashboard-welcome .text-muted {
  color: rgba(255, 255, 255, .75) !important
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: #a1acb8
}

.permission-table th:not(:first-child),
.permission-table td:not(:first-child) {
  text-align: center
}

.permission-table input {
  width: 1.15rem;
  height: 1.15rem
}

.branding-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  overflow: hidden
}

.branding-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.form-control-color {
  min-width: 3rem !important;
  padding: .35rem
}

.theme-sample {
  border: 1px solid rgba(128, 128, 128, .25)
}

@media(max-width:991.98px) {
  .authentication-bg {
    min-height: 100vh
  }

  .sidebar-core-status {
    display: none
  }
}

@media(max-width:767.98px) {
  .container-p-y {
    padding-top: 1rem !important
  }

  .card-header {
    align-items: flex-start !important;
    gap: .75rem
  }

  .table-responsive .table {
    min-width: 760px
  }
}

/* Custom Sidebar Collapse Button at the bottom (GitLab Style) */
.sidebar-collapse-container {
  transition: all 0.2s ease-in-out;
}

.sidebar-collapse-container a {
  color: var(--bs-heading-color) !important;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.sidebar-collapse-container a:hover {
  opacity: 1;
}

/* Collapsed sidebar styling overrides */
.layout-menu-collapsed .collapse-text {
  display: none !important;
}

/* Rotate a plus icon into an X when its target collapse is expanded */
.icon-toggle-rotate {
  display: inline-block;
  transition: transform 0.25s ease;
}

.icon-toggle-rotate.is-rotated {
  transform: rotate(45deg);
}

.layout-menu-collapsed .collapse-arrow-icon:before {
  content: "\eb2c" !important;
  /* bx-last-page (-->|) */
}

.layout-menu-collapsed .sidebar-collapse-container {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  text-align: center;
}

/* Page Load Fade-In Animation (Content Area Only) */
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#pageMainContent {
  animation: contentFadeIn 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Panel-switch transitions (e.g. list <-> shared add/edit form) — the incoming panel slides in
   from the right when moving "forward" (opening a form) and from the left when moving "back"
   (returning to the list), like a stack navigation push/pop. */
@keyframes panelSlideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes panelSlideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}
.panel-slide-in-right {
  animation: panelSlideInRight 0.28s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.panel-slide-in-left {
  animation: panelSlideInLeft 0.28s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

/* Hide Template Customizer Button */
.template-customizer-open-btn {
  display: none !important;
}

/* Premium Dashboard Enhancements */
.card-hover-effect {
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(34, 48, 62, 0.08);
}
.dashboard-stat-card {
  border: none;
  background-color: var(--bs-paper-bg);
}
.trend-card {
  box-shadow: 0 4px 12px rgba(34, 48, 62, 0.03);
  border: none;
  border-radius: 0.75rem;
}
.dashboard-welcome-grad {
  background: linear-gradient(135deg, #696cff 0%, #3f42b3 100%) !important;
  border: none;
}
.dashboard-welcome-sales {
  background: linear-gradient(135deg, #03c3ec 0%, #02829e 100%) !important;
  border: none;
}
.dashboard-welcome-keuangan {
  background: linear-gradient(135deg, #71dd37 0%, #44911d 100%) !important;
  border: none;
}
.dashboard-welcome-direktur {
  background: linear-gradient(135deg, #ff3e1d 0%, #b22810 100%) !important;
  border: none;
}
.dashboard-welcome-auditor {
  background: linear-gradient(135deg, #8592a3 0%, #565e69 100%) !important;
  border: none;
}
/* Rich-text Materi descriptions (helpers/richText.js): wide tables scroll inside the card instead of
   widening the page on a phone; the editor gets a usable writing area. */
.lms-rich-text figure.table { overflow-x: auto; margin: 1rem 0; }
.lms-rich-text figure.table table { min-width: 480px; }
#lmMatFormSection .ck-editor__editable_inline { min-height: 220px; }
.lms-rich-text figure.media { margin: 1rem 0; max-width: 820px; }
.lms-rich-text figure.media iframe { border: 0; border-radius: .5rem; }

/* Tagihan Saya summary amounts: never cut off on a phone ("Rp 12.500.000" in half a row). */
.lms-amount { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
@media (min-width: 768px) { .lms-amount { font-size: 1.25rem; } }

/* Online presence dot (modules/user, platform dashboard): grey = seen earlier, green = online now. */
.presence-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-secondary, #8592a3); vertical-align: middle; }
.presence-dot.online { background: var(--bs-success, #71dd37); box-shadow: 0 0 0 .2rem rgba(113, 221, 55, .25); }