:root {
  --app-glass: rgb(255 255 255 / 5%);
  --app-glass-strong: rgb(255 255 255 / 8%);
  --app-border: rgb(196 181 253 / 16%);
  --app-bg: #0d0538;
  --app-panel: #171044;
  --app-panel-soft: #21175a;
  --app-blue: #102a8c;
  --app-blue-bright: #1d4ed8;
  --app-cyan: #22d3ee;
  --app-action: #7257e8;
  --app-action-deep: #4c35be;
  --app-action-secondary: #312c55;
  --app-shell-surface: #120043;
  --app-shell-surface-deep: #120043;
  --app-shell-surface-bright: #21007d;
  --app-main-panel: #0d0538;
  --app-shell-border: rgb(255 255 255 / 8%);
  --app-navbar-height: 4rem;
  --app-sidebar-collapsed-width: 5rem;
  --app-sidebar-expanded-width: 15rem;
  --app-main-panel-radius: 0;
  --app-radius-card: 18px;
  --app-radius-control: 14px;
  --app-shadow-panel: 0 14px 32px rgb(4 1 24 / 28%);
  --app-shadow-float: 0 20px 44px rgb(4 1 24 / 48%);
}

.app-shell-bg {
  background: var(--app-bg) !important;
  background-image: none !important;
}

body#body-pd {
  background-color: var(--app-bg) !important;
  background-image: none !important;
}

body#body-pd::before {
  content: none;
}

body#body-pd[data-sidebar="expanded"]::before {
  content: none;
}

#header {
  background: var(--app-shell-surface) !important;
  border-bottom: 1px solid var(--app-shell-border) !important;
  left: var(--app-sidebar-collapsed-width) !important;
  padding-left: 1rem !important;
  box-shadow: none !important;
}

body#body-pd[data-sidebar="expanded"] #header {
  left: var(--app-sidebar-expanded-width) !important;
}

#main-content {
  position: relative;
  margin-top: var(--app-navbar-height) !important;
  margin-left: var(--app-sidebar-collapsed-width) !important;
  width: auto !important;
  max-width: none !important;
  padding: 2.5rem 3rem !important;
  background: var(--app-main-panel);
  border-top: 1px solid var(--app-shell-border);
  border-left: 1px solid var(--app-shell-border);
  border-radius: 0;
  min-height: calc(100vh - var(--app-navbar-height));
  overflow: hidden;
}

.dashboard-page {
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.dashboard-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#body-pd[data-sidebar="expanded"] #main-content {
  margin-left: var(--app-sidebar-expanded-width) !important;
}

.app-ict-brand {
  font-family: Nunito, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app-card {
  border: 1px solid var(--app-border);
  background: rgb(23 16 68 / 86%);
  box-shadow: var(--app-shadow-panel);
  backdrop-filter: blur(8px);
}

.app-card-hover {
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.app-card-hover:hover {
  transform: translateY(-2px);
  border-color: rgb(196 181 253 / 30%);
  box-shadow: var(--app-shadow-float);
}

.app-muted-panel {
  border: 1px solid var(--app-border);
  background: rgb(255 255 255 / 4.5%);
}

.app-soft-input {
  border: 1px solid var(--app-border);
  background: rgb(255 255 255 / 7.5%);
  color: #fff;
}

.app-btn,
.app-btn-primary,
.wizard-primary {
  border: 1px solid rgb(196 181 253 / 36%);
  background: var(--app-action) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgb(76 53 190 / 28%);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.app-btn::after,
.app-btn-primary::after,
.wizard-primary::after {
  content: none;
}

.app-btn:hover,
.app-btn-primary:hover,
.wizard-primary:hover {
  transform: translateY(-1px);
  background: #8069ee !important;
  box-shadow: 0 10px 20px rgb(76 53 190 / 34%);
}

.app-btn-secondary,
.wizard-secondary {
  border: 1px solid rgb(196 181 253 / 18%) !important;
  background: var(--app-action-secondary) !important;
  color: #fff !important;
  box-shadow: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.app-btn-success,
.app-btn-warning {
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--app-radius-control);
  color: #fff;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.app-btn-success {
  border-color: rgb(110 231 183 / 32%);
  background: #087c58;
}

.app-btn-warning {
  border-color: rgb(253 230 138 / 30%);
  background: #9a6700;
}

.app-btn-success:hover,
.app-btn-warning:hover {
  transform: translateY(-1px);
}

.app-btn-success:hover {
  background: #0b8f65;
}

.app-btn-warning:hover {
  background: #ad7600;
}

.app-btn-purple-gradient {
  min-height: 3rem;
  border: 1px solid rgb(196 181 253 / 30%);
  border-radius: 14px;
  background: linear-gradient(100deg, #4f2dd4, #6b2ff8);
  color: #fff;
  box-shadow: 0 10px 24px rgb(79 45 212 / 26%);
  transition:
    filter 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.app-btn-purple-gradient:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgb(79 45 212 / 34%);
}

.app-btn-purple-gradient:focus-visible {
  outline: 3px solid rgb(196 181 253 / 68%);
  outline-offset: 2px;
}

.app-btn-secondary:hover,
.wizard-secondary:hover {
  transform: translateY(-1px);
  background: #403961 !important;
  box-shadow: none;
}

.app-dark-select,
select {
  color-scheme: dark;
  background-color: #1a114c !important;
  color: #fff !important;
  border-color: rgb(196 181 253 / 22%) !important;
}

.app-dark-select option,
select option {
  background: #160b40;
  color: #fff;
}

.app-control {
  min-height: 2.75rem;
  border: 1px solid rgb(196 181 253 / 20%);
  border-radius: var(--app-radius-control);
  background: #1a114c;
  color: #fff;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.app-control:hover {
  border-color: rgb(196 181 253 / 36%);
}

.app-control:focus-visible,
.app-btn:focus-visible,
.app-btn-primary:focus-visible,
.app-btn-secondary:focus-visible,
.app-icon-button:focus-visible {
  outline: 3px solid rgb(103 232 249 / 62%);
  outline-offset: 2px;
}

.app-icon-button {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(196 181 253 / 20%);
  border-radius: var(--app-radius-control);
  background: rgb(255 255 255 / 6%);
  color: rgb(255 255 255 / 88%);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.app-icon-button:hover {
  transform: translateY(-1px);
  border-color: rgb(196 181 253 / 38%);
  background: rgb(255 255 255 / 11%);
}

.app-icon-tile {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgb(196 181 253 / 18%);
  background: #2b1b68;
  color: #d8ccff;
}

.app-icon-tile--cyan {
  background: #103d5b;
  color: #a5f3fc;
}

.app-icon-tile--green {
  background: #164936;
  color: #bbf7d0;
}

.app-icon-tile--amber {
  background: #5b3b10;
  color: #fde68a;
}

.app-icon-tile--rose {
  background: #5a1c3d;
  color: #fecdd3;
}

.sensitive-value[data-hidden="1"] [data-sensitive-real] {
  display: none;
}

.sensitive-value[data-hidden="0"] [data-sensitive-mask] {
  display: none;
}

.sensitive-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 82%);
}

#nav-bar {
  background: var(--app-shell-surface) !important;
  border-right: 1px solid var(--app-shell-border) !important;
  box-shadow: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#nav-bar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#nav-bar nav {
  min-height: 100%;
}

.app-page-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.app-empty-state {
  border: 1px dashed rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 4.5%);
  border-radius: var(--app-radius-card);
  padding: 2rem;
  text-align: center;
}

.app-skeleton {
  position: relative;
  overflow: hidden;
  background: rgb(255 255 255 / 6%);
}

.app-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 12%), transparent);
  animation: app-skeleton 1.45s infinite;
}

img[loading="lazy"],
video[preload="metadata"] {
  background-color: rgb(255 255 255 / 6%);
}

.media-loading {
  position: relative;
  overflow: hidden;
}

.media-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 13%), transparent);
  animation: app-skeleton 1.45s infinite;
  pointer-events: none;
}

.media-loading.is-loaded::after {
  display: none;
}

@keyframes app-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.app-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 8%);
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-search-results {
  max-height: min(430px, calc(100vh - 120px));
  overflow-y: auto;
}

.global-search-item[aria-selected="true"] {
  background: rgb(196 181 253 / 14%);
}

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

body#body-pd > footer.footer {
  margin-left: var(--app-sidebar-collapsed-width);
  background: #090229;
  border-top-color: var(--app-shell-border);
  border-left: 1px solid var(--app-shell-border);
}

body#body-pd[data-sidebar="expanded"] > footer.footer {
  margin-left: var(--app-sidebar-expanded-width);
}

@media (width >= 768px) and (width <= 1023.98px) {
  :root {
    --app-navbar-height: 3.75rem;
    --app-main-panel-radius: 0;
  }
}

@media (width <= 767.98px) {
  :root {
    --app-navbar-height: 3.5rem;
    --app-main-panel-radius: 0;
  }

  body#body-pd::before,
  body#body-pd[data-sidebar="expanded"]::before,
  body#body-pd[data-sidebar="collapsed"]::before {
    content: none;
  }

  #header,
  body#body-pd[data-sidebar="expanded"] #header,
  body#body-pd[data-sidebar="collapsed"] #header {
    left: 0 !important;
    padding-left: 1rem !important;
  }

  #main-content,
  body#body-pd[data-sidebar="expanded"] #main-content,
  body#body-pd[data-sidebar="collapsed"] #main-content {
    margin-left: 0 !important;
    margin-top: var(--app-navbar-height) !important;
    border-radius: 0;
  }

  body#body-pd > footer.footer,
  body#body-pd[data-sidebar="expanded"] > footer.footer,
  body#body-pd[data-sidebar="collapsed"] > footer.footer {
    margin-left: 0;
  }

  #main-content {
    padding: 1.25rem 0.85rem 2rem !important;
  }

  .app-card {
    border-radius: 1.15rem;
  }

  .app-btn,
  .app-btn-primary,
  .wizard-primary {
    min-height: 2.85rem;
  }
}

/* ── Dropdown select: selalu ungu-gelap agar menyatu dengan tema ── */
select,
.app-dark-select {
  color-scheme: dark !important;
  background-color: rgba(23, 9, 70, 0.95) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
  border-radius: 0.75rem !important;
}

select:focus,
.app-dark-select:focus {
  background-color: rgba(30, 12, 85, 0.98) !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22) !important;
}

select option,
.app-dark-select option {
  background-color: #150841 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

select option:hover,
select option:focus,
select option:checked,
.app-dark-select option:hover,
.app-dark-select option:focus,
.app-dark-select option:checked {
  background-color: #2b1170 !important;
  color: #ffffff !important;
}